OpenUI MCP Studio

ShadcnBrief

输入简报，生成 React + shadcn，并附上验证结果

你将获得什么 • 安装 • 工作原理 • 生态系统

---

ShadcnBrief 根据一段简短的需求描述，生成带样式的 React + shadcn 界面，并附上截图、无障碍检查结果和验证凭据。这是一款开箱即用的开源 MCP 工作室。

┌──────────────────────────────────────┐
│  LOCAL-FIRST          ████████ 100%  │
│  SOURCE-TRACEABLE     ████████ 100%  │
│  TYPING REQUIRED      ░░░░░░░░   0%  │
│  VIBES                ████████ ZERO  │
│                                FILLER│
└──────────────────────────────────────┘

由 MCP 驱动的 UI 生成器。描述需求、渲染、对比、交付。

你将获得什么

界面	内容
studio apps	简报 → 预览 → 对比 → 导出。全部在本地完成。
packages	可复用、兼容 shadcn 的组件，专为验证工作流设计主题。
mcp services	通过 MCP 服务将简报交给任意 Agent。
contracts	为简报、渲染和验证定义的 Schema，带版本控制且可比较差异。
tooling	快照测试、无障碍检查、设计令牌防护机制。

重要

默认采用本地优先策略。不会偷偷收集遥测数据。不与云端往返通信。除非你明确将数据发送到其他地方，否则数据都会留在你的设备上。

安装

git clone https://github.com/xiaojiou176-open/shadcn-brief.git
cd ShadcnBrief
# follow the per-stack quickstart in INSTALL.md or docs/

只需三条命令。不用 curl | sh，无需登录。运行前先看清要执行的内容。

安装失败？打开你喜欢的 Agent，然后说 “阅读 AGENTS.md 并为我初始化 ShadcnBrief。” Agent 会自行修复。详细说明见：docs/。

工作原理

此仓库分为七层，正好对应 git log 中的七个提交。新功能以小型、命名清晰的 PR 形式加入。不会有包含 50 个文件、让人摸不着头脑的提交。

层	内容
chore: scaffold	许可证、治理规范、代码质量关卡、CI 脚手架。
feat(core)	核心引擎。ShadcnBrief 存在的意义。
feat(modules)	软件包、适配器、服务、插件。第二层。
feat(contracts)	Schema、配置、公开边界。其他代码都在这里交互。
test:	测试凭据。这一层中的所有内容都必须能运行。
feat(ops)	脚本、基础设施、CI 辅助工具、构建胶水。
docs:	面向公众的文档。项目的门面。

git log 就像一张楼层平面图。看一眼，就能了解整体结构。

生态系统

ShadcnBrief 属于 open family：三个开放平台，本地优先、源码优先、创作者优先。

仓库	内容
OpenCampus	在一张清爽的桌面上使用 Canvas + Gradescope + EdStem
OpenVibeCoding	AI 通宵编写代码，你早上就能交付
ShadcnBrief (你所在的位置)	输入简报，生成 React + shadcn，并附上验证结果

跨家族精选： BeamMe · BrewMe · OpenVibeCoding · proofyard。

为此仓库点个星

如果 ShadcnBrief 为你省下一次点击、一小时或一次头疼，那就给它点个星吧，不花一分钱。公平交易。⭐

Yifeng[Terry] Yu 的其他项目

• OpenCampus — 在同一张清爽的桌面上使用 Canvas、Gradescope 和 EdStem
• OpenVibeCoding — AI 在夜间编码，你早上发布
• BeamMe — 将你的 Agent 配置发送到任意星球
• BrewMe — 醒来时，新闻已为你准备好
• proofyard — 每项主张都有凭据

许可证

MIT — 条款虽简，授权广泛。