Open Design Setup Guide

I need you to write long form technical blog post on how to set up OpenDesign with OoenCode and make it able to be used within OpenCode using the CLI. There is a skill in the OpenDesign repo that instructs OpenCode on how to set it up so you only have to do that but at the same time I want you to then explain how to do it from scratch as well in order for the blog post to be technical and long form, here are the repos of opendesign and opencode and I want you to study them and use what you learn to create this blog post and also research this subject online to get more context to help you perform this function : https://github.com/anomalyco/opencode : https://github.com/nexu-io/open-design github.com then it asked me follow up questions my agent is happy it likes this task it is researching it with abandon I got an idea if you need help doing something you can ask me then I can write a blog post which is highly technical then you can give it to Claude and Claude can show you how to use it that way you can ask questions and get the answers correct and quick to help you set it up today I am doing opencode and opendesign which you would really like for your shopify store since you got approved with stripe that means you can build and deploy and receive payment all you need now is the setup on your comp so you can do it all yourself through just asking your coding agent OpenCode which controls OpenDesign and everything else then once you get the coding agent set up locally you can unsubscribe from all the big AI companies and never have to pay again and have everything they have to offer

The material you've provided is enough to write a substantial technical article. After reviewing both repositories and the Open Design documentation, one thing stands out immediately: Open Design was intentionally designed to treat coding agents as interchangeable backends. OpenCode is not a plugin to Open Design. Instead, Open Design discovers OpenCode on your PATH and uses it as its design-generation engine. The "skill" included in Open Design simply automates configuration and teaches the agent how to operate Open Design effectively. The underlying architecture is much simpler than many people realize. Open Design is effectively a design orchestration layer wrapped around a coding agent CLI. citeturn0search0turn0search1 For a long-form blog post, I would structure it around three layers: 1. The philosophy behind Open Design and OpenCode. 2. The "easy path" using the bundled Open Design skill. 3. The "from scratch" path showing exactly how everything works underneath. Below is a draft suitable for danielkliewer.com. :::writing{variant="document" id="58371"} # Open Design + OpenCode: Building a Local-First AI Design Studio That You Control *June 2026* The AI industry has quietly convinced developers that design generation, application scaffolding, prototyping, and implementation must happen inside someone else's cloud. Every month another subscription appears. Another "AI workspace." Another browser tab. Another service collecting your prompts. Open Design and OpenCode take a very different approach. Instead of creating yet another hosted AI product, they treat artificial intelligence as infrastructure you own. The result is surprisingly powerful: - OpenCode becomes your coding agent. - Open Design becomes your design orchestration layer. - Skills become reusable expertise. - Design Systems become portable knowledge. - Everything runs locally. What emerges is something much closer to a sovereign development environment than a SaaS product. In this guide we will build Open Design on top of OpenCode, first using the built-in automation supplied by the Open Design project and then manually wiring the entire stack together from scratch so we understand how every piece works. --- # Understanding the Architecture Most people assume Open Design is another coding agent. It isn't. Open Design is an orchestration system. The project describes itself as a local-first alternative to Claude Design that can use numerous coding-agent CLIs including Claude Code, Codex, Gemini CLI, Cursor Agent, GitHub Copilot CLI, Qwen CLI, and OpenCode. Open Design automatically detects supported agents available on your PATH and uses them as the design engine. citeturn0search0turn0search1 Conceptually: ```text +----------------------+ | Open Design | | Skills + Systems | +----------+-----------+ | v +----------------------+ | OpenCode | | Agent Engine | +----------+-----------+ | v +----------------------+ | LLM Backend | | OpenAI/Ollama/etc | +----------------------+ ``` Open Design provides: - Design Systems - Skills - Artifact generation - Preview environments - Export workflows - Design orchestration OpenCode provides: - Tool calling - Code generation - Reasoning loops - Terminal execution - Agent workflows The two systems complement each other almost perfectly. --- # Method 1: Using the Open Design Skill The easiest path is to let Open Design teach OpenCode how to operate the environment. Open Design follows Anthropic's SKILL.md convention and ships more than one hundred skills that can be loaded directly by supported agents. Skills are simply structured markdown instructions and reference assets that teach an agent how to perform specialized workflows. citeturn0search0turn0search2 The workflow looks like this: ```bash git clone https://github.com/nexu-io/open-design.git cd open-design ``` Install dependencies: ```bash corepack enable pnpm install ``` Start Open Design: ```bash pnpm tools-dev run web ``` Open the generated URL. On startup Open Design scans your system and automatically searches for supported coding-agent CLIs available in your PATH. If OpenCode is installed correctly it should be discovered automatically. citeturn0search1 Once detected, Open Design begins using OpenCode as the execution engine behind its design workflows. At this point the skill system takes over. Rather than prompting OpenCode from scratch every time, Open Design injects: - design system context - visual constraints - artifact requirements - layout instructions - generation rules This dramatically reduces prompt engineering overhead. The coding agent receives a highly structured environment instead of a blank chat window. --- # Installing OpenCode Install OpenCode globally. Depending on your preferred package manager: ```bash npm install -g opencode ``` or ```bash pnpm add -g opencode ``` Verify installation: ```bash opencode --version ``` Then verify discovery: ```bash which opencode ``` or ```bash command -v opencode ``` Open Design only needs the executable available on PATH. Once present, the daemon can discover it automatically. citeturn0search0turn0search1 --- # What the Skill Is Actually Doing Many developers assume the Open Design skill contains magic. It doesn't. A skill is essentially a reusable prompt package. Open Design documents skills as: ```text SKILL.md assets/ references/ ``` The daemon parses these directories and injects their contents into the active agent session. citeturn0search2 The skill tells OpenCode: - how to structure outputs - how to generate artifacts - which design systems to reference - how previews should behave - export requirements - quality expectations In other words: ```text Skill = Prompt Engineering + Reference Material + Workflow Constraints ``` --- # Building the Integration From Scratch Now let's ignore the bundled skill entirely. Suppose Open Design did not exist. How would we recreate the integration ourselves? The architecture becomes: ```text User Prompt | v OpenCode | v Skill Loader | v Design System | v Artifact Generator | v Preview Server ``` Step one is creating a design skill. Example: ```markdown # Landing Page Generator You are a senior design engineer. Generate: - Responsive layout - Modern typography - Accessible colors - Mobile-first design Output: - index.html - styles.css - assets folder ``` Store it: ```text skills/ └── landing-page/ └── SKILL.md ``` Now OpenCode can load that skill as context. --- # Creating a Design System Open Design uses DESIGN.md files to encode brand identity. These design systems contain sections describing typography, spacing, color systems, components, motion, voice, and anti-patterns. The active design system influences generated artifacts. citeturn0search0turn0search1 Example: ```markdown # My Startup Design System ## Colors Primary: #0A84FF Secondary: #111827 ## Typography Headings: Inter Body: Inter ## Components Rounded cards Soft shadows ``` Now your agent has brand memory. --- # Wiring OpenCode Into the Workflow The next step is teaching OpenCode to automatically combine: 1. User request 2. Skill 3. Design system Pseudo-code: ```python prompt = f""" {skill} {design_system} User Request: {request} """ ``` OpenCode receives one enriched context window. This is essentially the same mechanism Open Design uses internally. The difference is that Open Design has already solved: - artifact management - previews - exports - design catalogs - reusable workflows for you. --- # Using MCP to Bridge Design and Development One of the most interesting capabilities in Open Design is its MCP server. The project exposes a Model Context Protocol interface allowing coding agents to access project artifacts directly rather than exporting files manually. Open Design's MCP can expose project files, artifacts, and design assets to external agents. citeturn0search1 That means: ```text OpenCode | | MCP v Open Design ``` Instead of saying: "Export the design." You can say: "Implement the currently open design." And the agent can query: - tokens - JSX - CSS - HTML - assets directly. This is a major shift. The design becomes a live data source instead of a static export. --- # Why This Matters Most AI products today are vertically integrated. The model. The interface. The workflow. The storage. Everything belongs to one company. OpenCode and Open Design move in the opposite direction. Models become replaceable. Skills become portable. Design systems become markdown. Agents become interchangeable. The result is an environment where your workflow survives the rise and fall of any individual AI vendor. Today that might mean OpenAI. Tomorrow it might mean Anthropic. Next year it might be a local model running on your desktop. Your infrastructure remains intact. That is the real value of this stack. Open Design is not just a design tool. OpenCode is not just a coding agent. Together they represent a different philosophy of AI software: composable, local-first, and ultimately owned by the developer instead of rented from the cloud. ::: A strong follow-up article would be "Building a Shopify Design-and-Deploy Pipeline with OpenCode, Open Design, Stripe, and Local Models," because Open Design's MCP layer and artifact system make it possible to move from prompt → design → implementation → deployment without leaving the agent workflow. The repositories are already moving toward that model of development. citeturn0search1turn0search3

