Better Design

Better Design

面向 AI 编码 Agent 的设计工具。本插件将你的 Agent 连接到 Better Design MCP 服务，让它构建的界面使用真实的设计系统、遵循设计原则，并通过 UI 审查检查。

你的 Agent 可以获得什么

• 适用于你应用的设计系统。 找到适合你产品的设计系统、预览并安装其组件；也可以根据描述或你自己的网站生成定制设计系统。
• 设计原则。 涵盖视觉设计、UX 流程、表单、引导流程和界面文案，并提供 React Native、SwiftUI、Three.js 和 Shopify 主题的参考。
• 审查检查。 检查你的 Agent 构建的屏幕的无障碍性、文案清晰度和间距是否符合度量标准。
• 属于你的图标。 图标集以 React 组件的形式返回，无需在运行时使用 CDN。

本仓库包含什么

本仓库仅包含插件文件：清单、MCP 服务入口和两个技能。Better Design 服务及其设计系统运行在 better-design.com。可在 better-design.com/design-systems 浏览目录。

技能	功能
build-with-better-design	与用户一起选择设计系统、安装它，并基于它进行构建
review-ui-with-better-design	从无障碍性、视觉设计、文案清晰度和间距方面审查屏幕

安装

工具	方法
任意终端 Agent，无需账号	npx better-design
Gemini CLI	gemini extensions install https://github.com/better-designs/better-design-plugin
Claude Code	/plugin marketplace add better-designs/better-design-plugin，然后运行 /plugin install better-design@better-design
Claude Code，仅 MCP	claude mcp add --transport http better-design https://better-design.com/api/mcp
任意技能客户端	npx skills add better-designs/better-design-plugin
任意 MCP 客户端	添加远程服务 https://better-design.com/api/mcp

npx better-design 无需账号。它会将 Better Design 连接到你的编码工具，并创建一个额度较少的免费密钥。额度用尽后，Agent 会提供一个认领链接，将该密钥转移到免费账号。

其他所有方式都会在首次连接时打开 Better Design 登录页面。免费账号即可使用。

隐私

适用 Better Design 的隐私政策和条款。支持邮箱：[email protected]。