用 SkillUI 把任意网站的设计系统导出成 Claude Code 能读的 Skill 文件
看到一个喜欢的网站，想参考它的设计风格来做自己的项目。
通常的流程是：打开 DevTools，找到颜色变量一个个抄，查字体名称和字重，量间距，看圆角半径，观察动画效果。一套操作下来，半小时起步。
而且抄下来的东西是零散的——一堆十六进制色值、几个字体名、几个间距数。AI 拿到这些碎片化的信息，大概率还是生成"那种千篇一律的紫蓝渐变 + Inter 字体"的模板风格。
根据 Anthropic 研究员的说法，这叫 "分布坍缩"（distributional convergence）：当没有给 AI 明确的设计参考时，它就会从训练数据的统计中心采样，生成最"平均"的 UI——Inter 字体、紫蓝渐变、卡片套卡片的布局、每个标题上方一个圆角方形图标。翻遍 AI 生成的页面，会发现它们都长得惊人地相似。
如果能有一种方法，把任意一个网站的完整设计系统，快速、结构化地导出成 AI 能直接消费的格式就好了。这就是开源项目 SkillUI 要解决的问题。
SkillUI 是什么
SkillUI 是一个由开发者 Amaan Khan（@amaancoderx）发起的开源 CLI 工具，可用纯静态分析的方式，把任何网站、Git 仓库或本地项目的完整设计系统，逆向工程成一份 Claude Code 能自动读取的 Skill 文件。
它做的是设计系统的"搬运"：把网页里藏在 CSS 变量、Tailwind 配置、内联样式中的设计 token 提取出来、结构化，打包成 AI 能直接消费的格式。
核心亮点
1. 零 AI、零 API Key、纯静态分析
市面上很多类似工具走的是另一条路：截图 → 调 Vision API → 让 AI "猜"设计参数。SkillUI 完全相反：它逐行解析 HTML 和 CSS，提取的每一个色值、每一个字体、每一个间距，都是页面实际使用的值，精确到像素级，没有任何"猜测"成分。
这意味着它的输出是确定性的、可复现的。今天扒 Linear 的设计系统，明天再扒一遍，结果完全一致。不需要担心 AI 幻觉，不需要花钱买 API Key，不需要网络连接——所有分析都在本地完成。
2. 输出格式就是"AI 即插即用"的
SkillUI 的输出不是一份 PDF 报告，不是一张截图，而是一套结构化的文件：
SKILL.md：Claude Code 的技能描述文件，打开就能用CLAUDE.md：项目级的上下文说明DESIGN.md：完整的设计 token 文档tokens/*.json：JSON 格式的颜色、间距、字体 tokenreferences/*.md：动画、布局、组件、交互的详细分析
当你把输出文件夹丢给 Claude Code，AI 会自动读取 SKILL.md 和 CLAUDE.md，里面包含了完整的设计系统上下文。
3. Ultra 模式：不只取静态值，更取动态行为
大多数设计逆向工具只做静态分析——颜色、字体、间距。但真正让一个页面"看起来贵"的，往往不是颜色，而是那些微妙的动画和交互。
SkillUI 的 Ultra 模式为此引入了 Playwright，能够捕获：
- 7 张滚动旅程截图（从 Hero 区到 Footer 的完整体验）
- Hover/Focus 状态的前后样式差异
- CSS
@keyframes关键帧和动画库检测（GSAP、Lottie、Three.js、AOS 等） - Flex/Grid 布局结构分析
- DOM 组件指纹识别
这意味着你拿到的不只是一份配色表，而是一套完整的动效规格——知道目标页面的按钮 hover 时颜色如何变化、卡片展开时有哪些过渡效果、滚动时触发了哪些动画库。
功能特性
SkillUI 提供了四种工作模式，覆盖了从"看了喜欢的网站想扒下来"到"分析自己的代码库设计系统"的完整使用链路。
模式一：URL 模式——扒任意网站
这是最常用的场景。给一个 URL，SkillUI 就会抓取页面 HTML、爬取所有关联的 CSS 文件，提取颜色变量、字体栈、间距系统等核心设计 token。
skillui --url https://linear.app
模式二：Ultra 模式——完整视觉提取
在 URL 模式基础上加 --mode ultra，就会启用 Playwright 进行更深度的视觉分析，包括滚动截图、交互差异、动画检测等。
skillui --url https://linear.app --mode ultra
Ultra 模式会在输出文件夹里生成 screens/scroll/ 目录，包含 7 张从页面顶部到滚动底部的完整截图，以及 references/ 下的动画、布局、组件、交互分析文档。
模式三：Dir 模式——扫描本地项目
给一个本地目录路径，SkillUI 会扫描 .css、.scss、.ts、.tsx、.js、.jsx 文件，识别设计 token、Tailwind 配置、CSS 变量和组件模式。这对于整理和审计自己项目的设计系统非常有用。
skillui --dir ./my-nextjs-app --name "MyApp"
模式四：Repo 模式——克隆分析远程仓库
给一个公开的 Git 仓库地址，SkillUI 会自动克隆仓库，然后运行 Dir 模式分析。这对于研究开源项目的设计实现特别方便。
skillui --repo https://github.com/vercel/next.js --name "Next.js"
快速上手
安装
# 全局安装
npm install -g skillui
# 验证安装
skillui --help
如果不想全局安装，也可以直接用 npx 运行：
npx skillui --url https://linear.app
Ultra 模式额外安装（可选）
npm install playwright
npx playwright install chromium
使用示例
场景一：提取 Notion 的设计系统
# 基础模式
skillui --url https://notion.so --name "Notion"
# Ultra 模式（包含完整视觉分析）
skillui --url https://notion.so --mode ultra --name "Notion"
场景二：分析自己的 Next.js 项目
skillui --dir ./my-nextjs-app --name "MyApp"
场景三：研究 Vercel 开源项目的设计系统
skillui --repo https://github.com/vercel/next.js --name "Next.js"
场景四：保存到指定目录并只输出设计文档
skillui --url https://stripe.com --out ./design-systems --format design-md
所有命令参数
skillui --url 爬取线上网站
skillui --dir
扫描本地项目目录
skillui --repo 克隆并扫描 Git 仓库
--mode ultra 启用电影级视觉提取（需 Playwright）
--screens Ultra 模式爬取页面数（默认 5，最大 20）
--out
输出目录（默认当前目录）
--name 自定义项目名称
--format design-md|skill|both 输出格式（默认 both）
--no-skill 只输出 DESIGN.md，跳过 .skill 打包
配合 Claude Code 使用
这是 SkillUI 最核心的使用场景。完成设计系统提取后：
# 1. 进入输出目录
cd notion-design
# 2. 用 Claude Code 打开
claude
# 3. 在 Claude 中输入
# "帮我按照这个设计系统做一个 SaaS 产品的落地页"
# 或者
# "Create a dashboard matching the Linear design system"
Claude Code 会自动读取 SKILL.md 和 CLAUDE.md，获取完整的设计上下文，然后用提取到的配色、字体、间距、组件模式来生成代码。
写在最后
SkillUI 的价值不在于"它扒了多少个设计系统"，而在于它证明了一件事：设计系统的逆向工程，可以是一件非常简单、非常精准、完全自动化的事情。
给 AI 一个具体的、可测量的设计参考，它就能写出有风格的代码，而不是千篇一律的模板。
GitHub：