OpenDesign
手册

序 让产出不像 AI 做的

Preface

用 AI 做一页设计稿已经不难。难的是让人第一眼看不出它是 AI 做的。

你大概见过那种页面。紫色渐变，居中的大标题，三张一模一样的卡片，每张卡片顶上一个圆角图标。字体是那几款，留白是那个比例，配图是那种光滑的插画。

单看每一处都不算错。合在一起，就是一眼能认出来的「AI 味」。

这本书讲的工具叫 OpenDesign。它的几乎每一个设计，都在回答同一个问题：怎么让产出不长成那个样子。

该问时，先用需求表单问清楚。再套用设计系统，遵守 Craft 准则，生成前先自我批判。PPT 工作坊的十个步骤，也是同一个思路。

它是什么，一句话

OpenDesign 是一个开源的设计 Agent 工作空间（Apache-2.0）。你写一份需求，由 Agent 按你选的设计系统生成真实的 HTML 文件。干活的可以是你机器上已装好的编码 Agent。比如 Claude Code、Codex、Cursor 等。也可以是官方的托管模型。文件在沙箱里预览，再导出成网页、PDF 或演示稿。

它自己不是模型，也不是编辑器。详细的拆解在 §01。

全书四段

Part 1 让你装好、接上 Agent，跑出第一个产物。再搞懂决定成品气质的两样东西：需求表单和设计系统。

Part 2 是全书的主线练习。官方有一份「AI PPT 工作坊」教程，十步做出一份能拿去汇报的演示稿。我把它完整重写了一遍。每一步都讲清楚，它在防哪一种 AI 味。

Part 3 讲怎么让好结果稳定出现：技能与插件、Craft 准则、导出与成本。其中 §10 是全书最该精读的一节。

Part 4 是七个案例，从落地页到 HTML 视频。

怎么用这本书

你的情况	读哪几节
第一次听说，想先装上试试	§01 → §02 → §03
要做一份汇报 PPT	§03 → 整个 Part 2
做出来的东西总有股 AI 味	§04 设计系统 → §10 Craft
想知道花不花钱	§01 → §11
手上有具体的活	直接翻 §12 找最像的案例

关于内容来源

这是一份非官方社区手册。内容来自三处：官方 GitHub 仓库、官网文档、官方 PPT 工作坊教程。

写这本书时，我拿官网 2026 年 9 月 4 日的镜像，和 10 月 13 日的线上现状逐条比对。发现有 18 处说法已经失效，或者本来就有误。几个例子：

• Craft 准则官网现在列的是 11 条，早先写 12 条，多出来的一项只是占位登记
• 官网 quickstart 至今还写着一条 od skill run 命令，但源码里没有这个子命令
• 官网 /faq/ 页至今还说「没有订阅这回事」。但定价页已经明确列出 OpenDesign Cloud 的付费套餐

遇到这类官方自相矛盾的地方，本书以源码和定价页为准，并在正文里点名出处。主要几处见附录 D。

五条编写纪律

价格只用现行定价页，并标日期。 仓库里那份机器可读的 pricing.md 至今没更新，和官网定价页对不上，本书不用它。

会变的数字不写。 GitHub star、贡献者人数、插件精确数量都不写。必须引用时，带出处与抓取日期。官方对「支持多少个 Agent」的说法不一，数字在 21 到 27 之间。本书统一写「20 多个」。

命令只写源码里有的。 文档里写了但源码里没有的命令，一律不收。

官方说法冲突时，点名出处。 无法裁定的，不替官方下结论，让你自己判断。

不编造经历。 书里提到的实测，都写明出处。

从第一个问题开始：它到底是什么，以及它不是什么。

§01 OpenDesign 是什么：把 AI 的默认值换掉的那一层

What Is OpenDesign

它不是模型，也不是编辑器。它是套在编码 Agent 外面的设计工作空间。作用只有一个：别让 AI 交出平均水平。

1.1 一个版本号，和一个问题

2026 年 9 月 24 日，OpenDesign 发布了 v0.24.1。10 月 13 日我核对时，它仍是最新的稳定版。第一版 v0.1.0 发在 2026 年 5 月 1 日。到 10 月 13 日共 38 个正式版本。前后五个多月（来源：GitHub Releases）。

这个速度说明两件事。项目很新，也很活跃。所以本书里凡是按钮文案、默认行为、价格，都带着日期。你手上的版本如果更新，以你看到的为准。

先说问题，再说工具。序里描述过那种页面：紫色渐变，居中大标题，三张一样的卡片。用 AI 做设计稿，最难的不是做出来，而是做出来之后看不出是 AI 做的。

为什么 AI 会交出那个样子？OpenDesign 官网的 Claude Code 指南转述过 Anthropic 的解释。它叫“分布收敛”（2026 年 9 月 4 日的镜像）。意思是网页训练数据里，安全的选择占多数。我的理解是，模型不被约束，就回到统计中心。我没核实 Anthropic 的原话，只当二手转述用。

这个解释我认同，因为它能推出一个可操作的结论。模型缺的不是能力，是约束。谁来给约束，什么时候给，就是 OpenDesign 的全部设计。

这条主线怎么贯穿全书

OpenDesign 的机制，几乎都落在三个位置之一：生成之前、生成之中、生成之后。下表是本书的路线图，来自我对官方材料的归纳。

位置	机制	它拦的是什么	本书
生成之前	需求表单	模型替你猜出来的受众、页数、数据	§03
生成之前	设计系统	配色、字体、圆角取平均值	§04
生成之前	先想清楚说服谁	空话文案	§05
生成之中	Craft 准则	对比度、动效、状态覆盖这类底线	§10
生成之后	自我批判与对照精修	写完才暴露的雷同和失衡	§07、§10

重点看“位置”这一列。三个位置里，我认为生成之前最便宜，生成之后最贵。后面每一节讲的，基本是怎么把力气花在前两个位置上。

官方的 OD Next 策略文件里，有一份默认禁用清单。OD Next 是官方的新一代生成策略，§03 3.1 细讲。这份清单是这条主线最直白的证据。

清单上有这些：紫色渐变，或者每一层背景都铺渐变；拿 Inter 当展示标题；每个标题旁的图标；编造的“快 10 倍”这类指标。这份文件在 v0.24.1 的发布标签里能找到。它和 Craft 准则的异同，见 §10.3。

1.2 它是什么：三样东西，外加你的判断

10 月 13 日，官网首页的主标语译作“第一个协作式设计 Agent 工作空间”。英文原文是 The First Collaborative Design Agent Workspace。README 的标题当时与它一致。早期的标语是另一句，已经换掉，“协作”成了新的主轴。

标语里的词比较虚。拆开看，OpenDesign 本体是三样东西。

• 一个本地服务（daemon）。负责启动 Agent、读写项目文件、提供接口。技术栈是 Express 加 SQLite。
• 一个界面。可以是浏览器里的 Web 界面，也可以是 Electron 打包的桌面应用。两者背后是同一个服务。
• 一套资源库。技能、设计模板、设计系统、插件，都是带说明文件的普通目录，能读，能改，能带走。

它没有第四样东西：模型。README 里有一句原话，“We don’t ship an agent”。干活的 Agent 是你机器上已装好的命令行程序。OpenDesign 在 PATH 里找到它，再启动它。

这句话需要加一个限定。现在 Home 上有三种起步方式：Local CLI、BYOK、Hosted。最后一种是登录 OpenDesign Cloud 用托管模型。所以更准确的说法是：它自己不造 Agent，但可以替你准备好 Agent。三种起步各自怎么回事，§02 一次讲完。

官网 Agents 页把整件事拆成三个角色，我觉得拆得很准。

角色	官网的说法	作者结论
你的编码 Agent	读项目，改文件，响应反馈	干活的手，不用换
OpenDesign	放需求、设计资源和视觉评审的工作空间	递给手的那套规矩
你的判断	选参照物，定什么必须一致，在真实屏幕上验收	谁都替不了，别外包

重点看第三行。官方自己把“你的判断”列成三个角色之一，这很少见。多数工具的宣传页只讲前两样。

后文我会反复回到这一点。需求表单要你回答，设计系统要你挑选，最后的验收也只能你来。OpenDesign 能做的，是把这三个动作安排在正确的位置上。

先认几个词

下面这些名词会在全书反复出现。这里只给一句话定义，细节在后面各节。

名词	一句话	详见
Agent（适配器）	真正生成内容的编码 Agent，如 Claude Code、Codex	§02
需求表单	生成前追问你没说清的事，英文叫 question form	§03
设计系统	以 DESIGN.md 为核心的品牌包	§04
技能（Skill）	带 SKILL.md 的文件夹，规定一类活怎么干	§09
设计模板	可渲染的起点，分原型、演示稿等类型	§09
插件（Plugin）	以 open-design.json 为入口的可移植目录	§09
Craft 准则	与品牌无关的渲染底线，官网现列 11 条	§10
BYOK	自带密钥，直连你选的模型厂商	§02
OpenDesign Cloud	官方托管模型服务，要账号和套餐额度	§11

README 把后四类资源叫作“可组合的四个平面”。插件带可运行的流程；技能带 Agent 的行为；设计模板带渲染蓝图；设计系统带品牌。这个分法我觉得有用，它解释了为什么换一个设计系统，不用重学技能。

别把它和 §09 的“四个抽屉”混了。那是按仓库目录切的另一种分法，见 §09 9.2。

1.3 它怎么出活：从一份需求到一份真文件

官网首页的流程只有四步（2026 年 10 月 13 日抓取）。原文是“Four steps from idea to on-brand work”。

前两步是个人在做，后两步是团队在做。官方把“协作”写进主标语，指的是第三、第四步。原型可以发成分享链接。队友在设计上直接留评论。评论再一次性交回 Agent 去改。

本书的读者多半先过个人这一半。所以我把它展开成更细的流水线，§03 会逐步讲，这里只看形状。

• 你写一份需求，选一个设计系统。
• 如果需求里有没说清的关键事项，Agent 会弹一张需求表单来追问。
• Agent 按技能和设计系统，把文件写进项目文件夹。
• 界面右侧在沙箱里实时预览这些文件。
• 你改，或者让 Agent 改，然后导出。

这里最关键的是第三步。产物是真文件，不是画布上的图层。README 说，产物是真 HTML 和 CSS。可以交给 Cursor、Codex 或 Claude Code。它们能接着把它写成 React、Next 或 Vue。

有一个例外要提前说。README 和 QUICKSTART 的说法是这样。走 BYOK，只填密钥，没有本地 Agent，就没有文件工具。这时模型把完整 HTML 放进一个 <artifact> 块返回。界面再解析出来预览。官网首页 FAQ 说得更直白：你自己的密钥能生成设计，但不能编辑项目里的文件。BYOK 内部到底怎么走，官方文档还有另一种说法，见 §02。

能做出什么

v0.20.0（2026 年 8 月 19 日）起，Home 的创作类型固定为十种。它们是 Prototype、Slide deck、Image、Document、HyperFrames；Website clone、Video、Audio、Live artifact、WebGL。Prototype 下有固定子类。比如落地页、看板（dashboard）、移动端界面。

这十种里，本书重点用到三种。

• Prototype：网页、产品界面、看板。§03 的第一个产物就是它。
• Slide deck：演示稿。Part 2 的十步工作坊全程围绕它。
• HyperFrames：把 HTML 渲染成 MP4 视频。它是 HeyGen 开源的框架，被集成为一等公民，§12 有一个案例。

幻灯片能导出哪些格式，官方两处说法不一致，见 §11.1。PPTX 本书的统一说法是：可编辑，但不保真，发出去前自己打开看。证据见 §08 8.6。建议要用哪个格式，先在你的版本里导一次试试。

1.4 它和你的编码 Agent 是什么关系

README 里有一节叫 Platform Compatibility。它说两条路并存，方向相反。

方向	谁启动谁	典型场景	作者结论
OpenDesign 启动 Agent	桌面应用找到 PATH 上的命令行，用 spawn 启动	在界面里点生成	本书主路径
Agent 调用 OpenDesign	通过技能、命令行和 MCP，由 Agent 去读 OpenDesign 的项目文件	你一直待在终端里	装法见 §02

第二条路的入口是 od mcp install <agent>。装好之后，另一个仓库里的 Agent 可以直接读你本地的 OpenDesign 项目文件。比如样式变量、组件、入口页面。这样每改一轮，不用导出再贴回去。

README 举的用法，只有在 Agent 里说一句话。示例：“用 open-design 生成一个套 Linear 设计系统的落地页”。我没有在自己的机器上试过这条路，这里按官方描述转述。

官网 Agents 页有 22 篇指南。Claude Code、Codex、Cursor Agent 等都在其中。官方对“到底支持几个”的说法互相矛盾。本书统一写“20 多个”，口径见 §02 2.4 与附录 B。

1.5 谁做的，开不开源，花不花钱

这三个问题，官方材料的答案很一致，值得一次说清。

• 谁做的。维护方是 Powerformer, Inc.。官网 About 页说，该公司此前做过 Refly 和 Nexu。2026 年发布了 OpenDesign。GitHub 组织叫 nexu-io。仓库创建于 2026 年 4 月 28 日。
• 开源吗。开源，Apache-2.0。个别内置技能和模板保留自己的许可证。README 点名了三个，都是 MIT。它们是 guizang-ppt、html-ppt、web-clone。
• 花钱吗。分两半。桌面应用免费，配本地 Agent 或自带密钥用，OpenDesign 不另收费。但 Agent 或模型厂商照常计费。另一半是 OpenDesign Cloud，托管模型，按套餐给额度，价格见 §11。

第三条值得多看一眼。官网首页的新 FAQ 和定价页都写明 Cloud 有付费套餐。但官网 /faq/ 页在 10 月 13 日还留着早期的免费口径，和定价页冲突。本书以定价页为准，这类矛盾在附录 D 里有汇总。

项目的写法也有规范。官方规范名是 OpenDesign。Open Design、open-design、OD 这些写法，指的都是它。od 是命令行的名字。搜资料时这几个词都要试。

你的内容会去哪

这是接客户项目的人最先问的问题。官方隐私政策（更新于 2026 年 9 月 2 日）的说法，要分路径看。三条路径的账单对照，见 §11.4。

• 本地 BYOK。隐私政策写的是，项目、提示词、密钥留在本机，直接发给你配置的模型厂商。OpenDesign 不在自己的服务器上代理，也不存储。
• Local CLI。隐私政策没有单独写这一条。官网首页 FAQ 说，提示词和上下文会发给你选的 Agent、模型厂商或 Cloud。
• 走 Cloud。请求经过 OpenDesign 的托管网关，内容会发到上游模型与基础设施商。账号、用量、计费信息会被收集。

产品分析这一项，几处说法不一致。官网首页 FAQ 说默认开启，可以在 Settings → Privacy 关闭。README 说产品分析和会话回放要用户同意，脱敏的安全与可靠性遥测始终开启。

仓库里 v0.24.1 的 PRIVACY.md 写的是默认开启。首次启动会弹出提示，让你选 Share 或 Don’t share。它还写明，开启时有些内容可能发给 OpenDesign 团队做质量评审。内容包括提示词、助手回复、工具输入输出，都经过截断和脱敏。

官方没有解释这和隐私政策里“不收集本地设计内容”的关系。我没有办法替官方裁定。装完之后自己去 Settings → Privacy 看一眼最稳，接客户项目的人更要先看。

1.6 它不是什么，谁该用

说完能做什么，也要说不能做什么。下面四条边界，按官网首页 FAQ 和 README 的原意列出。我认为用之前先看清边界，比用之后再失望划算。

• 它不替你出工程。官网首页 FAQ 明说，把原型变成生产应用，仍然是工程工作。
• 它不是 Figma。没有 Figma 导出，也不是拖拽画布。你改的方式是对话、评论、选中元素直接改。
• 它不保证好看。它保证的是 AI 的默认值被替换，替换成什么，取决于你选的设计系统和你填的内容。
• 它有启动成本。官网首页 FAQ 说，配好本地 Agent 或密钥要几分钟。官方没写明这几分钟是否包含安装 Agent 本身。

10 月 13 日的 README 还把自己定位为“开源的 Claude Design 替代品”。它自述 Anthropic 在 2026 年 4 月发布了 Claude Design。这一句我没有独立核实，官方对比页怎么评价对方，我也不转述。想比较的话，请直接去看两家当前的页面。

那么谁适合用它？我给一个角色定义：从现在开始，你是甲方，同时是评审，Agent 是干活的设计师。你负责讲清要说服谁，挑方向，验收。你不需要会写代码。官网首页 FAQ 对这一点的回答也是不需要，描述需求、选设计系统、在预览里审。

1.7 这一节的结论

• 截至 10 月 13 日，最新稳定版是 v0.24.1（2026 年 9 月 24 日）。项目才五个多月，变化很快，按钮和价格以你手上的为准。
• 本体是本地服务、界面、资源库三样，没有模型。干活的是你的 Agent 或 OpenDesign Cloud。
• 产物是真文件，在项目文件夹里，能交给工程继续写。
• Apache-2.0 开源，维护方 Powerformer, Inc.。桌面应用免费，Cloud 有付费套餐。
• 全书主线：让产出不像 AI 做的。需求表单、设计系统、Craft 准则，分别站在生成前后的不同位置。

下一节动手装。桌面应用和命令行两条路各讲一遍，再讲怎么接上你已经在用的 Agent。

§02 安装，接上你已经在用的 Agent

Install and Connect Your Agent

装软件只要几分钟。要想清楚的是三件事：走哪条起步路线，让哪个 Agent 干活，接上之后它拿到多大权限。

2.1 先选路线：Local CLI、BYOK、Hosted

2026 年 8 月 31 日发布的 v0.21.1，改了一件影响最大的事。不登录也能开始。官方的说法是，直接在 Home 上选 Local CLI 或 BYOK，就能动手。OpenDesign Cloud 仍然保留，需要时再用。

所以到 v0.24.1，Home 上并存三种起步方式。官网首页（2026 年 10 月 13 日抓取）把它们分得很清楚。

路线	谁出模型	要 OpenDesign 账号吗	钱记在哪	作者结论
Local CLI	你电脑上已装好并登录的编码 Agent	不要	你的 Agent 订阅或 API 用量，照旧计费	已经有 Agent 的人首选，本书默认走这条
BYOK	你填写的模型厂商接口	不要	厂商直接向你收费，不消耗 OpenDesign 额度	没有本地 Agent 时的退路
Hosted	OpenDesign Cloud 的托管模型	要，且要有额度的套餐	消耗套餐里的月度模型额度	不想碰任何配置的人

重点看“钱记在哪”那一列。设计任务会花掉你现有 Agent 的额度。官网首页写得明白：本地 Agent 的订阅或 API 用量仍然适用。你已经为哪份订阅付过钱，就先用哪一份。我的判断是，先走 Local CLI 跑通一次，再决定要不要为 Hosted 付钱。

Hosted 的价格和套餐放在 §11。这里只记一条。官方的免费档只覆盖本地 Agent 和 BYOK，托管额度是付费部分。

2.2 装桌面应用，这是最短的路

官网下载页在 2026 年 10 月 13 日写着 v0.24.1，发布于 2026 年 9 月 24 日。这一版在 GitHub Releases 上只有三个安装文件。

平台	安装文件	下载页标注大小	系统要求
macOS · Apple Silicon	DMG	382 MB	macOS 11 Big Sur 或更新
macOS · Intel	DMG	401 MB	macOS 11 Big Sur 或更新
Windows	安装程序（setup.exe）	418 MB	Windows 10 或 11，x64

三个包都在 400 MB 上下。下载页的 MB 其实是 MiB。GitHub 资产的字节数除以 1048576，正好是 382、401、418。按十进制算，三个包是 401、421、438 MB。不影响使用，只是别拿两处数字去对账。

有两处出入，我不替官方裁定。第一，官网下载页和官网首页 FAQ 还写着 Windows 有 portable zip。但 GitHub 上最后带它的是 v0.12.0。从 v0.13.0 起，每个版本只有两个 DMG 和一个 setup.exe。个别版本另附 .sha256 校验文件。第二，Linux 没有预编译包。README 明说只能从源码跑，相关工作记在 issue #4368。

2.3 不想装桌面应用时，还有三条路

桌面应用是推荐路径，但不是唯一路径。下面三条，各适合一类人。

路一：装进你已有的 Agent，不开界面

README 给了一行命令。它把 OpenDesign 作为 MCP 服务，装进你正在用的 Agent。

# 一行装进你用的 Agent（以 Claude Code 为例）
od mcp install claude

# 想先看会改什么，加 --print（只预览，不写入）
od mcp install claude --print

# 等价的 curl 写法：install.sh 是 od mcp install 的一层薄封装
curl -fsSL https://open-design.ai/install.sh | sh -s claude

<agent> 能填的值，README 列了 16 个。比如 claude、codex、cursor、copilot 等。完整列表用 od mcp install --help 查。Claude Desktop 另用 claude-desktop，只在 macOS 和 Windows 自动配置。

§09 讲技能时也会用到 od 命令。先记一个坑。macOS 自带 /usr/bin/od，是八进制转储命令，会盖住 OpenDesign 的 od。装了桌面应用的人，请去 Settings → MCP server 复制片段。那里用绝对路径，不靠裸的 od。

路二：从源码跑

适合想改技能、想加设计系统的人，也适合 Linux 用户。我认为只想出稿的人，用不着走这条。环境要 Node 24、pnpm 10.33.x 和 Corepack。Node 22 不支持，仓库用 engines 字段强制。

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web     # 前台起 daemon 和 web，终端会打印网址

预期结果：终端打印出一个本地网址，浏览器打开就是界面。端口别照抄任何文章里的数字。10 月 13 日的 README 写的是，开发端口默认动态分配，除非你显式传端口参数。官网 quickstart 页示例输出里的固定端口，只能当示意。

想让桌面壳和后台服务一起跑，用不带参数的 pnpm tools-dev。常用的几个子命令是 status、logs、check、stop。第一次跑不通，先 check，比翻日志快。

本书只收源码里有的命令。官网 quickstart 页有一条命令，源码里找不到。这类出入汇总在附录 D。

路三：Docker

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env   # 这行是关键：给服务设访问令牌
docker compose up -d
# 浏览器打开 http://127.0.0.1:7456

浏览器若要求认证，用户名填 open-design，密码是 .env 里 OD_API_TOKEN 的值。7456 是 Docker 路线的端口，和源码路线的动态端口是两回事。

2.4 Local CLI：它怎么找到你的 Agent

QUICKSTART 和官方适配器文档，把检测过程讲得很具体。我压成四步，方便你排错时对号入座。

• daemon 扫描 PATH，外加常见的用户工具目录。
• 对每个已知 Agent 运行版本探测，探测不到就标成“不可用”。
• 如果这个 Agent 声明了登录探测，再查一次登录状态。
• Settings 里分组展示“已安装”和“不可用”，带版本和路径。另有 Rescan 按钮。

QUICKSTART 把入口写成 Models & providers → Local CLI。我对过 v0.24.1 标签里的界面文案。英文界面叫 Models & providers、Local CLI 和 Rescan。中文界面叫“模型与提供商”“本机 CLI”和“重新扫描”。

最常见的坑，也在 QUICKSTART 里。macOS 上，应用若不是从完整的登录 shell 启动，会拿到一份很短的 PATH。你用 npm install -g 或 Homebrew 装的命令行，它就看不到。界面显示“未安装”，你在终端里却能用。办法是让 daemon 所在进程的 PATH 包含那个目录，再点 Rescan。

检测到，不等于登录了

能检测到 Agent，只说明命令存在，不说明它能干活。官方的 Claude Code 指南有一句话，我很认同。光下载 Agent，不能证明连接是通的。

所以更稳妥的做法是，接 Agent 之前，先在终端里确认它自己是通的。

Agent	凭据来源	先在终端确认	作者结论
Claude Code	Anthropic API key，或 Claude 订阅	claude auth status --text	官方排错也用这条
Codex	ChatGPT 登录，或 OpenAI API key	codex login status	两种登录的计费不同，先想好用哪种
其他 Agent	各家不同	以各家文档为准	对照表见附录 B

Claude Code 的命令来自 QUICKSTART 的排错段。Codex 那条来自源码里的登录探测定义。两个指南页都说，OpenDesign 不代理这些凭据。

如果 Claude Code 在 OpenDesign 里一启动就退出，退出码是 1。官方的排错分两步。先在同一个终端环境里跑 claude auth status --text。报 401 或认证错误，就运行 claude，用 /login 登录，退出后重试。有多个 Claude 配置目录的人，要在 Local CLI 设置里填对应目录。

选哪个

选法只有一条：先看你已经在付哪份钱，再看哪个模型更合口味。因为生成会消耗那份额度，切换成本是真金白银。

你的情况	先选	理由
已有 Claude 订阅或 Anthropic key	Claude Code	登录现成，不用再配
已有 ChatGPT 订阅或 OpenAI key	Codex	同上
平时用 Cursor	Cursor Agent	沿用你的 Cursor 账号
什么 Agent 都没有，但有某家的 API key	BYOK	最少依赖
什么都没有，也不想配	Hosted	登录即用，但要付套餐

表里没写的 Agent，不代表不行。官方说法是，Agent 列表是目录，不是排名。

换 Agent 会丢什么

基本不丢。QUICKSTART 有一节叫 Prompt composition。它说每次发送由三层拼成。第一层是基础系统提示。第二层是当前设计系统的 DESIGN.md。第三层是当前技能的 SKILL.md。后两层是文件，由 OpenDesign 拼进去，所以换 Agent 它们照常生效。技能若声明了 Craft 准则，会在第二层和第三层之间多拼一层，见 §09 9.3。

有两点要知道。一是凭据每家一份，换 Agent 要重新登录。二是官方适配器文档写明，OpenDesign 不会在失败后自动换 Agent 重试。某次运行失败，得你自己换一个再发。

“20 多个”是怎么来的

本书写 Agent 数量，统一写“20 多个”。原因是官方自己说了好几个数，多在 21 到 27 之间，数的东西也不一样。完整口径和名单见附录 B.5。

我另外数了 v0.24.1 标签里的 registry.ts。出厂定义是 27 项，其中有 OpenDesign 自家的 AMR。这是我的数法，不是官方的统一答案。

还有一处细节。官方适配器文档说，Gemini 的本地生成运行时已经下线。它只作为 BYOK 厂商和 MCP 客户端保留。我数的 v0.24.1 清单里，确实没有 Gemini 这一项。但官网首页和 quickstart 页仍把 Gemini CLI 列在 Agent 里。两处说法不一致。你要用 Gemini，先看它出不出现在你的 Local CLI 列表里。

2.5 BYOK 与 Hosted：没有本地 Agent 时

BYOK 的配置，官网首页只写了一句。填 API key、接口地址和模型，再运行连接测试。我的建议是连接测试别省。它能在你写第一个需求之前，把密钥和地址的错误挑出来。

README 列的预设有 OpenAI、Anthropic。还有 Azure OpenAI、Google Gemini。本地的有 Ollama、LM Studio、vLLM。另有 Atlas Cloud，以及任意兼容 OpenAI 的接口。v0.24.0 的下拉又加了 Novita AI。

BYOK 有三条限制，都要提前知道。

• 官网首页 FAQ 说，你自己的密钥能生成设计，但不能编辑项目里的文件。要改文件，得用本地 Agent。
• 没有文件工具的运行，会把完整 HTML 放进一个 <artifact> 块里返回，界面再解析预览。
• daemon 默认拦截指向内网地址的接口，防止 SSRF。你要连局域网里的 Ollama 或 LiteLLM，需要用环境变量 OD_ALLOWED_INTERNAL_HOSTS 显式放行那台主机。

密钥存在哪，官方没有给出统一说明。有一点可以确定：media-config.json 只存图像、视频、音频这类媒体生成的密钥，不是所有模型的密钥。它的位置和优先级见 §11.3。

Hosted 最简单。登录 OpenDesign Cloud，用托管模型，不装 Agent，也不管密钥。它的代价是请求会经过 OpenDesign 的托管网关，见 §01 1.5。套餐与额度，见 §11。

2.6 接上之后，Agent 拿到多大权限

这是本节我最想让你读的一段。OpenDesign 在后台以非交互方式启动你的 Agent。没有人坐在终端前按“允许”。所以它必须选一个免确认的姿态。

官方适配器文档的 Authorization boundaries 一节写得很坦白。daemon 把策略执行交给各个命令行。但它的无界面参数，有意选了非交互的权限模式。项目目录是执行根目录，不是统一的沙箱。

Agent	OpenDesign 启动它的姿态	作者结论
Claude Code	--permission-mode bypassPermissions	免确认，没有逐条批准的机会
Cursor Agent	--force，新版本加 --trust	同上
Codex	默认 workspace-write 沙箱，网络开启	四行里限制最多
Codex（Windows、WSL）	danger-full-access	没有可用的系统沙箱，权限最宽

表里四行，我都对过 v0.24.1 标签里的定义文件。Codex 在 Windows 上改用完全访问。源码注释给的理由是，那里的 workspace-write 会拦下所有 shell。设了环境变量 OD_CODEX_SANDBOX=danger-full-access，结果相同。官方文档还列了 Devin、Qoder、Trae、Copilot 等的免确认参数。这里不逐个展开。

同一份文档的结论是，把这些运行当作受信任的 Agent 执行。官方没写明，我的理解是：工作目录只是起点，不是围栏。别指望项目文件夹之外自动安全。

另一头的默认值也值得知道。README 写明，daemon 默认只绑定 127.0.0.1。局域网暴露要显式设 OD_BIND_HOST 和 OD_ALLOWED_ORIGINS。

2.7 验证：三个检查点

连接做好之后，别急着做真正的稿子。我的建议是先用一个几乎不花额度的小任务，把整条链路走一遍。

做一个只有一个按钮的页面。按钮上写“连接成功”，页面其余部分留白。

这一步里你可能遇到一张需求表单。别慌，下一节专门讲它。如果表单出现了，直接用默认值提交就行，这只是验证连接。

走不通的常见症状和做法，在附录 C.2 与 C.3。安装与登录的基本排错，本节 2.4 和 2.5 已经讲过。

2.8 这一节的结论

• 三种起步：Local CLI、BYOK、Hosted。前两种不要 OpenDesign 账号，Hosted 要。
• 桌面应用支持 macOS 11 以上和 Windows 10、11 的 x64。Linux 没有预编译包，走源码。
• 源码要 Node 24。端口是动态分配的，别抄示例里的数字。
• 检测到 Agent，不等于登录了。先在终端确认它自己是通的。
• OpenDesign 以免确认的姿态启动 Agent。专门放一个项目文件夹，别和敏感资料混放。
• Agent 数量写“20 多个”，官方口径自相矛盾，数字以你手上的列表为准。

Agent 接通了，下一节开始真正生成。一次生成要经过哪几步，需求表单出现时为什么不能原样交上去，§03 讲清楚。

§03 一次生成经过哪几步，需求表单弹出来时别原样交上去

