Web Slides

Premium HTML slide deck generator

为用户生成高质量、单文件、可直接运行的 HTML 演示文稿。

核心定位：

• 不依赖任何 API Key
• 与具体模型、厂商、推理服务无关
• 优先使用预制高端主题，而不是临时拼设计
• 以效果好为第一优先级，同时兼顾低 token
• 输出天然兼容桌面演示与移动端浏览

何时使用

• 用户要做 PPT、Slides、演示稿、pitch deck、发布会页面、汇报稿
• 用户要 HTML 版本的演示文稿，而不是 .pptx
• 用户强调科技风、高级感、精美、商务、路演、发布会、数据报告
• 用户要求生成结果开箱即用、无需接外部服务

工作方式

主 SKILL.md 只保留路由和生成规则。需要细节时按需读取：

• 运行时说明：references/runtime.md
• 主题总览：references/theme-catalog.md
• 布局系统：references/layout-system.md
• 质量标准：references/quality-bar.md
• 输出流程：references/assembly-workflow.md
• 内容结构：references/content-schema.md
• 单主题细节：references/themes/*.md

本 skill 必须保持模型无关：

• 不假设特定模型品牌、版本或厂商能力
• 不依赖 OpenAI、Claude、GPT 等命名能力
• 不把视觉效果建立在某个模型“更会设计”的前提上
• 重点依赖预制主题、布局系统、内容结构和本地脚本

如果需要快速定位主题、场景、布局或直接拿推荐结果，优先运行：

• node scripts/get-theme-bundle.mjs --list
• node scripts/get-theme-bundle.mjs --theme cyber-grid
• node scripts/get-theme-bundle.mjs --scene investor-pitch
• node scripts/recommend-deck.mjs --scene investor-pitch --density medium
• node scripts/scaffold-deck.mjs --scene ai-product-launch --title "你的标题"
• node scripts/markdown-to-content.mjs --input examples/investor-pitch.md --output examples/investor-pitch.json --scene investor-pitch --mobile
• node scripts/validate-content.mjs examples/investor-pitch.json
• node scripts/qa-deck.mjs --content examples/investor-pitch.json
• node scripts/smoke-test.mjs
• node scripts/generate-slide-html.mjs --scene investor-pitch --title "Investor Pitch" --out dist/investor-pitch.html
• node scripts/generate-slide-html.mjs --content examples/investor-pitch.json --out dist/investor-pitch.html
• node scripts/render-preview.mjs --input dist/investor-pitch.html --output dist/investor-pitch.png
• node scripts/build-preview-gallery.mjs

生成原则

1. 先定场景，再定主题，再定布局，不要先写 HTML。
2. 输出流程必须与具体模型无关，核心质量来自主题系统、布局系统和本地生成脚本。
3. 优先从预制主题中选最合适的一套；不要混搭到破坏统一性。
4. 优先使用布局原型承载内容；不要每页都自由发挥。
5. 任何页面都要同时检查桌面显示和移动端缩放后的可读性。
6. 如果用户没有给风格，默认走高级、正式、科技感或商务感，不走卡通和花哨路线。
7. 如果用户给的是长文或提纲，优先整理为 references/content-schema.md 里的 JSON 结构，再生成 HTML。

最小决策流程

Step 1：识别任务类型

从用户输入中提取：

• 场景：汇报 / 路演 / 产品发布 / 技术分享 / 白皮书 / 数据复盘 / 教学培训
• 调性：科技 / 商务 / 极简 / 高端 / 发布会 / 学术 / 创意
• 内容密度：轻 / 中 / 重
• 输出规模：短 deck（6-10 页）/ 标准 deck（10-16 页）/ 长 deck（16-24 页）
• 是否强调移动端浏览

Step 2：选择主题

优先先跑脚本拿最小推荐结果，再读 references/theme-catalog.md。

如果用户要求很明确，再读对应单主题文件：

• references/themes/cyber-grid.md
• references/themes/executive-dark.md
• references/themes/executive-light.md
• references/themes/glass-future.md
• references/themes/data-intelligence.md
• references/themes/startup-pitch.md
• references/themes/product-launch.md
• references/themes/dev-summit.md
• references/themes/luxury-black-gold.md
• references/themes/editorial-serif.md
• references/themes/neo-minimal.md
• references/themes/creative-motion.md

Step 3：选择布局集

读 references/layout-system.md，从以下布局原型中选 6-10 个组合成整套 deck：

• cover
• agenda
• section-break
• insight
• two-column
• metrics
• chart-focus
• timeline
• comparison
• quote
• closing

Step 4：按质量标准约束输出

读 references/quality-bar.md，确保：

• 首屏有高级感
• 页面层级清楚
• 信息密度可控
• 动效克制
• 手机端不崩

Step 5：组装 HTML

读 references/assembly-workflow.md，或直接用生成器脚本先产出单文件 HTML 骨架。

输出要求：

• 单个 HTML 文件
• CSS 内嵌
• JS 尽量精简
• 对移动端友好
• 不依赖任何 API Key

输出偏好

默认生成策略：

• 渲染：自定义单文件 HTML 演示运行时
• 主题：从 12 套旗舰主题中选择
• 布局：优先复用固定布局原型
• 动画：轻量、克制、不卡顿
• 色彩：统一，不乱换
• 文案：标题短、重点强、避免大段堆砌

不要这样做

• 不要只换配色而没有版式差异
• 不要把"科技风"理解成荧光蓝堆砌
• 不要为了酷炫牺牲可读性
• 不要在每页塞满 8 个以上 bullet
• 不要把网页长文直接切成幻灯片
• 不要为了省 token 放弃视觉完成度

依赖说明

• 需要 Node.js 环境
• 如需预览渲染功能，用户需手动安装：npm install -g @aspect-ratio/preview-renderer（本 skill 不会自动安装任何包）

成功标准

这项技能的目标不是“能生成 PPT”，而是生成后让用户觉得：

• 一打开就高级
• 可以直接拿去讲
• 不像普通网页排版
• 手机上看也精致
• 比同类技能更稳定、更省 token、更不依赖外部能力