Mingyu's Library主页
2026年9月25日

第 37 课:怎么用 Claude Code 做 App UI 设计?——HTML 先行、打破千篇一律、多版对比选稿

📅 2026-09-25 这一课不追新版本(Claude Code 09-24 发布的 v2.1.282 只是一版体验性小修:maxProseWidth 限制宽终端下正文行宽、修了几个扩展思考丢失的 bug,没有值得单独开课的东西),回到大纲里一直空着的模块 C:结合设计与生图做 App。今天讲第 13 课的问题——怎么用 Claude Code 把 App/网页 UI 设计这一步做好,而不是一上来就写代码"赌审美"。 场景还原:你让 Claude Code 直接写一个 SwiftUI 登录页,它十有八九给你一个"白底 + 系统字体 + 蓝色按钮"的模板脸——能用,但放哪个 App 里都长一个样。你不满意,让它"再好看点",它换了个主色,还是那张脸。改了三四轮之后,你开始怀疑是不是 Claude Code 做设计就是不行——其实问题不在模型能力,而在你跳过了"设计稿"这一步,直接让它在 Xcode 里边写代码边"设计",既要编译对又要好看,它自然会往最安全、最没风险的默认审美上收敛。 前置:第 5 课(斜杠命令)、第 16 课(Git Worktree 并行)、第 19 课(Skills 可复用技能)。 来源:Claude 官方博客:Improving frontend design through Skills

技巧 1(基础):先出 HTML 可点击原型,别让 SwiftUI 承担"设计探索"的成本

解决的问题:直接写 SwiftUI 时,每改一版审美都要等编译、等模拟器刷新,一版 3-5 分钟,改十版就是大半小时;而且 SwiftUI 代码里夹杂着设计决策和实现细节,想单独评估"好不好看"很费劲。

Claude 官方博客明确指出,Claude 在没有额外提示时会出现"分布收敛"(distributional convergence)——默认掉进 Inter/Roboto 字体、紫色渐变这类训练数据里最安全的选择。解法不是骂它"没审美",而是把设计探索这一步挪到浏览器可以秒开的 HTML/CSS,等选定风格再落地到 SwiftUI。

Before:在 Xcode 里直接改 SwiftUI,一轮迭代要等编译 + 模拟器,10 版方案改一下午。 After:在终端里让 Claude Code 直接产出一版可以用浏览器打开的 HTML 原型,几秒钟出图,改哪块直接对着截图说。

# 项目根目录起一个 design/ 文件夹专门放原型,不进 Xcode target
mkdir -p design/login-v1

claude "在 design/login-v1/index.html 里做一版登录页的可点击 HTML 原型,
纯 HTML+内联 CSS(不要外部依赖,方便我直接双击用浏览器打开)。
这是一个心理健康记录类 App,目标用户是 25-35 岁女性,
风格要克制、温暖,不要用默认的 Inter 字体和紫色渐变。"

生成后直接 open design/login-v1/index.html(macOS)在浏览器里看效果,一秒刷新,不用碰 Xcode。

📖 官方文档:Improving frontend design through Skills · frontend-design Skill 源码

技巧 2(进阶):显式点名 frontend-design 技能,用"设计维度"提示而不是"再好看点"

解决的问题:"再好看点""换个风格"这种反馈,Claude 只能靠猜——它大概率只会换个主色调,结构、字体、动效全都不变,你陷入"换色循环"。

官方博客给出的关键方法论是在对的"海拔高度"提示:不用给死颜色 hex 值(太具体,限制发挥),但要点名具体的设计维度——字体、主题基调、动效、背景层次——逼它做出有辨识度的选择,而不是停留在"再调整一下"这种模糊反馈。Claude Code 里自带的 frontend-design 技能(插件形式,或直接在提示里点名)就是把这套维度检查表变成可复用的技能文件。

Before:「这个设计有点普通,能不能更好看一点」→ Claude 换个渐变色收工。 After:按维度提出要求,一轮就能拿到有明确风格标签的版本。

claude "用 frontend-design 技能重做 design/login-v1/index.html:
- 主题基调:日式极简 + 一点点手写感(不要科技感、不要 SaaS 风)
- 字体:避开 Inter/Roboto/Open Sans/Lato 等默认字体,选一个有个性的无衬线字体组合
- 背景:用低饱和度的分层渐变或纹理,不要纯色块
- 动效:输入框聚焦、按钮点击要有轻微的 CSS 过渡,不要生硬的状态切换
把设计决策(字体名、主色 hex、间距基准)列在 HTML 顶部注释里,方便我后续复用。"

如果你的账号/团队装了社区维护的设计技能包(如 frontend-design toolkit 系列),也可以在提示里直接点名对应技能名称触发。

📖 参考:Claude Code Frontend Design Toolkit(社区整理)

技巧 3(进阶):一次性并行出 3 个风格迥异的版本,而不是来回改一个版本

解决的问题:在同一个会话里反复"改这版",Claude 会倾向于在已有方案上做小修小补(锚定效应),你很难跳出第一版的框架看到真正不同的可能性。而多开几个会话手动管理又容易搞混哪个版本改到哪了。

