---
title: "25分钟完成5套UI风格：AgentTeam + Git Worktree 并行开发实战"
author: deletexiumu
pubDatetime: 2026-02-24T20:00:00+08:00
featured: false
draft: false
tags:
  - Claude Code
  - AI Agent
  - 效率
description: "用 Claude Code Agent Teams + Git Worktree 实战：9 个 AI Agent 并行 25 分钟生成5套视觉差异显著的 UI 风格，解决客户说不清 UI 需求的痛点。附完整 Prompt、5套风格源码和 worktree 操作流程。"
---


> 上一篇《Claude Code Agent Teams 多代理协作完整实战》讲了如何用 6 人 AI 团队从零搭建一个接入真实数据的 MVP，核心模式是「多模块分工 + 架构先行」。这篇是它的进阶——当你要解决的不是「怎么做出来」，而是「做哪个版本」时，该怎么用 Agent Teams。
>
> **说明**：本文使用的 AI 日报项目为自建 Demo，展示 Agent Teams + Worktree 的工作流，并非实际客户项目案例。

---

客户说不清楚要什么风格，这是设计需求中最难处理的情况。

"感觉不对劲，但说不上哪里不好。""我想要那种……你懂的，高级感？""参考一下 xxx，但又不要那么像。"

这种对话通常有两种结局：设计师反复猜测，改稿数轮；或者甲方最终将就，留下一个双方都不满意的结果。

最有效的破局方式，是**让客户看到选项，而不是描述选项**。一旦客户面对真实可交互的界面，他们说不清楚的感受会立刻变成明确的判断：这个不对、那个太重、这个接近了、就要这个。

问题在于成本。传统做法下，为同一个项目做5套差异显著的 UI Demo，每套至少半天，5套就是2-3天工作量。等设计师做完，项目早就该往下推进了。

这篇文章展示的是另一种做法：用 Claude Code Agent Teams 组建9人 AI 团队，**25分钟内并行完成5套视觉风格迥异的 UI Demo**，0编译错误，全部可运行。

关键技术组合是 **Agent Teams + Git Worktree**。

---

## 一、为什么是 AgentTeam + Worktree 的组合

### 先解释 Git Worktree 是什么

Git Worktree 是 Git 的原生功能，允许你**同时检出同一个仓库的多个分支到不同的目录**，每个目录是独立的工作区，可以同时运行、互不干扰。

![Git Worktree 概念图：同一仓库，5个分支，5个目录，各自独立运行在不同端口](/blog/agent-team-worktree-ui-styles/worktree-diagram.png)

```bash
git worktree add "../worktrees/style-a" -b "style-a"
```

执行这条命令后，`../worktrees/style-a/` 就是一个完整的项目目录，有自己的 `src/`、`node_modules/`、文件状态，对应 `style-a` 分支。你在这个目录里的修改不会影响 `main` 分支，也不会影响其他 worktree。

### 为什么不能用目录隔离？

上一篇文章（Agent Teams 多代理协作实战）用的是**目录隔离**——让各个 Agent 分别在 `backend/`、`frontend/`、`scripts/` 等不同目录工作，避免文件冲突。

目录隔离适合"同一个项目的不同模块"，但**不适合"同一个代码库的不同版本"**。

5套 UI 风格的核心问题在于：

- 它们共享同一个仓库、同一套 API 接口、同一套组件结构
- 但每套风格的 `tailwind.config.ts`、`globals.css`、`page.tsx` 完全不同——它们需要**修改相同路径的文件**
- 如果放在同一个目录下，5个 Designer 同时修改 `src/app/page.tsx`，会产生不可调和的冲突

用目录隔离的话，你得为每套风格创建 `style-a-frontend/`、`style-b-frontend/` 这样的完整副本目录。即便各自 `git init`，它们之间没有共同祖先，merge 时会遭遇 `unrelated histories` 错误，需要额外处理且无法自动解决文件级冲突。

**Worktree 的优势在于：**

1. **默认隔离**：每个 worktree 有独立的文件状态和分支，除非人为切换目录，否则 Agent 的读写操作不会影响其他 worktree
2. **Git 原生管理**：每个 worktree 对应独立分支，客户选定风格后，一条 `git merge style-d-zen` 即可合并，不需要手动拷贝文件
3. **可同时运行**：5个 worktree 的前端服务可以分别跑在 3001-3005 端口，同时在浏览器打开对比

