content-presentation

内容演示技能

用途

在多个框架中生成完整的、符合品牌调性的演示文稿。该技能涵盖从叙事结构到逐张幻灯片代码输出及演讲者备注的全部内容。

---

框架选择指南

根据用例选择框架。如果用户没有偏好，则根据上下文默认选择：

框架	最适用于	默认场景
Slidev	开发者演讲、Markdown 优先的工作流、Vue 技术栈团队、大量代码内容	受众是技术人员、内容包含代码或未说明偏好
Reveal.js	经典演示、最大浏览器兼容性、HTML/CSS/JS 控制	用户需要广泛兼容性，或偏好 HTML 原生创作
Spectacle	React 团队、自定义交互组件、丰富动画	团队使用 React，或需要交互式幻灯片组件
Raw HTML	单个可移植文件、无需构建步骤、可嵌入邮件、离线交付	用户需要一个可以随处发送或打开的文件

每个框架的详细指南见 frameworks/：

• frameworks/slidev.md —— Markdown 语法、布局、组件、主题
• frameworks/reveal-js.md —— 设置、过渡、片段、演讲者备注、PDF 导出
• frameworks/spectacle.md —— React 组件、幻灯片结构、主题、动画
• frameworks/raw-html.md —— 单文件结构、内联 CSS、嵌入字体、响应式幻灯片

---

生成流程

严格遵循以下顺序。不要跳过步骤。

步骤 1：读取品牌上下文

如果以下文件存在，请读取它们：

• brand/BRAND.md —— 身份、受众、差异化因素
• brand/VISUAL.md —— 颜色、字体、logo 规则
• brand/VOICE.md —— 语气、词汇、反模式

如果 brand/ 缺失，请先询问用户基本的颜色、字体和语气偏好，然后再继续。不要用默认的蓝白样式生成演示文稿。

步骤 2：澄清问题

提出 3-5 个有针对性的问题。根据你已知的信息进行调整：

1. 长度：多少张幻灯片？（根据类型提供范围：路演文稿 10-15 张，会议演讲 30-40 张，销售演示 12-18 张。）
2. 受众：现场有谁？技术深度、资历、对该主题的熟悉程度。
3. 目的：观众在最后一张幻灯片之后应该做什么？（购买、批准、学习、分享、招聘。）
4. 可用数据：你有具体的统计数据、案例研究、截图或代码要包含吗？
5. 交付场景：现场演讲、异步阅读、录制视频还是打印讲义？

如果先前的上下文已经回答了其中一些问题，则不要全部五个问题都问。

步骤 3：推荐框架

根据回答，用一句话理由推荐一个框架。允许用户覆盖。

步骤 4：生成叙事结构

在编写任何幻灯片代码之前，输出叙事大纲：

Slide 1: [Title] -- Hook that establishes stakes
Slide 2: [The Problem] -- What the audience feels today
Slide 3: [Why It Matters] -- Cost of inaction
...
Slide N: [Close] -- Single clear CTA

每一项：幻灯片编号、暂定标题、一行目的。在叙事弧线发生转变的地方（紧张、释放、转折）加入演讲者备注提示。

步骤 5：用户批准结构

等待明确批准或修改请求。在用户表示结构正确之前，不要进入代码阶段。

步骤 6：逐张生成幻灯片内容

对于每张幻灯片，输出：

• 幻灯片内容（标题、正文、视觉元素、代码块）
• 演讲者备注（要说什么、时间提示、过渡短语）
• 相关设计说明（在此处使用图表，为此列表添加动画）

全程应用 VISUAL.md 中的品牌 CSS 自定义属性。映射规则见 brand-integration.md。

步骤 7：交付输出

输出取决于框架：

• Slidev：slides.md + style.css + package.json 及设置说明
• Reveal.js：index.html + css/theme.css 或单个 HTML 文件
• Spectacle：带有组件结构的 React 项目文件
• Raw HTML：单个 .html 文件，所有内容内联

---

叙事弧线

每场演示都遵循这一主干。深入指导见 presentation-narrative.md。

钩子 -- 用一个制造张力的陈述、问题或数据开场。绝不要以"大家好，我是……"开场。

问题 -- 定义听众已经感受到的痛点。要具体。用他们的语言。

解决方案 -- 给出你的答案。展示，而非讲述。演示 > 描述。

证据 -- 提供支撑。数据、案例研究、客户证言、现场证明。

行动号召 -- 一个明确的行动。不是三个。就一个。

这条弧线并非刻板固定。会议演讲可以多次循环"问题-解决方案-证据"。销售演示会把行动号召前置作为预告。工作坊演示会穿插讲解与练习。根据形式灵活调整弧线。

