开源工具评测：SkillUI 一键逆向网站设计系统

一、开篇：你是不是也在被这些事折磨？

做前端的朋友，一定有过这样的经历：

看到一个设计超棒的网站（Stripe、Linear、Notion……），想复刻它的视觉风格，结果打开 DevTools 一个个吸色、量间距、抄字体，半小时过去才整理出一半；
用 Claude Code / Cursor 写 UI，AI 生成的页面永远是那套"模板味"——Inter 字体、紫蓝渐变、卡片套卡片、标题上方一个圆角方块图标，跟你想要的参考站差了十万八千里；
接手一个老项目，没有设计文档、没有 Figma，想统一设计规范只能靠肉眼猜 CSS 变量；
竞品分析时，想把对方的设计语言拆解成可复用的令牌（tokens），手动整理到怀疑人生。

问题的根源不是 AI 不够强，而是你没有给它一个"真实的参考分布"。

今天要介绍的这个开源工具 SkillUI，就是专门解决这个痛点的——它能把任意网站、Git 仓库或本地项目的完整设计系统一键提取出来，打包成 Claude Code 可以直接读取的 Skill 文件，让 AI 照着真实品牌规范写 UI，而不是凭空"发明"设计。

二、SkillUI 是什么？

SkillUI 是一个由开发者 Amaan（amaancoderx）打造的设计系统逆向提取 CLI 工具，基于 Node.js 18+ 开发，完全使用 TypeScript 编写，采用 MIT 开源协议。

它的核心能力一句话概括：输入一个网址 / 一个本地目录 / 一个 Git 仓库，输出一套完整的、AI 可直接读取的设计系统文件包。

提取的内容包括但不限于：

提取维度	具体内容
颜色系统	主色、辅助色、语义色、渐变色，全部输出为标准化 JSON tokens
字体排印	字体家族、字重、字号阶梯、行高、字间距，自动打包 Google Fonts
间距系统	间距阶梯、容器宽度、栅格系统、内外边距规范
组件指纹	按钮、卡片、表单、导航等常见组件的样式特征
动画交互	过渡动画、关键帧、hover/focus 状态差异（Ultra 模式）
布局结构	页面布局模式、滚动截图、分区截图（Ultra 模式）

最关键的一点：整个提取过程不调用任何 AI、不需要任何 API Key、纯本地静态分析。 这意味着你的数据不会上传到任何云端，提取结果是确定性的、可复现的。

三、为什么你应该用 SkillUI？

1. 给 AI 一个"真实审美"，告别 AI Slop

Anthropic 把 AI 生成 UI 的同质化问题称为 "分布收敛"（distributional convergence）——没有明确方向时，模型会采样训练数据的统计中心，输出千篇一律的"AI 味"界面。

SkillUI 的做法是反向操作：不跟 AI 说"请设计得好看一点"，而是直接把一个真实网站的设计系统喂给它，让模型在这个参考分布上生成结果。你欣赏 Stripe 的高级感？那就把 Stripe 的设计系统提取出来给 Claude，它生成的页面自然就有 Stripe 那味儿。

2. 省下手动扒样式的大量时间

传统方式复刻一个网站的设计系统，需要：吸色工具取色 → DevTools 查字体 → 量间距 → 整理动画 → 写成文档，熟练的开发者也要 1-2 小时。SkillUI 一行命令，几分钟搞定，而且提取的维度比手动更全面。

3. 输出即 AI 原生格式，零配置接入

SkillUI 输出的不是一份给人看的 PDF 文档，而是 .skill** 格式的文件包**，包含 SKILL.md、CLAUDE.md、DESIGN.md、JSON tokens、截图参考等。放到 Claude Code 的 skills 目录下，AI 自动读取，直接用 /skill名 调用，不需要复制粘贴、不需要写提示词。

而且由于 SKILL.md 格式已成为开放标准，同一份文件无需修改即可在 Claude Code、Codex CLI、Cursor、Gemini CLI、GitHub Copilot 等工具间通用。

4. 覆盖三种数据源，场景全覆盖

不只是在线网站，SkillUI 还支持：

