Claude Design 用对了，设计师能少熬很多夜

你可能也经历过这种日常：

• 你出一版稿 → 丢给工程师 → 对方实现一半回来说“做不出来/不太像” → 你再改 → 再丢回去
• 一周开三次评审，结论永远是“感觉不对劲”
• 同一个产品线，页面风格越做越散，像拼多多混搭（别笑，真常见）

Claude Design 真正值钱的地方，不是“帮你画 UI”，而是把风格一致性和协作链路给你重做一遍。

下面这套打法，照着做就能落地。

1）别急着出稿：先用 1 小时搭出你的“AI 设计系统”🧩

很多人一上来就让 Claude 生成页面，结果每次风格都不一样。你越用越烦。

正确姿势：先让 Claude 学会你们的审美和规范。

你要准备的材料（越具体越好）

把这些丢给 Claude（能用链接/文件就用，别口述）：

• 代码库里的 UI 组件（Button、Input、Modal、Table…）
• 设计稿（Figma 页面、组件库、典型业务页面）
• 品牌素材（Logo、色板、字体、插画规范、语气文案）
• 竞品参考（你们想对齐的“那种质感”）

让 Claude 产出的目标

• 一套 UI Kit（颜色、字体、圆角、阴影、间距、组件变体）
• 页面布局规则（栅格、卡片、列表、空状态）
• 可复用的 Prompt 模板（你之后每次生成都用得上）

可直接复制的提示词（搭系统用）

你是我们的产品设计系统维护者。请基于我提供的代码组件、设计稿、品牌素材，总结并输出一套可执行的 UI Kit 规范。要求：

• 输出：颜色（含语义色）、字体、字号层级、间距体系（4/8 规则等）、圆角/阴影、组件规范（按钮/输入框/弹窗/表格/标签）
• 把规则写成“可检查清单”，方便评审
• 给我 3 个示例页面（列表页、详情页、设置页）的结构模板

为什么这一小时很值

你后面每次让 Claude 出页面，它会自动套你们的体系。

你会明显感到：

• 少返工
• 少“像不像我们家产品”的争论
• 新人上手更快

团队要全面推开？可以花 1～2 周把系统沉淀成版本化资产（比如 v1/v2），思路不变：规范沉下去，复利会自己冒出来。

2）别再玩“设计→开发→返工”的接力赛：同屏共创才爽🤝

以前的链路像接力：你交棒出去，再把锅背回来。

更高效的方式是：

• 设计师 + 工程师开会
• 同一块画布上看着 Claude 生成
• 边聊边改
• 会议结束就能开工

你会看到的变化

• 工程师当场说“这个组件我们现有库里有/没有”
• 设计师当场调整结构，别等到一周后再打回
• 方案更贴合实现成本，吵架次数直接下降

一场会敲定一个页面，下班时间就回来了。

3）大改用聊天，小改用评论：别拿锤子拧螺丝🔧

很多人用 Claude 的效率低，是因为工具用反了。

用“聊天”的场景（结构级变化）

适合这种：

• 深色模式/主题切换
• 页面布局重排
• 新增一个设置面板
• 一口气出 3～5 个方向做对比

你要的是“整体思路 + 结构方案”。聊天更快。

用“评论”的场景（细节微调）

适合这种：

• 按钮 padding 改小一点
• 颜色换成品牌主色的 600
• 输入框改成下拉菜单
• 文案换成更短的

评论的优势是“指哪打哪”，模型不容易跑偏。

经验口诀：结构改动问聊天，像素级改动点评论。

4）反馈别用情绪词：Claude 吃的是“可执行指令”🎯

“看着不对劲”“不够高级”“有点怪”这种话，只会让模型瞎猜。

你想让它改得准，反馈就要像给工程师提 issue。

把模糊反馈改成可执行

• ❌ “这个表单怪怪的”

• ✅ “字段间距改为 8px；Label 颜色用灰 600；输入框高度统一 40；错误提示行高 16”

• ❌ “按钮不够显眼”

• ✅ “主按钮用品牌蓝 600；hover 用 700；按钮文字改 14px semibold；左右 padding 16”

一个超好用的反馈模板

请只改我下面列出的点，别自作主张动其他部分：

• 间距：____
• 字体：____
• 颜色：____
• 组件：____
• 文案：____

这句“别自作主张”很救命。

5）Connector 接起来：让 Claude 读懂“你们到底在吵什么”📎