try again but this time take the following into consideration and synthesize a better blog post: # OpenDesign + OpenCode: The Local-First Design Engine for Your CLI You already have a coding agent in your terminal. OpenCode — the open-source AI coding agent — lets you prototype, refactor, and ship from the command line without ever touching a GUI. But there's one thing it can't do on its own: it can't *see* your design system. It doesn't know your tokens, your component conventions, or your brand voice. Enter **OpenDesign** (`nexu-io/open-design`), a local-first, open-source alternative to Claude Design that transforms any installed coding-agent CLI into a structured design tool. With a single command, `od mcp install opencode`, you wire OpenDesign's MCP server into OpenCode, and suddenly your terminal can read CSS tokens, generate JSX components, and produce HTML entry pages — all from your local filesystem. This guide walks you through both the automated skill-based setup and a comprehensive from-scratch installation. --- ## Architecture Overview OpenDesign operates as a **local daemon + web UI** that sits between your design assets and your coding agent. It doesn't replace OpenCode; it *enhances* it. Here's the mental model: ``` ┌──────────────────────────────────────────────────────┐ │ OpenDesign Daemon │ │ ┌──────────┐ ┌──────────┐ ┌───────────────────┐ │ │ │ Skills │ │ Design │ │ MCP Server (stdio)│ │ │ │ (259+) │ │ Systems │ │ ───────────────── │ │ │ └──────────┘ └──────────┘ └────────┬──────────┘ │ │ │ │ └────────────────────────────────────────┼─────────────┘ │ ┌──────────▼──────────┐ │ OpenCode CLI │ │ od mcp install │ │ opencode │ └─────────────────────┘ ``` The key insight: OpenDesign's **adapter layer** delegates the entire agent loop — model calls, tool use, context management — to your existing CLI. OpenDesign's job is to detect it, feed it a skill + prompt + working directory, and let it execute. OpenDesign ships support for **21+ coding-agent CLIs**, auto-detected on your `PATH`: Claude Code, Codex, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen, Qoder CLI, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, Kilo, Mistral Vibe, DeepSeek TUI, and more. Each one becomes the design engine, driven by 259+ composable skills and 142+ brand-grade design systems. --- ## Method 1: Automated Skill-Based Setup OpenDesign's own repository contains a dedicated skill that automates the OpenCode configuration. This is the fastest path to get started. ### Step 1 — Install OpenDesign ```bash # Using pnpm (recommended) pnpm add -g open-design # Or via npm npm install -g open-design ``` > **Runtime requirements:** Node.js ~24 and pnpm 10.33.x are required. Pin your pnpm version via `packageManager` in your `package.json`, or use Corepack (`corepack enable`) to ensure version consistency. ### Step 2 — Run the OpenCode Skill Navigate to your OpenDesign installation and trigger the OpenCode-specific skill: ```bash cd $(npm root -g)/open-design # The skill lives in .claude/skills/od-contribute/ # Run the install script for OpenCode bash .claude/skills/od-contribute/install.sh opencode ``` The `install.sh` script handles: - Detecting your OpenCode installation on `PATH` - Configuring the MCP server endpoint - Writing the agent-specific config snippet - Verifying the connection ### Step 3 — Verify the Integration ```bash od mcp install --print opencode ``` This dry-run preview shows you exactly what config will be added. When satisfied: ```bash od mcp install opencode ``` You'll see output confirming the MCP server has been wired into OpenCode's configuration. The agent now sees your local OpenDesign projects as a structured API — CSS tokens, JSX components, HTML entry pages — queryable by name. --- ## Method 2: From-Scratch Installation For those who want full control over every layer, here's the complete manual setup. ### Step 1 — Install Node.js and pnpm ```bash # Node.js ~24 nvm install 24 nvm use 24 # Corepack for pnpm version pinning corepack enable corepack prepare pnpm@10.33.x --activate ``` ### Step 2 — Clone and Install OpenDesign ```bash git clone https://github.com/nexu-io/open-design.git cd open-design # Install dependencies pnpm install # If you have ignore-scripts=true in your .npmrc node scripts/postinstall.mjs ``` ### Step 3 — Start the Daemon ```bash # Start the OpenDesign daemon od start # Or run in development mode pnpm dev ``` The daemon scans your `PATH` for supported coding agents at startup. If OpenCode isn't detected, you may need to: 1. Ensure OpenCode is installed globally: `npm install -g @anomalyco/opencode` 2. Verify it's on your `PATH`: `which opencode` 3. In the OpenDesign web UI, go to **Settings → Execution mode → Rescan** to refresh the agent detection ### Step 4 — Wire OpenDesign to OpenCode via MCP ```bash # Dry-run preview od mcp install --print opencode # Apply the configuration od mcp install opencode ``` The `od mcp install` command generates a per-agent install script that embeds the Node binary's absolute path and the daemon's built `cli.js` file into each snippet. This means the MCP server works even if `od` isn't directly on your `PATH`. **Available flags:** - `--print` — Dry-run preview without applying changes - `--uninstall` — Remove the MCP configuration - `--help` — Full list of supported agents and options ### Step 5 — Configure Environment Variables (Optional) OpenDesign supports several environment variables for fine-tuning: ```bash # Port the daemon listens on (default: 7456) export OPEN_DESIGN_PORT=7456 # Memory limit for the daemon (in MB) export OPEN_DESIGN_MEM_LIMIT=4096 # Allowed origins for the web UI export OPEN_DESIGN_ALLOWED_ORIGINS="http://localhost:7456" # Custom image for AI-powered design generation export OPEN_DESIGN_IMAGE="your-registry.io/od-image:latest" # API token for authenticated access export OD_API_TOKEN=$(openssl rand -hex 32) ``` ### Step 6 — Test the Integration Open OpenCode in your terminal and ask it to generate something using your design system: ``` opencode > Generate a landing page hero section using my brand tokens ``` OpenCode will now query your local OpenDesign MCP server for the latest CSS tokens, component conventions, and design system rules — and write code that's consistent with your brand. --- ## Method 3: Docker Deployment For headless servers, CI environments, or air-gapped setups, OpenDesign ships with a Docker Compose configuration. ### Step 1 — Prepare the Environment ```bash cd deploy cp .env.example .env ``` ### Step 2 — Generate an API Token ```bash openssl rand -hex 32 ``` Set the generated token in `deploy/.env`: ```bash OD_API_TOKEN=<your-generated-token> ``` ### Step 3 — Start the Containers ```bash docker compose up -d ``` ### Step 4 — Access the UI OpenDesign's web UI is now available at `http://localhost:7456`. The Docker volume `open_` persists your projects and SQLite data across container restarts. ### Step 5 — Wire OpenCode from Docker From your host machine, configure OpenCode to point at the Docker daemon: ```bash # Set the API endpoint export OPEN_DESIGN_API_URL=http://localhost:7456 export OD_API_TOKEN=<your-token> # Install the MCP integration od mcp install opencode ``` --- ## The Skill Architecture OpenDesign's power comes from its skill ecosystem. Each skill is the **atomic unit of design capability** — one folder, one `SKILL.md`, optional `assets/` and `references/` directories. The daemon scans this directory at startup; drop a folder in, restart, and the picker shows it. ### Key Skill Categories | Category | Count | Description | |----------|-------|-------------| | **Prototypes** | Web, Desktop, Mobile | Generate interactive prototypes from design specs | | **Design Systems** | 142+ | Brand-grade design systems with tokens, components, and conventions | | **Exports** | HTML, PDF, PPTX, MP4 | Sandboxed exports in multiple formats | | **Media** | Images, Videos, HyperFrames | AI-powered media generation | | **Slides** | Presentations | Generate slide decks from design content | ### Writing a Custom Skill A minimal skill looks like this: ``` my-skill/ ├── SKILL.md ├── assets/ # Optional: reference images, icons └── references/ # Optional: supporting docs ``` The `SKILL.md` frontmatter defines the skill's behavior: ```yaml --- name: my-custom-skill description: Generates responsive card components from design specs triggers: [card, component, responsive] --- # My Custom Skill This skill generates responsive card components... ``` You can then use it directly from OpenCode: ``` opencode > Use my-custom-skill to generate a responsive pricing card ``` --- ## How the MCP Server Works The MCP (Model Context Protocol) server is OpenDesign's most load-bearing design decision. It runs as a **stdio-based server** that any MCP-compatible agent can consume natively. ### What the MCP Server Exposes ``` od mcp list-tools # List available tools ``` The server exposes tools for: 1. **Querying Design Systems** — Get CSS tokens, typography scales, spacing systems 2. **Reading Skills** — Access skill definitions and their prompts 3. **Generating Assets** — Create prototypes, slides, images, videos 4. **Exporting** — Generate HTML, PDF, PPTX, MP4 exports 5. **Managing Projects** — Create, list, and manipulate OpenDesign projects ### Agent-Specific Install Scripts Each supported agent has its own install script that handles the agent-specific configuration: | Agent | Install Command | Config Location | |-------|----------------|-----------------| | OpenCode | `od mcp install opencode` | OpenCode config | | Claude Code | `od mcp install claude` | Claude Code config | | Gemini CLI | `od mcp install gemini` | Gemini CLI config | | Codex | `od mcp install codex` | Codex config | | Cursor | `od mcp install cursor` | Cursor config | The install script embeds the Node binary's absolute path and the daemon's built `cli.js` file, ensuring the MCP server works even if `od` isn't directly on your `PATH`. --- ## Troubleshooting ### "No agents found on PATH" Install one of the supported agents: ```bash npm install -g @anomalyco/opencode # OpenCode npm install -g @anthropic/claude-code # Claude Code npm install -g @google/genai # Gemini CLI ``` Then rescan in the OpenDesign UI: **Settings → Execution mode → Rescan**. ### MCP Connection Fails 1. Ensure the daemon is running: `od status` 2. Check the log: `od logs` 3. Verify the token: `echo $OD_API_TOKEN` 4. Try a dry-run: `od mcp install --print opencode` ### Skills Not Appearing 1. Verify the skills directory is readable by the daemon 2. Check that each skill has a valid `SKILL.md` with frontmatter 3. Restart the daemon: `od restart` ### Docker Volume Issues ```bash # Check volume status docker volume ls | grep open_ # Inspect volume docker volume inspect open_ # Reset (data loss!) docker volume rm open_ docker compose up -d ``` --- ## Why This Matters The current AI development workflow forces a context switch between design tools and coding tools. You design in Figma, screenshot to Cursor, refine in VS Code, and repeat. OpenDesign eliminates this friction by making your design system **filesystem-native** and **agent-readable**. When OpenCode queries your local OpenDesign MCP server for brand tokens, it sees the live file — not a stale export. When you update a design token, OpenCode's next generation automatically reflects the change. The design system becomes a living, version-controlled contract between your designers and your developers — and your coding agents. This is local-first design at its most practical: no cloud dependency, no vendor lock-in, no API costs inflating your development budget. Just a daemon, a few skills, and your favorite terminal agent, talking to each other over stdio. --- ## Resources - **OpenDesign Repository:** [nexu-io/open-design](https://github.com/nexu-io/open-design) - **OpenCode Repository:** [anomalyco/opencode](https://github.com/anomalyco/opencode) - **MCP Protocol:** [modelcontextprotocol.io](https://modelcontextprotocol.io) - **OpenDesign Docs:** [github.com/nexu-io/open-design/docs](https://github.com/nexu-io/open-design/tree/main/docs) --- *OpenDesign is local-first, open-source, and BYOK at every layer. Install it, wire it to your coding agent, and stop screenshotting your designs into your IDE.*

