AI 写出来的 UI 总是一股“AI 味”？这个 Skill 让 Cursor 和 Claude Code 自带设计系统

AI 写出来的 UI 总是一股“AI 味”？这个 Skill 让 Cursor 和 Claude Code 自带设计系统

最近帮朋友做项目，发现一个老问题：AI 生成的前端界面越看越眼熟——差不多的间距、差不多的字体、差不多的蓝紫色渐变。业内管这叫 AI Slop UI：功能跑得通，但就是没有产品感。

今天推荐一个刚冒出来的开源 Skill：Better Design，它把成熟产品的设计系统直接喂给你的 AI 编程工具，让生成的界面“出厂即成品”。

它是什么

Better Design 是一个 设计 MCP 服务器 + 组件注册中心，兼容 Claude Code、Cursor、VS Code/GitHub Copilot、Claude Desktop 和 claude.ai。

它不只是给一段 prompt 让 AI 模仿某个风格，而是把真实产品的 design tokens、组件代码、图标规范、间距系统、字体层级、阴影和动效语言 全部打包成可调用的工具。

怎么用

1. 安装 Better Design MCP Server。
2. 选一个产品方向：Linear、Supabase、Vercel、Airbnb、Stripe、Apple、Notion、Figma……31 套品牌级主题。
3. 对你的 AI 助手说“用 better-design 建一个设置页面”，它会自动加载对应的 design tokens 和组件代码。
4. 生成后自动跑 WCAG + 视觉设计审查：对比度、焦点态、间距、层级，能修的先自己修掉。

两层机制

它分两层工作：

• Design Intelligence：只要你在写 UI，就自动注入设计原则（间距、层级、动效、表单、无障碍）。
• Scaffold：新建页面或组件时，直接匹配对应设计系统的组件和覆盖规则。

相当于给 AI 配了一个“随身设计总监”。

适合谁用

• 用 Claude Code / Cursor / Copilot 写前端的开发者
• 想让 AI 输出“能直接上线”的界面，而不是还要自己重写样式
• 做内部工具、Dashboard、落地页、SaaS 界面
• 对无障碍和品牌一致性有要求的产品

为什么值得关注

现在很多 AI 编程工具只懂“写代码”，不懂“做产品”。Better Design 补上了设计系统这块短板。你不需要成为设计专家，也不需要手写 CSS token，选一个成熟产品的风格，AI 就能按那个标准出图出代码。

GitHub 地址：https://github.com/marvkr/better-design

现在还是早期项目，Star 数在涨，适合先 star 观望。如果你也在用 Cursor 或 Claude Code 写界面，建议装来看看——毕竟，让 AI 写出“不像 AI 写的 UI”，本身就是一种超能力。

GitHub: https://github.com/marvkr/better-design