用 OpenCode 做设计。

OpenCode 究竟是什么

OpenCode 是一个为终端打造的开源 AI 编码 agent，由 SST 背后的团队（Anomaly Innovations）维护。它会读取你的代码仓库、运行命令、编辑文件，并与大语言模型对话——但和被厂商绑定的 agent 不同，它本身不自带模型。你把它指向任意你想用的 provider 和模型，并自带 key。

它以终端界面（TUI）运行，并在同一引擎之上提供桌面应用和 IDE 扩展。底层采用客户端/服务端架构，所以真正干活的 agent 与你驱动它的界面是解耦的。它内置 build 和 plan 两个 agent，用 Tab 键切换。

• 与模型无关: 模型和 provider 来自 models.dev 这个开放目录。你在 opencode.json 里用 provider/model-id 字符串配置，并可禁用不想加载的 provider——所以同一套设计工作流可以跑在 Anthropic、OpenAI、Google、OpenRouter、本地模型等之上。
• 指令文件: OpenCode 会读取项目里的 AGENTS.md 文件（跨工具的通用标准，也兼容 CLAUDE.md）作为项目规则——这正是编码你设计约定的天然位置。运行 /init 即可生成一个。
• 可扩展: 它支持 LSP 集成、MCP server、主题、快捷键和自定义命令，还有可分享的会话链接用于协作。

• 维护方：SST / Anomaly Innovations（开源项目）
• 凭证：你自己的模型 provider API key（BYOK，无厂商锁定）
• 许可：MIT，开源

为什么开放、任意模型的 agent 适合做设计

OpenCode 不像厂商 agent 那样有某一个“设计模型”——而这恰恰是它的优势。因为与模型无关且开源，你可以在同一套设计工作流上运行当下前端最强的那个模型，之后随时更换，或退回到本地模型，全程不用改配置。

但光选对模型并不能买来审美。和所有编码 agent 一样，除非你给它约束，否则 OpenCode 也会产出套路化的 UI。好的设计产出来自你提供的三项输入。

• 一套设计系统: 真实的 tokens、基础组件和约定，让 agent 复用，从而让产出贴合某个品牌，而不是退回到通用的观感。
• 一个审美 skill: 一个精选的 skill，强制真正的审美——克制的动效、品牌优先的层级、最多两种字体一种强调色——并让 agent 在动手前先定一个方向。
• 具体的参考图: 真实的参考图，以及多种状态（桌面和移动、hover、空态、加载态），而不是只有一张主视觉。

结论：OpenCode 给了你模型自由，但审美仍来自一套精选的设计上下文。Open Design 恰好把这些输入打包好，这也是两者契合的原因——它们都是开源、都本地优先（下文详述）。

从零配置 OpenCode 做设计

下面是从一台干净的机器到一个能构建并验证 UI 的 OpenCode 的完整路径。

# 1. 安装 OpenCode
curl -fsSL https://opencode.ai/install | bash
# 或：npm i -g opencode-ai@latest
# 或：brew install sst/tap/opencode

# 2. 在项目里启动 TUI，然后认证你的 provider
opencode          # 然后运行 /login，选择 provider 并粘贴你的 key

# 3. 生成项目上下文
opencode          # 在项目里运行 /init 生成 AGENTS.md

# 4. 选择你的模型（任意 provider，经 models.dev）
#    在 opencode.json 里设置 "provider/model-id"，或在 TUI 里切换

# 5. 添加 MCP server（可选，比如用于设计交付）
#    在 opencode.json 的 "mcp" 字段下配置

• 编码你的设计规则: 把你的 tokens、基础组件和约定放进 AGENTS.md（或从中引用的 DESIGN.md），让产出贴合品牌而非退回通用观感。opencode.json 里的 instructions 选项可以用 glob 指向更多规则文件。
• 选一个有能力的模型: 因为 OpenCode 与模型无关，可以为设计这一遍挑选当下前端最强的 provider/模型——而工作流的其余部分保持不变。

