frontend-slides

Frontend Slides

创建零依赖、动画丰富的 HTML 演示文稿，完全在浏览器中运行。

核心原则

1. 零依赖 — 单个 HTML 文件，内联 CSS/JS。无需 npm，无需构建工具。
2. 展示而非描述 — 生成可视化预览，而不是抽象的选项。人们通过看到才能发现自己想要什么。
3. 独特设计 — 避免千篇一律的"AI 垃圾"风格。每份演示文稿都必须有定制感。
4. 渐进式披露 — 先读取轻量的风格索引。对于大胆的模板，使用小型预览卡片展示风格预览，仅在用户选定该模板后再加载完整的 design.md。
5. 固定 16:9 舞台（不可协商） — 每份演示文稿都使用 1920×1080 的幻灯片画布，并整体缩放至视口大小。无论在哪种屏幕上，包括手机，幻灯片都必须保持 16:9。不得为适配设备而重新排版幻灯片内容。

设计美学

你倾向于趋同于通用的、"符合分布"的输出。在前端设计中，这会产生用户所称的"AI 垃圾"美学。应避免这一点：打造有创意、与众不同、能让人惊喜并愉悦的前端。

重点关注：

• 字体排版：选择美观、独特、有趣的字体。避免使用 Arial、Inter 等通用字体；应选择能提升前端美感的独特字体。
• 色彩与主题：坚持统一的审美风格。使用 CSS 变量保持一致性。主导色搭配鲜明的点缀色，效果优于怯懦、均匀分布的调色板。可从 IDE 主题和文化美学中汲取灵感。
• 动效：使用动画实现特效和微交互。HTML 优先采用纯 CSS 方案。在可用时，React 使用 Motion 库。聚焦高影响力的时刻：一次精心编排的页面加载，配合错落的 animation-delay 渐显，比分散的微交互更能带来愉悦感。
• 背景：营造氛围与层次感，而不是默认使用纯色。叠加 CSS 渐变、使用几何图案，或添加与整体风格相匹配的情境化效果。

避免通用的 AI 生成美学：

• 过度使用的字体族（Inter、Roboto、Arial、系统字体）
• 陈词滥调的配色方案（尤其是白底上的紫色渐变）
• 可预测的布局和组件模式
• 缺乏语境特色的千篇一律设计

请创造性地诠释，做出意想不到的选择，使其真正符合语境地进行设计。在明暗主题、不同字体、不同美学之间变换。你仍然会在多次生成中趋同于常见选择（例如 Space Grotesk）。应避免这一点：至关重要的是跳出框框思考！

固定舞台规则

以下不变式适用于每份演示文稿中的每一张幻灯片：

• 每份演示文稿都有一个填满浏览器窗口的视口包装层。
• 每张幻灯片都在固定的 1920×1080 舞台内编写。
• 舞台统一缩放以适应视口。它可以出现信箱式或画中画式留白，但不得重新排版内容。
• 不得使用响应式断点为手机重新安排幻灯片内容。
• 使用 1920×1080 设计尺寸下固定的内部幻灯片度量值。
• 幻灯片的可见性必须通过 .active / .visible 控制，使用 viewport-base.css 中的 visibility、opacity 和 pointer-events。切换幻灯片不得使用 display: none / display: block；后续的布局类（如 .slide-content { display: flex; }）可能会覆盖它们，导致所有幻灯片同时可见。
• 仅在舞台之外的非幻灯片 UI 中，或在完整舞台不切实际的小型回退预览中，才使用 clamp()。
• 包含 prefers-reduced-motion 支持。
• 切勿直接对 CSS 函数取负（-clamp()、-min()、-max() 会被静默忽略）——应改用 calc(-1 * clamp(...))。

生成时，请读取 viewport-base.css 并在每份演示文稿中包含其完整内容。

内容密度模式

询问用户这份演示文稿主要是用于阅读还是用于演讲，然后根据其回答进行设计：

密度模式	最适合	设计方式
低密度 / 演讲主导	公开演讲、主题分享、现场讲解	每张幻灯片只表达一个观点，字号大，视觉层级鲜明，留白充足，最多 1-3 个要点，必要时增加幻灯片数量
高密度 / 阅读优先	报告、讲义、异步审阅、详细的内部文档	幻灯片内容更加自成一体，使用结构化网格、表格或注释，在可读前提下可用 4-8 个要点或 4-6 张卡片，间距紧凑但仍需精心安排

