* 内部演示模板，可按场景替换页脚说明。
Powered by Slide-Writer
1 / 1
`↑``↓``←``→``Space` 翻页 · `F` 全屏
GitHub@FeeiCN/slide-writer

# Slide-Writer Skill

您只需专注目标、观点与判断，Slide-Writer 负责结构、写作、优化与呈现。

Feei
Slide-Writer Creator
2026.04.12

## 这份示例怎么看

先看真实产出，再看为什么做、怎么做，最后看最关键的组件骨架，而不是把整份文档写成组件词典。

01 在线示例：直接打开完整 HTML 演示文稿 Demo
02 为什么做 Slide-Writer：把“写稿 + 排版 + 品牌化”从体力活变成系统能力 Why
03 怎么做的：用规则、主题、模板和组件把生成过程工程化 How
04 有哪些组件示例：删减后保留最能代表生成能力的页面骨架 Kit

## 在线示例

先看完整作品，而不是先看零件。下面这些示例覆盖企业演讲、历史人文、政策研究和日常科普等不同输入场景。

精选
企业年会
腾讯 2025
年度员工大会
腾讯 2025 年度员工大会
11 张
精选
企业演讲
相信未来
担当当下
马云毕业演讲
12 张
测试
政策研究
深圳改革开放
经验分享
深圳改革开放经验分享
13 张
测试
历史人文
诸葛亮的一生
诸葛亮的一生
13 张
所有示例都以 单 HTML 文件 交付，浏览器直接打开即可，主题、结构、动画和图片都已内联。

## 为什么做 Slide-Writer

它要解决的不是“生成一页 PPT”，而是把输入整理、结构重写、品牌化排版和最终交付这整条链路做成一套稳定系统。

任意输入
一句话、大纲、讲稿、笔记、已有 HTML 都能接住
14 套
品牌主题自动识别，不再手工切换 logo 和主色
单文件
CSS、JS、图片全部内联，浏览器直接打开
真正消耗时间的环节：不是写出几句话，而是把零散素材整理成结构、把结构变成页面，再把页面调成一家公司正式能用的演示文稿。
Slide-Writer 试图替代的，是反复重复的体力劳动

- 减少从草稿到可讲版本之间的人工转译
- 统一品牌主题、组件骨架和交付格式
- 把临时 Prompt 变成可复用的生成系统

## 它替代的是排版与转译，不是内容判断

README 里最重要的那句话是边界定义：你只需专注目标、观点与判断，系统负责结构、写作、优化与呈现。

内容判断
由人负责
主题、观点、证据取舍和表达重点仍由作者决定
页面组织
由系统接管
负责重写、分页、品牌样式和浏览器交付
对个人的价值
让你把时间花在内容本身，而不是在 Keynote 里反复调边距、换字体和找配色。
对团队的价值
每次生成都沿用同一套规则、模板和主题，输出更稳定，也更容易持续迭代。

## 怎么做的

Slide-Writer 的核心不是一串 Prompt，而是把主题识别、结构规划、页面骨架和交付壳层工程化。

STEP 01
接收输入
一句话、大纲、讲稿、笔记、已有 HTML
→
STEP 02
识别主题
自动匹配品牌、logo、封面和章节页样式
→
STEP 03
规划结构
决定页数、章节节奏、拆页和组件骨架
→
STEP 04
单体交付
输出浏览器直接可打开的独立 HTML 文件
真正决定质量的，不是最后一层页面渲染，而是前面几步是否已经把内容判断转换成了可演示的结构。

## 仓库里的几个核心部件，各自承担一层责任

README 里的仓库结构不是文件清单，而是一套分层设计：规则、主题、组件、模板、示例各管一段。