本地项目扫描（--dir）：分析你自己项目的 CSS/SCSS/TSX/JSX，提取设计规范做内部审计；
Git 仓库克隆分析（--repo）：直接输入 owner/repo，自动克隆后分析，适合研究开源项目的设计体系。

四、核心优势：和同类工具比，强在哪？

对比维度	SkillUI	v0 (Vercel)	Builder.io Visual Copilot	Locofy.ai	手动 DevTools
核心方式	静态分析逆向提取	提示词生成 UI	设计稿转代码 SaaS	Figma 转代码	人工手动整理
是否需要 API Key	❌ 不需要	✅ 需要	✅ 需要付费账号	✅ 需要付费账号	❌ 不需要
是否本地运行	✅ 纯本地	❌ 云端	❌ 云端	❌ 云端	✅ 本地
数据隐私	✅ 不上传任何数据	❌ 数据上传	❌ 数据上传	❌ 数据上传	✅ 本地
输出格式	AI 原生 .skill 包	代码组件	代码 + 平台集成	代码文件	零散笔记
动画/交互提取	✅ Ultra 模式支持	❌	部分支持	部分支持	⚠️ 需手动
价格	免费开源	免费额度 + 付费	付费 SaaS	付费 SaaS	免费但耗时

SkillUI 的差异化亮点总结：

"No AI. No API keys." —— 这是项目的核心设计原则，提取过程完全确定性，不依赖任何外部服务；
Ultra 模式 —— 基于 Playwright 的深度分析，能捕获滚动截图、hover/focus 状态差异、动画信号，这是纯 CSS 解析做不到的；
Claude 原生输出 —— 不是给人看的文档，而是 AI 可以直接消费的结构化文件包；
本地字体打包 —— 自动下载 Google Fonts 到本地，离线环境也能保持排版一致性；
多格式输出 —— 支持 --format design-md|skill|both，可只输出文档、只输出 skill 包、或两者都要，方便集成到 CI 流程。

五、手把手实操：5 分钟跑通 SkillUI

环境准备

SkillUI 的硬性要求只有一个：Node.js 18+。

bash

# 检查 Node 版本
node -v
# 建议 v18.0.0 以上

Ultra 模式需要 Playwright，但 SkillUI 会在首次运行时自动安装浏览器，无需手动配置。--repo 模式需要系统已安装 Git。

第一步：全局安装 SkillUI

bash

npm install -g skillui

安装完成后，验证一下：

bash

skillui --version
# 输出类似：v1.3.4

第二步：基础用法——提取在线网站设计系统

最常用的模式，一行命令搞定：

bash

# 提取任意在线网站
skillui --url https://linear.app

执行后，SkillUI 会：

抓取页面 HTML 和关联的 CSS 文件；
解析颜色、字体、间距、组件等设计令牌；
在当前目录生成一个 .skill 压缩包。

第三步：Ultra 模式——深度提取动画和交互

如果目标网站有丰富的动画、hover 效果、滚动交互，静态 CSS 解析可能抓不全。加上 --ultra 参数开启深度模式：

bash

# Ultra 模式：捕获截图、动画、交互状态
skillui --url https://stripe.com --ultra

# 还可以指定截图数量
skillui --url https://notion.so --ultra --screens 10

Ultra 模式会自动 provision Playwright 浏览器（首次运行需要下载，耐心等待），然后执行：

全页滚动截图；
hover / focus 状态差异对比；
CSS 动画和关键帧提取；
布局结构分析。

第四步：扫描本地项目或 Git 仓库

bash

# 扫描本地项目目录
skillui --dir ./my-frontend-project

# 直接分析 Git 仓库（自动克隆）
skillui --repo vercel/next.js

--dir 模式会扫描目录下的 .css、.scss、.ts、.tsx、.js、.jsx 文件，以及 Tailwind 配置和 CSS 变量，适合对自己项目做设计审计。

第五步：查看输出产物

解压生成的 .skill 文件，目录结构大致如下：