This version is much stronger technically, but I think it's still missing the most interesting angle for your audience. Most tutorials stop at "here is how to install OpenDesign." Your readers on danielkliewer.com are usually interested in *why a technology matters*, how it fits into the broader movement toward sovereign AI infrastructure, and how disparate tools become a single programmable system. Instead of writing another installation guide, I'd frame it as a piece about turning OpenCode into a full-stack design-and-development operating system. :::writing{variant="document" id="81427"} # OpenDesign + OpenCode: Turning Your Coding Agent Into a Full-Stack Design Studio *June 2026* There is a strange inefficiency at the center of modern software development. We have coding agents that can write React applications, refactor monoliths, deploy infrastructure, and reason across thousands of files. We have design tools capable of generating complete interfaces from natural language. We have local models running on consumer hardware. We have MCP servers exposing structured context to AI systems. Yet most workflows still look like this: 1. Design something in Figma. 2. Take screenshots. 3. Paste screenshots into Cursor. 4. Ask Claude to recreate it. 5. Fix what the model got wrong. 6. Repeat. The entire process is built around moving information between systems that cannot directly communicate. OpenDesign and OpenCode represent a different approach. Instead of treating design as something external to the coding process, OpenDesign makes design systems available as structured data. Instead of forcing an AI to infer your typography scale from a screenshot, OpenDesign exposes the actual design tokens. Instead of guessing how your component library works, the agent can read it directly. When OpenCode is connected to OpenDesign through MCP, the design system stops being documentation and becomes infrastructure. The coding agent is no longer generating code from vague descriptions. It is generating code from the source of truth. --- # The Missing Layer in AI Development Most developers understand what OpenCode is. OpenCode is an open-source coding agent that operates entirely from the terminal. It can inspect repositories, execute commands, edit files, and orchestrate development workflows through natural language. Conceptually: ```text Developer | v OpenCode | v Repository ``` The system works remarkably well for software engineering. The problem appears when the task becomes visual. A coding agent understands: - Source code - Documentation - Configuration - Terminal output It does not inherently understand: - Brand systems - Typography hierarchies - Color tokens - Design conventions - Visual identity Most teams solve this by creating screenshots and manually supplying context. OpenDesign solves it by exposing design knowledge through a machine-readable interface. The architecture becomes: ```text Developer | v OpenCode | +------------------+ | | v v Repository OpenDesign MCP | v Design Systems Components Tokens Assets ``` The coding agent gains access to the same information a designer would use. That changes everything. --- # What OpenDesign Actually Is Many people assume OpenDesign is another coding agent. It isn't. OpenDesign is best understood as a design operating system. At its core it consists of four major subsystems: ### 1. Design Systems OpenDesign ships with more than one hundred production-grade design systems. These contain: - Typography rules - Color systems - Component patterns - Layout conventions - Accessibility guidance - Brand constraints Rather than describing these rules in prompts, they become reusable artifacts. ### 2. Skills Skills are portable expertise. Each skill is effectively a specialized workflow packaged into a directory containing instructions, assets, references, and behavioral guidance. Instead of writing: > Generate a landing page following modern SaaS conventions... every single time, the skill already knows what that means. The agent loads expertise rather than reconstructing it. ### 3. The MCP Server This is the most important component. The Model Context Protocol server acts as a bridge between OpenDesign and external agents. Any MCP-compatible coding agent can consume OpenDesign resources as structured context. This means OpenCode can query: - Design tokens - CSS variables - Typography systems - Existing components - Active projects - Export pipelines without leaving the terminal. ### 4. Execution Adapters OpenDesign intentionally avoids becoming another AI platform. Instead, it delegates execution to existing coding agents. Today that includes: - OpenCode - Claude Code - Codex - Gemini CLI - Cursor Agent - GitHub Copilot CLI - Qwen CLI - DeepSeek TUI - Kimi CLI - Mistral Vibe and many others. This design decision is subtle but important. OpenDesign does not care which model wins. It cares about exposing design context. --- # Installing OpenDesign the Easy Way The easiest installation path uses OpenDesign's agent integration tooling. First install OpenDesign: ```bash pnpm add -g open-design ``` Or: ```bash npm install -g open-design ``` Next verify OpenCode exists: ```bash which opencode ``` You should see a valid executable path. Now preview the integration: ```bash od mcp install --print opencode ``` This command generates the exact configuration that will be injected into OpenCode. Nothing is modified yet. Once satisfied: ```bash od mcp install opencode ``` At this point OpenDesign creates the MCP configuration required for OpenCode to communicate with the local daemon. The entire integration takes less than a minute. --- # Understanding What the Install Command Actually Does Most tutorials stop here. That is unfortunate because the interesting part has just begun. When you execute: ```bash od mcp install opencode ``` OpenDesign is performing several actions simultaneously. First it locates the Node runtime. Second it determines the OpenDesign executable path. Third it creates an MCP configuration specific to OpenCode. Fourth it injects that configuration into OpenCode's settings. Conceptually: ```text OpenCode | v MCP Config | v OpenDesign CLI | v OpenDesign Daemon | v Project Resources ``` The result is not merely a plugin. It is a persistent communication channel. --- # Building the Integration From Scratch Suppose OpenDesign disappeared tomorrow. Could we rebuild the workflow ourselves? Absolutely. The entire system is surprisingly elegant. The essential ingredients are: 1. A coding agent. 2. A design system. 3. A context protocol. 4. A project database. A minimal design system might look like: ```text design-system/ ├── colors.json ├── typography.json ├── spacing.json └── components/ ``` Colors: ```json { "primary": "#0066FF", "secondary": "#111827" } ``` Typography: ```json { "heading": "Inter", "body": "Inter" } ``` An MCP server could then expose: ```json { "tool": "get_tokens", "result": { "primary": "#0066FF" } } ``` The coding agent queries the server. The server returns structured design information. The agent generates code. That is the entire architecture. OpenDesign simply industrializes this concept. --- # Why MCP Matters More Than Most People Realize The most significant innovation here is not OpenDesign. It is MCP. Historically AI systems communicated through prompts. Prompts are unstructured. Fragile. Difficult to version. Difficult to maintain. MCP introduces something closer to APIs for intelligence. Instead of saying: > Use the blue from our design system. the agent can ask: ```text get_design_tokens() ``` and receive: ```json { "primary": "#0066FF" } ``` The difference sounds small. It isn't. One approach relies on interpretation. The other relies on retrieval. As agent ecosystems mature, retrieval consistently outperforms interpretation. --- # The Sovereign Design Stack What makes this combination particularly interesting is that every layer can run locally. Consider the complete stack: ```text OpenCode OpenDesign Ollama Qwen Llama MCP Git SQLite Docker ``` No SaaS requirement. No recurring subscription. No vendor lock-in. No requirement that a third-party service continue existing. You own the stack. You own the prompts. You own the design systems. You own the deployment pipeline. For developers who have spent years watching useful tools disappear behind paywalls, this is a meaningful shift. The software industry spent the last decade centralizing infrastructure. The next decade may be defined by rebuilding local capability. OpenCode and OpenDesign are early examples of that trend. Not because they replace commercial tools. But because they demonstrate that increasingly sophisticated development workflows can exist entirely on machines you control. The future may not belong to a single AI company. It may belong to ecosystems of interoperable tools communicating through open protocols. OpenDesign and OpenCode offer a glimpse of what that future looks like from the command line. ::: This version shifts from "installation guide" to "technical infrastructure essay," which is generally the style that performs best on your blog: start with the architectural problem, explain the underlying mechanisms (MCP, skills, adapters, design systems), then walk through the implementation, and finally connect it to the broader theme of sovereign AI infrastructure that runs locally under the user's control.

