古法编程

本文详解 Everything Claude Code 中的 design-system、frontend-slides 和 ui-demo 三个 Skill，实现设计系统生成、视觉审计、零依赖 HTML 演示文稿构建及带可见光标的 WebM 视频录制自动化。你将学会如何用 /design-system 命令一键生成设计 token、对现有 UI 进行 10 维度打分审计，并检测“AI 设计废料”；用 frontend-slides Skill 从零创建或转换 PPT 为动画丰富的 HTML 演示文稿；以及用 ui-demo Skill 通过“发现-彩排-录制”三阶段流程，自动生成带专业 SVG 光标和字幕条的 WebM 产品演示视频，彻底规避录制失败风险。

设计系统生成与 UI 演示自动化：视觉审计、HTML 演示文稿与 WebM 视频录制

在 AI 辅助编程的生产环境中，前端资产的生成、质量审查与可视化演示是提升团队效率的关键环节。手动建立设计规范、制作演示文稿或录制操作视频，往往流程繁琐且容易出错。Everything Claude Code 的插件体系提供了三个紧密相关的 Skill：design-system、frontend-slides 与 ui-demo，它们分别针对设计系统生成与审计、演示文稿构建、UI 视频录制三个痛点，提供了自动化解决方案。本指南将为你拆解这三个 Skill 的核心用法与协作流程。

一、设计系统生成与视觉审计（design-system Skill）

design-system Skill 能够自动化生成设计系统文档、进行多维度视觉审计，并检测常见的 AI 生成“设计废料”。它解决了设计规范滞后、视觉风格混乱、样式 PR 难以审查的问题。

1.1 自动生成设计系统

当一个新项目缺乏设计规范时，可以快速建立基础。 触发命令：

/design-system generate --style minimal --palette earth-tones

操作步骤：

  1. Skill 会扫描代码库中的 CSS/Tailwind/styled-components 等样式文件，提取现有的色彩、排版、间距等设计模式。
  2. 通过浏览器自动化调研 3 个竞品网站，获取设计灵感。
  3. 生成统一的设计 token（JSON 格式 + CSS 自定义属性）。
  4. 输出 DESIGN.md 说明文档，解释每项设计决策的 rationale。
  5. 生成一个可交互的 HTML 预览页面 (design-preview.html)，便于团队直观讨论。

输出结果：

  • /design-system/DESIGN.md
  • /design-system/design-tokens.json
  • /design-system/design-preview.html

1.2 视觉一致性与样式审计

此模式用于对已有的 UI 进行全面健康检查，或为样式相关 PR 提供自动化审查。 触发命令：

/design-system audit --url http://localhost:3000 --pages / /pricing /docs

操作步骤：

  1. 抓取指定页面的实际渲染结果。
  2. 针对以下 10 个维度进行自动打分（每项 0-10 分）：
    • 色彩一致性、排版层级、间距节奏、组件一致性、响应式表现、暗黑模式、动画、无障碍、信息密度、细节打磨。
  3. 每个维度输出具体问题示例、修复建议，并定位到具体文件和行号。

示例输出片段：

Color consistency: 6/10
  - Found 3 random hex colors in /components/Button.tsx:42
  - Suggest replacing with primary/secondary tokens
Typography hierarchy: 8/10
  - h2 and h3 styles too close in /pages/docs.tsx:17

该审计报告可集成到 CI/CD 中，作为样式 PR 合并的质量门控。

1.3 AI“设计废料”检测

用于识别并清除 AI 生成代码中千篇一律、缺乏品牌特色的“模板化”设计。 触发命令：

/design-system slop-check

Skill 会自动检测以下模式：

  • 滥用渐变（如所有元素都使用紫蓝渐变）。
  • 无目的的玻璃拟态卡片。
  • 不合适的圆角、过度动画。
  • 千篇一律的“英雄区”布局结构。 并列出所有检测到的实例及位置，给出整改建议。

二、零依赖 HTML 演示文稿构建（frontend-slides Skill）

frontend-slides Skill 专为开发者和非设计师打造，能够根据主题、草稿或现有 PPT 文件，自动生成动画丰富、100% 浏览器本地运行的 HTML 演示文稿，无需任何前端框架或构建工具。

2.1 核心价值与触发场景

对比传统做法的优势：

  • 零依赖：生成的 HTML 文件自带 CSS/JS，直接本地打开。
  • PPT 转网页：支持 .ppt/.pptx 文件无损转换为响应式 HTML，保留内容、顺序与备注。
  • 风格探索：通过生成多个风格预览，避免“模板脸”。
  • 严格视口适配：确保每页内容一屏显示，字体间距自适应不同屏幕。

典型触发语句：

  • “帮我做一个产品发布演讲的幻灯片。”
  • “把这个 PPT 转成网页版本。”
  • “我有一份讲稿，生成一套风格独特的 HTML 演示文稿。”

2.2 操作流程详解

模式选择： 首先明确是新建演示文稿、转换 PPT，还是优化已有 HTML。

