让 AI 画 UI 不再瞎搞！这个 Claude Skill 让你先出规范再写代码

你还在让 AI 随便画 UI？

最近我发现一个超好用的 Claude Code Skill——Web Design，来自 GitHub 开发者 xiaopu-ai，587 颗星，开源 MIT 协议。它解决了一个很现实的问题：让 AI 生成的设计代码，真正做到「先有规范，再有代码」，而不是瞎生成一堆不可复用的碎片。

核心思路：Spec First

这个 Skill 的工作流分三步：

• Phase A（理解）：吃进 PRD、参考 URL、截图、关键词甚至品牌名，自动提取设计线索。输入随意组合，缺字段也能跑。
• Phase B（规范）：生成一份 DESIGN.md，包含 9 个维度：色彩、字体、组件、布局、动效、层次、可访问性等。相当于设计师出稿，你确认之后再动手。
• Phase C（代码）：严格按规范生成代码，还会自我审计，对照 100 分质量清单打分。如果有参考 URL，还会做 Diff 审计，确保还原度。

为什么设计师应该关注

传统流程里，设计师出图，工程师还原——中间损耗大，而且 AI 生成代码时根本不知道你的品牌规范是什么。Web Design Skill把设计规范变成了可编辑的 Markdown 文件（DESIGN.md），放在项目里，AI 和人类都能读、都能改。

输出格式是设计系统友好的：色彩用 Hex，字体用标准名称，动效有参数——你可以直接导给 Figma、Style Dictionary 或者 Tokens Studio。真正实现了「一次规范，多端复用」。

安装超简单

一行命令搞定：

git clone https://github.com/xiaopu-ai/web-design ~/.claude/skills/web-design

Claude Code 下次启动自动识别，之后说「帮我设计一个页面」或「参考这个网站做一套 UI」，它就会自动激活这套工作流。

适用场景

• Landing Page、产品介绍页、个人作品集
• SaaS 产品的 UI 规范建立
• 设计系统从 0 到 1 的 AI 辅助搭建
• 甲方/设计师提供的参考图快速还原

如果你经常需要 AI 帮你做 Web UI，但又受够了「生成一堆无法维护的碎片代码」，这个 Skill 值得一试。

👉 GitHub 仓库直达

GitHub: https://github.com/xiaopu-ai/web-design