copy-design: 丢个网址给AI,还你一份完整设计系统文档

每次让 AI 写前端，最怕的不是它写不出来——而是它写出来的界面，永远是同一张脸。紫渐变背景、居中大标题、几个圆角卡片，第一次看还行，第三次就开始审美疲劳。

更崩溃的是，你想让它复刻某个网站的风格，得把颜色、字体、间距、按钮样式全部用文字描述一遍。提示词越写越长，效果却越来越跑偏。

copy-design 解决的就是这个问题。

它是一个 Claude Code 的 Skill，功能只有一个：输入任意网址，输出这个网站完整的设计规范文档（DESIGN.md）。不是截图，不是参考图，而是一份可以直接喂给 AI 编程工具的、结构化的设计系统文件。

它是怎么工作的

第一步，用 Playwright 无头浏览器抓取目标网站，截取桌面端和移动端两张截图。

第二步，从 CSS 变量 computed styles 里提取所有颜色、字体、阴影、间距数值，按语义分类整理。

第三步，生成一份混合 YAML + Markdown 的 DESIGN.md 文件，包含两大部分：

• YAML Frontmatter：机器可读的设计令牌（颜色、字体、组件样式），可以直接丢给 GPT/Claude 生成代码
• Markdown 文档：人可读的品牌氛围描述、色彩体系、字体层级、布局间距规范、组件细节

生成的文档格式参考了 Google Stitch 的 DESIGN.md 规范，Claude Code、Cursor、Codex 等主流 AI 编程工具都能直接读懂并执行。

可以怎么用

比如说，你在做一个竞品分析，想复刻 Linear 的极简风格，只需要对 Claude Code 说：

/copy-design https://linear.app

几秒钟后，你会得到一份包含 Linear 全部设计令牌的文件，里面有精确到 hex 的颜色值、字体家族、间距系统、按钮和卡片的样式规范。把这份文件扔给 AI，让它照着做，你拿到的就不只是「大概像」，而是像素级的精确复刻。

另一个场景是维护设计一致性。团队里每个人让 AI 生成页面，结果风格全都不一样。解决方法很简单：先用 copy-design 从官网提取一份规范，所有人生成代码前先加载这份文件，AI 就能始终按同一套规则工作。

上手条件

需要 Claude Code CLI、Python 3 和 Playwright（加一条命令安装 chromium）。安装方式也很简单：

git clone https://github.com/mengazaa/copy-design.git ~/.claude/skills/copy-design

装完在 Claude Code 里直接说话就行，支持「/copy-design 网址」「Copy the design from xxx.com」「Extract design tokens from this website」等多种表达方式。

这个 Skill 的价值在于：把「设计规范」这件事从设计师手里，迁移到了 AI 可以理解、执行、复用的文件层。对于经常需要让 AI 生成前端、又不希望每次都从零描述风格的人来说，是一个真正的效率杠杆。

GitHub 仓库 →

GitHub: https://github.com/mengazaa/copy-design