风格探索与生成：

  1. Skill 不会询问抽象风格问题，而是根据你的用途（如“pitch/教学”）和氛围期望（如“希望观众被打动”），自动生成 3 个单页风格预览。
  2. 预览文件保存在 .ecc-design/slide-previews/ 目录，你选择最喜欢的风格或混合元素。
  3. 之后 Skill 会生成完整的 presentation.html 文件。

生成的 HTML 关键技术特性：

  • 语义化的 <section class="slide"> 分区。
  • 强制视口适配：所有字体、间距使用 clamp()、vw、vh 单位，确保在主流尺寸下无溢出。
  • 主题色、字体通过 CSS 变量集中管理。
  • 内置 JS 控制键盘/鼠标/触摸滑动、进度指示和动画触发。
  • 支持 prefers-reduced-motion，兼顾易感人群。

PPT/PPTX 转换细节：

  • 优先使用 python3 和 python-pptx 库提取文本、图片、备注。
  • 若本地环境无该库，Skill 会提示安装或降级处理。
  • 转换后同样经过风格探索流程，生成网页版演示文稿。

输出示例： 输入转换指令后，Skill 会先让你选择风格（如 Neon Cyber），然后输出 product-launch.html，并附带风格、页数、可自定义点说明。

三、UI 演示视频录制（ui-demo Skill）

ui-demo Skill 基于 Playwright 自动化，通过强制的三阶段流程，录制带可见 SVG 光标、字幕条和自然节奏的专业 WebM 演示视频，彻底规避传统录屏脚本“录完才发现出错”的陷阱。

3.1 强制三阶段流程

阶段 1：发现（Discover）

在编写录制脚本前，先用 Playwright 实际打开页面，导出所有可交互元素的真实结构，生成字段映射（field map）。 示例输出：

/purchase-requests/new:
  - Budget Code: <select> (4 options)
  - Desired Delivery: <input type="date">
  - Submit: <button> text="Submit"

这避免了凭想象编写脚本导致的选择器失效问题。

阶段 2：彩排（Rehearse）

编写彩排脚本，逐步验证所有关键选择器是否可见且可交互。任何一步失败都必须修正，绝不允许带错进入录制阶段。 彩排命令示例：

node demo-script.cjs --rehearse

阶段 3：录制（Record）

初始化 Playwright 录制环境，注入 SVG 光标和字幕条，并按步骤执行操作。 核心代码结构：

// 1. 初始化带视频录制的上下文
const context = await browser.newContext({
  recordVideo: { dir: './screenshots', size: { width: 1280, height: 720 } },
  viewport: { width: 1280, height: 720 }
});
const page = await context.newPage();

// 2. 注入光标和字幕条
await injectCursor(page);
await injectSubtitleBar(page);

// 3. 分步操作并显示字幕
await showSubtitle(page, 'Step 1 - 登录');
await moveAndClick(page, '#login-button', '登录按钮');
await typeSlowly(page, '#email', 'user@example.com', '邮箱输入');

// 4. 结束并保存视频
await context.close();

正式录制命令：

node demo-script.cjs

最终输出： screenshots/demo.webm 视频文件，带有清晰的操作轨迹和字幕。

四、Skill 间的协作与工作流整合

这三个 Skill 可以嵌入更广泛的自动化工作流中：

  • design-system 的视觉审计结果可以作为前端代码合并的质量门。
  • frontend-slides 生成的 HTML 演示文稿可以直接作为产品文档的一部分。
  • ui-demo 录制的视频可以由 doc-updater Agent 自动嵌入到项目 README 或使用手册中。
  • 三者均可作为端到端质量保障循环中的验证环节，确保设计、演示与交互的一致性。

掌握这些 Skill，意味着你可以将设计、演示和视频交付这些重复性高、易出错的工作，转变为可靠、可重复的自动化流程，从而将精力聚焦于核心的架构决策与创新上。更多关于 AI Agent 编排与工程模式的深度实践，可参考 Claude Code 高级技巧。

FAQ

Q: design-system Skill 审计报告能自动修复发现的问题吗？ A: 不能。Skill 只负责定位问题并提供具体的修复建议（如文件、行号、替代方案），实际的代码修改需要开发者或设计师手动完成。

Q: 用 frontend-slides 生成的 HTML 演示文稿，如何自定义动画效果？ A: 所有动画效果都通过 CSS 变量和内联 JS 控制。你可以在生成的 HTML 文件顶部找到 :root 中定义的 CSS 变量，修改颜色、字体、过渡时间等即可。更复杂的动画需要直接编辑 JS 部分。

Q: ui-demo 录制过程中，如果页面跳转后 SVG 光标消失了怎么办？ A: 这是正常现象。因为页面跳转会导致 DOM 重置。你需要在脚本中，每次 await page.goto(...) 或等效的页面导航操作之后，重新调用 await injectCursor(page) 来注入光标，确保其持续可见。