基本限制依然适用：不得滚动，不得溢出，面板不得重叠，文字不得小于舒适的阅读字号。如果内容超出所选密度模式的承载范围，应将内容拆分到更多幻灯片中，而不是把内容压缩到拥挤不堪。

---

阶段 0：识别模式

确定用户的需求：

• 模式 A：新建演示文稿：从零开始创建。进入阶段 1。
• 模式 B：PPT 转换：转换 .pptx 文件。进入阶段 4。
• 模式 C：增强：改进现有的 HTML 演示文稿。阅读并理解它，然后进行增强。遵循下方的模式 C 修改规则。

模式 C：修改规则

增强现有演示文稿时，固定舞台的适配是最大风险：

1. 添加内容之前： 统计现有元素，对照密度限制进行检查
2. 添加图片： 将其适配在 1920×1080 的幻灯片画布内。如果幻灯片已达到内容上限，则拆分为两张幻灯片
3. 添加文字： 每张幻灯片最多 4-6 个要点。超出限制时，拆分为续页幻灯片
4. 任何修改之后，务必验证： 幻灯片舞台保持 16:9，文字不溢出卡片，面板不重叠，并且在 1280×720 及一个手机视口下截图显示正常
5. 主动重组： 如果修改会导致溢出，自动拆分内容并告知用户。无需等待用户提出要求

向现有幻灯片添加图片时： 先将图片移至新幻灯片，或减少其他内容。在添加图片之前，务必检查现有内容是否已经占满 1920×1080 的幻灯片舞台。

---

阶段 1：内容探查（新建演示文稿）

一次性提出所有问题，让用户可以同时完成全部填写。如果当前环境提供原生的结构化提问界面，则使用该界面；否则请用一条简洁的消息提出问题，并附上清晰编号的选项：

问题 1：用途（标题："用途"）： 这份演示文稿用于什么？选项：融资路演 / 教学-教程 / 会议演讲 / 内部汇报

问题 2：长度（标题："长度"）： 大约需要多少张幻灯片？选项：简短 5-10 张 / 中等 10-20 张 / 较长 20 张以上

问题 3：内容（标题："内容"）： 内容是否已经准备好？选项：内容已全部准备 / 只有粗略笔记 / 仅有主题

问题 4：密度（标题："密度"）： 演示文稿的密度应当如何？选项：

• "低密度 / 演讲主导"：观点突出，文字较少，视觉留白更充裕
• "高密度 / 阅读优先"：细节更完整，便于异步阅读

在阶段 1 不要询问关于内联编辑的问题。 用户不应在看到草稿之前就需要选择编辑方式。内联编辑是草稿完成后的功能：默认包含该功能，除非用户明确要求锁定或仅导出的文件。

请记住用户选择的密度。它会影响幻灯片数量、字号比例、每张幻灯片的文字量、版式密度，以及是偏向演讲式的视觉幻灯片，还是偏向自成一体的阅读型幻灯片。

如果用户已有内容，请其分享内容。

Step 1.2：图片评估（如提供图片）

如果用户选择"No images"，则跳到第 2 阶段。

如果用户提供了图片文件夹：

1. 扫描：列出所有图片文件（.png、.jpg、.svg、.webp 等）
2. 逐个检查图片：使用 Agent 可用的图片理解能力。如果无法读取图片，则使用文件名或元数据，仅在必要时请用户说明
3. 评估：对每张图片说明其内容、是否可用（USABLE 或 NOT USABLE，并给出原因）、所代表的概念以及主色调
4. 共同设计大纲：精选的图片应与文字一同决定幻灯片结构。这不是"先规划幻灯片再添加图片"，而是从一开始就同时围绕两者进行设计（例如：3 张截图对应 3 张功能页，1 个 logo 对应标题页或结束页）
5. 确认大纲：如有结构化提问机制可用，则使用同一机制确认："这份幻灯片大纲和图片选择是否合适？"选项：Looks good / Adjust images / Adjust outline

**预览中的 Logo：**如果识别出可用的 logo，则在第 2 阶段的每个风格预览中嵌入该 logo（base64 格式），让用户看到自己的品牌以三种不同风格呈现。

---

第 2 阶段：风格探索

**这是"展示而非描述"的阶段。**大多数人难以用文字准确表达设计偏好。

Step 2.0：直接生成 3 个风格预览

根据用途、受众、氛围和内容密度，生成 3 个风格明显不同的单页幻灯片 HTML 预览，展示排版、配色、动画和整体美学风格。