One Generation, Step by Step

一次生成不是“点一下就出”。中间可能弹出一张需求表单，官方叫 question form。它是你在 Agent 动手之前，最后一次把真实信息塞进去的机会。

3.1 先看全貌：一次生成的七步

2026 年 9 月 9 日，v0.22.1 发布。它有一条不起眼的改动（来源：GitHub Releases）。在受支持的 Agent 上，有四类任务默认改走 OD Next。它们是原型、幻灯片、营销设计和 HyperFrames 视频。OD Next 是官方的新一代生成策略。设置里的开关叫 Design Harness。想关掉，去 Settings → Labs → Design Harness。

这条改动直接影响本节要讲的内容。表单什么时候出现，问几个问题，问完之后还能不能改。社区教程写于更早，它的说法是生成前一定会先弹一张表。这和现在的源码不一样。我先给全貌，再讲这个出入。

这七步是我对官网首页四步流程、发布说明和源码的归纳，不是官方原话。

步	谁在动	你要给的	作者结论
1 选类型	你	Prototype、Slide deck、Image 等，十种之一	默认已选 Prototype，要做别的得自己换
2 选设计系统	你	一个品牌方向，见 §04	选了，表单会少几题
3 写需求	你	卖什么、给谁、要人做什么	写得越实，表单越短
4 答表单（若出现）	你	它追问的那几件没说清的事	本节重点
5 生成	Agent	什么都不用给	此时再想改方向，代价最高
6 改	你和 Agent	局部调整，或方向调整	两种改法，成本差很多
7 导出	你	选格式	见 §08、§11

重点看第 4 步和第 5 步之间。这是整条流水线上，信息进得去、成本又最低的位置。过了这里，你要么接受 Agent 的假设，要么付出更高的成本去改。

第 1 步：类型不选也行

v0.20.0（2026 年 8 月 19 日）起，Home 的创作类型固定为十种。§01 已列过。新开的输入框默认选 Prototype，已保存的选择优先。v0.23.0（2026 年 9 月 20 日）重做 Home。说明里写到，切换类型时，输入框里的内容会保留。我对过 v0.24.1 的源码，这两点都在。

假如你在 Home 直接敲一句话，没选任何类型。源码里有个隐藏的默认路由技能 od-default。它先猜这是什么活。猜得出就直接往下走。只有两种以上的路线都说得通、选错又会改变交付形态，才弹“选任务类型”的小表单。这张小表单不是需求表单。

不过 v0.24.1 的新 Home 本来就预选了 Prototype。这条路径在界面里什么时候会触发，我没有实测。

3.2 界面：左边看过程，右边看结果

README 的架构图列了对话、文件工作区、预览、设置等几块。生成开始后，界面大致分成两半。

• 左边是对话和过程。Agent 读了什么，写了哪个文件，计划是什么，都在这里滚。
• 右边是预览。文件在沙箱里的 iframe 里渲染，你看到的是真文件的样子。

传统路径下，对话区会出现一张 Todos 卡片。它列出 Agent 的计划，做到哪步就更新哪步。这是源码里的描述。OD Next 下过程怎么呈现，我没有核实。

我的建议是，第一次生成时，把左边看完。你能从中读出它把你的需求理解成了什么，这比盯着结果猜更快。

生成之后怎么改，官网首页写得很具体。选中元素，直接移动、缩放、改字、改颜色、调间距，不用重新生成。队友还能直接在设计上留评论，再把评论一次性交回 Agent。评论、标记这些按钮的具体叫法，§08 的 PPT 工作坊里讲。

3.3 生成之前：两条引擎，同一个原则

生成前到底发生什么，取决于走哪条引擎。我读了 v0.24.1 标签里的提示词文件，把两条路的差别列在下面。哪种运行走哪条，官方没有一张对照表。

我读了同一标签里的 rollout.ts。默认放量的 Agent 有四个。名单是 Codex、Claude Code、OpenCode。再加 OpenDesign 自家的 AMR。默认放量的任务类型是原型、幻灯片、营销设计和 HyperFrames。我的理解是：在名单里、又没关开关的走新的，其余走传统的。

维度	OD Next	传统路径	作者结论
流程	先判路线：Direct Edit 或 Full Plan，一个任务只判一次	先判要不要问，再选品牌分支，再列计划	OD Next 把“先想后做”做成了硬流程
问几题	最多一轮，一到三题	一张表，最多五题	都有上限，所以每题都珍贵
默认值	每题带推荐答案，并说明影响	每题预填推荐值，可原样提交	默认值是 Agent 的推断
问完以后	冻结计划，进入生成，不再提问	可以再出第二张表	OD Next 只给你一次机会
生成后	写入文件即交付，不做事后截图或验收	跑清单自检，再做五维度自评（Philosophy、Hierarchy、Execution、Specificity、Restraint）。四组五维度的区别见 §10.7	OD Next 更依赖生成前的约束

OD Next 的 Full Plan 经过哪几站

官方的编排文件，把一次新建任务切成几站。我只讲和你有关的。

• 读需求。Agent 判路线，起草一份任务档案，把受众、交付物、完成标准写成可检查的条目。
• 预检。它检查输入读不读得到，所选 Agent 的能力够不够，依赖在不在。只查条件，不看成品。
• 问一轮。只有答案会改变范围、方向、交付物，或造成大返工时才问，并且聚成一轮。
• 冻结。定下档案和计划。默认是单个 Agent 直接做。至少有两个独立构建包、且 Agent 的原生子任务支持经过验证，才会选复杂模式。
• 生成。按冻结的计划做，你不用重新提交需求。

注意第二站。预检只查条件，不查成品。这和后面的写入即交付是同一套思路：把功夫放在动笔之前。

另一份运行时能力登记文件也列了这四个 Agent。注释说这只是“初始”描述，能不能启用还要看运行时的能力登记。名单可以用环境变量改。你的版本实际怎样，我没法确认。

两条引擎有同一条原则：只有答案会改变结果时才问。传统路径的原文是，只要需求和上下文已经够做出判断，就跳过表单。局部小改、明确说“直接做”，也跳过。OD Next 更严：本地的、可逆的细节不问，能从已有素材里读出来的也不问。

所以社区教程那句“需求表单不能跳”要读准。它的意思不是每次都有一张表等你填。它的意思是，表出现的时候，别原样交上去。这一点的理由，在 3.5 讲。

3.4 需求表单长什么样

先看它的格式约定，来自传统路径的提示词。我挑和你有关的说。

• 题目因需求而异，不是固定表单。提示词要求删掉你已经答过的，只留会改变结果的。
• 题型有单选、多选、下拉、文本、数字、滑块、日期、颜色、网址、文件、开关等十六种。
• 选择题一般留着自己写答案的口子，字段叫 allowCustom。
• 凡是要你上传参照图、品牌规范、PDF 的，表单里直接带文件上传题。不会让你事后在对话里补。
• 目标是演示稿时，会带一个“讲稿备注”开关，默认开。
• 如果你已经选了设计系统，品牌、方向、主题色这类题会被删掉。

最后一条，把 §04 和本节接起来。设计系统选得早，表单自然短。

仓库的测试夹具里有一份中文的 OD Next 需求表单。文件是 apps/web/tests/fixtures/chat 下的 odnext-clarification-form.json。标题是“销售提案简报 — 30 秒”。它是测试数据，不是某次真实运行的记录，但格式是真的，我拿来拆一下。

题目	选项摘要	它在锁定什么
谁是经济型买家	设计负责人、产品与工程负责人、采购与 IT、CEO	叙事的重心
证据与数据口径	公开信息加明确标注的示意数据（推荐）、我有内部真实数据、只讲定性价值	数字从哪来
篇幅与交付形态	12 到 15 页（推荐）、8 到 10 页、18 到 20 页	结构与篇幅

表单自己的说明写着：不填的项，我会按推荐默认值处理。三道题都带 allowCustom，也就是都留了自己写的口子。

重点看第二行。被推荐的那个默认答案，是用示意数据，不编任何指标。这是个安全的默认值。但它的意思也很清楚：你不告诉它哪些是真数据，真数据就进不来。

怎么提交，怎么跳过

前端源码（QuestionForm 组件）里有几个行为，值得知道。

• 源码注释的说法是，有选项的题要先选一个答案，“下一步”才点得亮。不想答，点旁边的“跳过”。这几个按钮名我对过 v0.24.1 的中文文案，是“下一步”和“跳过”。
• “跳过”会把这一题记成 (skipped) 交给 Agent，注释的原意是让 Agent 拿默认值往下走。
• 整张表还有一个始终可用的整体跳过入口。源码里叫 skipAll，v0.24.1 的中文界面写的是“跳过 · 你来判断”。
• 源码里还有一个 10 分钟的倒计时。到点后表单自动提交，未答的题按跳过处理。界面提示是“倒计时结束后将自动继续”。v0.24.1 对话里的表单组件会传入这个开关。也就是说，表单一出现就开始计时。你把它晾着不管，Agent 也会带着默认值往下走。我没有在桌面应用里实测。

另外，v0.23.0 起，表单在应用重启后仍然可以接着答。你关了窗口也不会丢。

3.5 为什么不能原样交上去

理由有三条，都来自源码，不是我的口味。

理由一：默认值是推断，推断会回到平均

提示词要求每道题预填一个从需求里推断出来的推荐值。目标是你原样提交，也能得到一个合理的成品。注意措辞，是合理，不是对。

这正是序里说的问题。没有你的信息，Agent 只能拿最常见的那一档。受众取最通用的一档，篇幅取最居中的一档。视觉方向，则由它自己挑一个。原样提交，等于把平均值再确认一遍。

方向这一项更具体。传统路径里有一种情况：你选了“帮我挑一个方向”，又没有设计系统。Agent 会从内置的五个方向里自己选一个。官方的标签是这五个。

• Editorial，参照 Monocle 和 FT 杂志。
• Modern minimal，参照 Linear 和 Vercel。
• Human / approachable，参照 Airbnb 和 Duolingo。
• Tech / utility，参照 Datadog 和 GitHub。
• Brutalist / experimental，参照 Are.na 和 Yale。

它选得合理，但那是它的选择。

理由二：只有一轮机会，而且没人替你验收

OD Next 的规则写得很死。Full Plan 最多问一轮，一到三题。答完以后，它只重跑受影响的预检，然后冻结计划。进入生成后，不选新路线，不做新计划，也不再提问。

这一点官方没写明，是我的理解。冻结之后你想换方向，等于开一个新任务，重新走一遍计划。

再加一条。OD Next 有一条写入即交付的规则，原名 ship-on-write。它禁止 Agent 在文件写完后截图、渲染、跑检查来自评。提示词的意思是，质量靠生成时的纪律，不靠事后检查。这意味着事后验收只能是你。

理由三：品牌、真数据、参照物，只有这一条路进得来

传统路径里，品牌分两个分支。你给了品牌规范、参照网站或截图，走 A 分支。它先抽取真实的颜色和字体值，写成 brand-spec.md，再列计划。你没给，走 B 分支：用设计系统，没有就自己挑方向。

A 分支的关键纪律是，不许凭记忆猜颜色，也不许猜品牌域名。它要的是一个真来源。而来源怎么递给它？一是写进需求，二是表单里的文件上传题。你跳过，它就只剩 B 分支。

3.6 怎么填才有用

规矩只有一条：表单是补充，不是第二份需求。下面这几个写法，是我从表单的设计逻辑里推出来的。

题	随手交默认	认真填	它会改变 Agent 什么
受众	选第一个选项	写状态：“创业公司创始人，没听过我们，只有 30 秒，在手机上看”	信息密度、首屏要放什么
数据口径	示意数据	“第三页的两个数字是真的，其余标示意”	哪些位置放真数字，哪些标示意
语气与方向	让它挑	给参照物：“像一份诊断报告，不像广告”	文案腔调与版式克制度
品牌来源	让它挑	上传规范或截图	走 A 分支，用真实色值

表里是假设场景，用来说明差别，不是我跑过的对照实验。我没有拿某次输出来证明“认真填就一定更好”。我能说的，是这些信息会进入 Agent 的约束。

什么时候可以跳？三种情况。需求里已经写全了，表自然不出现。你只是想看看它的手感。或者是局部小改，那本来就不走表单。

其余时候，我的判断是花两分钟填。官方把这张表叫“30 秒”，但真正花时间的是你想清楚答案那一刻。这一步想不清，后面每一步都在为它返工。

3.7 跑通第一个产物：一次完整操作

下面用一个假设场景：做一个单页介绍。单文件，好坏一眼能看出，不需要任何素材。设计系统怎么挑，见 §04，这里先随便选一个气质接近的。

为我们工作室的新服务“品牌体检”做一个单页介绍。

受众：10 到 50 人的创业公司创始人。他们的品牌是随手拼出来的，
没有人系统地看过。他们在手机上点开页面，大概只看 30 秒。

页面要让他们相信：花半天做一次体检，比继续拼凑划算。

结构：首屏一句话和一个主按钮；体检会查什么（四项）；
交付物长什么样；流程；价格；常见问题 3 条。

主按钮是“预约体检”。语气像一份靠谱的诊断报告，不像广告。
案例、数字、客户名我都还没有，请一律标“示意”，不要编。

这段为什么这么写？每一句都在回答一个它猜不出来的问题。受众写了设备和注意力。语气给了参照物。最后一句，把“编数字”这条路提前堵上了。

• 首屏那句话，一个不了解你的人能看懂吗。
• 主按钮是不是唯一的、显眼的。
• 所有数字，要么是真的，要么标了“示意”。
• 正文字号不小于 16px，对比度够用。
• 没有紫色渐变，也不是每一层背景都铺渐变，没有每个标题配一个图标。
• 手机宽度下没有横向滚动。
• 按钮有悬停和禁用状态。

字号、对比度和那份禁用清单，来自 OD Next 的设计基线。它和 Craft 准则的异同见 §10.3。手机宽度和按钮状态，是我的补充。

第三和第四的差别，在提示词里是两条路线。局部、明确、不动核心叙事和方向的调整，走 Direct Edit。它在当前这一轮里做完，不再问你。换叙事、换信息结构、换设计方向，则回到 Full Plan。等于重新走一遍，可能再问你一轮。

导出放在最后一步。格式怎么选，见 §11.1。PPT 的导出，见 §08 8.6。

3.8 这一节的结论

• 流程七步：选类型、选系统、写需求、答表单（若出现）、生成、改、导出。
• v0.22.1 起，受支持的 Agent 上默认走 OD Next。表单是有条件出现的，不是每次必弹。
• OD Next 最多问一轮、一到三题，答完冻结。传统路径最多五题。
• 默认值是 Agent 的推断，原样提交等于确认平均值。
• 真数据、品牌来源、参照物，要通过需求或表单里的文件题递进去。
• 改有两种成本：局部调整便宜，改方向要重来。

表单里最常见的一个问题，是视觉方向。下一节讲怎么提前把它定下来：选一套设计系统，或者把你自己的品牌抽成一份。

§04 设计系统：让输出长成你的样子

Design Systems: Make the Output Look Like You

你不指定长相，模型就取最常见的那一种。设计系统把长相写成文件，让每一次生成都从同一组具体的值出发。

4.1 没有方向时，模型只能给平均值

2026 年 5 月 13 日，官方博客发布了《31 skills, 72 systems》。文章把技能叫作「能力的单位」，把设计系统叫作「品味的单位」。本节讲的是后一个。先看没有它会怎样。

你对 Agent 说「做一个 SaaS 落地页」。它得替你决定几百个视觉参数。主色是什么，标题多大，卡片圆角几像素，按钮多高，阴影多重。

你一个都没说。没人说的时候，它会取最常见的那一档。每个参数单看都没错。叠在一起，就是序里描述的那种页面。紫色渐变，三张圆角卡片，一排通用图标。

这不是模型不行。是你没给方向，它只能给平均值。官网 Craft 页给反 AI 味规则的定位，说的也是这个意思。它用一组可检查的规则，区分「做过产品的人做的」和「模型的默认输出」。

设计系统就是那个方向。选定一套，配色、字体、间距、圆角这些参数就不再靠模型猜。README 的说法是，切换设计系统后，下一次渲染换的就是这一套设计参数。行话叫 token。

为什么我把它排在第一道

本书讲的防线不止一层。需求表单在 §03，Craft 准则在 §10。我把设计系统排在第一道，理由有三。

• 它是预防，不是补救。评审和检查在东西写完之后挑错。设计系统在模型动笔之前，就把视觉上的默认值换成了具体的值。
• 一次投入，处处生效。官网的说法是所有技能读同一份系统。原型、deck、看板、图都长成同一个样子。需求表单是在生成现场按需出现的，系统不用重填。
• 后面的规则以它为地基。官网 Craft 页写明，颜色那条规则铺在设计系统之上。色板由系统给，那条规则只管怎么用。没有系统，这条规则缺了一块地基。

下面这张表把常见的 AI 味拆开，看每一样由谁来防。成分取自社区教程的列举，分工是本书的归纳。

AI 味的成分	主要靠谁防	本书
紫蓝渐变、雷同的配色	设计系统的色板与使用比例	§04
字体雷同、字号阶梯拉不开	设计系统的字体，加 Craft 的排版规则	§04、§10
圆角卡片三连、版式千篇一律	设计系统的版式姿态，加上由内容决定版式	§04、§06
编造的数字	需求表单里交代真数据，加反 AI 味规则	§03、§10
空话文案	先想清楚要说服谁，再动笔	§05
只做有数据的那个状态	Craft 的状态覆盖	§10

重点看前三行。视觉上最扎眼的几样，归设计系统管。后三行它管不到，别指望它。

4.2 一份 DESIGN.md 里写着什么

设计系统在 OpenDesign 里的本体是一个 Markdown 文件，叫 DESIGN.md。README 把它描述为品牌包的核心，旁边可以挂 manifest.json、tokens.css、组件和素材。

它不是 Figma 库，也不是只有某个工具才打得开的二进制。你读到的和 Agent 读到的是同一份文字。5 月 13 日的那篇官方博客把它叫作契约。人能审计，任何 Agent 都能读。

里面写什么？官方博客拆成五块：色彩、字体、间距、版式姿态、语气。官网插件页还点了动效。社区教程的提取提示词再加上组件。合起来是下面这张表，最后一列是本书的归纳，不是官方说法。

部分	管什么	没写的话，模型会怎么做
色板	主色、辅色、语义色、中性色阶，以及各自用在哪	取最常见的蓝紫
字体	字族、字号阶梯、字重、行高	用默认字体，标题和正文只差一点
间距与形状	基础单位、栅格、圆角、阴影	每处各取一个「差不多」的值
版式姿态	留白多少、对称还是错位、信息密度	什么都排成居中加三栏
组件与动效	按钮、卡片的默认样子，时长与缓动	能动的都动一点
语气	人称、句长、克制程度	满篇宣传腔

其中「版式姿态」最容易被忽略。官方博客举的示例里，这一栏只有三句话。留白要宽，强调色只有一个且用得克制，不用投影。博客的比喻是这样的。有没有这一栏，决定十张页面像一个产品，还是像十个人各做了一张。

我认为这三句比一张色板更管用。色板告诉模型用什么颜色，姿态告诉它用多少、用在哪。AI 味多半出在比例和克制上，而不是某个色值上。

4.3 官方库：挑气质接近的，不挑最好看的

库里大多数是照着真实品牌拆出来的。官方博客点过名的有 Airbnb、Stripe、Vercel。还有 Tesla、Supabase、Uber。官网还提到编辑风、粗野主义风这类不属于某个品牌的系统。

库有多大，要看你问哪一页。官方自己的口径就不统一，下面列出几处。

出处	写的数量	时间	怎么读
GitHub README	151 套	2026 年 10 月 13 日抓取	当前口径之一
官网首页、定价页、插件页	152（部分页面写 152+）	2026 年 10 月 13 日抓取	当前口径之一
官方博客 0.12.0 发布文	150 套	文章日期 2026 年 6 月 26 日，镜像抓取 2026 年 9 月 4 日	那个版本发布时的数
官方博客《31 skills, 72 systems》	72 套	文章日期 2026 年 5 月 13 日，镜像抓取 2026 年 9 月 4 日	早期口径
官网 design-system 用例页	140+	镜像抓取 2026 年 9 月 4 日	写法最保守

我的读法是：一百五十套上下，而且还在涨。从 5 月中到 6 月底，博客里的数字从 72 变成 150。本书不钉死某个数，你拿到手的版本里是多少，以它自己的列表为准。

下面这几套来自官网的用例页，每套配一句官方描述。右栏是我的判断，说的是它适合借给什么场合。

系统	官方一句话（意译）	适合借给
Linear	极简、精确，紫色点缀	开发者工具、产品更新、要显得精密的汇报
Notion	温暖的极简，衬线标题，柔和的底面	知识类内容、教程、亲和一点的内部材料
Vercel	黑白的精确，用 Geist 字体	技术发布、数据密度高的页面
Stripe	标志性的紫色渐变，细字重的优雅	金融与支付类、讲究精致的产品页
Airbnb	暖珊瑚色点缀，摄影驱动，圆角界面	消费类、图片当主角的页面
Apple	大量留白，SF Pro 字体，电影感影像	高端消费品、发布会式的页面

留意 Stripe 那一行。紫色渐变本身不是 AI 味。AI 味是没有人决定过的紫色渐变。Stripe 那一套是一个品牌自己选的，所以它叫品牌，不叫套路。

挑的时候先问这份东西要让人产生什么反应，再看风格。要信任，就找克制的。要能量，就找大胆的。§05 的第 1 步有一张更细的对照表，我不在这里重复。

怎么挂上去

官网插件页是这样说的。把项目挂到一套系统上，之后所有插件的输出继承同一个身份。入口在界面里叫什么、在哪，以你当前版本为准。

4.4 把自己的品牌搬进来

库只解决「借气质」。你有自己的品牌，就该抽一套自己的。社区教程把这一步叫全书投入产出比最高的操作，我同意。原因很实在：一次投入，之后每次生成都不用再在提示词里重复主色、字体和圆角。

入口不止一个。2026 年 6 月 26 日，官方博客发了 v0.12.0 的发布文。标题是「Brand-backed Design System」，里面写了四条：

• 指向一个品牌网址
• 拖进一份现成的 DESIGN.md
• 给一个离线的 .fig 文件，在本地解码，不需要 Figma 账号
• 用浏览器剪藏工具抓一个页面

官网 /faq/ 页（镜像抓取于 2026 年 9 月 4 日）讲的是另一条更朴素的路。把截图或 Figma 导出丢进界面，让 Agent 抽成一份 DESIGN.md。

素材的精度差别很大。下表的排序来自社区教程，右栏是我的结论。

素材	精度	为什么	作者结论
Figma 文件或导出	最高	变量、样式、组件命名都在	有就用它，截图只补组件
现成的品牌规范文档	高	值是人写下来的，不用猜	直接改写成 DESIGN.md
多张界面截图	中	列表页、表单页、详情页覆盖的组件不同	至少给三种页面
一张官网截图	低	通常只有营销页的样式	只够抽气质，不够抽组件

表后补一句。素材越少，越要靠提示词里的「不要猜」兜底。完整提示词放在附录 A 的 D1，复制就能用。这里只留最关键的三句，措辞与 D1 一致。

• 拿不准的地方明确标出来，不要猜一个值填进去。
• 截图里看不到的（错误态、空态、深色模式）列成待补清单，不要编。
• 主色的使用比例要写清楚：大面积背景色，还是只用于行动按钮。

这几句为什么这么写

「不要猜一个值填进去」是最重要的一句。不加，你拿到的是一份看上去很完整、实际有一半是虚构的规范。虚构的部分会在之后每次生成里持续生效，而你不知道哪些是假的。这和 §03 3.4 里「不编任何指标」是同一个道理。待补清单也是这个思路：看不到的就列出来，别替截图编。

主色的使用比例单独拎出来。社区教程的说法是，很多品牌的主色只用在行动按钮上，占页面面积很小。抽出来的系统要是把它当成大面积背景，生成的页面会被品牌色淹掉。

每个颜色都要标出现位置。有了位置，你才好逐条核对。看到「#0055FF：主要按钮背景、链接文字」，你能立刻判断对不对。

存到哪

官网 /faq/ 页（镜像抓取于 2026 年 9 月 4 日）建议存到仓库的 design-systems/ 目录下。一个品牌一个文件夹，跟着 git 走。

your-project/
└── design-systems/
    └── your-brand/
        └── DESIGN.md

注意一件事。0.12.0 之后，界面里抽出来的系统叫「用户设计系统」。文件最终落在哪个目录，以你界面里显示的位置为准。想进 git，就自己放一份进仓库。

4.5 抽完先对照，再用

抽出来的东西不能直接用。做一次对照：用新系统生成一个页面，和你们真实的界面并排放。四处最容易抽偏，下表是社区教程总结的，改法是我补的。

项	常见偏差	怎么改
主色使用比例	被当成大面积背景	在系统里写明主色只用于什么场景
标题与正文字号比	阶梯被压扁，对比不够	逐级写出字号和用途
卡片圆角	差几个像素，观感明显不同	对着真实界面量，写成具体数值
按钮高度与内边距	偏胖或偏瘦	同上，并补各个状态

不对就直接改 DESIGN.md。它是 Markdown，手改比重抽快得多。截图自带压缩和色彩管理的影响，色值对不上时，以 Figma 或原始规范为准。

只抽了亮色模式，也很常见。补深色的提示词见附录 A 的 D2。关键语只有一条：「不是简单反转。中性色阶要重新设计，深色下的层次靠亮度差，不靠阴影。」措辞与 D2 一致。

验收时对着这张清单过一遍：

• 所有颜色都有十六进制值，没有「深蓝色」这种描述
• 主色的使用场景和比例写清楚了
• 字号阶梯每一级都标了用途
• 按钮和输入框的各个状态都有
• 待补清单存在，说明它没有编造看不到的部分
• 做过并排对照

接客户项目的话，一个客户一套系统，分文件夹放。同一份技能在不同系统下跑，方法复用，品牌各自独立。这是我认为这套架构在真实项目里最实用的一点。

4.6 设计系统管不到的，留给 Craft 和第 0 步

系统决定长什么样，决定不了什么算合格。官网 Craft 页对好几条规则的描述是同一个句式。当前的 DESIGN.md 决定外观，这一条决定底线。

举两个。状态覆盖那条，外观归 DESIGN.md，哪些状态必须存在归 Craft。动效那条，品牌性格归 DESIGN.md，该不该动归 Craft。Craft 准则现列 11 条（官网 /craft/ 页，2026 年 10 月 13 日抓取）。逐条见 §10。

两层分开是有意的。换品牌的时候，质量底线不应该跟着换。

还有一样，系统和 Craft 都救不了：内容本身是空的。配色专业、状态齐全、规则全过，但页面说的话没有信息量。这个问题出在动手之前，出在你还没想清楚要说服谁。

4.7 这一节的结论

• 没有方向，模型只能给平均值。设计系统就是方向。
• 官方库的数量口径不统一，一百五十套上下，以你手上版本的列表为准。
• 抽自己的品牌时，「不要猜」和「主色比例」是两条保命的指令。
• 抽完必须并排对照，不对就直接改 Markdown。
• 系统只管视觉。空话、假数字、缺状态，分别归 §05、§03、§10。

下一节 §05 进入 Part 2，PPT 工作坊。它从第 0 步开始。先写下要说服谁，再让任何工具碰设计。

§05 先定说服谁，再一张图挑方向

Decide Who You Persuade, Then Pick a Direction from One Image

Part 2 的第一节。先交代十步工作坊的全貌。再做前两步：写下要说服谁，再用一张图选视觉方向。

5.1 为什么我把这份教程当成全书的主线练习

2026 年 7 月 9 日，官方在教程栏目发布了一篇 PPT 工作坊。标题是 How to Create an AI-Powered PPT with OpenDesign。截至 2026 年 10 月 13 日，这篇教程还在线上，原文日期仍是 7 月 9 日。正文仍然用 Image Mode 和 Deck Mode 两个名字。

它讲的事情很简单。把做一份 PPT 拆成一串小步骤，每一步只解决一件事。教程开头有一句核心思路。选好风格，做出可编辑的 deck。再用素材、图表、动效和评论去精修。

为什么我要把它放进全书的中间，当作主线练习？因为它回答的正是序里那个问题：怎么让产出不像 AI 做的。

大多数人对 AI 做 PPT 的印象是这样的：输入一个主题，拿回一叠通用模板页。封面，目录，背景，现状，方案，总结，谢谢。每一页都能用，每一页都没说什么。这套工作流把顺序摆对了。先想清楚说服谁，再选风格，再排内容，才轮到设计。设计完还要拿参考图对一遍。

先把两个名字对上号

「Image Mode」「Deck Mode」这两个名字来自官方教程。v0.20.0（2026 年 8 月 19 日）起，Home 上的创作类型固定为十项。其中有 Prototype、Slide deck、Image、Document 等。和这两个名字对应的是 Image 和 Slide deck。

v0.24.1 标签里的语言包是这样写的。Home 上英文叫 Slide deck 和 Image。中文界面叫“幻灯片”和“图片”。语言包里找不到 Image Mode、Deck Mode 这两个词。本书正文沿用教程的叫法，你以自己屏幕上看到的为准。附录 B.1 术语表也收了这组对应关系。

5.2 十步全貌：四节怎么分

先说编号。官方正式编号是 Step 1 到 Step 10，一共十步。开头还有一个没有编号的准备动作，叫「先定演示目的」。它的提示词叫 Prompt 0。官方统一叫 Prompt N，本书简称 PN，后面写 P0、P1。社区教程和本书把它叫第 0 步，所以后面你会看到 0 到 10。

下面这张表是全貌。前四列来自官方教程，其中第 9 步在预览区做，是社区教程的写法，官方没写位置。最后一列是我的归纳，不是官方说法。

步	做什么	在哪做	本书	它在拦哪种 AI 味（作者结论）
0	先定要说服谁	任意 AI 对话	§05	空话。没有目标的内容，只能写成通用四段
1	一张图挑视觉方向	Image Mode	§05	平均值。用形容词描述风格，得到的是最常见的那一种
2	逐页排好内容	任意 AI 对话	§06	抢跑。结构没理顺就排版，返工成本翻倍
3	生成可编辑的第一版	Deck Mode	§06	死图。整份 deck 变成一张改不了的图片
4	对着参考图找差距	OpenDesign 对话	§07	空洞的「再好看点」。修改没有参照物
5	换上真实的 logo 和品牌素材	OpenDesign 对话	§07	占位符。用文字框假装 logo
6	只在讲不清的地方加配图	OpenDesign 对话	§07	装饰图。每页都配一张光滑的插画
7	用 ECharts 做图表	OpenDesign 对话	§08	静态截图，或者凭空编出来的数据
8	克制地加 Three.js 与动效	OpenDesign 对话	§08	满屏动效，盖过内容
9	Comment、Mark、Edit 精修	预览区（社区说法）	§08	整页重生成。小毛病付大代价
10	全局动效与导出	OpenDesign 演示或对话	§08	每页一种转场，导出时又丢掉效果

