Claude Code 一键扒下整个网站的设计语言！这个开源 Skill 太狠了

你有没有想过——看到一个喜欢的网站，能不能直接让 AI 把它的配色、字体、动效全部”抄”过来？

现在可以了。

Design Guide Generator 是 GitHub 上一个开源 Claude Skill，专门做一件事：把任意网站的设计语言全部扒下来，生成一份可以直接用的设计指南。

具体能提取什么？
– 完整配色：文字色、背景色、边框色、阴影、渐变色，全部 Hex 色值
– 字体系统：字体家族、大小、字重、行高，一目了然
– 交互动效：hover 效果、过渡动画、加载状态，截图 + 参数
– 组件模式：按钮、卡片、表单、导航栏，每个组件的样式特征
– 响应式截图：桌面、平板、手机三端同步截图对比

全程本地跑，不需要任何 API Key——用的是 Playwright，直接抓页面跑分析。

适合谁用？
做竞品分析时再也不用手动记配色了，一键生成 Markdown 文档 + 截图，一份完整设计系统说明文档就出来了。要复刻某个网站的视觉风格，这个工具就是起点。

怎么用？
在 Claude Code 里安装后，直接说：

“用 design-guide 分析 https://stripe.com”

Claude 会自动读取 Skill，调用 Playwright 抓页面，跑完整分析流程，输出设计指南文档 + 截图。

整个过程不需要配置、不需要写代码，就是一个对话的事。

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

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