不要询问用户是否想要选项或预设选择器。默认的探索方式始终是视觉对比。

如果用户已经给出了风格倾向，则直接采用。如果没有，则根据场合、受众、内容和利害关系推断可能的氛围。选项应保持足够多样，使用户能够凭视觉做出反应，而无需事先清楚描述自己的品味。

如果用户明确指定了某个预设或大胆模板，则将其作为其中一个选项，并围绕它生成其余的预览位。

阅读 STYLE_PRESETS.md 以获取可安全使用的预设候选。如果存在 bold-template-pack/selection-index.json，也请阅读该精简索引，但暂时不要读取任何 design.md 文件。

氛围	推荐预设
印象深刻/自信	Bold Signal、Electric Studio、Dark Botanical
兴奋/充满活力	Creative Voltage、Neon Cyber、Split Pastel
平静/专注	Notebook Tabs、Paper & Ink、Swiss Modern
启发/感动	Dark Botanical、Vintage Editorial、Pastel Geometry

预览组合规则：

• 默认生成 3 个预览：1 个来自 STYLE_PRESETS.md 的安全预设，至少 1 个来自 bold-template-pack/selection-index.json 的大胆模板，以及 1 个备选（wildcard）。
• 备选可以是第二个大胆模板，也可以是自行设计的定制方案。应选择对用户的场合、受众、氛围和内容最有效、对比最强的那一种。
• 不要强迫所有表现力较强的选项都来自模板库。如果内容简报中存在比现有模板更清晰、更具体的设计机会，则让备选位自由设计。
• 对于保守或利害关系较高的演示文稿，应使安全预设格外克制；选择一个平静、正式程度较高的大胆模板；备选则选用另一个克制的模板，或一个显得权威而非装饰性的定制设计。
• 对于富有表现力的演示文稿，应将安全预设保留为可读性良好的备用方案；选择一个强烈的大胆模板；备选则应大胆、贴合具体语境，并与其他两个预览明显不同。
• 如果大胆模板匹配度较弱，则使用备选位进行定制设计，或退回到另一个安全预设，而不要勉强套用模板。

定制备选设计规则：

• 遵循上方的设计美学部分：避免通用的"AI 套路感"，不使用默认的字体、配色或布局，不采用紫色渐变配白底的老套设计，也不做千篇一律的仪表盘或卡片式外观。
• 贴合用户说明的场合、受众、情绪氛围和内容密度。定制设计应当专为这份演示文稿打造，而不只是"好看"。
• 形成明确的视觉主张：独特的排版、坚定的配色、可识别的布局体系，以及一个有力的氛围或图形元素。
• 确保可以完整用于整套演示文稿。预览需要体现出一套可扩展为章节页、内容页、引语页、对比页和结束页的设计系统。
• 使用固定的 1920×1080 舞台规则，并与其他所有选项通过相同的预览真实性检查。
• 切勿在幻灯片上显示"custom"、"wildcard"、"AI-generated"或任何设计过程相关的标签。

加粗的模板选择规则：

• 将用户的用途和情绪与 mood、tone、best_for、avoid_for、formality、density 和 scheme 进行匹配。
• 将 best_for 中的示例视为柔性参考信号，而非严格的行业筛选条件。
• 确保三个预览彼此之间真正有所区别。
• 选定大胆模板候选后，只从选择索引中 preview_md 路径读取这些候选的 preview.md 文件。
• preview.md 仅用于标题页预览。在用户选定最终模板之前，不要读取完整的 design.md 文件。
• 除非选定的最终 design.md 缺少关键的实现细节，否则不要读取或复制 template.html。

预览真实性规则（不可协商）：

• 每个样式预览都必须看起来像用户演示文稿中真实的第一张幻灯片，而不是诊断用的卡片。
• 切勿在幻灯片上呈现内部工作流文本：不要出现 preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径或源文档标签。
• 切勿在幻灯片本身上显示模板名称或 slug 名称。模板/样式名称只能出现在发给用户的消息中。
• 除非用户明确希望在演示文稿中出现该确切措辞，否则不要将用户需求备注作为幻灯片内容呈现，例如"sharp and provocative"、"safe option"、"bold option"、"for internal sharing"或"audience: ..."。
• 如果幻灯片需要页眉页脚等装饰元素，只能使用真实的演示文稿装饰信息：演示文稿标题、章节标题、日期、作者、公司、页码，或用户材料中真实的内容短语。
• 打开预览之前，检查可见文本，若出现任何内部元数据则进行修改。

