Open Design: A Free Open-Source Claude Design Alternative

Use Open Design to create prototypes, decks, dashboards, mobile screens, and documents with agents and plugins. A great alternative to Claude Design.

Open Design is a free, open-source Claude Design alternative for creating prototypes, decks, dashboards, mobile screens, documents, media assets, and marketing pages with agent-driven workflows.

It can run through Open Design Cloud, a local coding-agent CLI, or a compatible BYOK provider. The desktop app connects the model or agent to skills, Markdown design systems, project files, reference material, and a sandboxed preview.

Each project keeps the brief, reference material, design system, chat history, and rendered artifact together. The active agent works from the selected skill and DESIGN.md, while the sandboxed preview shows the result before export or handoff.

Features

  • Built-in AMR agent with the bundled vela CLI.
  • Detects Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen, Copilot, Kimi, Pi, Kiro, Aider, Trae, and other CLI agents on PATH.
  • Supports Anthropic, OpenAI-compatible, Azure OpenAI, Gemini, Ollama Cloud, and local BYOK providers.
  • Uses plugins for design systems, prototypes, exports, Figma-related work, and reusable skill bundles.
  • Includes a plugin registry with trust badges, previews, install flows, and marketplace metadata.
  • Keeps chat, @mentions, slash commands, code streaming, and an interactive terminal in one project view.
  • Captures web references and page screenshots inside the project.
  • Stores agent memory across runs and projects.
  • Schedules repeatable design, review, and artifact routines.
  • Agent skills and plugins for prototypes, decks, documents, dashboards, media, research, browser work, and handoff.
  • Reads DESIGN.md, tokens.css, and component manifests.
  • Manages skills and design systems from the desktop app.
  • Uses a Questions tab to collect brief details before generation.
  • Previews artifacts in a sandboxed iframe with staged feedback.
  • Accepts queued preview comments, image attachments, notes, and deck markers.
  • Combines drawing and screenshot markup in Studio.
  • Keeps image, video, and audio assets in one Media tab.
  • Exports HTML, PDF, PPTX, ZIP, Markdown, media assets, Cloudflare Pages deployments, and handoff files.
  • Creates contained preview URLs and run-scoped MCP bundles for editor or coding-agent handoff.
  • Runs an MCP server and connects external MCP servers through daemon-managed OAuth.
  • Lets MCP clients work with project files, generation loops, and Codex bootstrap actions.
  • Stores local runtime state, artifacts, templates, tabs, and conversations in .od/.

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 and Open Design tackle the same first problem: take a brief, some context, and a design direction, then produce something concrete enough to review. Claude Design does it inside Anthropic’s hosted workspace. You can shape prototypes, slides, one-pagers, landing pages, and product mockups through chat, comments, direct edits, and exports.

Open Design takes the same artifact-first idea and puts the machinery on your side of the fence. Its web app, desktop shell, local daemon, coding-agent adapters, plugins, skills, design systems, device frames, comments, and sandboxed preview all work around files you can inspect and keep. That is a far better deal when the artifact must become part of a live product.

I would pick Open Design for source access, self-hosting, local project files, plugin control, BYOK models, and a design system that sits beside the code. The price is setup work and more decisions about providers, permissions, and deployment. Claude Design wins when your team already pays for Claude and wants the managed route. For a developer-led workflow, I would take the extra control every time.

FeatureOpen DesignClaude Design
Access modelFree open-source softwareClaude subscription feature
Source accessOpen codebase under Apache-2.0Closed product environment
Main workflowLocal daemon plus web or desktop app with chat, terminal, reference, and preview surfacesHosted Claude design workspace
First-run AI optionOpen Design AMR inside the desktop flowClaude inside Anthropic’s product
Local agentsClaude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Aider, Trae CLI, Antigravity, DeepSeek Reasonix, and moreNot a local agent picker
BYOK providersAnthropic, OpenAI-compatible endpoints, Azure OpenAI, Google Gemini, Ollama Cloud, and local loopback providersNot the main workflow
Self-hostingSupportedNot supported
MCPBuilt-in MCP server, run-scoped MCP tool bundles, and external MCP client supportClaude workspace and connector workflow
ExtensibilityPlugins, skills, design systems, templates, and MCP clientsClaude-native product features and connectors
Design systemsDESIGN.md files, tokens.css, component manifests, and in-app managementTeam design system setup inside Claude
Preview collaborationSandboxed preview with queued comments, attachments, pinned deck markers, and staged feedbackClaude canvas collaboration
ExportsHTML, PDF, PPTX, ZIP, Markdown, media workflows, Cloudflare Pages, project export manifests, and handoff filesCanva, PDF, PPTX, standalone HTML, and internal sharing
Best fitDevelopers, open-source users, technical designers, and local-first teamsTeams already using Claude plans

How to Use Open Design

Download the desktop app

Use the GitHub releases page for packaged builds. Open Design currently publishes macOS Apple Silicon and Intel builds plus Windows x64 builds.

Start with the desktop app and Open Design AMR for the shortest setup path. Sign in, select a model, and create the first artifact. Connect a local agent CLI or API provider after that.

Run from the repository

Use this setup for local web development and then open the URL printed by tools-dev.

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version
pnpm install
pnpm tools-dev run web

Run the desktop shell from the repository

Use this command to start the daemon, web app, and desktop shell in the background.

pnpm tools-dev

Run with Docker

Use Docker Compose from the deploy folder.

cd deploy
docker compose up -d

Open the app at this local URL.

http://localhost:7456

