variant-ui（积极开发中）

无法决定UI方法？并行构建所有方案。

用于快速UI原型设计的MCP服务器。同时启动多个原型，查看它们并排运行，并交付实际可行的版本。

为什么存在这个工具

原型死亡谷：

• Figma原型： 看起来完美，但无法运行
• 代码原型： 耗时太长，所以你只能构建一个
• 结果： 你只能选择第一个看起来还不错的方案

AI使能：

• 在原来构建一个原型的时间内，可以构建5个原型
• 每个变体在自己的端口上独立运行
• 实时比较它们，合并获胜者

预备条件

• 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

2. 添加到你的MCP客户端：

Claude Code

# 使用默认端口5400添加
claude mcp add variant-ui node <variant-ui路径>/dist/index.js

# 或指定自定义端口
claude mcp add variant-ui node <variant-ui路径>/dist/index.js --env VARIANT_UI_PORT=8080

Codex CLI

codex mcp add variant-ui <variant-ui路径>/dist/index.js

重要提示： 将variant-ui添加到项目设置中，而不是全局设置。此工具旨在仅在特定项目工作时运行。

使用

专业提示： 为了获得最佳体验，请启用对变体目录文件编辑的自动批准。这可以让您的AI代理无缝工作，而无需频繁的权限提示。

针对Claude Code用户的高级提示： 使用Claude子代理来并行运行每个变体中的每次代码更改。当同时测试多种方法时，这极大地加快了迭代速度。

一旦添加到您的MCP客户端，您可以在任何对话中使用以下命令：

示例提示

探索不同的风格：

我想尝试三种不同感觉的登录页面——一种感觉高端，
一种很有趣，一种超级极简

构建五个完全不同风格的变体：野兽派混凝土、千禧年网络美学、终端黑客模式、企业Memphis风格，以及一种看起来像是来自3000年的风格

快速决策：

我们应该使用模态还是抽屉式设置？创建两者并看看效果

这个表单有效，但很无聊。给我展示三个具有不同微交互和过渡效果的版本

检查正在运行的变体：

我有哪些变体正在运行？

然后打开http://localhost:5400（或您自定义的端口）以在审查UI中并排查看所有变体。

功能

• 隔离变体 - 每个变体在其自己的git工作树中运行
• 自动端口分配 - 变体和项目之间没有端口冲突
• 实时预览 - 启动/停止每个变体的开发服务器
• 审查UI - 一眼看到所有变体
• 实时更新 - SSE驱动的活动日志
• 框架检测 - 支持Next.js（更多即将推出）
• 包管理器 - 目前支持npm（yarn/pnpm即将推出）

工作原理

变体作为git工作树在临时目录中创建。每个变体：

• 获取一个唯一的分支（ui-var/001-description）
• 运行自己的开发服务器（预览时）
• 准备就绪时可以合并回主分支

反馈

该项目正处于积极开发阶段。发现错误或有功能请求？

• 在GitHub上打开一个问题
• 分享您希望支持的框架

许可证

MIT