让AI秒出品牌级UI：better-design把31个顶级设计系统直接塞给Claude Code
不是没有想法，是有想法但调不出那种「品牌感」。
让 AI 生成一个按钮，它给你吐出一个大众脸；让 AI 搭一个注册页，它整出一个毫无特色的中性风。你说「能不能更像 Linear 一点」，它就开始乱来。
better-design 就是来解决这个问题的。
一个 MCP Server，把 31 个顶级设计系统直接塞给 AI
这个开源项目（MIT 协议）本质上是一个设计 MCP Server，安装后你的 Claude Code / Cursor / Codex / Copilot 等 AI 编程工具就能调用一套完整的设计系统。
内置 31 个品牌级主题，包括：Linear、Stripe、Vercel、Notion、Apple、Supabase、Figma……全是真实产品的设计语言，不是随便搭的 Demo。每一个主题还配套完整的设计令牌（Design Tokens）、UI 原则，以及 WCAG 无障碍规则。
安装也极其简单，不需要 npm install，不需要手动配置主题文件，一行命令搞定：
npx -y marvkr/better-design
然后在你的 Claude Desktop 配置文件里加几行 JSON，AI 就能调用这套设计系统了。
实际场景举例
场景 1：你需要一个 Vercel 风格的定价页面
以前：你要写很长一段 prompt 描述 Vercel 的视觉风格，AI 还不一定 get 到。
现在：直接说「用 Vercel 主题生成定价页」，AI 调用的就是 Vercel 官方的设计规范，出来的结果高度还原。
场景 2：给客户提案，需要 Linear 风格的高保真原型
把你的产品需求丢给 AI，指定 Linear 主题，从按钮、卡片到间距，AI 输出的每一个组件都遵循 Linear 的设计语言。
场景 3：做无障碍改造
内置的 WCAG 规则直接作为 AI 生成时的约束条件，不用你手动检查对比度、文字大小，AI 第一次生成就符合无障碍标准。
为什么值得设计师和 AI 开发者关注
做 AI 生成式 UI 的团队都有一个痛点：AI 输出的东西「能看但没有灵魂」，品牌感全靠后期手动调整。
better-design 的思路很聪明——不是让 AI 自己去学某个品牌的设计语言，而是把已经整理好的设计系统作为 AI 的「工具库」，AI 生成时直接调用真实的设计令牌和组件规范，而不是靠 prompt 猜测。
对于设计师来说，这意味着你可以把 AI 当成一个「会严格遵守设计规范的无情出图机器」；
对于 AI 开发者来说，这意味着你的 AI Coding 工具终于能输出品牌级的设计稿，而不只是「能跑就行」。
目前 GitHub 约 170+ stars，更新频率很健康（最近一个月内有提交），安全性扫描也通过了，没有已知漏洞。
GitHub：marvkr/better-design
作者：赵一凡
定位：设计创意 / AIGC / 海外前沿 Skill 搬运
评论区
登录后可评论。