Back to Details

frontend-slides

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Slides

前端幻灯片

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.
Inspired by the visual exploration approach showcased in work by zarazhangrui (credit: @zarazhangrui).
创建零依赖、富动画效果的HTML演示文稿，可直接在浏览器中运行。
灵感来自zarazhangrui作品中展示的视觉探索方法（致谢：@zarazhangrui）。

When to Activate

适用场景

  • Creating a talk deck, pitch deck, workshop deck, or internal presentation
  • Converting 
    .ppt
    or 
    .pptx
    slides into an HTML presentation
  • Improving an existing HTML presentation's layout, motion, or typography
  • Exploring presentation styles with a user who does not know their design preference yet
  • 创建演讲文稿、路演文稿、研讨会幻灯片或内部演示文稿
  • 将
    .ppt
    或
    .pptx
    幻灯片转换为HTML演示文稿
  • 改进现有HTML演示文稿的布局、动效或排版
  • 为尚不明确自身设计偏好的用户探索演示文稿风格

Non-Negotiables

核心要求

  1. Zero dependencies: default to one self-contained HTML file with inline CSS and JS.
  2. Viewport fit is mandatory: every slide must fit inside one viewport with no internal scrolling.
  3. Show, don't tell: use visual previews instead of abstract style questionnaires.
  4. Distinctive design: avoid generic purple-gradient, Inter-on-white, template-looking decks.
  5. Production quality: keep code commented, accessible, responsive, and performant.
Before generating, read 
STYLE_PRESETS.md
for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas.
  1. 零依赖：默认生成单个自包含HTML文件，内嵌CSS和JS。
  2. 必须适配视口：每张幻灯片必须完全适配单个视口，内部无滚动。
  3. 可视化展示而非口头描述：使用视觉预览替代抽象的风格调查问卷。
  4. 独特设计：避免使用千篇一律的紫色渐变、白色背景配Inter字体的模板化文稿。
  5. 生产级质量：代码需添加注释、具备可访问性、响应式且性能优异。
生成前，请阅读
STYLE_PRESETS.md
获取视口安全的CSS基础模板、内容密度限制、预设样式目录及CSS常见问题。

Workflow

工作流程

1. Detect Mode

1. 检测模式

Choose one path:
  • New presentation: user has a topic, notes, or full draft
  • PPT conversion: user has 
    .ppt
    or 
    .pptx
  • Enhancement: user already has HTML slides and wants improvements
选择以下路径之一：
  • 新建演示文稿：用户已有主题、笔记或完整草稿
  • PPT转换：用户拥有
    .ppt
    或
    .pptx
    文件
  • 优化升级：用户已有HTML幻灯片，需要改进效果

2. Discover Content

2. 收集内容

Ask only the minimum needed:
  • purpose: pitch, teaching, conference talk, internal update
  • length: short (5-10), medium (10-20), long (20+)
  • content state: finished copy, rough notes, topic only
If the user has content, ask them to paste it before styling.
仅询问必要信息：
  • 用途：路演、教学、会议演讲、内部更新
  • 长度：短（5-10页）、中（10-20页）、长（20页以上）
  • 内容状态：文案已完成、粗略笔记、仅确定主题
如果用户已有内容，请让他们先粘贴内容再进行样式设计。

3. Discover Style

3. 确定风格

Default to visual exploration.
If the user already knows the desired preset, skip previews and use it directly.
Otherwise:
  1. Ask what feeling the deck should create: impressed, energized, focused, inspired.
  2. Generate 3 single-slide preview files in 
    .ecc-design/slide-previews/
    .
  3. Each preview must be self-contained, show typography/color/motion clearly, and stay under roughly 100 lines of slide content.
  4. Ask the user which preview to keep or what elements to mix.
Use the preset guide in 
STYLE_PRESETS.md
when mapping mood to style.
默认采用视觉探索方式。
如果用户已明确想要的预设样式，可跳过预览直接使用该样式。
否则：
  1. 询问用户希望文稿传递何种感受：令人印象深刻、充满活力、专注严谨、启发灵感。
  2. 在
    .ecc-design/slide-previews/
    目录下生成3张单页预览文件。
  3. 每张预览文件必须是自包含的，清晰展示排版/色彩/动效，幻灯片内容行数控制在约100行以内。
  4. 询问用户保留哪张预览，或希望混合哪些元素。