这正是这次实战选择 Worktree 而非目录隔离的根本原因。

### 为什么还需要 Agent Teams？

Worktree 解决的是"隔离"问题，Agent Teams 解决的是"并行"问题。

5个 Designer 的工作彼此独立、不存在顺序依赖——Style A 的开发不需要等 Style B 完成。这是典型的"尴尬并行"任务，用单个 Claude Code 只能顺序执行，5套风格串行下来就是2-3小时。

Agent Teams 让5个 Designer 真正同时工作，耗时只取决于最慢那一套，而不是全部加起来。

**两者的组合正好覆盖了这个场景的两个核心需求：文件隔离（Worktree）+ 真正并行（Agent Teams）。**

---

## 二、环境准备

### 前置条件

1. **Claude Code 已安装**（需支持 Agent Teams）
2. **启用 Agent Teams 实验性功能**

```bash
# 方式一：环境变量
export CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1
```

```json
// 方式二：settings.json
{
  "env": {
    "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1"
  }
}
```

3. **显示模式**：推荐 In-process 模式（默认），所有队友在主终端内运行，`Shift+Down` 切换查看各 Agent 的实时进度

### 安装 frontend-design Skill

这次实战的核心工具。每位 Designer Agent 都会调用它来获取设计指导——包括色彩系统构建、字体配对规则、布局语言、Tailwind CSS 设计令牌配置等。

```bash
npx skills add frontend-design
```

安装后在 Claude Code 会话中验证：

```
/frontend-design
```

如果 skill 响应正常，说明安装成功。

### 项目前置状态

本次实战的基础是已有一个运行中的 AI 日报前端项目，技术栈为：

- Next.js 14（App Router）+ TypeScript + Tailwind CSS
- FastAPI 后端 + SQLite 数据库
- REST API：`/api/news`、`/api/categories`、`/api/stats` 等

Team Lead 会在 Phase 0 先读取这些文件，理解项目结构和 API 接口，再开始构思风格。

---

## 三、Prompt 设计详解

### Phase 0：让 AI 自己构思风格，而不是硬编码

这是这次 Prompt 设计最重要的决策。

一个自然的想法是：我已经知道想要什么风格，直接告诉 AI 就行了。为什么还要让 AI 构思？

原因有三：

**1. brainstorming 会产生更有创意的组合**

人在描述风格时，通常会想到几个常见参照物（暗色、渐变、极简……），很难跳出自己的审美框架。AI 做 brainstorming 时会从更宏观的设计语言维度切入，产出"野兽主义报刊 × 编程终端 × 日式禅意"这样在日常需求中不太会主动想到的组合。

**2. 保证风格差异矩阵的完整性**

Prompt 中明确要求：五套风格在颜色系统、布局结构、字体选择、整体氛围上都必须有显著差异，禁止两套风格仅色调不同。AI 在构思阶段会主动检查这些维度，确保5套方案真的"一眼可辨"，而不是五个微妙变种。

**3. 风格定义先于开发，所有 Designer 共用同一份规范**

Phase 0 的产出是一份风格差异矩阵，5个 Designer Agent 在 Phase 2 启动时都拿到同一份定义，避免各自理解偏差。

Prompt 中的 Phase 0 写法：

```
### Phase 0：总设计构思（Team Lead 执行）
1. 读取现有页面（src/app/page.tsx、components/、design-spec.md 等）
2. 调用 superpowers:brainstorming skill，构思 5 套风格，要求：
   - 颜色系统、布局结构、字体选择、整体氛围均有显著差异
   - 禁止两套风格仅色调不同、其余相同
   - 每套风格须体现该风格的核心设计语言
   - 输出风格差异矩阵（颜色 / 布局 / 字体 / 氛围）
```

### Worktree 隔离规范的写法

仅说"每个 Designer 在自己的目录工作"是不够的，AI 需要明确的边界约束：

```
### 关键规则（强制）

Worktree 隔离：
- 每个 Designer 只能在自己的 worktree 目录工作（使用绝对路径）
- 严禁修改其他 Designer 的 worktree 或主分支文件
```

"绝对路径"这个要求很关键——如果 Designer 用相对路径，在某些情况下可能意外访问到错误的目录。

### 并行触发的设计

Phase 3（测试）的设计值得单独说明。不是等5套风格全部完成后再统一测试，而是"Designer 完成即触发 Tester"：