重点看最后一列。十步里没有一步是「让它更好看」。每一步都在拦一个具体的、AI 最容易犯的默认动作。

四节的分工是这样。

• §05 管第 0、1 步：定目标，定方向。
• §06 管第 2、3 步：排内容，出第一版。
• §07 管第 4、5、6 步：找差距，换真素材，只在讲不清的地方加图。
• §08 管第 7 到 10 步：图表，动效，精修，导出。

我把十步分成三段。第 0 到 2 步是想清楚，不碰设计稿（第 1 步只出参考图）。第 3 到 8 步是生成和加料。第 9、10 步是收口。这个三段分法是我的归纳，官方教程没这么分。

时间怎么算？官方没给预算。社区教程估计，熟练之后做一份 10 到 15 页的 deck 要一到两小时。这是社区作者的估计，我没有计时验证过，只当参考。

贯穿十步的三条规矩

AI 有三个默认动作：一次做完全套，每页都加，缺数据就编。附录 A 的 A.1 用一张表把它们和各条提示词对上了，这里不重复。

我只补一句判断。这十步做的事，是替你把选择权留在手里。比如先不要设计，「要不要这样设计」就还由你决定。另外两个默认动作也是一个道理，「加在哪」和「这数字信不信」都不该交给模型。

5.3 第 0 步：先写下观众、理解和决定，再让工具碰设计

官方对这一步的说法是，演示稿不是一叠好看的页。它要帮观众理解一件事，然后做出决定、形成判断，或者采取行动。动手设计之前，先写下观众要理解什么，要得出什么结论。

这一步不用打开 OpenDesign，任何 AI 对话都行。官方的 P0 要你填四项。主题，观众，观众要理解的事，你希望他们得出的判断或决定。然后让 AI 帮你理清这些。核心叙事，最重要的论点，建议页序，哪些信息该用画面表达。完整模板见附录 A 的 P0。

跳过它，会发生两件事

• 页序没有依据。你不知道哪一页该放前面，只好套「背景，现状，方案，结论」。这个顺序对大多数真实场合都不是最优的。
• 改动没有标准。有人说第 5 页太长。你不知道该删还是该拆，因为你没有一个判据：这一页是为了让观众相信什么。

这一步几乎不花额度，却决定后面每一次「再改改」的价格。我认为它是整套流程里性价比最高的一步。

怎么填：一个假设场景

下面是一个假设场景，用来演示填法。数字全部用方括号占位，不是真实数据。假设你要向分管副总和三位部门主管汇报。申请把团队周报改成自动汇总，先试点两周。

四项这样填。

主题：周报自动汇总，申请两周试点
观众：分管副总 + 三位部门主管。
      他们每周都读周报，知道汇总很费时，
      但没见过自动汇总出来的样子。会议 15 分钟。
观众要理解：
1. 现在每周花在汇总上的人力是 [N] 小时
2. 自动汇总在试点里具体怎么跑
我希望他们决定：
批准两周试点，并同意试点期间周报格式不变。

注意三处。

第一，「观众」写的是状态，不只是职位。「每周都读，但没见过」决定了前两页不用解释周报是什么。只需要证明自动汇总可行。附录 A 的 P0 说明里也强调了这一点。

第二，「决定」是一个能被批准或者否决的动作。「批准两周试点」可以投票，「让大家了解自动汇总」没法投票。

第三，论点只留一个。这份汇报要说的是「值得试两周」，不是三个并列的好处。

什么样的「决定」不合格

常见写法	问题	改成	作者结论
让大家了解一下自动汇总	没有决定。页序只能走通用四段	批准两周试点	「了解」不是目标，是过程
让领导认可团队的工作	无法验收，也没有行动	同意把试点人力算进下季度计划	写得出谁该点头，才算有目标
同时讲效率、质量、成本三个好处	三个论点并列，每个都讲不透	选效率当主论点，另两个降为支撑	一份 deck 只能赢一件事
观众：公司同事	密度和术语全程对不准	写出他们已经知道什么、有多少时间	状态比身份有用

官方的模板里没有这一栏。我建议多加一行：他们最可能反对什么。这是我的补充，不是官方要求。加了之后，页序里就必须有一页正面回应这个反对意见。

还可以再加一行：最后以什么形态交出去。要交 PPTX 的话，这个决定越早做越好，原因见 §08 8.6。

还有一种情况。你填完发现，写不出那句「我希望他们决定」。我的建议是先别做 PPT。没有决定的汇报，做得再漂亮，观众散场时也不知道该干什么。

好的输出和坏的输出

一份合格的输出，应该包含四样东西。

• 一条一句话说得完的叙事主线。
• 一个明确的核心论点。
• 一个带理由的页序。
• 一份清单，写明哪几处该做成图、表或示意。

下面这组对比，用的还是前面的假设场景。页序只是示意，真实输出会因材料不同而不同。

拿到右边那种，说明你的输入不够具体。别硬改，补上「观众已经知道什么」和「要他们决定什么」，再来一次。通用骨架是 AI 味的第一个来源：页序来自模板，不来自观众。§04 的表里把「空话文案」交给这一步来防，原因就在这里。

5.4 第 1 步：用一张图，把风格问题变成选择题

目标定了，下一步还不是生成 PPT。官方教程第 1 步要你在 Image Mode 里出一张参考图。图里并排放 4 到 6 个不同的视觉方向。

为什么先出图？因为大多数人说不出自己想要的风格叫什么。官方列了几个例子，比如瑞士字体排版、粗野主义、赛博朋克仪表盘。还有杂志编辑风、产品发布视觉和干净的投资人 deck。你可能知道自己不喜欢现在这版，却说不清想要哪一种。

形容词在这里没用。「大气一点」「高级一点」，十个人脑子里有十种画面。模型也一样。你给不出具体的东西，它就取最常见的那一档，也就是 §04 说的平均值。一张并排的图把问题改成选择题，你只需要指着说：这个。

三个约束，一个都不能删

完整提示词见附录 A 的 P1。这里只讲它的骨架为什么这么搭。

• 只出一张图。拆成几张，你就是在逐个看，不是在对比。官方的要求是不要做成单独的图，把所有方向放进一张。
• 每个方向都做成同一份演示的封面或关键页。内容相同，差别才只剩视觉。内容不同，你比的是内容。
• 现在不要生成完整的 PPT。老规矩。不拦它，它会顺手把整份做完，中间的检查点全丢。

还有两条要求值得留意。方向要在版式、字体、配色、质感上真的不同。每个方向要标一个短名字。六个方向如果只是同一套配色的六个变体，这张图就白出了。

「要体现的内容」填什么

P1 里有一栏，要你粘 5 到 10 条要点，或者 deck 大纲。这时候第 2 步还没做，哪来的大纲？

我的建议是把第 0 步得到的页序建议粘进去。那份页序有理由、有主线，足够让每个方向承载同一份内容。不给内容的话，出来的多半是纯装饰，比的是谁更花哨。

出不了图怎么办

官方教程没写 Image Mode 背后用哪个生图模型，要不要额外配置。我能确认的只有两条。

• v0.19.0（2026 年 8 月 11 日）的发布说明提到三个生图模型。部分订阅档可以通过 OpenDesign Cloud 直接使用。Go 档不含，见 §11.3。三个模型是 Seedream 5.0 Pro 和 GPT Image 2.0。还有 Nano Banana 2.0。
• v0.24.1 标签里 media/config.ts 的注释写明了用途。media-config.json 只存媒体生成的 key。位置和优先级见 §11.3。

官方没写明，我的理解是这样。走 Local CLI 或 BYOK 的读者，没配媒体生成的 key，这一步可能出不了图。教程开头倒是提醒过，Agent 能生图，整个流程会顺很多。

退路是我的推断，教程没有写。用你手边任何能生图的工具，把 P1 贴进去出这一张，再当附件交给第 3 步。这一步要的只是一张可以对比的图，不一定非在 OpenDesign 里出。

还有一处说法不一致。官网 Image 页描述的是另一条路。9 月 4 日的镜像是这样，10 月 17 日复查仍是这个描述。先用 HTML 排版，再导出成 PNG。v0.19.0 描述的是调用生图模型。教程没说参考图走哪一条。反正你要的是一张能对比的图，只是图里的文字能不能看清，得你自己看。

另一条路：从内置模板里挑

OpenDesign 本身自带 deck 模板。README 里有现成的 deck 模板。官网 Slides 页还举了几种风格，9 月 4 日的镜像里有，10 月 17 日复查仍在。比如 editorial 和 Swiss-international。还有 dark technical。这条路和「一张图挑方向」解决的是同一个问题，只是从模板列表里挑，不从图里挑。模板和技能的用法见 §09。

教程为什么选图不选模板？官方没写明，我的理解是：模板列表给你的是名字，你得先知道自己要哪个名字。图给你的是画面，你可以先排除。两条路并不冲突，没有思路时从图开始，已经有熟悉的模板时直接用它。

5.5 挑方向：别挑最好看的，挑最撑得住论点的

图出来了，该选了。官方的提醒只有一句。意思是别只挑最好看的，要挑最能支撑你要讲的话的。创业路演要的是清晰和笃定。研究报告要的是结构和数据承载力。社区分享可以更有个性。

官方给了一张对照表。左两列是原表，右边是我的结论。

这份 deck 需要	挑的风格感觉	作者结论
信任、战略、企业级可信度	干净、结构化、克制、编辑感	汇报、提案、融资材料，默认从这一类挑起
能量、社区、产品势头	大胆、高饱和、高对比、有表情	适合分享会和发布。给财务总监讲预算，别用
技术深度、数据、研究	网格化、模块化、信息密度高	图表多的材料优先考虑，留白不是它的强项
未来感的 AI 或开发者工具	数字感、分层、代码气质、电影感	辨识度最高，也最容易让正文页被装饰挤掉

回到前面的假设场景。观众是副总和主管，要的是批准一个试点。这批人要的是可信和克制，建议从第一行挑。高饱和的发布会风格，封面再惊艳，也会让人觉得你在卖东西，不是在汇报。

拿不准，就让它评

官方教程还给了一条 P1B：把那张图丢回去，让 AI 对比各方向并推荐一个。可以在 OpenDesign 对话里做，也可以在任意 AI 对话里做。完整模板见附录 A 的 P1B。

它评估四个维度。

• 支撑不支撑你的论点。
• 适不适合这批观众。
• 撑不撑得起一整份 deck。
• 给文字、图表、截图和 logo 留的空间够不够。

后两条最容易被忽略。有些风格的封面很惊艳。一放进正文页就发现，留白全被装饰吃掉了，文字没地方去。一张封面撑不起二十页内容。

选定之前，先想象三页正文

我的建议是选定前给自己出一道题：这个风格下，下面三页长什么样？

• 一页纯文字，三句话加一个小标题。
• 一页带图表，数据和标注要放得下。
• 一页带 logo 和产品截图，不能被装饰盖住。

想象不出来，就让它把选中的方向多扩展两三页，看了再定。社区教程也是这个建议。多花一次生成，换后面少返一轮工。

5.6 两步的验收与常见坑

这两步的产出都很小，一份文字和一张图，所以验收也要很小。逐条过一遍就行。

步	验收	没过的话
0	叙事主线能用一句话说完	补观众状态和要他们做的决定，重来
0	核心论点只有一个	挑一个，其余降为支撑
0	页序有理由，不是编号列表	要求它逐页解释为什么放在这里
1	只出了一张图，含 4 到 6 个方向	把「一张图」那两句提示词补回去
1	方向在版式、字体、质感上真的不同	明确要求，别只换配色
1	选中的那个，能想象出正文页	让它扩展两三页再定

常见的坑，我挑三个最容易踩的。

• 顺手让它设计。在第 0 步忘了写「先不要设计」，它会直接吐出一份 HTML。结构层面的调整机会就没了，那是最便宜的调整时机。
• 挑了最炫的。正文页开始崩。回到 5.5 的那张表，按论点选。
• 目标写成介绍一下。输出是通用四段。改写成一个具体的决定。

这三个坑的根是同一个：把选择权让给了模型。

5.7 这一节的结论

• 官方工作坊是 Step 1 到 Step 10 共十步，外加一个没编号的第 0 步。本书 §05 到 §08 分四节讲完。
• 第 0 步填四项：主题、观众、要理解的事、要他们做的决定。重点是观众的状态、他们要理解的事、你要他们做的决定。写不出决定，先别做 PPT。
• 第 1 步在 Image Mode 里出一张图、4 到 6 个方向，不是描述风格。
• 挑方向看能不能撑住论点，不看哪个最好看。选前先想象三页正文。
• 出不了图是可能的。官方没写明配置要求，退路是在别的工具里出这一张。

目标定了，方向也选了，但现在还不能进 Deck Mode。下一节 §06 先把每一页的内容排好。再把参考图和这份内容骨架一起交给 Deck Mode，生成第一版可编辑的 deck。

§06 先排内容，再用 Deck Mode 出第一版

Outline the Content First, Then Build the First Draft in Deck Mode

工作坊的第 2、3 步。先把每一页要说的话排好，看清结构。再把它和参考图一起交给 Deck Mode，生成第一版能编辑的 deck。

6.1 内容没排顺之前，不要碰排版

2026 年 9 月 9 日发布的 v0.22.1 有一条改动。在受支持的 Agent 上，幻灯片默认走 OD Next，细节见 §03 3.1。想关掉，去 Settings → Labs → Design Harness。

官方的 PPT 教程写于 7 月 9 日，比这条改动早整整两个月。Deck Mode 在 OD Next 下变了什么，发布说明没有展开。相关描述只有两条。教程里的界面细节今天是否一字不差，本书没有核对。

好在本节讲的两步，大半是流程逻辑，不依赖版本。先排内容，再做设计，这个顺序无论哪个版本都成立。涉及界面行为的地方，我会标出来，你以屏幕为准。

为什么第 2 步是最便宜的一步

官方教程在第 2 步开头说了一句。许多 AI 做 PPT 的流程死在这里，它们设计得太早。文字、页序、叙事逻辑还没理顺就动手，之后每一次改动都更贵。

我换个说法。第 2 步改一个标题，只要一句话。第 3 步之后同样的改动，要连着版式一起返工。同一个改动，价格差了几倍。所以这一步宁可多花十分钟。

它还有一个更重要的作用，和本书的主线直接相关。§04 的表里写过，「圆角卡片三连、版式千篇一律」这类 AI 味，靠两样东西防。一是设计系统的版式姿态，二是由内容决定版式。后一样，就是在这一步落地的。下面 6.2 会讲怎么落。

6.2 第 2 步：骨架里每页写五样东西

这一步在哪做？官方说任意 AI 对话都行，用 OpenDesign 的对话也行。它的输出是纯文本，跟工具无关。

P2 要你给出六项内容。主题，观众，观众要理解的事，他们该得出的结论，原始材料，页数。然后要求逐页给内容方案，现在不要设计，不要写最终 HTML。方案之后，再做一版朴素的 HTML 预览。完整模板见附录 A 的 P2。

每一页要写五样东西。我把官方列的项目逐条讲一下它们各自的用处。

• 页标题。写成一个结论。6.3 专门讲。
• 一句话核心信息。观众离开这一页，要带走的那一句话。
• 主要支撑点。撑住那句话的证据。我的建议是两三条，而且是递进的，不是并列的。
• 建议的视觉元素。这页最适合用图、表、大数字还是引文。这一栏决定版式。
• 要不要图表、logo、配图、截图、动效。这一栏是第 5 到 8 步的依据。

第 4 样和第 5 样，是最容易被省掉的两栏。省掉的代价，要到后面才还。

先说第 4 样。如果骨架里没写视觉，Deck Mode 只能套通用版式，每页都是标题加三条要点。写了「这页用一个横向条形图」，版式就由这页要说的话来定了。这就是前面说的由内容决定版式。

再说第 5 样。第 5 到 8 步里，官方每条提示词都让 AI 自己扫整份 deck，决定加在哪。骨架里已经标好哪几页要图表、哪几页要真 logo，它的判断就有了依据。社区教程把这条列为常见坑：忘了写视觉需求，后面几步没有依据。

材料决定页数

P2 里有一栏页数。别先定数字再凑内容。社区教程的建议是按材料量来定，宁可 8 页扎实，也不要为了 15 页硬凑。我认同这个判断。凑出来的页，通常是重复页和空话页，恰恰是最像 AI 做的那几页。

材料里没有的数据，写「未知」，别让 AI 替你补。附录 A 的 A.1 解释过，缺数据就编是它的第三个默认动作。

示意：周报汇报定稿后的骨架

下面这张表，是 §05 那个假设场景在第 2 步定稿后的样子。方括号是占位。一共 6 页，没有目录页，没有「谢谢」页。

页	标题（一个结论）	建议的视觉	素材需求
1	周报汇总可以先自动化试两周	一句大字，一行副标题	不需要
2	汇总占掉了主管每周 [N] 小时	横向条形图，拆开时间构成	数据由我提供，缺的标「未知」
3	试点只动汇总这一步，周报格式不变	前后流程对照	不需要
4	自动汇总的结果，能和手工版并排核对	样张截图	需要试点样张，目前未知
5	出错时一键回到手工汇总	三步流程	不需要
6	请批准两周试点，按三个指标决定是否扩大	指标表	指标由我来定

重点看第三列。条形图，对照图，截图，流程，表，五页五种。没有一页是「标题加三条要点」。这就是前面说的由内容决定版式。每页的视觉，是这页要说的话挑出来的，不是模板套出来的。

6.3 标题写结论，不写话题

官方教程在检查点里把这一条放在最前面：改标题。这句话值得多说一点。

「周报现状」是话题。「汇总占掉了主管每周 [N] 小时」是结论。话题只告诉观众这页在讲什么，结论告诉观众该不该细看。三秒钟里，后者胜出。

继续用 §05 的假设场景。方括号是占位，不是真实数据。

话题式标题	结论式标题	作者结论
周报现状	汇总占掉了主管每周 [N] 小时	观众自己每周都在经历，先对上号
试点方案	试点只动汇总这一步，周报格式不变	先回答最大的顾虑
风险与应对	出错时一键回到手工汇总	把风险写成保证，不是写成清单
总结	请批准两周试点	最后一页必须说出第 0 步写下的那个决定

看最后一行。第 0 步写下的「我希望他们决定什么」，到这里要原样出现。如果最后一页的标题是「谢谢」，你前面写的决定就没有落点。

一页改前改后

下面是同一页的两种写法。内容是示意，数字用占位符。

改前：

第 2 页 · 周报现状
- 每周汇总耗时 [N] 小时
- 涉及 [M] 个部门
- 各部门格式不统一

改后：

第 2 页 · 汇总占掉了主管每周 [N] 小时
核心信息：这笔人力看得见，试点要省的就是它
- 每周 [N] 小时，来自 [M] 个部门的手工合并
- 耗时最多的是对齐格式，不是写内容
- 试点只动汇总这一步，周报本身不变
视觉：一个横向条形图，拆开汇总时间的构成
素材：不需要 logo。数据由我提供，缺的标「未知」

变了四处。标题从话题变成结论。三条要点从并列的数据变成递进的论证。明确了这一页要引出下一页的试点方案。视觉栏有了具体的图，素材栏说清了数据谁来给。

改前那一版不算错，只是观众读完不知道该记什么。这是 AI 味文案的一个典型：每句话都对，没有一句话是判断。

6.4 先看纯文字预览，再改结构

P2 的最后一段，要它在方案之外再做一版朴素的 HTML 预览。只把每页的文字放进简单版式，不做视觉设计。如果你在 OpenDesign 之外做这一步，预览就是一段 HTML。存成文件，用浏览器打开就能看。

为什么要这一版？因为在漂亮的排版里，你看不出内容的毛病。字体好看、留白舒服的时候，一句空话读起来也像回事。剥掉设计，只剩文字。你才看得出这页到底说了什么，和上一页什么关系，有没有和第 7 页重复。

检查点：现在改

官方把这里叫检查点，明说该现在动手。要做的有四件：改标题，删弱页，合并重复的点，把最终结论说清。我把它整理成五个问题，逐页过一遍。

• 标题是结论吗？话题式的，按 6.3 改。
• 拿掉这页，论证受影响吗？不受影响，就是弱页，删。
• 有没有两页在说同一件事？有，合并。
• 最后一页说出了那个决定吗？回到第 0 步核对。
• 页数是不是凑出来的？凑的，砍。

我再加一个自己的小测试。只读标题，从头读到尾，能不能讲完整个故事？能，说明主线立住了。不能，说明有页在偏离。这是我的建议，官方没有写。

还有一个测试，适合方案已经比较满意的时候。把这份纯文字预览发给一个没参与过的人。只问一个问题：看完之后，你觉得我要你做什么？他答不上来，说明第 0 步写下的决定，没有真正落到页面里。这也是我的建议，官方没有写。

怎么下改动指令

点名页码，说清动作，并且把「别进入设计」再拦一次。下面是一个示例。假设模型第一次给了 9 页，你要把它改到前面那份 6 页的骨架。

按下面几处修改内容方案：
1. 第 3 页标题改成结论句：试点只动汇总这一步。
2. 第 5、6 页都在讲出错处理，合并成一页。
3. 删掉第 8 页，它不影响论证。
4. 最后一页标题改成：请批准两周试点。
改完重新生成朴素预览。现在仍然不要设计。

这类修改的特点是便宜。你改的是文字，不碰版式。每次来回花不了多少额度。

两个常见的坑

• 每页塞四五个要点。上台念不完，观众也读不完。一页一个想法，多的拆页。
• 跳过纯文字预览。结构的毛病会拖到设计完才发现。那半分钟别省。

6.5 第 3 步：在 Deck Mode 里搭出可编辑的第一版

结构定稿，轮到 Deck Mode。把第 1 步选中的参考图，和第 2 步定稿的内容方案，一起交给它。让它按参考图的风格，把内容做成可编辑的 HTML 幻灯片。

先把模式切对

Deck Mode 对应 Home 上的 Slide deck 类型。对应关系见 §05 5.1。新开的 Home 默认选 Prototype，不是 Slide deck。默认值的来龙去脉见 §03 3.1。

我的建议是先切类型，再粘提示词。这样一眼就能确认，你是在做 deck，而不是在做一个网页原型。按钮文案以你屏幕上的为准。

关键在「可编辑」

官方在这一步强调了一点。这是 OpenDesign 与「让 AI 生成一张 PPT 图」的本质差别。输出不该是一张扁平的图片。它该是一份你能检查、编辑、评论、继续改进的 deck。

参考图只是视觉方向的说明书，不是要被临摹的对象。这个理解很重要，下面的提示词都围绕它。

六条要求，每条拦一件事

完整提示词见附录 A 的 P3。这里挑四条讲为什么。

• 第 1 条，复现选定的风格。没有它，模型按自己的默认审美来，第 1 步的参考图白挑了。
• 第 5 条，不要变成静态图片。社区教程提醒过，有的 Agent 会取巧。它把参考图切几张贴进 HTML，看着很像，一个字也改不了。
• 第 4 条，尽量保留页面文字与结构。这一条护住你在第 2 步花的功夫。没有它，模型可能顺手重写你的标题。
• 第 3 条，画幅与参考图一致。这一条有坑，下面单讲。

第 1 条和第 5 条看起来像重复，其实针对两种不同的失败。一个防它不听风格，一个防它偷懒。

「选定的视觉风格」那一栏怎么填

P3 里有一栏，要你描述从图里选中的方向。别只写风格名，写它的特征：配色，字体，质感，版式。名字是给你看的，特征才是给模型的。

选定的视觉风格：第 2 个方向，瑞士编辑风。
白底，一个深蓝强调色。
大号无衬线标题，字号阶梯拉得很开。
12 栏网格，细线分隔，不用渐变和阴影。
信息密度中等，留白大。

这是示意，具体的值要对着你自己的参考图写。后面第一版「没跟上参考图」时，第一个要查的就是这一栏写得够不够具体。写成「高级、简洁」，等于没写。

画幅：越早定越好

P3 的默认是画幅与参考图一致。可是第 1 步的参考图是什么比例，你并没有控制过。如果场地是 16:9 的投影，而参考图是别的比例，要明确覆盖。

画幅用 16:9，不要跟参考图保持一致。

更省事的办法，是第 1 步的提示词里就写明画幅，这是我的建议。社区教程的理由我同意：做到第 8 步再改画幅，前面所有的排版判断都要重来。

设计系统和参考图，听谁的

官方教程通篇没有讲到 OpenDesign 的设计系统功能。也就是 §04 讲的那一套。P4 里的 design system 一词，指的是整份 deck 自己的统一性。如果你已经选定了一套品牌系统，就有个问题。参考图的配色字体，可能和系统里的打架。

官方没写明，我的理解是：参考图管气质、版式和质感，设计系统管具体取值。冲突时，品牌色和字体应该听设计系统的。你可以在 P3 里补一句，把话说死。

配色和字体使用已选的设计系统。
参考图只借鉴版式、疏密和质感。

这一句是我加的，官方的 P3 里没有。用不用，看你有没有品牌约束。没有，就别加，让参考图管全部。

需求表单怎么办

官方教程没提需求表单。如果它出现，可能问页数、画幅、受众，答案直接抄第 0 步和第 2 步，别现想。表单出现时为什么别原样交上去，见 §03 3.5。

上台讲，补一句备注

官方 P3 没提讲者备注。v0.19.0 和 v0.20.0 的说明里，演示者视图和备注都出现过。你要上台讲，可以在 P3 末尾补一句要备注。备注和演示者视图怎么配合，我没有实际试过。

6.6 第一版会差在哪，现在该看什么

官方教程在这里先打了一针预防针。第一版也许已经有用，但通常不会完全匹配参考图。这是正常的。它列了五项常见差距。间距更弱，质感更少，字体不够有戏剧性，视觉密度不一致，版式被简化。

官方给的态度是，别把第一版当成品，当工作草稿。我同意，并且要补一句：这是设计好的，不是失败。第 4 步就是专门补这个差距的。

官方列的差距	你会看到的样子	作者结论
间距更弱	页与页的留白几乎一个样	肉眼最先看出来的，§07 优先补
质感更少	背景是纯色或简单渐变	参考图越有质感，这一项差距越大
字体不够戏剧化	标题和正文的字号差得不大	字号阶梯拉不开，页面就平
视觉密度不一致	有的页满，有的页空，没有节奏	官方这么写，我更怕的是每页一样满
版式被简化	复杂的版面被替换成通用卡片	回头看第 2 步的视觉栏，当初写了没有

毛病该回哪一步查

第一版有毛病，不一定是第 3 步的错。很多毛病的根在更前面。先判断它属于哪一类，再决定回哪一步。

你看到的	多半出在	回哪一步
页序别扭，说不清为什么这页放这里	目标没写清	第 0 步，见 §05
整体气质不对	方向选错，或风格栏写得太空	第 1 步，或 P3 的风格栏
某页是空话，标题像话题	骨架没改干净	第 2 步，见 6.3
内容被改了，或者丢了	P3 没拦住	第 3 步，点名页码补回
排版平淡，质感不够	正常的差距	往下走，第 4 步，见 §07

最后一行是唯一不用回头的。其余几行，回头改比往前硬撑便宜。这也是第 0 到 2 步不碰设计稿的原因。它们出错，后面全都跟着错。

别在这里反复重生成

第一版不满意，很多人的第一反应是再生成一次。我的判断是，重生成三次也不会自己变好，因为你没有给它新的信息。直接去第 4 步，那一步的作用就是给它新信息：拿参考图当标准，让它自己找差距。

进第 4 步之前，只看这五项

别在这里纠视觉。结构上的毛病现在就说，视觉上的差距留到下一步统一处理，效率更高。

• 页数和内容对不对。有没有页被丢了，有没有标题被改了。
• 文字是不是真文字。双击能选中、能改，不是图片。
• 最小的字，全屏时看不看得清。切到全屏演示看一遍。v0.20.0 的说明写到，缩略图、主舞台、页码、备注和翻页控制已经联动。我没有亲自验证，按说明转述。
• 每页的核心信息还在不在。有没有被排版挤掉。
• 有没有哪页明显崩了。文字溢出，元素重叠。

前几项出问题，点名页码，让它按骨架补回来。

坑	表现	怎么办
输出是一堆图片	文字选不中，改不了	补一句：所有文字必须是真实文本
没跟上参考图	出来是通用商务模板	把选中方向的配色、字体、质感写具体
内容被裁掉	某页只剩标题	指出页码，让它按骨架补回
比例不对	投影上有黑边	现在就定死，别拖到后面

6.7 这一节的结论

• 第 2 步给每页写五样：结论式标题、一句话信息、支撑点、视觉元素、素材需求。后两样是版式和后面几步的依据。
• 先看纯文字预览，在设计之前改结构，这是全套里最便宜的一次修改。
• Deck Mode 对应 Slide deck。先切类型，再粘提示词，参考图和定稿的内容骨架一起给。
• 画幅越早定越好，官方默认跟参考图走，要 16:9 就明说。
• 第一版会差一截，这是设计好的。别重生成，进第 4 步。

第一版出来了，但它还不像「设计过」的东西，更像一份工作草稿。下一节 §07 进入第 4 步：拿着参考图，逐项找差距并直接改。接着是换真 logo，再只在讲不清的地方加图。

§07 第一版只是草稿：先找差距，再换真素材，图只加在讲不清的地方

Close the Gap, Swap in Real Assets, Add Images Only Where Needed

第一版 deck 出来后，最容易犯的错是接着往上堆东西。这一节讲三步收口：对着参考图量差距，把占位符换成真素材，只给讲不清的地方配图。

7.1 第一版是草稿，差距要对着标尺量

2026 年 7 月 9 日，官方发布了 PPT 工作坊。出处是 open-design.ai 的教程页，它把做一份 deck 拆成十步。§05 和 §06 讲完了第 0 到 3 步，这一节接着讲第 4、5、6 步。

第 1 步的 Image Mode 和第 3 步的 Deck Mode，是教程里的名字。读 v0.24.1 的语言包，它们在 Home 上叫 Image 和 Slide deck。中文界面叫「图片」和「幻灯片」。

你现在手上有两样东西：一张参考图，一份第一版 deck。官方教程对第一版的态度很明确：它可能已经有用，但通常对不上参考图。第一版常见的五项差距，见 §06 6.6。教程说这很正常，把它当工作草稿。

我把这个判断看得很重。AI 味的一大来源，是把第一版当成品。第一版是模型在没人盯着时给的平均值，§04 讲过这个说法。设计系统管颜色和字体。它管不到「这一页该不该更重」「这里要不要放真 logo」「这张图到底在说什么」。这三件事，正是第 4、5、6 步的活。

