Turn Your Coding Agent into a Design Engine with OpenDesign

You need a landing page, a pitch deck, or a product demo video. Design tools hand you an empty canvas; your coding agent hands you generic output. OpenDesign, a 97k-star project, turns the agent you already run into the design engine.

Why This Skill Matters

OpenDesign is the open-source Claude Design alternative, Apache-2.0 licensed and agent-native. It ships no agent of its own — the coding CLIs already on your PATH do the generating. Under the hood sit 27 runtime definitions backed by 26 distinct local CLI executables, so Claude Code, Codex, Cursor, Copilot, and many others work as the rendering brain. It is local-first: a native desktop app for macOS (Apple Silicon + Intel) and Windows (x64); Linux currently runs from source.

The catalog is the pitch. 100+ functional skills carry agent behavior, 151 brand-grade design systems center on a DESIGN.md brand contract, and 277 official plugins ship next to 183 remixable examples. Deck mode includes 15 templates with 36 themes, the image side carries 93 ready-to-replicate prompts, and motion graphics run on 11 HyperFrames templates plus 39 Seedance prompts. Inside a project's Studio, the conversation, generated files, and live preview stay together across six artifact types: prototypes, decks, mobile apps, images, documents, and HyperFrames.

Installation

The zero-config path is the desktop app: download the macOS or Windows build from open-design.ai or the GitHub Releases page, and it auto-detects every coding-agent CLI on your PATH. To skip the GUI and wire OpenDesign into your agent directly:

od mcp install claude

The same command covers 16 agent targets, from Codex and Cursor to Cline and Trae; a hosted equivalent is curl -fsSL https://open-design.ai/install.sh | sh -s claude. One macOS gotcha: /usr/bin/od is Apple's octal-dump utility and can shadow OpenDesign's od command — prefer the copy-paste snippet under Settings → MCP server in the desktop app, which uses absolute paths.

Real Workflow: Generate a Branded Landing Page

Inside your agent, describe the artifact and name the design system:

Use open-design to generate a landing page with the Linear design system

The full loop is brief → plugin → direction → design system → artifact → handoff → memory. On a filesystem-backed CLI run, the agent writes canonical project files and the preview follows them; switching the design system changes the tokens for the next render. Every render reads the active DESIGN.md as the brand contract, so output arrives pre-shaped by your palette, fonts, and components.

Real Workflow: Refresh an Existing Codebase to Your Brand

Hand the agent a git repository plus a DESIGN.md, and the od-code-migration scenario refactors your real components to the brand spec as a PR. Dedicated plugins migrate Figma and Pencil workflows into React, Next.js, or Vue source, so the handoff lands in code rather than in a screenshot.

Tips

• The od plugin CLI works without any UI: od plugin list, od plugin search "landing page", od plugin info od-default, od plugin install, od plugin apply — every command takes --json for scripting.
• Export targets are real files: HTML (single file, inlined assets), PDF via browser print, PPTX through an agent-driven skill, ZIP, Markdown, and MP4 through HyperFrames.
• The default deck template, guizang-ppt, is bundled verbatim from op7418/guizang-ppt-skill — see the dedicated guizang-ppt walkthrough for the deeper dive.
• No coding agent installed? The BYOK proxy presets cover OpenAI, Anthropic, Azure, Google Gemini, Ollama, LM Studio, and vLLM endpoints.
• The daemon binds to 127.0.0.1 and is read-only by default, with SSRF protection at the proxy edge.

When Not to Use This

OpenDesign generates artifacts through an agent — it is not a pixel-pushing canvas, so hand-placing every layer in a Figma-style editor remains the better fit for that workflow. There is no prebuilt Linux desktop release yet; Linux users run from source. And generation requires an agent CLI on your PATH, a BYOK endpoint, or the built-in OpenDesign Cloud model service — with none of these, nothing renders.

See the leaderboard for more skills.