将预览保存到 .frontend-slides/slide-previews/（style-a.html、style-b.html、style-c.html）。每个文件应为独立、紧凑的文件，展示一张带动画的标题幻灯片。

自动为用户打开每个预览。

第 2.1 步：用户选择

提问（header：“Style”）： 您更喜欢哪一种样式预览？选项：Style A：[名称] / Style B：[名称] / Style C：[名称] / 混合元素

如果选择“混合元素”，请询问具体要求。

---

第三阶段：生成演示文稿

使用第一阶段的内容（文字，或文字加精选图片）和第二阶段的风格生成完整的演示文稿。

如果提供了图片，幻灯片大纲已在第 1.2 步中纳入这些图片。如果没有提供，则由 CSS 生成的视觉元素（渐变、形状、图案）提供视觉趣味。这是一条完全受支持的一等路径。

在整个演示文稿中应用用户选择的信息密度：

• 低密度 / 演讲主导： 使用更多幻灯片，每张幻灯片承载较少的观点。多用大标题、简短短语、视觉隐喻、章节过渡页、引语或声明页，并保持适合演讲者的节奏。
• 高密度 / 阅读优先： 让幻灯片更加自成体系。使用结构化网格、对比表格、带注释的图示、说明文字和简明的解释性文案。保持清晰的层级，使其看起来是经过设计的，而不是把文档直接粘贴到幻灯片上。

如果用户的需求混合，选择两种模式中更接近的一种，而不是另创中间方案：面向现场观众的说服性演示默认采用低密度；用于异步传阅或详细审阅的内容默认采用高密度。

切勿让高密度变成视觉杂乱。如果高密度幻灯片开始溢出，请将其拆分或重新设计为更清晰的结构。

如果用户从 bold-template-pack 中选择了一个醒目模板，则在生成前完整阅读该模板的 design.md。不要阅读其他醒目模板。将 design.md 视为设计方案：

• 保留其字体、配色、装饰元素词汇、间距节奏和组件语法。
• 无论源模板最初使用的是 deck-stage.js 还是视口自适应 CSS，最终演示文稿都应生成为固定的 1920×1080 舞台，并统一缩放以适配视口。
• 将 design.md 中的视口自适应数值视为设计比例，并转换为 1920×1080 舞台坐标。不要在最终演示文稿中将其保留为实时的视口重排规则。
• 输出保持为单个自包含的 Frontend Slides HTML 文件。
• 不要复制演示内容，也不要过于生硬地模仿源模板。
• 仅将 template.html 作为所选模板的最后手段实现参考。
• 生成后，在渲染的浏览器截图中同时检查内容溢出和面板重叠。仅靠 scrollHeight 检查是不够的，因为网格面板可能在视觉上相互覆盖。

如果用户选择了自生成的自定义通配模板，则将该预览的 CSS 和布局视为设计方案：

• 保留其字体、配色、装饰元素词汇、间距节奏、网格逻辑和组件语法。
• 将同一视觉系统扩展到整个演示文稿。用户选定自定义方向后，不要切换到预设或醒目模板。
• 从该视觉系统设计所有缺失的幻灯片布局，而不是从其他风格中借用图案。
• 输出与其他演示文稿一样保持固定舞台、单文件，并经过视觉验证。

生成前，请阅读以下配套文件：

• html-template.md — HTML 架构与 JS 功能
• viewport-base.css — 必需的 CSS（需完整引入）
• animation-patterns.md — 所选感觉对应的动画参考

关键要求：

• 单个自包含的 HTML 文件，所有 CSS/JS 均内联
• 在 <style> 块中完整包含 viewport-base.css 的全部内容
• 字体使用 Fontshare 或 Google Fonts，切勿使用系统字体
• 添加详细注释，说明每个部分的作用
• 每个部分都需要清晰的 /* === SECTION NAME === */ 注释块

---

第 4 阶段：PPT 转换

转换 PowerPoint 文件时：

1. 提取内容：运行 python scripts/extract-pptx.py <input.pptx> <output_dir>（如有需要，先安装 python-pptx：pip install python-pptx）
2. 与用户确认：展示提取出的幻灯片标题、内容摘要和图片数量
3. 选择风格：进入第 2 阶段进行风格探索
4. 生成 HTML：转换为所选风格，保留全部文本、assets/ 中的图片、幻灯片顺序以及演讲者备注（以 HTML 注释形式保存）