截图转 UI 的工作流

用任何 agent 做设计，杠杆最高的回路都是：把一张参考图变成可用、响应式的 UI，并反复迭代直到匹配。同样的五步在 OpenCode 里也适用。

1. 从你手头最清晰的视觉参考开始——并包含多种状态（桌面和移动、hover、空态、加载态），而不只是一张主视觉。
2. 提示词要具体；含糊的提示会产出套路化的 UI。
3. 准备好一套设计系统，并告诉 OpenCode tokens 和规范基础组件在哪里（写在 AGENTS.md 里）。
4. 跑一个 dev server，让 agent 在真实浏览器中渲染，并切换到各断点检查结果。
5. 让 OpenCode 把它的实现对照截图来迭代——而不只是确认能构建通过。

在 TUI 里用 @ 引用文件会对工作目录做模糊搜索，用开头的 ! 内联运行 shell 命令，用 / 命令驱动各种操作。然后用具体约束来提示：

opencode
# 在 TUI 里：
> @reference-desktop.png @reference-mobile.png
  用 React + Vite + Tailwind + TypeScript 实现这个设计。
  复用 AGENTS.md 里我现有的设计系统组件和 tokens。
  匹配间距、布局和层级；做到响应式。
  运行 dev server，在浏览器中打开，并反复迭代
  直到 UI 在各断点上都与参考图匹配。

提示词保持小而聚焦，好的迭代就提交、坏的就回退（回退时告诉 OpenCode），让每一遍都建立在一个干净的基础上。

AGENTS.md、MCP 与可分享会话

三个扩展点让 OpenCode 在持续的设计工作中真正好用，而且它们都能干净地映射到一套开放的设计工作流上。

• AGENTS.md 规则: 项目规则放在仓库根目录的 AGENTS.md（或全局规则放在 ~/.config/opencode/AGENTS.md）。它是你设计约定的长期归宿，每次运行都会读取，并兼容其他 agent 使用的 CLAUDE.md 文件。
• MCP server: OpenCode 同时支持本地（命令）和远程（URL）MCP server，在 mcp 字段下配置——这是把设计上下文和外部工具引入进来的可移植方式，跨 agent 通用，而不只服务于 OpenCode。
• 可分享会话: /share 命令会为一段会话创建公开链接，用于协作或评审，/unshare 则收回它——很适合为一遍设计获取反馈。

这些都是可移植、跨 agent 的能力——正是 Open Design 被设计来去编排的那类东西，而不是每个项目里重造一遍。

OpenCode vs Codex vs Claude Code vs Cursor 做设计

设计工作没有唯一赢家——每个 agent 各有所长，有经验的团队会叠着用。一个公允的总结：

社区反复得出的结论是：审美来自人——所有这些 agent 在没有 skill、参考和约束时都会退回到通用观感。这才是真正要解决的问题——它是设计工具形状的，不是模型形状的，而这恰恰说明了为什么像 OpenCode 这样的开放 agent 与一个开放的设计层配合得如此之好。

坑，以及如何避开那种“AI 味”观感

对 AI 生成设计最常见的吐槽是它看起来很套路——柔和渐变、悬浮面板、过大的圆角、夸张的阴影，一种 Inter 字体加紫色的味道，“一看就是 AI 做的”。其他被报告的问题还包括移动端布局错乱、指令文字漏进了 UI 文案。这些都不是 OpenCode 独有的；它们是任何 agent 在缺少精选设计上下文时都会发生的事。

• 加一个审美 skill: 一个精选的设计 skill 会强制 agent 定下一个真正的方向，而不是默认观感。
• 在真实浏览器中验证: 让它跨断点渲染并自检，这样布局就不会在移动端悄悄崩掉。
• 提供 tokens 和参考: 真实的设计 tokens 和参考截图是对产出质量影响最大的单一杠杆。
• 把规则写进 AGENTS.md: 把“不要 hero 卡片、最多两种字体、品牌优先层级”这类规则放在 agent 每次都会读到的地方。