用第 16 课讲过的 git worktree 给每个设计方向开一条独立分支,三个终端窗口并行跑,方案之间互不干扰,最后并排打开三个 HTML 文件对比,比"一个方案改十轮"更容易看清真正想要的方向。

Before:一个会话里连续说"换个风格""再换一个",Claude 在同一个思路里打转,方案趋同。 After:三个独立 worktree + 三个独立提示词,方案在设计空间里真正分散开。

# 为三个设计方向各开一条 worktree(基于 lesson 16 的用法)
git worktree add ../app-design-editorial -b design/editorial
git worktree add ../app-design-neubrutal -b design/neubrutal
git worktree add ../app-design-soft      -b design/soft

# 三个终端分别跑,风格提示词故意拉开差异,避免互相趋同
cd ../app-design-editorial && claude "做一版编辑排版风格(杂志感、大留白、衬线字体标题)的登录页 HTML 原型"
cd ../app-design-neubrutal && claude "做一版新粗野主义(Neubrutalism:硬边框、高对比色块、无圆角)风格的登录页 HTML 原型"
cd ../app-design-soft      && claude "做一版柔和插画风(圆角、暖色调、手绘感图标)的登录页 HTML 原型"

三版都出来后,用浏览器分屏或者简单拼一个对比页并排看,再拍板选一版,比反复修改单一版本快得多、也更不容易陷入"局部最优"。

📖 官方文档:Git Worktrees(Git 官方) · 复习第 16 课「Git Worktree 并行」

技巧 4(进阶):把选定方案写进 CLAUDE.md,变成项目的"设计系统单一事实源"

解决的问题:方案选完之后,下一次让 Claude Code 加新页面,它又开始自由发挥——因为它不知道你上次选定的字体、配色、间距规则是什么,每个新页面都要重新"猜审美"。

把选定版本 HTML 注释里的设计决策(技巧 2 里让它记录的字体、主色、间距基准),整理成 CLAUDE.md 里的一个「设计系统」章节。这样以后无论是让它做新页面,还是把 HTML 转成 SwiftUI(下一课会讲怎么让转换不走样),Claude 都会先读这份规范,而不是每次重新生成一套新审美。

Before:每加一个新页面就要重新描述一遍"不要默认字体、不要紫色渐变",提示词越写越长。 After:CLAUDE.md 里有固定的设计系统章节,新提示词只需要一句「遵循 CLAUDE.md 里的设计系统」。

<!-- 追加到项目根目录 CLAUDE.md -->
## 设计系统(2026-09-25 选定,来自 design/app-design-editorial 方案)

- 字体:标题用 "Fraunces"(衬线,editorial 感),正文用 "Inter" 的替代品 "Manrope"
- 主色:#2B2A28(近黑,不用纯黑)· 强调色:#C9603C(陶土橙)
- 背景:低饱和度米色 #F5F1EA 为主,避免纯白/纯黑背景
- 间距基准:8px 网格(8/16/24/32/48)
- 圆角:统一 12px,不用全圆角(pill 形状)
- 动效:所有交互过渡 180ms ease-out,禁止跳变

> 之后所有新页面 / SwiftUI 视图,都要先读这一节,风格与既有页面保持一致;
> 如需偏离,先在这里更新规范再生成代码,不要只在单次提示词里临时说明。

之后新增页面时只需要：claude "参照 CLAUDE.md 里的设计系统,做一版忘记密码页的 HTML 原型",风格延续性会明显更好。这也是第 15 课「设计到代码怎么不走样」要用到的基础——先有稳定的设计系统,才谈得上像素级验收。

📖 官方文档:CLAUDE.md 项目记忆(复习第 1 课) · 社区实践:claudedesign-to-swiftui(HTML 原型转 SwiftUI 的社区插件)

今日实操(15-20 分钟)

挑你现有项目里任意一屏(登录页 / 详情页 / 设置页都行),按技巧 1-4 走一遍完整流程:

  1. 在 design/ 目录下用 HTML 出3 个风格明显不同的原型(技巧 1+2+3,可以不开三个 worktree,单会话里连续要求三版但每版明确指定不同的字体/主题/动效方向也可以)。
  2. 浏览器里对比三版,选一版,把它的字体、主色、间距、圆角、动效规则写进 CLAUDE.md 的「设计系统」章节(技巧 4)。
  3. 用新的一句提示词(只引用 CLAUDE.md,不重复描述细节)生成同一 App 的第二屏,检查风格是否延续。

验收标准: - ✅ 三版原型彼此能一眼分辨出不同(字体、主题基调、动效任意两项以上明显不同,不能只是换了主色); - ✅ CLAUDE.md 新增的设计系统章节包含至少:字体、主色/背景色、间距基准、圆角规则四项; - ✅ 第二屏生成时提示词里没有重复技巧 2 里那些设计维度描述,仅引用 CLAUDE.md,且生成结果风格与第一屏视觉上一致(同字体、同色系、同圆角)。

下一课(第 38 课)预告:设计稿到代码怎么不走样?——把 HTML/SwiftUI 设计稿变成可执行的验收标准(截图对比、颜色采样校验)。