Slide-Writer Architecture
规则定义边界，主题负责品牌，组件负责表达，模板负责最终浏览器交付。
规则层
SKILL.md 规则
定义阶段、密度上限、布局多样性和验收门槛。
themes/_index.md 识别
从内容里识别品牌关键词，决定使用哪套主题。
表达层
components.md 骨架
提供高频页面组件，但不是表达能力上限。
themes/[id].md 品牌
控制主色、logo、封面、章节页和结尾页风格。
交付层
template.html 壳层
负责导航、动画、全屏、固定 UI 和浏览器适配。
examples/ 验证
用真实输入和真实输出持续校准生成质量。

PART 02

## 组件示例

下面保留的是最常用、最能代表生成能力的页面骨架：文字、流程、图文、可视化和整页结构。

## 文字组件

它们能显著提升扫读效率，比普通段落更像演示稿。

核心判断：标题负责给结论，组件负责给结构，页面才能在几秒内被看懂。
风险提示：如果一页同时堆太多组件，再好的组件库也救不了信息过载。
蓝色标签 红色标签 绿色标签 深色标签

- 要点列表适合放 3 到 5 个短句。
- 关键词加粗可以提升扫读效率。
- 不要把完整段落直接塞进列表。

洞察组件适合图表或数据块下方的一句解释，帮助观众快速理解“这组信息意味着什么”。

## 层级与流程

一个强调“当前在哪一级”，一个强调“接下来如何推进”。

L1
工具使用
会使用模板、组件和基础提示词完成简单页面。
L2
场景驱动
能根据不同受众和主题设计结构，并独立生成完整 deck。
L3
表达系统化
能沉淀主题、组件、模板和团队级演示规范。
STEP 01
输入
→
STEP 02
拆解
→
STEP 03
生成
→
STEP 04
验收

## 图文双栏

同一页并排展示“左图右文”和“右图左文”，更适合快速理解图文混排的两种常见用法。

左图右文示意

### 左图右文

适合先给视觉锚点，再用右侧两三句话解释图像或图表想表达的重点。

- 适合产品截图、界面原型、柱状图。
- 右侧尽量保留 2 到 3 个支撑点。

### 右图左文

适合让文字先建立判断，再用右侧图像承接论据或视觉化结果。

- 适合流程图、关系图、对比图。
- 用于拉开页面节奏也很有效。

右图左文示意

## 轻量可视化

这类结构适合表达相对大小、热度分布和业务重心。

~200
传统制作
~80
Slide-Writer
进度条适合表达“相对差距”，不用额外引入坐标系。
核心业务 演讲生成 结构重写 品牌主题 数据图表 章节页 HTML 交付

## 表格页面

重点是比较与差距，而不是全面罗列。

维度 | 现状 | 目标 | 差距
--- | --- | --- | ---
生成速度 | 2 小时 | 30 分钟 | ▲ 90 分钟
结构完整度 | 目录缺失 | 完整章节 | 待完善
品牌一致性 | 手工调整 | 自动应用 | ▲ 已达标
交付形态 | 多文件 | 单 HTML | 持平优化

## 更多组件细节（附录）

前面的页面已经覆盖核心骨架；这里继续保留更细的图表、整页结构、路线图和洞察面板，供生成时直接参考。

柱状图
适合对比不同阶段、季度或分组之间的绝对差异。
折线图
适合表达趋势变化、拐点和连续时间序列。
环形图
适合表达占比关系，建议控制在 3 段以内。
用法提示：先判断要讲的是“差异”“趋势”还是“占比”，再选图表，不要让图形先行。

## 整页骨架

这一页演示“Opening Hook + 2×2 信息面板 + 世界地图底纹”的布局组合。

🌐 开场问题型页面
先抛问题
适合在开场直接抛一个挑战性判断，再用 2×2 卡片承接四个典型现象或案例。
📦 模块化信息承接
四象限
每块卡片只承载一个例子或一个观察，形成开场后的“证据面”。
🗺️ 背景装饰层
弱存在感
世界地图与弧线更适合作为内容页底纹，不应抢过正文，只做“高级感”增强。
🎯 用途
很适合第一页正文
用于“为什么必须行动”“外部变化”“用户痛点综述”等高势能开场页。

