扔个网址就能拆解整套设计系统！这个 Claude Skill 太狠了
你的下一个设计系统分析神器来了
做设计系统文档最痛苦的是什么？一个字一个字抄颜色值、记字体大小、截交互状态图……光一份设计指南就要搞一整天。今天发现一个 Claude Code Skill，能把你扔一个网址，它自动给你吐出一整份像素级设计指南——颜色、字体、间距、动画、组件、响应式截图，全套。
它能做什么
这个 Design Guide Skill 干的事情说起来不复杂：输入任意网站 URL，输出包含完整设计系统的文件夹。具体包括：
- 完整色彩体系——文字色、背景色、边框色、阴影色、渐变色，一个不漏
- 字体系统——字族、大小、粗细、行高，全都解析出来
- 交互状态捕获——hover 效果、过渡动画、点击反馈，截图保存
- 组件模式识别——按钮、卡片、表单、导航，逐一提取样式
- 响应式截图——桌面、平板、手机三个断点同时截图
- 完整 HTML 和 CSS 源码
- 结构化 JSON 数据
实际体验怎么样
我用 Stripe 官网跑了一下，五分钟不到，输出了一个设计指南文件夹，里面有设计变量说明文档、有各断点截图、有 hover 状态图、有完整的颜色代码。相当于请了一个设计师+前端实习生的外包组合，干了半天的活。
最实用的是它能”反编译”任意网站的设计系统。你想参考 Vercel 的配色？Anthropic 的字体选择？Figma 的交互细节？直接扔给他，马上给你拆解出来。这在竞品分析、设计灵感采集、团队设计规范对齐场景下非常有用。
安装和使用
需要 Playwright 和 Chromium 浏览器支持，不过好消息是——不需要任何 API Key，完全本地运行，保护隐私。
安装步骤：
- 克隆仓库：
git clone https://github.com/8000tank/claude-skills - 进入目录：
cd design-guide - 安装依赖：
uv sync - 安装浏览器：
playwright install chromium - 运行：
uv run main.py --url https://stripe.com --output ./stripe-design
之后 Claude Code 会话中遇到任何涉及网站设计、分析或重建的任务，这个 Skill 会自动触发。
适合谁用
设计师、产品经理、前端开发、设计系统工程师——凡是要快速理解一个网站的设计语言，或者要把设计稿转成代码的场景，都可以用它省大量重复劳动。尤其在做竞品调研、设计规范文档时候，这个工具效率提升很明显。
GitHub 链接：https://github.com/8000tank/claude-skills
评论区
0 条评论
登录后可评论。