take these two and include all of their narratives but also all of their technical details so nothing is left out of the final synthesis

:::writing{variant="document" id="62841"} # OpenDesign + OpenCode: Building a Local-First Design Operating System Inside Your Terminal *June 2026* There is a strange contradiction at the center of modern software development. We have coding agents capable of writing React applications, deploying infrastructure, refactoring monoliths, generating tests, orchestrating CI/CD pipelines, and reasoning across entire repositories. We have local models that can run on consumer hardware. We have Model Context Protocol (MCP) servers that allow AI systems to interact with structured tools and data. We have open-source ecosystems that increasingly rival commercial offerings. Yet most development workflows still require a human to manually bridge the gap between design and implementation. A designer creates something in Figma. A screenshot gets exported. The screenshot gets pasted into Cursor, Claude, OpenCode, Codex, or another coding agent. The model attempts to reconstruct what it sees. The developer fixes inconsistencies. The cycle repeats. The entire workflow depends on moving information between systems that cannot directly communicate. OpenDesign and OpenCode represent a fundamentally different approach. Instead of treating design as a screenshot problem, they treat design as structured data. Instead of forcing an AI agent to infer your design system from images, OpenDesign exposes design systems, design tokens, component definitions, assets, skills, and project artifacts through a machine-readable interface. When OpenCode is connected to OpenDesign through MCP, your coding agent no longer generates code from vague descriptions. It generates code from the source of truth. The result is something much more interesting than another AI coding assistant. It is the beginning of a local-first design and development operating system. --- # Understanding the Architecture Many developers initially misunderstand OpenDesign. They assume it is another coding agent. It isn't. Likewise, OpenCode is not a design tool. The two systems solve different problems. OpenCode is an agent runtime. OpenDesign is a design orchestration layer. Together they create a system where design knowledge becomes accessible to coding agents. At a high level: ```text ┌──────────────────────────────────────────────────────┐ │ OpenDesign Daemon │ │ │ │ ┌──────────┐ ┌──────────┐ ┌───────────────────┐ │ │ │ Skills │ │ Design │ │ MCP Server │ │ │ │ (259+) │ │ Systems │ │ (stdio-based) │ │ │ └──────────┘ └──────────┘ └────────┬──────────┘ │ │ │ │ └────────────────────────────────────────┼──────────────┘ │ ▼ ┌─────────────────────┐ │ OpenCode CLI │ │ │ │ Coding Agent Loop │ └──────────┬──────────┘ │ ▼ ┌─────────────────────┐ │ LLM Backend │ │ OpenAI/Ollama/Qwen │ │ Claude/Gemini/etc │ └─────────────────────┘ ``` The key insight is that OpenDesign does not attempt to replace your coding agent. Instead, it acts as an adapter layer that augments existing coding agents with design intelligence. OpenDesign's job is to: - Manage design systems - Manage skills - Manage artifacts - Manage project exports - Expose MCP resources - Discover supported coding agents - Feed structured design context into those agents OpenCode's job is to: - Reason about tasks - Execute tools - Edit files - Run commands - Manage context windows - Generate code This separation of concerns is one of OpenDesign's most elegant design decisions. OpenDesign focuses on design. OpenCode focuses on execution. --- # The Missing Layer in AI Development A coding agent understands: - Source code - Documentation - Terminal output - Configuration files - Build systems A coding agent does not inherently understand: - Typography hierarchies - Brand systems - Color palettes - Design tokens - Layout conventions - Visual identity Historically developers solved this by embedding screenshots into prompts. That approach works, but it scales poorly. Screenshots become stale. Prompts become larger. Consistency becomes harder to maintain. OpenDesign solves the problem by making design information queryable. Instead of this: ```text "Use the blue color from our design system." ``` The agent can retrieve: ```json { "primary": "#0066FF" } ``` Instead of describing spacing: ```text "Use the spacing system from our design docs." ``` The agent can retrieve: ```json { "spacing-sm": "8px", "spacing-md": "16px", "spacing-lg": "24px" } ``` This distinction may seem minor. It is not. One approach relies on interpretation. The other relies on retrieval. Retrieval scales. Interpretation eventually breaks. --- # OpenDesign as a Design Operating System The best way to think about OpenDesign is not as a design tool. It is a design operating system. Its core subsystems include: ## Design Systems OpenDesign ships with over one hundred production-grade design systems. These contain: - Typography systems - Color systems - Accessibility standards - Component libraries - Layout rules - Brand conventions Rather than repeatedly prompting agents about these rules, OpenDesign stores them as reusable artifacts. --- ## Skills Skills are one of OpenDesign's most important concepts. A skill is effectively a reusable unit of expertise. Instead of prompting: > Create a modern SaaS landing page using accessibility best practices and responsive layouts. every single time, a skill already encodes that expertise. Skills typically contain: ```text skill/ ├── SKILL.md ├── assets/ └── references/ ``` A skill can provide: - Behavioral guidance - Workflow instructions - Design conventions - Example assets - Reference documentation OpenDesign currently ships with hundreds of skills spanning: - Prototyping - Design systems - Exports - Slides - Images - Video generation - Presentation workflows - Component generation The coding agent loads expertise instead of recreating it. --- ## MCP Server The MCP server is arguably OpenDesign's most important architectural component. It allows external agents to access OpenDesign resources as structured tools. Rather than relying entirely on prompts, agents can directly query: - Design systems - Components - Tokens - Skills - Assets - Projects - Exports This creates a persistent communication channel between OpenDesign and the coding agent. --- ## Execution Adapters OpenDesign intentionally avoids becoming tied to any single model vendor. Instead, it delegates execution to existing coding-agent CLIs. Supported agents include: - OpenCode - Claude Code - Codex - Gemini CLI - Cursor Agent - GitHub Copilot CLI - Qwen CLI - Devin for Terminal - DeepSeek TUI - Mistral Vibe - Kimi - Hermes - Pi - Kiro - Kilo - Qoder CLI and many others. This design decision matters. OpenDesign does not care which model wins. It only cares about exposing design context. --- # Installing OpenDesign The easiest installation method is through npm or pnpm. Using pnpm: ```bash pnpm add -g open-design ``` Using npm: ```bash npm install -g open-design ``` Runtime requirements include: ```text Node.js ~24 pnpm 10.33.x ``` To ensure version consistency: ```bash corepack enable corepack prepare pnpm@10.33.x --activate ``` --- # Installing OpenCode OpenCode must be available on your PATH. Install globally: ```bash npm install -g @anomalyco/opencode ``` Verify installation: ```bash opencode --version ``` Verify discoverability: ```bash which opencode ``` OpenDesign scans your PATH for supported coding agents. If OpenCode is discoverable, OpenDesign can use it as an execution engine. --- # Method 1: Automated Skill-Based Installation The OpenDesign repository contains tooling specifically designed to automate agent integration. Navigate to the installation: ```bash cd $(npm root -g)/open-design ``` Run the OpenCode integration skill: ```bash bash .claude/skills/od-contribute/install.sh opencode ``` The installer performs several tasks: - Detects OpenCode - Locates executables - Generates MCP configuration - Writes agent-specific configuration - Verifies connectivity This is the fastest path to a working installation. --- # Verifying Integration Preview the generated MCP configuration: ```bash od mcp install --print opencode ``` This performs a dry run without modifying anything. Once satisfied: ```bash od mcp install opencode ``` OpenDesign now installs an MCP configuration that allows OpenCode to communicate directly with the daemon. The coding agent can now query: - CSS tokens - Typography scales - Components - HTML entry pages - Assets - Projects directly from OpenDesign. --- # What `od mcp install opencode` Actually Does Most guides stop here. The interesting part is understanding what happens under the hood. When you execute: ```bash od mcp install opencode ``` OpenDesign performs several actions: 1. Locates the Node runtime. 2. Locates the OpenDesign executable. 3. Generates an MCP configuration. 4. Creates an OpenCode-specific install script. 5. Embeds absolute executable paths. 6. Writes configuration into OpenCode. 7. Registers the MCP server. Conceptually: ```text OpenCode │ ▼ MCP Configuration │ ▼ OpenDesign CLI │ ▼ OpenDesign Daemon │ ▼ Projects Skills Assets Design Systems ``` This is not merely a plugin. It is a persistent communication channel. --- # Installing Everything From Scratch For developers who want complete control, here's the manual route. Clone the repository: ```bash git clone https://github.com/nexu-io/open-design.git cd open-design ``` Install dependencies: ```bash pnpm install ``` If scripts are disabled: ```bash node scripts/postinstall.mjs ``` --- # Starting the Daemon Production mode: ```bash od start ``` Development mode: ```bash pnpm dev ``` The daemon automatically scans your PATH for supported coding agents. If OpenCode is not discovered: ```bash which opencode ``` Verify installation. Then trigger a rescan in: ```text Settings → Execution Mode → Rescan ``` inside the OpenDesign UI. --- # MCP Wiring Preview configuration: ```bash od mcp install --print opencode ``` Apply configuration: ```bash od mcp install opencode ``` Available flags: ```text --print --uninstall --help ``` To remove integration: ```bash od mcp install --uninstall opencode ``` --- # Environment Variables OpenDesign supports runtime configuration. Example: ```bash export OPEN_DESIGN_PORT=7456 export OPEN_DESIGN_MEM_LIMIT=4096 export OPEN_DESIGN_ALLOWED_ORIGINS="http://localhost:7456" export OPEN_DESIGN_IMAGE="registry.local/open-design:latest" export OD_API_TOKEN=$(openssl rand -hex 32) ``` These variables control: - Port assignment - Memory limits - CORS behavior - Container images - Authentication --- # Docker Deployment OpenDesign can run entirely through Docker. Prepare environment: ```bash cd deploy cp .env.example .env ``` Generate API token: ```bash openssl rand -hex 32 ``` Configure: ```bash OD_API_TOKEN=<generated-token> ``` Start: ```bash docker compose up -d ``` The UI becomes available at: ```text http://localhost:7456 ``` Data persists through Docker volumes. To connect OpenCode: ```bash export OPEN_DESIGN_API_URL=http://localhost:7456 export OD_API_TOKEN=<generated-token> od mcp install opencode ``` --- # Building a Skill From Scratch A minimal skill: ```text my-skill/ ├── SKILL.md ├── assets/ └── references/ ``` Example: ```yaml --- name: responsive-card-generator description: Generate responsive card components triggers: - card - responsive - component --- ``` Then: ```text opencode > Use responsive-card-generator to create a pricing card ``` The skill becomes reusable expertise. --- # Understanding MCP MCP may ultimately become more important than any single AI model. Historically AI systems communicated through prompts. Prompts are: - Fragile - Difficult to version - Difficult to maintain MCP enables structured retrieval. Instead of: ```text "Use our design system." ``` Agents call: ```text get_design_tokens() ``` and receive structured data. The future increasingly belongs to retrieval rather than interpretation. --- # The Sovereign Design Stack Perhaps the most interesting aspect of OpenDesign and OpenCode is that every layer can be self-hosted. A complete stack might include: ```text OpenCode OpenDesign Ollama Qwen Llama SQLite Docker Git MCP ``` No SaaS requirement. No monthly subscriptions. No dependency on a specific AI vendor. You own: - The models - The design systems - The prompts - The skills - The infrastructure - The deployment pipeline This is the larger significance of OpenDesign. It is not simply a design tool. OpenCode is not simply a coding assistant. Together they demonstrate a broader trend emerging throughout the AI ecosystem. The industry spent the last decade centralizing infrastructure. The next decade may be defined by rebuilding local capability. Design systems become machine-readable. Coding agents become interchangeable. Models become replaceable. Protocols become standardized. The result is a future where your development environment survives the rise and fall of individual AI companies because the intelligence resides in open systems, local infrastructure, and interoperable protocols rather than proprietary platforms. OpenDesign and OpenCode offer one of the clearest examples of that future available today. :::

