使用说明
变体ui（主动开发）
无法在UI方法之间做出选择？将它们全部并行构建。
用于快速UI原型制作的MCP服务器。同时启动多个原型，看到它们并排运行，运送实际可行的东西。
为什么存在
死亡谷原型：
- Figma原型： 看起来很完美，不会跑
- 代码原型： 耗时太长，所以你只建造了一个
- 结果： 你承诺第一个看起来不错的想法
AI能够实现什么：
- 在过去制作一个原型所需的时间内制作5个原型
- 每个变体都在自己的端口上独立运行
- 实时比较它们，合并获胜者
先决条件
- Node.js 18+
- Git
- npm（目前只支持npm）
- MCP兼容客户端（用Claude Code测试）
设置
- 克隆和构建：
git clone git@github.com:btree1970/variant-ui.git
cd variant-ui
npm install
npm run build
- 添加到您的MCP客户端：
克劳德代码
# Add with default port 5400
claude mcp add variant-ui node <path-to-variant-ui>/dist/index.js
# Or specify a custom port
claude mcp add variant-ui node <path-to-variant-ui>/dist/index.js --env VARIANT_UI_PORT=8080
Codex CLI
codex mcp add variant-ui <path-to-variant-ui>/dist/index.js
重要提示： 将变体ui添加到项目设置中，而不是全局设置中。此工具仅在您处理特定项目时运行。
用法
专业提示： 为了获得最佳体验，请启用变体目录中文件编辑的自动批准。这使您的AI代理能够无缝工作，而无需不断的权限提示。
Claude Code用户的专业提示： 使用Claude子代理并行运行每个变体中的每个代码更改。当同时测试多种方法时，这大大加快了迭代速度。
添加到MCP客户端后，您可以在任何对话中使用这些命令：
示例提示
探索不同的氛围：
I want to try 3 different feels for this landing page - one that feels premium,
one that's playful, and one that's super minimal
Build 5 variants with completely different vibes: brutalist concrete,
y2k web aesthetic, terminal hacker mode, corporate Memphis, and one
that looks like it's from the year 3000
快速决策：
Should we use a modal or drawer for settings? Create both and let's see
This form works but it's boring. Show me 3 versions with
different micro-interactions and transitions
检查正在运行的内容：
What variants do I have running?
然后打开http://localhost:5400（或您的自定义端口）在查看UI中并排查看所有变体。
特性
- 孤立变异 -每个变量都在自己的git工作树中运行
- 自动端口分配 -变体和项目之间没有端口冲突
- 实时预览 -为每个变体启动/停止开发服务器
- 查看UI -一目了然地查看所有变体
- 实时更新 -SSE供电活动日志
- 框架检测 -与Next.js兼容（更多内容即将推出）
- 包管理器 -目前支持npm（yarn/pnpm即将推出）
运作原理
变量在临时目录中创建为git工作树。每种变体：
- 获取一个唯一的分支(
ui-var/001-description) - 运行自己的开发服务器（预览时）
- 准备就绪后可以合并回main
反馈
该项目正在积极开发中。发现bug了吗？有功能请求吗？
- 在GitHub上打开一个问题
- 分享您希望支持哪些框架
许可证
麻省理工学院
