UI 设计没灵感？我用这套规范让 AI 做的界面终于能看了

做过 AI 编程的人大概率都遇到过这个问题：AI 写的后端代码挺靠谱，前端也能跑，但界面就是丑。

不是功能有问题，是视觉上不舒服——间距不对、颜色不协调、字体层次混乱、按钮风格不统一。你说不出它哪里做错了，但看起来就是不像一个正经产品。

问题出在AI 没学过设计。

我的一次惨痛教训

去年我做一个内部管理系统的前端，全套用 AI 生成的。功能跑得顺顺当当，数据也能正常 CRUD。我把界面截图发到团队群里，同事回了四个字：「还挺难用的。」

不是功能难用，是看着就不想用。按钮上下间距不一致，有的地方 8px，有的地方 16px，完全是随机的。字体一会儿 14px 一会儿 15px，没有规律。整个界面就像不同的人各写了一块拼起来的。

我一开始以为是 AI 模型的问题，换了 Cursor 换 Claude Code，结果出来差不多——功能不一样，但「丑」是共通的。

后来我才明白：问题不在模型，在规范。AI 不是故意写丑，是它脑子里没有「什么算好看」的标准。它知道怎么写 CSS，但不知道间距应该用 8 的倍数、标题和正文的对比度应该达到多少、按钮 hover 状态应该怎么处理。

规范注入解决的不是能力问题，是知识问题

UI/UX Pro Max Skill（现在已经有了个更接地气的名字叫「设计规范注入包」）的思路和前面说的测试包一样：不是换一个更强的模型，而是给 AI 注入一套专业知识。

装上之后，AI 编程助手会遵循一套设计规则：

• 色彩体系：主色、辅色、中性色、强调色的搭配规则，以及色彩对比度可访问性标准
• 间距规则：4px / 8px / 16px / 24px / 32px 的间距体系，确保页面元素间的空间关系一致
• 字体层次：标题、副标题、正文、标注的字体大小和字重规范
• 组件库标准：按钮、卡片、输入框、弹窗等常见组件的统一样式和交互行为

装上之后我再试了一次，同样的需求，生成的界面至少是「能看的」级别了。间距规整了，颜色统一了，字体层次有逻辑了。虽然离专业设计师的作品还有距离——但你不会因为它丑而不想用了。

适用的人

这个包瞄准的是一个特定的群体：用 AI 编程工具做前端开发的非设计背景开发者。

你不会设计，但你希望你的产品看起来是专业的。以前唯一的办法是找设计师合作或自己花几个月学设计。现在多了第三条路：让 AI 懂设计规范——你把功能逻辑讲清楚，AI 负责把它输出成符合规范的界面。

给整个 AI 领域提了个醒

这个包的真正价值不只在设计领域。它揭示了一个通用规律：任何一个依赖 AI 生成的领域，最终的瓶颈都不是模型能力，而是 AI 是否「知道」该领域的专业规范。 规范越明确，效果越好。代码有代码规范，设计有设计规范，法律有法律规范，医疗有医疗规范——把这些规范打包注入给 AI，就是把专家的「隐性知识」变成了 AI 的「显式能力」。

说白了，以后拼的不是谁的模型大，是谁的规范包更全、更细、更专业。