## 分组目录

保留阶段分组，减少条目数量，让观众更快抓到整体结构。

为什么
01 业务变化带来的核心问题背景
做什么
02 目标、原则与关键抓手策略
怎么做
03 推进机制与验收动作执行

## 双阶段流程

适合表达“先搭框架，再落地执行”的两段式推进逻辑。

PHASE 01
判断与规划
先明确目标、问题边界、优先级和章节结构。
→
PHASE 02
方案成型
把结构转成页面形态，建立统一表达骨架。
进入落地执行层
EXEC 01
组件化填充
把数据、卡片、图文和流程图填入合适的页面结构。
EXEC 02
验收与修订
校验溢出、节奏、品牌与交互，完成最终交付。

## 推进机制

把横向支撑板和流转看板放在同一页，既能讲清支撑体系，也能展示需求如何流转到交付。

专项示例
横向支撑板布局
🔧 基础保障
模板引擎 平台
统一页面骨架、交互能力和响应式策略。
主题库 设计
统一品牌色、Logo 和视觉变量。
⚙️ 组织机制
组件规范 内容
把常见表达沉淀成可复用页面组件。
验收清单 质量
控制溢出、节奏、交互和品牌一致性。
📣 推进落地
场景沉淀 业务
把高频演讲和汇报场景抽成模板样例。
持续迭代 共建
从真实 deck 中反向补齐缺失布局结构。
提出业务方 拆解策划 生成系统 审校专家 交付演讲者

## 流程格

横向 4 列 × 2 行紧凑矩阵，蓝色格表示已 AI 化，灰色格表示待推进。

AI for DevOps 流程覆盖

需求收集
快速生成版本
系统设计
结合上下文设计
代码实现
Agent 实现，人把关
测试
代码测试同步生成
代码审查
对抗性校验
部署
验证后自动上线
监测
可观测性驱动
反馈闭环
持续迭代优化
蓝色格（`flow-item changed`）表示已 AI 化环节，灰色格为待推进，两者可自由混用。

## 浏览器截图框

macOS 风格浏览器窗口，给截图加上地址栏和三点按钮，比裸图更有上下文感。

slide-writer.feei.cn
截图 / 界面图 放这里

### 适合展示的内容

- 网站、后台系统或产品界面截图
- 工具 Demo、数据大屏、配置页面
- 内嵌真实 URL，增强可信度

用法提示：裸图缺乏上下文，加上浏览器边框后观众能立刻识别这是"真实系统截图"，而不是设计稿。

## 月份路线图

4 列月份网格，顶部色条区分阶段，适合季度计划和项目节奏展示。

March
3月
April
4月
May
5月
June
6月
关键事项
基础搭建
进行中
模板框架搭建
组件库整理
Prompt 规范制定
场景扩展
规划中
主题多套切换
图标库集成
骨架页补充
团队推广
待启动
内部培训工坊
使用手册沉淀
反馈收集机制
持续迭代
常态化
真实 Deck 反哺
缺失布局补充
质量验收闭环

## 洞察数据面板

一句核心判断 + 内嵌 2×2 小数字格 + 补充说明，适合数据结论页。

Q1 效率观察
Q1 2026
深度用户效率提升远高于平均水平
85%
代码生成采纳率
3×
深度用户效率倍增
下一步重点：在浅度用户群体中推广深度用法，扩大效率提升覆盖面。
Q1 问题洞察
Q1 2026
制作耗时仍集中在结构梳理阶段
60%
时间花在结构梳理
-40%
排版时间已压缩
优先解法：提供结构化输入模板，帮用户把"想清楚"的时间前移到开始前。

## Q&A

这份 `examples/index.html` 现在先讲 Demo、Why、How，再进入组件示例；前半段更像产品介绍，后半段继续保留页面骨架参考，便于生成时直接取用。