首页 实战 N° C6

我把怪招本 v3 改版拆成 26 段 brief,让 Commander 跑了 4 小时

5 个 type、5 张 SVG、5 色 accent、26 页结构——一次改版。Commander 模式在内容工厂里怎么跑,怎么设验收,怎么留 audit,全在。

一句话总结:Commander 模式只对「目标清晰、验收明确、可批量」的活有效。把它用在 v3 改版上,4 小时产出 26 页,账单 $3.38,但前提是 brief 是我写的、决策点是我守的、audit 是我批的。

任务源头

怪招本 v2 是「3 篇手记」的体量——能看,但立不住「类型志」的人设。v3 要升级成完整站点:

  • 5 个 AI agent type:Commander / Conversationalist / Supervisor / Co-thinker / Trainer
  • 每个 type 配 1 张手绘 SVG 插画(200×200 viewBox,极简线条)
  • 每个 type 配 1 个色 accent(amber / green / red / blue / purple)
  • 5 个 type × 5 栏目 = 25 篇内容页(类型志 + 实战 + 偏方)
  • 首页 + about + RSS = 26 页静态站

按 2024 年的标准做法,至少 2-3 周。我只有 4 小时。

所以这次用 Mavis(自家 agent runner)当 Commander 模式的执行体——我是甲方,它是一支能并行的小分队。下面是真实协作日志。


时间线:4 小时 06 分

时段在干嘛谁主导
0:00 – 0:255 个 type 的命名 + 边界 brief
0:25 – 0:505 色 accent 对照表 + UI 设计语言我 + Mavis
0:50 – 1:455 张 SVG 风格 brief + 并行生成Mavis
1:45 – 2:305 个 type × 5 栏目的内容骨架(25 篇)Mavis
2:30 – 3:1526 页 Astro 结构 + 路由 + frontmatter schemaMavis
3:15 – 3:45首版 build + 5 张 SVG 拼盘风格审计
3:45 – 4:00SVG 风格统一 + 二版 buildMavis
4:00 – 4:06audit 收尾 + 截图存档

净 4 小时 06 分。其中 18 分钟是手动决策 + audit。


决策点 1:5 个 type 凭什么不是 6 个

Commander 模式的命门:brief 的颗粒度决定 agent 的天花板

我给 Mavis 的 brief 不是「帮我想 5 个 AI agent 类型」,而是:

# Commander
沟通方式:发 brief、等结果
验收标准:交付物可量化、过程可审计
典型任务:批量 OCR、批量翻译、批量出图

# Conversationalist
沟通方式:多轮对话、反问式打磨
验收标准:用户问 5 轮后还能给出新东西
典型任务:写作润色、需求拆解

# Supervisor
沟通方式:review 别人的产出
验收标准:能识别 80% 的质量问题
典型任务:多 agent 编排的 reviewer

# Co-thinker
沟通方式:合伙人级反问
验收标准:能驳倒我的前提
典型任务:商业模式、决策推演

# Trainer
沟通方式:教 + 评估
验收标准:学员通过率 > 70%
典型任务:prompt 培训、skill 教学

为什么是 5 个不是 6 个:6 个会撞到「分支太多、边界不清」。5 个能保证每个 type 都有独立战场,又不至于互相重复。

为什么 brief 这么写:每个 type 三件事——沟通方式、验收标准、典型任务。少一个就立不住,多一个就冗余。


决策点 2:5 色 accent 不是随意挑的

配色方案 Mavis 给了 3 套备选。我最后定的 5 色是:

typehex选择理由
Commanderamber#d4a574甲方金、决策感、偏暖不刺眼
Conversationalistgreen#9bb06b草绿、对话中的松弛
Supervisorred#c87964警觉红、review 的审视感
Co-thinkerblue#6f8aa6冷静蓝、合伙人距离感
Trainerpurple#a880b5学术紫、教学氛围

手动决策的 3 个标准

  1. 不能用品牌常用色(避开蓝紫——AI 站烂大街了)
  2. 5 色明度要接近(不能 4 个暗色夹 1 个亮色,整站会失衡)
  3. 每个色都要”性格对”:amber 是甲方金,red 是警觉,purple 是学术——颜色本身要承担叙事

Mavis 第一版给的配色 80% 都过了,amber 和 purple 我让它各换了 2 次。第一版 amber 偏黄(像 warning),第二版才到”决策金”。


决策点 3:5 张 SVG 要”看起来是一套”