Run Docker Compose on a server your team controls to keep the workspace private and its storage persistent. Open Design provides deployment paths for AWS CloudFormation, Azure Container Instances, and Alibaba Cloud. Those paths connect to infrastructure your team already operates on those platforms.

Starting a Design Session

  1. Open the web or desktop interface.
  2. Choose Open Design AMR, an installed local agent CLI, or a BYOK provider.
  3. If you use AMR, sign in from the desktop flow and choose an available model.
  4. If you use a local agent CLI, confirm that the binary is available on your PATH.
  5. 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.
  6. Choose a design system such as Linear, Vercel, Stripe, Apple, Cursor, Figma, Claude, BMW M, Slack, Cisco, Webex, Mission Control, WeChat, or Neutral Modern.
  7. Type a design brief in the chat, use mentions when relevant, and add reference material from the project workspace.
  8. Answer the Questions tab prompts for audience, surface, scale, tone, brand context, constraints, and plugin inputs when they appear.
  9. Review the live artifact in the sandboxed preview and watch staged preview feedback while generation runs.
  10. Use Inspect, manual edit mode, queued preview comments, comment attachments, tweaks, Studio mark tools, or another chat instruction to revise the output.
  11. 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.

od templates stores user-saved templates for recurring artifacts with a fixed layout, reference set, or project structure.

The desktop app installs, uninstalls, renames, and pins supported skills and design systems from Settings. Open Design packages reusable workflows as plugins. The plugin drawer and marketplace show their inputs, trust metadata, and publishing details.

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. Local agent CLIs keep an existing terminal agent on the project files. The interactive terminal sits beside chat, keeping command output, local files, and terminal context visible during the session.

AgentBinaryTransport or parser
Open Design AMRvelaACP stdio agent bundled with the installer
Claude Codeclaudeclaude-stream-json typed events
Codex CLIcodexJSON event stream
Devin for TerminaldevinACP JSON-RPC
Cursor Agentcursor-agentJSON event stream
Gemini CLIgeminiJSON event stream
OpenCodeopencodeJSON event stream
Qwen CodeqwenPlain output
Qoder CLIqodercliqoder-stream-json typed events
GitHub Copilot CLIcopilotcopilot-stream-json typed events
AideraiderAgent adapter
Trae CLItraeACP adapter
Antigravityvaries by installationAgent adapter
DeepSeek Reasonixvaries by installationACP adapter
HermeshermesACP JSON-RPC
Kimi CLIkimiACP JSON-RPC
PipiStdio JSON-RPC
Kiro CLIkiro-cliACP JSON-RPC
KilokiloACP JSON-RPC
Mistral Vibe CLIvibe-acpACP JSON-RPC
DeepSeek TUIdeepseekPlain output
CodeWhalevaries by installationDeepSeek TUI fallback path
BYOK API fallbackn/aSSE through provider proxy

The BYOK fallback supports Anthropic, OpenAI-compatible providers, Azure OpenAI, Google Gemini, Ollama Cloud, and local loopback providers. The settings validate API keys and provider drafts before saving, fetch models from the connected account, and record configuration outcomes. The daemon accepts 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 uses file-based SKILL.md workflows and promotes many reusable workflows into first-class plugins. Use skills for a simple task folder. Use plugins for 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: Creates structured multi-role review artifacts from research prompts.
  • 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, and perplexity.
  • Developer tool systems: cursor, vercel, linear-app, framer, expo, clickhouse, mongodb, supabase, hashicorp, posthog, sentry, warp, webflow, sanity, mintlify, lovable, composio, opencode-ai, voltagent, and github.
  • Productivity systems: notion, figma, miro, airtable, superhuman, intercom, zapier, cal, clay, and raycast.
  • Fintech systems: stripe, coinbase, binance, kraken, mastercard, revolut, and wise.
  • E-commerce systems: shopify, airbnb, uber, nike, starbucks, and pinterest.
  • Media systems: spotify, playstation, wired, theverge, meta, and other editorial or consumer product references.
  • Automotive systems: tesla, bmw, ferrari, lamborghini, bugatti, and renault.
  • Enterprise and communications systems: slack, cisco, webex, wechat, and mission-control.
  • Interface and market systems: hud, loom, trading-terminal, urdu-modern, default, kami, and warm-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.

Alternatives and Related Resources

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. Model providers, cloud deployment targets, and connected services can charge separately.

Q: Does Open Design need signup?
A: Local Open Design use does not require an Open Design account. Open Design AMR requires desktop sign-in. External model providers, hosted connectors, cloud deployments, and MCP services use their own accounts.

Q: What is Open Design AMR?
A: Open Design AMR is the built-in AI path. It runs as an ACP stdio agent through the bundled vela CLI and starts from the desktop app without a separate coding-agent CLI.

Q: What changed in Open Design 0.16.1?
A: Open Design 0.16.1 is a focused preview-canvas patch. Run status no longer overlays generated work in the preview. Building, completion, and delivery-recovery status stay in Chat, where you can follow progress or retry a failed delivery.

Q: Can Open Design collect references inside a project?
A: Yes. The reference board includes page capture, which keeps external design references near the active session.

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 define colors, typography, spacing, layout, components, motion, voice, brand identity, and anti-patterns for a visual system. Open Design also reads 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 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 has the easier route for teams that want a hosted Claude-native product with managed access.

Changelog

  • 0.16.1: Fixed the preview canvas so run status stays in Chat and does not overlay generated work. Chat keeps building, completion, and delivery-recovery status.
  • 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get the latest & top AI tools sent directly to your email.

Subscribe now to explore the latest & top AI tools and resources, all in one convenient newsletter. No spam, we promise!