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 <path-to-variant-ui>/dist/index.js

# 或指定自定义端口
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

重要： 将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