Generating Slides — Design skill for Claude Code

Generating Slides v2 — 投影级网页演示文稿生成技能

**简体中文** ｜ [English](README_en.md)

**A Claude Code skill that turns one sentence or a document into a projector-grade HTML slide deck.** Single self-contained file, zero dependencies, no CDN or build step — layered layout rules (coverage · type size · order · focus) enforced before output, with a built-in pre-delivery check. → Full English documentation: [README_en.md](README_en.md)

给 Claude Code 用的技能包：按「版面率 → 字号 → 秩序」三层底层约束 + 焦点判断层，生成 1920×1080 单文件 HTML 演示稿（内置交互三件套 + 动画库 + PDF 双出口），产出前过机验。

**执行规则以 [SKILL.md](SKILL.md) 为准，本文件仅为安装与概览说明**（2026-10-21 立：防两文件漂移）。

**来源声明**：本技能基于 Zara Zhang 的开源项目 [Frontend Slides](https://github.com/zarazhangrui/frontend-slides)（MIT License）二次开发，非原创首发；排版底盘与流程为本包自有。整体依 MIT 分发，上游版权声明见 [SKILL.md](SKILL.md) 文末《来源与许可》。

这个技能做什么

用户说一句「帮我做个关于 XXX 的 PPT」，技能按**七阶段**走：阶段 0 读项目 CLAUDE.md（没有则跳过）→ 配置 → 内容准备 → 内容优化（静默）→ 大纲 → 风格选择 → 生成（含 6.5 机验）→ 交付。**每个阶段的用户确认点都是硬停点**，等答复不算停顿。

产出是一个 HTML 文件，CSS/JS 全内联，无 CDN、无构建工具，双击即放映（1920×1080 等比缩放，任何屏幕不变形）。

核心约定（v2 范式）

层	管什么	红线
底盘·版面率	有没有站住版面	密排 ≥60% 面积且宽 ≥80% / 双栏 ≥45% / 单焦点主角块 ≥60% 版心
阅读·字号	站住了看不看得见	正文地板 22px（1/50 屏高）/ 标题主张型锁 84px / 仪式位 110-140px
秩序·分组对齐间距	看见了乱不乱	间距三档跟层级树 / 容器阶梯卡>线>留白 / 一页一左轴
焦点·强调判断	强调谁、怎么强调、强调到几分	焦点服从论述意图 / 视觉重量守恒（hero 禁垫色块）/ 颜色稀缺配额 / 卡片同构化优先

• 底盘唯一·装配式：assets/chassis-v2.html 是唯一底盘（装配产物，禁手改）；源码在 assets/chassis/（冻结）+ assets/modules/（功能件），改完跑 node scripts/build-chassis.mjs 重建
• 密度前置分档：低 ≤40 / 中 40-120 / 高 120-200 / 超 >200 砍字砍页（cut never compress）
• 槽位判定树：内容逻辑决定槽位，禁临时发明
• 动画自动路由：内容侧重 × 氛围 → 套餐，默认克制档，不逐个问客户

安装

装到 Claude Code 的 skills 目录，**目录名必须是 `generating-slides`**（与 SKILL.md 的 `name` 一致）。

从本仓库直接克隆：

git clone https://github.com/whq217/generating-slides.git ~/.claude/skills/generating-slides

后续更新只需拉取：

git -C ~/.claude/skills/generating-slides pull

Windows PowerShell：

git clone https://github.com/whq217/