当 AI 当设计师，
它给自己定的规矩。

系统提示词（System Prompt）是 AI 在每次对话前都会看到的"工作守则"。 Claude 用来做设计的这份提示词，并不是简单的"请你画得好看一点"， 而是一份非常具体的设计师工作指南——包括它怎么提问、 怎么探索、怎么落地 HTML，以及哪些事情绝对不能做。

逐条读它，本质上是在做三件事：

• 看一份大厂设计协作 SOP——可以直接借鉴到你团队的协作流程里。
• 学习"为 AI 设计 prompt"——它把 CRITICAL、IMPORTANT、Do/Don't 反复用到了极致。
• 理解 AI 的能力边界——知道它在意什么、害怕什么，才能写出更准的需求。

这一句定下了所有后续规则的基调：Claude 把自己定位成多领域设计师， 只是恰好用 HTML 作为通用画布。所以：

• 给它 PRD，它会想"这是一份要做成 deck 的脚本"。
• 给它截图，它会想"这是哪个产品、什么 UI 系统、什么版式"。
• 给它一个交互需求，它会想"这是 prototype，要可点击、要落到组件库"。

它反对"通用网页风"——也就是你在十几个 SaaS 落地页上看到过的那种： 英雄区 + 三栏特性 + 客户 logo 墙 + CTA。如果你需要的不是网页，就别让它给你网页。

提示词把 Claude 的工作拆成了 6 步，几乎可以原样套用到任何"AI + 设计"协作流程里：

1. 理解需求 · Understand

   对模糊的新工作主动追问：输出形式、保真度、要几版、约束、用到的设计系统/UI Kit/品牌。

2. 探索资源 · Explore

   把设计系统的完整定义和相关链接文件全部读一遍，再开始画。

3. 规划 · Plan / Todo

   把任务拆成 Todo，长任务用列表追踪。明确顺序后再动手。

4. 建结构 · Structure

   建好工作目录，把要用到的资产复制进来。不要直接引用其他项目的资源。

5. 收尾 · Finish

   调用 done 把文件交给用户、检查能否干净加载；有报错就修，干净了再交给验证 agent。

6. 极简总结 · Summarize

   EXTREMELY BRIEFLY——只讲需要注意的事项和下一步，不复述自己做了什么。

提示词反复强调一件事：好设计不会凭空生出来。 它要求 Claude 在动手之前，必须主动找：

• 用户的代码仓 / Figma / 截图
• 已有的 UI Kit、设计系统
• 同领域的现有产品

找不到？——主动问用户要，而不是自己脑补一套。

在动笔之前，Claude 被要求先把自己要用的系统说出来： 排版规则、配色、版式节奏、组件清单、留白…… 目的不是装专业，而是逼迫自己用一套语言贯穿全文。

关于颜色

• 优先用品牌或设计系统里的颜色。
• 不够用时，用 OKLCH 调出与现有色板和谐的新色，而不是凭空发明颜色。

关于字号

• 1920×1080 的幻灯片：正文 ≥ 24px，理想要更大。
• 打印文档：≥ 12pt。
• 移动端可点击区域：≥ 44px。

关于版式

• 1–2 个背景色就够了，多了反而散。
• 用全出血图、不同色块的章节首页等手段制造视觉节奏。
• 文字密集的页面要主动加图，没有素材就放占位。

Claude 有一个专门的工具叫 questions_v2，专门用来在新任务开始前提问。 关于"什么时候问、什么时候不问"，提示词给的判断非常具体：

提问清单（给你的 prompt 工程参考）

• 先确认起点和上下文：UI Kit / 设计系统 / 代码库——没有就让用户附上。
• 问要不要做多版本，针对哪些维度做。
• 问 tweaks 想探索什么：UX 新颖性？视觉？动画？文案？
• 问用户最在意：流程、文案、视觉哪一项。
• 再加 4 条以上"问题特异性"的问题。
• 合计至少 10 条。

Tweaks 是工具栏上的开关，开启后会在原型里露出可调控件：颜色、 字号、间距、文案、版式、特性开关……由设计师自己决定要露什么。

持久化的小巧思

可被 Tweaks 调整的默认值，要放在一对特殊注释之间。 Host 会把它当成可改写的 JSON——用户拨完滑块后能直接落盘，刷新也不丢：

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#D97757",
  "fontSize": 16,
  "dark": false
}/*EDITMODE-END*/;

1. 必须钉版本 + integrity hash

不能写 react@18 这种半浮动版本，也不能省略 SHA384 完整性校验。 这是为了让原型在任何时刻都能稳定加载，不被 CDN 的细微更新打死。

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"
        integrity="sha384-..." crossorigin="anonymous"></script>

2. 不要给 styles 起重名

3. Babel 多文件不共享作用域

每个 <script type="text/babel"> 都是独立作用域。 想在文件之间共享组件，显式挂到 window：

// 在 components.jsx 末尾：
Object.assign(window, {
  Terminal, Line, Spacer,
  Gray, Blue, Green, Bold,
});

4. 文件不要超过 1000 行

太长就拆。把若干小的 JSX 文件用 <script src> 串到主入口。 编辑大文件既慢又容易出错——这一条对所有"AI 协作"代码都成立。

5. 不要用 scrollIntoView

它会把整个 web 应用顶飞。需要滚动用其它 DOM 方法。

"AI Slop" 指的是 AI 输出里那种一眼能看出来"这是 AI 做的"的烂俗痕迹。 Claude 给自己列了一张劝退清单，几乎每一条都精准命中现在 LLM 出图最让人尴尬的点：

Claude 的收尾流程被切分得很干脆：

1. done(path) — 把文件推到用户的 tab，等加载完成， 返回控制台错误。有错就修，再调 done。
2. fork_verifier_agent() — 干净后再 fork 一个验证 agent，让它在后台用自己的 iframe 截图、跑 JS、查布局。 通过则静默，有问题才叫醒你。

固定尺寸的内容（Decks 等）

演示文稿、视频这类固定尺寸内容，必须自带 JS 缩放， 按 1920×1080 设计、外层全视口 stage、用 transform: scale() 等比缩放， 上下两侧黑色 letterbox。导航控件要放在缩放层之外，否则在小屏会失效。

幻灯片不要手工撸，直接用 deck_stage.js 起步组件—— 它已经把缩放、键盘/触屏导航、页码、speaker notes 跨窗口通信、 localStorage 续看、打印成 PDF 全做好了。

12 张卡片，对应 10 章里的关键约束。卡片左上是它所属章节的编号， 点击会平滑跳回那一节并短暂高亮。