让AI输出的界面不再廉价：这套视觉设计基础Skill能让配色和间距自动对齐专业标准

每次让 AI 生成界面，你是否总觉得哪里不对——颜色俗气、字体没层次、间距乱糟糟？问题不在 AI 不够聪明，而在于它缺少一套系统的视觉设计基础。这篇文章给你挖到一个开源宝藏：Visual Design Foundations，一套让 AI 输出真正有设计感的 prompt skill。

这套 Skill 解决什么问题

大多数 AI 生成的 UI 为什么看起来廉价？因为它们在字体大小、颜色选择、间距处理上都是”差不多就行”，没有系统约束。Visual Design Foundations 直接把专业设计师的底层知识结构化喂给 AI，让它从根源上理解：为什么标题用 24px 而不是 23px？为什么主色要用 #2563eb 而不是随机挑一个？

三大核心模块

字体系统：内置模数化比例（Modular Scale）——从 12px 到 48px 有一整套数学关系，而不是拍脑袋。行高也按场景分类：标题 1.1~1.3，正文 1.5~1.7，UI 标签 1.2~1.4。AI 照着这套规则走，层次自然就出来了。

间距系统：8px 网格法——业界标准。4px、8px、12px、16px、24px、32px、40px、48px、64px，每个数字都有存在的理由。AI 生成按钮、内边距、外边距时自动对齐这个体系，拒绝 17px、23px 这种随机数字。

色彩系统：语义化令牌（Semantic Tokens）——--color-primary 绑定主色，--color-success 绑定成功状态色，而不是在代码里直接写 #2563eb。这样换主题色时改一行全局变量即可，所有组件自动同步。

实测体验

我自己用它跑了一个着陆页生成：AI 输出的第一版配色合理了、按钮尺寸不再忽大忽小、段落间距终于能看了。更关键的是——输出结果不再需要你花大量时间修修补补，返工率大幅下降。

适合谁用：前端开发者想让 AI 写出设计感更强的代码、AI 产品经理经常需要生成 UI 草图、设计师想给 AI 训练统一的设计审美。

GitHub 链接

项目完整开源地址：
https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/visual-design-foundations

用 Anthropic Skill 安装方式或直接 Clone 到本地，SKILL.md 里包含完整的 Token 体系和使用示例。需要设计系统化的朋友强烈建议收藏。

GitHub: https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/visual-design-foundations