你在会议里听到一堆吐槽：

• “这个流程太绕了”
• “找不到入口”
• “字段太多填到心态爆炸”

把会议纪要、用户反馈、工单、埋点结论接到 Claude，让它做综合脑力活。

一个很实用的工作流

• 你把吐槽会议纪要 + 关键数据（转化、流失点）喂给 Claude
• 你去接杯咖啡
• 回来就有一份成型的解决方案 Deck：问题归因、改版方案、风险点、推进节奏

提示词（让它产出能拿去讲的 Deck）

基于我提供的会议纪要与数据，请输出一份 10 页以内的改版方案 Deck：

• 现状问题（用原话引用吐槽，标注频次）
• 根因分析（流程/信息架构/认知负担/缺少反馈）
• 方案 A/B/C（每个方案：目标、改动点、影响范围、开发成本预估）
• 风险与回滚策略
• 验证指标（转化、时长、错误率、客服工单等）

你把精力留给判断和取舍，别把时间耗在整理材料上。

6）关键时刻要手工：品味这关，模型替不了你🎨

有些活儿，Claude 能给方向，但别指望“直接封神”：

• 新图标
• 核心插画
• 产品命名
• 品牌形象、主视觉

原因很简单：这类东西拼的是你的判断。

更靠谱的用法是让 Claude 做“扩写”和“发散”，你做人类该做的事：

• 定标准
• 做选择
• 承担审美责任

建议的分工方式

• Claude：给 20 个方向、拆解风格参考、补齐命名语义
• 你：挑 1～2 个方向深挖，亲自打磨到能上线

7）挂代码要克制：别把整个 monorepo 拖进去💥

把整个 repo 丢进去，常见结局：

• 浏览器卡死
• 上下文被无用文件污染
• 模型输出开始胡言乱语

正确挂法（够用就行）

• 只挂目标组件的文件夹或 package
• 排除：.git、node_modules、构建产物、无关业务模块
• 额外补一份说明：组件入口文件、使用示例、关键约束

一个“挂代码说明”小模板

• 目标：改造 SettingsPanel 的信息结构与交互
• 入口：packages/ui/src/settings-panel/index.ts
• 依赖：Button、Select、FormItem
• 约束：必须兼容现有 props；不允许引入新依赖

Claude 看到这些，会少走很多弯路。

加餐 1）同一个想法开 3 个 Chat：平行探索才快🚀

别在一个对话里来回拉扯。

直接开三个：

• Chat A：保守改（低成本、快上线）
• Chat B：激进改（结构重排）
• Chat C：灵感流（竞品风格、不同信息架构）

各跑 10 分钟，你再合并精华。

这比你在一个线程里“再来一版、再大胆一点、又太大胆了”效率高太多。

加餐 2）Leader 要重做审查流程：从“人做、人审”变成“Claude 做、人审”🧠

流程不改，工具白买。

以前你审的是“人的产出”；现在你审的是“模型批量生成后的筛选与对齐”。节奏完全不一样。

推荐的团队节奏

• 设计产出从“做一版”变成“一次出 5 版”
• 评审从“讨论稿子”变成“用检查清单快速淘汰”
• 把时间留给：目标是否对、取舍是否合理、风险是否可控

一份能落地的评审清单（直接照抄）

• 是否符合 UI Kit（颜色/字体/间距/圆角）
• 信息层级是否清晰（标题、摘要、行动点）
• 主路径是否最短（关键操作不超过 3 步）
• 空状态/错误态/加载态是否齐全
• 组件是否复用现有库（避免新造轮子）
• 埋点与指标是否可验证

避坑清单：这些雷踩一次就够了⚠️

• 把“感觉不对”当反馈（模型只能猜你心情）
• 不做设计系统就直接跑页面（越跑越散）
• 小改也用聊天（容易牵一发动全身）
• 一股脑把 repo 全挂进去（卡爆 + 污染上下文）
• 评审还按老节奏走（产出变多，审查不升级就会崩）

你可以从今天就开始的 30 分钟小练习

• 挑一个你们产品里最常见的页面类型（比如“列表页”）
• 把现有设计稿 + 组件代码 + 色板喂给 Claude
• 让它总结 UI Kit + 给 3 个列表页结构方案
• 用评论把按钮、间距、字号微调到一致

做完你就会明白：Claude Design 的爽点，不在“画得多快”，在“风格对齐 + 协作链路缩短”。