步骤	解决什么	标尺是什么	这一步不碰什么	作者结论
第 4 步	整份 deck 不像设计过的	最初那张参考图	不加新素材，不改文案	最先做，因为它动的是全局
第 5 步	占位符拉低可信度	真实的品牌与产品素材	不改整体风格	排第二，风格定了素材才好放
第 6 步	个别页讲不清	一条判据：拿掉这张图，论点会不会变弱	不碰已有图表和真素材的页	排最后，它加得最随意，也最该少

重点看「这一步不碰什么」那一列。三步各管一件事，是为了每一步都能单独验收。混在一起做，你分不清是哪一步把页面改坏的。

顺序为什么是这样？官方教程只是按这个顺序写，没有解释。我的理解是改动范围从大到小。第 4 步会动整份 deck 的版式、字号和配色。如果先放了 logo 和配图，第 4 步一重排，素材的位置和尺寸又得重来。

三步共用同一套习惯，附录 A 开头那一节讲过。每条提示词里都有拦住 AI 默认动作的话。每条结尾都要它汇报改了什么、哪里要你复核。这一节不重复，只讲每一步的判断依据。

7.2 第 4 步：把「再好看一点」换成可诊断的差距

「再好看一点」是一句没有参照物的话。模型只能猜你指的是哪一维：配色，间距，还是字体？猜错了你得再说一次。给它一个参照物，问题就变成可诊断的。

举个假设的例子。诊断结果可能是「标题和正文的字号差是 1.4 倍，参考图是 3 倍」。也可能是「每页留白一样多，参考图里有满页也有近乎空白的页」。有具体差距，就有具体改法。官方教程在这一步旁边写了一句话。大意是：deck 从「生成的」变成「设计过的」，往往就在这个自我对照的循环里。

这也是第 1 步一定要留下参考图的原因。它不只用来选风格，它是整个后半段的标尺。在 OpenDesign 对话里跑这一步时，建议把那张图再给它一次。别指望它还记得。长对话里图片掉出上下文是常有的事，这是我的判断，官方没写。

提示词里最该留的三句话

完整模板见附录 A 的 P4。这里只讲三句，删掉任何一句，效果都会变。

• 「不要只告诉我差在哪，请直接改好。」不加这句，多数 Agent 会交一份诊断报告，然后停下来等你说「那你改吧」。一来一回，白白多花一轮额度。
• 「保持可读、可编辑。」放手让它「调用全部能力」时，有两种典型的过度发挥。一种是把文字转成图片，换取更精确的排版。另一种是堆视觉效果，堆到字读不清。这半句是给它划边界。
• 「告诉我哪里需要人工复核。」这一条最值得认真读。它列出来的，通常是它自己也没把握的地方。

如果你担心它「文字变图片」，可以再补一句：所有文字保持为真实文本节点。这样改完你还能选中文字、直接改字。

七个维度，对应七类差距

官方给的七个维度，覆盖了「设计过」和「拼出来」之间的大部分差别。下表第三列是我补的。我对照了 OpenDesign 的设计系统和 Craft 准则。每一类差距背后有哪条规则在管，表里都标了。

维度	差的时候是什么样	背后谁在管	作者结论
版式结构	每页都是标题加正文，版式没有变化	设计系统的版式姿态，见 §04	先看这一条，最扎眼
字号阶梯与性格	标题和正文只差一点点	Craft 的排版层次：相邻层级太近，就是一面平墙	拉开对比，比换字体见效快
配色	色用对了，比例错了，强调色变成了主色	Craft 的颜色规则：强调色约占 5% 到 10%，每屏最多两处可见	最常见的是强调色泛滥
间距与对齐	元素各自为政，没有共同的基线	设计系统的间距 token	圈出来比描述好使
视觉层次	三样东西一样重，观众不知先看哪个	Craft 的排版层次：一个主入口，不是两个三个	每页只许一个赢家
质感、纵深与氛围	全是平的，参考图里有颗粒、渐层、阴影	设计系统，加参考图本身	这一条最依赖参考图
是否像同一套	第 3 页和第 8 页像两个人做的	设计系统	最常出问题，多页生成时每页各自优化

Craft 的规则逐条见 §10。这里只提醒一点：这些维度不是主观的审美，每一条都有可检查的对应规则。第三列写的两条规则出自仓库 craft/ 目录下的 color.md 和 typography-hierarchy.md。我对过 v0.24.1 标签里的原文，与主分支抓取的版本一致。

中文 deck 多一个检查点

这条官方教程没讲，来自 OpenDesign 仓库的 craft/typography.md。中文标题的行高比英文宽，两行大标题套用英文行距会撞在一起。数字和依据见 §10.3。

所以做中文 deck 时，第 4 步建议专门让它查一遍封面和章节页的大标题行高。参考图是英文风格时尤其要查，因为它会照着英文版式的行距去还原。

deck 的节奏，检查器也在看

OpenDesign 自己的检查器对 deck 有一条节奏规则。连续三张幻灯片同为浅色或同为深色，会被标成「视觉疲劳」。建议是把中间一张换成相反的主题。检查器的完整说明见 §10.6。这条读自 v0.24.1 发布标签里的 lint-artifact 源码。我与主分支抓取的版本逐字比对过，没有差异。我没有实际运行过。

这条规则和第 4 步想做的事是一回事：疏密要有变化，不能每页一个样。你不用记检查器的细节，在提示词里直接说出这个要求就行。

第二轮：每轮只盯一两个维度

这一步可以跑第二轮。第二轮的提示词要更窄，只点名要调的维度，并明确说其余不要动。不加那句，它会顺手把第一轮的成果又重排一遍。下面是一种写法，维度换成你自己的。

再对比一次。这一轮只看两件事：

1. 字号阶梯。参考图里标题和正文的对比强得多。
   把标题拉大，正文可以更小。
2. 疏密。现在每页信息量差不多。
   按内容重要性重新分配，让关键页留白更多。

其余一律不要动，包括文案和配色。
改完告诉我动了哪几页。

如果 deck 比较长，你还可以先让它只诊断、不动手。这样你能自己选先补哪几个差距。

先不要改。把当前 deck 和参考图对比，
只列出三个最大的差距，每个标出哪几页最明显。
我选定要补哪几个之后，你再动手。

这和「不要只告诉我差在哪」并不矛盾。第一条提示词是你已经信任它的判断，第二条是你想先把方向盘握在手里。选哪条，看这份 deck 有多重要。

改完怎么验收

别只看它的总结，自己过一遍。下面五项，一项不过就退回。

• 整体是不是更接近参考图的气质了。
• 有没有为了像参考图牺牲可读性，比如字太小、对比度不够。
• 有没有哪一页被改坏了，尤其是上一轮刚满意的那几页。
• 文字还是不是真实文本，能不能选中。
• 疏密有没有变化，还是仍然每页一个样。

v0.24.1 的界面文案里有版本历史入口。英文是 Versions 和 Version history。中文是「版本」和「历史版本」。它可以把 HTML 切换回某个旧版本。我读的是标签里的界面文案文件，没有在桌面应用里点过。建议每一轮之前留一个版本。改坏了能退回，比让 Agent 再改一遍回来省事。

常见的坑	表现	怎么办
只诊断不动手	收到一份报告就停了	把「直接改好」那句留着
文字变图片	选不中，改不了	补一句「文字保持为真实文本节点」
越改越花	装饰盖过内容	写明「可读性优先于视觉冲击」
一轮改太多	有的页变好，有的页变坏	分轮，每轮盯一两个维度，并写「其余不要动」

7.3 第 5 步：占位符换成真素材，别自己画一个近似的

官方教程指出一个很具体的毛病。AI 生成的 deck 常有这个习惯。该放真 logo、产品图标、界面截图的地方，它放一段文字占位。这一眼就掉可信度。观众不一定说得出哪里不对，但会觉得这份材料没做完。

这一步让 Agent 通读整份 deck，找出该放外部素材的位置。要找的有五类。公司 logo，产品 logo，应用图标，平台界面截图，公开的产品图或界面参考。然后去找官方或高质量的版本，下载，插进对应的页。完整模板见附录 A 的 P5。

三条不能让步的规则

• logo 用官方原版，保持原有品牌配色。不重新着色，不变形，不重新设计。deck 可以有很强的风格，但品牌素材必须认得出来。把别人的品牌色换成你 deck 的主色，观众第一眼认不出它，比不放还糟。
• 不要每页都加。只在能提升清晰度、可信度或识别度的地方加。素材出现要有理由：这一页在讲和谁集成，所以这里有那家的 logo。每页角上挂一个，就成了装饰墙。
• 找不到官方版本，留占位符，不要自己画。官方教程里没有这一句，是社区教程补的，附录 A 的 P5 已经带上。我很赞成。AI 画的「差不多的 logo」，懂行的人一眼看穿，比空着更伤可信度。

第三条还有一个好处。它给了 Agent 一条诚实的退路：找不到就说找不到，而不是悄悄编一个。Agent 不能联网时怎么办，附录 A 开头那一节的提醒已经写了退路。

下载来的素材，三类风险

Agent 去网上取素材，等于你把「选图」这件事外包了。选来的东西有三类风险，官方教程只要求它汇报「哪些素材需要人工核实」。这张清单要认真看。

风险	具体表现	作者结论
过期	logo 可能是旧版；界面截图可能是几个版本之前的 UI；产品图可能只是概念图；带数字的图，数字可能过期	逐个对照对方官网当前的页面
带别人的数据	搜来的截图里，可能有真实用户数据、内部信息、测试账号	上台前自己逐张看，最容易出事
授权	商标是否需要授权，图片是否可商用，搜索结果里随手下的图往往来源不清	内部汇报可以松，对外发布或公开演讲要认真

第二行和第三行不在官方清单里，是社区教程补的提醒。授权这件事我没法替你判断，它取决于对方的品牌使用规范。多数公司有 brand kit 页面，写明了 logo 怎么用，去那里看。

还有一个检查点是我自己加的。素材插进去以后，看一眼它是本地文件，还是指向外部网址的链接。外链的图在会场没网时会变成一个空框。官方导出对比里也写了，导出成 HTML 时，外部素材需要仔细核实，见 §08。OpenDesign 的 Craft 准则也把「外部占位图床」列为需要修的问题。理由是图床脆弱，失效时看起来很假。

先列清单，再下载

素材涉及版权和隐私，更稳的做法是拆成两步走。先让它列清单，不下载。你确认之后再下载和插入。这条是我自己的写法，官方教程没有。

先不要下载任何东西。通读 deck，列一张素材清单：
页码、需要什么素材、打算从哪里取（写出具体的官方页面）、
有没有已知的品牌使用规范。

我确认之后，你再下载和插入。找不到官方版本的，
留占位符，不要自己画。

多一轮对话，换来的是来源可查。出了问题你知道是哪一张从哪来的，也能在下载之前就拦住不合适的。

7.4 第 6 步：只在讲不清的地方加图

真素材放完，deck 可能还缺一类东西：概念性的画面。它们不是品牌素材，用来帮观众理解一个点，或者把抽象的东西变具体。这一步的唯一难点是克制。

判据只有一条，官方教程的说法是：图要解释论点，不是装饰页面。一张图没让想法更好懂，就删掉。社区教程把它变成了一个可以直接用的提问：拿掉这张图，这一页的说服力会下降吗？不会，就是装饰。我觉得这个问法比原则好用，因为你能当场回答。

让它自己交代理由

提示词的结尾，要求它对每张加的图或建议的图交代四件事。页码，这张图的作用，用的图像提示词，为什么这一页需要。完整模板见附录 A 的 P6。

这四问是重点，因为它逼着模型先过一遍判据。读理由时，你很快能分出两种。

前者说得出这张图替观众省了什么力气。后者换成任何一页都成立，等于没说。凡是理由写成后者那样的，建议直接删。

哪些页值得一张图

情况	图起什么作用	作者结论
讲一个抽象概念	给它一个可以指着看的形状	站得住
讲一个流程或系统	空间关系比文字描述省力	站得住，但优先考虑画成示意图
讲一个对比	并排放，比分两段说清楚	站得住
情绪性的转折点	比如「这就是我们当时的处境」	可以有，但整份 deck 里别超过一两处
全文字页太多，需要换气	调节奏	这是节奏问题，先想能不能拆页

表里前三种，是图真的在帮观众理解。后两种更接近调味，用多了就回到装饰。

反过来，这几类页不该加图。

• 已经有图表的页，图表本身就是视觉内容。
• 已经有真实截图或 logo 的页。
• 信息密度本来就高的页。
• 纯过渡页。
• 结论页。它该是文字最有力量的地方，我的建议是别加。

风格漂移，要在动手前锁住

AI 配图最容易暴露的问题是风格漂移。第 3 页是扁平插画，第 7 页是写实照片，第 11 页是 3D 渲染，放在一起像三份材料拼的。提示词里「风格与 deck 保持一致」那一条，光靠一句话拦不住。

更稳的做法是把风格写成一段具体描述，先出一张，确认了再批量出。这样返工只发生在第一张上。

所有配图统一用下面这个风格：
[具体描述，例如：低饱和、单色调、有颗粒质感的抽象插画，
不出现人脸，图中不出现任何文字]

先按这个风格只生成一张，放在第 [页码] 页给我看。
我确认之后，你再生成其余的。

「图中不出现任何文字」值得保留。AI 生成的图里，文字往往是乱码。这一条也是社区教程加的，官方原文没有。

生不了图怎么办

官方教程的前提是 Agent 能生图。生不了，提示词给了退路。让它把图像提示词写出来，你拿去别的工具生成，再手动放回 deck。

OpenDesign 的图像、视频、音频生成走一条单独的媒体通道。对应的凭据只存媒体生成用的那部分，细节见 §11.3。我没有逐一核对各种 Agent 在 deck 对话里能不能直接调用它，以你屏幕上的为准。社区教程列过几个常见的图像模型名字，我没在官方材料里找到出处，所以这里不写。

数量：一条警报线，不是目标

社区教程给过一个经验值：十到十五页的 deck，真正需要配图的一般只有两到四页。超过一半的页面有配图，基本可以确定加多了。这是社区经验，非官方规格，我只当它是警报线。如果你的 deck 超过了，回头再问一遍那个提问，逐张过。

配图也是「反 AI 味」的战场。Craft 准则里的反 AI 味规则，把装饰性的色块、波浪背景列为没有意义的几何图形。附录 A 的 Q2 自查清单里，第 6 条问的是同一件事：每张图有没有在解释某个点。

7.5 三步做完，先合起来验一遍

三步各自验收之后，还要合起来看一次。因为单独看每一步都没问题，拼在一起可能还是不对。建议在进入第 7 步之前，把下面几项过一遍。

• 翻到任意一页，你说得出它在整份 deck 里的位置和作用。
• 重的页和轻的页交替出现，没有哪一段连续五页都是同一个密度。
• 每一个 logo 和截图，你都知道它从哪来，对应的页在支撑什么论点。
• 每一张配图，你都能用一句话说出它替观众省了什么力。
• 所有文字仍是真实文本。没有为了好看而变成图片的标题。
• 没有「占位符」「待补」「lorem」这类残留。

如果有三项以上不过，别往下走。回到第 4 步，再跑一轮聚焦的对比。后面的图表和动效会把现在的问题放大，不会修好它。

症状	多半出在哪一步	怎么拦
每页都有 logo 或图	第 5、6 步的上限没写	提示词里写明最多几页，并点名要删哪几处
配图风格不统一	第 6 步没锁风格	先出一张，确认再批量
页面越改越拥挤	第 4 步一轮改太多	退回上一个版本，分轮重来
素材糊、变形	第 5 步没提分辨率和比例	要求保持原比例，糊的换掉或删掉

读完表格，你会发现症状的根源很一致：该设上限的地方没设，该让它汇报的地方没问。这就是附录 A 里那句话的意思，每条提示词里的「不要」，拦的是 AI 的默认动作。

7.6 这一节的结论

• 说「再好看一点」换不来改进，给参照物才有可诊断的差距。
• 「不要只告诉我差在哪，请直接改好」和「保持可读、可编辑」，两句都别删。
• logo 用官方原版，原色不动。找不到就留占位符，别自己画。
• 下载来的素材要查三样：过期、带别人的数据、授权。
• 配图只问一件事：拿掉它，论点会不会变弱。理由写得勉强的，直接删。
• 每一步的提示词都要它汇报「哪里需要人工复核」，这一栏就是你的验收清单。

到这里，deck 已经有设计，有真素材，有克制的配图。下一节进入 Part 2 的最后四步：图表、动效、精修与导出。这四步最容易在最后一公里，把刚做出来的东西做回 AI 味。

§08 图表讲结论，动效只管节奏，最后才精修和导出

Charts, Motion, Polish and Export

最后四步最容易把做好的东西做回 AI 味：编造的数字、满屏的特效、整页重来的修改。这一节讲怎么拦住它们，并把 deck 稳稳地交出去。

8.1 最后四步，每一步都有一个 AI 的默认动作

2026 年 7 月 14 日，OpenDesign v0.15.0 发布。release 说明写到，多页 deck 有了缩略图导航和键盘翻页。演讲者备注能和幻灯片一起读写。另有 Presenter View。以上来自 GitHub Releases。这些让 deck 能真正放映。最后几步的成品，是要上台的。

§07 结束时，你的 deck 已经有设计，有真素材，有克制的配图。剩下的是官方教程的第 7 到 10 步：图表，Three.js 效果，三种精修，全局动效。外加 PPT 场景下的导出。

这四步有个共同点：每一步都在往 deck 里加东西。加东西是 AI 最擅长的，也是 AI 味回来的地方。所以官方提示词在这几步里，一再写「不要每页都加」。下表把默认动作和拦法摆在一起。

步骤	AI 的默认动作	拦它的办法	作者结论
第 7 步 图表	静态截图，或者凭空编出来的数据	缺数据用标注过的示意数据，并要它告诉你	图比字更容易让人信，所以更要拦
第 8 步 Three.js	满屏动效，盖过内容	限定数量，风格越花越少用	动效预算和风格成反比
第 9 步 精修	整页重生成。小毛病付大代价	按问题的形态选工具	选对工具，比写好提示词重要
第 10 步 全局动效	每页一种转场，导出时又丢掉效果	整份节奏一致，必要信息不藏起来	一致比花哨重要

顺序也有讲究。官方把全局动效放最后，理由很实在：动画按元素顺序排，内容再变，时序就乱了。推广一下，越容易被后续修改冲掉的东西，越要放后面做。

8.2 第 7 步：图表讲结论，数据必须有来源

deck 里有市场对比、趋势、调研结果、技术基准。官方教程建议用真图表，别用静态图片。理由有三。ECharts 能直接嵌在 HTML 页面里。样式能跟 deck 走。数据变了还能改。

让 Agent 通读整份 deck，找出适合加图表的页。官方列了八类场景，从对比、趋势、排名到技术基准。完整模板见附录 A 的 P7。

第 5 条约束最重要：缺数据，就标明是示意

提示词里有一条：没有确切数据，就用明确标注的示意数据，并告诉我这里需要核实。我认为这是这一步最重要的一句。

原因很简单。一根柱子画在那里，观众默认它是真的。文字里写「增长很快」，听的人还会掂量。图上画一条陡峭的曲线，他们直接信了。上台被问「这个数从哪来」而你答不上来，是最难看的一种翻车。

OpenDesign 的检查器也在防这件事，但防得有限。它把「编造的指标」列为必须修的一级问题，要求用真来源，或者用标注过的占位符。可源码注释自己承认，想抓全是没希望的。它只认几个典型句式，比如「快 10 倍」「可用率 99.9%」。图里柱子的高度，它看不出真假。所以这道关，只能你自己守。

选哪种图

内容类型	建议图表	为什么	作者结论
市场增长	折线图或面积图	表现方向和势头	只画要讲的那一两条线
竞品对比	条形图或雷达图	差距一眼可见	条形图更稳，雷达图不好读
类别占比	饼图、环形图或矩形树图	分布一目了然	类别多于五个，就别用饼图（社区经验，非官方规格）
流程阶段	漏斗图或堆叠条形图	表现转化或推进	漏斗要标出每段的真实数

前三列来自官方教程，第四列是我的判断。社区教程还有两条实操经验，我也赞成（社区经验，非官方规格）。趋势线超过四条就该拆开，或者只留要讲的两条，其余灰掉当背景。柱状图的纵轴要从零开始。不从零开始能放大差异，但那是误导，被人指出一次，信任就没了。

标题写结论，图才变成证据

图表页最容易犯的错，是把手上所有数据都画上去。一页一个图，一个图一个结论。标题写结论，不写话题。

观众因此知道该看图的哪里。建议在图的下角用小字标出数据来源和截止日期，这不是官方要求。来源写得出来，说明这张图经得起追问。

有真实数据，就直接贴表格，别用文字转述。

这一页用下面的真实数据画图，不要改动任何数值：

[把你的数据贴在这里：第一行是表头，之后逐行一条记录]

图表类型：[折线 / 条形 / 其他]
标题写成结论。
下角用小字标注数据来源和截止日期。
单位和时间范围照原样标注。

图表要和 deck 是一套

提示词的第三条要求样式与 deck 一致。落到检查上，是下面几项。

• 用 deck 的色板，不用图表库默认的蓝橙。字体、网格线、坐标轴的灰度，也和 deck 一致。
• 深色 deck 上的图表也是深色底。社区教程提醒过，图表库默认白底，放到深色页上像贴了一张纸。
• 一张图只留一个重点色，其余用灰。这是我把 Craft 颜色规则里「强调色每屏最多两处」延伸到了图表上。
• 图例要大到投影上看得清，必要时直接标在线条旁。

8.3 第 8 步：动效的预算，和风格成反比

deck 是 HTML，所以它能做传统幻灯片工具不好做的事。粒子，3D 物体，有纵深的背景，空间感的运动。官方教程把它们归在 Three.js 和动画库名下，后者管入场、悬停和章节切换。

官方的判据是，动效要让演示更好记或更好懂，不能让幻灯片更难读。提示词举了四种合适的用法。开场页的低调动态背景。核心概念的 3D 隐喻。不影响可读性的粒子氛围。帮助解释系统的空间可视化。完整模板见附录 A 的 P8。

两处说法有张力

这里有一处矛盾，我如实写出来。官方教程说，可以用 3D 隐喻或空间可视化来解释系统。OpenDesign 的 Craft 里有一份动效纪律文件，立场更严。它说动画并不比静态图更能教会复杂系统。不要为了教学、装饰或显得高级而加动画。它认可的用途只有一类，帮人在空间、时间或状态里重新定位。比如页面转场、容器展开、视角变化、进度提示。依据见 §10.4。

那份文件写的是产品界面，deck 不完全等同。但判断的逻辑可以借用。我的取舍是，要解释清楚的内容，优先用静态示意图，也就是第 6 步那一套。动效留给两件事。带观众从一页走到下一页，以及开场的氛围。

风格已经花了，就少加

官方教程有一条很实用的判断。风格本来就多彩、密集或表现力强，就少用 3D。风格极简，一点低调的动态反而能加出能量。选了大胆风格的人，这一步该比别人做得少。

数量上，社区教程给了一张分位置的建议，总数一到三处。这是社区经验，非官方规格。最后一列是我的看法。

位置	社区教程的建议	作者结论
开场页	可以有一处背景动效	同意，这里最不影响内容
核心概念页	最多一页值得一个 3D 隐喻	更保守一点，先问静态图行不行
结论页	静止	同意，最后一页要的是重量

动效的具体时长、暂停控件和减弱动效的规则，见 §10.4。

上台前必须实测

提示词要求「保持性能合理」。这句话在笔记本上很容易满足，上了投影就不一定。以下是社区教程补的实测清单。在要用的那台机器上从头到尾跑一遍。接上外接投影再跑一遍，分辨率变了，粒子数量可能撑不住。要远程共享屏幕就单独测，本机流畅的粒子经过视频编码可能糊成一片。电池模式也跑一遍，有些机器会降频。我的补充是，测的时候看字有没有被背景压住。读不清就加一层压暗的遮罩，或者把字挪开。

拿不准一个 3D 效果值不值得，就退一步用 CSS 动画。入场，淡入，位移，CSS 都够用，在各种环境下都稳定。

这一页不要用 Three.js。用 CSS 动画做一个克制的入场：
标题先出，三个卡片依次跟上，间隔 120 毫秒，缓动用 ease-out。
只播放一次，不要循环。
系统设置了减少动态时，直接显示静态版本。

8.4 第 9 步：三种精修工具，按问题的形态选

大结构定了，剩下的是细节。某个 logo 大了一点，某句文案要换个说法，某张图表挤了。这些不值得整页重新生成。官方教程给了三个精度不同的工具。

工具	问题的形态	作者结论
Comment（评论）	挂在某个具体元素上	素材、文案、间距、核实数字
Mark（标记）	一块视觉区域，说不清但能圈出来	版式、对齐、疏密，圈比说快
Edit（编辑）	你已经知道要改成什么	最快，不用再让 Agent 跑一轮

选错工具的代价是效率。用文字描述位置，比如「中间偏左那一块，第二行下面一点」，远不如直接圈出来。反过来，答案已经确定还去评论，等于多让 Agent 跑一轮，还可能改到别处。

评论为什么能挂在元素上

评论要找到对应的元素，得有个锚点。OpenDesign 的检查器和 Craft 的反 AI 味文件都提到一件事。网页和移动原型的每个区块要带 data-od-id。deck 的每张幻灯片则要带 data-screen-label。缺了，评论模式就瞄不准它。v0.13.0 发布于 2026 年 7 月 2 日。它的说明还写到，生成 HTML 的提示词加入了明确的 data-od-id 指引。

我的理解是，某一页的评论怎么都挂不上时，先看它有没有这个标记，让 Agent 补上。这是推断，官方没这么写。

评论也不必等 Agent 跑完。v0.10.0（2026 年 6 月 11 日）写到，运行期间发出的评论会排队。deck 上的标记固定在原处。

评论写什么，原则只有一条：说要什么，而不是不要什么。

只说不要什么，Agent 要自己猜该改成什么，猜错了你再来一轮。说清楚要什么，改动才可验证。

一个从粗到细的顺序

官方没规定三种工具的先后。社区教程的顺序我认为对，倒过来会返工。比如先改完错别字，再一次重排版，文案又被冲掉了。

先让 Agent 按五个维度做一次自我批判，拿到「保留、要改、顺手能修」三栏清单。界面里有 Critique 入口就点它，没有就用附录 A 的 Q1。五个维度分别是什么，见 §10.7。然后用 Mark 一次圈完版式问题，再用 Comment 一次挂完元素问题。最后自己用 Edit 收口。定稿前的最后半小时，多数修改都该发生在 Edit 里。

8.5 第 10 步：全局动效放在最后，节奏要一致

内容，视觉，素材，图表，局部修改都到位，才轮到最后一层。这一层是整份 deck 的过场和交互。它和第 8 步不同。第 8 步给某一页加一个效果，这一步让整份 deck 从头放到尾是顺的。

官方把它当成一套放映系统，包括转场、入场时序、悬停、点击和低调的强调。最好的版本帮观众跟上故事，而不是展示动画效果。提示词见附录 A 的 P10，这里讲判断。

动效类型	要避免	作者结论
页间转场	每页用不同的转场	全篇只选一种
章节转场	小话题变化也搞得隆重	只给真正的转折
入场动画	每个段落、每个要点都动	只动该先看的
悬停、点击交互	把必要信息藏在交互后面	最危险的一行

重点看最后一行。把关键数据藏在悬停里，导出成 PDF 后那些信息就没了。现场鼠标不好用，你也讲不下去。官方提示词只要求交互简单到能在现场用。附录 A 的 P10 多补了一条，必要信息不能藏在交互后面。我把它当成这一步的底线。交互只承载可选信息，必要信息必须默认可见。

另一条约束是整份节奏一致。第 3 页的卡片依次淡入，第 8 页的卡片就不该从下方弹入。观众会在潜意识里学你的节奏，节奏一变就得重新适应，注意力就从内容上跑了。验收的办法很省事。从头放一遍，只问一个问题：有没有哪一页的动效像是另一个人加的。

放映时有什么可以依靠

社区教程的上台清单里有一条，要有办法快速跳页，临场被打断时要用。release 说明里有对得上的功能，我只读了说明，没有逐项验证。v0.15.0 有缩略图导航、直接选页，以及方向键、Home、End 翻页。同一版的备注能在幻灯片旁边读和改，Presenter View 不遮挡观众的画面。

备注还有个细节。v0.15.0 的说明写到一条规则。导出 PDF、图片、ZIP、HTML 时，演讲者备注不会出现在幻灯片上。这样不会把讲稿一并发出去。导出 PPTX 是否带备注，说明里没写。我读了 v0.24.1 的导出代码。备注浮层在导出前会被当作放映界面隐藏，传给转换引擎的选项里也没有备注项。官方没写明，我的理解是不带备注，没有实际导出验证。

8.6 导出：先想清楚最终交什么

通用的导出格式、媒体和成本，在 §11 讲。这里只讲 PPT 场景。流程里用到了真素材、图表、3D 和动效，导出方式选错，前面的功夫会白费一部分。

官方教程给了一张四行的对比表。我加了一列作者结论。

格式	适合	代价	作者结论
在 OpenDesign 里放映	保留动效、HTML 版式、图表和交互	要在装了 OpenDesign 的环境里放	用了动效和图表，首选
PDF 或图片	分享一个稳定的视觉版本	动效和交互全丢	做备份，必备
PPTX	兼容传统演示工具	复杂的 HTML 视觉可能转不干净	对方要改时才用
HTML	网页分享和存档	外部素材和生成的效果要仔细核实	先查素材是不是外链

官方推荐，用了图表、3D 和动效，就尽量在 OpenDesign 里直接放映。最后一轮检查后，再导一份 PDF 备份。

PPTX：可编辑，不保真，发出去前自己打开看

官方几处说法不一致，要放在一起读。v0.13.0（2026 年 7 月 2 日）的发布说明写的是以截图为底的 PPTX。官网的 HTML 转 PPT 页和首页 FAQ 写的是真正的 .pptx。文字和形状是原生的，可以继续编辑。其中 HTML 转 PPT 页的镜像抓取于 2026 年 9 月 4 日。README 写的是 Agent 驱动的技能生成。PPT 工作坊教程则提醒，复杂的 HTML 视觉可能转不干净，动效和 3D 会丢。

v0.24.1 的源码和界面文案能把前两种对上。点「导出为 PPTX」会弹出一个窗口，里面有两个选项。一个是「可编辑」：原生形状和文字。界面自己标注「非像素级还原」，默认选中，并标「推荐」。另一个是「截图 PPTX」：每页一张图，像素级还原，但不可编辑。我读的是标签里的代码和界面文案，没有实际导出过。

官网页还把这条路归在 pptx-generator 名下，并说做过保真审计。v0.24.1 仓库里的 pptx-generator 只是个目录条目。它指向上游的 MiniMax 技能。导出窗口走的是内置的转换引擎。官网页和仓库在这一点上对不上，官方没写明两者的关系，我不替它下结论。