这是 Commander 模式最容易翻车的地方——风格漂移

5 张图如果分别让 agent 自由发挥,出来一定是 5 个设计师的拼盘。Mavis 第一版给我的 5 张 SVG:

  • Commander:粗线条 + monocle 老板
  • Conversationalist:极细线条 + 空咖啡杯
  • Supervisor:粗细混合 + 汗滴 robot
  • Co-thinker:细线条 + 跑道+checkpoints
  • Trainer:粗细混合 + 毕业帽 robot

问题:第 3、5 张粗细混合,和其它 3 张不统一。

手动决定:全部统一成「细线条 + 黑白灰 + 1 个色 accent」。重画 Supervisor 和 Trainer。

✓ Commander:  细线 1.5px / monocle / amber accent
✓ Conversationalist: 细线 1.5px / 空咖啡杯 / green accent
✓ Supervisor:  细线 1.5px / 汗滴 robot / red accent  ← 重画
✓ Co-thinker: 细线 1.5px / 跑道+checkpoints / blue accent
✓ Trainer:  细线 1.5px / 毕业帽 robot / purple accent  ← 重画

Commander 模式的关键心法:你不需要懂设计,但你要能识别「5 张图摆在一起不和谐」——这是验收能力,不是设计能力。


token 账单

这次 v3 改版的 API 花费(按 Claude 3.5 Sonnet 报价估算):

阶段输入 token输出 token费用
5 个 type 命名 + 边界 brief28k12k$0.51
5 色配色方案 + UI 语言18k8k$0.32
5 张 SVG 风格 brief + 首版生成42k15k$0.78
SVG 风格统一 + 重画 2 张26k9k$0.46
25 篇内容骨架(5×5)65k28k$1.18
26 页 Astro 结构 + 路由22k10k$0.40
audit + 验证 + 收尾11k5k$0.20
合计212k87k$3.85

同样 4 小时我手动干——单是 25 篇文章骨架就要 2 天。agent 帮我省了 14 个工作日,前提是 brief 我已经想清楚、5 个 type 我已经命名过 3 遍。


给也想用 Commander 的朋友的 3 条建议

1. Commander 模式只对「目标清晰、验收明确、可批量」的活有效。如果你的任务需要先讨论清楚、目标会变——别用 Commander,换 Conversationalist 或 Co-thinker。

2. brief 是你写的,决策是你守的,audit 是你批的——这三件事不能全甩。Commander 不是”我不动、agent 干”,是”我管 brief / 决策点 / audit 三道关,其它 90% 全甩”。

3. 留 1 轮 audit 让 agent 列「我做了什么」。这次我让 Mavis 在收尾时输出:

✓ 5 个 type 已命名(Commander/Conv/Super/Co-think/Trainer)
✓ 5 色 accent 已写入 Base.astro 主题色变量
✓ 5 张 SVG 已统一为 1.5px 细线 + 1 个色 accent
✓ 26 页全部 build 成功,0 报错
✓ RSS feed 输出正常,20 条文章

没有这一步,你会验收失明——只看到页面渲染成功,看不到 SVG 风格偷偷漂移、看不到 RSS 漏配、看不出 frontmatter 缺字段。


现场

实际做出来长这样:

怪招本 v3 首页:暗色 editorial + amber accent + 5 个 type card 顶部彩色条

首页 type-card 顶部彩色条 + illu 区 radial gradient + color-mix 描边——一套设计语言 5 个 type 复用。

v3 roamers 列表:5 行 / 左侧 illu + hover 高亮 + 颜色 pill

roamers 行左侧 SVG + hover 高亮——5 种 type 视觉区分但风格统一。


附:Mavis 跑这次任务时的工具调用链

shell:           PowerShell 5.1 (Windows)
node:            v24.15.0
mcp: matrix      image_gen, image_search
mcp: trash       中间 SVG 草稿清理
framework:       Astro 4.16 + MDX + RSS
部署:             静态 dist/ 直接 Vercel/Netlify

关键 insight:Commander 模式在「内容工厂」场景下 ROI 最高——5 个 type × 5 栏目 = 25 篇同构内容,agent 一次 brief 全部覆盖。但前提是你已经想清楚 type 是什么。Commander 不替你思考,它替你执行。

下一篇写 Conversationalist——它跟 Commander 最大的差别不是 prompt,是节奏

— 怪招本 #006 · 2026-06-28