Frontend Slides：让「不会写 CSS 的人」也能做出不像 AI 生成的网页幻灯片

一、一个真实的尴尬场景

想象这样一幕：周五下午五点，你要在下周一的产品评审会上讲一份 20 页的方案。你打开 AI 工具，说"帮我做一份漂亮的 PPT"。

30 秒后你拿到了 20 页。排版整齐，标题清晰，配色是那种……你一眼就认得的紫蓝渐变，背景纯白，每一页都是三个圆角卡片加一个图标。同事会很礼貌地说"挺好的"，然后你们都知道，这份东西拿不出手。

问题不在于 AI 不够聪明。问题在于：你没法用语言描述你想要什么 aesthetics。 你说"高级感"，AI 给你居中的大标题加微弱阴影；你说"科技感",AI 给你霓虹紫。来回五轮沟通，最后双方都累了，你得到一个"差不多但说不清哪里不对"的结果。

Frontend Slides 就是来解决这件事的。它的核心洞察只有一句话：别问，做出来给你看。

二、它到底做了什么

这是个 Claude Code 插件（同时也是一个"agent-neutral"的技能包，任何有文件读写和命令执行能力的编码智能体——Codex、Kimi Code、OpenCode、Gemini CLI——都能直接读 SKILL.md 用起来）。它由两部分组成：

1. 交互层：Show, Don't Tell

流程进入"风格发现"阶段时，它不会弹出 12 个复选框问你喜欢哪种，而是当场生成 3 张真实的首屏预览（真的 HTML，字体、配色、动画都在），让你在视觉上比较、挑选。

而且这 3 张预览的配方是刻意设计的：

• 1 张"安全牌"：从 STYLE_PRESETS.md 里挑一个 12 套预设中的保守风格，保证下限；
• 至少 1 张"大设计"：从 bold-template-pack/selection-index.json 里挑一套来自 beautiful-html-templates 库的 34 种设计系统之一（如 Neo-Grid Bold、Editorial Tri-Tone、Cobalt Grid、Vellum）；
• 1 张"自由牌"：可能是一套更激进的大设计，也可能是模型现场自由设计的一个完全贴合语境的方案。

这个配方的逻辑很聪明：安全牌负责"至少不丢人"，大设计牌负责"眼前一亮"，自由牌负责"这才是我想要的"。三张一起给你对比，你不需要有审美词汇，只需要有判断力。

2. 生成层：Fixed 16:9 Stage

选定风格后生成的 HTML 有大量"看起来烦人但非常有用"的硬性约束：

• 所有幻灯片固定在 1920×1080 画布内，整体等比缩放适配视口，允许黑边，但绝不允许重新排版（手机上也是 16:9，不做响应式重排）；
• 幻灯片显隐必须用 visibility/opacity/pointer-events，不能用 display:none——因为后面 .slide-content { display:flex } 会覆盖掉它，导致所有页同时可见（这是实战踩过的坑）；
• 必须包含 prefers-reduced-motion 支持；
• 禁止直接对 CSS 函数取负（-clamp() 会被静默忽略），必须写 calc(-1 * clamp(...))；
• 内联编辑、键盘/触摸/滚轮导航、进度点、导出、分享都内置。

它还内置了一个信息密度分流机制：先问你这是一份"演讲型"还是"阅读型"演示文稿。演讲型一页一个观点、大字大留白；阅读型则允许每页 4-8 条要点或 4-6 张卡片，做成可独立传阅的自足页面。内容超了就拆页，而不是把字号越缩越小。

3. 实用配套

• PPT 转换：scripts/extract-pptx.py 用 python-pptx 抽出全部文字、图片、备注，生成 JSON，再重建为 HTML 幻灯片，保留原有素材；
• 导出 PDF：scripts/export-pdf.sh 起本地服务 + Playwright 逐页 1920×1080 截图再合成 PDF（动画不保留，是静态快照）；
• 一键上线：scripts/deploy.sh 走 Vercel 免费额度生成永久可分享 URL。

三、看得见的成品

下面 4 张图来自它所依赖的 beautiful-html-templates 模板库截图，也正是用户在"风格发现"阶段会看到的候选预览形态：

Neo-Grid Bold：米白纸面上只用一抹霓虹黄作为强调色——典型的"编辑式新粗野主义"。

Cobalt Grid：电光钴蓝斜体衬线 + 阶梯状像素故障装饰 + 细发丝分隔线。

Creative Mode：奶油纸底 + 绿/粉/橙/黄多彩点缀 + Archivo Black 标题字。

Emerald Editorial：翡翠绿 + 藏青 + 纸色，双线报头装饰 + 重 Bodoni 风格标题字。