```
Phase 3：测试（Designer 完成即触发，Tester 间并行）
- Tester 1：负责 Style A、Style B
- Tester 2：负责 Style C、Style D、Style E
- Team Lead 收到 Designer 完成消息后，立即通知对应 Tester
```

这样 Tester 和后续的 Designer 可以并行工作——Style D 完成时 Style C 可能还在开发，Tester 2 不需要等 C 完成就能先测 D。时间效率进一步提升。

---

## 四、实战过程

### Phase 0：读取现有页面 + brainstorming

![并行开发进行中的 worktree 结构](/blog/agent-team-worktree-ui-styles/multi-worktree-parallel.png)

Team Lead 启动后，首先读取 `src/app/page.tsx`、`components/`、`design-spec.md` 等文件，理解现有的"Neo-Editorial Tech"风格（暗色底 + 紫罗兰强调色，参考 Linear × Bloomberg 美学）。

随后调用 brainstorming skill，产出5套风格定义及差异矩阵。这个阶段 Team Lead 独立工作，其他 Agent 尚未启动。

### Phase 1：创建5个 Git Worktree

Team Lead 执行一条 for 循环，批量创建5个 worktree：

```bash
for style in style-a style-b style-c style-d style-e; do
  git worktree add "../worktrees/$style" -b "$style"
done
```

执行后，项目目录平级出现 `worktrees/` 文件夹，内含5个完整的项目副本，各自对应独立分支。

### Phase 2：5个 Designer 完全并行

这是整个流程的核心阶段。5个 Designer Agent 同时启动，各自进入自己的 worktree 目录，调用 frontend-design skill 获取设计指导，开始开发。

它们之间没有任何通信，完全并行。Team Lead 的角色是等待和调度，而不是介入每个 Designer 的开发过程。

每位 Designer 必须：
1. 在自己的 worktree 内实现完整页面（导航、统计面板、新闻卡片列表、分页、详情抽屉），保留全部原有功能
2. 运行 `npm run build`，确认0编译错误
3. TaskUpdate 标记 completed，发消息给 Team Lead

### Phase 3：测试与 Phase 2 并行

Designer D（Zen 风格）在 T+2:30 最先完成（Phase 0 brainstorming 约 30 分钟、Phase 1 创建 worktree 约 1 分钟，Phase 2 于 T+0 全部并行启动），Tester 2 立刻开始测试，此时其他4个 Designer 还在开发中。

这种"流水线"式的调度意味着测试时间几乎被完全掩盖在开发时间内。

### Phase 4 & 5：集成与收尾

所有5套风格测试通过后，Integrator 在主分支（非任何 worktree）创建风格选择展示页 `src/app/styles/page.tsx`，包含5套风格的 CSS 缩略预览、颜色色块、对比表格，以及各 worktree 的启动命令。

![风格选择入口页](/blog/agent-team-worktree-ui-styles/style-switcher.png)

最终结果：

![完成截图，底部可见总耗时25分钟](/blog/agent-team-worktree-ui-styles/completion-25min.png)

**25分钟。9个 Agent，5套风格，0编译错误。**

---

## 五、5套风格效果展示

### Style A — Brutalist Editorial（野兽主义报刊）

纯黑白红三色体系，0px 全局圆角，Playfair Display 衬线标题 + IBM Plex Mono 等宽正文。顶部跑马灯 Ticker Bar 滚动头条，首条新闻 `col-span-2 row-span-2` 放大呈现，Hover 时产生实色偏移投影效果（`translateX(4px) translateY(4px)`）。

这套风格拒绝一切装饰性元素，受包豪斯和瑞士平面设计启发，适合先锋技术媒体或强调"反 AI 审美"的产品。

![Style A — Brutalist Editorial](/blog/agent-team-worktree-ui-styles/style-a-brutalist.png)

### Style B — Glassmorphism Aurora（极光玻璃拟态）

深空渐变背景（`#0a0015 → #001a2e`），5个极光色块以不同周期（18-25s）在背景层流动，前景卡片使用 `backdrop-filter: blur(20px)` 毛玻璃效果。统计数字采用渐变文字（`background-clip: text`），分类标签悬浮时发光。

适合面向年轻用户的科技产品或游戏资讯平台，视觉冲击力最强。

![Style B — Glassmorphism Aurora](/blog/agent-team-worktree-ui-styles/style-b-aurora.png)

### Style C — Retro Terminal（复古终端）