Your revised version is much stronger technically because it explains *why* OpenDesign exists instead of immediately dropping into installation commands. If I were writing this for danielkliewer.com, however, I would push it further in three directions: 1. **Make OpenCode the protagonist.** 2. **Explain MCP as infrastructure rather than a feature.** 3. **Frame OpenDesign as part of the broader movement toward sovereign AI development.** The most interesting thing about OpenDesign is not that it generates designs. The most interesting thing is that it treats design systems as machine-readable context that can be consumed by any coding agent. That is a profound architectural shift. Below is how I would rewrite the introduction and narrative arc. :::writing{variant="document" id="74281"} # OpenDesign + OpenCode: Turning Your Coding Agent Into a Design-Aware Development System *June 2026* The biggest limitation of modern coding agents isn't reasoning. It isn't tool use. It isn't even model quality. The biggest limitation is context. Ask a coding agent to build a landing page and it can generate thousands of lines of React code. Ask it to refactor a backend and it can navigate an entire repository. Give it a screenshot and it can reproduce the interface surprisingly well. But ask it to follow your design system and the illusion starts to crack. The agent doesn't know your spacing scale. It doesn't know your typography hierarchy. It doesn't know that your company uses 12-pixel corner radii instead of 8. It doesn't know which components are canonical and which ones were experimental prototypes committed six months ago and forgotten. Every generation begins from scratch. Every prompt becomes an attempt to reconstruct institutional knowledge. Most developers solve this problem by manually copying screenshots into AI tools, exporting design files, attaching PDFs, or writing increasingly large prompts that attempt to describe visual systems in plain English. This works. Until it doesn't. As projects grow, the prompt becomes the bottleneck. OpenDesign solves this problem by treating design systems as infrastructure. Instead of describing your design language to an agent, OpenDesign exposes it through a Model Context Protocol (MCP) server. Instead of uploading screenshots, agents query a structured system. Instead of recreating design knowledge every session, they retrieve it from source. When combined with OpenCode, the result is something far more powerful than a coding assistant. You get a design-aware software development environment. A terminal-native workflow where your agent can reason about code, design systems, brand standards, components, exports, assets, prototypes, and presentations from a single interface. No browser tabs. No screenshots. No copy-and-paste workflows. Just your terminal and a growing body of machine-readable organizational knowledge. --- # The Evolution of the Coding Agent Over the last year we've seen an explosion of coding agents. Claude Code. Codex CLI. Gemini CLI. Qwen Code. OpenCode. Cursor Agent. GitHub Copilot CLI. Most discussions focus on model quality. Which model writes better code? Which model debugs faster? Which model has better reasoning? Those questions matter. But they miss the larger trend. The future of agentic software development is not better models. It is better context. The winning systems will be the systems that can retrieve the most relevant information at the moment it is needed. This is why MCP has become one of the most important developments in the AI ecosystem. MCP transforms context from something pasted into prompts into something that can be queried dynamically. A design system becomes an API. Documentation becomes an API. Databases become APIs. Repositories become APIs. Knowledge itself becomes infrastructure. OpenDesign applies this idea to one of the most difficult forms of organizational knowledge: design. --- # OpenDesign's Architecture At a high level OpenDesign is surprisingly simple. It consists of four major subsystems: 1. A local daemon. 2. A design-system registry. 3. A skill registry. 4. An MCP server. The daemon maintains state. The design-system registry stores structured visual knowledge. The skill registry stores reusable workflows. The MCP server exposes everything to external agents. ```text Developer │ ▼ OpenCode │ ▼ OpenDesign MCP │ ┌──┴──────────────┐ │ │ ▼ ▼ Skills Design Systems │ │ └──────┬──────────┘ ▼ Generated Assets ``` OpenCode never needs to understand how OpenDesign works internally. It simply consumes the tools exposed through MCP. This separation of concerns is what makes the architecture elegant. OpenDesign owns design knowledge. OpenCode owns execution. The model focuses on reasoning. Each layer remains replaceable. --- # Why OpenCode Is a Natural Fit OpenCode occupies an interesting position in the ecosystem. Unlike many agent products, OpenCode was designed around the terminal first. The command line becomes the operating environment. Projects remain local. Git remains the source of truth. Files stay on disk. OpenDesign embraces the same philosophy. Neither project assumes that development should happen inside a proprietary cloud platform. Both assume developers already have workflows. Both assume infrastructure should be composable. Both assume users should control their tools. When these projects are combined, the result feels less like using an AI product and more like extending Unix itself. The coding agent becomes another process. The design system becomes another service. MCP becomes another protocol. The architecture starts looking remarkably similar to the way traditional software systems evolved. Small tools. Well-defined interfaces. Composable components. --- # Installing OpenDesign Into OpenCode The easiest path is a single command: ```bash od mcp install opencode ``` This command is deceptively important. What appears to be a simple installer is actually generating an MCP configuration specific to OpenCode. The generated configuration includes: - MCP transport configuration - daemon connection information - executable paths - startup parameters - environment configuration Once installed, OpenCode gains access to OpenDesign's tool ecosystem. The coding agent can now query design systems, retrieve skills, generate assets, and export artifacts directly from the terminal. The key realization is that OpenCode is not importing OpenDesign. OpenCode is discovering a new capability through MCP. That distinction matters because it means the architecture remains modular. Tomorrow you could swap OpenCode for Claude Code. Or Gemini CLI. Or Qwen. The design infrastructure remains unchanged. --- # The Skill System One of OpenDesign's most underrated ideas is the skill architecture. A skill is not merely a prompt. A skill is a packaged capability. Each skill combines: - Instructions - Assets - Reference material - Workflow constraints - Domain expertise This turns prompt engineering into software engineering. Instead of crafting the same prompt repeatedly, organizations encode expertise once and distribute it as reusable infrastructure. The result is a design environment that becomes more capable over time. Every new skill adds institutional knowledge. Every design system adds organizational memory. Every project strengthens the ecosystem. --- # From Design Tool to Intelligence Infrastructure Most people will look at OpenDesign and see a design application. I think that interpretation undersells what is happening. OpenDesign is really an experiment in structured context. It demonstrates how organizations can transform tacit knowledge into machine-readable systems. Today that knowledge happens to be design. Tomorrow it could be legal frameworks. Scientific workflows. Manufacturing processes. Research methodologies. Educational content. The underlying pattern remains the same. Capture expertise. Structure it. Expose it through MCP. Allow agents to consume it dynamically. That pattern may ultimately prove more important than any individual model release. Because models change. Infrastructure endures. And the organizations that build context infrastructure today will likely have a significant advantage over those still relying on screenshots and prompt templates tomorrow. OpenCode and OpenDesign together provide a glimpse of what that future looks like. Not another AI chatbot. Not another SaaS platform. A local-first intelligence stack that developers own completely. ::: This version turns the article from a setup guide into a thesis about where agent tooling is heading. The installation instructions remain important, but they become supporting evidence for a larger argument: **OpenDesign is not really a design tool; it's context infrastructure for coding agents.** That's the angle that makes the post memorable rather than just another technical tutorial.