我让 claude 一下午出了六个设计方向
ÉLAN 是我做的一个给创作者的灵感/日记 app。这个项目卡了我三周，不是卡在功能上，是卡在「打开这个 app 应该是什么感觉」这件事上。是暗房的感觉？私密日记的感觉？还是画廊的感觉？想法我有，但没法验证——solo dev 的现实是，验证一个方向就等于做一个原型，一个原型大概要一天。
所以大多数时候手上就只有一个方案。周二脑子里冒出什么就去做什么，做出来了就是它，没有别的版本可以比。我感觉大多数 solo dev 产品的设计上限就卡在这，审美倒是其次，主要是样本量不够：你永远只有一个方案，没法拿它跟「本来可以做成的样子」去比。
claude design 解决的就是这个问题。六套主题方向，每套的 palette、字体、排版、手机屏 mockup 全都有，大概二十分钟出完。而且这六套之间差得很远，是六种完全不同的视觉语言，不像同一个想法换了六组参数出来的东西。
这篇讲我现在在用的这条流程，它真正擅长什么，以及方向定下来之后 big-task 的 ui profile 怎么接着往下走。
claude design 是什么
先说清楚，它不是一个独立产品。还是同一个 claude code session，还是同一个模型，区别全在 skill 栈上：design-consultation、design-md、frontend-design，加上 impeccable:* 一整套（animate、colorize、distill、extract、harden、normalize、onboard、polish、typeset、critique、bolder、quieter、delight）。skill 换了，指令的语气换了，它干活的方式就跟着换了。
用起来会感觉像个独立工具，是因为这套 skill 在调教上强调的是审美、品味、品牌表达这些东西，不是吞吐量。impeccable:typeset 会认真去调字距和 font pairing——tdd-workflow 是绝对不会管这种事的。
整条流程
大概是这样：写 brief → 出六个方向 → 收敛到三个（带分析）→ 我自己选一个 → 把选中的方向展开做 study → 落成 HANDOFF.md → 交给 big-task 的 ui profile → ship。
从 1 个方案发散到 6 个方向、再收敛到 3 个决选、选定 1 个、最后锁进 HANDOFF.md 的设计漏斗流程
第 1 步：写 brief
就一段话：产品是什么、给谁用、希望它让人感觉到什么。功能列表不用写，写情绪、参照物、取舍这些。
我给 ÉLAN 写的 brief 是这样的："给创作者的灵感/日记 app。感觉像胶片暗房——慢、郑重、有触感。用户像冲胶片一样'冲洗'条目。跟 Instagram 无限下拉的相反面。"
一段话就够了，它觉得信息不够会自己来追问。
第 2 步：出六个方向
claude design 会出六套主题方向，每套都带自己的 palette、字体、typography 和组件语言，直接画成手机屏。
ÉLAN 六方向主题探索——六种完全不同的视觉语言，各自的调色板和手机屏 mockup
出来的六个里，一般有一半对你的 brief 来说明显不对，另一半里会有东西。这很正常。六个方向的用处主要在散度：它们之间差得够开，摆在一起你才看得清每个选项到底差在哪。这种散度你自己一天做一个原型是永远攒不出来的。
第 3 步：收敛到三个，带分析
接下来它会从六个里挑出最强的三个，给每个写一份分析：独特点是什么，字体加 palette 加交互语言长什么样，取舍是什么。
ÉLAN 三方向文本分析——Film Stock（方向 A）、Chiaroscuro（方向 B）、Field Notes（方向 C）的字体、色板、交互签名和取舍拆解
这一步大概帮我省了两周的时间。三个方向各自的分析摆在一起，你会被迫去看它们到底不同在哪，看明白了才谈得上选。
ÉLAN 三个决选方向手机屏并排——Film Stock / Chiaroscuro / Field Notes 各三张代表屏
第 4 步：自己选一个
claude design 能把六个收到三个，但三个里选哪个，它替不了你。这一步靠的是你自己的品味，它给不了。
ÉLAN 我选了 A，Film Stock：暗黑电影质感、打字机字体、暖红色。它跟「暗房」这个 brief 对得最直接，而且这个隐喻能自然往下延伸——用户有一「卷胶卷」，条目可以「冲洗」，有 contact sheet 视图，长文编辑器就是暗房氛围。
B 是 Chiaroscuro，从黑暗中升起的光；C 是 Field Notes，旅行手账。都不弱。最后选 Film Stock，是因为它的隐喻延伸到每一个屏的可能性最大，我比较有信心它不会做到第一张 mockup 之后就撑不住。
第 5 步：方向 study
选完之后，claude design 把选中的方向展开成详细的多屏设计：一个方向、多个屏，视觉上完全自洽。
ÉLAN Film Stock 方向完整 study——Undeveloped / Developing / Fresh Prints 三张手机屏的冲洗流程，Cormorant 字体、暗房调色板、contact sheet 交互
这一步实际上是在压测这个隐喻能撑多远。设置页能不能用 Film Stock 的语言做？空状态呢？错误状态呢？搜索页呢？如果隐喻会在第 7 个屏塌掉，宁可现在知道，不要等实现完了才发现。
ÉLAN 这个隐喻撑住了。设置页变成「冲洗偏好」（ISO、曝光），空状态变成「未冲洗的胶卷——今天去拍点什么」，错误状态变成「漏光——这卷损坏了」。
第 6 步：HANDOFF.md
方向定下来之后，落成一个 markdown 文件，把整个设计系统装进去：字体 scale、色板 token、组件行为、动效规则、每个屏的像素级布局。另外还有 directions/*.jsx——参考屏直接以 React 组件的形式存进 repo。
这一步的意义是，下游所有环节——big-task 的 ui profile、Playwright verify、code review——都从 HANDOFF.md 和 directions/*.jsx 里读。「这个屏应该长什么样」这个问题，从此只有一个答案源。
big-task 接手
然后在 ÉLAN 的 repo 里开一个新 session，big-task 的 Phase 0.0 会检测到三个东西：
components-ui（有 components 目录 + Tailwind + Radix）design-ref（HANDOFF.md 存在）playwright（依赖里有）
检测到之后自动路由到 ui-project profile：强制走 Tier 3 GSD-lite，跳过完整 GSD 的那套仪式（.planning/ 那堆 meta 产物），实现任务走 superpowers:subagent-driven-development 的两段 review。
Phase 2g 的 verify 是把设计真正锁住的那一环。HANDOFF.md、directions/*.jsx、Figma PNG 都在的情况下，big-task 会强制跑视觉验证，流程是这样的：
- 起 dev server。
- Playwright 把每个改过的 route × 每个主题变体都截一张图，存到
docs/reports/{phase}-visual/。 - 每张 PNG 派一个 subagent 并行去看。ÉLAN 是 12 个 route × 2 个主题 = 24 张 PNG，主线程不碰原图，每个 subagent 读
{screenshot_path, design_ref_path}，回一个{route, verdict, concerns}，不超过 200 token。 - 主线程聚合成一个 verdict matrix，每个 route 一个 PASS / FLAG / BLOCK。
BLOCK 会自动开 fix task；FLAG 带着具体的 concern（间距、颜色、对齐、缺组件）报给我；PASS 就不用我再看一眼。
这套验证靠谱的原因是，校验 agent 是在拿像素跟锁定的参考对。它回答的不是「这个看起来好不好看」——你问 LLM 好不好看，它几乎永远说好看——它回答的是「这个跟参考对没对上」，对不上它会老老实实标出来。
视觉验证机制：Playwright 把每张截图分派给一个并行 agent，各自拿像素比对锁定的参考屏，汇总成 PASS/FLAG/BLOCK 矩阵
ÉLAN 最终实现——Film Stock 方向的生产屏，Cormorant 衬线、黑底暖红、"冲洗 / contact sheet / 灵感卡"流程
claude design 真正擅长的，和它做不到的
第一是早期把搜索空间拉开。从一个方案到六个方案，这步花的成本在整条流程里是最低的，但我今年设计产出上最大的提升就是它。
第二是同一个方向内的视觉自洽。主题选定之后，后续每个屏都属于这个主题，不会做着做着风格漂了。
第三是交接是机器可读的。HANDOFF.md 加 directions/*.jsx 是可以 lint、可以 diff、可以 regenerate 的设计规范。传统的设计交接住在 Figma 或者截图里，这套住在 repo 里，跟代码一起进版本管理。
第四是打磨层。impeccable:typeset、impeccable:polish、impeccable:animate 负责最后那 20%——字距、字体搭配、微交互——我这种没有设计背景的人自己弄，肯定不如它。
边界也很清楚。它不会替你做选择：能把六个收到三个，但没法告诉你三个里哪个适合你的品牌，这个判断还是得你自己出。
真正原创的美学它也做不出来。claude design 做的是把它见过的设计空间重新排列组合，它不会发明一个新的视觉运动。大多数产品这无所谓；你要做的是视觉上真有原创性的东西，那还是得找真设计师。
还有一个：brief 含糊是硬伤。你跟它说「做得好看点」，你会拿到六个「还行」；你跟它说「胶片暗房、慢、有触感、跟无限下拉相反」，你会拿到六个真的在探索这个空间的方向。brief 写得多具体，出来的方向就有多具体。
最后说一下我的判断。solo 或者小团队做 UI，这条流程里杠杆最大的就是六方向探索那一步，因为它直接解决样本量的问题，你不用再赌第一直觉了。后面的 HANDOFF.md、big-task ui profile、Playwright verify 都有用，但属于边际改进。
代价就是你得写一个好的 brief。动手之前花二十分钟，把「这个产品应该让人感觉到什么」讲清楚，后面六方向那步大概能帮你省回二十个小时。反正我现在新项目都是先把 brief 写了再说。
延伸阅读：
- 上一篇 两个月，我把 AI 工作流推倒重来了四次 ——
big-task是什么、为什么要分 Tier 3 GSD-lite。 - ÉLAN 产品系列：ÉLAN 开发手记。
