前言¶
做演示文稿的人通常有两条路：在 PowerPoint 里拼，或者用前端技术写网页幻灯片。前者排版自由但动效和跨设备显示受限，后者效果好但要写大量 CSS，非设计师很难上手。Frontend Slides 这个 Skill 做的是第三条路：用自然语言描述需求，让模型按一套既定的设计规范直接产出零依赖、动画丰富的 HTML 演示文稿，既能从零创建，也能把 PPT 转换过来。
这是什么¶
Frontend Slides 是一个基于通用 SKILL.md 格式的 Agent Skill，坐标 @ken0122/frontend-slides，发布者 ken0122，上游仓库位于 ClawHub（https://clawhub.ai/ken0122/frontend-slides），当前版本 2.0.2，分类 office-efficiency。它解决的问题是：让没有设计背景的人也能产出排版、配色、动效都达标的网页演示文稿，并通过”看图选风格”而不是填问卷的方式确定美学方向。
核心能力¶
下面是已核实的功能点，均来自上游仓库的 SKILL.md 说明。
- 两条输入路径：从零创建演示文稿，或从 PowerPoint 文件转换生成。
- 零依赖：产出的 HTML 完全在浏览器中运行，不依赖外部运行时或构建工具。
- 动画丰富：内置 reveal 分级进场、悬浮、光晕脉冲等动效，并给出可直接使用的 CSS 片段。
- 风格预设：内置五类风格定位——Future & Depth（毛玻璃暗色）、Efficiency & Speed（扁平 + Bento UI）、Trust & Professional（瑞士极简）、Care & Resonance（低饱和自然色 + 大圆角）、Immersion & Expression（拟物 + 高对比）。风格选择规则写在 SKILL.md 中，例如售前方案对应 Trust & Professional 或 Efficiency & Speed，产品发布对应 Future & Depth。
- 视觉探索式美学确定：核心理念是 “show, don’t tell”，先让用户看到不同风格的效果，而不是用抽象问题询问偏好。
- 系统完整性约束：颜色、间距（8 点网格：8/12/16/20/24/32/40）、圆角、最小点击区域 44px、最小可读字号 12px、正文 14px/16px、阴影类型都有明确取值范围，不允许随机值。
- 静态可读的交互状态：因为是静态 HTML，要求在同一容器内硬编码渲染组件的不同状态（默认、hover、选中），而不是依赖 Tailwind 的
hover:伪类，保证截图中能看到完整生命周期。 - 参考文件体系：生成 CSS、图片处理、PPT 提取、HTML 结构、编辑按钮或动画代码时，需要先读取
reference/目录下对应的文件，以及STYLE_PRESETS.md（预设与 CSS 注意事项），保证输出完整正确。 - 2026 设计趋势整合：SKILL.md 收录 Ghostly Agency（预测式呈现、透明悬浮）、The Grain of Truth（噪点纹理、有机排版）、Liminal Multimodality（声波、3D 透视）、Emotional Sovereignty 四类趋势，要求根据内容主题选择 1-2 个主导趋势融入设计。
安装与启用¶
上游仓库给出的安装方式是通过 ClawHub 的 skills CLI：
openclaw skills install @ken0122/frontend-slides
页面同时提示可通过 npx skills 使用 CLI 安装。安装后在支持 SKILL.md 的 Agent 环境（如 Cursor、Codex CLI、Claude Code 等）中按 Skill 坐标调用即可。该 Skill 标签为 requires_api_key=false，不需要额外配置 API Key。
典型用法¶
以下是上游资料中可复现的用法，按”先定风格，再生成，最后校验”的顺序。
-
明确用途，触发对应风格规则。例如用户说”帮我做一份售前方案演示”，按 SKILL.md 的规则应选择 Trust & Professional（Swiss Modern）或 Efficiency & Speed（Bento UI）。
-
让 Agent 生成演示文稿。用户只需给出主题、受众和页数要求，Agent 会先读取
reference/下的对应文件与STYLE_PRESETS.md，再产出完整的 HTML 文件。 -
处理 PPT 输入。用户提供 .pptx 文件时，Skill 走 PPT 提取流程，从原文件中提取内容后按同一套设计规范重新排版。
-
校验产出。检查是否满足系统约束：间距取值是否在 8 点网格内、圆角是否按风格预设、阴影是否为柔和漫射光、交互状态是否硬编码可见。
SKILL.md 中给出的字体与动效约束可直接作为验收标准：
/* 悬浮动效（Ghostly Float 示例） */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ghostly-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); animation: float 4s ease-in-out infinite; }
/* 柔和漫射阴影（系统约束） */
shadow-[0_10px_30px_rgba(0,0,0,0.08)]
适用场景与注意¶
适合谁：销售、售前、客户提案等需要频繁产出演示文稿但非设计岗位的人；教学、会议演讲、内部汇报的制作者；想把已有 PPT 升级为网页格式的用户。
限制与坑：
- 产出是静态 HTML，交互状态必须硬编码，不能依赖
hover:伪类，否则截图中看不到交互效果。 - 风格选择受 SKILL.md 规则约束，不适合需要完全自定义、打破网格的创意设计。
- 颜色、间距、圆角都有取值范围，超出范围的”随机感”设计不在该 Skill 的设计哲学内。
- 完整版演讲表达工作流套件不在开源 Skill 中，官方说明需通过淘宝搜索「AI灵匣」店铺获取。
结尾¶
Frontend Slides 的价值在于把演示文稿的设计规范固化进 Skill，让非设计师也能稳定产出排版、配色、动效达标的网页幻灯片，同时保留从 PPT 迁移的入口。如果你需要的是零依赖、浏览器直开、风格可控的 HTML 演示文稿，这个 Skill 值得一试。
官方地址：https://clawhub.ai/ken0122/frontend-slides
分发地址：https://api.skillhub.cn/org-b6kzcl68/frontend-slides