参考
STYLE_PRESETS.md
中的预设指南，将情绪映射至对应风格。

4. Build the Presentation

4. 制作演示文稿

Output either:
  • presentation.html
  • [presentation-name].html
Use an 
assets/
folder only when the deck contains extracted or user-supplied images.
Required structure:
  • semantic slide sections
  • a viewport-safe CSS base from 
    STYLE_PRESETS.md
  • CSS custom properties for theme values
  • a presentation controller class for keyboard, wheel, and touch navigation
  • Intersection Observer for reveal animations
  • reduced-motion support
输出以下其中一种文件：
  • presentation.html
  • [presentation-name].html
仅当文稿包含提取的或用户提供的图片时，才使用
assets/
文件夹。
必备结构：
  • 语义化幻灯片章节
  • 来自
    STYLE_PRESETS.md
    的视口安全CSS基础模板
  • 用于主题值的CSS自定义属性
  • 支持键盘、滚轮和触摸导航的演示控制器类
  • 用于触发入场动画的Intersection Observer
  • 支持减少动效模式

5. Enforce Viewport Fit

5. 强制适配视口

Treat this as a hard gate.
Rules:
  • every 
    .slide
    must use 
    height: 100vh; height: 100dvh; overflow: hidden;
  • all type and spacing must scale with 
    clamp()
  • when content does not fit, split into multiple slides
  • never solve overflow by shrinking text below readable sizes
  • never allow scrollbars inside a slide
Use the density limits and mandatory CSS block in 
STYLE_PRESETS.md
.
将此作为硬性要求。
规则：
  • 每张
    .slide
    必须使用
    height: 100vh; height: 100dvh; overflow: hidden;
  • 所有文字和间距必须使用
    clamp()
    进行缩放
  • 如果内容无法适配，拆分至多张幻灯片
  • 绝不能通过将文字缩小到无法阅读的尺寸来解决溢出问题
  • 绝不允许幻灯片内部出现滚动条
参考
STYLE_PRESETS.md
中的内容密度限制和强制CSS代码块。

6. Validate

6. 验证

Check the finished deck at these sizes:
  • 1920x1080
  • 1280x720
  • 768x1024
  • 375x667
  • 667x375
If browser automation is available, use it to verify no slide overflows and that keyboard navigation works.
在以下尺寸下检查最终文稿：
  • 1920x1080
  • 1280x720
  • 768x1024
  • 375x667
  • 667x375
如果有浏览器自动化工具可用，使用它来验证所有幻灯片无溢出且键盘导航正常工作。

7. Deliver

7. 交付

At handoff:
  • delete temporary preview files unless the user wants to keep them
  • open the deck with the platform-appropriate opener when useful
  • summarize file path, preset used, slide count, and easy theme customization points
Use the correct opener for the current OS:
  • macOS: 
    open file.html
  • Linux: 
    xdg-open file.html
  • Windows: 
    start "" file.html
交付时：
  • 除非用户要求保留，否则删除临时预览文件
  • 如有需要，使用对应平台的合适命令打开文稿
  • 总结文件路径、使用的预设样式、幻灯片数量及简易主题自定义要点
使用对应操作系统的正确打开命令：
  • macOS: 
    open file.html
  • Linux: 
    xdg-open file.html
  • Windows: 
    start "" file.html

PPT / PPTX Conversion

PPT / PPTX转换

For PowerPoint conversion:
  1. Prefer 
    python3
    with 
    python-pptx
    to extract text, images, and notes.
  2. If 
    python-pptx
    is unavailable, ask whether to install it or fall back to a manual/export-based workflow.
  3. Preserve slide order, speaker notes, and extracted assets.
  4. After extraction, run the same style-selection workflow as a new presentation.
Keep conversion cross-platform. Do not rely on macOS-only tools when Python can do the job.
对于PowerPoint转换：
  1. 优先使用
    python3
    搭配
    python-pptx
    提取文本、图片和备注。
  2. 如果
    python-pptx
    不可用，询问用户是安装该工具还是采用手动/导出替代方案。
  3. 保留幻灯片顺序、演讲者备注和提取的资源。
  4. 提取完成后，执行与新建演示文稿相同的风格选择流程。
