你在左边用对话提需求，它在右边的画布上直接生成能点、能跑的 UI / 原型 / 幻灯片，产物是标准网页代码。本指南把"怎么用得好、怎么不踩坑"讲清楚。
先把定位和边界想清楚，省得用错地方白折腾。
用对话生成可点击的 UI / 原型 / 幻灯片 / 一页纸，输出标准网页代码（HTML/CSS/JS）。它是"出方案、出原型"的加速器——不是替代 Figma 做像素级精修，也不是做后端真产品的工具。
需付费版（Pro / Max / Team / Enterprise），目前以网页端为主（claude.ai/design）。企业版默认关闭，要管理员在后台开启（具体菜单名以当前控制台为准）。没有手机端。真正的功夫在"会描述"上——它执行你能精确描述的东西，模糊的审美只会换来平庸结果。
其余都是细节；这三条是 80% 的收益所在。
这是决定成败的第一杠杆。不搭，出来的就是一眼假的"AI 味"（千篇一律字体、紫白渐变、整齐卡片）；搭了，它会拿你的真实品牌组件来生成，并在给你看之前先自检一遍是否符合规范。几乎所有评测都把这条列为第 1 优先动作。
在画布上直接改颜色 / 字号 / 间距，或用"评论""调节滑块"——这些不调用模型、不花额度、也不会重渲染。只有结构性、概念性的大改才用对话。这是日常省钱的最大杠杆。
agent 本身偏极简、"宁缺毋滥"，它默认给你的是一版强草稿和占位级文案，不是成品。直接拿生成文案上线 = 上线 AI slop。
最高杠杆，值得第一次就单独花一节时间做。
提取质量取决于素材质量。只给 logo 和色板，它只能瞎猜；给真实代码库 / 成品落地页 / 完整品牌 PDF / 现成的 deck，它才能抽出真正的组件样式、间距、字体气质。素材乱，产出就乱——先把素材整理干净再喂。
例如指到 /packages/ui。指整个企业大仓会让浏览器卡、还浪费额度去翻无关代码；超大仓建议从 Claude Code 那边接入。
1~2 种字体、1~2 个背景色，并定义好交互状态（hover / 报错 / 空状态 / 加载）。agent 明确回避被用滥的字体（Inter / Roboto / Arial / Fraunces），你给它一个有主见的字体 + 主色 + 鲜明强调色，正中它下怀；状态定义好，它会在所有屏一致套用。
用"设计一个设置页""设计一个仪表盘"这种通用 prompt 跑一两次，看系统到底有没有守住品牌，再打开"已发布"开关让全员自动继承。
组织级配置一次，大家自动继承；可以给不同品牌维护多套系统；用专门的管理角色锁住标准系统、限制编辑权限，防止品牌走样。
怎么跟它"说"，第一次就说对。
这是所有来源里被重复最多的提示词公式。缺信息它会主动追问——它追问时，一次性答详细，别"随便看着办"。
这一节直接决定你烧多少额度。
| 改动大小 | 用什么 | 花额度吗 |
|---|---|---|
| 结构 / 概念大改 （改布局、加版块、换策略） | 对话 (chat) | 花 |
| 针对某元素的定点改 （这个按钮加内边距、换图标） | 评论模式 | 花，但小 |
| 极小调整 （换色、字号、对齐、间距、改文字） | 画布直接编辑 / 滑块 | 不花 |
文档转视觉，几个白捡的技巧。
设计→代码这条路，正是你现在所在的环境。
你们 Hi Tutor 是安卓 Kotlin / XML 项目，Claude Design 输出的是网页代码、不出原生 Kotlin。所以对你们而言它适合用来快速出 UI 概念稿 / 可点击原型给评审，而不是直接产安卓代码。（这也是之前 /design-sync 在本仓库跑不起来的原因——它要的是网页前端设计系统。）
按下游用途选格式，避免来回返工。
| 格式 | 用途 | 保真度 |
|---|---|---|
| HTML | 交互演示 / 给研发交接 | 最好 |
| Canva | 营销精修（可双向编辑） | 好 |
| PPTX | 开会 / 投资人 | 一般（字体会替换） |
| 只读评审 / 归档 | 一般 |
它很烧，提前规划。
它跑在很强的视觉模型上、消耗大。各来源给的具体百分比互相不一致、且会随计费策略变——别把任何具体数字当准，记住"复杂多屏活儿很贵"这个定性结论即可。
到额度上限后可能不报大警告、直接转成付费超量继续跑。团队铺开前先去用量看板确认计费方式、按需开好超量额度，并早点跟财务对齐。生成中途"暂停"是检查点不是报错——它停下来等你确认方向，免得在错方向上烧 token。
提前知道，少踩一个是一个。
| 坑 | 后果 / 绕法 |
|---|---|
| 跳过设计系统 | 一眼假的"AI 味" + 大量纠偏迭代浪费额度。第 1 大坑，先做设计系统。 |
| 啥都让 AI 重画 | 白烧 token。小改自己做。 |
| 直接发布生成文案 | 那是占位级，务必重写再发。 |
| 低估烧钱速度 | 复杂 session 很贵，且可能静默转付费超量。 |
| 喂垃圾素材 / 指整个大仓 | 浏览器卡 + 提取不准。喂真代码 / 成品，指 UI 子目录。 |
| 拿它当 Figma / 全栈工具 | 没后端、不能像素级精修、协作弱、不出原生图片视频。定位成"快速起步，下游精修"。 |
| 评论消失了 | 把评论文字粘到对话里。 |
| 保存失败 | 从 Compact 视图切到 Full 视图重试。 |
| chat upstream error | 在同项目里开个新对话标签恢复。 |
| 改到后面没进步 | 头几版进步明显，之后边际递减——该停就停，导出到 Canva / Figma / 代码做最后精修。 |
照着做，从开通到交付。
流传很广但证据弱或会过期，别被带偏。
"省 20~30% 额度""详细 prompt 有 66% 可用率""改到第 5 轮停滞"以及各种"烧掉 X% 周额度"——都来自单个观点博客、无方法论、且会随产品迭代变化。记结论、忘数字。
是"单独的每人周额度"还是"和 chat / Code / Cowork 共用一个池"——来源说法冲突，较新的来源倾向"共用池"。以你当前用量看板为准，别基于某个说法做财务规划。
这条说得过死。实际上通过 Claude Code 的 /design、/design-sync 和 MCP 是有程序化接入的（你此刻就在用），只是没有面向画布 UI 的公开 REST API。
具体的模型版本号、企业后台菜单名、连接器清单、限时赠送额度——变动快，用时以官方当前页面为准。
本指南基于 22 个来源 + Claude Design 设计 agent 真实系统提示词交叉校验。