create-slide

在 open-slide 中创建幻灯片

此技能负责起草新演示文稿的工作流。技术参考——文件约定、1920×1080 画布、字号比例、配色、布局、素材——位于 slide-authoring 技能中。需要了解页面的结构方式时，请阅读该技能。本技能假定你会在编写代码前查阅它。

你只能在 slides/<id>/ 下编写文件。切勿修改 package.json、open-slide.config.ts 或现有幻灯片。

步骤 1 — 选择主题

列出 themes/ 下的文件。如果存在任何主题 Markdown 文件（README.md 除外），请调用 AskUserQuestion，将每个主题 ID 作为选项，并添加最后一个 “无主题 — 从头开始设计” 选项。（AskUserQuestion 最多支持 4 个选项——如果主题有 4 个或更多，则提供与主题最相关的 3 个选项，再加上“无主题”；自动添加的“其他”选项允许用户指定任何未列出的主题。）

• 如果用户选择了主题：从头到尾阅读 themes/<id>.md。该主题的配色、字体排印、布局以及 Title/Footer 组件现已具有权威性——请直接将它们应用到幻灯片中。如果主题声明了网页字体导入，请按照 slide-authoring 中的 references/webfonts.md 加载（在模块级别按幻灯片键注入）——不要让幻灯片悄然回退到系统字体。还要在 index.tsx 的 meta 导出中设置 theme: '<theme-id>'（例如：export const meta: SlideMeta = { title: '…', createdAt: '…', theme: '<theme-id>' };——createdAt 遵循 slide-authoring 中的文件约定），让幻灯片能反向链接到主题（幻灯片卡片上的标签，以及 /themes/<id> 页面中的列表）。在步骤 2 中，跳过审美方向问题（主题已经确定了方向）；但仍需了解主题内容，因此请在继续之前确认。页数和文字密度与主题无关——照常询问。关于动效，如果主题的 Motion 部分明确了一种理念，请将其作为“（推荐）”选项，并复用主题中可直接粘贴的关键帧；用户仍可选择其他方案。
• 如果用户选择“无主题”，或 themes/ 中没有主题 Markdown 文件：按原样继续步骤 2。

如果因为用户选择了主题而跳过审美方向问题，请在步骤 2 中重述主题名称，以便用户在开始编写之前更改决定。

步骤 2 — 明确需求（编写代码前必须提问）

编写任何代码之前，必须通过 AskUserQuestion 确认以下四项关键风格决策。 这些决策会影响后续的所有选择（布局、字号比例、所需素材、动画代码），因此提前敲定可以避免返工。只有在用户的原始消息或步骤 1 中选定的主题已经明确回答了某个问题时，才可以跳过——主题能确定审美方向，因此只需询问剩下的三个问题。跳过时，要重述你的假设，让用户有机会纠正。

先了解主题。 要提出有意义的审美建议，必须先知道演示文稿的主题。如果用户最初的请求信息不足（例如“帮我做一份演示文稿”“起草几张幻灯片”），先单独调用一次 AskUserQuestion，了解主题、受众以及已有的大纲。仅当用户的消息已经明确主题时才跳过这一步；此时在下一次调用中重述你对主题的理解，让用户有机会纠正。

然后，在一次 AskUserQuestion 调用中提出以下四个问题（多问题形式）：

1. 审美方向 — 针对 当前主题 提出 3 种视觉方向。不要从固定的预设列表中挑选。每个选项都必须结合一个氛围词和一个具体的视觉线索（配色、字体或视觉元素），让用户能够想象效果；仅写“极简”或“企业风”这类标签过于含糊。三个选项应有明显区别，不能只是同一种风格的不同变体。

   选项应随主题调整：

   • “面向后端工程师的 Rust 入门” → 铁锈橙技术编辑风（暖铁锈色／炭灰色、等宽标题、代码网格布局） · 蓝图式开发文档风（近黑底色上的青色网格、等宽字体、示意图质感） · 粗野主义终端风（黑底荧光绿、ASCII 分隔线、直截了当）
   • “面向利益相关者的第二季度产品路线图” → 沉静简洁的企业风（米白底色、单一强调色、宽裕留白） · 自信的编辑风（大号展示衬线字体、紧凑网格、一个醒目的强调色） · 数据驱动的仪表盘风（以图表为主角、柔和中性色搭配状态色）
   • “幼儿园家长之夜” → 俏皮蜡笔风（纸张纹理、手绘点缀、原色） · 柔和粉彩绘本风（蜜桃色／薄荷绿、圆润字体、插画图标） · 温暖的照片主导风（全出血儿童照片、简洁说明文字）

   在最符合主题和受众的选项后标注“（推荐）”，为用户提供一个合适的默认选项。AskUserQuestion 已自动添加“其他”，因此不要自行添加通用兜底选项。

