延伸阅读
OpenCode 延伸阅读
已发布指南中列出的 OpenCode 设计工作教程、文档和演练。
OpenCode 
OpenDesign 用 OpenCode
在 OpenDesign
做设计。
如何在 OpenDesign 中使用 OpenCode 设计界面：在生成任何内容之前绑定 design.md、你选择的提供商、一个从 brief 到审阅后文件的共享收件箱任务，以及开始前需要了解的限制。
一个完整的 OpenCode 设计任务
一个 OpenCode 设计任务，从简报落到界面
一个设计任务贯穿整个闭环：你交出去的需求简报与约束、返回给你的产物，以及在你宣布完成之前仍然需要做的检查。下方界面是为本页制作的示意性示例；它不是一次真实记录的 OpenCode 运行。
1设计 Brief 与约束条件
Brief设计一个共享团队收件箱：带负责人的会话列表、一个会话线视图，以及一条用于展示客户上下文的右侧栏。在生成之前绑定 design.md 系统。覆盖桌面端和手机端。
- 设计系统design.md tokens；Albert Sans，单一绿色强调色
- 断点1440px 桌面端与 390px 移动端；不得出现横向滚动
- 交互负责人筛选、会话线切换、上下文侧栏开关、回复操作
- 输出一个自包含的 HTML 文件，带有稳定的
data-od-id挂钩
2谁做什么：你、OpenCode 和 OpenDesign
- 你
你撰写需求简报、选择设计系统，并设定验收标准。
- OpenCode
OpenCode 规划布局，编写 HTML、CSS 和 JavaScript，然后在你提出要求时进行修改。
- OpenDesign
OpenDesign 提供设计系统与技能，渲染预览，并把每个版本都作为项目中的一个文件保留下来。
- 审查
交接之前，检查视觉层级、8px 网格上的间距、两个断点，以及每一项交互。
3OpenCode 产物：1440px 与 390px 下的团队收件箱
4交付前审查
Layout
网格与间距
三个面板对齐 8px 网格；上下文侧栏先于会话线折叠。
Hierarchy
视觉层级
负责人和主题先行；强调色保留给“等我们处理”。
Responsive
移动端布局
先列表，点按后进入会话线；上下文侧栏变成一个底部面板。
Interaction
交互检查
按负责人筛选、打开一个会话线、切换侧栏并发送一条回复。
Fit
OpenCode 适合哪里——以及不适合哪里
OpenCode 适用场景
- design.md 系统。 把一个品牌 DESIGN.md（Stripe/Linear/Airbnb 风格的规则）放进项目，OpenCode 就会生成与之匹配的 UI。
- UI/UX 技能。 设计智能技能带来数十种 UI 风格与配色，并会在编码开始之前生成一套设计系统。
- Figma & 可视化画布 MCP。 通过 MCP 连接 Figma 或可视化画布，得到一条从设计到代码的闭环。
- 模型品味。 OpenCode 是 BYOK，因此你可以选择最符合自己品味和预算的模型来做设计。
选择其他工作流的场景
- 你需要可编辑的矢量文件。 产物是 HTML，不是可编辑的设计稿。若你需要指定的素材格式，请另找一套矢量工作流。
- 你既没有参考也没有约束。 没有设计系统或示例时，输出往往偏向千篇一律的外观；先写好需求简报。
- 你没有该 Agent 所需的凭证。需要：通过 OpenCode 配置提供的提供商密钥（自备密钥）。OpenDesign 不提供也不代理任何凭证。
- 你的团队使用 Claude Code 或 Aider。 那些代理有各自的页面；工作区不变，但配置方式不同。参见 相关代理。
兼容性
开始前的 OpenCode 前提条件
本页讲的是通过 OpenDesign 桌面应用连接使用 OpenCode 的情况。所引用的公开资料核对于 2026 年 9 月 6 日。
工具范围OpenCode，由 Anomaly 出品
OpenCode 是一个开源（MIT）终端 AI 编码代理——带有 TUI 以及桌面端和 IDE 界面——由 Anomaly（SST 团队）在 github.com/anomalyco/opencode 维护。本页讲的是通过 OpenDesign 用 OpenCode 做界面设计，而不是 OpenCode 自身的界面。OpenDesign 的 配置说明 列出了可用的代理。
账户与身份验证通过 OpenCode 配置提供方密钥（BYOK）
通过 OpenCode 配置提供方密钥（BYOK）。OpenCode 通过它自己的配置使用你的提供方密钥（BYOK）——不经过任何代理转发。本页不承诺任何额度或价格。
系统与版本桌面应用或源码
桌面版构建请查看下载页面。源快速开始中的 Node.js 和 pnpm 要求在从源码运行时适用，而不是在安装桌面安装包时适用。最低兼容的 OpenCode 版本：此处未核实。
连接检查成功的标志
使用你所安装版本显示的连接说明，然后运行一个小任务。确认 OpenCode 处理了该任务，并且产物可以打开。仅仅下载本身并不能构成可用的连接。
从桌面应用开始
三步完成 OpenCode 设置
先下载，针对你安装的版本完成 OpenCode 配置，然后检查一个小结果。走这条路径不需要从源码构建 OpenDesign。
- 1
下载 OpenDesign 桌面应用
选择适合你电脑的安装包，安装并打开应用。
下载 OpenDesign检查点桌面应用打开。如果它已经安装好了，就直接进入下一步；你不需要再次下载。 - 2
准备你的 OpenCode 连接
按照你安装版本随附的 OpenCode 说明操作。OpenCode 通过它自己的配置使用你的提供方密钥（BYOK）——不经过任何代理转发。
# 1. Install OpenCode curl -fsSL https://opencode.ai/install | bash # or: npm i -g opencode-ai@latest # or: brew install sst/tap/opencode # 2. Start the TUI in your project, then authenticate your provider opencode # then run /login and pick your provider + paste your key摘自已发布指南中的 OpenCode 配置说明；当前命令请查阅厂商文档。
检查点确认预期的代理和账号。如果不可用，请先检查兼容性，再尝试更大的任务。 - 3
运行一个 OpenCode 小任务
把需求简报控制得小一些，这样你才能评判整个闭环，包括一轮修改。
入门 brief构建一个设置界面，包含个人资料表单和保存确认。遵循我的设计规则。在桌面端和移动端宽度下检查它。
检查点打开结果，测试保存状态，并提出一项具体的修改要求。生成只是开启审阅；它并不终结审阅。
如果你想从源码运行 OpenDesign，请改用 技术快速开始。
OpenCode 设计工作流
五步完成一次 OpenCode 设计流程
一个共享收件箱的示例贯穿始终，从写好的需求简报一直到经过检查的 HTML。每一步都包含：你的输入、OpenCode 的动作、OpenDesign 的贡献，以及你仍需承担的审阅。
- 1
设计 Brief
保持平实简短：三到六行。说明谁使用这个界面、它完成什么任务，以及它必须适配哪些平台。
- 您起草需求简报，如果有参考截图就附上。
- OpenCodeOpenCode 阅读需求简报和项目的 AGENTS.md，然后询问某个细节是否有歧义。
- OpenDesignOpenDesign 提供项目、终端提示界面，以及与产物类型匹配的技能。
- 检查检查需求简报是否写明了验收标准。在生成之前定好它们，成本低于事后返工。
- 2
设计约束
一套设计系统，外加一小组硬性规则。这种组合可以防止 OpenCode 退回千篇一律的外观。
- 您选择设计系统，然后明确列出必须出现的断点和组件。
- OpenCodeOpenCode 在写下任何标记之前，先加载 DESIGN.md 的令牌和姿态规则。
- OpenDesignOpenDesign 提供设计系统库，并把你的选择绑定进技能模板。
- 检查对照你的品牌检查令牌：一种强调色、预期的字体、正确的圆角。
- 3
生成界面
OpenCode 写出一个自包含的 HTML 文件：布局、样式、交互和稳定的钩子。
- 您等待，或回答一个澄清问题。此时没有任何需要配置的东西。
- OpenCode它规划各个区块，编写 HTML、CSS 和 JavaScript，运行该文件，并修复失败之处。
- OpenDesignOpenDesign 把产物存入项目文件夹，并为预览建立索引。
- 检查还不到时候。评判渲染出来的文件，而不是源码标记。
- 4
预览
OpenDesign 会按你指定的宽度预览文件。设计正是在这里接受评判。
- 你更改宽度，试用交互，并留下元素评论。
- OpenCodeOpenCode 会读取你的预览评论，并准备下一版修订。
- OpenDesignOpenDesign 渲染预览，并暴露
data-od-id目标，供评论和编辑使用。 - 检查检查层级、对比度、390px 下的溢出、焦点状态，以及强调色是否保持克制。
- 5
修订与验证
通过指向预览元素来提出更改。每次修订都作为新文件落地；不会在你未看到的情况下覆盖任何内容。
- 你把评论转化为请求，并决定任务何时完成。
- OpenCodeOpenCode 应用更改，并重新运行该文件。
- OpenDesignOpenDesign 并排保留各个版本；完成后可导出图片或 HTML。
- 检查先检查更改区域，然后在每个断点查看一次完整页面。
资源
OpenCode 设计资源
限制
OpenCode 的限制、手动检查和回退方案
- 范围OpenCode 是编码代理，不是专门构建的设计工具。你通过添加技能、DESIGN.md 系统文件和 Figma/视觉画布 MCP 来塑造视觉输出。本页将 OpenCode 视为连接到 OpenDesign 的代理，而不是对 OpenCode 每项功能的完整综述。
- 使用限制使用限制和费用取决于你提供的凭据（通过 OpenCode 配置的提供商密钥）。本页不对免费额度作任何声明。
- 网络本地项目文件并不保证离线推理。在共享敏感输入之前，请检查你的代理的提供商设置和数据政策。
- 输出为 HTML产物以 HTML 文件形式输出，而不是矢量设计文件。
- 人工审查你在预览中检查可访问性、真实内容、品牌契合度和交互正确性。把代理的自检只视为第一遍检查。
- 后备方案如果代理不可用或任务失败，请检查你所安装版本的连接说明和身份验证。在更改配置之前，保留错误信息和最后一个可正常工作的产物。
常见问题
关于 OpenCode 与 OpenDesign 的常见问题
OpenCode 真的能处理设计工作吗？
可以——只要在上下文中提供审美 skill、设计系统以及真实的参考图，OpenCode 就能产出生产级、响应式的 UI，并能在浏览器中进行验证。由于它与模型无关，你可以运行当前最擅长前端的任何模型。如果没有这些精心准备的上下文，它往往会退回到通用外观，而这正是 OpenDesign 要填补的空白。
用 OpenCode 做设计应该选哪个模型？
随你喜欢——OpenCode 通过 models.dev 与 Provider 无关，因此你可以在同一工作流下运行 Anthropic、OpenAI、Google、OpenRouter 或本地模型，并随时切换。设计输出的质量更多取决于你的 skill、设计系统和参考资料，而不仅仅是模型本身。
OpenDesign 是 OpenCode（SST）团队制作的吗？
不是。OpenDesign 是一个独立的开源项目，将 OpenCode 作为其中一个 Agent 集成进来。它以本地优先、开放的 skill 和设计系统库为 OpenCode 提供补充。
用 OpenCode 做设计需要特殊订阅吗？
不需要——OpenCode 是 BYOK 模式。你自带模型提供商的 API key，OpenDesign 从不代理你的凭据。不存在供应商锁定。
前端设计该选 OpenCode、Codex 还是 Claude Code？
三者都很强，许多团队会将它们组合使用。OpenCode 的优势在于完全开源且与模型无关；Codex 擅长委托式的沙盒构建；Claude Code 则以具体、能感知代码库的设计决策而闻名。OpenDesign 让你可以切换 Agent 而不必改变设计工作流。
准确地说，OpenCode 是什么
OpenCode 是一个开源的 AI 编码代理，为终端构建，由 SST（Anomaly Innovations）背后的团队维护。它会读取你的仓库、运行命令、编辑文件并与大语言模型对话——但与绑定供应商的代理不同，它不附带自己的模型。你将它指向任何你想要的供应商和模型，并自带密钥。
它以终端 UI（TUI）运行，并在同一引擎之上提供桌面应用和 IDE 扩展。底层采用客户端/服务器架构，因此执行工作的代理与你驱动它的界面解耦。两个内置代理——build 和 plan——可通过 Tab 键切换。
模型无关：模型和供应商来自 models.dev，一个开放目录。你在 opencode.json 中用 provider/model-id 字符串配置它们，并可以禁用你不想加载的供应商——因此相同的设计工作流可以在 Anthropic、OpenAI、Google、OpenRouter、本地模型等上运行。
指令文件：OpenCode 读取项目中的 AGENTS.md 文件（跨工具标准，也兼容 CLAUDE.md）以获取项目规则——这是编码你的设计约定的自然位置。运行 /init 生成一个。
可扩展：支持 LSP 集成、MCP 服务器、主题、按键绑定和自定义命令，以及用于协作的可共享会话链接。
维护者：SST / Anomaly Innovations（开源项目）
凭据：你自己的模型供应商 API 密钥——BYOK，无供应商锁定
许可证：MIT，开源
它以终端 UI（TUI）运行，并在同一引擎之上提供桌面应用和 IDE 扩展。底层采用客户端/服务器架构，因此执行工作的代理与你驱动它的界面解耦。两个内置代理——build 和 plan——可通过 Tab 键切换。
模型无关：模型和供应商来自 models.dev，一个开放目录。你在 opencode.json 中用 provider/model-id 字符串配置它们，并可以禁用你不想加载的供应商——因此相同的设计工作流可以在 Anthropic、OpenAI、Google、OpenRouter、本地模型等上运行。
指令文件：OpenCode 读取项目中的 AGENTS.md 文件（跨工具标准，也兼容 CLAUDE.md）以获取项目规则——这是编码你的设计约定的自然位置。运行 /init 生成一个。
可扩展：支持 LSP 集成、MCP 服务器、主题、按键绑定和自定义命令，以及用于协作的可共享会话链接。
维护者：SST / Anomaly Innovations（开源项目）
凭据：你自己的模型供应商 API 密钥——BYOK，无供应商锁定
许可证：MIT，开源
为什么开放的、任意模型的代理适合设计工作
OpenCode 不像供应商代理那样拥有单一的“设计模型”——而这正是重点。因为它是模型无关且开放的，你可以在当前前端表现最好的任何模型上运行相同的设计工作流，稍后切换，或回退到本地模型，所有这些都不改变你的设置。
但仅靠模型选择并不能带来品味。像每个编码代理一样，除非你给它约束，OpenCode 会生成通用的 UI。好的设计输出来自你提供的三个输入。
设计系统：代理复用的真实令牌、基元和约定，使输出匹配品牌，而不是默认为通用外观。
审美技能：一个精选的技能，强制实现真正的品味——克制的动效、品牌优先的层级、最多两种字体和一种强调色——并使代理在构建之前确定方向。
具体参考：实际的参考图像和多种状态（桌面和移动、悬停、空状态、加载状态），而不是单一的主视觉图。
品味来自你提供的三个输入：设计系统、技能和真实参考图像——与你运行的模型无关。
教训：OpenCode 为你提供模型自由，但品味仍来自精选的设计语境。OpenDesign 正好打包了这些输入，这就是二者契合的原因——两者都是开源且本地优先（更多见下文）。
但仅靠模型选择并不能带来品味。像每个编码代理一样，除非你给它约束，OpenCode 会生成通用的 UI。好的设计输出来自你提供的三个输入。
设计系统：代理复用的真实令牌、基元和约定，使输出匹配品牌，而不是默认为通用外观。
审美技能：一个精选的技能，强制实现真正的品味——克制的动效、品牌优先的层级、最多两种字体和一种强调色——并使代理在构建之前确定方向。
具体参考：实际的参考图像和多种状态（桌面和移动、悬停、空状态、加载状态），而不是单一的主视觉图。
品味来自你提供的三个输入：设计系统、技能和真实参考图像——与你运行的模型无关。
教训：OpenCode 为你提供模型自由，但品味仍来自精选的设计语境。OpenDesign 正好打包了这些输入，这就是二者契合的原因——两者都是开源且本地优先（更多见下文）。
从零开始为设计设置 OpenCode
设置顺序：安装 → 认证（你的供应商密钥）→ 配置 AGENTS.md → 添加技能 → 在真实浏览器中验证。
编码你的设计规则：将你的令牌、基元和约定放在 AGENTS.md（或从中引用的 DESIGN.md）中，使输出匹配品牌，而不是默认为通用外观。opencode.json 中的 instructions 选项可以通过 globs 指向额外的规则文件。
选择一个有能力的模型：因为 OpenCode 是模型无关的，为设计阶段选择当前前端表现最强的任何供应商/模型——并保持工作流的其余部分不变。
使用当前设置部分获取命令和特定版本的详细信息，这些可能会变化。
来自前一个指南的历史命令示例；请验证当前语法的链接供应商文档。
编码你的设计规则：将你的令牌、基元和约定放在 AGENTS.md（或从中引用的 DESIGN.md）中，使输出匹配品牌，而不是默认为通用外观。opencode.json 中的 instructions 选项可以通过 globs 指向额外的规则文件。
选择一个有能力的模型：因为 OpenCode 是模型无关的，为设计阶段选择当前前端表现最强的任何供应商/模型——并保持工作流的其余部分不变。
使用当前设置部分获取命令和特定版本的详细信息，这些可能会变化。
# 1. Install OpenCode\ncurl -fsSL https://opencode.ai/install | bash\n# or: npm i -g opencode-ai@latest\n# or: brew install sst/tap/opencode\n\n# 2. Start the TUI in your project, then authenticate your provider\nopencode # then run /login and pick your provider + paste your key\n\n# 3. Generate project context\nopencode # inside your project, run /init to create AGENTS.md\n\n# 4. Pick your model (any provider, via models.dev)\n# set \"provider/model-id\" in opencode.json or switch in the TUI\n\n# 5. Add an MCP server (optional, e.g. for design handoff)\n# configure it under the \"mcp\" key in opencode.json来自前一个指南的历史命令示例；请验证当前语法的链接供应商文档。
OpenCode 中的截图到 UI 工作流
任何代理的最高杠杆设计循环是将参考图像转变为可工作的、响应式 UI，并迭代直到匹配。相同的五步模式适用于 OpenCode。
从你拥有的最清晰的视觉参考开始——并包括多种状态（桌面和移动、悬停、空状态、加载状态），而不仅仅是一张主视觉图。
在提示中要具体；模糊的提示会产生通用的 UI。
准备一个设计系统，并告诉 OpenCode 令牌和规范基元所在的位置（在 AGENTS.md 中）。
运行开发服务器并让代理在真实浏览器中渲染，调整到断点以检查结果。
通过让 OpenCode 将其实现与截图进行比较来迭代——而不仅仅是确认它能构建。
在 TUI 中用 @ 引用文件以对工作目录进行模糊搜索，以 ! 开头内联运行 shell 命令，并用 / 命令驱动操作。然后用具体的约束进行提示：
保持提示小而专注，提交好的迭代并回滚坏的迭代（回滚时告诉 OpenCode），以便每次传递都建立在干净的基础上。
来自前一个指南的历史命令示例；请验证当前语法的链接供应商文档。
从你拥有的最清晰的视觉参考开始——并包括多种状态（桌面和移动、悬停、空状态、加载状态），而不仅仅是一张主视觉图。
在提示中要具体；模糊的提示会产生通用的 UI。
准备一个设计系统，并告诉 OpenCode 令牌和规范基元所在的位置（在 AGENTS.md 中）。
运行开发服务器并让代理在真实浏览器中渲染，调整到断点以检查结果。
通过让 OpenCode 将其实现与截图进行比较来迭代——而不仅仅是确认它能构建。
在 TUI 中用 @ 引用文件以对工作目录进行模糊搜索，以 ! 开头内联运行 shell 命令，并用 / 命令驱动操作。然后用具体的约束进行提示：
保持提示小而专注，提交好的迭代并回滚坏的迭代（回滚时告诉 OpenCode），以便每次传递都建立在干净的基础上。
opencode\n# in the TUI:\n> @reference-desktop.png @reference-mobile.png\n Implement this design in React + Vite + Tailwind + TypeScript.\n Reuse my existing design-system components and tokens from AGENTS.md.\n Match spacing, layout, and hierarchy; make it responsive.\n Run the dev server, open it in a browser, and iterate until the\n UI matches the references across breakpoints.来自前一个指南的历史命令示例；请验证当前语法的链接供应商文档。
AGENTS.md、MCP 和可共享会话
三个扩展点使 OpenCode 在持续设计工作中变得实用，并且这三个点都清晰地映射到开放设计工作流上。
AGENTS.md 规则：项目规则存放在仓库根目录的 AGENTS.md 中（或全局规则在 ~/.config/opencode/AGENTS.md）。它是你的设计约定的持久家园，每次运行都会读取，并且与其它代理使用的 CLAUDE.md 文件兼容。
MCP 服务器：OpenCode 支持本地（命令）和远程（URL）MCP 服务器，在 mcp 键下配置——这是引入设计上下文和跨代理工作的外部工具（而不仅仅是 OpenCode）的便携方式。
可共享会话：/share 命令创建到对话的公共链接以进行协作或审查，/unshare 撤销它——对于获取设计过程的反馈非常有用。
这些是可移植的、多代理的能力——正是 OpenDesign 被构建来协调的事情，而不是在每个项目中重新创建。
AGENTS.md 规则：项目规则存放在仓库根目录的 AGENTS.md 中（或全局规则在 ~/.config/opencode/AGENTS.md）。它是你的设计约定的持久家园，每次运行都会读取，并且与其它代理使用的 CLAUDE.md 文件兼容。
MCP 服务器：OpenCode 支持本地（命令）和远程（URL）MCP 服务器，在 mcp 键下配置——这是引入设计上下文和跨代理工作的外部工具（而不仅仅是 OpenCode）的便携方式。
可共享会话：/share 命令创建到对话的公共链接以进行协作或审查，/unshare 撤销它——对于获取设计过程的反馈非常有用。
这些是可移植的、多代理的能力——正是 OpenDesign 被构建来协调的事情，而不是在每个项目中重新创建。
用于设计的 OpenCode、Codex、Claude Code 与 Cursor 的对比
在设计工作中没有单一赢家——每个代理都有不同的优势，经验丰富的团队会组合使用它们。一个公正的总结：
OpenCode——开源且模型无关；在一个终端工作流后运行任何提供方——BYOK 自由、模型切换、完全开放且本地优先的设置
Codex——凭借前端技能具备强大的视觉打磨；图像理解——委派异步、沙盒构建、可移植的 AGENTS.md 规则
Claude Code——具体的设计决策（hex、间距、字体）和了解代码库的 UX——前端推理和大上下文重构
Cursor——可视化构建并查看的循环，带有实时预览和内联编辑——在 IDE 内进行紧密的迭代并观察 UI 工作
社区反复得出的结论是，品味来自人类：在没有技能、参考和约束的情况下，它们都会默认呈现通用美学。这才是需要解决的真问题——而且它是设计工具形态的，而非模型形态的，这正是像 OpenCode 这样的开放代理与开放设计层如此般配的原因。
代理 — 设计优势 — 最适合
OpenCode——开源且模型无关；在一个终端工作流后运行任何提供方——BYOK 自由、模型切换、完全开放且本地优先的设置
Codex——凭借前端技能具备强大的视觉打磨；图像理解——委派异步、沙盒构建、可移植的 AGENTS.md 规则
Claude Code——具体的设计决策（hex、间距、字体）和了解代码库的 UX——前端推理和大上下文重构
Cursor——可视化构建并查看的循环，带有实时预览和内联编辑——在 IDE 内进行紧密的迭代并观察 UI 工作
社区反复得出的结论是，品味来自人类：在没有技能、参考和约束的情况下，它们都会默认呈现通用美学。这才是需要解决的真问题——而且它是设计工具形态的，而非模型形态的，这正是像 OpenCode 这样的开放代理与开放设计层如此般配的原因。
代理 — 设计优势 — 最适合
陷阱与避免“AI 味”外观
关于 AI 生成设计最常见的抱怨是它看起来很通用——柔和的渐变、浮动面板、过大的圆角、夸张的阴影，以及一种 Inter 和紫色调的氛围，“尖叫着‘这是 AI 做的’”。其他报告的问题包括移动端布局损坏和指令泄漏到 UI 文案中。这些都不是 OpenCode 独有的；任何代理在没有精心整理的设计上下文下运行时都会发生这种情况。
添加美学技能：一个精心整理的设计技能会迫使代理致力于真实的方向，而不是默认外观。
在真实浏览器中验证：跨断点渲染并自检，确保布局不会在移动端悄悄损坏。
提供令牌和参考：真实的设计令牌和参考截图是提升输出质量的最大单一杠杆。
在 AGENTS.md 中编码规则：将“无英雄卡片、最多两种字体、品牌优先层级”之类的规则放在代理每次运行都会读取的地方。
请注意，每一种缓解措施都是关于为代理提供精心整理的设计上下文——无论你运行哪个模型。在每个项目中手动维护该上下文，正是 OpenDesign 所消除的苦差事。
添加美学技能：一个精心整理的设计技能会迫使代理致力于真实的方向，而不是默认外观。
在真实浏览器中验证：跨断点渲染并自检，确保布局不会在移动端悄悄损坏。
提供令牌和参考：真实的设计令牌和参考截图是提升输出质量的最大单一杠杆。
在 AGENTS.md 中编码规则：将“无英雄卡片、最多两种字体、品牌优先层级”之类的规则放在代理每次运行都会读取的地方。
请注意，每一种缓解措施都是关于为代理提供精心整理的设计上下文——无论你运行哪个模型。在每个项目中手动维护该上下文，正是 OpenDesign 所消除的苦差事。
在 OpenDesign 内使用 OpenCode 进行设计
OpenDesign 是上述工作流一直需要的开源设计层。它将 OpenCode 视为第一方适配器，并将其包装在精心整理的技能和设计系统库、结构化渲染管道以及本地桌面 UI 中——因此让任何代理变得出色的设计上下文从第一次运行起就存在，而不是每次都手动拼凑。这两个项目都是开源且本地优先的，这使得配对自然契合。
使用你自己的模型提供方 API 密钥（BYOK）进行身份验证——凭据保留在你的机器上，绝不会通过我们进行代理。
选择任何提供方和模型，加上一个设计系统和一个技能，然后生成具有一致品味的演示文稿、原型和落地页。
每个工件和 DESIGN.md 文件都存放在你自己的仓库中，而不是托管云上。
相同的 OpenCode 代理，同样的模型自由——外加一个围绕它的真实、可移植、开源的设计工作流。它是本地优先且采用 Apache-2.0 许可证，因此你的工作或凭据的任何信息都不会离开你的机器。
安装 OpenDesign 并选择 OpenCode 作为你的代理。
使用你自己的模型提供方 API 密钥（BYOK）进行身份验证——凭据保留在你的机器上，绝不会通过我们进行代理。
选择任何提供方和模型，加上一个设计系统和一个技能，然后生成具有一致品味的演示文稿、原型和落地页。
每个工件和 DESIGN.md 文件都存放在你自己的仓库中，而不是托管云上。
相同的 OpenCode 代理，同样的模型自由——外加一个围绕它的真实、可移植、开源的设计工作流。它是本地优先且采用 Apache-2.0 许可证，因此你的工作或凭据的任何信息都不会离开你的机器。
安装 OpenDesign 并选择 OpenCode 作为你的代理。
这是哪个 OpenCode？
位于 github.com/anomalyco/opencode（原 sst/opencode）的开源终端代理，由 Anomaly 维护。不要与名称相似的工具混淆。
OpenDesign 和 OpenCode 是同一个项目吗？
不是。两者都是开源的，但它们是各自独立的项目。OpenDesign 将 OpenCode 集成为第一方代理适配器。