所以我的结论是：可编辑，不保真，发出去前自己打开看。文字、形状、基本版式可以指望。我读代码的理解是，复杂的渐变背景会被截成图片层垫在下面，文字仍是原生的。动效和 3D 不会带过去。怎么打开看，§11.1 有一个三分钟检查。

release 说明里能看到这条路是怎么补出来的。

• v0.15.1（2026 年 7 月 17 日）：说明里已经出现「可编辑 PPTX」。它保留中日韩字体。
• v0.20.0（2026 年 8 月 19 日）：带上导入的 Google 字体。换行和分层背景也保留。
• v0.21.1（2026 年 8 月 31 日）：拿不到正确的分层截取时，导出会明确失败。不再交给你一张透明的幻灯片。

v0.13.0 时只有以截图为底这一种。后来加了可编辑模式，截图模式没有删，现在是导出窗口里的第二个选项。

还有一个容易踩的坑。v0.21.0 写明，无头部署和容器部署不再提供 PPTX 导出。原因是它们的后台渲染不了。桌面版保留。用这类方式部署的话，找不到 PPTX 选项，不是你没找到，是它不提供。

按场景选格式

按场景选，上面那张官方表加 §11.1 的格式表就够用。自己上台，在 OpenDesign 里放映，再备一份 PDF。对方要改才用 PPTX，存档或网页分享用 HTML。

如果早知道最终一定要交 PPTX，社区教程有个更省事的做法。第 8 步别加 Three.js，第 10 步只加最基本的转场。少做一点，转换损失也少一点。我再往前推一步，这个决定该在第 0 步就做：动手之前先问自己，最后以什么形态交出去。§05 第 0 步的模板里没有这一栏，可以自己加一行。

另外，v0.15.0 允许下载指定版本，不会悄悄导出最新的修改。导之前，确认是你审过的那一版。

上台前的最后检查

这是社区教程第 9、10 步两份清单的合并版。没有哪一条有替代方案，尤其是第一条。

• 在真机真投影上，从第一页走到最后一页。
• 所有文字是真实文本，能选中。没有占位符残留，比如 Lorem ipsum、方括号变量、「待补」。
• 所有数字都能说出来源，示意数据都标了。
• 全屏下最小的字，在投影距离上看得清。
• PDF 备份已经导好，检查过没有缺页。
• 交互里没有藏必要信息。
• 远程共享单独测过，有办法快速跳页。

8.7 回头看十步：每一步拦的是一个默认动作

Part 2 走完了。回头看，这十步没有一步在教你让模型更聪明。它们做同一件事：在模型会取平均值的地方，换成一个具体的判断。每一步拦的默认动作，全表见 §05 5.2。

这就是本书主线在 PPT 里的落地：让产出不像 AI 做的。AI 做一份 PPT 早已不难。难的是不长成一眼认得出来的样子。紫色渐变，每页一个 logo，满屏的柱子，转场花样百出。这些都是模型没人替它判断时给出的平均值。

每一步的结构其实一样。先写一句拦住默认动作的话，再给一个参照物，最后要它汇报哪里需要你复核。缺一件，那一步多半就会滑回平均值。

走完十步，成品和「让 AI 生成一份 PPT」的差别，主要不在模型。在于你每一步都做了一个具体的判断。比如这个风格支不支持我的论点，这一页该不该有图表。

8.8 这一节的结论

• 图表的第 5 条约束最重要：缺数据用标注过的示意数据。检查器抓不到编造的柱子高度。
• 图表标题写结论，一页一图，下角标来源。
• 动效预算和风格成反比。解释内容用静态图，动效留给转场和开场。
• 精修按问题的形态选工具：评论钉元素，标记圈区域，编辑直接改，顺序从粗到细。
• 全局动效放最后，节奏一致，必要信息不藏在交互后面。
• 交付物要早定。用了动效和图表，就在 OpenDesign 里放映。PDF 备份必备，PPTX 留给对方要改的时候，发出去前自己打开看。

十步走完，你手上是一份成品 deck。下一节进入 Part 3，讲技能、模板与插件。它回答的问题是，怎么把这十步固化成能重复调用的技能，下次不用再从头念一遍提示词。

§09 做过三遍的判断，就该存成技能、模板或插件

Skills, Templates and Plugins: Save a Judgment as a File

技能、设计模板、插件，是三种存放判断的文件夹。它们各管一段，最后都靠一行声明，把 Craft 准则接进每一次生成。

9.1 同一类活做到第三遍，提示词就该存成文件

2026 年 5 月 22 日，OpenDesign 发布 v0.8.0。官方的版本标题叫 Plugin Everything。来源是 GitHub Releases，2026 年 10 月 13 日核对。README 的路线图把这一版记作插件市场的基础设施。内容有三样：清单规范、首批官方插件、按 Agent 区分的安装脚本。

前面几节，你每次都在现场把要求说清楚。需求表单、设计系统、PPT 的十个步骤，第一遍都值得这么做。

到第三遍，你会发现提示词八九不离十。这说明那份提示词里已经沉淀了你的判断。比如该问客户什么，页面该有哪几段，什么写法一定不行。把它存成文件，下次是调用，不是重写。

这一节讲存放判断的几种文件夹，怎么选，怎么装，怎么自己写。最后看它们怎样和 §10 的 Craft 接上线。

9.2 官方把「能力」分成四个抽屉，插件是外面的包装

这一节的切法，和 §01 提到的 README「四个平面」不同。「四个平面」指插件、技能、设计模板、设计系统。这里按仓库目录切，Craft 是目录，插件是外面的包装。

craft/ 目录自带的 README 里，有一张对照表。它把仓库里的四类资源并排放在一起。

目录	管什么	官方举的例子	本书
skills/	干活时调用的功能性能力	design-brief、brand-extract	本节
design-templates/	打包好的产物形状	saas-landing、dashboard	本节
design-systems/	品牌包：说明文字、设计参数契约、可选素材	linear-app、apple、notion	见 §04
craft/	与品牌无关、永远成立的做法	字距规则、强调色上限、反 AI 味	§10

读法很简单。技能决定做什么，模板给起点，设计系统定长相，Craft 定底线。分开放的好处，是各自可以单独换。我的理解是，客户换了品牌，你换设计系统就行，技能不用改。

插件是外面的包装，不是第五个抽屉。README 的说法是：一个插件就是一个目录，入口是 open-design.json，再按类型带上 SKILL.md、template.json 或 DESIGN.md。技能、模板、设计系统，都可以被打成插件分发。

9.3 技能：一个 SKILL.md，就是一份写给 Agent 的工作说明

技能沿用的是 Claude Code 的 SKILL.md 约定，README 称之为原样采用。协议文档还保证了一件事：带 SKILL.md 的目录，别的支持这个格式的 Agent 也读得懂。

所以技能不绑 OpenDesign。你写的文件夹，可以丢进自己的 Claude Code 或 Codex 会话当上下文用。

下面是官方模板 saas-landing 的头部，我做了删减。去掉了输入参数、输出声明、预览配置。触发词和描述也只留了一部分。只留和本书主线有关的几行。

---
name: saas-landing
description: |
  Single-page SaaS landing with hero, features,
  social proof, pricing, and CTA.
triggers:
  - "saas landing"
  - "marketing page"
od:
  mode: prototype
  scenario: marketing
  design_system:
    requires: true
  craft:
    requires: [typography, color, anti-ai-slop, laws-of-ux]
---

前半是通用部分：名字、描述、触发词。描述决定 Agent 什么时候想起这个技能。官方插件规范建议写成激活条件，句式是「Use this plugin when……」。

后半是 OpenDesign 的扩展，整块都是可选的。关键是最后一行 od.craft.requires：这个技能要求哪几份 Craft 准则。社区教程把它写成顶层的 craft: 列表，官方协议文档的位置是 od.craft.requires，以官方为准。

同一份 README 还写了一个细节。只有列出来的准则才会被装进提示，没列的不占上下文。所以别图省事全选，需要几条声明几条。

正文是普通 Markdown。以 saas-landing 为例，它按六步走。读 DESIGN.md，规划段落，套用设计系统，写文件，自检，收尾。其中读不到 DESIGN.md，就停下来向你要一份。这个习惯值得抄。

两个小细节。第一，没写 od: 块的技能照样能用，设计系统默认也会装进去。第二，想让评论模式点得到某个元素，输出里要给元素打 data-od-id 标记，这是官方模板要求的写法。原因见 §08 8.4。

9.4 设计模板：给你一个能跑的起点，而不是空白

README 把设计模板和功能性技能分开放。模板是可渲染的起点，按模式分类。原型（prototype）和演示稿（deck）是两大类。另有图像、视频、音频和工具类。

每个模板还带一个 scenario 字段，按受众分组。分组有九个：设计、营销、运营、工程、产品、财务、人事、销售、个人。你做的是 PPT，就从 deck 一类里挑。

官网插件页上有一批以角色命名的 deck 模板。比如有一张卡片，标题意译是「像杂志创意总监那样为年报做艺术指导」。另一张是「像合规负责人那样向医疗系统董事会汇报数据治理」。两处标题都是我的意译。它们把一个角色的判断写了进去：受众是谁，要促成什么决定，哪一页放什么。

每张卡片都有 Read full prompt。我建议你先点开读，再决定装不装。读它怎样把一份董事会材料拆成具体约束，是学写提示词最快的路。

模板给的是骨架，别当成品交出去。官方的反 AI 味准则列了一条软性信号：页面从头到尾是同一套标准段落，毫无变化。套完模板，至少换掉一段。

你手上有什么	该用哪一种	作者结论
一份反复用的提示词，判断多于版式	技能	先写这个
想要一个可运行、带示例的起点	设计模板	用现成的，别重写
要换品牌长相	设计系统	见 §04
要分享给团队、带输入和流水线	插件	最后一步才打包
所有产出都要过的底线	Craft	见 §10

9.5 插件：把判断打成一个能安装、能审查的包

插件清单 open-design.json 里，有几个字段值得认识。od.kind 说明它是技能、场景、原子能力还是组合包。od.mode 说明输出什么。od.inputs 是套用时要填的参数。od.capabilities 是它需要的权限。

最有意思的是流水线（pipeline）。插件规范里的示例，把一次生成拆成四个阶段。

第一段对应 §03 的需求表单，最后一段对应 §10 的自我批判。示例里写了循环条件：评分达标，或者跑满 3 轮就停。注意这是规范里的示例，不是每个插件都这么走。

先看权限，再装

权限是插件最该审查的地方。规范要求声明最小权限，受限安装默认只给 prompt:inject，字面意思是只能往提示里注入内容。能申请的权限包括读写文件、命令行、网络、连接器等。

我的建议是，装第三方插件前先看清单。一个只改落地页配色的插件，如果申请 bash 或 network，就该多问一句为什么。

界面和命令行，二选一

README 的说法是，界面和命令行功能对等。界面里打开 Plugin 页，点 Install。装好后，它会在项目里变成可点击的小标签，官方叫 composer chips。点一下套用，并填它声明的输入。命令行则是：

od plugin list                       # 列出已装插件
od plugin search "landing page"      # 按关键词搜
od plugin info od-default            # 看元数据、输入、权限
od plugin install od-default         # 也接受 ./本地文件夹 或 https 链接
od plugin apply od-default --input brief="一页纸的种子轮路演"

这几条要先启动桌面应用或 daemon，否则命令连不上。macOS 的 od 可能被系统命令盖住，处理见 §02 2.3。

再补两点，都读自 v0.24.1 的源码。第一，apply 的帮助文本写的是「计算套用结果（预览）」，它不等于开跑。真正开跑是 od plugin run，要带项目 ID。README 没写这条，我没有实际运行过。第二，输入既可以写 --input 键=值，也可以一次给 --inputs 一段 JSON。

9.6 自己写一个：先让 Agent 反推，再删到只剩判断

什么时候该写？我认同社区教程的判断标准：同一类活做了三遍，每次提示词都差不多。做一遍觉得不错就写技能，通常写出一份很泛的东西，不如现场说清楚。

最省事的写法是让 Agent 从一次成功的生成里反推，不用从头写。提示词在附录 A 的 S。最后一问最重要：让它标出哪些是从这一次上下文推断的，你再决定哪些该留。

反推出来的草稿，再按官方插件规范改一遍。

• 描述写成激活条件，说清什么时候该用，什么时候不该。
• 正文尽量不超过 500 行，长的 API 说明和视觉规则放进 references/。
• 流程里放检查点和预期输出，只在信息真缺时才让它问你。
• 只声明需要的 Craft，别把 11 条都写上。

打包用两条命令，都在 README 里：od plugin scaffold --id my-plugin --title "My Plugin" 生成骨架，od plugin validate ./my-plugin 检查清单和文件布局。

验收可以交给 evals/evals.json。规范里的写法是列出若干条提示词。每条配上期望输出和断言，比如「有空态、加载态、成功态」。描述容易写得太宽的话，再加一份 evals/trigger-queries.json 测激活。

常见的坑	表现	怎么办
技能写得太泛	和不用技能差不多	写具体判断，不写通用流程
把一次性的东西写进去	下次全不适用	让 Agent 标出「这次特有」的部分
技能太长	Agent 抓不住重点	一个技能管一类活
忘了声明 Craft	质量底线没兜住	在 od.craft.requires 里列上
导入了外部技能却没记来源	过半年不知道从哪来的	自己记一笔来源和日期

最后一行有出处。协议文档的「未决问题」里写明了一件事。通过链接导入的功能性技能，装完以后目前不会记录来源。这件事官方还没做，只能你自己记。

9.7 库里的数字别钉死，要引用就带上页面和日期

你问「官方库里到底有多少个」，会得到不同的答案。下面是 2026 年 10 月 13 日核对时，各处的口径。设计系统的数量见 §04 4.3，这里不重复。

说的是什么	数字	出处
插件总数	277 个官方 + 183 个示例 / 458+ / 478+	README / 官网首页 / 插件页
插件页分项	模板 292、技能 23、设计系统 152	官网插件页
功能性技能	100+ / 162+ / 23	README / 定价页 / 插件页

这些数字对不上，是因为数的不是同一样东西。有的数仓库目录，有的数插件类型，有的是营销口径。就连插件页自己，292 加 23 加 152 也只有 467，凑不到 478。

我的建议是，写汇报时不要写「官方有 N 个模板」。要引用，就带上页面和日期。要找东西，直接去官网插件页搜，或者用 od plugin search。

9.8 这一节的结论

• 同一类活做到第三遍，再写技能。
• 技能里声明 Craft 的位置是 od.craft.requires，需要几条列几条。
• 装第三方插件前，先看它申请了哪些权限。
• 技能没有 run 子命令，命令行触发用 od plugin apply 预览、od plugin run 开跑。
• 库里的数量各页不一致，引用要带页面和日期。

技能里那一行 od.craft.requires，引用的到底是哪几条准则，每一条管什么、违反了长什么样。下一节逐条讲，这是全书的主线。

§10 Craft 把「合格」写成 11 条规则，机器只替你查其中一小块

Craft: Eleven Rules, and the Small Part a Machine Can Check

设计系统决定长什么样，Craft 决定什么算合格。这一节把 11 条逐条讲清。再讲自我批判和硬检查，各自能做什么、做不到什么。

10.1 先给结论：11 条里，机器只查得了一小块

2026 年 9 月 4 日抓取的官网镜像里，/craft/ 页的标题写的是 12 项。2026 年 10 月 13 日核对，同一页改成了「11 条与品牌无关的渲染准则」。多出来的一项叫 Future Craft Sections，只是占位登记，不是规则。社区教程还停在 12 条上，你遇到时对照这一段。

所以这一节讲 11 条。有三个判断，先说在前面。

• 11 条准则里，自动检查只覆盖很小一块，集中在反 AI 味那条，另有零星几处。其余全靠 Agent 自觉和你的验收。
• 所以每条准则你要记两样：违反时长什么样，以及怎么查。
• 硬检查查机械问题，自我批判评判断。两个都要，谁也替不了谁。

10.2 Craft 怎么进到一次生成里，11 条各管什么

§09 讲过四个抽屉，Craft 是第四个。技能在 od.craft.requires 里列出需要的准则。daemon 只把列出来的规则文件装进系统提示，位置在设计系统和技能正文之间。

冲突时设计系统优先，这也是 Craft 只管底线的原因。配色是什么，由 §04 的设计系统给。Craft 管的是怎么用。Craft 的内容改编自 MIT 许可的 refero_skill 项目。本节引用的 11 份准则文件，我对过 v0.24.1 标签里的原文。主分支抓取的版本与它一致。

每条准则是仓库 craft/ 目录下的一份 Markdown。文件名去掉 .md，就是声明时用的名字（slug）。下表按官网现在的顺序列出 11 条。

官网现序号	准则（官网标题）	slug	官方建议什么时候声明	自动检查
01	Accessibility baseline	accessibility-baseline	任何带交互界面的技能	无
02	Animation discipline	animation-discipline	任何带动效的技能	无
03	Anti-AI-slop rules	anti-ai-slop	营销页、落地页、演示稿	有，核心所在
04	Color	color	几乎所有出样式的技能	个别项
05	Editorial typography hierarchy	typography-hierarchy-editorial	以长文阅读为主：博客、文档页、电子手册	无
06	Form validation	form-validation	含交互表单的技能	无
07	Laws of UX	laws-of-ux	构图碰到认知上限：定价页、看板、引导、弹窗	无
08	RTL and bidirectional	rtl-and-bidi	可能出现阿拉伯语、希伯来语、波斯语	无
09	State coverage	state-coverage	有状态的界面：看板、手机应用、表单、列表	无
10	Typography	typography	几乎所有出排版内容的技能	个别项
11	Typography hierarchy	typography-hierarchy	层级要显得「设计过」，与 typography 搭配	无

序号别当真。官网按标题字母序排，不是按重要性。证据是编号会变：Laws of UX 在 9 月的镜像里是 08，现在是 07。这是我的理解，官方没写明。引用时用名字。

另有两个文件不在这 11 条里。README.md 是目录说明。FUTURE_SECTIONS.md 登记了三个技能已经引用、规则还没写的名字。仓库里的 pnpm lint:craft 只查技能声明的 Craft 名字拼没拼错，不检查你的页面。

10.3 长相的默认值：反 AI 味、颜色、排版

这五条管长相。模型没拿到方向，就取最常见的那一档。这几条把「最常见」写成了具体数字。

反 AI 味：先认出那七种写法

官方给它的定位是一组可检查的规则。它要区分「做过产品的人做的」和「模型的默认输出」。P0 级有七条，官方称为七宗罪。

• 默认靛蓝当强调色。官方列了七个值，#6366f1、#4f46e5、#4338ca、#3730a3、#8b5cf6、#7c3aed、#a855f7。
• 首屏两段式「信任」渐变：紫到蓝、蓝到青、靛到粉。
• 用星星、火箭、靶心这类 emoji 当功能图标。官方的替代是单线描边的 SVG。
• 设计系统绑定了衬线展示体，标题却被改成 Inter 或 Roboto 这类无衬线体。
• 圆角卡片加一条彩色左边线，官方叫它标准的「AI 仪表盘卡片」。
• 编造的指标：「快 10 倍」「99.9% 在线」。要么有真来源，要么写带标注的占位符。
• 占位文案：lorem ipsum、feature one、feature two。

软性的 P1 有四种。

• 整页一路是标准顺序，毫无变化。顺序是 Hero、Features、Pricing、FAQ、CTA。这条是指导性的，不自动检查。
• 用 unsplash、placehold.co 这类外部占位图床。
• :root 之外的原始色值超过十二个。
• 强调色在正文里用得太多。

P2 更轻：装饰性的波浪或色块 SVG，以及完全对称、毫无张力的版式。

§01 1.1 提到的 OD Next 默认禁用清单，和这些写法同类，但不是同一份文件。§03 3.7 引的 16px 正文字号，出自 OD Next 的设计基线。Craft 里没有这个数。

附录 A 的 Q2 清单里，「默认三栏」「均匀的信息密度」两条是社区教程补的。官方这份清单里没有。

怎么给它灵魂？官方的比例是约 80% 成熟做法，加约 20% 独特选择。这 20% 落在四处。

• 一个大胆的视觉动作：字体、一个色彩决定，或出人意料的比例。
• 有个性的文案，比如 "Start tracking" 好过 "Get started"。
• 一个让人记住的微交互。
• 一个只有用过产品的人才放得出的细节。

颜色：强调色每屏最多两处

官方把一屏的像素分成四层。中性色 70% 到 90%，强调色 5% 到 10% 且只能有一个。语义色 0 到 5%，特效不到 1%。头号可读性问题，是强调色泛滥。

硬上限是每屏最多两处可见的强调色。链接、悬停和焦点环都算。典型搭配是一个小标签，加一个主按钮。

其余几条：对比度当门槛，不当目标。深色主题别用纯黑纯白。官方举例，深色背景用 #0f0f0f，浅色背景用 #fafafa。设计参数按用途命名，写 --accent，别写 --blue-500。

有处细节要小心。Color 说 18px 以上算大字，按 3:1 过。Accessibility baseline 却说大字是 18pt，约 24px。它还把「18px 算大字」列为常见错误。两处不一致，我的建议是按后者：18 到 24px 的正文，一律按 4.5:1 过。

排版：字距和行高，是 AI 最常漏的两处

字号用 1.2 或 1.25 倍递进，一个产物最多 6 到 8 档。最多两种字体。行宽 50 到 75 个字符。正文不要两端对齐。

官方点名的头号漏项是字距。全大写文字必须配 0.06em 到 0.1em 的正字距。32px 以上的标题要配 -0.01em 到 -0.02em 的负字距。官方的判断是，缺这两样，最容易被认出是 AI 做的。

中文读者最该看的是 CJK 覆盖。拉丁字母的行高表搬到中文上会出事，因为汉字撑满整个字面框。

文字	拉丁字母	中日韩文字
标题（32px 以上）	1.0 到 1.2	1.3 到 1.4
正文（15 到 18px）	1.5 到 1.6	1.7 到 1.8

另有两条。负字距只给拉丁字母，中文标题的字距取 0。中英混排时，紧的拉丁数值只加在英文元素上，别从共同的父级继承。

官方说最常见的违反，是中文封面主标题。72px 甚至 96px，用 br 断成两行，行高还写 1.05，两行直接撞在一起。检查时先看封面。自动检查只管全大写缺字距这一项，行高要靠你的眼睛。

排版层级：一个主角，至少两个杠杆

层级不是列字号表，而是层与层之间的对比。官方给了三条合同。只有一个主入口。层与层之间有节奏。读者不重读，也能还原信息结构。

可用的杠杆有五个：字号、字重、间距、字距、对齐。主角至少要有两个杠杆同向发力。

失败有两种。平，是 18、20、22px 这种太近的字号阶梯。吵，是处处加粗加大，眼睛没地方落脚。官方还点名了几个反模式。字重逐级加重，每节间距一样，两个并列的主角，只靠字号一个杠杆。

它自带的检查清单可以直接用。首屏有且只有一个主角。相邻两层不能字号、字重、间距全相同。字号拉不开时，用字重或间距补。一屏超过三层，通常是构图问题。

编辑型层级：用留白，不用粗体

这条给长文、杂志版式、电子手册和博客用。官方把「编辑型」理解成像印刷美术指导那样安排节奏：入口、张力、停顿、打断、收束。

• 展示字和正文之间要有大落差，常见 3 到 5 倍。展示字 56 到 96px，常用细体或常规体，粗体像广告牌。
• 引文（pull quote）28 到 40px，整篇一个，最多两个。别做成带边框和底色的框。
• 正文里的加粗，每 400 字最多一两处。
• 正文行宽 60 到 70 字符，行高 1.6 到 1.7，不两端对齐。
• 章节间距要松紧交替。每节都一样，就是模板。

中文正文怎么取？官方没写明这条和 CJK 覆盖谁优先。我的理解是取交集：正文行高 1.7，标题字距 0。

10.4 只做好看的那一面：状态、表单、可访问性、动效

这四条管用起来对不对。模型最擅长交付最漂亮的那个状态，漏掉其余的。

状态覆盖：别只交付有数据的那一版

官方的话大意是，AI 设计最可靠的失败，是只交付有数据的那个状态。你让它做列表页，它给你一个填满的漂亮列表。空的、出错的、只有一条的，全没做。

每个会取数、转换或接收数据的界面，都要渲染五个状态。

状态	什么时候出现	必须有什么
加载	数据在路上	骨架屏、转圈或外壳；15 秒仍未完成，要有「比预期久」的提示
空	还没有记录，或查询没结果	标题、一句人话的解释、主按钮
错误	取数失败、服务端出错、校验被拒	白话原因、恢复动作、保留用户输入
有数据	主流程	设计原本画的那一版
边界	数据极多、字符串极长、可选项缺失、网络半通	版式不坏

表单再加三个：未触碰、已填且合规、提交中。空态不是空白，它有任务。首次使用要有标题、价值句和主按钮。搜索无结果要回显查询并给替代。错误绝不折叠成空态。

错误要答三问：发生了什么，为什么，你能做什么。「出了点问题」不算回答。

加载指示按预期时长选。300 毫秒内什么都不放。2 秒内放转圈或骨架。2 到 10 秒放贴合版式的骨架。10 秒以上放带取消的进度条。超过 60 秒停掉动画，报错并给重试。

验收用官方的渲染加截图测试：产物里每个列表、表格、卡片、表单、面板，五态齐不齐。边界场景要写具体。比如表格 1 万行，手机卡片标题 200 字且没头像，搜索只输入 1 个字符。提示词版是附录 A 的 Q3，它把边界拆成单条与大量两项。

表单校验：错误什么时候出现，比怎么出现更重要

这条管三件事：什么时候报错，错误怎么传给读屏软件，规则放在哪一端。官方给了一条把争论一刀切开的判断规则：字段失焦之后仍不合规，才报错。一旦合规立刻消失。没碰过的字段，永远不报。

展开是四条。第一次失焦时校验，不在聚焦时，也不在每次按键时。字段已出错后，改成输入时重新校验。提交时把焦点移到顶部的错误摘要，或第一个出错字段。服务端校验才是权威。

报错要具体。「输入无效」是文件点名的常见错误，该说哪条规则没过。出错后，用户已填的内容要保留。CSS 里用 :user-invalid，别用 :invalid，否则页面一加载就满屏红框。

检查办法很土：点进字段什么都不填，直接离开，看错误什么时候出现。再故意填错提交，看焦点去了哪、内容还在不在。

可访问性底线：低于 WCAG 2.2 AA，就算欠债

官方把工作目标定在 WCAG 2.2 AA，说低于它是「craft 债」。法定底线按地区不同。文件里列了欧盟、美国几种情形，其中部分条目标注截至 2026 年 5 月。引用前请回官方原文，本书没有逐条核对法规。

最常被说错的是两个数字。点击目标的 AA 标准是 24×24 CSS 像素，44×44 是 AAA 级的加强版。iOS 建议 44pt，Material 建议 48dp。大字的门槛是 18pt，约 24px，不是 18px。

• 对比度：正文 4.5:1。大字、界面组件和焦点指示 3:1。
• 焦点：去掉轮廓又没有替代，官方叫三重违规。用 :focus-visible。
• 标签：占位符不能当标签，一输入它就消失了。
• 原生优先：用 button，别用带 role 的 div。没有 href 的 a 不是链接。
• 结构：写 lang，一个 h1 不跳级，用地标元素，图片要有 alt，图表要有文字替代。
• ARIA：原生元素解决不了才用，官方的话是「Never invent ARIA」。

这条没有自动检查。办法是：用键盘 Tab 从头走一遍，看焦点轮廓在不在。再用浏览器的开发者工具查对比度。

动效纪律：先问该不该动

官方引用 2002 年的一篇综述：把对照条件拉平以后，动画并不比静态图更利于教学。站得住的用途，是帮用户在空间、时间或状态里定向。比如页面切换、容器展开、进度反馈。别为了教学、装饰、显得高级或填补沉默而动。

时长有数字。50 到 100 毫秒做即时反馈。150 毫秒是状态确认的默认值。进场 200 到 300 毫秒，跨屏 300 到 500 毫秒。非跨屏的微交互别超过 500 毫秒。常见的悬停别超过 200 毫秒。手机上再短 20% 到 30%。

最容易漏的是减弱动效。位移、缩放、旋转、视差，都要遵守 prefers-reduced-motion。需要传达状态变化时，保留透明度和颜色的渐变就行。浏览器的视图过渡接口不会自动遵守它，要自己加。

另有两条。闪烁每秒不超过三次。循环动效超过 5 秒，要有暂停控件。庆祝动画只放一次，转圈 60 秒必须停。

检查办法：在导出的 HTML 里搜 prefers-reduced-motion。有位移动画却搜不到，就是漏了。PPT 里的动效怎么做，见 §08。

10.5 没想到的读者与场景：Laws of UX 和 RTL

Laws of UX：把「放什么、放多少」写成数字

前面的准则管渲染，这条管构图。它把有研究出处的认知规律，翻译成给 Agent 的指令。每条都以一个可执行的动作收尾。

举几个有数字的。一个决策页面，主选项放 3 到 5 个。定价页放 3 到 4 档，只推荐一档。设置页不超过 5 组。组内间距 8 到 12px，组间 32 到 48px，间距全一样等于没分组。

多步流程的进度要反映真实进度，不能伪造。整份文件标明是指导性的，没有自动检查。

RTL 与双向文字：只在可能出现阿拉伯语时声明

这条管从右往左的排版，只做中文和英文可以不声明。dir="rtl" 和 lang="ar" 要一起写。布局用逻辑属性，别写死 left 和 right。箭头和导航要镜像，时钟、刷新图标、媒体控件、图表横轴不镜像。阿拉伯文别加字距，会破坏连写。

10.6 硬检查：lint-artifact 查什么，查不到什么

反 AI 味那条的前言写明，有几条规则由 daemon 自动检查，检查器叫 lint-artifact。官方把命中自动检查的规则叫回归，不叫审美偏好。

它在哪里跑

每次保存产物时跑一遍。结果有两个去处。一是界面上的 P0、P1 徽标。二是一条回给 Agent 的系统提醒，让它下一轮自己改。命令行也有入口，v0.24.1 的源码里就有这个子命令。

od lint deck.html                  # 默认：有 P0 就退出码 1
od lint deck.html --fail-on p1     # 连 P1 一起算
od lint deck.html --json           # 机器可读的结果
od lint deck.html --agent-message  # 同时打印回给 Agent 的提醒块

它不调用模型，但 daemon 要在运行，连不上时退出码是 3。退出码 0 是干净，1 是达到阈值，2 是用法错误。这些读自 v0.24.1 的 cli.ts，我没有实际运行过。

它查什么

