Frontend Slides:用编码 agent 做出好看的 HTML 演示稿

Frontend Slides 是一个给编码 agent 用的 skill:把「做一份好看的演示」变成对话里的一句话,产出的是一份自带样式的单文件 HTML 演示稿 —— 不需要懂 CSS,也不需要 npm、构建工具或任何框架。

它解决的是「说不清审美」这件事

大多数人不擅长用语言描述设计偏好(「要高级一点」「别太花」),而用文字描述出来的风格,模型多半会还你一屏紫渐变的 AI 味模板。Frontend Slides 的做法是先给看,再让你挑:它按你的 brief 推断气质,一次生成三份视觉风格预览摆在一起,你选一个,它再把整份稿子做出来并在浏览器里打开。作者把它总结成「show, don't tell」。

四条能力

• 零依赖:输出是单文件 HTML,CSS/JS 全部内联 —— 拷走就能开,不装任何东西;
• 视觉风格发现:三选一的预览流程,替掉「用形容词下需求」;
• PowerPoint 转换:把已有的 .pptx 转成网页演示,先抽出全部文字、图片与备注给你确认,再按你选的风格重新排版,原始素材一张不丢;
• 反 AI 味:内置的是一批有辨识度的风格(深色 / 浅色 / 特殊 / Bold 模板包),明确避开「白底紫渐变」那套生成式默认审美 —— 模板来自 beautiful-html-templates,按需渐进加载,所以默认档位仍能安全兜底。

固定 16:9、无障碍语义、逐段注释,拿到手就能改 —— 它把自己定位成「非设计师也能做出体面演示」的生产级起点,而不是一次性的演示图。

怎么用

它被打包成 Claude Code 插件,核心的 SKILL.md 也能被其它有文件系统与 shell 权限的编码 agent 读取。装好之后:

/frontend-slides:frontend-slides
> 我想给我的 AI 创业项目做一份 pitch deck

skill 会依次问内容(幻灯片、要点、图片)→ 生成三份风格预览 → 让你定方向 → 出完整演示稿 → 在浏览器里打开。转换已有 PPT 则是:

/frontend-slides:frontend-slides
> 把我这份 presentation.pptx 转成网页幻灯片

在非 Claude 的 agent 里,直接让它读这个仓库或 SKILL.md 即可。

和「生成 PPTX」那条路的区别

它产出的是 HTML 演示稿,不是 PowerPoint 文件 —— 换来的好处是零依赖、任意分享链接、样式完全可控;代价是不能在 PowerPoint 里继续用母版编辑。需要原生可编辑的 .pptx 时应该走另一条工具链。两条路的取舍很清楚,别指望一份产物同时满足。