Variant Ui

变体ui（主动开发）

无法在UI方法之间做出选择？将它们全部并行构建。

用于快速UI原型制作的MCP服务器。同时启动多个原型，看到它们并排运行，运送实际可行的东西。

为什么存在

死亡谷原型：

• Figma原型： 看起来很完美，不会跑
• 代码原型： 耗时太长，所以你只建造了一个
• 结果： 你承诺第一个看起来不错的想法

AI能够实现什么：

• 在过去制作一个原型所需的时间内制作5个原型
• 每个变体都在自己的端口上独立运行
• 实时比较它们，合并获胜者

Review UI

先决条件

• Node.js 18+
• Git
• npm（目前只支持npm）
• MCP兼容客户端（用Claude Code测试）

设置

1. 克隆和构建：

git clone git@github.com:btree1970/variant-ui.git
cd variant-ui
npm install
npm run build

1. 添加到您的MCP客户端：

克劳德代码

# Add with default port 5400
claude mcp add variant-ui node 
/dist/index.js

# Or specify a custom port
claude mcp add variant-ui node 
/dist/index.js --env VARIANT_UI_PORT=8080

Codex CLI

codex mcp add 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上打开一个问题
• 分享您希望支持哪些框架

许可证

麻省理工学院