级别	规则 id	查什么
P0 必须修	purple-gradient、trust-gradient、ai-default-indigo	紫色渐变、蓝青渐变、默认靛蓝色值
P0	emoji-icon、left-accent-card、sans-display	emoji 当图标、圆角卡片加彩色左边线、标题被改成无衬线
P0	invented-metric、filler-copy	编造指标的英文套话、lorem ipsum 一类占位文案
P0	scroll-into-view、slide-theme-missing	会拽动预览框外页面的滚动调用；演示稿某页缺明暗主题类
P1 应该修	all-caps-no-tracking、external-image、raw-hex、accent-overuse、slide-rhythm	全大写缺字距、外部占位图、原始色值过多、强调色过多、连续三页同一主题
P2 最好修	missing-section-anchor	section 缺 data-od-id 或 data-screen-label

Craft 目录的 README 写的自动检查范围，是反 AI 味文件里的 P0 清单。源码里另有 P1、P2 几条，对应排版、颜色和演示稿。两处有出入，以源码为准。上表读自 v0.24.1 标签里的 lint-artifact。

它查不到什么

• 源码注释自称这个检查器「greppy」：用正则扫文本，不解析 HTML，允许误报。每条结果带一段原文，方便你核对。
• 强调色的阈值比准则宽。它只数样式表之外的 var(--accent)，超过 6 次才报。准则要求每屏 2 处。所以过了检查，不等于守住了准则。
• 编造指标和占位文案的正则，写的都是英文短语。比如 "10× faster"、"lorem ipsum"。官方没写明中文怎么办。我读源码的判断是，中文的「效率提升 10 倍」「示例文字」它抓不到，得你自己查。

10.7 自我批判：官方写了四组「五维度」，不是同一组

硬检查抓机械问题。「这一页有没有立场，重点落没落在该落的地方」，只有评审抓得到。先澄清一件事：官方仓库里有四处写了五个维度，但维度不一样。

出处	五个维度	怎么打分	怎么触发
评审模板（design-templates/critique）	哲学一致性（Philosophy）、视觉层级、细节执行、功能性、创新性	每项 0 到 10 分，输出带雷达图的 HTML 报告，附三栏清单：保留、要改、顺手能修	你要求「评审」「5 维度评审」「复盘」这类时触发
Design Jury（内部名 Critique Theater）	五位评审：Designer、Critic、Brand、A11y、Copy	综合分满分 10，默认以 8.0 为放行线，最多 3 轮，仍不达标就交出最好的一轮。Designer 只起草不打分，其余四位按 0.4、0.2、0.2、0.2 加权	规格里由总开关控制；v0.24.1 代码里的默认值是关闭
流水线里的 critique-theater	Craft、Critique、Brand、Accessibility、Copy	指令要求用普通文字汇报，明确说不要输出打分面板	插件流水线的一个阶段
传统路径的系统提示（discovery.ts 第 8 步）	Philosophy、Hierarchy、Execution、Specificity、Restraint	模型静默自评，每项 1 到 5 分，任何一项低于 3 分算退步，回头改最弱的一项再打一遍，通常两轮	生成流程的最后一步，不用你叫。OD Next 的提示词文件里我没找到这一步

第二、三行也互相矛盾。规格文档描述的是评分面板，原子能力的指令却要求不要评分面板。Design Jury 的默认值，v0.24.1 标签的代码里是关闭。规格的推出计划分四档，最后一档才把全局默认改成开启。界面文案里有它的面板用语，但我没找到设置页的开关，也没有打开桌面应用验证。

第四行是传统路径自带的一步。社区教程把评审模板的五项当成了这一组，两组名字不同，别混。README 的路线图里有一项条目。原文是「5-dim self-critique pre-emit gate」。它没说是哪一组，官方没写明，我的理解是更接近第四行。

日常用得上的是第一种，也是附录 A 的 Q1 对应的那一组。它的评分纪律值得照抄。

• 五个分数一个不能少，每个分数都要有证据，指到具体的元素、页码或类名。
• 不要平均抬分。分数取持续存在的最差一档，某页坏了，别因为别的页好就上调。
• 不要通胀。7 分是「强」，不是「可以」。总平均超过 8 分，官方说值得怀疑。
• 创新项允许低。生产交付物拿 5 分没问题，别惩罚恰当的保守。

什么时候叫它自我批判？同一份模板里，开头说可以在输出前自检。硬规则里又写，别在同一轮评审自己的产物，因为用户需要先看到它。两处不一致，我的建议是按硬规则来：先看第一版，再让它自我批判。

10.8 一套 10 分钟的检查流程

# 默认靛蓝（反 AI 味、颜色）
grep -n -i -E "#6366f1|#4f46e5|#4338ca|#3730a3|#8b5cf6|#7c3aed|#a855f7" deck.html
# 渐变（反 AI 味）
grep -n "gradient" deck.html
# 强调色用了几次（颜色：每屏最多 2 处）
grep -o "var(--accent)" deck.html | wc -l
# 有动画却没有减弱动效的分支（动效纪律）
grep -c "prefers-reduced-motion" deck.html
# 去掉焦点轮廓（可访问性）
grep -n -E "outline: *none|outline:none" deck.html

第三行数的是整个文件，包括样式表里的定义，只能粗查。官方检查器数的是样式表之外的。

10.9 这一节的结论

• 中文要多查一条 CJK 行高。标题 1.3 到 1.4，正文 1.7 到 1.8，先看封面标题。
• od lint 是报警器，不是闸门，而且只认英文套话，强调色阈值也比准则宽。
• 官方的「五维度」有四组，附录 A 的 Q1 对应评审模板那一组。先看第一版，再让它自我批判。

检查流程里的「导出的 HTML」，要从导出里拿。下一节讲交付：导出有哪些格式，媒体生成的凭据和账单怎么管，团队怎么一起用。

§11 导出、媒体、成本与团队：对象定格式，路径定账单

Delivery, Media, Cost and Teams

导出之前先想交付给谁，花钱之前先想走哪条路，协作之前先想谁能改。三个问题答对了，这一节剩下的都是细节。

2026 年 9 月 24 日，OpenDesign 发布 v0.24.1。官方发布说明的标题是 “World’s First Design Plan”。要点有三条。Go 档首月 $8。所有个人订阅档都支持 API 调用。新用户约有 $0.50 的免费额度。

这条发布说明是本节的起点。它说明一件事。用 OpenDesign 不再只有装桌面应用、接本地 Agent 这一种。账单也不再只有一种。社区教程里那张套餐表，写在这个版本之前，数据又来自一份没更新的页面。所以本节不用它，全部改用官网定价页。价格取自 2026 年 10 月 13 日的页面，10 月 15 日复核过，见 §11.5。

11.1 先问交付给谁，再选格式

同一份产物，导成不同格式，损失的东西不一样。导出是最后一步，也是最容易吃亏的一步。

官方对「能导出什么」有两种说法，而且不一致。README 的架构表列了五种格式。分别是 HTML、PDF、PPTX、ZIP、Markdown。视频另有 MP4。其中 HTML 素材内联，PDF 走浏览器打印，PPTX 由 Agent 驱动的技能生成。官网首页 FAQ 的口径窄一些，只有独立 HTML、PDF、PNG。幻灯片另可导出可编辑的 PowerPoint。FAQ 还明说，没有 Figma 导出。

本书按 README 列格式，按 FAQ 提醒你别指望 Figma。deck 的导出取舍和 PPTX 的证据，在 §08 8.6。下面这张表换个角度，按交付对象排。

格式	保住什么	丢什么	适合交给谁	作者结论
HTML（单文件，素材内联）	版式、动效、交互	外部素材要自己确认齐不齐	要接着开发、要网页分享的人	默认都存一份
PDF	版面稳定	动效和交互	审批、留档、投影备份	定稿后冻结一份
PNG	某一页的画面	所有可编辑的东西	贴进文档或聊天	只当预览用
PPTX	文字和形状多为原生可编辑，能在传统演示软件里打开	复杂的 HTML 视觉可能转不好	只用 PowerPoint 或 Keynote 的人	发出去之前先自己打开看
ZIP	整包素材	对方要自己组装	归档、整体移交	配一份说明再发
Markdown	文字内容	视觉全部丢失	只交接文字的场合	别拿它交付设计
MP4	视频成品	不能再改，要改得回源头重渲染	发布平台	源文件一并留着

官方 PPT 工作坊教程（2026 年 7 月 9 日）有一张导出表。PDF、PPTX、HTML 三行的取舍来自它。其余几行是我按格式性质补的，官方没有逐条写。

重点看 PPTX 这一行。官方几处说法不一致，证据见 §08 8.6。结论是：可编辑，不保真，发出去前自己打开看。

检查还有一个理由。2026 年 8 月 21 日的 v0.20.2 发布说明有一条改动。字体或图片一直加载不出来时，OpenDesign 不再等十分钟。它会停止等待，照样交出图片或 PDF。说明写的是图片和 PDF 导出，没提 PPTX。

对赶时间的人，这是好事。对不检查的人，这是坑。官方没写缺失的内容在成品里怎么呈现。我的理解是，缺的东西可能直接缺在成品里。PPTX 是否同样如此，说明没写。

对外用过的东西，我建议存两份。一份是源文件，以后要改从这里改。另一份是 PDF 或内联 HTML，冻结那一刻的样子。外部素材会失效，几个月后打开源文件，不一定还是当时的样子。

11.2 交给工程：真 HTML，加一份 DESIGN.md

README 的说法是，产物是真的 HTML 和 CSS。你可以把它交给 Cursor、Codex 或 Claude Code。它们能接着写成 React、Next 或 Vue。接得顺不顺，取决于你交出去的是什么。

你手上的东西	怎么交	作者结论
一个单文件 HTML 原型	直接给源文件	工程多半会重写，但有一个能跑的参照，比给截图省沟通
用了设计系统的一组页面	把 DESIGN.md 一起给；包里若带 tokens.css，也一起给	色值、间距、字阶能直接转成 CSS 变量；README 说较新的设计系统包才可能带 token 文件
要持续同步，不想每次导出再贴	用 MCP 把 OpenDesign 接给对方的 Agent	适合工程和设计同时在改的阶段

DESIGN.md 里写什么，§04 讲过。最后一行值得多说一句。README 写道，OpenDesign 自带一个 stdio 的 MCP 服务器。别的仓库里的 Agent 能直接读你本地项目的文件。包括 token 样式、JSX 组件和入口 HTML。官方给的理由是，反复导出再贴 zip，会打断工作流。

接法是一行命令。<agent> 换成你的 Agent 名，取值清单用 od mcp install --help 查，见 §02 2.3。

# 把 OpenDesign 作为 MCP 服务器接进另一个 Agent
od mcp install <agent>

macOS 自带的 od 可能盖住 OpenDesign 的 od，处理见 §02 2.3。

另一件事是 git。产物是文本文件，所以 git 管得住它。我的建议很朴素：每完成一步，提交一次。

# 每步一个提交，message 写清这一步改了什么
git add -A
git commit -m "deck: 第一版，按选定的参考图"

好处有两个。上一版和这一版差在哪，git diff 能精确回答。动效做过头了，回退那一个提交就行，前面的成果都在。

最后说发布。Cloud 定价页写明，四个个人档都包含「发布并分享」。社区教程里「每月云部署次数、超出每次 $2」的说法，现行定价页已经不再出现。发布的具体步骤我没试过，本书不写。

11.3 媒体：三条路，能用便宜的就别用贵的

OpenDesign 不只出静态页面。图像、代码动效、视频是三条不同的路。源头不同，改起来的代价也不同。

你要的	走哪条	产物的源是什么	作者结论
海报底图、封面、插图	图像生成	模型输出的位图	不满意只能重生成，别指望局部修
一段解释性的动画	代码动效（SVG 加 CSS）	代码	要换字、改色，改代码就行
产品短片、数据动画	HyperFrames，把 HTML 渲染成 MP4	HTML、CSS 和 GSAP 代码	数据变了，改源码再渲染一次

HyperFrames 是 HeyGen 开源的视频框架。README 说它被集成为一等公民。Agent 写 HTML、CSS 和 GSAP。框架用 headless Chrome 加 FFmpeg，渲染出 MP4。README 把结果称为确定性的。

它适合产品演示、数据故事、发布短片。需要实拍素材的活，不适合它。这是我的判断。

三条路排个优先级，我的排序是：能用真素材，就别用生成图。能用代码画，就别用位图。能用 CSS 动画，就别上 3D。每往后退一步，可控性和可改性都掉一档。动效怎么克制，见 §08。

图像：先看档位，再谈分辨率

2026 年 8 月 11 日的 v0.19.0 发布说明写道，订阅里包含三款图像模型。

• Seedream 5.0 Pro
• GPT Image 2.0
• Nano Banana 2.0

Agent 可以传多张参考图，也可以指定比例、分辨率和质量。前提是所选模型公开了这些参数。

定价页把这三款模型放在 plan models 额度池里。Go 档不含。Plus 页面标注最大 1K。Pro 标注最大 2K。Max 档的 Seedream 和 Nano Banana 标到 4K。GPT Image 2 标到 2K。要出印刷级大图，先看你在哪一档。

批量出图要防风格漂移，做法和提示词见 §12.7（案例 6）。

媒体生成的 key 放在哪

用自己的厂商账号出图、出视频、出音频，key 要存进一个叫 media-config.json 的文件。有几个事实要分清。

• 这个文件只存媒体生成（图像、视频、音频）各家的 key，不存对话模型的 key。
• 文件位置由环境变量决定。源码注释写的优先级，见下面的代码块。
• 环境变量的值会覆盖文件里的值。每家媒体厂商都有对应变量，例如 OD_OPENAI_API_KEY。想把 key 彻底挡在工作区外，就用环境变量。
• 文件是明文 JSON，没有加密。源码注释的理由是，daemon 只监听 127.0.0.1。

1. 设了 OD_MEDIA_CONFIG_DIR=DIR  →  读写 DIR 下的 media-config.json
2. 设了 OD_DATA_DIR=DIR          →  读写 DIR 下的 media-config.json
3. 都没设                        →  默认落在 projectRoot 下的 .od 目录里

桌面应用打包的 daemon 会设置 OD_DATA_DIR。所以桌面应用用户的这个文件，通常不在项目目录里。具体落在哪，官方 AGENTS.md 要求文档不要写死，本书照办。以你机器上的实际设置为准。

我的建议是：只要它有可能落进项目目录，就在 .gitignore 里把它排除。

# .gitignore
.od/media-config.json

媒体生成报 OD_BIN 缺失，或 daemon 地址是 :0 时，别续旧的 CLI 会话。从桌面应用里重新打开项目，daemon 才会注入新的变量。出处是仓库 QUICKSTART 的排错说明。

11.4 钱花在哪：先分清三条路径

2026 年 8 月 31 日，v0.21.1 发布。Home 上可以直接选 Local CLI 或 BYOK，不登录就能开始。三种起步方式的区别见 §02 2.1。这一节只问两件事：账单在哪，内容去哪。

所以「花多少钱」的第一个问题，不是选哪档，而是走哪条路。

路径	账单在哪	内容去哪	作者结论
Local CLI	那个 Agent 自己的订阅或 API 账单	隐私政策没单独写。官网首页 FAQ 说提示词和上下文发给你选的 Agent、模型厂商或 OpenDesign Cloud	已经有 Agent 的人，从这里起步最省事
BYOK	厂商账单，不消耗 OpenDesign 余额	官网隐私政策写明：留在本机，直发厂商，OpenDesign 不代理、不收集、不存储。与仓库 PRIVACY.md 有出入，见表后	没装 Agent、手上有 key 的人
托管（Hosted，OpenDesign Cloud）	OpenDesign 订阅额度	请求经托管网关，发往上游模型和基础设施商	不想管 key、愿意按月付的人

「内容去哪」一列，依据有两处。一处是官网隐私政策（更新于 2026 年 9 月 2 日），另一处是官网首页 FAQ。政策只写了本地 BYOK，没写 Local CLI。走托管路径时，OpenDesign 还会收集账号、用量和计费信息。

这里要纠正社区教程的一个说法：OpenDesign 自己没有服务器接这个流量。这句话只对 Local CLI 和 BYOK 成立。走 Cloud，请求就经过 OpenDesign 的托管网关。表里的「不代理」，指的是 OpenDesign 的服务器。你本机的 daemon 可能充当本地代理，见 §02 2.5。

本地路径下，内容不经 OpenDesign 的托管网关。但这不等于一条数据都不会发出去。v0.24.1 的 PRIVACY.md 写明，产品分析和质量追踪默认开启。开启时，截断并脱敏的提示词和回复，可能发给 OpenDesign 团队。介意的话，在 Settings → Privacy 里关掉。

官方几处说法不一致。官网首页 FAQ 说产品分析默认开启，可在 Settings → Privacy 关闭。README 说产品分析需要用户同意，脱敏的安全与可靠性遥测始终开启。官网隐私政策页没提对话内容这条通道，官方也没解释它和 PRIVACY.md 的关系。我只读了文档，没有在桌面应用里验证默认勾选状态。项目有保密要求的话，三处都查一遍。

11.5 Cloud 套餐：读额度，别只读月费

下面的价格取自官网 /pricing/，2026 年 10 月 13 日抓取，单位美元。10 月 15 日复核时，数字没变。促销价随时会改，下单前以页面为准。

个人档	首月价	标价 / 月	年付	月额度上限	并发任务	作者结论
Go	$8	$10	$84	$120	10	试水档，只有轻量模型
Plus	$16	$20	$168	$180	20	日常用，旗舰模型不全
Pro	$70	$100	$720	$480	30	复杂项目，页面标「最受欢迎」
Max	$120	$200	$1,176	$900	30	量大才划算，换来最低单价

重点看「月额度上限」这一列。它不是一个池子，是两个池子相加。

档	Design Plan 额度	plan models 额度	合计
Go	$120	无	$120
Plus	$160	$20	$180
Pro	$360	$120	$480
Max	$600	$300	$900

Design Plan 额度，给一组轻量、便宜的模型用，用量大。plan models 额度，给旗舰模型和图像模型用。定价页 FAQ 的规则分两条。轻量模型先花 Design Plan 额度，花完再动 plan models 额度。旗舰模型只能花 plan models 额度。

这条规则的后果很具体。Go 没有 plan models 额度，旗舰模型和图像模型都用不了。Plus 页面标成不含的旗舰模型有三个。

• GPT-6 Astra
• Claude Fable 5.1
• Claude Opus 5.5

模型名单变得很快，这是 2026 年 10 月 13 日页面上的写法。

其余规则，定价页 FAQ 写得很清楚。我归成一组。

• 额度按计费周期发放，不滚存。新订阅的 Design Plan 额度，从订阅开始起算，每 7 天重置一次窗口。
• 额度用完有三条路：升档、开自动充值、改用 BYOK。自动充值要先授权，并设一个月度上限。
• 只能升档，不能自助降档。取消是停止续费，已付周期内权益保留，之后账号回到 Free。年付取消不退款。
• 首月价只给新月付订阅，每个账号一次。年付不适用首月价。
• 个人订阅可以用 OpenDesign API Key。它能接 Codex、Claude Code、DSH、OpenCode、Hermes。它和 OpenDesign 本身共用额度，总量不超过卡片上那个数。
• 限时赠送的额度和加倍用量，只在 OpenDesign 内部有效。走 MCP、CLI、API 通路不适用。页面上的活动倒计时显示 0d 00:00:00，没有截止日期，我没把它们写进表里。
• Free 没有月度模型额度。它只支持 Local CLI 加 BYOK。BYOK 在所有档位，包括 Free，都能用。

11.6 控制成本：五条在每一条路径上都成立

官方没有公布每个操作的单价，所以我给不出「某某操作花几美元」。下面五条讲方向，不讲数字。

• 内容想清楚再生成。附录 A 里，理清故事的 P0 和逐页内容方案的 P2，标的都是任意 AI 对话里就能做。把便宜的对话放前面，把生成放后面。
• 局部改，不整页重来。整页重生成最费额度，这是常识，不是官方数字。怎么局部改，见 §08。
• 一轮只改一两处。一次改七处，它会大改一遍，你要整页重新验收。
• 图像和视频单独算账。图像模型在 plan models 池里，Go 档没有。批量出图之前，先出一张确认风格。
• 把稳定的活固化成技能。社区教程认为，这能减少来回沟通的轮次，长期最省。这条我没测过。固化的方法见 §09。

用了自动充值的人，再加一条。月度上限设成你愿意丢掉的数。上限在 Wallet 里随时能改，也能关。

11.7 团队：先用仓库，再看要不要买席位

团队协作有两层，别混在一起买。

第一层是共享的东西。品牌系统、技能、产物，这三样跟着仓库走，每个人带自己的 Agent 订阅。这一层用 git 就够，不用花钱。下面的目录名是社区教程的示例，不是 OpenDesign 的硬性约定。

team-design/
├── design-systems/
│   ├── our-brand/DESIGN.md
│   └── client-a/DESIGN.md
├── skills/
│   └── monthly-report/SKILL.md
└── artifacts/
    └── 2026-10/

第二层是产品内的协作。官方博客（2026 年 8 月 5 日）介绍了 v0.18.0。Team 工作区和个人工作区并排存在。项目移进 Team 工作区后，成员看到的是一份实时的只读镜像。评论双向流动，连只读的查看者也能评论。所有者保留编辑权。

设计系统、插件、技能，也能共享给 Team 工作区。账单记在当前所在的工作区上。

定价页对 Team 的描述与此一致。至少 3 个席位。角色分 Owner、Admin、Member。所有人可看可评论，只有项目创建者能编辑。

Team 席位档	每席每月含的模型额度	作者结论
Basic	无，只买席位	卖的是协作。每人已有 Agent 订阅时，我认为这档最实用
Plus	$20	额度很小，我的理解是给每人一点托管额度尝鲜
Pro	$100	页面默认展示这档，要用托管模型的团队从这里看起
Max	$200	个人 Max 的额度合计是 $900，官方没解释差别，我没查清，别直接类比

价格我只抓到默认展示的 Pro 席位。每席每月 $63，标价 $105，页面标 40% off。3 席每月 $189，首年 $2,268。其他席位档的现价没抓全，不写。

Enterprise 要联系销售。页面列出的内容有 SSO 与 SAML、实时协作、多人同时编辑项目和产物。还有团队产物库和统一账单。

这里有一处和社区教程不同。教程把实时共同编辑算在团队版里。现行页面上，Team 档是可看可评论、创建者编辑。实时协作和多人同时编辑，写在 Enterprise 下。想要多人同时改，先确认你买的那一档有没有。

能不能不装桌面应用，只用云端？

2026 年 9 月之前的社区教程答「不行」。现在的答案变了。Home 有三种起步：Local CLI、BYOK、Hosted。Hosted 需要账号和有额度的套餐。

但有两个限定。BYOK 能不能编辑项目里的文件，官方说法不一致，见 §11.2 的警示框。Hosted 能不能改本地文件，官方没写明，我没法替它回答。

想自己托管的团队，看 README。它给了 Docker 和 Sealos 两种部署写法，具体步骤以 README 为准。想让局域网访问，要显式设置 OD_BIND_HOST 和 OD_ALLOWED_ORIGINS。多人怎么共用一个实例，官方没有写，我也没试过。

11.8 这一节的结论

收尾说三件事。导出的格式看交付对象，PPTX 发出去前一定自己打开看。账单看走哪条路径。Local CLI 付给 Agent 的提供方。BYOK 付给模型厂商。Cloud 付给 OpenDesign。Cloud 的两个额度池要分开读。团队先用仓库，产品内协作的席位按需要再买。

这三件事和本书的主线同向：让你在动手之前就做出判断，而不是出了问题再补救。下一节是全书最后一个正文节，七个案例。每个案例都会用到这一节的某个选择，也会把前面十一节的防线串起来。

§12 七个案例与全书收束：案例会换，要拦的东西不换

Seven Cases and the Wrap-up

七个案例，覆盖 PPT 之外的主要产物。每个案例按同一个顺序写：场景、提示词、为什么这么写、验收。读完你会发现，它们拦的是同一批毛病。

2026 年 9 月 20 日，v0.23.0 重做了 Home。Home 的默认类型和切换规则见 §03 3.1。需求表单在重启后怎么续答，见 §03 3.4。

这次重做正好是本节的起点。每个案例都从 Home 开始。选类型，写提示词，答需求表单（如果出现），拿到产物，然后验收。前面几步，§03 已经讲过。最后一步是这一节的重点。

12.1 七个案例怎么读

先把话说在前面。每个案例的场景都是假设，不对应任何真实项目。提示词的骨架来自社区教程，我按本书的口径重写过。这些提示词，我没有逐条在 v0.24.1 里跑过。把它们当起点，别当保证。

案例	产出	Home 创作类型或入口	主要在防什么	作者结论
1 落地页	单文件 HTML 页面	Prototype（营销页是其下的子类）	三栏等分、空话文案	第一次用，先做它
2 草图转界面	一屏移动端界面	Prototype	自作主张重排布局	第二个做，两个都快
3 数据看板	带图表的看板	Prototype（看板是其下的子类）	一排 KPI 卡、没有基准的数字	想让同事看到价值，做它
4 品牌系统	一份 DESIGN.md	创建设计系统（Home 上的入口）	没有方向时的平均值	有真实项目，先做它
5 截图转代码	能接进项目的组件	Prototype，或走 Agent 加 MCP	写死的字面值、顺手装依赖	和案例 3 一起给工程看
6 海报与配图	一组风格一致的图	Image	风格漂移、乱码文字	门槛低，适合练手
7 HTML 视频	动效短片，导出 MP4	HyperFrames	镜头堆砌、一次做完	社区教程评为最难，放最后

「创作类型」一列的叫法，读自 v0.24.1 标签里的界面文案。英文界面有 Prototype、Image、HyperFrames 等。中文界面叫原型、图片、幻灯片、视频、音频等。另有一个 Create Design System 入口，中文叫「创建设计系统」。它在 Home 的快捷项里，不在类型列表里。v0.20.0 的发布说明里也有同样的类型列表。按钮文案以你的界面为准。

按你的情况挑，我的建议是三条。

• 第一次用：案例 1 到案例 2。两个都快，好坏一眼能看出来。
• 要用在真实项目上：先做案例 4。有了自己的品牌系统，后面每个案例的输出质量都会跳一级。这句话是社区教程的判断，§04 里我表示同意。
• 要给团队推广：案例 3 和案例 5。这两个最容易让产品和工程同事看到价值。

所有案例的共同前提

下面每个案例都有三个前提，缺一个就打折。第一，Agent 接通了（§02）。第二，需求表单出现时认真填了（§03）。第三，挑好了设计系统，或抽了自己的（§04）。

生成完之后，先跑四问。这四问是社区教程的习惯，我觉得比什么都管用。四问和各案例的验收清单，都来自 §10 与附录 A 的 Q2、Q3、K。

• 状态全不全？加载、空、错误、有数据、边界，五种各看一遍。这是 AI 设计最常见的失败。附录 A 的 Q3 就是为它写的。
• 数字是真的吗？示意数据有没有标注。
• 有没有 AI 味的成分？紫蓝渐变、通用图标、三栏默认、编出来的用户数。附录 A 的 Q2 是逐条清单。
• 手机宽度下崩不崩？

四问都过了，再谈好不好看。另外，附录 A 的 K 是一段通用约束块，粘在任何提示词末尾都行。下面各案例的提示词不再重复那几条约束，只写这个案例独有的部分。

12.2 案例 1：落地页，难点是说清卖什么给谁

场景

假设你要给一个新功能做一个说明页。可能拿去验证想法，可能给客户看方案，也可能是内部要一页说明。生成不难，难的是你说不说得清「卖什么给谁」。

提示词

做一个单文件 HTML 落地页。

产品：[一句话，它是什么]
受众：[谁会看，他们现在怎么凑合解决这个问题]
这一页要让他们相信：[只写一句]
主行动：[只写一个，要他们点什么]

结构：
1. 首屏：价值主张加主行动，不放第二个按钮。
2. [第二屏要证明什么]
3. [第三屏要证明什么]
4. 页尾：重复主行动。

语气：[用一个参照物，比如「像一份内部备忘录」]
篇幅：整页不超过 5 屏，桌面宽度 1440。
没有真实来源的数字，写占位符并标注，不要编。

[在这里粘贴附录 A 的 K 约束块]

为什么这么写

「他们现在怎么凑合」比「他们是谁」重要。它决定首屏的口气。他们有个凑合的办法，你要说的是「有更好的」。他们完全没办法，你要说的是「这件事现在能做了」。两种写法差得很远。

「相信」只能有一句。写三句，页面就会变成三个并列板块，读的人记不住任何一个。

篇幅和占位符是在拦两个默认动作。不限屏数，它倾向于把每段都做满。不限数字，它会顺手编。第一条拦的是铺满，第二条拦的是编造。

还有一个常见情况：三个功能被排成三张等宽的卡片，但其中一个明显更重要。补一句就行：

第二个能力是核心差异点，给它比另外两个更大的视觉分量，不要三栏等分。

验收

• 一个不了解产品的人，看首屏能说出它是什么。
• 主行动是唯一的，而且显眼。
• 每一屏都在推进说服，而不是罗列功能。
• 所有数字有来源，或者标了示意。
• 手机宽度下没有横向滚动。
• 没有紫蓝渐变、通用图标、编出来的用户数。

文案很空怎么办？社区教程的判断是，这通常不是生成的问题，是你给的输入里没有具体的东西。补一个真实的使用场景，一个真实的数字，一句用户原话，文案会立刻变实。这条我认同。

12.3 案例 2：手绘草图转界面，草图承载结构，不承载美感

场景

假设你脑子里有一个界面，比如一个任务列表。你说不清它，但能画个大概。草图能告诉它的，是有哪些块、各占多大、谁在上谁在下、哪个是主要动作。一个圆加一个方块，它读得出「这里是头像，这里是内容卡片」。

提示词

这是一张手绘的界面草图，请按它的结构做一个移动端界面。

草图里的元素对应：
- [左上的圆] = 用户头像
- [中间几条横杠] = 任务列表，每条是一个任务
- [底部的方块] = 主行动按钮
- [右上的小图形] = 筛选入口

用途：[这个界面是干什么的]
场景：[用户在什么情况下打开它]

要求：
1. 布局按草图。元素的相对位置和面积比例是设计决策，不要优化它们。觉得有问题，先告诉我，不要直接改。
2. 视觉按当前设计系统。
3. 状态做全：加载、空、错误、有数据、边界（只有一条、很多条都算边界）。
4. 示例内容要像真的，但要标注是示例，不要 Lorem ipsum。
5. 触摸目标不小于 44×44（社区经验，非官方规格；iOS 建议 44pt，WCAG AA 的下限是 24×24，见 §10，按你的平台规范调整）。

先只做这一屏。

为什么这么写

逐个说明草图元素对应什么，是最关键的一步。不说，它会自己猜，猜错了你要重来。花三十秒列出对应关系，比重生成两次划算。

「不要优化它们」必须写。它的默认倾向，是把你的布局改成更常见的形态。而你画这张草图，正是因为你想要那个布局。这是在拦「平均值」。

