这个Skill太狠了！丢个网址进去，整套设计系统自动扒下来

做过设计还原的同学，应该都体会过那种痛苦——配色要从截图里吸，字体要一个个数，行高要靠肉眼看，阴影值要靠猜。一个页面的 design token，花半小时都写不完全。

现在有了这个 Skill，你只要给它一个 URL，它全自动帮你把整套设计语言扒干净。

Design Guide Generator 是 Claude Code 上的一个设计系统提取工具。你丢一个网址进去，它用 Playwright 截图抓取，然后从视觉层面把一个网站的「设计基因」全部解析出来：

• 完整色板：文字色、背景色、边框色、阴影色、渐变色，全部 HEX/RGB 值给你列出来
• 字体系统：字体族、字号、字重、行高，一目了然
• 交互状态：hover、transition、animation 全部截图留存
• 组件模式：按钮、卡片、表单、导航，每种组件的样式特征都识别
• 响应式截图：移动端、平板、桌面三个断点各截一张

输出也相当专业——一份完整的 Markdown 设计指南文档，外加全页截图、交互状态截图、各断点截图，以及 HTML/CSS 源码文件，还有一份结构化的 JSON 数据。

用起来很简单：

cd design-guide
uv sync
playwright install chromium
uv run main.py --url https://stripe.com --output ./stripe-design

适合的场景很多：竞品设计分析、设计系统文档逆向工程、组件库重建、UX 交互模式研究，甚至只是想学习某个网站的视觉语言都可以。

作者是陈天（8000tank），Star 数目前增长中。仓库在 GitHub，有完整 README 和详细使用说明。

说实话这是我最近看到最实用的设计类 Skill 之一——尤其适合需要做设计还原、前端开发、设计走查的同学。以前花半小时的手工活，现在几分钟搞定，而且数据比肉眼准多了。

👉 GitHub：https://github.com/8000tank/claude-skills

GitHub: https://github.com/8000tank/claude-skills