纯黑底（`#0a0a0a`）+ 磷光绿主色（`#00FF41`），100% JetBrains Mono 等宽字体，无例外。没有传统意义上的"卡片"——新闻以带行号的终端行列表呈现，统计数据显示为 ASCII 表格，导航栏模拟 shell 提示符（`$ grep pattern...`）。

CSS 层叠 Scanlines（`repeating-linear-gradient` 细横线）和 Vignette（四角暗角），光标 `█` 持续闪烁。最极客、最反主流的一套风格。

![Style C — Retro Terminal](/blog/agent-team-worktree-ui-styles/style-c-terminal.png)

### Style D — Japanese Zen（日式禅意）

和纸米白背景（`#FAF7F2`），柿红强调色（`#C0392B`），Noto Serif SC 衬线中文字体。布局最特殊：窄列居中（`max-width: 760px`），单列纵向流，极大留白（卡片 `padding: 32px`，`gap: 32px`），行高 1.8，字间距 `0.02em`，还原纸质读物的阅读节奏。

分类标签为印章风格方形边框，分隔线使用细渐变线，没有阴影，没有动效，装饰克制到只剩分隔线的一道细线。

![Style D — Japanese Zen](/blog/agent-team-worktree-ui-styles/style-d-zen.png)

### Style E — Bento Dashboard（彩色便当格）

暖灰底（`#F5F4F0`），24px 大圆角，Manrope 字体，5色分类系统（蓝/绿/橙/紫/红）。统计面板用5格 Bento 网格布局，含7日趋势迷你柱状图。新闻卡片首条和每第7条放大为 `col-span-2` 宽卡片，其余标准尺寸，形成自然的视觉节奏。

分类筛选按钮带 emoji 图标，点击时有微弹跳动效。活泼、现代、信息密度适中，最适合大众用户的一套方案。

![Style E — Bento Dashboard](/blog/agent-team-worktree-ui-styles/style-e-bento.png)

---

## 六、经验总结

### Worktree vs 目录隔离：如何选择

| 场景 | 推荐方案 | 原因 |
|------|---------|------|
| 同一项目的不同模块（前端/后端/数据） | 目录隔离 | 文件路径天然不重叠，无需 worktree 开销 |
| 同一代码库的多套方案并行（UI 风格/算法对比） | Git Worktree | 相同路径文件需要独立版本，且事后需要 git 合并 |
| 需要同时运行多个实例对比 | Git Worktree | 每个 worktree 可独立启动服务，监听不同端口 |
| 简单的文件生成任务 | 目录隔离 | 够用，不引入额外 git 操作复杂度 |

一句话判断标准：**如果多个 Agent 需要修改"同一路径"的文件，用 Worktree；如果文件路径天然不重叠，用目录隔离。**

### Prompt 设计 Tips

**1. 明确写出 worktree 的绝对路径规范**

不要只说"在自己的目录工作"，要写清楚"使用绝对路径，严禁修改其他 worktree 或主分支文件"。AI 在处理路径时很容易产生歧义，明确约束能有效避免误操作。

**2. brainstorming 阶段单独做，不要和开发混在一起**

Phase 0 的风格构思产物是所有 Designer 的共同输入。如果 Team Lead 在构思未完成时就启动 Designer，会出现各 Designer 对同一风格名的理解不一致的情况。先产出差异矩阵，再并行开发。

**3. 并行触发，不要等全部完成**

"所有 Designer 完成后再统一测试"是一种直觉做法，但效率较低。设计成"完成即触发"的流水线结构，把测试时间掩盖在开发时间内，总耗时会明显下降。

**4. 集成阶段在主分支做，不在任何 worktree**

Integrator 的工作是在主分支创建风格展示页，如果让它在某个 worktree 里工作，最终还需要额外的 merge 步骤。明确告诉 Integrator 它的工作区是主分支目录。

**5. 测试要有具体检查项**

不要只说"测试是否正常"，要明确列出：`npm run build` 0错误、关键文件完整性（`page.tsx`、`tailwind.config.ts`、全部组件文件）、风格特征合规（颜色/字体/布局关键参数）。模糊的测试指令会让 Tester Agent 产出模糊的测试报告。

### 常见踩坑