「先只做这一屏」是在控制范围。一次做五屏，你没法针对性地修。

验收

• 布局和草图对得上，元素位置没被挪。
• 五种状态都做了：加载、空、错误、有数据、边界。
• 示例数据标注了，没有 Lorem ipsum 残留。
• 在 375 和 430 两个手机宽度下都看过。
• 主要动作一眼能找到，拇指点得到。

12.4 案例 3：数据看板，先想清楚它回答什么问题

场景

假设你要给团队做一个每周都会打开的指标看板。难点不在图表，在你想没想清楚：打开它的人，想知道什么。注意，是「想知道什么」，不是「想看什么数据」。

想看什么数据	想知道什么	作者结论
日活、留存、转化率	昨天是不是出问题了	决定哪个数要放最大
各渠道成本	这个月预算还够不够	决定哪个数要报警
工单量、响应时长	现在要不要加人	决定看完之后做什么

重点看中间那一列。它决定什么该放大，什么该报警，什么可以折叠。左边那一列，只能给你一堆卡片。

提示词

做一个数据看板。

使用者：[谁会打开它，多久打开一次]
打开时想知道：[一个问题，一句话]
如果答案是「有问题」，下一步做什么：[具体动作]

数据：
[粘贴 CSV，或说明字段和含义]

布局：
1. 最上面一行回答核心问题，不超过 3 个数字。
2. 中间是支撑判断的图表，最多 4 个。
3. 下面是明细表，默认折叠。

约束：
- 每个数字配一个对比基准：环比、同比或目标值。
- 图表用当前设计系统的色板，不要用图表库的默认色。
- 纵轴从 0 开始。不是的话，写明理由。
- 状态做全：加载中、无数据、数据异常、只有一天数据。
- 示例数据要标注。
- 深色模式下，图表也用深色底。

为什么这么写

「下一步做什么」是最有用的一句。有了它，看板才知道在什么条件下变红，把哪个数字放最大。没有它，所有指标一样重要，等于都不重要。

对比基准是看板的第一条规则。「昨日订单 1,240」说明不了什么。加上「环比下降 18%」才是信息。这两个数字是假设的示例。

「不超过 3 个数字」是在逼你排优先级。一行放六个 KPI 卡，是最常见的失败，眼睛不知道该落在哪。这是在拦铺满。

官方的看板页给的流程是四步：列指标，选图表样式，接数据，对话式调整。上面这份提示词，是在它前面加了「问题」和「下一步」两层。

验收

• 打开三秒内，能回答那个核心问题。
• 每个数字都有对比基准。
• 图表配色和页面是一套，深色模式下不是白底。
• 加载、空、异常三种状态都有。
• 窄屏下，图表可以横向滚动，页面本身不横滚。
• 示例数据标注了。

图表太多怎么办？删。社区教程的经验是，超过 6 个图表，基本就没人看了（社区经验，非官方规格）。只留回答核心问题必需的，其余折叠或移到二级页面。

12.5 案例 4：从截图抽品牌系统，抽完要补，而不是重抽

场景

假设你们有一个已经上线的产品，手上有五六张界面截图，没有成文的规范。每次让 AI 做东西，你都要重述一遍主色、字体和圆角。这是全书投入产出比最高的一次操作，§04 已经讲了原理。

第一步，用附录 A 的 D1 抽出第一版 DESIGN.md。完整模板见附录 A，素材怎么挑、提示词为什么这么写、抽完怎么并排对照，见 §04。截图至少覆盖列表、表单、详情和带状态提示的页面。

这里只讲它之后的事。D1 会交回一份待补清单：截图里看不到的错误态、空态、深色模式。这份清单是下一个任务单。

提示词

我补了几张截图，对应 DESIGN.md 里的待补清单：
- [第 1 项，例如：表单的错误态]
- [第 2 项，例如：空列表的样子]

只更新这几项相关的条目，其余条目一个字都不要动。
更新完，列出你改了哪几行，每一处注明依据是哪张截图。
截图里仍然看不到的，继续留在待补清单里。

为什么这么写

「其余条目一个字都不要动」是这条提示词的核心。让它整份重写，你已经核对过的条目会被悄悄改掉，而你不知道改了哪里。

要求注明依据，是留给你核对的线索。每处改动都能回指到一张截图，你才能判断对不对。

「仍然看不到的继续留着」是在延续 D1 的老规矩。拦的是编造。AI 很愿意替你补一个看着完整、其实全是猜的错误态。

验收

• 待补清单的每一项，都有「已补」或「仍待补」的明确状态。
• 每处改动都有截图依据。
• 没被点名的条目逐字未变。把 DESIGN.md 放进 git，用 git diff 看最直接。
• 并排对照一次。删掉案例 1 提示词里所有关于色值、字体、圆角的描述，挂上这份系统重跑。出来的页面像不像你们自家的？

最后一条是本书补的验收办法，官方没有这样的步骤。它测的是系统有没有真的替你说话。

12.6 案例 5：截图或 Figma 转代码，先说清你要哪一层

场景

假设你要把一张设计稿，或者一张你喜欢的产品界面截图，变成前端代码。代码要能接进现有项目。「把设计稿变成代码」其实有三种意思。

你要的	一句话怎么说	交付形态	作者结论
一个能看的还原	「尽量接近原图的 HTML 还原」	静态 HTML，用来验证视觉	只适合对稿
一个能接着开发的骨架	「按结构生成组件，用我们的 token」	组件代码	大多数人要的是这个
一个能点的原型	「做成可点击的，状态做全」	带交互的原型	适合评审

不说清楚，你大概率拿到第一种，然后发现没法用。官方的截图转代码页讲的就是第二种。它把截图映射成可复用的组件和设计 token，而不是一堆绝对定位的 div。

提示词

下面是第二种，最常用的一条。

这是我们的 [Figma 导出 / 界面截图]。
请生成可以接进现有项目的组件代码。

技术栈：[React / Vue / 原生，写明]
样式方案：[Tailwind / CSS Modules / 其他]
设计 token：[粘贴 token，或指向 design-systems/你的品牌/DESIGN.md]

要求：
1. 用 token，不要写死颜色和间距的字面值。
2. 按结构拆组件，每个组件只管一件事。
3. props 命名跟我们现有的约定一致，例子：[贴两个真实的 props 名]。
4. 状态做全：空、加载、错误、禁用。
5. 语义化标签，键盘可达，必要的 aria。
6. 不要引入新依赖。确实需要，先问我。

先给组件拆分方案，再实现其中一个，我确认之后再做其余的。

为什么这么写

「用 token」是能不能接进项目的分水岭。生成的代码里全是写死的色值和像素，它就是一次性的。改主题的时候，要全部重来。

「贴两个真实的 props 名」比「遵循我们的代码规范」有用得多。给两个真例子，它能推断出规律。

「不要引入新依赖」，防的是它顺手装一个日期库、一个图标库。「先拆分，再做一个」防的是抢跑。一次生成十个组件，你得通读十个，才能发现约定不对。

有一整组页面要转，就分三步：先让它列出重复出现的组件和变体，不写代码。你确认清单后，实现基础组件。最后用这些组件拼页面。这样得到的是一套组件，不是五份互不相干的代码。

验收

• 代码里没有写死的颜色和间距。
• 组件拆得合理，不是一个巨型组件。
• props 命名符合现有约定。
• 状态完整，语义化标签用对了，键盘能操作。
• 没有偷偷引入新依赖。
• 在项目里真的跑起来了。最后这条要真跑，别只看代码。

交给工程之后怎么同步，见 §11.2。官方 README 还列了一个叫 od-figma-migration 的场景插件，我没用过，不评价。

12.7 案例 6：海报与配图，难点是一致，不是单张好看

场景

假设你要为一篇文章配四张图，再做一张活动海报。单张图谁都会生成。这个案例的价值在于，怎么让一组图看起来是一套，怎么让海报上的字是真字。

先做一件事：看你在哪一档。图像模型的可用性和最大分辨率，随套餐变化，见 §11.3。

提示词

第一段，先定风格，只出一张。

我要为一篇关于 [主题] 的文章配一组图，一共 [N] 张。

风格描述：
- 色彩：[例如：低饱和，深绿为主色，米色为底]
- 质感：[例如：有轻微颗粒，像丝网印刷]
- 构图：[例如：留白多，主体居中偏下]
- 光：[例如：单一光源，从左上]
- 抽象程度：[例如：几何抽象，不写实]
- 禁止项：不出现人物面孔，不出现任何文字、字母或数字，不要渐变

先只生成第一张，内容是 [第一张的内容]。
我确认之后，你再用完全相同的风格描述生成其余的，不要每张自由发挥。

第二段，确认之后批量。

风格确认。用完全相同的风格描述生成剩下的 [N-1] 张：
2. [内容]
3. [内容]
4. [内容]

每一张都复用第一张的风格描述，只改主体内容。
输出前自己检查：这几张放在一起，像不像同一个人做的。

第三段，海报上有字的话，用两层做。

第一层：生成一张背景图，纯视觉，不含任何文字。
风格：[沿用上面确认的描述]
构图：[留出文字的位置，例如：上方三分之一留空]

第二层：用 HTML 和 CSS 把文字排在这张图上。
主标题：[文字]
副标题：[文字]
字体和排版按当前设计系统。

为什么这么写

先一张，后批量。风格漂移是什么样，同 §07 7.4。两段式把「定风格」和「出图」拆开，你在中间有一个决策点。

禁止项最容易忘，也最有用。社区教程的说法是，图像模型生成的文字通常是乱码，放进正式材料很难看。所以海报上的字不让模型画，用 HTML 排。这样文字是真文字，能改、能选中、印出来清楚。

验收

• 所有图放在一起，看起来是一套。
• 没有任何一张图里出现文字。
• 色彩和你的品牌或文章调性一致。
• 尺寸和比例符合最终用途：封面、正文插图、社交卡片各不相同。
• 没有明显的 AI 痕迹，比如多余的手指、不自然的对称、糊掉的细节。
• 每张图都确实在表达它该表达的内容。

最后一条和 §07 的判据是同一个：图要解释论点，不是装饰。要用在印刷品上，提前说尺寸和精度，例如最终用于 A3 印刷、300 DPI。已经出了乱码的图，重做，不要试图修。

12.8 案例 7：HTML 视频，难点是分镜，不是渲染

场景

假设你要给一个新功能做一支 15 秒的发布短片，数据是示例。这类活适合用代码做：产品功能演示、数据动画、发布短片。涉及实拍素材的，不适合。

HyperFrames 的原理见 §11.3。它的好处是能改。数据变了改一个数组，文案错了改一行字符串，再渲染一次。

动笔之前，先写分镜。不写，出来的多半是一堆各自漂亮、连不起来的镜头。每个镜头写三件事：画面、文字、目的。

镜头 1（0:00-0:03）
画面：一份空白的周报文档，光标在闪
文字：「周五下午四点，周报还没写」
目的：让观众认出这个场景

镜头 2（0:03-0:09）
画面：几组数据自己飞进表格，排好版
文字：「数据已经在那儿了」
目的：把问题翻成答案

镜头 3（0:09-0:15）
画面：一键生成，周报定稿，光标离开
文字：「三秒，交」
目的：给出对比，这是全片的核心时刻

这是假设的示例分镜，不对应任何真实产品。重点是最后一行「目的」。没有目的的镜头，就是可以删的镜头。

提示词

做一个 15 秒的功能发布短片。

分镜：
[粘贴上面格式的分镜]

规格：
- 画幅 [16:9 / 9:16 / 1:1]
- 无声，音乐我之后自己加
- 色彩和字体按当前设计系统

动效：
- 全片用同一种入场节奏，别让每个元素各动各的
- 一个镜头里最多两个运动焦点
- 转场只用一种

约束：
- 每段文字停留足够久，我要能按正常速度读完
- 关键信息不放在画面边缘
- 示例数据在画面里标注

先只做前两个镜头，我看过节奏再做完。

为什么这么写

「先做前两个镜头」是控制返工的关键。节奏对不对，看两个镜头就知道。做完六个再发现整体太快，只能全部重来。这是在拦抢跑。

「最多两个运动焦点」对应观众的注意力。三个东西同时动，观众什么都没看清。这是在拦铺满。「最多两个」是社区经验，非官方规格。

「转场只用一种」和 §08 讲的是同一个道理。一致比花样重要。

文字停留的时间，别凭感觉。社区教程的经验值是每个字至少 60 毫秒，实际给 1.5 到 2 秒更稳。这是社区经验，非官方规格。

验收

• 每个镜头都说得出它的目的。
• 所有文字能读完。自己按正常速度念一遍，念得完吗？
• 一个镜头里没有超过两个运动焦点。
• 转场统一，关键信息不在画面边缘，示例数据标注了。
• 竖版的话，在手机上看清楚了。

两个提醒。视频渲染是这套流程里最重的操作，社区教程建议先用低分辨率确认节奏，最后再出高清。要配乐的话，单独处理：先做无声版，导出后在别的工具里加音轨。

12.9 全书收束：让产出不像 AI 做的

回到序里描述的那种页面。紫色渐变，居中的大标题，三张一模一样的卡片。

现在把七个案例的提示词再读一遍。你会发现，大半字数都在说「不要」。这不是啰嗦。附录 A 归纳过 AI 的三个默认动作：抢跑，铺满，编造。§04 讲过第四个：没有方向时，它只能给平均值。

七个案例里，每一句「不要」，拦的都是这四件事之一。而且拦的时机是固定的：动笔之前、生成途中、验收的时候。

案例	动笔之前，交代真东西	生成途中，一次一小步	验收时，逐条找证据
1 落地页	受众现状、一句「相信」、唯一主行动	整页不超过 5 屏	首屏能被外行读懂；数字有来源
2 草图转界面	逐个说明草图元素的含义	先只做一屏	五种状态；示例已标注
3 数据看板	它回答的问题，和下一步动作	顶部不超过 3 个数字	三秒内答出问题；每个数有基准
4 品牌系统	覆盖多种页面的截图	只更新被点名的条目	改动有依据；并排对照
5 截图转代码	先选要哪一层；给 token 和命名例子	先拆分，再做一个	在项目里真的跑起来
6 海报与配图	六项风格描述，加禁止项	先一张，后批量	放在一起像一套；图里无字
7 HTML 视频	写分镜，每镜头有目的	先做前两个镜头	按秒数念一遍台词

重点看每一行的三格。没有哪个案例靠一句神奇的提示词。每一个都是三步：先把真东西交代清楚，再让它一小步一小步走，最后拿证据验收。这是我对全书的归纳，官方没有这样总结过。

这也是本书从序到现在一直在说的那件事。需求表单出现时，是动笔前的交代（§03）。设计系统把平均值换成具体值（§04）。PPT 工作坊的十步，是把一次生成拆成可以检查的小步（§05 到 §08）。Craft 准则和自我批判，是验收时的证据（§10）。

这本书有边界，我说清楚。它是非官方的社区手册。官方口径互相矛盾的地方，我在正文里点了名。比如 Agent 适配器的数量和导出格式的清单。界面按钮文案没有逐项核对，范围见附录 D.4。OpenDesign 还在快速迭代。截至 2026 年 10 月 13 日，最新稳定版是 v0.24.1。v0.25.0 已于 2026 年 10 月 15 日发布，本书未覆盖，见附录 D。你读到这里时，细节可能又变了。

变得慢的是方法。如果你只想带走三件事，我的建议是这三件。

• 抽一套自己的品牌系统。案例 4，一次投入，之后每次生成都受益。
• 每条提示词末尾，粘上约束块。附录 A 的 K，除第 2 条按你的设计系统调整外，其余别删。
• 生成之后，先自查再看。附录 A 的 Q2 和 Q3，两条提示词，十分钟。

接下来是四个附录。附录 A 是提示词模板库，本书用到的提示词都在那里，整段复制就能用。附录 B 是术语表，加一张 Agent 适配器对照表。附录 C 是常见问题与排错，遇到卡点先翻它。附录 D 是版本时间线与来源，版本史和主要出处都在那里。

正文到这里结束。剩下的，是你的下一份产出。

附录 A 提示词模板库

Appendix A · Prompt Library

全书用到的提示词集中在这里，整段复制，把方括号换成你自己的内容。每条里都有几句专门拦着 AI 的话。建议一句都别删，只有约束块 K 的第 2 条例外，要按你的设计系统调整。

A.1 怎么用这一页

方括号里的内容必须换成你自己的。拿不准的地方写「未知」，别留空，也别让 AI 替你猜。

把这些提示词从头读一遍，你会发现大半字数都在说「不要」。这不是啰嗦。AI 的默认动作有三个：一次做完全套，每页都加，缺数据就编。每条提示词里的「不要」，拦的就是这三个动作。

它的默认动作	提示词里长什么样	出现在哪几条	作者结论
抢跑，一次做完全套	「先不要设计」「现在不要写 HTML」「不要生成完整的 PPT」	P0、P1、P1B、P2	最先丢的就是这类。丢了它，中间的检查点全没了
铺满，每页都加	「不要每一页都加」「不要给每个元素都加动效」	P5 到 P8、P10	好的 deck 有疏密。你不设上限，它就给你满屏
编造，缺数据就补	「没有真实来源，写占位符并标注」	P5、P7、通用约束块、反 AI 味自查	图表比文字更容易让人信，所以更要拦

还有一个共同写法。P4 到 P8、P10 的结尾，都要求它汇报做了什么。除 P6 外，其余几条还要它指出哪里需要你复核，或者哪个效果该去掉。这一句让产出可以被检查，别省。

A.2 总表

编号	什么时候用	在哪做	正文
P0	要理清故事和决策逻辑	任意 AI 对话	§05
P1	要一张图对比多个视觉方向	Image Mode	§05
P1B	想让 AI 帮你选方向	OpenDesign 对话或任意 AI 对话	§05
P2	要逐页的内容方案	任意 AI 对话	§06
P3	可以出第一版可编辑 deck	Deck Mode	§06
P4	第一版要向参考图靠拢	OpenDesign 对话	§07
P5	要真实 logo 和产品素材	OpenDesign 对话	§07
P6	只在讲不清的地方加配图	OpenDesign 对话	§07
P7	数据密集的页面要图表	OpenDesign 对话	§08
P8	想加克制的 3D 效果	OpenDesign 对话	§08
P10	给整份 deck 加全局动效和交互	OpenDesign 演示或对话	§08
D1、D2	从截图抽设计系统，补深色模式	OpenDesign 对话	§04、§12
Q1 到 Q3	五维度自我批判、反 AI 味自查、状态补全	OpenDesign 对话	§10
K	粘在任何生成类提示词末尾的约束块	OpenDesign 对话	§10、§12
S	把一次成功固化成技能	OpenDesign 对话	§09

A.3 PPT 工作坊：P0 到 P10

这一组来自官方的 PPT 工作坊教程（原文日期 2026-07-09）。本书重写成中文，句子和结构做了收紧。有三处和原文不同。

• 官方把 P8 叫 Prompt 8A，把 P10 叫 Prompt 10A。本书去掉字母。
• 没有 P9。第 9 步靠三种点选精修：Comment、Mark、Edit。不靠整段提示词，见 §08。
• 个别条款是社区教程加的，官方原文没有。P5 第 6 条、P6 第 7 条、P7 第 7 条，已在各自的说明里标出。

「Image Mode」「Deck Mode」是官方教程的叫法。它们和 Home 上创作类型的对应关系，见 §05 5.1。以你屏幕上的为准。

P0 · 先定这份 PPT 要说服谁

第 0 步，用在 §05，任意 AI 对话里就行。「观众」那一栏写状态，不只写身份。「产品经理，没听过这个项目，只有 5 分钟」，比「产品经理」有用得多。最后两行是关键，它把 AI 的第一反应，也就是直接写 HTML，拦在门外。

我要做一份关于 [主题] 的演示。

观众：
[他们是谁，对这件事已经知道多少，
 能给你多少时间]

观众要理解：
1. [必须理解的第一件事]
2. [需要的背景或证据]

我希望他们最后得出的判断或决定：
[相信什么 / 决定什么 / 去做什么]

请帮我理清：
1. 这份演示的核心叙事。
2. 最重要的那个论点。
3. 建议的页序。
4. 哪些信息该用画面表达，
   而不是文字。

先不要设计幻灯片，先不要写 HTML。
只谈故事、结构和决策逻辑。

P1 · 一张图里放多个视觉方向

第 1 步，用在 §05，在 Image Mode 里做。目的是用画面选风格，不靠形容词。很多人说不出自己要的风格叫什么，但看到六种并排摆着，一眼就知道不要哪几种。「不要拆成多张图」这一句别删，拆开就没法对比了。

我在准备一份关于 [主题] 的演示。
观众是：[观众]
目标是：[要促成的决定 / 核心论点]

请只生成一张参考图，在同一张图里
并排展示这份演示的 4 到 6 种视觉风格。

要求：
1. 每种风格都做成同一份演示的
   封面或关键页。
2. 各风格在版式、字体、配色、质感上
   要真的不同。
3. 每种风格标一个简短的名字。
4. 不要生成完整的 PPT。
5. 不要拆成多张图，全部放进一张，
   方便我对比。

要体现的内容：
[粘贴 5 到 10 条要点，或者大纲]

这张图只用来帮我选风格。

P1B · 让它帮你选方向

第 1 步的补充，用在 §05。官方教程提醒：别只挑最好看的，挑最能撑住你论点的。四个评估维度里，第 3 条和第 4 条最容易被忽略。一张漂亮的封面，不等于撑得起二十页内容。

这是包含多个风格方向的参考图。
我的主题是 [主题]，观众是 [观众]，
我要观众得出的结论是 [结论]。

请对比这些风格，推荐最合适的一个。

评估维度：
1. 它是否支撑我的论点。
2. 它是否适合这批观众。
3. 它撑不撑得起一整份 deck，
   而不只是一张封面。
4. 它给文字、图表、截图和 logo
   留的空间够不够。

先不要生成 deck。
只选方向，并说明理由。

P2 · 逐页的内容方案

第 2 步，用在 §06。最后一段很重要：先出一版只有文字的朴素预览，让你在视觉设计开始前审结构。方案出来后，先动手改，改标题、删弱页、合并重复的点，再往下走。结构错了，后面每一轮设计修改都更贵。

我要做一份关于 [主题] 的 PPT。

观众：[观众]
观众应该理解：[要理解什么]
观众应该得出的结论或决定：
[相信什么 / 决定什么 / 去做什么]

原始材料：
[粘贴笔记、转录、报告或要点]

请给出逐页的内容方案，共 [页数] 页。

要求：
1. 先不要设计，先不要写最终的 HTML。
2. 每页给出：页标题、一句话核心信息、
   主要支撑点、建议的视觉元素，
   以及这页需不需要图表 / logo /
   配图 / 截图 / 动效。
3. 每页只讲一个想法，文字不要多。

方案给完之后，再做一版朴素的 HTML 预览，
只把每页的文字放进简单版式，
让我在视觉设计开始之前先审一遍结构。

P3 · 第一版可编辑 deck

第 3 步，用在 §06，在 Deck Mode 里做。记得把 P1 选出的参考图一起附上。第一版不会和参考图完全一样。间距、质感、字阶都可能差一截，这是正常的，不是失败。「不要把整份 deck 做成静态图片」这一句保证你拿到的是能编辑的东西。

我要做一份 PPT。
请以附上的参考图作为视觉方向。

要求：
1. 还原我选定的那个风格方向。
2. 做成可编辑的、基于 HTML 的幻灯片。
3. 除非我另外说明，画幅比例与参考图一致。
4. 尽量保留页面文字和结构。
5. 不要把整份 deck 做成静态图片。
6. 每页要有完成度，但必须可读，
   能拿上台讲。

选定的视觉风格：
[描述你从图里选中的那个方向]

页面内容：
[粘贴定稿的逐页内容方案]

请生成第一版完整的 deck。

P4 · 对着参考图找差距

第 4 步，用在 §07。别说「再好看一点」，给它一个参照物。官方教程把这一步叫自我对比循环。它说 deck 往往从这一步起，才像设计过的，而不只是生成出来的。关键句是「不要只告诉我差在哪，请直接改好」。

这是最初那张参考图。
请把当前的 deck 和它做对比。

重点看：
1. 版式结构
2. 字体的字号阶梯与性格
3. 配色
4. 间距与对齐
5. 视觉层次
6. 质感、纵深与氛围
7. 每一页是否像属于同一套设计系统

不要只告诉我差在哪，请直接把 deck 改好。
保持可读、可编辑。

改完之后告诉我：
1. 你改了什么。
2. 哪几页改善最大。
3. 哪些地方还需要人工复核。

P5 · 换上真的 logo 与素材

第 5 步，用在 §07。占位文字换成真 logo，可信度立刻不一样。这条里最有价值的是第 6 项。找不到官方版本，就留占位符，不要自己画一个近似的。这一项官方原文没有，是社区教程加的。AI 画的「差不多的 logo」，比空着更伤可信度。

请通读整份 deck，找出应该放真实外部素材
的位置：公司 logo、产品 logo、应用图标、
平台界面截图、公开的产品图或界面参考。

要求：
1. 找到合适的官方素材或高质量版本。
2. 下载并插入到对应的页面。
3. logo 保持原有品牌配色，
   不要重新着色、变形或重新设计。
4. 不要每一页都加，只在能提升清晰度、
   可信度或识别度的地方加。
5. 插入的素材要和版式协调，不要塞满页面。
6. 某个素材找不到官方版本时，
   不要自己画近似的。
   留一个明确的占位符，并在总结里告诉我。

更新完之后告诉我：
哪些页加了什么素材，哪些需要我人工核实。

P6 · 只在有用的地方加配图

第 6 步，用在 §07。判断标准只有一条：这张图有没有让一个想法更好懂。没有，就删。下面最后一条「图中不要出现文字」，官方原文里没有，是社区教程加的。AI 生成的图里，文字常常是乱码，我建议保留。

请通读整份 deck，判断哪些页面加 AI 生成
的配图，会让演示更清楚或更有说服力。

要求：
1. 不要每一页都加。
2. 只在图能解释一个想法、支撑一个论点，
   或让关键时刻更容易被记住的地方加。
3. 已经有足够视觉内容的页面不要再加。
4. 图的风格和选定的 deck 风格保持一致。
5. 能生成图像，就直接生成并插入 deck。
6. 不能，就把我该拿去别的工具用的
   图像提示词写出来。
7. 图中不要出现任何文字。

每一张图，请告诉我：
页码、这张图的作用、用的图像提示词、
为什么这一页需要一张图。

P7 · 加 ECharts 图表

第 7 步，用在 §08。图表比文字更容易让人信，一根柱子画在那里，观众默认它是真的。所以第 5 项必须留。没有确切数据，就用明确标注的示意数据。再要它列出需要核实的点。「Y 轴从 0 开始」同样是社区教程加的，官方原文没有。它防的是把差距画大的老把戏。

请扫一遍整份 deck，找出哪些页面加
ECharts 图表会更容易理解。

可以考虑：对比、趋势、排名、市场份额、
采纳曲线、调研结果、前后指标、技术基准。

要求：
1. 不要每一页都加。
2. 每处选最合适的图表类型。
3. 图表样式和 deck 的视觉系统一致，
   不要用 ECharts 默认配色。
4. 有真实数据就用真实数据。
5. 缺确切数据时，用明确标注的示意数据，
   并告诉我这里需要核实。
6. 图表的位置要支撑这一页的核心信息。
7. Y 轴从 0 开始。

更新完之后告诉我：
哪些页加了图表、什么类型、用的什么数据、
哪些数据点需要核实。

P8 · 克制地加 Three.js

第 8 步，用在 §08。官方教程的提醒值得记住：deck 风格本来就花哨或信息密，就少用 3D。风格极简，一点低调的动态才能加出能量。最后一问「有没有哪个效果为了清晰该去掉」，是留给你删东西的机会。

请扫一遍整份 deck，找出哪些地方加一点
克制的 Three.js 效果会更好。
只在它能支撑这一页的信息时才用。

合适的用法：
开场页一个低调的动态背景；
某个核心概念的 3D 隐喻；
不影响可读性的粒子氛围；
帮助解释系统、网络或流程的空间可视化。

要求：
1. 不要每一页都加。
2. 避免视觉噪音。
3. 保持文字可读。
4. 保持性能合理。
5. 效果和 deck 的视觉风格一致。

更新完之后告诉我：
哪些页加了、加了什么、为什么它支撑这一页、
有没有哪个效果为了清晰应该去掉。

P10 · 全局动效与交互

第 10 步，用在 §08，而且必须放在最后。提前加了，后面每次改内容和版式都会把动画节奏打乱。约束里「必要信息不能藏在交互后面」这一条，是为了现场演示不出事。

请为整份 deck 加上演示级别的过场动画
和交互，让它从头讲到尾是流畅、完整的。

请加：
1. 页与页之间的切换效果。
2. 话题转换时的章节级转场。
3. 关键标题、卡片、图表、图片的入场动画。
4. 每页最重要那条信息的低调强调动效。
5. 只在合理的地方加悬停或点击交互。
6. 图表、卡片或视觉模块上适度的
   轻量交互细节。

约束：
1. 不要给每个元素都加动效。
2. 不要花哨，不要分散注意力。
3. 所有文字保持可读、稳定。
4. 图表的标签和数据始终可见。
5. 交互要简单到能在现场演示时使用。
6. 整份 deck 的动效节奏要一致。
7. 优化性能，演示模式下不能卡。
8. 必要信息不能藏在交互后面。

加完之后告诉我：转场风格、哪些页有自定义
交互、哪些页有特殊入场或强调动效、
哪些页的动效应该减少或需要人工检查。

A.4 设计系统

D1 · 从截图抽一套 DESIGN.md

用在 §04 和 §12 的品牌案例。整段模板以这里为准，素材怎么挑、抽完怎么对照，见 §04 4.4、4.5。这条的价值全在最后一段：拿不准的地方标出来，截图里看不到的列成待补清单。不加这段，AI 会很顺手地替你编出一个深色模式和一个错误态。看着完整，其实全是猜的。

这几张是我们产品的界面截图。
请抽出一份完整的 DESIGN.md，包含：

1. 调色板：主色、辅色、语义色
   （成功 / 警告 / 错误 / 信息）、中性色阶。
   每一级给十六进制值，
   并标注它在截图里出现在哪、占多大面积。
2. 字体：字族、字号阶梯（每级标用途）、
   字重、行高、字距。
3. 间距系统：基础单位、常用间距值、
   圆角、阴影。
4. 组件规范：按钮（主要 / 次要 / 文字型，
   各状态）、输入框（默认 / 聚焦 / 错误 /
   禁用）、卡片、表格、标签。
5. 动效性格：时长、缓动函数、
   哪些交互该有动效。
6. 语气：人称、句长、正式程度。

重要：
- 拿不准的地方明确标出来，
  不要猜一个值填进去。
- 截图里看不到的（错误态、空态、深色模式）
  列成待补清单，不要编。
