「SkillUI」把任意网站设计系统提取成 Claude 可读 Skill 的开源 CLI

SkillUI 是一个面向前端和 AI 编程工作流的 CLI：给它一个网站 URL、GitHub 仓库或本地项目目录，它会用静态分析把颜色、字体、间距、组件结构、动画和截图等设计系统信息整理出来，再打包成 Claude / Claude Code 可以直接读取的 skill 文件夹。

它的核心思路很直接：与其让模型凭感觉模仿一个产品的视觉风格，不如先把设计语言提取成结构化上下文。默认模式不依赖 AI，也不需要 API Key；如果开启 ultra mode，则会用 Playwright 补充滚动截图、交互状态、动画检测和 DOM 组件指纹，适合想复刻或迁移已有 UI 风格的场景。

从网页到 Claude Code 上下文

典型用法是先执行 skillui --url https://linear.app 或 skillui --repo https://github.com/org/repo，生成的目录里会包含 SKILL.md、CLAUDE.md、DESIGN.md、tokens、references 和截图资源。之后在这个输出目录里打开 Claude Code，模型就能读取这些上下文，再按目标站点的视觉语言生成页面或组件。

这类工具很适合做产品原型、竞品风格拆解、旧项目重构前的设计盘点，或者把某个品牌站的视觉系统迁移到新页面。它不是在线设计平台，更像是一个把前端视觉证据打包给 AI 编程助手的“采样器”。

截至 2026 年 5 月 31 日，SkillUI 的 GitHub 仓库约有 749 个 Star，npm 最新版本是 1.3.4，包信息标注为 MIT 许可证，运行要求是 Node.js 18+。如果要使用 ultra mode，需要额外安装 Playwright 和 Chromium。