Open Design is a free open-source AI design workspace for creating prototypes, decks, dashboards, mobile screens, documents, media assets, and marketing pages with agent-driven workflows.
The app now works in two main modes. You can sign in to Open Design AMR, pick a model, and start creating without setting up a separate CLI or API key first.
You can also keep the local-first workflow with coding-agent CLIs, BYOK providers, file-based skills, Markdown design systems, a local daemon, and sandboxed browser previews.
Open Design is best for developers, product designers, and technical founders who want more control than a hosted visual workspace usually provides.
Choose it when you want source access, project files on your machine, custom design systems, plugin workflows, preview comments, and export options that can move into a real implementation process.
Features
- Uses Open Design AMR as a built-in ACP stdio agent with desktop sign-in, model discovery, account status, image attachment handling, and the bundled
velaCLI. - Auto-detects coding-agent CLIs on PATH, including Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Devin for Terminal, Aider, Trae CLI, Antigravity, DeepSeek Reasonix, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, Kilo, Mistral Vibe, and DeepSeek TUI.
- Runs BYOK providers through Anthropic, OpenAI-compatible endpoints, Azure OpenAI, Google Gemini, Ollama Cloud, and local loopback providers, with in-field API key validation, draft validation, fetched account models, and configuration outcome tracking.
- Uses a plugin runtime so design systems, slices, prototypes, exports, Figma-related work, and skill bundles can live in a plugin ecosystem.
- Shows plugin registry details with trust badges, marketplace metadata, install flows, previews, share rows, and in-app discovery surfaces.
- Adds a Lexical composer with atomic @mention pills, caret-anchored mention and slash popovers, and a live-streaming code card in chat.
- Runs interactive terminals beside the chat, lets you fork a conversation from any message, and keeps design work in one project view.
- Collects external references through a browser-style reference board with page capture.
- Keeps an auto-memory store for agent context across runs and projects.
- Runs scheduled routines for repeatable design, review, or artifact work.
- Ships a large file-based skill and plugin catalog for prototypes, decks, documents, dashboards, media workflows, research reviews, browser tasks, and design handoff.
- Loads DESIGN.md systems plus structured tokens.css and component manifests for many brand and product styles.
- Installs, uninstalls, renames, pins, and manages skills and design systems from the desktop app.
- Uses a right-side Questions tab for discovery questions and can skip them for unchanged example prompts.
- Renders artifacts in a sandboxed iframe next to the chat and streams staged preview feedback during generation.
- Queues preview comments during active runs, pins deck markers while busy, and supports comment image and note attachments.
- Combines Draw and Screenshot into a cleaner Studio mark workflow.
- Groups image, video, and audio entries in a unified Media tab and serves video or audio with HTTP 206 range requests.
- Exports HTML, PDF, PPTX, ZIP, Markdown, media workflows, Cloudflare Pages deployments, project export manifests, and responsive design handoff files.
- Creates contained project preview URLs and run-scoped MCP tool bundles for editor or coding-agent handoff.
- Runs an MCP server and consumes external MCP servers through daemon-managed OAuth.
- Lets MCP clients write files, delete files, delete projects, resolve the active project directory, run generation loops, and bootstrap Codex from the Open Design workspace.
- Stores runtime state in
.od/with SQLite, project files, artifacts, media configuration, tabs, templates, conversations, and local project data.
Use Cases
- Create a magazine-style HTML pitch deck for a seed round by typing a brief, answering the Questions tab prompts, and selecting a visual direction.
- Capture external references in a project board, then use page captures and notes as design context during the session.
- Prototype a three-screen mobile onboarding flow with a mobile skill and device-frame assets.
- Produce a SaaS landing page with hero, feature, pricing, and CTA sections against a Linear, Vercel, Stripe, Apple, or Figma-style design system.
- Build a gamified mobile app prototype across multiple frames for investor demos or early user testing.
- Draft a PM specification document, OKR scoresheet, meeting note, invoice, finance summary, or incident runbook with document skills.
- Use plugins to add reusable project context, inputs, surfaces, and multi-stage artifact workflows.
- Run several asset-gathering or design sessions in parallel while queued comments keep review notes attached to the preview.
- Create responsive handoff files, project export manifests, and contained preview URLs for a coding agent or editor.
- Run scheduled routines for repeatable project maintenance, design review, or status artifacts.
Open Design vs Claude Design
Claude Design is Anthropic’s hosted visual creation workspace for designs, prototypes, slides, one-pagers, landing pages, product mockups, and other polished visual outputs. It turns prompts, uploaded context, codebase context, or existing design material into a working canvas that you can refine through chat, inline comments, direct edits, and export options.
Open Design belongs to the same artifact-first category, but it uses a local and open-source architecture. Claude Design centers the workflow inside Claude and Anthropic’s hosted product environment. Open Design uses a web app, desktop shell, local daemon, AMR, coding-agent adapters, plugins, skills, design systems, device frames, comments, and a sandboxed preview loop.
Open Design is a strong free alternative to Claude Design if you want source access, self-hosting, local project files, plugin control, BYOK model choices, local coding agents, and design systems close to your development environment. Claude Design remains easier if your team already works inside Claude and prefers a managed hosted product.
| Feature | Open Design | Claude Design |
|---|---|---|
| Access model | Free open-source software | Claude subscription feature |
| Source access | Open codebase under Apache-2.0 | Closed product environment |
| Main workflow | Local daemon plus web or desktop app with chat, terminal, reference, and preview surfaces | Hosted Claude design workspace |
| First-run AI option | Open Design AMR inside the desktop flow | Claude inside Anthropic’s product |
| Local agents | Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Aider, Trae CLI, Antigravity, DeepSeek Reasonix, and more | Not a local agent picker |
| BYOK providers | Anthropic, OpenAI-compatible endpoints, Azure OpenAI, Google Gemini, Ollama Cloud, and local loopback providers | Not the main workflow |
| Self-hosting | Supported | Not supported |
| MCP | Built-in MCP server, run-scoped MCP tool bundles, and external MCP client support | Claude workspace and connector workflow |
| Extensibility | Plugins, skills, design systems, templates, and MCP clients | Claude-native product features and connectors |
| Design systems | DESIGN.md files, tokens.css, component manifests, and in-app management | Team design system setup inside Claude |
| Preview collaboration | Sandboxed preview with queued comments, attachments, pinned deck markers, and staged feedback | Claude canvas collaboration |
| Exports | HTML, PDF, PPTX, ZIP, Markdown, media workflows, Cloudflare Pages, project export manifests, and handoff files | Canva, PDF, PPTX, standalone HTML, and internal sharing |
| Best fit | Developers, open-source users, technical designers, and local-first teams | Teams already using Claude plans |
| Main tradeoff | More local, provider, plugin, and permission review when you go beyond AMR | Less local control |
How to Use Open Design
Download the desktop app
Use the GitHub releases page for packaged builds. The 0.10.0 release includes macOS Apple Silicon and Intel DMG files, a Windows x64 installer, and a Windows x64 portable ZIP. Check the release assets before installation because platform files can vary by version.
If you want the lowest setup path, start with the desktop app and Open Design AMR. You can sign in, pick an available model, and create your first artifact before wiring a separate local agent CLI or API provider.
Run from the repository
Use this setup for local web development.
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version
pnpm install
pnpm tools-dev run webOpen the URL printed by tools-dev.
Run the desktop shell from the repository
Use this command to start the daemon, web app, and desktop shell in the background.
pnpm tools-devRun with Docker
Use Docker Compose from the deploy folder.
cd deploy
docker compose up -dOpen the app at this local URL.
http://localhost:7456
For cloud or server deployment, check the current repository documentation before use. Newer docs cover Docker updates along with CloudFormation, Azure Container Instances, and Alibaba Cloud deployment paths.
Starting a Design Session
- Open the web or desktop interface.
- Choose Open Design AMR, an installed local agent CLI, or a BYOK provider.
- If you use AMR, sign in from the desktop flow and choose an available model.
- If you use a local agent CLI, confirm that the binary is available on your PATH.
- Choose a skill or plugin for the output you need, such as a web prototype, SaaS landing page, dashboard, mobile app, deck, browser task, research decision room, or release notes one-pager.
- Choose a design system such as Linear, Vercel, Stripe, Apple, Cursor, Figma, Claude, BMW M, Slack, Cisco, Webex, Mission Control, WeChat, or Neutral Modern.
- Type a design brief in the chat, use mentions when relevant, and add reference material from the project workspace.
- Answer the Questions tab prompts for audience, surface, scale, tone, brand context, constraints, and plugin inputs when they appear.
- Review the live artifact in the sandboxed preview and watch staged preview feedback while generation runs.
- Use Inspect, manual edit mode, queued preview comments, comment attachments, tweaks, Studio mark tools, or another chat instruction to revise the output.
- Export the artifact as HTML, PDF, PPTX, ZIP, Markdown, media, Cloudflare Pages deployment, project export manifest, or design handoff files.
Adding a Custom Skill
Drop a folder containing SKILL.md and an assets/ subdirectory into the skills/ directory. Restart the daemon if the app does not refresh the skill list automatically. The extended od: frontmatter supports mode, platform, scenario, preview, and design_system fields. The full frontmatter schema is documented in docs/skills-protocol.md.
Use od templates when you want to work with user-saved templates from the CLI. It fits recurring artifacts with a preferred layout, reference set, or project structure.
The desktop app can also install and uninstall supported skills and design systems from Settings. Newer Open Design builds treat many reusable workflows as plugins, so check the plugin drawer and marketplace surfaces when you want reusable inputs, trust metadata, or a publishable extension package.
Supported AI Coding Agents
Open Design scans your PATH on startup, detects installed agents, and lets you switch the active design engine from the model picker. Open Design AMR is the built-in path, while local agent CLIs remain useful when you want your existing terminal agent to operate on project files. Newer builds can also keep an interactive terminal beside the chat, so command output, local files, and terminal context stay visible during the session.
| Agent | Binary | Transport or parser |
|---|---|---|
| Open Design AMR | vela | ACP stdio agent bundled with the installer |
| Claude Code | claude | claude-stream-json typed events |
| Codex CLI | codex | JSON event stream |
| Devin for Terminal | devin | ACP JSON-RPC |
| Cursor Agent | cursor-agent | JSON event stream |
| Gemini CLI | gemini | JSON event stream |
| OpenCode | opencode | JSON event stream |
| Qwen Code | qwen | Plain output |
| Qoder CLI | qodercli | qoder-stream-json typed events |
| GitHub Copilot CLI | copilot | copilot-stream-json typed events |
| Aider | aider | Agent adapter |
| Trae CLI | trae | ACP adapter |
| Antigravity | varies by installation | Agent adapter |
| DeepSeek Reasonix | varies by installation | ACP adapter |
| Hermes | hermes | ACP JSON-RPC |
| Kimi CLI | kimi | ACP JSON-RPC |
| Pi | pi | Stdio JSON-RPC |
| Kiro CLI | kiro-cli | ACP JSON-RPC |
| Kilo | kilo | ACP JSON-RPC |
| Mistral Vibe CLI | vibe-acp | ACP JSON-RPC |
| DeepSeek TUI | deepseek | Plain output |
| CodeWhale | varies by installation | DeepSeek TUI fallback path |
| BYOK API fallback | n/a | SSE through provider proxy |
The BYOK fallback covers Anthropic, OpenAI-compatible providers, Azure OpenAI, Google Gemini, Ollama Cloud, and local loopback providers. Newer settings validate API keys in the field, validate provider drafts before saving, prefer models fetched from your account, and track configuration outcomes. The daemon accepts local providers such as Ollama and LM Studio, then blocks private, link-local, CGNAT, multicast, reserved, and redirected non-loopback targets to reduce SSRF risk.
Available Agent Skills and Plugins
Open Design still uses file-based SKILL.md workflows, but newer builds also promote many reusable workflows into first-class plugins. Use skills when you want a simple task folder. Use plugins when you want a visible registry entry, configurable inputs, trust metadata, marketplace packaging, or repeatable multi-stage behavior.
web-prototype: Creates single-page web prototypes, landing pages, hero pages, and marketing artifacts.saas-landing: Creates SaaS marketing pages with hero, feature, pricing, and CTA sections.dashboard: Creates admin, analytics, and operations dashboards.pricing-page: Creates standalone pricing pages and comparison tables.docs-page: Creates three-column documentation layouts.blog-post: Creates editorial long-form pages.mobile-app: Creates framed mobile app screens for iPhone or Pixel-style layouts.mobile-onboarding: Creates multi-screen mobile onboarding flows.gamified-app: Creates three-frame gamified mobile app prototypes.email-marketing: Creates product-launch HTML emails with table-safe structure.social-carousel: Creates 1080 x 1080 social media carousel cards.magazine-poster: Creates magazine-style poster pages.motion-frames: Creates motion-design hero frames with CSS animation.sprite-animation: Creates pixel-style animated explainer slides.dating-web: Creates consumer dating or matchmaking dashboard mockups.digital-eguide: Creates two-spread digital guide layouts.wireframe-sketch: Creates early hand-drawn-style wireframe sketches.critique: Creates a five-dimensional design critique scoresheet.tweaks: Creates an AI-generated tweak panel for adjustable design parameters.guizang-ppt: Creates magazine-style web PPT decks from the bundled guizang PPT skill.simple-deck: Creates minimal horizontal swipe decks.replit-deck: Creates product walkthrough decks with a Replit-style presentation flow.weekly-update: Creates team weekly update decks for progress, blockers, and next steps.pm-spec: Creates product management specification documents with TOC and decision logs.team-okrs: Creates OKR scoresheets.meeting-notes: Creates meeting decision logs.kanban-board: Creates board snapshots.eng-runbook: Creates incident and operations runbooks.finance-report: Creates executive finance summaries.invoice: Creates single-page invoices.hr-onboarding: Creates role onboarding plans.agent-browser: Gives agents a browser-oriented workflow for local preview tasks.release-notes-one-pager: Creates a concise release summary artifact.login-flow: Creates login-flow artifacts tied to the WeChat design system.ib-pitch-book: Creates investment-banking strategic-alternatives pitch books.github-dashboard: Creates GitHub dashboard artifacts.clinical-case-report: Creates clinical case report artifacts.social-media-matrix-tracker: Creates live artifact trackers for social media planning.trading-analysis: Creates live artifact dashboards for trading analysis.otd-operations-brief: Creates operations brief live artifacts.research-decision-room: Turns research prompts into structured multi-role review artifacts.- Reference design contract skill: Records expectations and constraints for reference-led design work.
- Hallmark community skill: Adds another community-maintained workflow to the skill catalog.
- Official GSAP plugin: Adds web animation workflows to the agent loop.
Available DESIGN.md Design Systems
Open Design includes DESIGN.md systems, structured tokens.css files, and component manifests across AI, developer tools, SaaS, fintech, docs, consumer, hardware, media, and automotive styles. The desktop app can rename design systems, pin custom systems, read real swatches from color tables, and connect design-system projects to GitHub.
- AI and LLM systems:
claude,cohere,mistral-ai,minimax,together-ai,replicate,runwayml,elevenlabs,ollama,x-ai,openai, andperplexity. - Developer tool systems:
cursor,vercel,linear-app,framer,expo,clickhouse,mongodb,supabase,hashicorp,posthog,sentry,warp,webflow,sanity,mintlify,lovable,composio,opencode-ai,voltagent, andgithub. - Productivity systems:
notion,figma,miro,airtable,superhuman,intercom,zapier,cal,clay, andraycast. - Fintech systems:
stripe,coinbase,binance,kraken,mastercard,revolut, andwise. - E-commerce systems:
shopify,airbnb,uber,nike,starbucks, andpinterest. - Media systems:
spotify,playstation,wired,theverge,meta, and other editorial or consumer product references. - Automotive systems:
tesla,bmw,ferrari,lamborghini,bugatti, andrenault. - Enterprise and communications systems:
slack,cisco,webex,wechat, andmission-control. - Interface and market systems:
hud,loom,trading-terminal,urdu-modern,default,kami, andwarm-editorial.
Pros
- Apache-2.0 source access.
- Built-in AMR option for a lower-friction first run.
- Single project workspace for chat, interactive terminals, references, comments, and preview review.
- Multiple BYOK provider choices.
- Local coding-agent support.
- Plugin runtime, marketplace surfaces, and plugin authoring tools.
- Detailed skill library.
- Large design-system catalog with token and component work.
- Sandboxed artifact previews.
- Preview comments, attachments, Studio mark tools, and tweaks.
- Queued comments, staged preview feedback, and project export manifests for handoff.
- Cloudflare Pages deployment.
- Responsive handoff exports.
- Local project storage.
Cons
- Advanced local, provider, MCP, and deployment workflows need setup work.
- Platform assets can vary by release and operating system.
- Plugin trust, provider credentials, and MCP permissions need review before you connect sensitive projects.
Related Resources
- Open Design GitHub Repository: Source code, README, releases, roadmap, and project documentation.
- Open Design Releases: Packaged builds, release notes, and platform-specific assets.
- QUICKSTART.md: Run, build, and deployment guide with troubleshooting steps.
- Claude Design: Anthropic’s hosted visual workspace for designs, prototypes, slides, one-pagers, and polished visual work.
- Claude Code Skills Documentation: The SKILL.md convention that Open Design’s skill system follows.
- 10 Best Agent Skills for Claude Code & AI Workflows
- 7 Best CLI AI Coding Agents
- 7 Best & Open-source Claude Cowork Alternatives
- The Ultimate Claude Code Resource List(Agents, Skills, Plugins, and more)
FAQs
Q: Does Open Design require an Anthropic subscription?
A: No. Open Design can use Open Design AMR, local coding-agent CLIs, and BYOK providers. BYOK options include Anthropic, OpenAI-compatible endpoints, Azure OpenAI, Google Gemini, Ollama Cloud, and local loopback providers.
Q: Is Open Design free?
A: Yes. Open Design is free open-source software under Apache-2.0. You still pay any model provider, API provider, cloud deployment target, or connected service you choose to use with it.
Q: Does Open Design need signup?
A: Local Open Design usage does not require an Open Design account for every workflow. Open Design AMR uses sign-in, and external model providers, hosted connectors, cloud deployments, or MCP services may require their own accounts.
Q: What is Open Design AMR?
A: Open Design AMR is the built-in AI path in newer Open Design builds. It appears as an ACP stdio agent, uses the bundled vela CLI, and lets you start from the desktop app without installing a separate coding-agent CLI first.
Q: What changed in Open Design 0.10.0?
A: Open Design 0.10.0 adds an expanded project workspace with a Lexical composer, interactive terminals beside chat, drag-and-drop comment attachments, a browser-style reference board, page capture, conversation forking, queued preview comments, staged preview feedback, better BYOK validation, run-scoped MCP tool bundles, and project export manifests.
Q: Can Open Design collect references inside a project?
A: Yes. Newer builds include a browser-style reference board with page capture, so you can gather external design references and keep them near the session instead of moving reference material through separate files or tabs.
Q: What is a skill in Open Design?
A: A skill is a folder under skills/ that contains a SKILL.md file and optional assets. The skill defines the output format, device target, design system, reference files, and generation rules for an artifact.
Q: What is a plugin in Open Design?
A: A plugin is a reusable extension package for Open Design workflows. Plugins can appear in the drawer or marketplace, expose inputs, carry trust metadata, declare surfaces, and package reusable workflow behavior beyond a simple skill folder.
Q: What are DESIGN.md systems in Open Design?
A: DESIGN.md systems are Markdown files that describe colors, typography, spacing, layout, components, motion, voice, brand identity, and anti-patterns for a visual system. Newer builds also use structured tokens and component manifests for design-system work.
Q: Can I add my own design system?
A: Yes. You can add a custom DESIGN.md file to the design systems directory. The desktop app also supports design-system management, including rename and pin actions for your own systems.
Q: Does Open Design keep project data local?
A: Open Design stores runtime state in local project files and SQLite data under .od/. External model calls, AMR sessions, cloud deployments, plugins, MCP connectors, contained preview URLs, and export targets still depend on the provider or service you choose.
Q: Can Open Design replace Claude Design?
A: Open Design can replace Claude Design for technical users who want source access, local projects, custom agents, BYOK providers, self-hosting, plugin control, reference capture, interactive terminals, queued comments, and project files near their development environment. Claude Design remains easier if you want a hosted Claude-native product with managed access.
Changelog
- 0.10.0: Added an expanded project workspace with a Lexical composer, interactive terminals, reference board, page capture, conversation forking, queued preview comments, staged preview feedback, BYOK validation, project export manifests, contained preview URLs,
od templates, and expanded deployment docs. - 0.9.0: Added Open Design AMR, expanded the agent bench, improved model picking, upgraded plugin discovery, refined comments and Studio tools, and added easier Windows and Linux setup paths.
- 0.8.0: Rebuilt the core around plugins, added packaged auto-update, expanded design-system token work, added CJK font fallback, improved manual editing, and broadened media and provider workflows.
- 0.7.0: Added auto-memory, preview comments, a unified Media tab, responsive design handoff outputs, scheduled routines, and in-app skill and design-system management.










