前言¶

给客户做方案演示时，常见的做法是打开 PPT 套模板，改配色、调对齐，最后导出 PDF 发过去。结果是文件打不开、动画全丢、字体变了样。前端工程师手里有更顺手的工具：直接产出一份 HTML 幻灯片，浏览器打开就能放映，动画、交互、响应式都由代码控制。

问题是，让模型”写一个 HTML 演示文稿”得到的往往是一份粗陋的静态页面：没有统一的色彩和间距规范，元素随意摆放，也没有逐页动画。Frontend Slides 就是来解决这件事的 Skill，它把演示文稿的设计约束固化成可执行的规则，让模型输出可直接交付的成品。

这是什么¶

Frontend Slides 是一个基于通用 SKILL.md 格式的前端制作 Skill，由 ken0122 发布，上游仓库在 ClawHub，版本 2.0.2，归类为 office-efficiency，当前评分 100000，下载量 28078，安装 336。

它解决的问题是：用模型生成演示文稿时，视觉质量不稳定、风格不统一、PPT 内容无法直接复用。Skill 提供了一套风格预设、设计约束和参考文件，让输出从”能看”变成”能交付”。不需要 API Key。

核心功能¶

1、从零创建动画 HTML 演示文稿。输出是零依赖的单文件 HTML，完全在浏览器里运行，不需要构建步骤。

2、从 PowerPoint 文件转换。把现有 PPT 的内容提取出来，重新生成 HTML 版本，用于售前、客户提案等已有素材的场景。

3、内置五种视觉风格预设。每种风格有明确的色彩、材质和适用场景：

• Future & Depth：磨砂玻璃加暗色模式，适合科技产品发布、前沿探索。
• Efficiency & Speed：扁平风格加 Bento UI，适合工具、数据看板。
• Trust & Professional：瑞士极简，靠排版和严格栅格，适合金融、企业方案。
• Care & Resonance：低饱和自然色加极端圆角，适合人文、品牌故事。
• Immersion & Expression：拟物材质加高对比情绪色，适合创意提案。

Skill 还给出风格选择规则：方案演示走 Trust & Professional 或 Efficiency & Speed，产品发布走 Future & Depth，品牌故事走 Care & Resonance，营销创意走 Immersion & Expression。

4、强制设计系统约束。所有决策映射到一组有限的变量，不允许出现随机值：

• 间距走 8 点栅格，只能是 8、12、16、20、24、32、40。
• 圆角默认从 rounded-[12px] 起，Care 风格可用 rounded-[24px] 或 rounded-full。
• 最小点击热区 44px，最小可读字号 12px，正文 14px 或 16px，标题用 clamp() 做响应式缩放。
• 阴影必须用弥散光，形如 shadow-[0_10px_30px_rgba(0,0,0,0.08)]，禁止生硬阴影。
• 色彩由主色、互补色、邻近色三者构成，不允许任意取色。

5、静态页面也要呈现完整交互状态。这是最容易踩的坑：输出虽然是静态 HTML，但处理列表、导航、卡片组这类重复组件时，要把不同状态直接写进同一份 DOM，而不是依赖 Tailwind 的 hover 伪类。做法是给第一个卡片用默认状态，第二个用 bg-white/10 模拟悬停，第三个用 border-cyan-400 模拟选中，这样静态截图里也能看到组件的全生命周期。

6、内置 2026 年的设计趋势参考。四类趋势可按内容主题选一到两个融入设计：Ghostly Agency（透明预测式界面）、The Grain of Truth（噪点纹理与有机排版）、Liminal Multimodality（声波与空间透视动效）、Emotional Sovereignty。Skill 页面为每个趋势附了可直接使用的 CSS keyframes 示例。

安装与启用¶

上游仓库提供的安装命令如下。这是 ClawHub 侧的写法：

npx skills
openclaw skills install @ken0122/frontend-slides

SkillHub 侧的坐标是 @clawhub_ken0122/frontend-slides，对应页面为 https://www.skillhub.cn/skills/clawhub_ken0122/frontend-slides。

Cursor、Codex CLI、Claude Code 三类环境的安装命令差异，在抓取到的官方页面里没有分别说明，这里不猜测。装好后把 SKILL.md 交给模型，让它按需读取 reference/ 目录下的参考文件即可。

典型用法¶

Skill 明确要求：生成 CSS、图片处理、PPT 提取、HTML 结构、编辑按钮或动画代码时，先读 reference/ 下对应的文件，并配合 STYLE_PRESETS.md 取预设、查 CSS 注意事项，这样输出才完整正确。实际操作按这个顺序走：

1、先把 PPT 或大纲内容交给模型，明确主题和目标受众，让它选风格。方案类内容就指定 Swiss Modern 或 Bento UI。

2、模型读取 STYLE_PRESETS.md 拿到对应的配色、间距、圆角、阴影变量。

3、生成单文件 HTML。标题用 clamp() 缩放，正文 leading 设 1.5 或 1.6，正文 14px 或 16px，卡片类组件按”默认、悬停、选中”三态硬编码。

4、加逐页进入动画和导航按钮。动画代码参考 reference/ 里的 animation 文件。

5、浏览器打开检查一遍：截图里看三态是否都可见、间距是否符合 8 点栅格、有没有出现任意色值。

一个可复现的最小场景：把一份产品发布 PPT 交给 Skill，指定 Future & Depth 风格，输出就是暗色磨砂玻璃质感的 HTML，带逐页 reveal 动画，直接在浏览器放映。

适用场景与注意¶

适合这些场景：售前与销售演示、客户提案、产品发布、技术分享、教学讲义、内部汇报。尤其适合前端团队直接交付，因为产物就是 HTML，可以塞进任意部署管道。

需要留意的限制：

• 产出是单文件 HTML，不含可编辑的源文件概念。客户若要继续在 PPT 里改，得把 HTML 当交付物而不是源文件。
• 风格选择依赖模型判断，给的输入越具体（受众、场合、品牌色）结果越准，只丢一句”做个演示文稿”容易在风格上摇摆。
• 动画和交互状态是硬编码进 DOM 的，这是为了让静态截图也能展示完整状态。如果改成纯 CSS hover 方案，视觉在截图里会缺一态。
• 文件体积会随页数增长，单页内容过多时要考虑拆分。
• PPT 转换的质量取决于原文件结构，复杂的母版和动画无法一一映射，转换后需要人工过一遍。

结尾¶

Frontend Slides 的价值在于把”模型写个幻灯片”这件事拉到了可交付的水准：风格预设、设计约束、参考文件都备齐了，产出是零依赖的 HTML，浏览器打开就能放映。对于常做方案演示、又不想把时间花在调样式上的团队，值得装一个试试。

官方地址：https://api.skillhub.cn/org-k6bcf2fv/frontend-slides