功能深挖
Claude Code 子代理：搭建一个 UI 审查员
子代理是拥有独立上下文、工具和系统提示的小专家。完整搭建过程，一步一图。
共 14 步的图文教程，阅读约 5 分钟。每一步都可回跳到来源视频中的精确时刻。
速览
输入 /agents，在项目作用域下新建代理，用一句「expert UI/UX engineer who reviews React components in a browser using Playwright」让 Claude 起草。裁剪它的工具——审查员不需要编辑权限——再选好模型和颜色，Claude 就会写出 markdown 文件。把它挂进自定义斜杠命令，让每个组件都自动过审。然后，依然要亲自读代码。
关于来源视频
本页整理自 Net Ninja 的 Claude Code 课程中讲子代理的一课，逐步复刻其中的 UI 审查代理。
截图取自视频并署名原作者；文字部分为本站原创。步骤已于 2026 年 9 月对照视频核实。
创建子代理
一条命令、五个界面，你的专家就位。
- 1
用 /agents 打开代理菜单
在 Claude Code 会话里输入 /agents——提示栏会说它负责管理 agent 配置。所有子代理的创建、查看、编辑都发生在这个菜单里。
一条斜杠命令，打开整个子代理工作台。视频 2:30 处 - 2
从空名单开始
首次运行时菜单显示 no agents found 和 Create new agent 选项，并列出始终可用的内置代理：general-purpose、statusline-setup、output-style-setup。你的子代理之后会与它们并列。
内置代理是全局的；你的代理会加入同一份名单。视频 2:34 处 - 3
让 Claude 起草代理
两条路：让 Claude 生成（推荐）或手写 markdown。起草是更好的起点——你描述岗位，Claude 产出文件，不满意的地方再手动改。
先生成再修改——它只是一个 markdown 文件。视频 2:58 处 - 4
把岗位职责写精确
视频用的描述：「Expert UI & UX engineer who reviews the UI & UX of React components in a browser using Playwright, takes screenshots, then offers feedback...」角色、工具、产出方式，一句话说清。
角色 + 工具 + 产出风格，一句话的岗位说明书。视频 3:10 处 - 5
有意识地裁剪工具集
Claude 会问这个代理能用哪些工具：全部工具、只读、编辑、执行、MCP。给审查员就要取消编辑工具——你要的是反馈，不是重写。这是「顾问」和「会偷偷重构你组件的代理」之间的区别。
手握编辑权的审查员，是没法信任的审查员。视频 3:38 处 - 6
确认创建，认识你的代理
确认信息出现：ui-ux-reviewer 已作为项目代理创建，模型为 Sonnet，与内置代理并列显示。从这一刻起，只要任务描述匹配，Claude Code 就可以把工作委派给它。
已创建、已定作用域，随时可以接活。视频 4:18 处
接入你的工作流
代理文件就是 markdown——再配一条自定义命令来触发它。
- 7
读一读它生成的 markdown
代理就是一个文件：.claude/agents/ui-ux-reviewer.md，包含名称、描述、工具列表（含你指定的 Playwright MCP 工具）和完整的系统提示。想改就改——它只是写在文件里的提示词。
顶部是元信息，下面是长长的系统提示。视频 5:22 处 - 8
把它挂进自定义斜杠命令
课程里的 /ui-component 命令负责按名称和摘要创建组件。这一课在命令末尾追加关键指令：构建完成后调用 ui-ux-reviewer 代理、落实它的反馈、循环往复直到满意。
命令的任务部分，现在以评审循环收尾。视频 5:38 处 - 9
重启会话
Claude Code 在会话启动时才会加载新增和修改过的命令，所以先退出再重开。/agents 的记录确认了已创建的代理，然后就可以继续了。
新代理和新命令在下一次会话中生效。视频 6:10 处 - 10
运行你的自定义命令
输入 /ui-component Modal——做一个干净、现代、带半透明遮罩的模态框。Claude 生成的待办清单最后一项就是「Review with ui-ux-reviewer agent」——委派已经排进计划。
名称加一句摘要，命令需要的就这些。视频 6:18 处
自动化评审循环
构建、在浏览器里审查、修复、循环——然后依然亲自读 diff。
- 11
看评审如何进入计划
待办清单：创建带遮罩的 Modal、加变体和尺寸、建测试文件、加入预览页、跑测试——最后一项是「用 ui-ux-reviewer 代理审查」。主线程在为委派做铺垫。
七项待办，最后一项属于那位专家。视频 6:50 处 - 12
审查员要求打开浏览器
ui-ux-reviewer 代理接管流程：它读取组件，请求运行 npm run dev 以便打开页面。审批依旧经过你——委派并不绕过权限。
子代理在干活，但审批闸门仍在你手里。视频 7:14 处 - 13
读它的审查结论
审查员返回结构化结果：已完成截图、缩放视口检查小屏，然后给出结论——5 星满分、达到生产标准，并列出它创建的每个文件。主线程随后落实所有被要求的修改。
截图、无障碍建议，以及一份打星结论。视频 9:04 处 - 14
亲自在浏览器里验证
证据：生成的模态框带半透明遮罩，可用 Esc、关闭按钮或点击遮罩关闭，有 primary、secondary、success、warning、danger 五种变体和三种尺寸。自己试一遍——然后再去读代码。
键盘、遮罩点击、按钮关闭——全部可用。视频 9:22 处