四、代码与工程实现

技术构成：JavaScript 45.5KB / Shell 43.4KB / Python 5.8KB / CSS 5.5KB。仓库体积仅 582KB，零构建、零 npm 依赖。

架构模式是"双文档"设计：

文档	角色	类型
SKILL.md（380 行）	执行引擎：五阶段线性流水线（模式识别 → 内容发现 → 风格发现 → 生成 → PPT 转换）	过程性
STYLE_PRESETS.md（12 套预设）	声明式规格库	规则性

运行时分工清晰：生成期由编码智能体读取 SKILL.md 执行；运行期由浏览器中的 SlidePresentation 类负责导航与舞台缩放，IntersectionObserver 负责入场动画。

最值得称道的工程决策是"渐进式披露"。v2.0.0 之前，技能每次调用会把 1,625 行指令（含 CSS、Python 脚本、HTML 模板）全部灌进模型上下文，把真正的内容挤了出去。v2.1.0 把 SKILL.md 从 1,098 行砍到 183 行（现为 380 行，含后续扩展），改成一张"地图"：

• selection-index.json（39KB 压缩索引）先被读取；
• 只对入围候选读其小型 preview.md 卡片（每个约 4.9KB）用于生成标题页预览；
• 只有在用户最终选定某个大设计后，才加载该模板那份 44KB 的完整 design.md；
• 完整模板 HTML 除非绝对必要，否则永不进入上下文。

这是把"上下文预算"当成一等公民来设计的教科书式做法，对任何做 Agent Skill 的人都有直接参考价值。

五、上手门槛与真实局限

门槛比想象低：会 git clone 就行，核心产出是单个 HTML 文件，浏览器直接打开，无需服务器。

但有几个必须知道的坑：

1. 依赖外部仓库：bold-template-pack/ 是从 beautiful-html-templates 同步过来的快照（34 个模板目录，每个含 design.md + preview.md）。上游模板库若变更或作者停止维护，这部分会脱节。
2. 中文字体覆盖不足：设计哲学明确要求"用 Fontshare 或 Google Fonts，绝不用系统字体"，但整套预设与模板的字体选择（Archivo Black、Cormorant、Bricolage、Source Serif）明显以拉丁字母为设计基准。中文场景下这套排版美学不会自动成立，需要自行适配中文字体与字重体系，这是一块需要二次投入的地方。
3. 强依赖宿主智能体的执行质量：这个技能的产物质量上限，等于运行它的那个编码智能体的能力上限。它提供的是"流程与规范"，不是"生成模型"。
4. PDF 导出会丢动画：截图是静态的，导出件和浏览器里的观感有差距。
5. 无自动化测试：整套质量保障依赖 SKILL.md 里的规则约束 + 人工截图复核。仓库有 71 个 open issue，可见迭代节奏相当密集，回归风险客观存在。
6. 作者集中度：仓库只有约 6 位贡献者、30 次提交，代码所有权高度集中于单一作者。

六、行业意义

31,674 stars、2,428 forks、不到半年从 0 涨到 3 万+,这个增速本身就在说明一件事："给 AI 的技能包"正在成为一类独立的软件产品形态。

它的价值不在于提供了什么代码——SKILL.md 里的规则，你读完也能自己写。它真正的价值在于把"设计审美"这件模糊的事，变成了可执行、可复用、可分发的工程流程：

• 把"AI Slop"（千篇一律的紫渐变白底）明确命名为敌人，并给出 46 套可替代方案；
• 把"先做出来给你看"这一交互原则，固化为任何智能体都能照做的阶段划分；
• 把上下文窗口当作一等约束，用渐进式披露让"厚内容"也能塞进"薄提示"。

更重要的是它示范了一条路径：不与通用大模型正面竞争，而是做那个"把模型能力封装进垂直工作流"的角色。 Claude Code 负责生成，它负责流程、约束与品味库。这类技能会持续出现在 PPT、周报、数据可视化、产品原型等场景，成为"AI Coding"生态里最贴近非技术岗的一层。

七、结语

如果你所在的团队经常需要"对外的、看起来要专业"的可视化产物——产品评审、方案汇报、招聘宣讲、技术分享——这个技能值得装一个试试。

它最打动我的地方，其实不是 34 套模板，而是它承认了一件常被忽略的事：大多数人不擅长描述自己想要什么，但他们非常擅长判断哪个更好。 于是好产品的设计，不是逼用户变成设计师，而是把选项做出来让人挑。

Frontend Slides 就是把这句话，写成了一份 380 行的 SKILL.md。