AI 生成的界面总是显得"业余"？问题往往不在 AI，而在于缺乏设计规范
目前已有开发者将系统化的设计规范编写为 Cursor Rules 和 Skill，甚至直接打通了 Figma，实现了开箱即用。
核心痛点：AI 不懂设计
在使用 Cursor 或 Claude Code 开发 App 界面时，常出现间距不符合规范（如 13px）、按钮主次不分、字体过小、颜色杂乱等问题。根源在于 AI 缺乏设计常识——它不知道 8px 网格、视觉层次、对比度标准（4.5:1）等基本原则。
好消息是，GitHub 上已涌现出多个开源项目，专门解决"AI 做界面丑"的问题。从纯文本设计规则到数据驱动的设计系统，再到直接打通 Figma 的 MCP 插件，覆盖了设计全流程。
效果对比：同一需求，不同结果
以个人效率追踪 Dashboard 为例，同一份需求数据，加载设计规则前后的效果差异显著。
Before（无规则）：功能虽全，但存在"颜色汤"（多色打架）、多个主按钮、文字难以辨认、间距混乱、视觉层次不清等反模式。
After（应用规则）：信息量不变，但质感大幅提升。关键改变仅三件事：
- 颜色从 4 种减到 1 种
- 间距从随机数改为 8 的倍数
- 按钮从 3 个主按钮减到 1 个
5 个开源设计工具解析
1. Design Foundation：最系统的 AI 设计规则集
项目地址：studioalexwolf/cursor-design-rules
针对 awesome-cursorrules 缺乏"Design"分类的现状，作者 Studio Alex Wolf（15 年高级产品设计师）编写了 36 条规则、近 8 万字的 AI 设计知识库。
核心规则：
- Rule 00：核心设计原则——要求 AI 在创建界面前回答 5 个问题（唯一主要操作、视觉层次、8px 网格、触控目标 44x44px、对比度 4.5:1），并定义视觉设计 7 大支柱。
- Rule 16：反模式清单——列出 27 个 AI 常见错误（如"颜色汤"、"两个主按钮"、"按钮写确认"），直接禁止。
- Rule 20：设计判断力——提供打破规则的决策框架，强调规则用于引导判断而非替代判断。
使用方法：将 .cursorrules 文件复制到项目根目录即可。
苏米注：免费版的 3 条规则已足够解决 80% 的"AI 做界面丑"问题。那 27 条反模式清单几乎每条都是 AI 真的会犯的错，非常值得一读。
2. UI/UX Design Pro Skill：数据驱动的设计系统生成器
项目地址：saifyxpro/ui-ux-design-pro-skill
该项目提供带 CLI 工具和搜索引擎的完整设计系统，包含 107+ UI 风格、127+ 配色方案、107+ 字体搭配等数据。
工作原理：用户输入需求（如"金融科技仪表盘"），Orama 搜索引擎匹配最佳实践，输出一份完整的 Markdown 设计系统文档（含品牌色、组件库、代码片段）。
特色功能：内置 audit 命令检测 AI 常见"幻觉"（如不存在的 Tailwind class、低对比度伪透明）；提供预设行业 Token（金融、医疗、SaaS 等）。
3. 21st.dev Magic MCP：直接把组件库接进编辑器
项目地址：21st-dev/magic-mcp（4.6k ⭐，YC 投资）
不同于前两者"教 AI 怎么设计"，该项目直接给 AI 一个现成的社区组件库。在 Cursor 中输入 /ui 描述组件，系统直接从库中匹配并生成代码。
优势：组件由设计师制作，质量有保障，非 AI 从零生成。适合 React + Tailwind 技术栈的快速开发。
4. Figma MCP 生态：让 AI 直接读写设计稿
另一派思路更为激进：直接打通 AI 与 Figma。
Talk to Figma MCP（6.6k ⭐）：由 Grab 出品，在 Cursor/Claude Code 与 Figma 间搭建 WebSocket 桥，支持读取设计、创建元素、修改样式、组件操作。AI 可直接理解并修改 Figma 文件。
Figma Console MCP（1.4k ⭐）：定位"设计系统即 API"，提供 92+ 工具覆盖设计全生命周期。亮点是 Design-Code Parity 功能，可自动对比 Figma 设计稿与代码实现，输出差异报告。
苏米注：设计规则解决"AI 不知道什么是好设计"，Figma MCP 解决"AI 看不到你的设计稿"。一个教审美，一个给眼睛。
5. 辅助工具：截图喂 AI + 在线生成 Rules
截图喂 AI：利用多模态模型看图能力，将喜欢的 App 截图喂给 AI 作为参考，效果显著。Design Foundation Pro 版内置了 Airbnb、Spotify 等世界级 App 的设计分析。
design.dev：在线 Cursor Rules 生成器，可视化勾选生成 .mdc 文件，覆盖 CSS 方法论、无障碍、代码风格等，适合作为编码层补充。
4 种组合策略
根据不同需求，推荐以下搭配：
- 最小成本：仅用 Design Foundation 免费版，5 分钟见效。
- 行业定制：Design Foundation + UI/UX Design Pro Skill，兼顾通用规范与行业细分。
- 快速出活：Design Foundation + 21st.dev Magic MCP，规范+组件互补。
- 设计稿驱动：Design Foundation + Figma MCP。设计师在 Figma 定稿，AI 读取设计稿并按规则生成代码，Figma Console 还可反向检查一致性。
总结
这些项目的核心价值在于：将 Don Norman 设计心理学、Nielsen 可用性启发式、Google Material Design 等散落在各处的理论，翻译为 AI 能直接执行的指令格式。
如果只做一件事，下载 Design Foundation 的免费 .cursorrules 文件放到项目根目录。如果想更进一步，加上 Figma MCP，让 AI 不仅能理解好设计，还能直接看到你的设计稿。
苏米注：AI 写代码已很厉害，但做设计仍是新手。好在有人已帮你把设计课整理成它能看懂的格式，并配了一副能看 Figma 的眼镜。