这个AI工具能自动扒网站的设计规范！做设计的人都在用

做过设计的同学都知道，最痛苦的不是从零画图——是从别人好看的网站里”反推”它的设计规范。颜色是什么？字体大小几号？hover 效果怎么做的？一个个取色器点过去，效率低到想砸键盘。

最近我发现了一个超实用的开源 Skill——xkcoding/claude-skills 里的 design-guide，专门干这件事：用 AI 自动把任意网站的设计语言全部扒出来，生成一份可以直接用的设计指南文档。

它能提取什么？

• 完整色彩系统——文字色、背景色、边框色、阴影色、渐变色，全部给你归好类
• 字体排版规范——字族、大小、粗细、行高，还有按钮、表单标签、错误提示等 UI 专用文字的样式
• 交互状态——hover 效果、过渡动画、点击反馈，一个不漏
• 组件模式——按钮、卡片、表单、导航栏，每种组件的特征和样式
• 响应式截图——自动在桌面、平板、手机三个断点截图，对比适配效果

怎么用？

一行命令安装好，进入你的项目目录，指定要分析的网址即可：

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

运行完你会得到：一份 Markdown 格式的完整设计指南 + 全页面截图 + 各断点响应式截图 + 完整的 HTML/CSS 源码。可以说是把 Figma 的”设计交接”流程完全自动化了。

适合谁用？

产品经理：抄竞品设计规范时再不用截图给设计师一个个解释了。
前端开发：想复刻某个网站的风格，直接拿到色值和字体规范照着写。
设计师：快速建立自己的设计系统参考库。
AI 编程用户：让 Claude Code / Cursor 学会某个网站的审美，照着风格生成代码。

实话说下感受

我用它分析了一个做 SaaS 产品的客户官网，2 分钟跑完，拿到了完整色彩盘、字体层级和组件截图——这要是手动做，估计得花一整天。这个工具真正解决的不是”会不会设计”的问题，而是”能不能高效学习已有设计”的问题。对 AIGC 创作流程来说，是一个非常实用的提效工具。

完全本地运行，不需要 API Key，Playwright + Chromium 搞定一切，数据不外传，隐私友好。

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

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