一句话 vs 渐进式

一次性输入模糊描述 → 反复修改。分阶段澄清需求 → 一次到位。

核心理念

不是要求 AI 读懂你的心思，而是引导 AI 与你共同澄清需求。

前两步：输入

直觉描述 — 用日常语言说出感觉。需求澄清 — AI 问你选择题，你选 + 补充。

后两步：输出

确认原则 — AI 总结设计规范，你检查修正。精准输出 — 转化为可执行的专业提示词。

三个要点

• 用日常语言描述感受，不必担心不够专业
• 诚实说"不太确定"，这是正常的
• 主动请求 AI 问你问题，而不是自己想

初始提示模板

"我想要一个 [风格] 的 [页面类型]，
看起来 [感觉描述]，
但具体细节我不太确定。
请你问我一些问题，
通过我的回答逐步细化。"

确认三步

• 检查 AI 的总结是否符合预期
• 修正不准确的部分
• 补充遗漏的细节

输入阶段演练

直觉：说出感觉。澄清：选择题 + 补充 — 每个维度先选后补，不确定的跳过。

输出阶段演练

确认：检查 AI 总结的设计规范。输出：拿到可直接使用的专业提示词。

分析这句话

• 用日常语言（"现代简约"、"干净清爽"）
• 诚实承认不确定性（"不太确定"）
• 给了 AI 足够的起点来提问

常见错误

• 一开始就描述技术细节（"用 flex 布局"）
• 堆砌形容词（"要高端大气上档次"）
• 不敢说"不确定"

AI 的总结

• 颜色：深灰文字 + 浅灰蓝背景 + 蓝色强调色
• 间距：宽松型，大量留白确保阅读舒适
• 布局：单栏居中，约 75 字符/行
• 响应式：移动优先，小屏体验最佳
• 视觉：轻微阴影 + 简单悬停动画 + 无衬线字体

你的检查

• 颜色方向对吗？需要调整吗？
• 留白程度符合预期吗？
• 有没有遗漏的需求？
• 有没有互相矛盾的地方？

风格维度表

颜色、间距、布局、响应式、视觉特征 — 五个维度拆解任何风格。

提示模板

风格定义模板和布局细化模板 — 复制即可使用，快速启动渐进式对话。

模板一：风格定义

"为了让 CSS 精准匹配 '[风格]'，
请帮我澄清以下维度：

1. 颜色系统（典型配色）：
   [ ] 极简黑白灰
   [ ] 单色系 + 1 个强调色
   [ ] 自然中性色
   补充说明：_________

2. 间距与留白（呼吸感）：
   [ ] 紧凑型  [ ] 宽松型
   补充说明：_________

...（更多维度）"

模板二：布局细化

"基于 '[布局类型]'，
请进一步明确布局细节：

1. 响应式策略：
   [ ] 移动优先
   [ ] 桌面优先
   补充说明：_________

2. 断点设置：
   [ ] 小屏 <768px
   [ ] 中屏 768-1024px
   [ ] 大屏 >1024px
   补充说明：_________

...（更多细节）"

降低认知门槛

你不需要知道 minmax() 或 aspect-ratio，只需描述你的感觉和期望。AI 帮你翻译成专业术语。

捕捉隐性需求

通过专业问题引导，发现你没意识到的需求——比如"最大内容宽度 75ch"对可读性的重要性。

建立共同语言

逐步将模糊感受转化为专业术语，减少你和 AI 之间的误解。

提高结果质量

每个决策点都经过确认，结果更精准。从"反复修改 5 次"变成"几乎不用改"。

风格拆解

选择一个你喜欢的网站（Apple、Medium、Notion 等），用 5 个维度描述它的风格：颜色系统、间距系统、布局结构、响应式行为、视觉特征。

模拟对话

假设你想创建一个"复古风格"的个人作品集网站，模拟渐进式提示的四个阶段：写出初始描述、预期的问题、你的回答、期望的提示词。

实战应用

用渐进式提示方法，让 AI 帮你生成一个页面的 CSS 样式。记录四步对话的过程，对比一句话提示的结果差异。

它为什么存在

2026 年 4 月 Anthropic 发布 Claude Design——LLM 不再写废话、直接交付设计成品。但它闭源、收费、云端、锁模型。OD 用同样的"产物优先"思路，但没有任何锁定。

核心反差点

OD 不内置 Agent——你笔记本上最强的 coding agent 已经装好了。OD 做的是把它接进 skill 驱动的设计工作流，每一层都 BYOK（自带密钥）。

技能库（31 个）

按 scenario 分组：design / marketing / operation / engineering / product / finance / hr / sale / personal。每个 Skill 是一份 SKILL.md，规定生成流程与输出规则。

设计系统（129 套）

2 套手写 starter + 70 套产品级（Linear、Stripe、Vercel、Notion、Apple、小红书…）+ 57 个 design skill。每套含确定性 OKLch 色板 + 字体栈 + 布局规则。

组合使用的威力

先跑一次 Design System Mode 生成 ./DESIGN.md；之后所有 Prototype / Deck / Template 都会自动读取它——这是 OD 的"一次定义、处处复用"模式。

如何选 Mode

不必手动选——直接打字。prompt 含"slide/deck/ppt"→Deck；含"design system/tokens/brand"→DS；含"template"+模板名→Template；其余默认 Prototype。

会话内缓存

正文按 session 在内存中缓存，切换 Skill 或 DS 只需从 daemon 获取一次，后续 send 复用同一份组合。

热重载

dev 模式下 DESIGN.md / SKILL.md 文件变化会被监听，下次 send 自动用新版本——方便迭代设计系统。

环境要求

Node.js 24 + pnpm 10.33。建议提前装好任一 Agent CLI（Claude Code / Codex / Gemini CLI 等）；一个都没装也能用 BYOK API 模式兜底。

三条命令

corepack enable
pnpm install
pnpm tools-dev run web

然后打开终端输出的本地 URL（默认 localhost:3000）。

Comment 模式的条件

只在 Agent adapter 支持 surgicalEdit === true 时可用（如 Claude Code 的原生 tool loop）。点击捕获 [data-od-id]，生成精确到元素的编辑指令。

Slider 的条件

由 Skill 在 frontmatter 声明 od.parameters。滑块拖动只重发参数值，不走完整 chat——交互成本最低、响应最快。

为什么用文件而非数据库

artifact.json 元数据 + history.jsonl 操作日志 → OD 能不用数据库就重建 artifact 树。可直接 git add ./.od/artifacts/，在 PR 里 review 设计。

SQLite 持久化的内容

projects / conversations / messages / tabs / 用户 templates。明天再开应用，todo 卡片和打开的文件都还在原位——会话状态不丢。

场景 A · 产品落地页

Skill: saas-landing
DS: Stripe
"做一个面向开发者 API
 的产品落地页，强调低延
 迟和全球边缘节点"

场景 B · 投资人演示

Skill: guizang-ppt
DS: 自选
"种子轮 pitch deck，
 强调市场大小、产品演示、
 团队介绍、融资用途"

场景 C · 后台 dashboard

Skill: dashboard
DS: Linear
"用户增长后台，含 DAU/MAU
 折线图、留存热力图、
 Top 5 渠道表格"

场景 D · 移动端引导

Skill: mobile-onboarding
DS: Warm Editorial
"三屏引导：splash、
 价值主张、登录。
 强调温暖友好的语气"