我把这个站扒了，10分钟生成完整设计系统

设计师最烦的一件事，不是不会画，而是甲方丢过来一个站，问你“能不能抄成我们品牌风格”。

以前你只能手动吸色、量间距、猜字号，吭哧吭哧写半页 DESIGN.md，还不一定准。现在这个 Claude Code Skill，直接把整个站的设计系统扒出来。

它是什么

copy-design 是一个开源 Skill，你给它一个 URL，它用无头浏览器把站点爬一遍，提取颜色、字体、阴影、间距、组件样式，最后吐给你一份生产级的 DESIGN.md。

为什么值得关注

• 不是静态截图：它读的是 CSS 变量和 computed styles，拿到的是可复用的设计 token，不是“大概这个色”。
• 双格式输出：YAML frontmatter 给机器解析，Markdown 给人类看文档，前后端都能用。
• 移动端也照顾到：同时跑 desktop + mobile screenshots，响应式行为直接记录。
• 开箱即用：克隆到 ~/.claude/skills/，在 Claude Code 里说一句 /copy-design https://... 就出活。

适合谁

做 AIGC 产品界面、做设计系统、想快速复刻竞品视觉风格的同学。尤其是需要把“参考站”翻译成设计师和开发者都能读的 token 系统时，这个 Skill 省掉至少 2 小时的体力活。

我的使用感受

实测给了一个 landing page，出来的 DESIGN.md 里连 button 的 backgroundColor、shadow 的 blur/offset 都被标出来了。我直接把 YAML 喂给 Figma tokens 插件，不到 10 分钟就把配色和组件变量搭好了。

如果你经常要从优秀站点里“偷师”设计系统，这个 Skill 值得装。

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

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