OpenCode 
OpenDesign How to design interfaces with OpenCode in OpenDesign: design.md bound before anything is generated, the provider you choose, one shared-inbox task from brief to reviewed file, and the limits to know before you start.
“A shared inbox built on
design.md, not on defaults.”
THREE WAYS INTO THIS OPENCODE GUIDE
This guide: brief, references, design rules and a reviewed HTML result.
Read this guide SETUPHere is the full path from a clean machine to an OpenCode that can build and verify UI.
Go to setup COMPARISONHow OpenCode differs from Codex, Claude Code, Cursor for design work, and when to choose another workflow.
See the comparisonOne Complete OpenCode Design Task
A single task, shown end to end: the brief and constraints you hand over, the artifact that comes back, and the checks you still run before it is done. The interface below is an illustrative example built for this page, not a recorded OpenCode run.
BriefDesign a shared team inbox: conversation list with owners, a thread view and a right rail with customer context. Bind the design.md system before generating. Desktop and phone.
data-od-id hooksWrite the brief, select the design system and define the acceptance criteria.
Plans the layout, writes the HTML, CSS and JavaScript and revises it on request.
Provides the design system and skill, renders the preview and stores every version as a file in the project.
Visual hierarchy, spacing on the 8px grid, both breakpoints and every interaction are checked before handoff.
Three panes on the 8px grid; the context rail collapses before the thread does.
Owner and subject first; the accent marks “waiting on us” only.
List, then thread on tap; the context rail becomes a sheet.
Filter by owner, open a thread, toggle the rail, send a reply.
Fit
Compatibility
This guide covers OpenCode as connected through the OpenDesign desktop app. Published references checked on 6 September 2026.
OpenCode is an open-source (MIT) terminal AI coding agent — a TUI plus desktop and IDE surfaces — maintained by Anomaly (the SST team) at github.com/anomalyco/opencode. This page is about designing interfaces with OpenCode through OpenDesign, not about OpenCode’s own interface. OpenDesign’s setup notes list the available agents.
Provider keys via OpenCode config (BYOK). OpenCode uses your provider keys via its own config (BYOK) — nothing is proxied. This page does not promise a quota or price.
Check the download page for desktop builds. The Node.js and pnpm requirements in the source quickstart apply to running from source, not to installing a desktop package. Minimum compatible OpenCode version: not verified here.
Follow the connection instructions shown by your installed version, then run a small task. Confirm that OpenCode handled it and that the artifact opens. A download alone does not establish a working connection.
Start with the desktop app
Download first, complete the OpenCode setup for your installed version, then check a small result. You do not need to build OpenDesign from source to follow this path.
Choose the package for your computer, install it and open the app.
Download OpenDesignFollow the OpenCode instructions in your installed version. OpenCode uses your provider keys via its own config (BYOK) — nothing is proxied.
# 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 keyFrom the OpenCode setup notes in the published guide; check the vendor documentation for the current command.
Use a small brief so you can judge the whole loop, including one revision.
Build a settings screen with a profile form and a save confirmation. Use my design rules. Check it at desktop and mobile widths.
To run OpenDesign from source, follow the technical quickstart instead.
The OpenCode design workflow
The same team inbox task, followed from brief to verified file. Each step lists what you provide, what OpenCode does, what OpenDesign contributes and what you check.
Plain language, three to six lines. Name the audience, the job of the screen and the platforms.
A design system and a few hard rules. This is what separates on-brand output from a generic look.
OpenCode writes a self-contained HTML file: layout, styles, interactions and stable hooks.
The file renders inside OpenDesign at the widths you asked for. This is where the design is judged.
data-od-id targets for comments and edits.Request changes by pointing at elements in the preview. Every revision is a new file; nothing is overwritten silently.
Resources
Tutorials, documentation and walkthroughs for designing with OpenCode, as listed in the published guide.
The artifact types OpenCode can produce in OpenDesign, one skill per type.
Brand tokens and components to bind before OpenCode generates anything.
Starting points for decks, landing pages and product screens.
Limitations
FAQ
Start with a small task, judge the round trip, then bring the real brief. Choose the option that matches your setup; the page does not detect it.