---

每页幻灯片只讲一个观点

这一点没有商量余地。如果一页幻灯片有两个观点，就把它拆成两页。幻灯片很廉价。听众的困惑很昂贵。

测试：你能不用"和"字、用一句话描述这页幻灯片的目的吗？如果不能，就拆开。

---

演讲者备注是一等内容

演讲者备注不是事后补充。为每一页幻灯片撰写备注，其中包括：

• 要说什么（关键要点，而非逐字稿）
• 时间指引（"这里花 60 秒"，"这是你的第 10 分钟节点"）
• 过渡到下一页幻灯片的衔接语
• 听众互动提示（"停下来提问"，"请大家举手"）

---

幻灯片的反垃圾规则

以下模式一律禁止。如果你发现自己正在生成它们，停下来重新设计。

禁止模式	原因	替换为
以"让我们开始吧！"作为标题	填充语。什么都没说。	一个具体的钩子：一个数据、一个问题、一个大胆主张。
"议程"幻灯片	听众不关心你的提纲。	直接跳到钩子。如果必须做引导，用一条可视化时间线。
子弹地狱（5 个以上要点）	幻灯片不是文档。读要点会扼杀参与度。	拆成多页幻灯片，使用可视化，或重构为对比。
默认库存照片	千篇一律的握手照会摧毁可信度。	使用图表、数据、截图，或者完全不用图片。
以"有问题吗？"作为最后一页	收尾无力。行动号召才应该是最后一页。	以行动号召结尾。把"问答"作为口头过渡，而不是一页幻灯片。
"谢谢"幻灯片	浪费最后的印象。	重复行动号召，或把联系方式融入收尾。
文字墙	如果听众想读，他们会去读文档。	精简为关键短语 + 由演讲者备注承载细节。
孤立幻灯片	与前一页或后一页没有明确关联的幻灯片。	在演讲者备注中加入过渡；重构叙事。

---

设计原则

• 排版层级：标题（大号、粗体），副标题（中号、常规字重），正文（可读字号）。一页幻灯片上绝不要超过两种字号。
• 深色 vs 浅色：每套演示只选一种模式。不要混用。如果品牌 VISUAL.md 指定了偏好，就采用它。
• 一致的节奏：相似的幻灯片类型应有一致的布局。"数据卡片"幻灯片每次出现时都应长得一样。
• 用图表而非截图：绝不要对 Excel 图表截图。用 SVG 生成图表，或使用框架的图表工具。
• 留白是一种特性：空白引导注意力。抵制填满每一个像素的冲动。
• 有目的地用色：用强调色来突出重点，而非装饰。每页幻灯片最多一种强调色。

---

幻灯片模式

可复用模式见 slide-patterns.md：

• 标题幻灯片
• 章节分隔页
• 数据卡片
• 对比（双栏）
• 代码讲解
• 图片 + 说明文字
• 引言
• 图表/数据
• 团队网格
• 时间线
• 行动号召/收尾

每种模式都包含布局指导、哪些内容应包含，以及哪些不应包含。

---

品牌集成

完整的 brand/VISUAL.md 到演示文稿 CSS 的映射关系，请参见 brand-integration.md。

摘要：

• 将品牌主色映射到 --slide-accent
• 将品牌字体映射到 --slide-heading-font 和 --slide-body-font
• 将 Logo 放在标题幻灯片上（居中或左上角），并在后续每张幻灯片的页脚中放置（小尺寸，右下角）
• 将品牌辅助色用于图表配色和章节分隔线

---

模板

为常见演示文稿类型预置的叙事结构。请参见 templates/：

模板	框架	幻灯片数	使用场景
pitch-deck.slidev.template	Slidev	10-15	投资人路演
conference-talk.reveal.template	Reveal.js	30-40	技术会议演讲
client-proposal.html.template	原生 HTML	15-25	咨询提案
sales-deck.slidev.template	Slidev	12-18	B2B 销售
workshop.spectacle.template	Spectacle	视情况而定	互动式工作坊

模板是起点，而非限制。请根据具体需求调整幻灯片数量、顺序和内容。

---

错误处理

• 如果用户没有提供任何内容（只说"帮我做个演示文稿"），请追问。询问演示文稿的主题、受众以及期望达到的目标。
• 如果缺少 brand/ 目录，请建议使用用户指定的颜色/字体继续，或先运行 content-setup。
• 如果用户要求的格式框架不支持（例如从 Slidev 导出 PDF），请说明导出路径并提供相关说明。