灵感卡加到 68 张，导航跟着重做了一遍
68 张灵感卡重新分类
这篇讲一个 12 小时的 session。起因是修 bug，攒了几天的五个小毛病，都不难，想着修完就去干别的。修到一半来了个用户需求，能不能加旅行目的地的灵感卡，香港、日本、东南亚那种。这一天下来，ÉLAN 从 31 张灵感卡加到 68 张，我用并行 agent 编排出 37 个卡定义、37 张封面、444 张样本图，浏览分类系统也顺带推倒重来了一遍。
做卡本身不难，麻烦的是发现：卡一多，用户在里面找不到自己想要的那张了。这篇主要讲这个。
先把五个 bug 修了
碰新功能之前，我一般会先把手上的债清掉。五个问题，具体是这样的：
1. 文案生成在 web 端跑了两遍。 服务端已经通过 sse 并行把文案生成好了，移动端正确地消费了这个流，web 端直接无视服务端的返回，自己又调了一遍。同样的活干了两次，API 白白烧了好几天。
2. gemini 有两条内容拦截路径。 这个坑我踩了两次才搞明白。promptFeedback.blockReason 是 prompt 本身被拒，还没开始生成；candidate.finishReason === 'SAFETY' 是输出触发了安全过滤，已经生成了一部分。这两个都得查。之前只查了第一个，结果有些被拦截的输出就悄无声息地返回了空结果，连个错误提示都没有。
3. 微信内置浏览器。 很多现代 API 它不支持，blob url 直接崩，js 引擎还有自己的脾气。我最后的决定是不兼容：检测微信 user-agent，弹一个模态框解释情况，给一个「复制链接到浏览器打开」的按钮。有的东西真的不值得修，绕开就行了。
4. 图片太大。 gemini 只出 png，一张 3-5 MB，移动网络上用户要等很久。服务端用 sharp 转成 jpeg（quality 85），一下压到 600KB-1MB，视觉上基本看不出差别。
5. zustand 的闭包陷阱。 react 的经典坑：useEffect 把 zustand store 的旧引用捕获住了，effect 跑起来读到的是上一次渲染的值。改成在 effect 内部用 getState() 读最新值就行。这种 bug 麻烦在于 95% 的时候是正常的，剩下 5% 你完全想不到是它。
五个 bug 花了半天。然后开始搞卡。
需求很宽泛，先派 agent 去调研
用户的需求就一句话：旅行目的地——港澳台、东南亚、日本、云南、西藏、新疆、欧洲。七个地区，每个地区好几个场景，每个场景要一整套灵感卡定义：场景配置、服装、pose、调色、文案。手写 40 多张卡不现实，所以我先派了四个并行的调研 agent，每个负责一块地区：
- 日本 — 神社、庭园、街景、时令景点
- 东南亚 + 港澳台 — 热带海滩、殖民建筑、夜市、天际线
- 国内 — 云南梯田、西藏高原、新疆沙漠、张家界
- 欧洲 — 地中海小镇、巴黎咖啡馆、瑞士雪山、冰岛
每个 agent 返回一份排好优先级的场景清单，附带一个 AI 生成可行性评分（1-10 分，衡量现在的模型处不处理得了这个场景）。
调研结果挺有意思的。自然风光生成得很好，梯田、薰衣草田、高山湖泊，干净的几何线条、一致的光线，没有会出错的文字和精细细节。标志性建筑也行，鸟居、圣托里尼蓝顶、吴哥窟剪影，形状辨识度高。但密集文字和招牌不行：涩谷十字路口、道顿堀、香港霓虹街，凡是画面里有大量文字的场景，AI 生成出来的字符就是乱码，一眼穿帮，这些直接砍了。人群也不靠谱，夜市、庙会、街拍这种需要逼真背景人群的场景容易出怪异感，只留了人物相对独立的构图。
40 个候选场景，筛完留了 37 个（可行性 7 分以上）。加上原来的 31 张，ÉLAN 就有 68 张灵感卡了。然后真正的问题来了。
68 张卡塞进去，导航崩了
31 张卡的时候，原来的四分类标签系统没问题：远方的光、城市漫游、日常诗意、时令之美，每个标签 7-10 张卡，浏览、挑选，很顺。68 张卡塞进去就乱了。
我的第一反应是按地区分标签：日本 | 东南亚 | 欧洲 | 国内 | 港澳台，用地理做组织原则。看起来很合理，新卡本来就是按目的地做的。准备动手实现的时候我停下来了，因为有三个问题：
第一，桶大小不均。国内 12 张卡，港澳台只有 3 张，有的标签点进去很丰富，有的空荡荡。
第二，相同氛围的卡被拆开了。巴厘岛海滩、三亚海滩、普吉海滩，三张情绪几乎一样的卡分散在三个地区标签里，想找海滩照的用户得翻三个标签才看得全。
第三个是关键：用户根本不是按地理去想的。打开 ÉLAN 的时候，脑子里想的不是「我要一张日本照片」，想的是「我要一张度假感的照片」「一张都市夜景」「一张有文化感的」。也就是说，用户的心智模型是氛围优先，不是地图优先。按地区分导航适合旅行预订 app，因为你已经决定去哪了；灵感浏览不是这样，你是在找一种感觉。
用户逛灵感卡时想的是氛围而不是地理，按地区分的导航和用户心智对不上
双轴方案
最后的方案是两层。主轴是氛围标签，问的是「你现在想要什么情绪」：
| 标签 | 里面是什么 |
|---|---|
| 度假放松 | 海滩、泳池、度假村晨光——一切说"我在放松"的场景 |
| 自然秘境 | 雪山、梯田、森林、高原——原始自然之美 |
| 都市光影 | 天际线、天台、霓虹、街景——城市能量 |
| 文化体验 | 寺庙、茶室、传统建筑——厚重与底蕴 |
| 精致生活 | 咖啡馆、画廊、高级餐厅、SPA——日常的高级感 |
| 时令限定 | 樱花、红叶、初雪——限时场景 |
副轴是地区芯片，可选的叠加筛选：
🇯🇵日本 | 🌴东南亚 | 🇭🇰港澳台 | 🇪🇺欧洲 | 🇨🇳国内
芯片排在氛围标签下面，点一下就筛出当前氛围里的特定地区，再点取消，默认显示全部地区。这样用户可以浏览「度假放松」，同时看到巴厘岛、三亚、普吉、圣托里尼，因为氛围是一样的；也可以点 🇯🇵 只看日本的度假场景；或者完全不管地区，纯按心情浏览。
主轴是氛围标签、副轴是可叠加的地区芯片，同一种氛围的卡聚在一起再按地区收窄
原来的 31 张卡自然就吸收进了新分类。「远方的光」按实际氛围拆到「度假放松」和「自然秘境」，「城市漫游」整体进了「都市光影」，没有硬塞的。
氛围优先把前面三个问题都解掉了：每个氛围标签 8-14 张卡，桶是均匀的；所有海滩卡在一个标签里，不管哪个国家；浏览流程跟用户实际的想法对上了——打开 app，选心情，想缩小地区就缩小。
这个分类讨论大概花了 30 分钟，实现花了一个小时。我觉得这半小时比写代码的一小时值钱多了，分类不想清楚，68 张卡用户根本逛不动。
37 张卡具体怎么生出来的
分类定了，接下来把 37 张新卡真做出来。每张卡需要三样东西：
- 卡定义 — 场景配置、服装、pose、调色、文案，大概 200 行结构化数据
- 封面图 — 浏览时用户看到的缩略图
- 样本图 — 每张卡 12 张（4 张棚拍 + 4 张自拍 + 4 张拍立得），展示效果
也就是 37 个定义 + 37 张封面 + 444 张样本图，一个 session 里出完。
卡定义。 37 张卡分给 4 个并行 agent：日本 8 张、东南亚 + 港澳台 10 张、国内 11 张、欧洲 8 张。每个 agent 拿到 MuseCard 的 TypeScript 接口定义、三张现有卡做风格参考、分配到的场景清单，输出完整的卡定义文件，四个加起来大概 7000 行结构化数据。其中一个 agent 写到一半撞了 token 上限，11 个卡定义一次性输出太长了，拆成两个子 agent、每个写 5-6 张就好了。这里有个编排经验：就算 context 窗口很大，一次生成几千行结构化数据也是有天花板的，得提前规划。
封面图。 37 张封面用 gemini API 生成，视觉语言跟现有封面保持一致：干净、有向往感、不加文字。原始输出是 png（gemini 只有这一个选项），平均一张 2 MB，批量转成 webp 之后降到 150 KB 左右，压了 13 倍，浏览网格在手机上一下就加载出来了。
样本图。 444 张，37 张新卡乘 12。按卡分批生成，每批用这张卡的完整 prompt 系统去跑参考面部图像。
QC。 产量上来之后，质量控制就是真问题了。最大的失败模式是面部漂移：生成的脸偏离参考照片，出来的图不像用户本人。我用 gemini flash 搭了一个 QC 管线，每张生成的样本跟参考面部图像做对比，flash 打一个 1-10 的相似度分，低于 7 分的标记出来重新生成。第一轮通过率 95.2%，444 张里标出来 21 张；重新生成之后到 97% 以上，剩下几张是极端角度或者重阴影的边缘案例，那种漂移是躲不掉的。
反正这一天就是我一个人，加 claude code 的并行 agent，加 gemini 的图像生成，把 37 个卡定义、37 张封面、444 张样本图全部编排出来了。这也是我在超级个体里讲的那个状态。生成这块 AI 完全搞得定，质控也可以自动化掉，得人来的是决策：选哪些场景、怎么分类、往什么审美方向推。
用户怎么逛，得重新想
目录一天涨了 3.8 倍，加卡这件事本身很容易，费心思的是用户怎么在 68 张卡里逛。
氛围优先这个分类没有被规划过，不在任何路线图上，就是卡一多、原来的导航撑不住了，硬被逼出来的。要是把 37 张新卡直接塞进老的四分类系统，每个标签 15-20 张卡，用户点进去会直接选择恐惧。内容一扩，导航就得跟着重做，连原来的 31 张卡都跟着受益。
这种事我最近碰到不止一次：一下午能生成 37 张卡，分类却没法一下午想清楚，一般都是内容堆到那了，才被逼着去想怎么组织。回头看这一天，最有用的反而是中间那 30 分钟的分类讨论。修 bug 和生成都是体力活，agent 干得比我快；用户怎么逛这个事，还是得我自己想。
第一篇：不经意的优越感 | 第二篇：架构 | 第三篇：灵感卡设计 | 第四篇：从 Web 到移动端 | 第五篇：衍生品 | 第六篇：发现体验重设计
This post is also available in English.