---

第 5 阶段：交付

1. 清理：如果 .frontend-slides/slide-previews/ 存在，则将其删除
2. 打开：使用 open [filename].html 在浏览器中启动
3. 总结：告知用户：
   • 文件位置、风格名称、幻灯片页数
   • 导航方式：方向键、空格键，若已启用则可滑动或点击
   • 自定义方法：颜色通过 :root CSS 变量修改，字体通过字体链接修改，动画通过 .reveal 类修改
   • 支持内联文本编辑：将鼠标悬停在左上角或按 E 键进入编辑模式，点击任意文本即可编辑，按 Ctrl+S 保存
   • 提供初稿后的常用后续操作：请求修改、直接在浏览器中编辑文本，或导出/分享

---

第 6 阶段：分享与导出（可选）

交付后，询问用户：“是否需要分享这份演示文稿？我可以将其部署到在线链接（支持包括手机在内的任何设备访问），或将其导出为 PDF。”

选项：

• 部署到 URL：可在任何设备上访问的分享链接
• 导出为 PDF：适用于邮件、Slack 和打印的通用文件
• 两者都要
• 不需要

如果用户拒绝，则到此结束。如果用户选择其中一项或两项，则继续执行以下步骤。

6A：部署到在线 URL（Vercel）

这会将演示文稿部署到 Vercel，这是一个免费的托管平台。该链接可在任何设备（手机、平板、笔记本电脑）上访问，并会一直在线，直到用户将其下线。

如果用户从未部署过，请逐步引导：

1. 检查 Vercel CLI 是否已安装：运行 npx vercel --version。如果未找到，请先安装 Node.js（macOS 上使用 brew install node，或从 https://nodejs.org 下载）。

2. 检查用户是否已登录：运行 npx vercel whoami。

   • 如果未登录，请说明："Vercel 是一项免费的托管服务。部署需要一个账户。下面我带你完成这些步骤："
     • 第 1 步：请用户在浏览器中访问 https://vercel.com/signup
     • 第 2 步：可以使用 GitHub、Google、邮箱等任意最方便的方式注册
     • 第 3 步：注册完成后，运行 vercel login 并按提示操作（会打开浏览器窗口进行授权）
     • 第 4 步：使用 vercel whoami 确认登录状态
   • 在用户确认已登录之前，请等待，不要继续操作。

3. 部署：运行部署脚本：

   bash scripts/deploy.sh <path-to-presentation>
   

   该脚本既接受文件夹（其中包含 index.html），也接受单个 HTML 文件。

4. 分享 URL：告诉用户：

   • 在线 URL（来自脚本输出）
   • 它可在任何设备上使用，可以通过短信、Slack 或邮件分享
   • 之后如需下线：访问 https://vercel.com/dashboard 并删除该项目
   • Vercel 免费版额度很充足，不会产生费用

⚠ 部署注意事项：

• 本地图片/视频必须与 HTML 一同部署。 部署脚本会自动检测 HTML 中通过 src="..." 引用的文件并将其打包。但如果演示文稿通过 CSS background-image 或非常规路径引用文件，这些文件可能会被遗漏。部署前请先验证：打开已部署的 URL，检查所有图片是否正常加载。如有损坏，最稳妥的解决办法是将 HTML 及其所有资源放入同一个文件夹，然后部署该文件夹，而不是单独的 HTML 文件。
• 资源较多时优先部署文件夹。 如果演示文稿所在文件夹中有图片等资源（例如 my-deck/index.html + my-deck/logo.png），请直接部署该文件夹：bash scripts/deploy.sh ./my-deck/。这比部署单个 HTML 文件更可靠，因为文件夹中的全部内容会原样上传。
• 文件名中的空格可以使用，但可能引发问题。 脚本可以处理文件名中的空格，但 Vercel 的 URL 会将空格编码为 %20。如有可能，请避免在图片文件名中使用空格。如果用户的图片文件名含空格，脚本会进行处理；但如果图片仍然无法显示，解决办法是将文件名中的空格改为连字符。
• 重新部署会更新同一 URL。 对同一演示文稿再次运行部署脚本，会覆盖之前的部署。URL 保持不变，无需分享新链接。

6B：导出为 PDF

该功能会将每张幻灯片截图，并合并为一个 PDF。非常适合作为邮件附件、嵌入文档或打印。

注意： 动画和交互效果不会保留，PDF 是静态快照。这是正常且预期的行为，请告知用户，以免他们感到意外。

