marvkr/better-design

这是什么？

核心功能

• 01根据产品描述查找匹配的设计系统。
• 02返回可直接安装的设计 token 与组件代码。
• 03提供排版、布局、表单、导航等 UI 与 UX 原则指导。
• 04提供同一图标库的图标，保证风格一致。
• 05对 UI 代码执行无障碍与视觉设计审查。
• 06每个设计系统可通过 shadcn CLI 单独安装。

适用场景

• 让 AI 编码智能体按照统一设计系统构建页面，如设置页。
• 在 React 项目中从选定的品牌风格主题添加 shadcn 组件。
• 在提交前检查生成的 UI 代码是否存在无障碍问题。
• 保持由智能体生成的界面图标风格一致。

快速上手

1. 1

   在项目中安装智能体技能

   npx skills add marvkr/better-design --skill better-design
2. 2

   将 Better Design 连接到你的编码工具,然后重启智能体

   npx better-design
3. 3

   如果出现问题,检查配置

   npx better-design doctor

使用前须知

• !如果你没有账户,安装时会自动为你创建一个免费密钥,因此依赖 better-design.com 提供的托管服务。

收录于专题

标签

常见问题

better-design 是什么？

为编码智能体提供设计系统、UI/UX 指导、图标与无障碍审查规则的 MCP 服务与 shadcn/ui 组件源。 Better Design 是一个 MCP 服务，为 Claude Code、Cursor、Codex、VS Code 等编码智能体补充它们常缺少的设计上下文。它提供工具，可根据产品描述查找合适的设计系统，获取该系统的设计 token 与组件代码，并查询层级、间距、排版、表单、导航、错误处理等 UI 与 UX 原则。

better-design 可以免费使用吗？用的什么许可证？

better-design 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

better-design 还在维护吗？

活跃维护中。better-design 最近一次提交是在 2026年10月25日。

better-design 适合用来做什么？

让 AI 编码智能体按照统一设计系统构建页面，如设置页。 在 React 项目中从选定的品牌风格主题添加 shadcn 组件。 在提交前检查生成的 UI 代码是否存在无障碍问题。 保持由智能体生成的界面图标风格一致。

better-design 怎么安装和运行？

在项目中安装智能体技能: npx skills add marvkr/better-design --skill better-design 将 Better Design 连接到你的编码工具,然后重启智能体: npx better-design 如果出现问题,检查配置: npx better-design doctor

在哪里获取 better-design？

源代码和安装说明在 GitHub 上：https://github.com/marvkr/better-design