your-skill-name/
├── SKILL.md              # Claude Code 技能入口文件
├── CLAUDE.md             # Claude 项目级上下文配置
├── DESIGN.md             # 设计系统总览文档（令牌摘要）
├── tokens/               # 结构化 JSON 设计令牌
│   ├── colors.json       # 颜色令牌
│   ├── typography.json   # 字体排印令牌
│   └── spacing.json      # 间距令牌
├── references/           # 详细参考文档
│   ├── ANIMATIONS.md     # 动画与过渡规范
│   ├── LAYOUT.md         # 布局与栅格规范
│   ├── COMPONENTS.md     # 组件指纹分析
│   ├── INTERACTIONS.md   # 交互状态规范
│   └── VISUAL_GUIDE.md   # 视觉风格指南
├── fonts/                # 打包的本地字体文件
└── screens/              # Ultra 模式生成的截图参考

第六步：接入 Claude Code，让 AI 照着写 UI

把解压后的 skill 文件夹放到 Claude Code 的技能目录：

bash

# 项目级（仅当前项目可用）
mkdir -p .claude/skills
cp -r your-skill-name .claude/skills/

# 全局级（所有项目可用）
mkdir -p ~/.claude/skills
cp -r your-skill-name ~/.claude/skills/

然后在 Claude Code 中直接调用：

bash

# 进入项目目录
cd my-project

# 启动 Claude Code
claude

# 在对话中调用技能
/linear-design 帮我用这个设计系统做一个产品落地页

Claude 会自动读取 SKILL.md 中的设计规范，结合 DESIGN.md、tokens 和截图参考，生成符合目标网站视觉风格的 UI 代码。

💡 小提示： Claude Code 对 Skill 采用"渐进式披露"机制——每次对话只预加载约 100 token 的名称和描述，完整内容只在匹配到任务时才加载，不用担心占用过多上下文。

常用参数速查表

参数	说明	示例
`--url`	提取在线网站	`--url https://stripe.com`
`--dir`	扫描本地目录	`--dir ./my-app`
`--repo`	克隆并分析 Git 仓库	`--repo facebook/react`
`--ultra`	开启 Playwright 深度模式	`--ultra`
`--screens N`	Ultra 模式截图数量	`--screens 10`
`--format`	输出格式：`design-md` / `skill` / `both`	`--format both`

六、适用场景 & 落地案例

场景一：复刻竞品/参考站设计语言

你在做一个 SaaS 产品，喜欢 Linear 的极简科技风。用 SkillUI 提取 Linear 的设计系统，喂给 Claude Code，AI 生成的页面自动套用 Linear 的配色、字体、间距和组件风格，不需要你反复调整。

场景二：老项目设计规范审计

接手一个没有设计文档的老项目，用 skillui --dir ./src 扫描代码库，自动生成完整的设计系统文档，包括颜色令牌、字体规范、组件使用模式，作为团队设计规范化的起点。

场景三：AI 编码工作流的审美增强

把 SkillUI 集成到你的 AI 编码流程中：每次新项目启动时，先选定一个参考站提取设计系统，再让 Claude Code 基于这个规范开发，从源头避免"AI Slop"。

场景四：设计系统团队的竞品分析

设计系统团队需要定期分析竞品的设计语言演进，用 SkillUI 批量提取并对比 token 漂移、组件复用率、动效模式变化，输出可量化的分析报告。

七、客观优劣总结

✅ 优势

零成本、零门槛：免费开源，一行命令安装，不需要注册账号、不需要 API Key；
隐私安全：纯本地运行，目标网站数据和提取结果都不上传云端；
确定性强：静态分析而非 AI 猜测，同样的输入永远得到同样的输出，可复现；
AI 原生：输出直接适配 Claude Code 等主流 AI 编码工具，无需二次加工；
覆盖全面：支持网址、本地目录、Git 仓库三种数据源，Ultra 模式覆盖动画交互；
跨工具通用：SKILL.md 开放标准，一份提取结果可在多个 AI 编码工具间复用。

⚠️ 局限性

