让 AI 直接”抄”顶级网站的设计系统！ Design Guide Generator 太好用了

不知道你有没有遇到过这种情况——看到一个网站，觉得配色、排版、动效都超好看，想让 AI 也照着做一个，但不知道从哪里描述起。

现在有个开源 Skill 能直接把这个网站的设计系统”扒”出来，变成 Claude Code 能读懂的规则文件。

Design Guide Generator 是 ceagleme/claude-skills 仓库里的一个 Claude Code Skill，核心功能就是一个：输入任意网站 URL，输出完整的设计规范文档——颜色、字体、间距、动效、组件样式，全套。

它的工作方式很直接。跑起来之后会用 Playwright 自动访问目标页面，截图、抓取 CSS、分析 DOM 结构，然后生成一份结构化的 Markdown 设计指南，里面包含：

• 完整色板：文字色、背景色、边框色、阴影色、渐变色，全部 HEX 值
• 字体系统：字体族、字号、字重、行高，层级关系一目了然
• 交互状态：hover / focus / active 时的样式变化，截图留存
• 组件模式：按钮、卡片、表单、导航栏的样式特征
• 响应式截图：手机、平板、桌面三个断点同时截图对比
• HTML + CSS 源码：直接可以复用到自己的项目里

整个过程不需要任何 API Key，纯本地跑，依赖只有 Playwright + Chromium。

这个工具的应用场景很广。你可以直接分析 Stripe、Linear、Vercel 这些设计标杆网站，提取它们的视觉语言用到自己的项目里；也可以拿它做竞品分析，量化对比不同产品的设计差异；甚至可以把你欣赏的网站设计规则提取出来，形成一套可复用的 Design.md 文件，喂给 Claude Code 或 Cursor，让 AI 生成风格一致的界面。

安装也不麻烦。克隆仓库后进 design-guide 目录，uv sync 装依赖，再装一下 Chromium：

cd design-guide
uv sync
playwright install chromium

然后用 Claude Code 时，说”分析一下这个网站的设计系统”就能自动触发。

这个 Skill 的价值在于把设计这件事从”感觉”变成了”规则”。以前你只能描述”我要 Apple 那种感觉”，现在你可以直接说”按这个网站的设计系统来做”，Claude 照着规则走，输出会更可控。

GitHub 链接：https://github.com/ceagleme/claude-skills

GitHub: https://github.com/ceagleme/claude-skills