本文会以一个 Web 端大模型聊天机器人（ChatBot）为目标，从前端设计到后端开发，带你体验两种截然不同的开发模式：一句话全自动生成 vs 多 Agent 流水线协作。
最终，你将拥有一个可运行的 ChatBot 应用，更重要的是，你将掌握 Claude Code 在工业级项目开发中的核心工作方法论。
1. 需求分析与 HTML 原型设计
第一步是明确需求。目标是开发一个 Web 端的大模型聊天机器人，具体需求如下：
| 维度 | 要求 |
|---|---|
| 界面布局 | 左侧历史会话列表 + 右侧聊天主区域，深色主题 |
| 消息展示 | 用户消息靠右（浅色气泡）、AI 消息靠左（深色气泡），支持 Markdown 渲染 |
| 输入交互 | 底部输入框 + 发送按钮，支持 Enter 发送 / Shift+Enter 换行 |
| 模拟功能 | 先实现前端原型，AI 回复暂用模拟数据（打字机逐字效果） |
| 技术约束 | 单 HTML 文件，内联 CSS + JS，无外部依赖，浏览器直接打开即可运行 |
为什么从单 HTML 文件开始？ 因为这是验证前端设计的最快路径------无需启动服务器、无需安装依赖，双击打开就能看到效果。后续再拆分为前后端分离的完整应用。
1.1 生成初版页面
创建项目目录并启动Claude Code：
bash
mkdir chatbot
cd chatbot
claude在对话中输入以下需求:
text
请创建一个 index.html 文件------一个大模型聊天机器人的前端页面。具体要求：
1. 整体布局：左侧是历史会话列表（宽度约 260px），右侧是聊天主区域。左侧顶部显示 🤖 Logo + "AI机器人" 标题，下方显示历史会话列表（随机5条示例问题）；右侧显示欢迎页"今天有什么可以帮到你？"(DeepSeek风格)。
2. 深色主题：背景色 #1a1a2e，消息区域 #16213e，输入栏 #0f3460
3. 消息气泡：用户消息靠右（蓝色气泡 #2196F3），AI 消息靠左（深灰气泡 #2d2d2d），支持 emoji 头像图标（用户👤/AI🤖）
4. 输入栏：底部固定，包含圆角输入框和圆形发送按钮，支持 Enter 发送
5. 模拟 AI 回复：发送消息后，显示打字机动画，再随机返回一条模拟回复并逐字输出
6. 纯前端实现：所有 CSS 和 JS 内联在 HTML 中，无任何外部依赖
7. 响应式：移动端（<768px）自动隐藏侧边栏，显示 hamburger 菜单按钮展开生成的静态页面如下：
接下来，我们用两种工具逐步提升它的视觉品质。
2. 前端优化（一）
Claude Code 生成的前端页面，在功能层面通常没有问题，但在设计品味上往往差强人意。Anthropic 官方为此专门开发了一个插件：frontend-design。
2.1 frontend-design 是什么？
| 属性 | 说明 |
|---|---|
| 开发者 | Anthropic 官方团队 |
| 类型 | Claude Code Plugin（包含一个 Skill） |
| 安装量 | 24 万+（截至 2026 年 3 月） |
| 核心作用 | 注入专业设计指导，让 Claude 在前端任务中自动产出更有辨识度的界面 |
| 触发方式 | 自动激活------安装后无需手动调用，Claude 检测到前端任务时自动应用 |
它的工作原理是：在 Claude 的系统提示中注入约 400 token 的专业设计准则，覆盖排版、配色、动效、背景四个维度，引导模型跳出"安全方案"的舒适区。
2.2 安装方法
在 Claude Code 中执行一条命令即可安装：
bash
/plugin install frontend-design@claude-plugins-official安装完成后，Claude Code 会提示安装成功，下一次涉及前端的对话中它就会自动生效。
如果你好奇这个插件到底给 Claude 注入了什么指令，可以在 GitHub 上查看它的完整 SKILL.md 文件。
2.3 优化维度一览
| 维度 | 默认行为（无插件） | 优化后（有插件） |
|---|---|---|
| 排版 | Arial / Inter / Roboto 等通用字体 | 有辨识度的字体搭配（如 Playfair Display + 精炼正文字体） |
| 配色 | 平均分布的"安全色" | 主色 + 锐利强调色，CSS 变量保持一致性 |
| 动效 | 无或极简过渡 | 编排入场动画（staggered reveals）、滚动触发、悬停状态 |
| 背景 | 纯色或简单渐变 | 渐变网格、噪点纹理、几何图案、分层透明 |
2.4 优化 ChatBot 页面
text
/frontend-design 请对index.html进行一次前端设计升级------不改变功能逻辑，重点提升视觉品质：优化排版层级、增加微交互动效、提升色彩层次感、让界面看起来更像一个精心设计的产品而非AI生成的原型。Claude 在处理这个请求时会参考专业设计准则，产出的结果会与初版有明显的视觉差异------更精致的字体排版、更有层次的色彩方案、精心编排的过渡动画。
3. 前端优化（二）：Pencil 设计工具
/frontend-design插件通过文字指令提升设计品质，但有些视觉调整------比如精确的间距、色块比例、组件布局------用语言描述效率很低。这时候需要一个可视化设计工具。Pencil 正是为此而生。
3.1 Pencil 是什么？
| 属性 | 说明 |
|---|---|
| 产品定位 | AI 原生设计工具（类 Figma 的无限画布） |
| 核心能力 | 通过 MCP 协议与 Claude Code 深度集成，AI 可直接操控设计画布 |
| 文件格式 | .pen 格式（加密，只能通过 Pencil 工具读写） |
| 官网 | pencil.dev |
Pencil 与 Claude Code 的关系是：Pencil 负责视觉设计，Claude Code 负责代码实现，MCP 协议在两者之间架起桥梁。安装 Pencil 后，Claude Code 可以直接在对话中创建设计元素、调整布局、生成截图预览，甚至从设计稿直接生成代码。
3.2 安装指南
方式一：VS Code 扩展（推荐）
- 打开 VS Code/Cursor →扩展面板
- 搜索"Pencil"，确认标识符为
- 点击安装
- 用邮箱完成激活
方式二：桌面应用
- 访问pencil.dev/downloads
- 下载 Windows .exe安装包
- 运行安装程序，按提示完成
3.3 验证 MCP 连接
安装完成后，在 Claude Code 中验证 Pencil MCP 是否已正确连接：
bash
/mcp在 MCP Server 列表中，应该看到 pencil 显示为connected状态。如果未显示，尝试重启Claude Code。
3.4 Pencil 暴露的核心工具
通过 MCP 协议，Pencil 向 Claude Code 暴露了以下工具，Claude 可以在对话中直接调用：
| 工具 | 功能 | 典型用途 |
|---|---|---|
batch_design |
创建/修改设计元素（插入、复制、更新、替换、移动、删除） | 在画布上构建 UI 布局 |
batch_get |
读取组件和节点信息 | 分析现有设计结构 |
get_screenshot |
渲染指定节点的截图 | 预览设计效果 |
get_guidelines |
获取设计规范（landing-page / design-system / table 等） | 确保设计符合规范 |
get_style_guide |
获取风格指南 | 保持视觉风格一致性 |
snapshot_layout |
检查当前布局结构 | 排查布局问题 |
3.5 Pencil 精调 ChatBot 设计
在 Claude Code 中输入：
text
请使用Pencil设计工具，为index.html创建一份设计稿。在Pencil画布上绘制ChatBot的界面布局，包含：
1.整体页面框架（左侧边栏+右侧聊天区）
2.消息气泡组件（用户/AI两种样式）
3.输入栏组件
使用深色主题配色方案。Claude Code 会调用 Pencil MCP 的工具------你可以在终端中看到 batch_design、get_screenshot等工具调用。设计完成后，Claude会自动截图预览。
如果想从设计稿生成代码，可以继续输入：
text
请根据Pencil中的设计稿，更新chatbot.html的样式，确保代码与设计稿一致。4. 方案一：一句话生成完整应用
以下是一个经过精心设计的需求描述：
diff
基于当前目录中的chatbot.html前端设计，请帮我开发一个完整的前后端ChatBot应用。具体要求：
【前端】
- 以index.html的设计为基础，改为通过fetchAPI调用后端接口
- 发送消息时调用POST/api/chat，传递messages数组（多轮对话）
- AI回复支持流式输出（Server-SentEvents），逐字显示
【后端】
- Node.js+Express
- 提供POST/api/chat接口
- 后端通过AnthropicSDK调用Claude模型，实现流式响应-维护多轮对话上下文（内存存储即可，无需数据库）
- 端口3000，前端静态文件通过Express托管
【项目结构】
- 创建package.json，包含所需依赖
- 创建server.js（后端入口）
- 将前端HTML放在public/目录下
- 创建.env.example文件说明需要配置的环境变量-创建启动脚本4.2 观察 Claude Code 的执行过程
发送上述 Prompt 后，Claude Code 会展现出 Agent 的完整工作流。以下是你在终端中会看到的典型执行序列：
| 步骤 | 工具调用 | 具体操作 |
|---|---|---|
| 1 | Think | 分析需求，规划项目架构和文件结构 |
| 2 | Bash | mkdir -p public 创建目录结构 |
| 3 | Write | 创建 package.json（定义依赖：express、@anthropic-ai/sdk、dotenv） |
| 4 | Write | 创建 server.js（Express 服务器 + Anthropic API 调用 + SSE 流式响应） |
| 5 | Read | 读取现有的 chatbot.html，分析其结构 |
| 6 | Write | 创建 public/index.html（基于原始设计，改造为调用后端 API） |
| 7 | Write | 创建 .env.example（说明环境变量配置） |
| 8 | Bash | npm install 安装依赖 |
| 9 | Bash | node server.js 启动服务并测试 |
Claude Code 会自主完成从规划到部署的全部步骤。
4.3 运行验证
Claude Code 完成后，你需要配置 API Key 才能让后端正常调用大模型：
bash
# 安装依赖
npm install
#复制环境变量模板
cp.env.example.env
#编辑.env文件，填入你的APIKey
#ANTHROPIC_API_KEY=sk-your-key-here然后启动应用：
bash
npm start在浏览器中打开 http://localhost:3000/,输入一条消息------如果一切配置正确，你会看到 AI 的回复以流式方式逐字出现。恭喜，你刚刚用 Claude Code 几分钟就生成了一个完整的全栈 ChatBot 应用。
4.4 分析生成的代码结构
让我们看看 Claude Code 生成了什么：
text
chatbot/
├── package.json # 项目依赖（express,@anthropic-ai/sdk,dotenv）
├── server.js # 后端入口（Express+AnthropicAPI+SSE）
├── .env # 环境变量（API Key）
├── .env.example # 环境变量模板
├── public/
│ └── index.html # 前端页面
├── index.html # 原始前端原型（保留参考）
└── node_modules/ # 依赖包在 server.js中实现了流式响应、多轮对话、错误处理、CORS等技术点。
4.5 不满意 Checkpoint 回滚
如果对 Claude Code 生成的代码结构或实现方式不满意，可以使用 /rewind 命令。
选择生成代码之前的 Checkpoint 节点，所有新创建的文件会被删除，修改过的文件恢复原状------干净回到起点，然后调整 Prompt 重新生成。
5. 方案二：多 Agent 流水线协作
方案一本质上是让一个 Agent 从头到尾包揽所有工作------需求分析、架构设计、编码实现、质量审查，全部由同一个上下文完成。在简单项目中这没有问题，但在工业级开发中，这种模式有明显的局限性：
| 局限 | 具体表现 |
|---|---|
| 上下文膨胀 | 规划、编码、审查的信息混在一起，容易丢失关键上下文 |
| 角色混淆 | 同一个 Agent 既要"创造"又要"批判"，往往对自己的代码过于宽容 |
| 无法并行 | 所有步骤串行执行，无法利用多任务加速 |
| 难以复用 | 每次都要重新描述完整需求，无法沉淀标准化流程 |
方案二引入 多Agent协作系统--创建三个角色分明的 Agent，组成"规划→编码→审查"流水线。这正是工业级团队的常见协作模式。
5.1 设计三个自定义 Agent
| Agent | 角色 | 模型 | 工具权限 | 核心特点 |
|---|---|---|---|---|
planner |
产品架构师 | Minimax-M2.7 | Read / Glob / Grep / WebSearch (只读) | 只规划不写码 |
coder |
前端开发工程师 | Minimax-M2.7 | Read / Write / Edit / Bash / Glob / Grep (读写) | 专注代码实现 |
reviewer |
代码审查专家 | Minimax-M2.1 | Read / Glob / Grep (只读) | 后台异步审查 |
三个 Agent 各司其职：Planner 负责"想清楚"，Coder 负责"做出来"，Reviewer 负责"查一遍"。关键设计------Reviewer 使用便宜模型且设置为后台运行，既节省成本又不阻塞主对话。
5.2 创建 Agent 配置文件
在 Claude Code 中，自定义 Agent 以 .md 文件形式存储在 .claude/agents/ 目录下。每个文件包含一段 YAML 前置元数据（定义模型、工具等参数）和 Markdown 正文（Agent 的系统提示词）。
你可以直接让 Claude Code 帮你创建这些文件：
text
请在.claude/agents/目录下创建以下三个Agent配置文件：
1.planner.md------产品架构师
- 模型：minimax-m2.7
- 只读工具： Read, Glob, Grep, WebSearch
- 权限模式： plan
- 最大轮次： 10
- Prompt： 你是一位前端产品架构师，负责分析需求、设计页面结构、规划交互流程和技术方案，输出实现计划。你只做规划，不写代码。
2. coder.md --- 前端开发工程师
模型： minimax-m2.7
读写工具： Read, Write, Edit, Bash, Glob, Grep
权限模式： acceptEdits
最大轮次： 20
Prompt： 你是一位前端开发工程师，根据规划方案编写完整的代码实现。请使用现代 CSS 和 ES6+ JavaScript。注重代码质量和用户体验。
3. chatbot-reviewer.md --- 代码审查专家
模型： minimax-m2.1
只读工具： Read, Glob, Grep
后台运行： true
最大轮次： 10
Prompt：你是一位代码审查专家，重点检查可访问性、性能、安全性、代码质量和响应式设计，输出评分和改进建议。Claude Code 会创建 .claude/agents/ 目录并生成三个 .md 文件。以 planner.md 为例，生成的文件内容如下：
markdown
---
name: planner
description: 产品架构师 - 分析需求、设计页面结构、规划交互流程和技术方案
model: minimax-m2.7
tools:
only:
- Read
- Glob
- Grep
- WebSearch
permission: plan
maxTurns: 10
background: false
---
你是一位前端产品架构师。你的职责是：
1. 分析用户需求，规划页面结构
2. 设计交互流程和UI布局
3. 列出技术方案（CSS框架、动画、响应式策略）
4. 输出一份简洁的实现计划（不要写代码）
输出格式：
## 需求分析
## 页面结构设计
## 交互流程
## 技术方案
## 实现步骤清单5.3 执行流水线
三个 Agent 按照规划→编码→审查的顺序逐步执行。
- Step 1：启动 Planner Agent
text
@planner 请为以下需求规划一个完整的前后端ChatBot应用：
基于当前目录的index.html前端设计，开发一个可运行的ChatBot，
前端通过fetch调用后端API，后端使用Node.js + Express + AnthropicSDK，支持流式输出和多轮对话。Planner 会分析需求，输出一份结构化的实现计划--包含需求分析、页面结构、技术方案和实现步骤清单。注意：由于 Planner 只有 Read/Glob/Grep 等只读工具，它不会也不能修改任何文件。
- Step 2：启动 Coder Agent Planner 输出计划后，将计划交给 Coder：
java
@coder 根据刚才 planner 给出的规划方案，实现完整的前后端ChatBot应用。
前端保存在public/index.html，后端入口为server.js，包含package.json和.env.example。Coder 拥有 Write/Edit/Bash 等读写工具，会按照 Planner 的方案逐步创建文件、编写代码、安装依赖。
- Step 3：启动 Reviewer Agent（后台运行）
编码完成后，启动 Reviewer 进行代码审查：
java
@reviewer 请审查 server.js 和 public/index.html 的代码质量由于 reviewer 配置了 background: true，它会进入后台运行，不阻塞你的主动话。你可以在等待审查结果的同时继续做其他事情。审查完成后，会收到一份包含评分和改进建议的报告。
- Step 4：基于改进建议进行优化
css
@coder 请根据 reviewer 的 改进建议，对程序进行优化。优化完成后，可让 reviewer 再次代码审查。
5.5 进阶：工作流编排（自动化流水线）
每次都要手动启动三个 Agent 略显繁琐。Claude Code 支持通过工作流配置文件 + 自定义 Slash Command 组合，将整个流程自动化为一条命令。
5.5.1 工作流文件结构
Claude Code 在 .claude/workflows/ 目录下读取工作流定义文件。每个文件声明一组步骤，每一步指定 Agent 类型和 Prompt 模板，触发后自动按顺序执行。
工作流文件 .claude/workflows/chatbot-pipeline.md，内容如下：
markdown
---
name: ChatBot 流水线
description: 需求 → 规划 → 编码 → 审查 → 优化，全自动执行
trigger: manual
variables:
REQUIREMENT:
description: 用户的需求描述
required: true
---
## 步骤 1：需求规划
**Agent:** planner
**Prompt:** 请为以下需求规划实现方案：$REQUIREMENT
## 步骤 2：编码实现
**Agent:** coder
**Prompt:** 根据上一步的规划方案，实现完整应用
## 步骤 3：代码审查
**Agent:** reviewer
**Prompt:** 请审查生成的代码文件
## 步骤 4：优化改进
**Agent:** coder
**Prompt:** 根据上一步的审查结果和优化建议，对代码进行优化5.5.2 定义说明
| 字段 | 说明 |
|---|---|
name |
工作流名称，用于标识和引用 |
description |
工作流描述 |
trigger |
触发方式，manual 表示手动触发 |
variables |
变量定义，$REQUIREMENT 作为流程启动时的输入 |
Agent |
每一步调用的 Agent 类型（planner / coder / reviewer） |
Prompt |
Agent 执行时使用的 Prompt 模板 |
5.5.3 触发方式：自定义 Slash Command
Claude Code 通过自定义 Slash Command 触发工作流执行。
5.5.4 命令文件配置
把 /pipeline 做成自定义 Slash Command 。
这种方式不依赖 Hook，触发路径更直接、配置更清晰，也更便于团队维护。
命令文件（.claude/commands/pipeline.md）：
markdown
---
description: 执行 ChatBot 多 Agent 流水线
argument-hint: <需求描述>
---
你是一个自动化流水线执行器。
请读取并严格按 `.claude/workflows/chatbot-pipeline.md` 执行。
启动变量如下：
- REQUIREMENT = "$ARGUMENTS"
执行要求：
- 严格按工作流中的 4 个步骤顺序执行（planner -> coder -> reviewer -> coder）
- 每个步骤完成后输出【步骤X完成】
- 全部完成后输出【流水线执行完成】并附总结使用方式：
bash
# 在 Claude Code 对话中直接输入：
/pipeline [复制"4. 方案一：一句话生成完整应用" 下面的需求描述]输入后将通过命令文件读取工作流定义并执行，避免在命令和工作流中维护两份重复内容。
首次新增或修改命令后，建议重启 Claude Code，或使用相应的命令刷新机制重新加载。
备选方案：手动级联调用
不使用自动化流水线时，也可以手动依次启动各个 Agent（效果相同，但需要多次输入）：
bash
@planner 请为以下需求规划方案：<需求描述>
@coder 根据刚才 planner 给出的规划方案，实现完整应用
@reviewer 请审查 server.js 和 public/index.html
@coder 根据 reviewer 的改进建议，对程序进行优化5.6 两种方案对比
| 维度 | 方案一（一句话生成） | 方案二（多 Agent 流水线） |
|---|---|---|
| 适用场景 | 快速原型、小型项目、个人开发 | 复杂项目、团队协作、工业级开发 |
| 代码质量 | 依赖单次生成质量，无内置审查 | 分阶段审查（Reviewer 自动检查），质量更可控 |
| 可定制性 | 低------需要在 Prompt 中描述所有要求 | 高------每个 Agent 独立配置模型、工具权限、提示词 |
| 可复用性 | 低------每次都要重新描述需求 | 高------Agent 和工作流可跨项目复用 |
| 成本控制 | 全程使用同一模型 | 精细控制------规划和编码用 Sonnet，审查用 Haiku 降本 |
| 上手难度 | 零门槛 | 需要理解 Agent 体系和工作流概念 |
| 执行耗时 | ~60 秒 | ~3-5 分钟（但质量更高） |
核心认知：方案一和方案二并不是"非此即彼"的关系。在实际开发中，最高效的做法是组合使用------用方案一快速生成初版原型，确认方向正确后，用方案二的 Reviewer Agent 进行质量审查，再根据审查建议迭代优化。
6. 小结
本节通过一个完整的 ChatBot 项目，综合运用了 Claude Code 从前端设计到后端开发的全链路能力：
| 步骤 | 核心能力 | 涉及的 Claude Code 系统 |
|---|---|---|
| 需求 → HTML 原型 | 一句话生成完整前端页面 | 内置工具 (Write / Bash) |
/frontend-design 优化 |
官方插件提升设计品质 | 扩展系统 (Plugin) |
| Pencil 精调 | AI 原生设计工具 + MCP 集成 | 扩展系统 (MCP) |
| 方案一：一句话全栈 | 60 秒生成前后端完整应用 | 内置工具 + 项目管理 (Checkpoint) |
| 方案二：多 Agent 流水线 | Planner → Coder → Reviewer 分工协作 | 多 Agent 系统 + 斜杠命令 |
Claude Code 不只是"帮你写代码"的工具
它是一个可编排的 Agent 系统，能模拟真实团队协作流程。
Prompt 质量决定输出质量
同样的功能，精心设计 Prompt 与随意描述，结果差距会非常明显。
设计与开发可以无缝衔接
通过 /frontend-design 与 Pencil MCP，从视觉到代码不再割裂。
Checkpoint 让试错成本接近零
大胆尝试任何方案，不满意就一键回滚。
如果想要源码和Agent，可以私我，发给你