{"id":8332,"date":"2026-05-05T08:08:00","date_gmt":"2026-05-05T00:08:00","guid":{"rendered":"https:\/\/meta-quantum.today\/?p=8332"},"modified":"2026-05-04T17:17:47","modified_gmt":"2026-05-04T09:17:47","slug":"open-design-the-open-source-claude-design-alternative","status":"publish","type":"post","link":"https:\/\/meta-quantum.today\/?p=8332","title":{"rendered":"Open Design: The Open Source Claude Design Alternative"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

Open Design<\/strong>, a brand-new open-source alternative to Anthropic’s Claude Design that just hit GitHub. This is the second<\/em> Claude Design clone the host has covered in a week \u2014 the first being Huashu Design<\/strong>, a terminal-only tool. What makes Open Design notable is that it ships with a full graphical interface, making it visually almost indistinguishable from Claude Design itself, while sidestepping the painful usage limits that have frustrated Claude Design users. The host frames the wave of clones as a healthy pressure on Anthropic to fix the usage caps that hold back the original product. Watch video about Open Design<\/a>.<\/p>\n\n\n\n

Open Design \u2014 Complete Guide<\/h2>\n\n\n\n

What Open Design Is<\/h3>\n\n\n\n

Open Design (OD) is a local-first, open-source alternative to Anthropic’s Claude Design, released in late April 2026 by the nexu-io<\/code> team. It is licensed under Apache-2.0. Rather than bundling its own AI model, OD turns whichever coding-agent CLI<\/strong> you already have on your PATH<\/code> (Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen) into the design engine, driven by 19 composable skills and 71 brand-grade design systems.<\/p>\n\n\n\n

The core concept: a local Node daemon spawns your chosen CLI inside a per-project working directory, gives it real Read<\/code>\/Write<\/code>\/Bash<\/code>\/WebFetch<\/code> tools against an actual filesystem, and pipes the output into a sandboxed iframe preview in a Vite + React web UI. Because it routes through your Claude Max or Codex subscription via the CLI, you escape Claude Design’s painful usage caps.<\/p>\n\n\n\n

Prerequisites<\/h3>\n\n\n\n

Before installing, make sure your machine has:<\/p>\n\n\n\n

    \n
  • Node.js<\/strong> approximately v18+ (the README quickstart works with Node 18+, though some forks recommend Node 22+)<\/li>\n\n\n\n
  • pnpm 10.33.x<\/strong> (install via corepack enable<\/code>)<\/li>\n\n\n\n
  • Git<\/strong><\/li>\n\n\n\n
  • At least one supported coding-agent CLI<\/strong> on your PATH<\/code>. The daemon auto-detects whichever it finds. The supported list is: claude<\/code>, codex<\/code>, cursor-agent<\/code>, gemini<\/code>, opencode<\/code>, qwen<\/code>. If none are installed, you can fall back to a direct Anthropic API key (BYOK).<\/li>\n<\/ul>\n\n\n\n

    Verify before continuing:<\/p>\n\n\n\n

    node --version\ncorepack enable && pnpm --version\nwhich claude || which codex || which cursor-agent\n<\/code><\/pre>\n\n\n\n
    Installation<\/h3>\n\n\n\n
    There are two paths, mirroring what the YouTube reviewer demonstrated.<\/p>\n\n\n\n
    Method 1 \u2014 Manual clone (recommended for first install)<\/h4>\n\n\n\n
    git clone <https:\/\/github.com\/nexu-io\/open-design.git>\ncd open-design\ncorepack enable\npnpm install\npnpm dev:all\n<\/code><\/pre>\n\n\n\n
    pnpm dev:all<\/code> boots two processes simultaneously:<\/p>\n\n\n\n
      \n
    • The daemon<\/strong> on http:\/\/localhost:7456<\/code> (Express + SQLite, the only privileged process)<\/li>\n\n\n\n
    • The Vite frontend<\/strong> on http:\/\/localhost:5173<\/code><\/li>\n<\/ul>\n\n\n\n
      Open http:\/\/localhost:5173<\/code> in your browser. If the default ports are busy, the daemon auto-picks a free one (PR #9).<\/p>\n\n\n\n
      Method 2 \u2014 Hand it to your coding agent<\/h4>\n\n\n\n
      This is the lazy option the reviewer mentioned. Open Claude Code or Codex in an empty directory and prompt:<\/p>\n\n\n\n
      \n
      Clone https:\/\/github.com\/nexu-io\/open-design.git<\/code> into a new folder, install dependencies with pnpm, and start the dev server with pnpm dev:all<\/code>.<\/p>\n<\/blockquote>\n\n\n\n
      The agent will execute the clone, install, and boot \u2014 useful when you don’t want to read the README first.<\/p>\n\n\n\n
      What gets created on first run<\/h4>\n\n\n\n
      The daemon creates a hidden .od\/<\/code> folder at the repo root. It is gitignored and machine-local:<\/p>\n\n\n\n
      .od\/\n\u251c\u2500\u2500 app.sqlite          \u2190 projects, conversations, messages, open tabs\n\u251c\u2500\u2500 artifacts\/          \u2190 one-off \"Save to disk\" renders (timestamped)\n\u2514\u2500\u2500 projects\/<id>\/      \u2190 per-project working dir, also the agent's cwd\n<\/code><\/pre>\n\n\n\n
      To wipe everything and start clean: stop the daemon, rm -rf .od<\/code>, and re-run pnpm dev:all<\/code>.<\/p>\n\n\n\n
      First-Run Setup<\/h3>\n\n\n\n
      When you first hit http:\/\/localhost:5173<\/code>, a welcome dialog appears asking how you want to drive the model.<\/p>\n\n\n\n
      Step 1 \u2014 Pick the agent runtime.<\/strong> You have three choices:<\/p>\n\n\n\n
        \n
      • Local CLI<\/strong> (recommended) \u2014 pulls from Claude Code or Codex on your machine, billed against your existing Max\/Pro\/Codex subscription. No per-token API fees.<\/strong> This is the path that bypasses Claude Design’s usage caps.<\/li>\n\n\n\n
      • Anthropic API \u00b7 BYOK<\/strong> \u2014 paste an sk-ant-...<\/code> key directly. Used as a fallback when no CLI is on PATH<\/code>. You pay API fees per generation.<\/li>\n\n\n\n
      • OpenAI-compatible relay<\/strong> \u2014 for users on OpenRouter, DeepSeek, or local Ollama via a compatible endpoint.<\/li>\n<\/ul>\n\n\n\n
        Step 2 \u2014 Pick the model.<\/strong> For Local CLI<\/code>, leaving it on default<\/strong> uses whatever your CLI is configured for (e.g., Sonnet 4.6 \/ Opus 4.7 in Claude Code). You can override per-project later.<\/p>\n\n\n\n
        Step 3 \u2014 Optional: add media providers.<\/strong> Unlike Claude Design, OD can generate images and video directly from the UI \u2014 but only if you wire in API keys. Settings \u2192 Media Providers accepts keys for MiniMax, OpenAI (DALL\u00b7E \/ Sora), ElevenLabs, and similar. Skip this for now if you only need prototypes and slides.<\/p>\n\n\n\n
        That’s it. The agent picker on the main screen should now show whichever CLI was auto-detected.<\/p>\n\n\n\n
        Configuration<\/h3>\n\n\n\n
        Agent selection<\/h4>\n\n\n\n
        The bottom-of-screen agent picker lets you swap on the fly. The daemon scans your PATH<\/code> at boot \u2014 if you install Codex later, restart the daemon (pnpm dev:all<\/code>) to pick it up. Adding a new CLI is a one-line addition to daemon\/agents.js<\/code> if you want to wire something custom.<\/p>\n\n\n\n
        Design Systems (71 built-in)<\/h4>\n\n\n\n
        Top-nav \u2192 Design Systems<\/strong>. Each is a single DESIGN.md<\/code> file living under design-systems\/<brand>\/<\/code> following a 9-section schema (color, typography, spacing, layout, components, motion, voice, brand, anti-patterns). The library covers:<\/p>\n\n\n\n
          \n
        • AI\/LLM<\/strong> \u2014 Claude, Anthropic, Cohere, Mistral, ElevenLabs, Replicate, RunwayML<\/li>\n\n\n\n
        • Dev tools<\/strong> \u2014 Linear, Vercel, Cursor, Stripe, Supabase, Framer, Notion, Figma<\/li>\n\n\n\n
        • Fintech \/ E-com<\/strong> \u2014 Stripe, Coinbase, Airbnb, Shopify, Tesla<\/li>\n\n\n\n
        • Starters<\/strong> \u2014 default<\/code> (Neutral Modern), warm-editorial<\/code><\/li>\n<\/ul>\n\n\n\n
          To add your own<\/strong>, drop a folder into design-systems\/<your-brand>\/<\/code> with a DESIGN.md<\/code> in the same schema, and restart the daemon. Or \u2014 exactly as the reviewer demonstrated \u2014 export a design system from Claude Design itself via Share \u2192 Download Project as ZIP<\/em> and import it through the Import Claude Design ZIP<\/strong> button in the project setup screen.<\/p>\n\n\n\n
          To re-sync the upstream catalog from VoltAgent\/awesome-design-md<\/code>:<\/p>\n\n\n\n
          node scripts\/sync-design-systems.mjs\n<\/code><\/pre>\n\n\n\n
          Skills (19 built-in)<\/h4>\n\n\n\n
          Top-nav \u2192 Skills<\/strong>. Skills are folders under skills\/<\/code> containing a SKILL.md<\/code> (Claude Code’s standard convention) plus optional assets\/<\/code> and references\/<\/code>. Adding a skill is the same pattern: drop a folder, restart the daemon, it appears in the picker. The shipped skills break into three families:<\/p>\n\n\n\n
            \n
          • Design surfaces<\/strong> \u2014 web-prototype<\/code>, saas-landing<\/code>, dashboard<\/code>, pricing-page<\/code>, docs-page<\/code>, blog-post<\/code>, mobile-app<\/code>, simple-deck<\/code>, guizang-ppt<\/code> (the magazine-style deck default, bundled verbatim from op7418\/guizang-ppt-skill<\/code>)<\/li>\n\n\n\n
          • Document\/work-product<\/strong> \u2014 pm-spec<\/code>, weekly-update<\/code>, meeting-notes<\/code>, eng-runbook<\/code>, finance-report<\/code>, hr-onboarding<\/code>, invoice<\/code>, kanban-board<\/code>, team-okrs<\/code><\/li>\n\n\n\n
          • Showcase<\/strong> \u2014 dating-web<\/code>, digital-eguide<\/code>, email-marketing<\/code>, gamified-app<\/code>, mobile-onboarding<\/code>, motion-frames<\/code>, social-carousel<\/code>, sprite-animation<\/code><\/li>\n<\/ul>\n\n\n\n
            The extended od:<\/code> frontmatter (mode, platform, scenario, preview, design_system) is documented in docs\/skills-protocol.md<\/code>.<\/p>\n\n\n\n
            Visual directions (the brand-less fallback)<\/h4>\n\n\n\n
            When you start a project without a design system, OD’s discovery form offers five deterministic “schools” \u2014 Editorial Monocle, Modern Minimal, Tech Utility, Brutalist, Soft Warm. One radio click locks an OKLch palette and font stack, no model freestyle. This is the single biggest anti-AI-slop gate.<\/p>\n\n\n\n
            Simple Use Cases<\/h3>\n\n\n\n
            Use Case 1 \u2014 A SaaS landing page<\/h4>\n\n\n\n
            This mirrors the Lighthouse example from the YouTube video.<\/p>\n\n\n\n
              \n
            1. From the home screen, name your demo (e.g., Lighthouse landing<\/code>).<\/li>\n\n\n\n
            2. Skill \u2192 saas-landing<\/code>.<\/li>\n\n\n\n
            3. Design system \u2192 pick one (e.g., linear-app<\/code> for cool minimalism, warm-editorial<\/code> for a magazine vibe), or leave blank to get the direction picker.<\/li>\n\n\n\n
            4. Fidelity \u2192 High fidelity<\/strong>.<\/li>\n\n\n\n
            5. Prompt: Landing page for a fake SaaS product called Lighthouse. Analytics for solo founders and small teams. Generate three layout variants \u2014 classic stacked, editorial, and bold\/loud \u2014 so I can compare them.<\/li>\n\n\n\n
            6. Hit Send<\/strong>. The discovery form pops first (audience, tone, constraints) \u2014 answer in ~30 seconds via radios.<\/li>\n\n\n\n
            7. Live TodoWrite<\/code> plan streams in the right panel as the agent works.<\/li>\n\n\n\n
            8. The artifact renders in a sandboxed iframe within ~10 minutes (slower than Claude Design’s ~5 minutes, per the reviewer).<\/li>\n\n\n\n
            9. Export \u2192 HTML (with inline CSS), PDF, or ZIP.<\/li>\n<\/ol>\n\n\n\n
              Use Case 2 \u2014 A pitch deck with your own brand<\/h4>\n\n\n\n
              Use this when you want a slide deck in a style you’ve already authored in Claude Design.<\/p>\n\n\n\n
                \n
              1. In Claude Design, open your existing design system \u2192 Share \u2192 Download Project as .zip<\/strong>.<\/li>\n\n\n\n
              2. In Open Design’s project setup, click Import Claude Design ZIP<\/strong> and upload it.<\/li>\n\n\n\n
              3. Skill \u2192 guizang-ppt<\/code> (the magazine-style default).<\/li>\n\n\n\n
              4. Prompt: Create a pitch deck for Lighthouse, our SaaS analytics product. Audience: product folks at a launch event. Keep it short (8 slides). High fidelity. Use the imported design system. Visual tone: brutalist.<\/li>\n\n\n\n
              5. Answer the question form \u2014 speaker notes? Story arc? Length? Tone?<\/li>\n\n\n\n
              6. The agent walks a P0\/P1\/P2 checklist before emitting, runs a 5-dimensional self-critique (philosophy \/ hierarchy \/ execution \/ specificity \/ restraint), and only emits <artifact><\/code> when it scores \u22653 on every axis.<\/li>\n\n\n\n
              7. Preview swipes horizontally inside the iframe. Export to PPTX expects ~5 minutes of manual cleanup on spacing\/alignment per the reviewer’s experience.<\/li>\n<\/ol>\n\n\n\n
                Use Case 3 \u2014 A working-product document (no design system needed)<\/h4>\n\n\n\n
                OD is also useful for non-visual document deliverables \u2014 handy for your K-ONE workflows like PM specs or runbooks.<\/p>\n\n\n\n
                  \n
                1. Skill \u2192 pm-spec<\/code> (or eng-runbook<\/code>, finance-report<\/code>, etc.).<\/li>\n\n\n\n
                2. No design system needed \u2014 the templates ship with sensible defaults.<\/li>\n\n\n\n
                3. Prompt: Draft a PM spec for the ECO Mobile Washer firmware update v2.1, covering single-phase 230VAC support, new PCM water heater integration, and the Odoo sync pipeline. Include a decision log section.<\/li>\n\n\n\n
                4. Output is a structured Markdown\/HTML doc with TOC, decision log, and acceptance criteria sections \u2014 exportable as HTML, PDF, or Markdown.<\/li>\n<\/ol>\n\n\n\n
                  Use Case 4 \u2014 A mobile app prototype with device frames<\/h4>\n\n\n\n
                    \n
                  1. Skill \u2192 mobile-app<\/code> or mobile-onboarding<\/code>.<\/li>\n\n\n\n
                  2. Platform \u2192 mobile (the daemon auto-injects pixel-accurate iPhone 15 Pro \/ Pixel \/ iPad Pro frames from assets\/frames\/<\/code>, so the agent never re-draws a phone).<\/li>\n\n\n\n
                  3. Prompt: Three-screen onboarding for a Singapore food-court loyalty app. Splash, value-prop, sign-in. Bilingual EN\/ZH labels. Soft warm direction.<\/li>\n\n\n\n
                  4. The output renders inside a real device chrome (Dynamic Island, status-bar SVG, home indicator) \u2014 directly hand-off-able to a developer.<\/li>\n<\/ol>\n\n\n\n
                    Tips and Things to Watch<\/h3>\n\n\n\n
                      \n
                    • Use Local CLI<\/code>, not BYOK API<\/strong>, unless you specifically want to test something without your Max subscription. The whole point of Open Design over Claude Design is escaping usage caps \u2014 going through the Anthropic API path defeats that.<\/li>\n\n\n\n
                    • Custom design system without a Claude Design subscription<\/strong>: there’s no in-UI authoring tool yet. Either drop a folder under design-systems\/<brand>\/<\/code> with a 9-section DESIGN.md<\/code>, or use Claude Code in the terminal to scaffold one then import via the ZIP path.<\/li>\n\n\n\n
                    • The reviewer’s “bloat” warning is fair<\/strong> \u2014 Image Templates and Video Templates look impressive but are mostly one-line example prompts. Don’t expect production output from those tabs.<\/li>\n\n\n\n
                    • Quality-of-life features missing as of this writing<\/strong> \u2014 comment-mode surgical edits and the AI-emitted tweaks panel are visible in the UI but not yet functional. They are explicitly on the roadmap.<\/li>\n\n\n\n
                    • Speed is ~2\u00d7 slower than Claude Design<\/strong> \u2014 this is the cost of the local CLI loop. For high-iteration work, expect 8\u201312 minutes per artifact.<\/li>\n\n\n\n
                    • Cleanup expected on PPTX exports<\/strong> \u2014 slides look correct in-browser but spacing and box-overflow issues appear post-export. Budget 5 minutes of manual cleanup per deck.<\/li>\n<\/ul>\n\n\n\n
                      Architecture in One Diagram<\/h3>\n\n\n\n
                      Browser (Vite + React)\n   \u2502 \/api\/* SSE\n   \u25bc\nDaemon (Express + SQLite, port 7456)\n   \u2502 spawn(cli, [...], cwd: .od\/projects\/<id>)\n   \u25bc\nYour CLI (claude \/ codex \/ cursor-agent \/ gemini \/ opencode \/ qwen)\n   \u2502 reads SKILL.md + DESIGN.md, writes <artifact> to disk\n   \u25bc\nSandboxed iframe preview + file workspace + export pipeline (HTML\/PDF\/PPTX\/ZIP\/MD)\n<\/code><\/pre>\n\n\n\n
                      Every layer is a file you can edit. The prompt stack \u2014 src\/prompts\/system.ts<\/code> and src\/prompts\/discovery.ts<\/code> \u2014 is where most of the design quality lives, and it’s where you’d customize behavior for K-ONE-specific workflows.<\/p>\n\n\n\n
                      Video about Open Design (OD)<\/h2>\n\n\n\n
                      \n