OpenCode 
OpenDesign 如何在 OpenDesign 中使用 OpenCode 设计界面：在生成任何内容之前绑定 design.md、你选择的提供商、一个从 brief 到审阅后文件的共享收件箱任务，以及开始前需要了解的限制。
“一个基于
design.md 构建的共享收件箱，而非默认设置。”
一个完整的 OpenCode 设计任务
一个完整展示的单一任务：你交出的 brief 和约束条件，返回的产物，以及完成前你仍需运行的检查。下方界面是为本页面构建的示例说明，并非一次真实记录的 OpenCode 运行。
Brief设计一个团队共享收件箱：带负责人的对话列表、一个消息线程视图，以及带客户上下文的右侧栏。生成前先绑定 design.md 系统。桌面端和手机端。
data-od-id 挂钩撰写 brief，选择设计系统并定义验收标准。
规划布局，编写 HTML、CSS 和 JavaScript，并按要求进行修改。
提供设计系统与 skill，渲染预览，并将每个版本作为文件存储在项目中。
在交付前，检查视觉层级、8px 网格上的间距、两个断点以及每一项交互。
三栏基于 8px 网格；上下文栏会在线程栏之前先折叠。
负责人和主题优先显示；强调色仅标记「等待我们处理」的状态。
先展示列表，点按后进入线程；上下文栏会变为一个 sheet。
按负责人筛选，打开一个线程，切换侧栏，发送回复。
Fit
兼容性
本指南涉及通过 OpenDesign 桌面应用连接的 OpenCode。已发布参考资料的核对日期为 2026 年 9 月 6 日。
OpenCode 是一款开源（MIT）终端 AI 编程 Agent——一个 TUI，外加桌面端和 IDE 界面——由 Anomaly（SST 团队）维护，托管于 github.com/anomalyco/opencode。本页介绍如何通过 OpenDesign 使用 OpenCode 设计界面，而非 OpenCode 自身的界面。OpenDesign 的设置说明列出了可用的 Agent。
通过 OpenCode config 提供 Provider 密钥（BYOK）。OpenCode 通过其自身的 config 使用你的 Provider 密钥（BYOK）——不进行任何代理。本页不承诺任何配额或价格。
请查看下载页面以获取桌面版本。源码快速开始指南中的 Node.js 和 pnpm 要求适用于从源码运行，而非安装桌面软件包。此处未验证最低兼容的 OpenCode 版本。
按照你安装版本所显示的连接说明操作，然后运行一个小任务。确认 OpenCode 已处理该任务，且产物可以正常打开。仅完成下载并不代表已建立可用的连接。
从桌面应用开始
先下载，再针对你安装的版本完成 OpenCode 设置，然后检查一个小结果。按此路径操作无需从源码构建 OpenDesign。
选择适合您电脑的软件包，安装并打开该应用。
下载 OpenDesign请按照你安装版本中的 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 设置说明；请查阅供应商文档以获取当前命令。
使用一个小 brief，以便您评估整个流程，包括一次修改。
构建一个设置页面，包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。
若要从源代码运行 OpenDesign，请参阅技术快速入门。
OpenCode 设计工作流
同一个团队收件箱任务，从 brief 到通过验证的文件全程记录。每一步都列出你提供的内容、OpenCode 所做的工作、OpenDesign 贡献的部分，以及你需要检查的内容。
用简明语言写三到六行，说明目标受众、该界面要完成的任务，以及适用的平台。
一套设计系统加几条硬性规则。正是这些将符合品牌调性的产出与千篇一律的效果区分开来。
OpenCode 编写一个自包含的 HTML 文件：布局、样式、交互以及稳定的挂钩点。
文件会以你要求的宽度在 OpenDesign 中渲染。设计的好坏就在这里被检验。
data-od-id 目标以供评论和编辑。通过在预览中指向元素来请求修改。每次修订都是一个新文件，绝不会被静默覆盖。
资源
已发布指南中列出的、关于使用 OpenCode 进行设计的教程、文档和演示。
限制
常见问题
从一个小任务开始，评估往返效果，然后再提交真实的 brief。请选择与您的环境相符的选项；本页不会自动检测。