用途
SkillUI 用于从现有来源提取设计系统，转化为 Claude 可读取的文件，便于在构建 UI 时复用既有的视觉语言。
当出现以下情况时使用：
- 用户提供 URL，希望匹配或克隆其设计风格
- 用户希望从现有网站提取颜色、字体、间距
- 用户有本地项目或仓库，希望提取其设计 token
- 用户说「pull the design from」「match this site」「get the tokens from」「extract styles from」
主要能力
SkillUI 会生成以下文件：
- SKILL.md / CLAUDE.md — 在 Claude Code 中打开生成文件夹时会被自动读取
- DESIGN.md — 完整的设计系统文档
- tokens/colors.json、tokens/spacing.json、tokens/typography.json
- screens/ — 截图（仅 ultra 模式）
- fonts/ — 打包的 Google Fonts（woff2）
使用方式
模式与命令
| 模式 | 命令 | 适用场景 |
|---|---|---|
| URL（静态） | npx skillui --url <url> | 快速提取 — HTML/CSS/字体/颜色 |
| URL（ultra） | npx skillui --url <url> --mode ultra --screens 10 | 完整提取，含截图、动画、交互。需要 Playwright |
| 本地目录 | npx skillui --dir ./path/to/project --name "ProjectName" | 扫描本地 Next.js/React/Tailwind 项目 |
| 公开仓库 | npx skillui --repo https://github.com/user/repo | 克隆并分析任意公开 GitHub 仓库 |
工作流
第一步 — 运行提取器：
# 基础（推荐首选）
npx skillui --url https://example.com
# 指定输出文件夹
npx skillui --url https://example.com --out ./design-systems/example
# Ultra 模式（含截图的完整提取）
npx skillui --url https://example.com --mode ultra --screens 10
第二步 — 在 Claude Code 中打开输出：
cd <generated-folder-name> && claude
或通过 Read 工具直接读取 DESIGN.md 并在当前会话中引用。
第三步 — 使用设计系统：将 token 文件与 DESIGN.md 读入上下文，在构建 UI 时应用。可将相关 token 传递给 frontend-design skill 和 ui-ux-pro-max 设计系统生成器。
限制与说明
- 无需 API 密钥或云依赖，完全在本地运行
- ultra 模式需要安装 Playwright：npm install playwright && npx playwright install chromium
- 输出文件夹名称自动根据站点/仓库名称生成
- 输出中的 .skill ZIP 压缩包可共享或归档