我用 Mavis 4 小时搭完一个咖啡博客站，过程全在

一句话总结：当任务涉及「搜索 + 下载 + 编码 + 浏览器验证」四件套时，让 agent 干比自己干省 70% 时间，但中间要给它留 4 个手动决策点。

任务源头

朋友让我做一个咖啡博客的 landing page，叫 MOCHA MILE——一座城一杯咖的杂志风站点。视觉走 espresso / 焦糖 / 金的暖色系，不要蓝紫，不要 AI 味。

页面有 6 个 sections：hero、stats、cities、cafés、vocab、dispatches。其中 cafés 段最重——6 张店主肖像卡片，要展示每家咖啡店的内景。

按 2024 年的标准做法，我会：

1. 去 Pexels / Unsplash 搜图，每张图手动挑 10 分钟
2. 下载、调尺寸、写 alt
3. 写 CSS、HTML
4. 截图验证

预计 4-5 小时，主要是搜图最费时。

但这次我用 Mavis（我自己写的一个 agent runner）来干。下面是它（和我）的真实协作日志。

---

时间线：4 小时 12 分

时段	在干嘛	谁主导
0:00 – 0:15	任务拆解 + 风格定调	我
0:15 – 0:40	写 spec.md + 首版 HTML 骨架	Mavis
0:40 – 1:30	cities / stats / vocab 三段 AI 图 + 文字	Mavis
1:30 – 2:00	cafés 段：先放 6 张 AI 图占位	Mavis
2:00 – 2:30	决定用真店照；Mavis 用 matrix MCP 搜 12 张	Mavis
2:30 – 3:10	下载 12 张真店照	Mavis
3:10 – 3:35	第一次 Playwright 截图：发现 2 张图名实不符	我
3:35 – 4:00	重新搜 + 重新下 2 张	Mavis
4:00 – 4:12	二次截图验证 + 收尾	我 + Mavis

净干活 4 小时 12 分。其中有 23 分钟是网络重试 + 决策点。

---

决策点 1：cafés 段用 AI 还是真图

Mavis 给的初版是 6 张 AI 生成的咖啡店内景。我看了下——太「AI」了：所有图片都偏奶咖色调、构图雷同、完全没有真实咖啡店那种油渍、磨损和店主乱贴的告示牌。

手动决定：改 12 张真实店照（每个城市 2 家）。

为什么 12 张而不是 6 张更细：

• 6 张是「咖啡店」，12 张才是「人坐在里面喝」——后者对 web 流量更有说服力
• 12 张 = 4 列 × 3 行，刚好铺满一个 viewport 黄金区
• 6 张找 6 个名店很难，12 张每家门槛低

---

决策点 2：搜图 + 下载的 MCP 链路

Mavis 用 matrix_search_images（matrix MCP）跑图片搜索。schema 是：

{
  "queries": [
    { "query": "Blue Bottle Coffee Shibuya Tokyo interior",
      "prompt": "咖啡店内景,真实摄影",
      "task_name": "tokyo_bluebottle" }
  ]
}

注意 queries 是对象数组，不是字符串数组——我第一版发字符串直接被 400 驳回。

每次最多 10 个 query，12 张图我拆成 2 批跑。

下载走 Python urllib：

import urllib.request
req = urllib.request.Request(url, headers={
  "User-Agent": "Mozilla/5.0 Chrome/124",
  "Referer": "https://www.dezeen.com/"  # 关键
})

Referer 一定要带——Dezeen 和 marketlane.com.au 都会校验 referer 来源，直接裸请求返回 403。

---

决策点 3：2 张图名实不符

第一次跑完 12 张图，Playwright 截图（browser_take_screenshot）一看：

• N° 001 / Tokyo 卡片下，应该显示 Blue Bottle Shibuya 的内部——显示的是「LE CAFE COFFEE」，一家韩国店。
• N° 010 / Melbourne 卡片下，应该显示 Market Lane QVM——显示的是 Auction Rooms 风的不相关墨尔本店。

文件大小也很可疑：

• tokyo_bluebottle.jpg：42 KB（太轻）
• melbourne_marketlane.jpg：78 KB（且主体跟文件名对不上）

Mavis 的搜图返回了最像 query 字面的结果，但搜索引擎的「像」是文本相似度，不是品牌名识别。

手动决定：重下这 2 张。来源从搜索引擎结果换成官方源：

• Blue Bottle：dezeen.com 2021 年的 Shibuya 店报道原图
• Market Lane：marketlane.com.au 自己的 CDN 图

✓ tokyo_bluebottle.jpg  42 KB → 445 KB  (dezeen)
✓ melbourne_marketlane.jpg  78 KB → 70 KB  (marketlane CDN)

第二次截图，匹配正确。

教训：文件大小 < 100 KB 的图，90% 是占位图或缩略图。大于 200 KB 才可能是真店照。

---

决策点 4：Playwright 的 reparse 路径坑

截图文件落到 ~/.mavis/tmp/mcp-images/，但我代码里写的是 ~/.minimax/。这台机器上 ~/.mavis 是个 reparse point（junctions），指向 ~/.minimax。mavis-trash 直接拒绝跨 reparse 删东西。

第一次试 mavis-trash 'C:\Users\HUAWEI\.mavis\...' 失败；改用真实路径 C:\Users\HUAWEI\.minimax\... 才过。

教训：PowerShell 环境下，先 Get-Item 看 LinkType；reparse point 一定要走真实路径。

---

token 账单

这次任务的 API 花费（按 Claude 3.5 Sonnet 报价估算）：

阶段	输入 token	输出 token	费用
spec + HTML 骨架	48k	22k	$0.84
AI 图 prompt 编写	12k	4k	$0.18
cafés 段 CSS + 12 article	35k	18k	$0.69
搜图 query 改写	8k	5k	$0.16
2 张图重下的判断	14k	9k	$0.31
收尾 + 验证	11k	6k	$0.21
合计	128k	64k	$2.39

同样的活我手动干 4 小时，时薪按 $30 算是 $120。agent 帮我省了 117.6 美元——前提是 agent 已经接好了 matrix / playwright / python / shell 这套 MCP 工具。

---

给也想用 agent 干活的朋友的 3 条建议

1. 把任务拆到「决策点」粒度。我手动决定的是 4 个关键点，其它 90% 的执行可以全丢给 agent。每个决策点之间 agent 可以自己跑 30-50 分钟。

2. 网络层的坑只能你扛。下载、跨域、Referer、reparse point——这些都是基础设施问题，agent 能踩但修不了。

**3. 真店照、AI 图、矢量图——**别为了省事全用 AI。我做这次项目最大的认知更新是：店主肖像这种「人脸 + 真实空间」的内容，AI 跟真照片差 10 年。其它（封面、城市鸟瞰）AI 完全够用。

---

现场

实际做出来长这样（首屏 + 末屏）：

「Twelve conversations, six cities.」——6 座城市，12 间店，每间都有自己的偏执。

St. Ali / Market Lane / Ristr8to / Graph，每家都在用装修告诉你它在乎什么。

---

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

shell:           PowerShell 5.1 (Windows)
node:            v24.15.0
mcp: matrix      image_search, image_gen
mcp: playwright  navigate, screenshot, press_key
                  (browser_run_code 需要单独授权)
mcp: python      urllib 真实下载
                  (puppeteer blocked, 改用 urllib + Referer)
mcp: trash       中间文件清理

下一次想试试把 Sonnet 4.5 接进来跑长任务——4 小时能压到 2.5 小时，token 账单能再砍 30%。下一篇写。

— 怪招本 #001 · 2026-06-21