GitHub - amaancoderx/npxskillui
SkillUI 是一个纯静态分析的开源 CLI 工具，可以将任意网站、Git 仓库或本地代码库的设计系统（颜色、字体、间距、动画、组件、截图等）提取为文件夹，并输出 Claude Code 可直接读取的 CLAUDE.md、SKILL.md、DESIGN.md 和 .skill 打包文件，让 Claude 在生成 UI 时自动匹配目标视觉语言。
社区作者 · zZz
它解决什么问题
SkillUI 是一款用纯静态分析方式逆向设计系统的 CLI 工具，不使用 AI、不需要 API Key，所有处理都在本地完成。它支持多种模式：URL 模式可提取网站的 HTML、CSS、字体、颜色变量与排版规范；Ultra 模式基于 Playwright 截图抓取整页滚动截图、交互 diff、动画检测、布局分析和 DOM 组件指纹；Dir 模式扫描 .css/.scss/.ts/.tsx/.js/.
jsx 中的设计令牌、Tailwind 配置、CSS 变量和组件模式；Repo 模式则克隆任意公共 Git 仓库后运行 Dir 模式。工具会生成 notion-design 形式的输出目录，包含 SKILL.md、CLAUDE.md、DESIGN.md、tokens/colors.json、spacing.json、typography.json、本地字体文件以及 .skill 压缩包；在输出目录中运行 claude 后，Claude 会自动读取这些设计上下文，从而按要求生成与网站视觉语言匹配的 HTML/UI。
该项目适用于需要让 Claude Code 快速复用某个网站或代码库设计规范的前端开发者、设计系统工程师与 AI 辅助 UI 开发场景。许可证为 MIT。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
环境要求：Node.js 18 及以上。
- 全局安装 SkillUI：
npm install -g skillui2.（可选）如需使用 ultra 模式，需要安装 Playwright 与 Chromium：
npm install playwrightnpx playwright install chromium- 首次快速使用：
从任意 URL 提取设计系统，例如 Notion
skillui --url https://notion.so
- 进入生成的设计系统目录，并启动 Claude Code：
cd notion-design && claude"Build me a landing page that matches this design system" Claude 会自动读取 CLAUDE.md 与 SKILL.md，无需手动配置；它会使用提取出的颜色、字型、间距、组件、动画和截图生成对应视觉语言的 HTML。
- 在 Claude Code 中发出指令，例如：
其他模式：
扫描本地项目
skillui --dir ./my-app
克隆并分析公共 Git 仓库
skillui --repo https://github.com/org/repo
Ultra 全视觉提取（需要 Playwright）
skillui --url https://linear.app --mode ultra
常用参数： --mode ultra 启用全视觉提取 --screens <n> 控制 ultra 模式爬取页面数（默认 5，最大 20） --out <path> 输出目录，默认在当前目录 --name <string> 覆盖项目名称 --format design-md|skill|both 输出格式，默认 both --no-skill 只输出 DESIGN.md，不生成 .skill 包
常见问题：ultra 模式依赖 Playwright，如果未安装会无法使用该模式；运行 npx playwright install chromium 可以安装 Chromium。
来源教程配图
