一个 URL，让 AI 把你看上的网站设计”复制”成完整规范文档

做过设计稿的时候，有没有遇到这种崩溃时刻——看上一个网站的配色和排版，想用到自己的项目里，结果对着 F12 一个个抄颜色值、记字体大小，眼睛都快瞎了？

最近我在逛 GitHub 的时候发现了一个超聪明的 Claude Code Skill，叫 copy-design，彻底把我从这种重复劳动里解救出来了。

它能做什么？

你给它一个 URL，它能干完整一整套设计感知析：

• 用 Playwright 无头浏览器自动抓取页面
• 提取 CSS 变量、计算样式、颜色、字体、阴影值
• 截取桌面端 + 移动端双版本截图
• 生成一份完整的 DESIGN.md 设计规范文档

输出的 DESIGN.md 不是普通的笔记，而是 YAML + Markdown 双格式的混合文档：

• YAML 区：机器可读的设计令牌（颜色、字号、间距、圆角等），直接喂给 AI 生成代码
• Markdown 区：人类可读的设计文档，覆盖颜色角色、排版层级、布局间距、组件规范、最佳实践与禁忌、响应式行为

使用有多简单？

安装到 Claude Code：

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

还需要装 Playwright：

pip install playwright
playwright install chromium

然后在 Claude Code 里直接说：

/copy-design https://wanderlustapp.io

或者：”Copy the design from linear.app”、”Extract design tokens from this website”——用自然语言描述就行，它会问你想要截取哪些页面、保存路径等信息。

适合谁用？

我觉得这三个场景最爽：

• AI 开发者的设计交接：抄起别人的设计稿，直接生成令牌文档丢给 AI，下一秒就能生成风格一致的代码
• 学习优秀设计：把 Linear、Vercel 这些设计标杆网站的规范文件生成出来，细细研究人家的设计系统是怎么搭的
• 团队设计一致性维护：一个 DESIGN.md 文件，整个团队和 AI 都能看懂，设计师不再需要反复”这个按钮再稍微深一点”

总结

copy-design 把「设计感知析」这个脏活累活自动化了，输出的是标准化的 DESIGN.md 格式——这也是 Google Stitch 主推的设计系统文档新标准。MIT 协议，免费开源，上手门槛极低。

如果你经常需要”参考某个网站的风格”但又懒得手动抄，这个 Skill 绝对值得一试。

GitHub 仓库戳这里 →

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