2. 页数 — 大致篇幅。提供以下范围：3–5（简短）、6–10（标准）、11–20（深入）。自动添加的“其他”选项可用于自定义页数。

3. 每页文字密度 — 每页包含多少文案？提供以下选项：极少（一行文字／醒目数字）、较少（标题 + 2–3 个要点）、标准（标题 + 4–5 个要点或一小段文字）、较多（多栏／详细内容）。这会直接影响字号比例和布局。

4. 动画 — 用户想要 CSS／React 动画和转场，还是完全静态的演示文稿？提供以下选项：静态（无动画）、微妙（仅淡入／入场动画）、丰富（关键帧、交错显示、循环视觉效果）。如果需要动画，优先规划框架的基础组件 — 使用 <Steps>/<Step> 实现分阶段显示，使用 SlideTransition 实现页面切换，使用 morph 实现共享元素的连续效果（参见 slide-authoring）——并使用 CSS @keyframes／内联 style + useEffect 实现页面内动画；不要使用额外的库。

回答以上四个问题后，仅在仍不明确时询问后续问题：品牌颜色、必需素材。不要重复询问已回答的问题，以免让对话冗长。

步骤 3 — 选择幻灯片 id

使用简短、描述性的 kebab-case。例如：rust-intro、q2-roadmap、team-offsite-2026。检查 slides/，避免名称冲突。

第 4 步 — 规划结构

在编写代码前，先把幻灯片草拟为页面角色列表。常见页面类型：

角色	用途
封面	标题 + 副标题，视觉效果突出
议程	即将介绍的内容（3–5 项）
章节分隔页	章节之间的大字标签
内容页	标题 + 2–5 个要点，或标题 + 一个视觉元素
大数字	一个占据整个画布大小的统计数据
引言	带出处的醒目引述
对比	两栏形式的前后对比或 A 与 B 对比
结束页	行动号召、致谢、联系方式

经验法则：每页只讲一个想法。如果想放两个，就拆成两页。

如果幻灯片主题自然需要用户提供特定的真实图片（产品截图、团队照片、客户仪表板），请规划图片的位置，并使用 @open-slide/core 中的 <ImagePlaceholder> — 参见 slide-authoring 中的 图片占位符 部分。默认情况下不使用占位符：只有确实需要真实图片时才插入。

第 5 步 — 确定视觉方向

选择一套协调一致的配色 / 字体比例 / 美学风格，并在所有页面中保持一致。完整的约束（配色结构、字体比例、内边距、美学选项）见 slide-authoring — 请遵照执行。

默认做法：在 index.tsx 顶部（导入之后）声明顶层的 export const design: DesignSystem = { … }，使用选定的配色 / 字体比例，并在内联样式中通过 var(--osd-X) 引用这些值。这样生成后用户仍可在 Design 面板中调整幻灯片，这几乎总是用户想要的效果。只有当单页幻灯片的配色刻意固定、不打算重新设定主题时，才跳过 design 常量 — 在这种情况下，改用本地 palette 常量模式。slide-authoring 的“设计系统”部分介绍了格式和可用令牌。

如果有 frontend-design 技能可用，并且用户想要大胆的设计，请参考它以获取更深入的美学指导。

第 6 步 — 编写 slides/<id>/index.tsx

开始编写前，请先阅读 slide-authoring 技能；其中介绍了文件约定、画布规则、字体比例、间距和资源导入，并提供了可供复制的入门模板。不要在此重复这些内容；请直接使用它。

如果用户要求撰写演讲稿 / 演讲者备注（无论是在初始请求中还是之后的任何时候），请将其写入幻灯片的 export const notes 数组 — 这是框架内置的演讲者备注功能，会显示在演示者视图中。关于约定，请参见 slide-authoring 中的 演讲者备注。绝不要将演讲稿作为 Markdown 或文本文件交付。

第 7 步 — 自我检查

按照 slide-authoring 中的清单（“完成前的自我检查”）逐项检查。清单涵盖结构正确性、布局规范和资源是否存在。

如果开发服务器已经在运行，请通过预览路由为每一页截图并修正视觉问题 — 参见 slide-authoring 中的 以可视方式预览页面。

第 8 步 — 交付给用户

告知用户：

• 创建的幻灯片 ID 和文件路径。
• 开发服务器会热重载；他们可以打开 http://localhost:5173/s/<id>（或刷新主页）。
• 如果你编写了演讲者备注：告知备注位于幻灯片的 notes 导出项中，并会显示在查看器的备注抽屉和演示模式的演示者视图中。
• 如果开发服务器未运行：使用项目的包管理器，从项目根目录运行项目的 dev 脚本（npm run dev、pnpm dev 等 — 请根据锁文件选择）。

除非用户要求，否则不要自行运行开发服务器。