| 问题 | 原因 | 解决方案 |
|------|------|---------|
| Designer 修改了主分支文件 | 相对路径导致目录解析错误 | Prompt 中明确要求使用绝对路径 |
| 两套风格看起来很像 | brainstorming 约束不够具体 | 明确列出"禁止仅色调不同"，要求输出差异矩阵 |
| Worktree 创建后找不到 node_modules | 新建 worktree 不自动安装依赖 | Prompt 中让 Designer 在开始开发前先执行 `npm install` |
| 测试通过但风格不符合预期 | 测试清单没有包含风格特征检查 | 测试内容中加入"颜色/字体/布局关键特征"验证项 |
| Integrator 在 worktree 里创建了展示页 | Prompt 没有说清楚 Integrator 的工作目录 | 明确写出"在主分支（非 worktree）的 `src/app/styles/page.tsx` 创建" |
| 某个 Designer 超时未响应 | 复杂风格（如 Terminal）开发量更大 | Tester 机制自然处理——其他风格先测，Terminal 测完即触发集成 |

### 关于 25 分钟这个数字

25 分钟是 Claude Code 整个会话的实际耗时（含 Phase 0 brainstorming、Phase 1 创建 worktree、Phase 2-5 并行开发到收尾），单人顺序开发5套风格预计 2-3 小时。

这不是"AI 写代码速度快"的问题，而是**并行架构本身的效率优势**。单个 Agent 并不比你快多少，但9个 Agent 同时工作，时间取决于最慢那一套，效率提升是结构性的。

---

## 七、资源附录

### 工具清单

| 工具 | 类型 | 安装方式 | 用途 |
|------|------|---------|------|
| Agent Teams | Claude Code 实验功能 | `CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1` | 多 Agent 并行协作 |
| frontend-design | Skill | `npx skills add frontend-design` | 每位 Designer 调用，获取设计规范指导 |
| superpowers:brainstorming | Skill | 随 superpowers 安装 | Phase 0 风格构思 |
| Git Worktree | Git 原生功能 | 无需安装 | 5套风格文件系统隔离 |

### 客户选定风格后的合并操作

```bash
# 示例：客户选定 Style D Zen
git checkout main
git merge style-d-zen

# 清理其余 worktree
git worktree remove worktrees/style-a-brutalist
git worktree remove worktrees/style-b-aurora
git worktree remove worktrees/style-c-terminal
git worktree remove worktrees/style-e-bento
git branch -d style-a-brutalist style-b-aurora style-c-terminal style-e-bento
```

### Demo 源码下载

附件 `demo-source.zip` 包含本文完整 Demo 代码，解压后目录结构如下：

```
demo-source/
├── demo project/          # 主项目（主分支）
│   ├── backend/           # FastAPI 后端
│   ├── frontend/          # 主前端 + 风格选择器（/styles 页）
│   ├── scripts/           # 数据库初始化 + Mock 数据脚本
│   ├── ARCHITECTURE.md    # 架构文档
│   └── API_SPEC.md        # 接口规范
│
├── worktrees/             # 5 套风格 Worktree
│   ├── style-a-brutalist/ # Style A 野兽主义报刊
│   ├── style-b-aurora/    # Style B 极光玻璃拟态
│   ├── style-c-terminal/  # Style C 复古终端
│   ├── style-d-zen/       # Style D 日式禅意
│   └── style-e-bento/     # Style E 彩色便当格
│
├── agent-team-prompt.md   # 可复用 Prompt 模板
└── 开发文档.md             # 5 套风格详细设计说明
```

**运行前须先安装依赖**（各目录分别执行 `npm install`），数据库初始化参见主项目 `scripts/init_db.py`。

---

两者组合，几乎可以覆盖所有"多方案并行开发"的需求：无论是 UI 风格比选、算法方案对比，还是 A/B 测试原型的快速搭建。

25分钟，5套风格，不是 AI 写代码速度有多快——而是并行架构本身的力量。

---

## 相关阅读

- [Claude Code Agent Teams 多代理协作完整实战](/posts/claude-code-agent-teams-practical-guide/) — 上一篇，讲解 Agent Teams 基础协作模式，本文是它在「多版本并行」场景下的进阶
- [从需求到自动化：Claude Code Skill 工具链完整实战](/posts/claude-code-skill-toolchain/) — 同系列，另一个 Claude Code 高级工作流实战，Skill 设计与 Agent 调度的完整方法论
- [从单兵作战到团队协作：Claude Code Agent Team 深度解析](/posts/claude-code-agent-team/) — 了解 Agent Teams 底层机制和架构设计，读本文前的基础知识