注意到了吗：每一项缓解措施都是关于给 agent 一套精选的设计上下文——无论你跑哪个模型。靠手工逐项目维护这套上下文，正是 Open Design 帮你免除的苦活。

在 Open Design 中用 OpenCode 做设计

Open Design 正是上面那套工作流一直在呼唤的开源设计层。它把 OpenCode 当作一等适配器，并为它套上一套精选的 skill 与设计系统库、一条结构化的渲染管线，以及一个本地桌面 UI——让那些让任何 agent 变好的设计上下文从第一次运行就在那里，而不是每次都手工拼凑。两个项目都是开源、都本地优先，这让它们的搭配水到渠成。

1. 安装 Open Design，并选择 OpenCode 作为你的 agent。
2. 用你自己的模型 provider API key（BYOK）认证——凭证留在你的机器上，绝不经我们代理。
3. 选择任意 provider 和模型，再加上一套设计系统和一个 skill，然后生成审美一致的 deck、原型和落地页。
4. 每个产物和 DESIGN.md 文件都存在你自己的仓库里，而不是托管云端。

同一个 OpenCode agent、同样的模型自由——外加一套真正可移植、开源的设计工作流。它本地优先、采用 Apache-2.0 许可，所以你的工作和凭证都不会离开你的机器。

常见问题

1. 01 OpenCode 真的能做设计吗？ +

   能——当上下文里有审美 skill、设计系统和真实参考图时，OpenCode 能产出生产级、响应式的 UI，并能在浏览器中验证。因为它与模型无关，你可以运行当下前端最强的那个模型。缺少这套精选上下文时，它会倾向于退回到通用观感，而这正是 Open Design 补上的缺口。

2. 02 用 OpenCode 做设计该选哪个模型？ +

   你喜欢哪个都行——OpenCode 经 models.dev 与 provider 无关，所以你可以在同一套工作流背后运行 Anthropic、OpenAI、Google、OpenRouter 或本地模型，并随时切换。设计产出的质量更多取决于你的 skill、设计系统和参考，而非单看模型。

3. 03 Open Design 是 OpenCode（SST）团队做的吗？ +

   不是。Open Design 是一个独立的开源项目，把 OpenCode 集成为一个 agent。它用一套本地优先、开源的 skill 与设计系统库来补足 OpenCode。

4. 04 用 OpenCode 做设计需要什么特殊订阅吗？ +

   不需要——OpenCode 是 BYOK。你自带模型 provider 的 API key，Open Design 绝不代理你的凭证，也没有厂商锁定。

5. 05 前端设计选 OpenCode、Codex 还是 Claude Code？ +

   都很强，很多团队会叠着用。OpenCode 的优势在于完全开源且与模型无关；Codex 擅长委托式、沙箱化构建；Claude Code 以具体、对代码库有感知的设计决策著称。Open Design 让你切换 agent 而不改变你的设计工作流。

6. 06 如何为设计上下文扩展 OpenCode？ +

   把规则写进 AGENTS.md，在 mcp 字段下添加 MCP server 以引入可移植工具和设计上下文，并用可分享会话来做评审。Open Design 直接提供一套精选的 skill 与设计系统库，让你省去逐项目的配置。

7. 07 Open Design 与 OpenCode 或 SST 有关联吗？ +

   没有。OpenCode 是由 SST（Anomaly Innovations）维护的开源项目；Open Design 是一个独立的开源项目，把它作为一等适配器来支持。

8. 08 我的文件和凭证安全吗？ +

   安全——Open Design 本地优先。你的文件、产物和 DESIGN.md 都留在你自己的仓库里，你的模型 provider 凭证由你的 agent 直接使用，绝不经 Open Design 服务器中转。