1. 运行导出脚本：

   bash scripts/export-pdf.sh <path-to-html> [output.pdf]
   

   如果未指定输出路径，PDF 将保存在 HTML 文件旁边。

2. 后台流程（请向用户简要说明）：

   • 无头浏览器以 1920×1080（标准宽屏）打开演示文稿
   • 逐张对幻灯片进行截图
   • 所有截图合并为一个 PDF
   • 脚本需要 Playwright（一种浏览器自动化工具）；如果缺失，会自动安装

3. 如果 Playwright 安装失败：

   • 最常见的问题是 Chromium 未能下载。请运行：npx playwright install chromium
   • 如果仍然失败，可能是网络或防火墙问题。请让用户尝试更换网络。

4. 交付 PDF：脚本会自动打开该文件。请告知用户：

   • 文件位置和大小
   • 该文件在任何地方都能使用，例如邮件、Slack、Notion、Google 文档以及打印
   • 动画会被替换为其最终视觉状态（外观依然出色，只是变为静态）

⚠ PDF 导出注意事项：

• 首次运行较慢。 脚本会安装 Playwright，并将 Chromium 浏览器（约 150MB）下载到临时目录中。此过程每次运行只发生一次。请提醒用户首次可能需要 30 到 60 秒；同一会话中后续导出会更快。
• 幻灯片必须使用 class="slide"。 导出脚本通过查询 .slide 元素来查找幻灯片。如果演示文稿使用了其他类名，脚本会报告“找到 0 张幻灯片”并失败。由本 Skill 生成的演示文稿都使用 .slide，因此这一点仅对外部创建的 HTML 有影响。
• 本地图片必须可通过 HTTP 加载。 脚本会启动本地服务器，并通过它加载 HTML（以便 Google Fonts 和相对图片路径正常工作）。如果图片使用绝对文件系统路径（例如 src="/Users/name/photo.png"）而非相对路径（例如 src="photo.png"），图片将无法加载。生成的演示文稿始终使用相对路径，但转换而来或由用户提供的演示文稿可能并非如此，需要检查并在必要时修正。
• 本地图片会出现在 PDF 中，前提是它们与 HTML 文件位于同一目录（或相对于该文件的路径）。导出脚本会通过 HTTP 提供 HTML 所在父目录的内容，因此 src="photo.png" 这样的相对路径可以正确解析，包括文件名中含有空格的情况。如果图片仍未显示，请检查：（1）图片文件是否确实存在于所引用的路径；（2）路径是否为相对路径，而非类似 /Users/name/photo.png 的绝对文件系统路径。
• 演示文稿较大时，PDF 也会较大。 每张幻灯片都会被截取为完整的 1920×1080 PNG 截图。一个 18 张幻灯片的演示文稿可能生成约 20MB 的 PDF。如果 PDF 超过 10MB，请询问用户：“PDF 大小为 [大小]。是否需要我将其压缩？压缩后画质会略有下降，但文件会小很多。” 如果用户同意，请使用 --compact 参数重新运行导出：

  bash scripts/export-pdf.sh <path-to-html> [output.pdf] --compact
  

  这会以 1280×720 而非 1920×1080 进行渲染，通常可将文件大小减少 50% 至 70%，且视觉差异极小。

---

配套文件

文件	用途	何时阅读
STYLE_PRESETS.md	12 套精选视觉预设，包含颜色、字体和标志性元素	阶段 2（风格选择）
bold-template-pack/selection-index.json	用于候选选择的精简粗体模板元数据	阶段 2（风格选择）
bold-template-pack/templates/*/preview.md	用于入围粗体标题预览的轻量风格卡片	阶段 2，入围之后
bold-template-pack/templates/*/design.md	仅针对所选粗体模板的详细设计系统文档	阶段 3，用户选定之后
viewport-base.css	必需的固定舞台 CSS——需复制到每个演示文稿中	阶段 3（生成）
html-template.md	HTML 结构、JS 功能和代码质量标准	阶段 3（生成）
animation-patterns.md	CSS/JS 动画片段及效果与感受对照指南	阶段 3（生成）
scripts/extract-pptx.py	用于提取 PPT 内容的 Python 脚本	阶段 4（转换）
scripts/deploy.sh	将幻灯片部署到 Vercel，以便即时分享	阶段 6（分享）
scripts/export-pdf.sh	将幻灯片导出为 PDF	阶段 6（分享）