关键词

UI迭代Git工作区设计变体LLM工具前端开发预览

项目简介

Variant UI是一个强大的工具，旨在帮助开发者和AI代理（如大型语言模型，LLM）快速创建、管理和预览UI的不同版本（变体）。它利用Git工作区为每个UI设计方案提供隔离的开发环境，支持同时运行多个变体，并通过一个统一的Web界面进行实时比较。Variant UI通过实现Model Context Protocol (MCP) 与LLM客户端通信，使AI能够自动化UI设计和迭代流程，极大提高前端开发效率。

主要功能点

  • 隔离的UI变体管理: 为每个UI设计方案或功能迭代创建独立的Git工作区，确保环境隔离，避免代码或依赖冲突。
  • 多变体并行预览: 支持为多个UI变体启动独立的开发服务器（目前支持Next.js），并在同一Web审查界面中并排查看，便于直接比较。
  • AI驱动的开发工作流: 通过MCP协议，AI客户端可以调用一系列工具（如创建、启动、停止、移除变体）来自动化UI设计、测试和迭代过程。
  • 实时状态与活动日志: 提供UI变体（包括其开发服务器状态）的实时更新和详细的事件日志，方便用户和AI追踪所有操作。
  • 端口自动分配: 自动为每个运行中的开发服务器分配可用的端口，避免手动配置和端口冲突。
  • Git深度集成: 允许从指定的Git分支、提交或标签创建变体，并支持将变体的更改合并回主分支。

安装步骤

  1. 克隆仓库: 首先，您需要将Variant UI的GitHub仓库克隆到您的本地机器。 
    git clone [email protected]:btree1970/variant-ui.git
cd variant-ui
  2. 安装依赖: 进入项目目录后，使用npm安装所有必要的依赖项。 
    npm install
  3. 构建项目: 运行构建命令，将TypeScript源代码编译为可执行的JavaScript文件。 
    npm run build

服务器配置（供MCP客户端使用）

以下是MCP客户端（如Claude Code）连接Variant UI MCP服务器的配置信息。您需要根据您的实际情况填写相关路径。

{
  "name": "variant-ui",
  "description": "MCP server for rapid UI iteration and comparison.",
  "command": "node",
  "args": [
    "<path-to-variant-ui>/dist/index.js",
    "<your-git-project-root-directory>"
  ],
  "env": {
    "VARIANT_UI_PORT": "5400"
  },
  "protocol": "stdio"
}

配置说明:

  • 'name': 服务器的显示名称，建议使用'variant-ui'以与客户端工具集成保持一致。
  • 'description': 服务器功能的简短描述，用于帮助您了解其用途。
  • 'command': 用于启动Variant UI服务器的程序。在这里是'node'。
  • 'args': 传递给'command'程序的参数列表。
    • 第一个参数是Variant UI构建后的主入口文件路径，例如'/Users/youruser/variant-ui/dist/index.js'。请将其替换为实际路径。
    • 第二个参数（可选）是您正在开发UI变体的Git项目的根目录路径。如果提供，Variant UI将在此项目下管理变体。如果省略，服务器将默认使用其启动时的当前工作目录。
  • 'env': 环境变量设置。
    • 'VARIANT_UI_PORT': 设置Web审查界面的HTTP端口。默认值为'5400'。您可以修改为其他可用端口，例如'8080'。
  • 'protocol': 通信协议，对于Variant UI MCP服务器，目前默认为'stdio'。

重要提示: 建议将Variant UI添加到您正在工作的特定项目的MCP客户端设置中，而不是全局设置。这样，当您在该项目上工作时，AI代理可以更方便地访问和管理UI变体。

基本使用方法

  1. 启动MCP服务器: 在您的MCP客户端（如Claude Code）中添加上述配置后，当您在该项目中与AI代理开始对话或需要调用其功能时，MCP客户端会自动启动Variant UI服务器。
  2. 通过AI创建UI变体: 在与AI的对话中，您可以直接描述您想要创建的UI变体。例如：
    • "创建一个具有视频背景的英雄区域变体，并将其描述为'视频背景英雄'"
    • "探索5种不同的仪表板视觉风格变体：玻璃拟物化、新拟物化、扁平化设计、材质设计和粗野主义。为每种风格尝试不同的配色方案和排版"
    • "我需要改进结账流程。创建并预览3个不同的变体，包含你认为最能减少购物车放弃率的想法"
  3. 预览和比较: 一旦AI创建并启动了变体的开发服务器，您可以通过浏览器访问 'http://localhost:5400' (或您在配置中设置的'VARIANT_UI_PORT'端口) 来查看所有运行中的UI变体。Web界面将它们并排展示，方便您和AI进行实时比较。
  4. 管理UI变体: AI可以根据您的指令调用Variant UI提供的其他工具，例如：
    • "哪些变体正在运行？" (调用 'list_variations' 或 'preview_status')
    • "停止变体001的预览服务器" (调用 'stop_preview')
    • "移除变体002" (调用 'remove_variation')
  5. 启用文件编辑自动批准（推荐）: 为了让AI代理能够无缝地在各个UI变体工作目录中修改代码，建议在您的MCP客户端中为Variant UI创建的工作目录（通常位于您的临时目录，例如 '~/.parallel-ui/variants/<project-hash>/<variant-id>/'）启用文件编辑的自动批准功能。这将减少AI在每次修改文件时需要您手动确认的次数。

信息

分类

开发者工具

访问项目