只能提取"看得见"的：SkillUI 提取的是 DOM 和 CSS 中实际存在的样式，无法推断隐藏的设计意图或未实现的设计规则；
重度客户端渲染网站可能提取不全：如果网站内容完全靠 JS 渲染且初始 HTML 为空，基础模式可能抓不到内容，需要用 Ultra 模式；
需要登录的页面无法直接抓取：Ultra 模式不会自动绕过登录，需要你手动提供凭证；
输出是设计快照，不是成品代码：SkillUI 给的是设计系统参考，具体 UI 实现仍需 AI 或开发者来写；
私有仓库需额外处理：--repo 模式对公开仓库开箱即用，私有仓库需要配置 Git 访问权限；
Ultra 模式依赖 Playwright：首次运行需要下载浏览器（约 100MB+），离线环境需提前准备。

⚠️ 安全提醒：.skill 文件包是可执行的，其中可能包含脚本文件。从第三方获取的 skill 包，安装前务必解压检查所有文件内容。自己用 SkillUI 从可信网站生成的包则是可审计、可复现的，相对安全。

八、写在最后

SkillUI 不是一个"帮你写代码"的工具，而是一个帮 AI 建立审美基准的工具。在 AI 编码越来越普及的今天，决定输出质量的往往不是模型本身，而是你给模型的上下文质量。

如果你经常用 Claude Code、Cursor 等工具做前端开发，如果你厌倦了 AI 生成的千篇一律的"模板味"UI，如果你想快速复刻某个优秀网站的设计语言——SkillUI 绝对值得加入你的工具箱。

项目地址：https://github.com/amaancoderx/skillui

快速上手：

bash

npm install -g skillui
skillui --url https://你喜欢的网站.com --ultra

试试吧，几分钟后你就能拥有一套属于自己的、AI 可直接使用的设计系统。

如果这篇文章对你有帮助，欢迎收藏、转发，也可以去 GitHub 给作者点个 Star 支持一下开源项目。

开源工具评测：SkillUI 一键逆向网站设计系统 ​

一、开篇：你是不是也在被这些事折磨？ ​

二、SkillUI 是什么？ ​

三、为什么你应该用 SkillUI？ ​

1. 给 AI 一个"真实审美"，告别 AI Slop ​

2. 省下手动扒样式的大量时间 ​

3. 输出即 AI 原生格式，零配置接入 ​

4. 覆盖三种数据源，场景全覆盖 ​

四、核心优势：和同类工具比，强在哪？ ​

五、手把手实操：5 分钟跑通 SkillUI ​

环境准备 ​

第一步：全局安装 SkillUI ​

第二步：基础用法——提取在线网站设计系统 ​

第三步：Ultra 模式——深度提取动画和交互 ​

第四步：扫描本地项目或 Git 仓库 ​

第五步：查看输出产物 ​

第六步：接入 Claude Code，让 AI 照着写 UI ​

常用参数速查表 ​

六、适用场景 & 落地案例 ​

场景一：复刻竞品/参考站设计语言 ​

场景二：老项目设计规范审计 ​

场景三：AI 编码工作流的审美增强 ​

场景四：设计系统团队的竞品分析 ​

七、客观优劣总结 ​

✅ 优势 ​

⚠️ 局限性 ​

八、写在最后 ​

开源工具评测：SkillUI 一键逆向网站设计系统

一、开篇：你是不是也在被这些事折磨？

二、SkillUI 是什么？

三、为什么你应该用 SkillUI？

1. 给 AI 一个"真实审美"，告别 AI Slop

2. 省下手动扒样式的大量时间

3. 输出即 AI 原生格式，零配置接入

4. 覆盖三种数据源，场景全覆盖

四、核心优势：和同类工具比，强在哪？

五、手把手实操：5 分钟跑通 SkillUI

环境准备

第一步：全局安装 SkillUI

第二步：基础用法——提取在线网站设计系统

第三步：Ultra 模式——深度提取动画和交互

第四步：扫描本地项目或 Git 仓库

第五步：查看输出产物

第六步：接入 Claude Code，让 AI 照着写 UI

常用参数速查表

六、适用场景 & 落地案例

场景一：复刻竞品/参考站设计语言

场景二：老项目设计规范审计

场景三：AI 编码工作流的审美增强

场景四：设计系统团队的竞品分析

七、客观优劣总结

✅ 优势

⚠️ 局限性

八、写在最后