better-design

组件库现成摆好，AI 做界面直接抄作业

开源 🏷️完全免费 ✅ 目前可打开 设计创意 🍴 复刻 34 🐛 待处理 1 👀 关注 2
访问官网 ↗ GitHub ↗
GitHub 星标 ★ 561
维护状态 较活跃
是否开源 开源
定价模式 🏷️完全免费 开源项目，MIT许可证，完全免费，无付费版本。

项目预览

better-design 项目界面预览图
图片来源：项目官网

项目数据

分类设计创意
开发团队marvkr
官网地址https://better-design.com
GitHubhttps://github.com/marvkr/better-design
定价模式🏷️完全免费
价格说明开源项目，MIT许可证，完全免费，无付费版本。
访问状态✅ 目前可打开
是否开源是
开源协议MIT
主要语言TypeScript
技术栈/模型ai-design,claude-code,claude-code-for-design,claude-design,codex-design,coding-agents,component-library,cursor,cursor-design,design-systems,design-tokens,figma-alternative,generative-ui,github-copilot,mcp-server,shadcn,shadcn-ui,tailwindcss,ui-components,vibe-coding
GitHub 星标★ 561
上线时间2026-05-05 00:00:00
代码更新2026-10-25
仓库体积1.3 MB
本站数据更新2026-11-08
维护状态较活跃
收录时间2026-08-09
浏览次数6

项目介绍

开源的设计 MCP 服务器与 shadcn/ui 组件库，为 Claude Code、Cursor、Codex、GitHub Copilot 等任意 MCP 客户端提供 AI 设计系统能力，内置 Linear、Stripe、Vercel、Notion、Apple、Supabase、Figma 等 31 套品牌级主题，并附设计令牌与 UI 原则。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 561

使用教程

难度：进阶 约 30 分钟 部署方式：本地安装 5 步

环境要求

  • Node.js 20+
  • 一个支持 MCP 的编码智能体

安装与启动步骤

  1. 1装成技能

    一行命令把设计系统与规范接给编码智能体。

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

  2. 2起 MCP 服务

    它通过 MCP 提供设计系统、图标与评审意见。

    npx better-design

  3. 3拉一套设计系统

    从注册表里挑一套主题，组件按需装。

    npx shadcn@latest add https://better-design.com/registry/cashmere/all.json

  4. 4让 agent 按规范改页面

    改完看它有没有引用规范里的间距与字号。

  5. 5用评审能力查一遍

    让 agent 自己对着规范挑问题，比人肉比对快。

如何确认成功

让智能体按这套设计系统改一个按钮组件，产出的代码里间距、圆角和字号都能对上规范里的取值

注意事项

  • 它的核心不是组件库，是把设计规范以 MCP 形式喂给编码智能体。
  • 组件走 shadcn 注册表分发，是源码进你的仓库，不是装个依赖。
  • 注册表里有多套主题，混着用会风格打架，先固定一套。
  • 评审功能只在 agent 侧生效，CI 里跑不了。

核心亮点

  • 提供31个品牌级设计主题（Linear、Stripe、Vercel等），可直接用于AI生成界面，覆盖主流审美风格
  • 以MCP服务器形式集成设计系统，支持Claude Code、Cursor、Codex、Copilot等主流AI编程工具，落地性强
  • 包含设计令牌、UI原则和WCAG无障碍规则，不仅提供组件，还约束AI生成质量，提升设计一致性

不足之处

  • 项目处于早期阶段（195星），文档和社区生态待观察
  • 依赖MCP生态，若用户不使用支持MCP的AI工具则无法发挥核心价值

适用场景

  • 在AI编程工具中快速生成符合品牌风格的前端界面
  • 为设计系统团队提供可复用的AI设计规范与组件库
  • 用于原型设计阶段，通过AI生成高保真UI并确保无障碍合规

替代项目

shadcn/ui、MCP Design、Design System MCP

上一篇：craft

下一篇：ai-interaction-atlas

同类项目推荐

SwiftGraphics 开源

用 Swift 代码生成 SVG，直接驱动笔式绘图仪创作艺术。

SwiftGraphics is a library for creative coding and generative art tailored towards r···

★ 74 2026-08-09
open-design-studio 开源

一次摆出多套方案，看中哪版直接改

Open-source AI design studio. Multi-variant canvas, inspect & edit in code. Powered ···

★ 9 2026-08-09
solid-glass 开源

给 AI 应用一套有质感、能直接用的界面设计系统

A design system for AI applications. Material, physical, tactile, technical.

★ 2052 2026-10-18
lida 开源

说句话就能自动生成图表，省去手写代码

Automatic Generation of Visualizations and Infographics using Large Language Models

★ 3289 2026-08-09
OJO-Design-Skills 开源

给 AI 编码代理装上统一的设计规范

Reusable UI/UX design skills for AI coding agents — Codex, Claude Code, ZCode, and ···

★ 175 2026-11-04
p5-svelte 开源

在 Svelte 中像组件一样轻松嵌入 p5 创意草图

Easily add p5 sketches to a Svelte project

★ 189 2026-08-09
awesome-nano-banana 开源

一站式搞定 nano banana，从入门到实战

The awesome nano banana playbook from the SuperMaker AI team. Discover a complete co···

★ 100 2026-08-09
codebase-posters 开源

一条命令，把你的代码仓库变成艺术海报

your repository as generative art — npx codebase-posters

★ 132 2026-08-09
design-style 开源

每天一个设计风格，动效图加源码直接拿来改

每天一个设计风格：动效短片、风格图与制作指南，完整源码全部开放。 Design styles, moti···

★ 206 2026-11-04