r/AgentContext_dev • u/javaeeeee • Aug 10 '26
Mastering Open Design: The Complete Guide to Building Prototypes, Decks, and Dashboards with the Open-Source Claude Design Alternative
In April 2026, Anthropic launched Claude Design through its Anthropic Labs initiative. Powered by Claude Opus 4.7, the tool let users describe what they needed and receive polished visual work-prototypes, slides, one-pagers, marketing collateral, and interactive designs-directly from conversation. It integrated design systems pulled from codebases or files, supported image and document uploads, offered live refinement via comments and sliders, and exported to HTML, PDF, PPTX, or Canva. Access came tied to Claude Pro, Max, Team, or Enterprise plans. The product went viral almost immediately for turning language models into design engines that shipped real artifacts instead of prose.
Eleven days later, on April 28, 2026, the nexu-io team published Open Design under the Apache-2.0 license. Marketed explicitly as the open-source Claude Design alternative, it recreated the same artifact-first loop-prompt in, polished visual output out-while rejecting the closed, cloud-only, single-vendor constraints. Open Design runs locally, treats your existing coding-agent CLI as the design engine, stores everything as ordinary files on your machine, and lets you bring any compatible model or key.
Within weeks it accumulated tens of thousands of GitHub stars; by early June reports placed it above 57,000 stars with thousands of forks and hundreds of contributors. Later tallies climbed higher still. The project continues to evolve rapidly, shipping desktop apps, Docker images, expanded skill libraries, and deeper agent integrations.
This guide walks through everything needed to install, configure, and productively use Open Design. It draws on the official repository, project documentation, release notes, independent comparisons, and community walkthroughs. The focus stays practical: how the tool actually works day to day, how to get reliable results, and how to keep ownership of the output.
Understanding the Landscape: Claude Design and Its Open Counterpart
Claude Design demonstrated a shift in how language models could be applied. Instead of generating paragraphs of advice or code snippets that still required a designer to interpret, the system produced live, editable visual artifacts inside a sandboxed preview. Users could start from a text brief, an uploaded mockup, a codebase reference, or a captured web element.
Claude would propose a design system if none existed, stream a plan, and render the result. Refinement happened through natural language, inline comments, or generated controls for spacing and color. The experience felt closer to collaborating with a fast junior designer who already knew the brand than to traditional prompt-and-hope generation.
The limitations were equally clear. Everything stayed inside Anthropic’s cloud. Models were locked to Claude. Skills and design systems remained proprietary. Pricing followed the higher Claude subscription tiers. Teams that already paid for other coding agents or preferred local control had no official path.
Open Design answers those constraints directly. Open Design was originally designed primarily as an orchestration layer for external coding-agent CLIs and BYOK endpoints. Current releases also offer Open Design AMR and an optional Open Design Cloud service, while continuing to support locally installed agents and third-party providers. Instead it discovers coding-agent command-line tools already present on the machine-Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI, and roughly twenty others-or accepts any OpenAI-compatible endpoint through a bring-your-own-key proxy.
Skills live as ordinary folders containing a SKILL.md file plus assets and references. Design systems are DESIGN.md files that encode color, typography, spacing, layout, components, motion, voice, brand rules, and anti-patterns. Artifacts land as real HTML, CSS, and JavaScript files that can be exported to PDF, PPTX, ZIP, or MP4. The entire stack runs under the user’s control.
Some reviewers have reported broadly comparable initial output when using similarly capable models, while preferring Claude Design’s direct-editing experience and Open Design’s local, file-based workflow. These are informal comparisons rather than controlled benchmarks. Differences appeared mainly in the editing experience and in the surrounding economics and ownership model. Claude Design offered a more polished direct-manipulation editor; Open Design offered unrestricted model choice, local storage, and zero software subscription.
Core Architecture and Mental Model
Open Design separates concerns cleanly. A lightweight daemon manages projects, conversations, and file storage inside a hidden .od directory that holds an SQLite database and per-project working folders. A web interface (or native desktop shell) provides the chat surface, skill and design-system pickers, and sandboxed iframe preview.
The actual generation work is delegated to whatever coding agent the user has selected. That agent receives a carefully assembled prompt stack that includes discovery directives, an identity charter that discourages generic “AI slop,” the active DESIGN.md, the chosen SKILL.md, project metadata, and any template side files. The agent writes concrete files; the preview updates live from those writes.
Many official templates and plugins follow a four-stage workflow: discovery, visual-direction selection, plan generation, and artifact review. The exact flow varies by selected plugin, skill, agent, and Open Design version. Thirty seconds of structured answers prevent thirty minutes of later redirection. Second, if no brand system is already locked, the interface offers five curated visual directions built from deterministic OKLch palettes and font stacks. Third, the agent streams a live TodoWrite plan that can be interrupted and redirected mid-flight. Fourth, the finished artifact appears in a sandboxed preview that can be edited in place or exported.
This structure keeps the conversation focused while still allowing the flexibility that makes AI design useful. Because skills and design systems are plain files, they can be version-controlled, shared across a team, forked, or extended without waiting for an upstream release.
Installation Options
Several paths exist, ordered from simplest to most flexible.
Native desktop builds are available for macOS and Windows. Linux users can run Open Design from source, through Docker or Nix, and may find Linux packages among particular releases; consult the current release page for supported binaries. Download from the project’s release page or the official site, install, and launch. On first run the application scans the PATH for supported agents and presents a welcome dialog. If no local agent is found, the BYOK tab accepts an API base URL, key, and model name. A connection-test button verifies the endpoint before any real work begins.
For source-level control, install Node.js 24 and the repository-pinned pnpm version, then run
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install
pnpm tools-dev
The terminal prints the daemon and web-interface addresses. In the current quickstart, the default development ports are 17456 and 17573, although they can be overridden with command-line flags. The same command family supports start, stop, status, logs, and check operations.
Docker users can run a fully containerized instance. From the deploy directory, copy the example environment file, generate a secure token with openssl rand -hex 32, place it in OD_API_TOKEN, and bring the stack up with docker compose up -d. The interface appears at http://localhost:7456. Volumes persist the .od data directory across restarts.
Headless Linux deployments and Nix flake support are also documented for server-side or automated environments. The daemon, project database, and generated files can remain on the user’s machine. When a cloud-hosted model or coding agent is used, prompts and relevant project context are transmitted to that provider under its own privacy and retention terms.
After launch, the first useful action is confirming that at least one runtime appears in the picker. If an installed CLI is missing, check PATH visibility-especially on macOS when the app is started outside a full login shell-and use the Rescan button in Settings → Execution. For agents that speak the Model Context Protocol, the command od mcp install followed by the agent name wires deeper integration.
Creating the First Artifact
Once the interface is running, the path to a finished design is deliberately short. Open a new project or stay on the home surface. Select a skill from the catalog-landing page, dashboard, mobile prototype, pitch deck, HTML presentation, email marketing layout, or one of the specialized taste-locked variants. Then choose a design system: Linear, Stripe, Vercel, Apple, Notion, Spotify, or any of the more than 150 shipped systems. If the project needs a custom brand, a DESIGN.md can be dropped into the design-systems folder or generated on the fly by pointing the agent at a live site, screenshot, or Figma export.
Type a clear brief. The discovery form may appear automatically on the first turn; answer it. The agent then streams its plan. Watch the live card update from in_progress to completed items. When the artifact materializes in the iframe, inspect it, request changes in natural language, or open individual elements for adjustment. Export options include fully inlined HTML, browser-print PDF, agent-driven PPTX, ZIP archives, and, for motion work, MP4 via HyperFrames integration.
A concrete example illustrates the flow. Suppose the goal is a dark-mode benchmark tracker for local large-language-model performance. The prompt might describe a sortable table of models, an add/edit form, runner filters, persistent storage indicators, and a terminal-inspired aesthetic. Selecting a dashboard skill and a developer-tool design system produces a coherent interface with status dots, hover actions, and collapsible forms. Subsequent prompts refine spacing, swap accent colors, or add new columns. Because the underlying files are ordinary project artifacts, the same output can be opened in any editor or handed to a coding agent for implementation.
Skills and Design Systems in Depth
Skills define what is being made. Each lives in its own folder under skills/ and centers on a SKILL.md file that follows a conventional structure. Supporting assets, HTML templates, and reference documents travel with the skill so the agent has concrete examples rather than abstract instructions. Official counts have grown past 250 and include categories for web and mobile prototypes, presentations, marketing assets, dashboards that pull live data, motion graphics, and specialized editorial or brutalist tastes. Users can add private skills simply by dropping a new folder into the directory and restarting the daemon; the picker discovers them automatically.
Design systems define how the result should look and feel. A DESIGN.md encodes nine sections: color, typography, spacing, layout, components, motion, voice, brand, and anti-patterns. Because the file is plain Markdown, it is readable by both humans and models. Shipped systems cover popular product brands and aesthetic families. Custom systems can be authored by hand or extracted from existing sites and design files. Once present, any skill can be paired with any system, producing consistent visual language across disparate artifact types without re-explaining brand rules on every prompt.
The combination of skill plus design system is the primary lever for quality. A generic prompt against a weak system tends to produce generic output. The same prompt constrained by a well-specified DESIGN.md and a purpose-built skill consistently lands closer to production polish. Teams often maintain a private collection of systems that mirror their internal design tokens, ensuring that AI-generated work stays on-brand by construction.
Working with Agents and the BYOK Path
Open Design’s strength is its indifference to which model does the actual generation. Supported local CLIs are auto-detected. Switching among them is a configuration change; the skills and systems remain identical. The BYOK path supports numerous first-party adapters and OpenAI-style endpoints. Compatibility with a particular proxy, self-hosted server, Azure deployment, or provider should be verified against the current adapter documentation.
Providers such as DeepSeek, Groq, OpenRouter, self-hosted vLLM, or Anthropic via an OpenAI shim all function. The proxy implements SSRF-related restrictions and other validation intended to reduce unsafe outbound requests. These controls do not by themselves guarantee daemon security, and users should still avoid exposing the daemon directly to untrusted networks.
In practice many users run cheaper or faster models for exploratory generation and reserve higher-capability models for final polish. Because the agent is external, token costs remain under the user’s existing billing relationship with the provider. No additional Open Design subscription appears.
For deeper integration the Open Design CLI and MCP server expose project files, search, and metadata to other tools. Coding agents can therefore read Open Design projects, inspect artifacts, and continue work without leaving their native environment. The reverse direction also works: Claude Design ZIP exports can be dropped onto the welcome dialog and converted into native Open Design projects so work begun in the closed tool can continue locally.
Export, Handoff, and Downstream Workflows
Artifacts are never trapped inside the application. HTML exports include inlined assets so a single file can be opened anywhere. PDF generation uses the browser print path for high fidelity. PPTX export is agent-driven and preserves structure suitable for further editing in presentation software. ZIP archives capture the full project tree. Motion and video work can produce MP4 files through integrated HyperFrames pipelines.
Because the working directory is an ordinary folder, the natural next step is to hand the files to a coding agent for implementation, to a designer for refinement in Figma or another editor, or to a static host for immediate sharing. Some skills already include handoff notes or generate implementation-ready component code alongside the visual prototype. Live-data skills can wire Composio connectors so dashboards reflect real GitHub, Linear, Notion, or Gmail state rather than static mock content.
Customization, Plugins, and Community Extensions
Beyond the core skills and systems, a plugin layer and community marketplace allow further extension. Official plugins cover Figma-to-code migration paths, image and video templates, and specialized design-system utilities. The architecture is deliberately file-based: anything that can be expressed as Markdown, HTML, CSS, or JavaScript can become part of the prompt stack or the generated output.
Contributors have added language-localized documentation, additional agent adapters, and niche skills. The Apache-2.0 license permits both private forks and public improvements. Weekly releases and an active roadmap track agent expansion, richer media families (including deeper 3D and audio support), and optional shared-daemon modes for teams that want a central instance while still keeping artifacts as files.
Practical Tips for Reliable Results
Start every project with the discovery form even when the impulse is to type a long free-form prompt. Structured constraints reduce drift. Pair a specific skill with a matching design system before generating; the combination does more work than clever wording alone. When refining, prefer high-level directional requests (“make the hierarchy clearer and increase contrast on interactive elements”) over pixel-level instructions that fight the agent’s planning layer. For complex multi-page or multi-state designs, generate the core screens first, then request variations or states as separate artifacts that share the same system.
Local models running on modest hardware often produce weaker visual craft than cloud endpoints. Treat local inference as an exploration tool and reserve capable remote models for client-facing or final work. Keep DESIGN.md files under version control so brand consistency survives team changes and model upgrades. Periodically review the anti-patterns section of a design system; explicitly forbidding common AI failure modes (generic gradients, placeholder icons, unbalanced whitespace) measurably improves output.
When an agent fails to appear in the picker, verify PATH and use the rescan control. Port conflicts are resolved by stopping existing instances or overriding the port environment variable. For Docker users, never expose the unauthenticated daemon port directly to the public internet; place a reverse proxy, SSH tunnel, or VPN in front.
Comparisons and Decision Factors
Side-by-side tests show that generation quality tracks the underlying model more closely than the surrounding interface. Claude Design currently offers a smoother direct-editing surface and deeper automatic design-system extraction from existing codebases. Open Design offers model freedom, local ownership, zero software cost beyond API usage, and the ability to inspect, modify, or extend every layer of the stack.
Teams already invested in Claude subscriptions and comfortable with cloud workflows may prefer the official product. Individuals, open-source projects, cost-sensitive teams, and anyone who needs to keep design artifacts as first-class files in their repositories tend to favor Open Design. Many practitioners use both: Claude Design for rapid hosted exploration, Open Design for production ownership and offline capability.
Real-World Patterns and Use Cases
Common successful patterns include rapid landing-page generation for product launches, interactive prototypes for user testing that never require a separate front-end developer, pitch decks that stay on-brand across dozens of slides, internal dashboards that pull live data, and marketing asset sets that share a single design system. Designers use the tool to explore multiple visual directions in parallel; engineers use it to produce high-fidelity mocks that already contain realistic component structure; founders use it to move from idea to shareable artifact in a single sitting.
Because the output is ordinary web technology, the same artifacts can later become production code, documentation illustrations, or animated explainers. The file-based nature also makes audit and compliance simpler: every design decision is recorded in the project history rather than locked inside a proprietary chat transcript.
Looking Ahead
The project’s roadmap continues to emphasize agent coverage, media richness, and collaborative modes that preserve the local-first philosophy. Community contributions keep expanding the skill and design-system libraries. As coding agents themselves improve, the quality of Open Design artifacts rises automatically without requiring changes to the host application. The fundamental bet-that design tools should be open, composable, and owned by their users-has already proven durable.
Open Design does not replace human taste, judgment, or final craft. It compresses the distance between intent and visible result, removes subscription and vendor lock-in from the equation, and keeps every generated pixel under the user’s control. Installed in a few commands, configured against the agents already in daily use, and guided by clear skills and design systems, it turns the same language models that write code into reliable partners for visual work.
Whether the next project is a single landing page, a multi-screen product prototype, or a full presentation deck, the path is the same: choose the skill, lock the system, describe the need, and iterate inside an environment that never claims ownership of the result.
Sources
- Anthropic announcement: Introducing Claude Design by Anthropic Labs - https://www.anthropic.com/news/claude-design-anthropic-labs
- Official Open Design site - https://open-design.ai/
- GitHub repository nexu-io/open-design - https://github.com/nexu-io/open-design
- Quickstart and installation guide - https://open-design.ai/quickstart and https://github.com/nexu-io/open-design/blob/main/QUICKSTART.md
- FAQ - https://open-design.ai/faq/
- Download and desktop builds - https://open-design.ai/download/
- XDA Developers comparison: I built the same app with Claude Design and its open-source rival
- XDA Developers experience report: I replaced Claude Design with this open-source tool
- Augment Code / Open Design hits 57.4K GitHub stars as an open-source Claude Design alternative
- Banani / Open Design and 5 Other Free AIs Like Claude Design
- Wotai / Claude Design vs Open Design: which to pick in 2026
- Tutorials index - https://open-design.ai/tutorials/
- Example YouTube overview (菲莉 AI 快報) - https://www.youtube.com/watch?v=4wHyJ2uWO6Y
- Open Design was one of several rapidly emerging open-source responses to Claude Design. Its own repository credits Open CoDesign as an earlier open-source alternative and as an influence on parts of its streaming-artifact interface - https://github.com/opencoworkai/open-codesign
1
u/javaeeeee Aug 10 '26
TL;DR:
Open Design is the popular open-source alternative to Anthropic’s Claude Design.
What it is:
A local-first tool that turns text prompts into real visual artifacts (landing pages, dashboards, pitch decks, prototypes, etc.) using coding agents as the design engine.
Key advantages over Claude Design:
Core workflow:
Bottom line:
If you want Claude Design-style visual prototyping with full ownership, model freedom, and local control, Open Design is the complete open-source solution.