确保转换流程跨平台可用。当Python可完成任务时，不要依赖仅支持macOS的工具。

Implementation Requirements

实现要求

HTML / CSS

HTML / CSS

  • Use inline CSS and JS unless the user explicitly wants a multi-file project.
  • Fonts may come from Google Fonts or Fontshare.
  • Prefer atmospheric backgrounds, strong type hierarchy, and a clear visual direction.
  • Use abstract shapes, gradients, grids, noise, and geometry rather than illustrations.
  • 除非用户明确要求多文件项目，否则使用内嵌CSS和JS。
  • 字体可来自Google Fonts或Fontshare。
  • 优先选择氛围感背景、清晰的排版层级和明确的视觉方向。
  • 使用抽象形状、渐变、网格、杂色和几何图形而非插画。

JavaScript

JavaScript

Include:
  • keyboard navigation
  • touch / swipe navigation
  • mouse wheel navigation
  • progress indicator or slide index
  • reveal-on-enter animation triggers
需包含：
  • 键盘导航
  • 触摸/滑动导航
  • 鼠标滚轮导航
  • 进度指示器或幻灯片索引
  • 进入视图时的动画触发

Accessibility

无障碍性

  • use semantic structure (
    main
    , 
    section
    , 
    nav
    )
  • keep contrast readable
  • support keyboard-only navigation
  • respect 
    prefers-reduced-motion
  • 使用语义化结构（
    main
    、
    section
    、
    nav
    ）
  • 保持对比度符合可读性要求
  • 支持纯键盘导航
  • 尊重
    prefers-reduced-motion
    设置

Content Density Limits

内容密度限制

Use these maxima unless the user explicitly asks for denser slides and readability still holds:
Slide typeLimit
Title1 heading + 1 subtitle + optional tagline
Content1 heading + 4-6 bullets or 2 short paragraphs
Feature grid6 cards max
Code8-10 lines max
Quote1 quote + attribution
Image1 image constrained by viewport
除非用户明确要求更密集的幻灯片且仍能保证可读性，否则遵循以下最大值：
幻灯片类型限制
标题页1个主标题 + 1个副标题 + 可选标语
内容页1个标题 + 4-6个项目符号或2段短文本
功能网格最多6个卡片
代码页最多8-10行代码
引用页1段引用 + 署名
图片页1张适配视口的图片

Anti-Patterns

反模式

  • generic startup gradients with no visual identity
  • system-font decks unless intentionally editorial
  • long bullet walls
  • code blocks that need scrolling
  • fixed-height content boxes that break on short screens
  • invalid negated CSS functions like 
    -clamp(...)
  • 无视觉辨识度的通用创业风渐变
  • 除非有意走编辑风格，否则避免使用系统字体文稿
  • 冗长的项目符号列表
  • 需要滚动查看的代码块
  • 固定高度的内容框，在短屏幕上会断裂
  • 无效的负向CSS函数如
    -clamp(...)

Related ECC Skills

相关ECC技能

  • frontend-patterns
    for component and interaction patterns around the deck
  • liquid-glass-design
    when a presentation intentionally borrows Apple glass aesthetics
  • e2e-testing
    if you need automated browser verification for the final deck
  • frontend-patterns
    ：用于文稿相关的组件和交互模式
  • liquid-glass-design
    ：当演示文稿有意借鉴Apple玻璃拟态美学时使用
  • e2e-testing
    ：如果需要对最终文稿进行自动化浏览器验证

Deliverable Checklist

交付物检查清单

  • presentation runs from a local file in a browser
  • every slide fits the viewport without scrolling
  • style is distinctive and intentional
  • animation is meaningful, not noisy
  • reduced motion is respected
  • file paths and customization points are explained at handoff
  • 演示文稿可通过本地文件在浏览器中运行
  • 每张幻灯片无需滚动即可适配视口
  • 风格独特且符合设计意图
  • 动画有意义而非冗余
  • 尊重减少动效设置
  • 交付时说明文件路径和自定义要点