输入网址AI自动扒下整套设计系统！设计师必备开源工具

做设计的时候，看到某个网站配色特别舒服，想抄过来用——结果盯着 F12 一个个抄颜色值，眼睛都快瞎了？或者想完整复刻某个竞品的设计语言，从字体到间距全要自己一点点量？

今天发现一个开源 Skill，叫 design-guide，专门解决这个痛点——你给它一个网址，它直接给你吐出一份完整的设计规范文档。

它能做什么？

输入任意网站 URL，它会用 Playwright 自动截图、分析、抓取，输出一整套设计系统文件：

• 色彩系统：文字色、背景色、边框色、阴影色、渐变色，全部给你扒干净
• 字体规范：字体族、大小、粗细、行高，逐一记录
• 间距与布局：margin、padding、gap、border-radius，完整还原
• 交互状态：hover 效果、过渡动画、点击反馈，动态的也给你抓下来
• 组件模式：按钮、卡片、表单、导航，识别出复用模式
• 无障碍分析：颜色对比度、ARIA 属性等Accessibility 检查

更贴心的是，它会同时生成多端截图——桌面、平板、手机三个尺寸的设计稿，直接对比查看响应式布局有没有崩。

怎么用？

本地跑，完全不需要 API Key：

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

跑完之后，目录里会出现：

• design-guide.md：完整的设计规范文档
• viewport_screenshot.png：视口截图
• fullpage_screenshot.png：全页面截图
• extracted.html 和 extracted.css：扒下来的源代码
• computed_styles.json：每个元素的详细样式数据

适合谁用？

设计师：做竞品分析时，5 分钟拿下一套完整设计语言，再也不用手动量。
前端开发：想精准复刻某个网站的设计系统，直接拿生成好的 CSS 和设计 token。
AI + 设计：给 AI 工具喂入网站设计上下文，让它更懂你想要的风格。

总结

design-guide 是一个真正实用的开源工具，不需要任何 API key，纯本地运行，输出格式完整。不管你是要快速做竞品调研，还是要复刻某个网站的设计语言，它都能大幅节省你「从零测量」的时间。

GitHub 链接：https://github.com/ceagleme/claude-skills（design-guide 子目录，MIT 协议）

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