一下午让 AI 出六个设计方向,solo dev 的设计终于不用将就
N=1 是 solo dev 的设计天花板
ÉLAN 是我做的一个给创作者的灵感/日记 app。我卡了三周。不是卡在功能,是卡在"感觉"。你打开这 app,心情会是什么?暗房?私密日记?画廊?我有想法但没法验证,因为在 solo dev 的现实里,"验证一个方向"等于"做一个原型",一天一个。
所以我默认 N=1。周二脑子里闪过什么就去写什么。写了什么就留下,因为没别的可比。大多数 solo dev 产品的设计天花板就卡在这——不是审美问题,是样本量问题。你没办法拿现在有的跟"本来可以有的"做对比。
Claude Design 把这个顶棚给我捅穿了。六套主题方向,每套配色、字体、排版语言、手机屏都齐活,大概二十分钟出完。不是同一个想法的六个变体,是六种完全不同的视觉语言。
这篇是我现在用的流水线,它真正擅长的是什么,以及方向锁死之后 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 会花心思在字距和字体搭配上,这种心思 tdd-workflow 绝不会花。
整条流水线
Brief → 六方向探索 → 分析 → 收敛到三个 → 选一个 → 方向 study → HANDOFF.md → big-task ui profile → ship。
第 1 步:Brief
一段话。产品是什么、给谁、你希望它让人感觉到什么。不是功能表。情绪、参照物、取舍。
我给 ÉLAN 的 brief:"给创作者的灵感/日记 app。感觉像胶片暗房——慢、郑重、有触感。用户像冲胶片一样'冲洗'条目。跟 Instagram 无限下拉的相反面。"
一段就够。Claude Design 需要更多信息会自己追问。
第 2 步:六方向探索
Claude Design 出六套主题方向,每套手机屏自带调色板、字体、排版、组件语言。
ÉLAN 六方向主题探索——六种完全不同的视觉语言,各自的调色板和手机屏 mockup
一半对你的 brief 来说是明显的错方向。一半里会有东西。这就是数学。N=6 的散度是 N=1 永远给不了的。这里真正值回 token 的是方向之间的方差——它强迫你看到各选项到底不同在哪。
第 3 步:收敛到三个,带分析
Claude Design 挑出最强的三个,给每个写分析。它的独特点是什么。字体 + 调色板 + 交互语言。取舍是什么。
É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:PASS / FLAG / BLOCK per route。
BLOCK → 自动开 fix task。FLAG → 带具体 concern(间距、颜色、对齐、缺组件)上报给我。PASS → 我不用人眼再看一次。
保真度高的原因是校验 agent 在对像素跟锁死参考。不是"这看起来好看吗"(LLM 几乎永远说好看),是"这跟参考对上了吗"——对不上它会诚实标出来。
ÉLAN 最终实现——Film Stock 方向的生产屏,Cormorant 衬线、黑底暖红、"冲洗 / contact sheet / 灵感卡"流程
Claude Design 真正擅长的
- 早期拓宽搜索空间。 N=1 → N=6 是整条流水线里最便宜的收益。今年我设计产出最大的一次提升就是这一步。
- 同一方向里的视觉自洽。 选了主题之后后续每个屏都属于它。不会风格漂移。
- 机器可读的交接。 HANDOFF.md +
directions/*.jsx是可以 lint、diff、regenerate 的设计规范。传统设计交接住在 Figma 或截图里;这一套住在你 repo 里,跟代码一起版本化。 - 打磨层。
impeccable:typeset、impeccable:polish、impeccable:animate处理最后 20%(字距、字体搭配、微交互)比我这种非设计背景的自己做要好。
它不擅长的
- 替你选。 别觉得它会帮你做决定。能把六个收到三个。不能告诉你三个里哪个对你的品牌。品味还是你的。
- 真正原创的美学。 Claude Design 重排它见过的设计空间。不会发明一个新的视觉运动。大多数产品无所谓;要做真正有视觉原创性的产品还是得找真设计师。
- 含糊的 brief。 输出质量等于 brief 质量乘以一个系数。"做得好看点"你会得到六个"还行"。"胶片暗房、慢、有触感、跟无限下拉相反"你会得到六个真的在探索这个空间的方向。
想对你说的
如果你是 solo 或小团队在做 UI,整条流水线里最大的杠杆在第 2 步——六方向探索。它把第一直觉的偏见打掉,给你便宜的替代品。后面(HANDOFF.md、big-task ui profile、Playwright verify)都有用但都是边际改进。说白了第 2 步才是那个能让你上一个台阶的。
代价是一个好的 brief。第 1 步之前能花二十分钟把"产品应该让人感觉什么"讲清楚,第 2 步能帮你赚回二十小时。
延伸阅读:
- 上一篇 两个月,我把 AI 工作流推倒重来了四次 ——
big-task是什么、为什么要分 Tier 3 GSD-lite。 - ÉLAN 产品系列:ÉLAN 开发手记。