ENZH

同一套 AI 设计流水线,三个产品跑出三种形状

📊 幻灯片

上一篇 把 Claude Design + big-task 流水线写成线性的:brief → 六方向探索 → 选 → HANDOFF.md → ship。纸面上就长这样。实际跑起来,同一套流水线在三个产品上跑出了三种完全不同的形状。起点状态和 ship 约束都不一样。

三个例子。同样的工具,三种形状。


产品 1:ÉLAN——空地起楼,要铺得开

起点状态:没 codebase。没现成视觉语言。只有一段话的 brief——给创作者的日记 app——加上直觉说它应该慢而有触感。

流水线形状:探索步(第 2 步)和方向 study(第 5 步)最重。上游一个都不能省——没约束把你拉向某个方向,探索就得铺得够宽。

上一篇讲的形状。六方向探索 → 收到三个 → 选 Film Stock → 方向 study → HANDOFF.md → big-task ui profile。

ÉLAN 三个决选方向——Film Stock / Chiaroscuro / Field Notes——每个都带完整的字体、色板和样本屏ÉLAN 三个决选方向——Film Stock / Chiaroscuro / Field Notes——每个都带完整的字体、色板和样本屏

贵在哪:第 4 步(选)。三个方向都成立,花了半天才定下来。决定本身半天,支撑决定的探索二十分钟。比例是对的——探索便宜,判断才是付真钱的东西。

big-task 在这儿做了什么:ÉLAN 的 repo 一旦有了 HANDOFF.md + directions/*.jsx + Playwright,Phase 0.0 自动识别 ui-project。每个 UI phase 强制走视觉验证——Playwright 截图 + 每张 PNG 一个 subagent 并行。24 张 PNG 分给 24 个 subagent,主线程只做 verdict matrix 聚合。


产品 2:识川——活 app,按类目一个个迁

起点状态:app 已经上线。初版 UI 凑合能用,七个产品类目(冥想、占卜、产品摄影……各自有怪毛病)漂移得厉害。品牌 DNA 成形了一半,还没锁死。

流水线形状:跳过探索。方向已经定了(东方静思、衬线重、大地色板)。没定的是这个方向在七个类目之间怎么展开。第 5 步(方向 study)最重——但 study 是按类目,不是按方向。

识川方向 study——类目级视觉语言的三种变体,手机 mockup 展示各方向怎么处理内容摄影、文字、导航识川方向 study——类目级视觉语言的三种变体,手机 mockup 展示各方向怎么处理内容摄影、文字、导航

为什么形状不同:一次 ship 一次颠覆式重设,现有用户会被劈伤。类目系统是迁移单位——一次一个类目,每个都走 Playwright 验证,每个作为独立 phase ship。

所以流水线长这样:

  1. 用 Claude Design 定视觉 DNA(一个方向,不是六个)。
  2. HANDOFF.md 装品牌级 token(字体、色板、动效)。
  3. 七个类目,每个跑方向 study,生成类目专属的 directions/category-X/*.jsx,在 big-task 开一个 phase。
  4. big-task Phase 0.0 识别 ui-project,走 Tier 3 GSD-lite,类目级 Playwright 验证。
  5. ship 这个类目。观察。进下一个。

贵在哪:不是设计本身。是七个类目之间的一致性。每个类目都有自己的遗留布局怪癖。保持品牌自洽,同时尊重类目 UX——实际做起来比 ÉLAN 那种空地场景难多了。impeccable:normalize 在这真的值回票价——审计跟设计系统的漂移,标出哪个类目的屏走偏了。

big-task 在这儿做了什么:类目逐个迁移正好是 big-task 的 Tier 3 GSD-lite 针对的场景。3+ task、独立文件、机械工作、已知模式的第 N+1 次应用。Subagent policy 选 parallel-worktree。每个类目一个 worktree,并行 implementer subagent,不互相踩脚。


产品 3:盘盘猫——monorepo,三个并行表达

起点状态:monorepo 多个 surface——Telegram bot、web、admin dashboard、mobile。v1 上线了。v2 重设要在不杀任何一个 surface 个性的前提下统一视觉语言。

流水线形状:探索步(第 2 步)跑,但不是为了方向——为了表达。品牌 DNA 已经锁死(东方玄学 / 阴阳 / 中文字体)。跨 surface 变化的是这个 DNA 的表达。所以跑三个并行表达:纸本(warm cream)、夜观(indigo + 墨金)、现代(off-white + 玉色)。不是三个竞争方向,是同一种视觉语言的三个主题。

盘盘猫 v2 重设——三个并行品牌表达:纸本(暖米白)、夜观(靛蓝 + 墨金)、现代(浅白 + 玉绿),代表性手机屏盘盘猫 v2 重设——三个并行品牌表达:纸本(暖米白)、夜观(靛蓝 + 墨金)、现代(浅白 + 玉绿),代表性手机屏

为什么形状不同:不同 surface 面向不同受众。占卜流程要庄重感(夜观)。onboarding 要亲切(纸本)。分析/dashboard 要清晰(现代)。硬逼一个表达覆盖所有,其中两个 surface 必错。但这些 surface 又得让人感觉是同一个产品,共享品牌 DNA 干的活。

Notion 和 Linear 处理暗黑/浅色模式类似思路——只不过这三套模式是按 surface 角色选,不是按用户偏好。

盘盘猫 landing page——阴阳主导的 hero,深色调,东方字体语言。夜观表达的代表盘盘猫 landing page——阴阳主导的 hero,深色调,东方字体语言。夜观表达的代表

big-task 怎么跑的:monorepo 探测改变路由。Phase 0.0 看到多个 app 加上 design-refdocs/redesign-v2/ 里的 HANDOFF.md)。Supabase schema + 支付依赖让 tier 比 ÉLAN 或识川高一级。盘盘猫走的是 Tier 4(full GSD)通过 gsd-autonomous——重设跨 monorepo 多个 app,有跨 phase 依赖(设计 token 包 → 组件库 → surface app)。

Phase 4(8 轨清理)也在 monorepo 层面跑——每个 package 一组并行 agent。Subagent 派发策略在验证阶段更关键:4 个 surface × 3 个表达 × 每个 ~8 route = ~96 张 PNG。主线程聚合 96 个结构化 verdict 没问题;主线程读 96 张原图必爆。每张 PNG 并行派发,这是底线。

盘盘猫 v2 完整 app 屏概览——多个流程(首页 / 占卜 / 解梦 / 八字 / 卦象 / 分析)跨纸本表达一致呈现盘盘猫 v2 完整 app 屏概览——多个流程(首页 / 占卜 / 解梦 / 八字 / 卦象 / 分析)跨纸本表达一致呈现


三个产品跑的其实是同一条流水线,只是起点状态不一样,流水线该弯的地方不同。空地阶段要宽探索,活 app 要迁移纪律,monorepo 要多表达并行。big-task Phase 0.0 负责识别产品形状然后路由。识别对了,下游自然适配。


延伸阅读:

← PrevNext →

© Xingfan Xia 2024 - 2026 · CC BY-NC 4.0