- 主色的使用比例要写清楚：
  大面积背景色，还是只用于行动按钮。

D2 · 补深色模式

用在 §04 4.5。「不是简单反转」是这条的核心。深色界面靠亮度差分层，不靠阴影，把亮色反过来用，几乎一定难看。

这份 DESIGN.md 目前只有亮色。
请补一套深色模式的色值。

要求：
- 不是简单反转。中性色阶要重新设计，
  深色下的层次靠亮度差，不靠阴影。
- 主色在深色背景上的对比度要过 WCAG AA。
- 语义色在深色下也要保持可识别。
- 标注哪些颜色两个模式共用，
  哪些各有一套。

A.5 质量检查

这三条是 §10 的提示词版。界面里如果有 Critique 入口，优先点它。提示词版是退路，也可以拿来调整评审口径。

Q1 · 五维度自我批判

五个维度来自官方的评审模板，也就是仓库里的 critique 技能。官方模板输出带雷达图的 HTML 报告，提示词版只要文字就够。官方的五维度不止这一组，共有四组，区别见 §10.7。下表只列最容易混的两组，别混为一谈。

哪一组	五个维度	怎么打分	和下面提示词的关系
critique 评审模板	Philosophy、Visual hierarchy、Detail、Functionality、Innovation。模板里的中文名是哲学一致性、视觉层级、细节执行、功能性、创新性	每项 0 到 10 分	下面的提示词用的就是这组原名
传统生成路径里 Agent 默默自评的那组	Philosophy、Hierarchy、Execution、Specificity、Restraint	每项 1 到 5 分，低于 3 分要回头修	不是这一组

重点看最后一列。本提示词只用第一行那组。末句「不要在这一轮直接改」留给你一个决策点。有些扣分点只是它的审美偏好，你不一定同意。

对当前产物跑一次五维度评审：
哲学一致性、视觉层级、细节执行、
功能性、创新性，每项 0 到 10 分。

每个扣分点都要给出具体证据
（哪个元素、哪一处），不要泛泛而谈。

输出三栏：
- 保留：做对了的，说明为什么对
- 要改：必须改的，按严重程度排
- 顺手能修：五分钟内能改完的

不要在这一轮直接改，先给我看报告。

Q2 · 反 AI 味自查

十条清单对应一眼能认出 AI 的常见成分。有渐变、通用图标、编造的数字、默认三栏。还有均匀的信息密度、装饰性配图、空话文案。第 9、10 条对应 Craft 里的动效纪律和可访问性底线，见 §10。

这份清单是社区教程整理的，不是官方原文。我对着官方 Craft 的 anti-ai-slop 过了一遍。第 1、3 条在官方里是 P0 规则。原文说的是首屏的两色渐变，以及“10 倍快”“99.9%”这类编造指标。第 2 条最接近官方 P0 里的“拿 emoji 当功能图标”。它也接近 OD Next 基线里的“每个标题旁一个图标”。第 4、5 条官方没有这两句。最近的是 P1 的“千篇一律的章节顺序”和 P2 的“过于对称、缺少疏密变化”。两者都标明不自动检查。第 6 条官方 Craft 里没有，来自 PPT 教程的配图原则。第 7 条官方 P0 管的是占位文案。比如 lorem ipsum、“feature one”。没有“一站式”“无缝”这些词。

把当前产物按下面这份清单自查一遍，
逐条给出结论和证据：

1. 有没有渐变背景？有的话，
   是不是设计系统里定义的？
2. 图标是不是都对应具体功能？
   有没有纯装饰的？
3. 所有数字是真实的还是示意的？
   示意的有没有标注？
4. 版式是内容决定的，还是默认三栏？
5. 信息密度按重要性分配了，
   还是全篇一样？
6. 每张图有没有在解释某个点？
7. 文案里有没有「一站式」「无缝」
   「全方位」这类没有信息量的词？
8. 状态覆盖：空态、加载态、错误态、
   极值，有没有做全？
9. prefers-reduced-motion
   有没有被尊重？
10. 对比度有没有过 WCAG AA？

命中的直接改掉，改完告诉我改了哪几处。

Q3 · 状态补全

官方对状态覆盖的描述是：AI 设计最可靠的失败模式，是只做了有数据的那个状态。列表页只给你一个填满的漂亮列表。空的时候、出错的时候、只有一条的时候，全没做。官方列的必备状态有五种，和 §10.4 的五态一一对应。它们是 Loading、Empty、Error、Populated、Edge。下面提示词里的“单条数据、大量数据”是社区教程的拆法。官方把这类极端情况统称为 Edge，也就是边界。

这一版按 state coverage 的要求补全：
空态、加载态、错误态、单条数据、
大量数据，每一种都要有对应的渲染，
不要只做填满的那一版。

错误态要说明怎么恢复，
空态要给出下一步动作。

A.6 通用约束块与技能固化

K · 通用约束块

粘在任何生成类提示词的末尾。第 2 条要按你的设计系统调整。如果你选的系统本身就用渐变，改成「渐变只用设计系统里定义的」。其余几条建议原样留着。

约束：
- 所有数字如果没有真实来源，
  写占位符并标注，不要编。
- 不要渐变背景，用设计系统里的实色。
- 图标必须对应具体功能，
  没有对应的就用文字。
- 交互元素要有默认、hover、focus、
  disabled 状态。
- 手机宽度下不能有横向滚动。
- 对比度过 WCAG AA。
- 尊重 prefers-reduced-motion。
- 所有文字必须是真实文本节点，
  不能是图片。

S · 把一次成功固化成技能

用在 §09。最后一问最重要。从单次成功反推出来的技能，容易把偶然当成必然。让它自己标出哪些是推断的，你再决定哪些该留。同一类活做过三次、每次的提示词都差不多，再来写技能，更稳。

刚才那次生成的效果我很满意。
请把这次的做法固化成一个 SKILL.md。

要包含：
1. 这个技能适用于什么场景，
   不适用于什么。
2. 生成前必须问清楚的信息
   （这部分会驱动需求表单）。
3. 这类产物的标准结构。
4. 这次做对的那些具体判断，
   把它们写成规则。
5. 硬约束：什么绝对不能做。
6. 验收标准。

写完之后告诉我，哪些地方是你从这一次
的上下文里推断的，可能不适用于下一次。

A.7 这一页的结论

提示词到这里。每条提示词都在做同一件事：先拦住 AI 的默认动作，再让它动手。

下一篇附录 B 是术语表与 Agent 适配器对照。读提示词时遇到的名词，都能在那里查到。

附录 B 术语表与 Agent 适配器对照

Appendix B · Glossary and Agent Adapters

前半页是全书术语，按用途分组，每条一句话加节号。后半页是适配器对照表，官方的数字互相矛盾，所以直接列名单。

官网 Agents 页的标题写 22 篇指南。这是 2026 年 10 月 17 日抓取的结果。同一天，仓库源码里的运行时定义有 27 条。两个数字都没错，只是数的不是同一样东西。B.5 会把账对上。本附录的名单类数据比正文新。两边不一致时，以此页为准。

B.1 全书统一的叫法

同一个概念，官方在不同页面有不同写法。本书只选一种，你在别处读到右栏的词，指的是同一样东西。

本书用	别处可能见到	为什么这样选
需求表单	question form、discovery form	v0.23.0 的更新说明写前者，社区教程多写后者。中文只留一个词。它指生成前追问你没说清的事，讲解见 §03
Agent（适配器）	runtime、运行时	Agent 指真正干活的编码 Agent。适配器是 daemon 里描述怎么启动它的定义
Image Mode、Deck Mode	Image、Slide deck	前者是官方 PPT 教程的叫法，后者是 v0.20.0 起 Home 上的创作类型。以你屏幕上的为准

B.2 运行与接入

术语	一句话说清	见
daemon	本机后台服务（Express 加 SQLite），负责启动 Agent、读写项目文件	§01
Local CLI	Home 上的起步方式之一，用你机器上已装的本地 Agent	§02
BYOK	自带密钥，直连你选的模型厂商，不消耗 OpenDesign 额度。官网首页 FAQ 说它不能改你项目里的文件。内部怎么走，官方文档有两种说法	§02 2.5
Hosted	第三种起步方式。登录账号，用 OpenDesign Cloud 的托管模型，需要有额度的套餐	§02、§11
od mcp install <agent>	反方向的接法，把 OpenDesign 装进某个 Agent 的 MCP 配置。--print 先预览	§02
OD Next	v0.22.1 起，受支持的 Agent 上的原型、幻灯片等默认走它，可在 Settings → Labs 关	§03、附录 D
产物（artifact）	生成出来的真文件，放在你电脑上的项目文件夹里，不是画布图层	§01

B.3 资源与质量

术语	一句话说清	见
技能（Skill）	带 SKILL.md 的文件夹，规定一类活怎么干	§09
设计模板	可渲染的起点，类型有 prototype、deck，另有 image、video、audio 等	§09
设计系统	以 DESIGN.md 为核心的品牌包，可附 tokens.css、组件和素材	§04
插件（Plugin）	以 open-design.json 为入口的可移植目录	§09
Craft 准则	与品牌无关的渲染规则，官网 /craft/ 页列 11 条	§10
反 AI 味（anti-slop）	Craft 里的一条。部分规则由 lint-artifact 自动检查，其余是指导	§10
状态覆盖	Craft 里的一条，加载、空、错误、有数据、边界五种状态都要渲染出来	§10
Critique	对产物打分的评审。官方的五维度共有四组，区别见 §10.7。这里指 critique 评审模板那组：哲学一致性、视觉层级、细节执行、功能性、创新性，各 0 到 10 分。传统生成路径里 Agent 默默自评的是另一组：Philosophy、Hierarchy、Execution、Specificity、Restraint，按 1 到 5 分打	§10

B.4 界面与账号

术语	一句话说清	见
Comment、Mark、Edit	三种点选精修。钉反馈到元素，圈一块区域说版式，直接改文字或样式	§08
Rescan	Settings → Models & providers → Local CLI 里的按钮，重新扫描本机的 Agent	附录 C
Go、Plus、Pro、Max	OpenDesign Cloud 的个人四档，价格以官网 /pricing/ 为准，本书不抄	§11
Design Plan 额度	Cloud 套餐里两个额度池之一，另一个是 plan models 额度，要分开读	§11

B.5 适配器到底有几个：官方各处的数字

先看官方各处写了什么。每一行都是 2026 年 10 月 17 日当天抓到的原文。

出处	数字	数的是什么
官网 Agents 页	22	指南篇数，含 Gemini CLI
官网首页	21	写 21 Coding Agents，没说数什么
官网 /faq/ 页	17	「一方 BYOK 适配器」，列了 17 个名字
README 图片说明	26	本地 Agent，列了 26 个名字
README 路线图、架构图	27 与 26	27 条运行时定义，26 个不同的可执行文件

27 和 26 的差一，官方写得清楚。byok-opencode 与 OpenCode 共用一个可执行文件。

22 和 26 的差别，官方没写明，我的理解是这样。Gemini CLI 有指南页。但 docs/agent-adapters.md 写明，它的本地生成运行时已退役。去掉它剩 21 篇。再加 B.7 列的五个，正好 26。这笔账是我对出来的，官方没有这么写。官网首页的 21 和官网 /faq/ 页的 17，我对不上。

10 月 13 日的 README 里还有一张对比表，写的是 25 个。这张表在 10 月 17 日的 README 里已经删掉，所以上表没有。除了 /faq/ 页的 17，上表其余数字都落在 21 到 27 之间。本书其他地方统一写「20 多个」。这一页给名单，你自己数。

B.6 对照表：官网指南页上的 22 篇

登录方式照抄指南页的一栏。栏名是 Accounts and Authentication。指南页自己标的核对日期是 2026 年 9 月 6 日。只有 Codex 一篇是 9 月 11 日。

Agent（厂商）	指南页写的登录方式	可执行文件	README 兼容表
Codex（OpenAI）	ChatGPT 登录，或 OpenAI key	codex	有
Claude Code（Anthropic）	Anthropic key，或 Claude 订阅	claude	有
DeepSeek Harness（DeepSeek AI）	DeepSeek key，或已配好的凭据	dsh	有
OpenCode（Anomaly）	在 OpenCode 配置里填厂商 key	opencode-cli，备用 opencode	有
Grok Build（xAI）	SuperGrok OAuth，或 xAI key	grok	无
Cursor Agent（Cursor）	Cursor 账号，用你自己的厂商 key	cursor-agent	有
DeepSeek TUI（DeepSeek）	DeepSeek key	deepseek	无
Hermes（Nous Research）	厂商 key，默认 xAI	hermes	有
Antigravity（Google）	Google 个人账号，公开预览期免费	agy	有
Kimi CLI（Moonshot）	Moonshot key	kimi	有
Qwen Code（阿里）	DashScope 或 Qwen key	qwen	无
Trae CLI（字节跳动）	自己的模型厂商 key	traecli	有
Qoder CLI（阿里）	Qoder 账号	qodercli	无
Mistral Vibe CLI（Mistral AI）	Mistral key，或本地模型	vibe-acp	有
Gemini CLI（Google）	Google 账号（免费档），或 Gemini key	源码里没有这个运行时	无
GitHub Copilot CLI（GitHub）	Copilot 订阅	copilot	有
Kilo（Kilo Code, Inc.）	自己的厂商 key，或 Kilo 网关	kilo	无
Aider	自己的厂商 key，或本地模型	aider	无
Pi（社区）	厂商 key，或用 /login 订阅登录	pi	有
Kiro CLI（Amazon）	AWS Builder ID、Google、GitHub 等	kiro-cli	有
Devin for Terminal（Cognition）	Devin 账号，不是 BYOK	devin	无
DeepSeek Reasonix（社区）	DeepSeek key	reasonix	有

兼容表给每个 Agent 一条 od mcp install 命令。取值是小写名字，如 claude、codex、cursor。DeepSeek Harness 例外，它用 od agent setup deepseek-harness。第四栏写「无」，不等于不能用。名字我按相近对应，如 Cursor 对 Cursor Agent。

B.7 指南页没有，但源码或 README 里有的

名称	出现在哪	怎么接
Vela、Amp、CodeBuddy、MiMo Code、AtomCode	源码，README 图片说明	可执行文件依次是 vela、amp、codebuddy、mimo、atomcode
BYOK OpenCode	源码	与 OpenCode 共用可执行文件，是用 API 的兼容档
Claude Desktop、Raven、OpenClaw、Cline、VS Code + Copilot	README 兼容表	只能经 MCP 接入，源码没有对应运行时。Claude Desktop 的自动配置只支持 macOS 和 Windows

B.8 怎么挑，换了会丢什么

这两个问题 §02 的 2.4 节已经答过。先看你在付哪份钱。换 Agent 基本不丢东西，只有凭据每家一份。这里不重复。

补一条 §02 没写的。B.6 的登录方式一栏，是挑 Agent 时最该扫一眼的列。你手上没有的账号，那一行就可以先划掉。

B.9 这一页的结论

名单会变，官方每周都在发版。你读到这里时，Agents 页上的篇数很可能已经不是 22。下一篇附录 C 按症状查问题。Agent 接不上的那几条，会回到这一页的对照表。

附录 C 常见问题与排错

Appendix C · FAQ and Troubleshooting

按症状找。每条给原因和做法，最后一栏是正文里讲它的节号。写「正文未涉及」的，只在本附录里讲。官方有记载的我标了出处，没有记载的是我的建议。

仓库的 QUICKSTART.md 有一节排错，共 8 条。这是 2026 年 10 月 17 日抓取的结果。官网 quickstart 页另有 5 条短清单。仓库里还有一份 Windows 排错文档。C.2 和 C.3 的条目主要出自这三处。这些排错条目比正文新，两边不一致时，以此页为准。

C.1 先做三件事

• 对版本。最新稳定版是 v0.24.1。这是截至 2026 年 10 月 13 日的口径。10 月 15 日 v0.25.0 已发布，本书没有覆盖，见附录 D。教程和你的界面对不上，先怀疑版本差。
• 对起步方式。Home 上有 Local CLI、BYOK、Hosted 三种。很多问题出在选错了路，见 §02。
• 对环境。源码版跑 pnpm tools-dev check，它汇总状态、最近日志和常见诊断。桌面应用点 Rescan，它在 Settings → Models & providers → Local CLI 里。

C.2 装不上

症状	原因与做法	见
Windows 安装包弹出 Windows protected your PC	官方说这是预期现象，v0.24.1 标签里的排错文档写明 Windows 安装包没有代码签名。点 More info，再点 Run anyway。只对从 open-design.ai 或 GitHub Releases 下载的包这样做	§02
pnpm install 报 EBADENGINE	Node 大版本不对。仓库要求 ~24，Node 22 不支持。装好后用 node -v 确认	§02
pnpm 找不到或版本不对	仓库钉在 10.33.2。macOS、Linux 用 corepack enable。Windows 原生下 Corepack 可能报 EPERM，改用 npm install -g pnpm@10.33.2	§02
提示 Ignored build scripts	pnpm 10 默认拦截构建脚本。运行 pnpm approve-builds，批准后重跑 pnpm install	§02
Windows 上 better-sqlite3 编译卡住	Node 24 下它没有 Windows 预编译包，要现场编译，约两分钟。先装 Visual Studio Build Tools 2022，勾上 C++ 桌面开发，新开 PowerShell 再装	§02
换 Node 版本后 better-sqlite3 加载失败	重新编译：pnpm --filter @open-design/daemon rebuild better-sqlite3。需要 python3、make 和 C++ 编译器	§02
端口被占	先 pnpm tools-dev stop。不行就用 --daemon-port 和 --web-port 换端口。开发端口默认动态分配，终端里的数字只是示意	§02
macOS 上 od 命令不对	系统自带 /usr/bin/od，可能盖住 OpenDesign 的。桌面应用用户用 Settings → MCP server 里的片段，那里写的是绝对路径	§02

C.3 Agent 接不上

先回附录 B 的对照表，确认你的 Agent 在名单上，登录方式没填错。再看下面。

症状	原因与做法	见
提示 not installed，或 no agents found on PATH	装好 CLI，让它的目录进入 daemon 进程的 PATH，再点 Rescan。macOS 上从图标启动时 PATH 很短，npm 全局目录和 Homebrew 的 bin 常不在里面。不想折腾就改走 BYOK	§02
Claude Code 退出码为 1	OpenDesign 启动得了 claude，但那次运行没出结果。在同一个环境里跑 claude auth status --text。多半是登录失效，运行 claude 后用 /login。Windows 的 PowerShell 和 WSL 各有一套凭据，要在同一个环境里登录	§02
聊天接口报 500	看 daemon 终端末尾的 stderr。多半是 CLI 拒绝了参数，各家参数写法不同，去 runtimes/defs/ 看对应定义	§02
Codex 加载了过多插件上下文	用 OD_CODEX_DISABLE_PLUGINS=1 pnpm tools-dev 启动，daemon 起的 Codex 会带 --disable plugins	§02
内网网关报 Internal IPs blocked	daemon 默认拦私网地址，防 SSRF。你的 LiteLLM 或 Ollama 在内网，就用 OD_ALLOWED_INTERNAL_HOSTS 把主机加进白名单	§02
填了自己的 key，却不能改项目文件	这是 BYOK 的限制，官网首页 FAQ 写明了。要改文件，用本地 Agent	§02
媒体生成说 OD_BIN 缺失，或 daemon 地址是 :0	别续旧的 CLI 会话。从 OpenDesign 应用里重新打开项目，daemon 才会注入新的变量	正文未涉及

C.4 生成结果不对

症状	做法	见
预览一直不出来	先分清这次走哪种交接。Local CLI 看 Agent 有没有写出可预览的项目文件。BYOK 看回复里有没有一个完整的 <artifact> 块。再查 daemon 日志里第一个断掉的环节	§02、§03
重启或刷新后，需求表单和对话丢了	可能是版本较旧。v0.23.0 起需求表单可续答，见 §03 3.4。v0.24.0 起对话刷新后保持线程。先升级到 v0.24.0 以上再试	§03、附录 D
页面是图片，文字选不中	补一句「所有文字必须是真实文本节点」。附录 A 的约束块 K 里已经有	附录 A、§07
风格没跟上参考图	多半是图没真的传进去，或描述太笼统。核对附件，把方向的特征写具体	§05、§07
内容被裁掉	指出具体页码，让它按内容方案补回。别只说「有些内容丢了」	§06
改一处，坏了另一处	分轮改，每轮只动一两个维度，加一句「只改上面说的这些，其余不要动」	§07
数字是编的	用占位符规则拦住。已生成的，让它逐个列出来源，没有来源的标待核实	§03、附录 A
状态没做全，或一眼看出是 AI	用 Q3 补状态，用 Q2 做反 AI 味自查	§10、附录 A

C.5 导出与现场

官方 PPT 教程（原文 2026 年 7 月 9 日）写了取舍。PDF 或图片保留画面，不保留动效。PPTX 里复杂的 HTML 视觉，可能转不完整。下表前两行的前半句是官方的话，其余是我的建议。

症状	做法	见
PPTX 里很多效果没了	复杂的 HTML 视觉转不完整。最终要交 PPTX，就少做 3D 和动效，功夫花在排版和图表上	§08、§11
PDF 里动效和交互都没了	有图表、3D、动效的 deck，官方建议直接在 OpenDesign 里演示，PDF 只当备份	§08
图表在 PDF 里发糊	提示词里要求图表用 SVG 渲染，不要位图	正文未涉及
深色页导出 PDF 成一大块黑	先让它生成打印版：浅色底、深色字，去掉背景动效	正文未涉及
内联 HTML 太大，发不出去	图片是 base64 嵌进去的。先压缩图片，或改成外链加 ZIP	正文未涉及
现场打不开	永远带一份 PDF。现场的电脑、转接头和网络都不归你管	§08

C.6 常见问题

问	答	见
要花钱吗？	桌面应用免费，Apache-2.0。用本地 Agent 或自带 key，OpenDesign 不额外收费，你付给厂商。OpenDesign Cloud 的托管额度要买套餐	§11
一定要注册账号吗？	不用。Home 上选本地 Agent 或自带 key 就能开始。用 Cloud 才要账号	§02
我的内容发到哪？	本地 BYOK，隐私政策写的是提示词直发你选的厂商。Local CLI 隐私政策没单独写，官网首页 FAQ 说提示词和上下文发给你选的 Agent 或厂商。走 Cloud 时经官方托管网关。产品分析这一项，几处说法不一致：官网首页 FAQ 和 v0.24.1 的 PRIVACY.md 说默认开启，可在 Settings → Privacy 关闭，PRIVACY.md 还写明开启时脱敏后的提示词和回复可能发给 OpenDesign 团队；README 说要用户同意	§01、§11
不装任何 Agent，能用吗？	能。Home 上的 Hosted 用官方托管模型，要账号和有额度的套餐。BYOK 也行，但官网首页 FAQ 说它不能改项目文件	§02、§11
有 Linux 版吗？	没有预编译包，只能从源码运行	§02
官网说有 Windows 便携包，找不到	官网仍这么写，GitHub Releases 自 v0.13.0 起只有安装包	§02、附录 D
能导出 Figma 吗？	不能，官网首页 FAQ 明说没有。可导出独立 HTML、PDF、PNG，幻灯片另可导出可编辑 PowerPoint。复杂视觉可能转不干净，发出去前自己打开看，见 §08 8.6	§08、§11
能自己部署吗？	能。许可证是 Apache-2.0，README 给了 Docker 和 Sealos 两种写法，Docker 访问 http://127.0.0.1:7456	§02、§11
团队怎么共用？	先用仓库共享设计系统和技能。Team 套餐加的是产品内协作，成员可看可评论，只有项目创建者能编辑	§11
别的教程里的命令，这里没有？	命令以源码为准。官网 quickstart 页里有一条，源码里找不到对应分支，附录 D 有记录	附录 D

C.7 这一页的结论

排错的顺序我只信一条：先对版本，再对起步方式，最后才看日志。大半的问题死在前两步。

还不行，就去 GitHub Issues 搜同样的症状。要开新 issue，建议附上 pnpm tools-dev check 的输出。下一篇附录 D 是版本时间线与来源。你读到的每一条事实，都能在那里追到出处。

附录 D 版本时间线与参考来源

Timeline and Sources

本书每一条事实都能追到来源。这里列出版本节奏、素材构成，以及写作中发现的官方说法冲突。

D.1 版本时间线

OpenDesign 的 GitHub 仓库 nexu-io/open-design 创建于 2026-04-28。截至 2026-10-13，GitHub Releases 共 38 个版本，全部是正式版，最新稳定版是 v0.24.1。

下面是本书素材镜像（2026-09-04）之后的 6 个版本。日期为 GitHub 发布时间的 UTC 日期。

版本	日期	面向读者的变化
v0.22.0	09-08	引入 OpenDesign Arena，用于对比不同模型的设计质量与成本；Labs 里 Design Harness 开关会记住选择
v0.22.1	09-09	受支持的 Agent 上，原型、幻灯片、营销设计、HyperFrames 视频默认走 OD Next，可在 Settings → Labs 关闭
v0.22.2	09-10	只修桌面端更新重启的可靠性
v0.23.0	09-20	重做 Home：默认就绪于「原型」，切换创作类型时输入框内容保留；澄清问题重启后仍可续答
v0.24.0	09-22	对话在刷新后保持线程；BYOK 下拉新增 Novita AI；修 Windows 首次安装打不开
v0.24.1	09-24	推出 Go 档订阅；所有个人订阅层支持 API 调用，可给 Codex、Claude Code 等使用；新用户有少量免费额度

09-24 之后到事实截止日（10-13）没有新的正式版。v0.25.0「OpenDesign Motion」已于 2026-10-15 发布，晚于本书的事实截止日，书里没有覆盖。同期 README 也改过：标语改成 The 1st Collaborative AI Design Agent Workspace，含「25 CLIs + BYOK」的对比表被删掉。用新版时，请以官方最新说明为准。

D.2 本书的素材构成

来源	用途	时点
官方 GitHub 仓库 README 与源码	产品定义、安装方式、命令、许可证。命令以源码为准	2026-10-13
GitHub Releases	版本时间线	2026-10-13
官网 open-design.ai（含 /pricing/、/craft/、下载页）	定位、套餐与价格、Craft 准则	2026-10-13
官网资料镜像（201 篇）	概念与细节的底稿	2026-09-04
官方「AI PPT 工作坊」教程	Part 2 的主线	原文 2026-07-09，成稿时仍在线
社区中文教程站（44 篇）	章节结构与经验参考	2026-09-04
v0.24.1 标签源码与界面文案	需求表单、导出、Craft 与检查器的核对	2026-10-15 至 10-17
官网定价页复核、Agents 页与 README 重抓	附录 B、C 与 §11 的复核	2026-10-15 至 10-17

D.3 写作中发现的官方说法冲突

拿 09-04 镜像和 10-13 的线上现状逐条比对，共发现 18 处说法已失效或本来就有误。写作时对照 v0.24.1 标签源码，又核出几处。下面是影响最大的几条，本书一律按右栏处理。

说法	冲突在哪	本书怎么处理
Craft 共 12 条	官网现列 11 条；第 12 项「Future Craft Sections」在仓库里是占位文件	写 11 条
支持 21 个 Agent	官网首页 21、Agents 页 22 篇指南、README 写 25 或 26 个 CLI	写「20 多个」并点出处
应用免费，没有订阅	官网 FAQ 页仍保留这句；定价页明确列出 Cloud 付费套餐	以定价页为准：桌面应用免费，Cloud 托管额度收费
仓库里的 pricing.md 套餐表	至今未更新，内容与 09-04 镜像逐字相同，和现行定价页不符	不用，价格只取现行定价页
od skill run 命令	官网 quickstart 仍这么写，但 v0.24.1 标签源码里 od skill 只有 install、list、show、uninstall 四个子命令	不收录，改用 README 里有的 od plugin apply
必须本地装 Agent 才能用	现在 Home 提供 Local CLI、BYOK、Hosted 三种起步	写三种起步，分别说明限制
OpenDesign 自己没有服务器	只对本地路径成立；走 Cloud 时经官方托管网关	加限定条件
本地路径下 OpenDesign 不收集内容	官网隐私政策只写了 local BYOK；仓库 PRIVACY.md（v0.24.1）写明产品分析默认开启，开启时脱敏后的对话内容可能发给官方团队	写明默认开启与关闭方法，点名几处不一致
官网主标语 Vibe Design Workspace	现为 The First Collaborative Design Agent Workspace	按新标语写，协作是新主轴
需求表单每次都会弹，不能跳	v0.24.1 源码：OD Next 路径只在答案会改变结果时才问，最多一轮一到三题；传统路径一张表最多五题	改成「表单弹出来时别原样交上去」
Gemini CLI 可以接	官网首页和 quickstart 仍列；适配器文档说本地运行时已退役，v0.24.1 的运行时注册表里也没有	写明官方口径不一致
传统路径五维度是「理念、视觉层次、细节、功能、创新」	那是 critique 评审模板的五项（模板原名「哲学一致性、视觉层级、细节执行、功能性、创新性」）；传统路径自评是 Philosophy、Hierarchy、Execution、Specificity、Restraint。官方共有四组五维度	分开写，见 §10.7
PPTX 是原生可编辑，或 PPTX 是截图为底	v0.24.1 导出窗口两种都有：可编辑模式默认并标推荐，界面自注「非像素级还原」；截图模式每页一张图。可编辑模式最早见于 v0.15.1	写「可编辑，不保真」，见 §08 8.6
导出格式	README 写 HTML、PDF、PPTX、ZIP、Markdown；官网 FAQ 写 HTML、PDF、PNG、可编辑 PPTX，并说明没有 Figma 导出	两处口径都点名出处

D.4 未能核实、需要你自己确认的

• OD Next 默认开启后，PPT 工作坊的界面和流程是否有变化。官方工作坊原文写于 OD Next 默认开启之前，Part 2 的按钮名称请以你手上的版本为准
• 桌面应用里的实际按钮文案。本书依据的是 release 记录和文档，没有逐个核对 v0.24.1 的界面
• Windows portable zip 是否还有官方托管。GitHub Releases 从 v0.13.0 起只提供安装包
• Team 各席位档的单价。定价页未完整列出

D.5 编写纪律

纪律	原因
价格只用现行定价页并标日期	机器可读的 pricing.md 已过时
会变的数字不写	star、贡献者、插件数量都在变，官方口径也不一致
命令只写源码里有的	文档和源码已经出现分叉
官方说法冲突时点名出处	不替官方下结论，让读者自己判断

D.6 免责声明

本书为非官方社区手册，与 OpenDesign 的维护方 Powerformer, Inc. 无隶属关系，不代表官方立场。

OpenDesign 以 Apache-2.0 许可证开源；仓库内个别模板和技能保留各自的许可证（如 MIT），使用时以各自的许可文件为准。

产品功能、套餐与价格以官方最新说明为准。官网：open-design.ai　仓库：github.com/nexu-io/open-design