Open Design: Open-Source Claude Design Alternative
Open Design serves as the open-source version of Claude Design. It operates locally first and deploys to the web. Users bring their own keys at each layer. Twelve coding-agent command-line interfaces get auto-detected on the PATH. These include Claude Code, Codex, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, and Kiro. They power the design process through 31 composable skills and 72 brand-grade design systems. Without a CLI, an OpenAI-compatible BYOK proxy handles the same process without spawning.
Reasons for Open Design's Creation
Anthropic released Claude Design on 2026-04-17 using Opus 4.7. That tool shifted large language models from text to design outputs and gained popularity. However, it remained closed-source, required payment, ran only in the cloud, and tied users to Anthropic's model and skills. No checkout option existed, nor self-hosting, Vercel deployment, or agent swaps. Open Design matches that process and artifact-focused approach without the restrictions. It avoids shipping its own agent since strong ones already exist on laptops. Instead, it connects them to a skill-based design workflow. This runs locally via pnpm tools-dev, deploys the web part to Vercel, and keeps BYOK throughout.
Users type a request like "make me a magazine-style pitch deck for our seed round." An interactive question form appears first. The agent selects from five visual directions. A live TodoWrite plan appears in the UI. The daemon creates an on-disk project folder with seed template, layout library, and checklist. The agent reviews them before proceeding, applies a five-dimensional critique to its work, and outputs a single <artifact> that renders in a sandboxed iframe shortly after.
Foundations in Open-Source Projects
Open Design builds on four open-source efforts. Alchaincyf/huashu-design supplies the design philosophy, including Junior-Designer workflow, five-step brand-asset protocol, anti-AI-slop checklist, five-dimensional self-critique, and the five schools by 20 design philosophies concept in apps/web/src/prompts/discovery.ts. Op7418/guizang-ppt-skill provides deck mode, included under skills/guizang-ppt/ with its license intact, featuring magazine-style layouts, WebGL hero, and P0/P1/P2 checklists. OpenCoworkAI/open-codesign offers UX guidance, with borrowed streaming-artifact loop, sandboxed-iframe preview using React 18 and Babel, live agent panel for todos, tool calls, and interruptible generation, plus five export formats: HTML, PDF, PPTX, ZIP, Markdown. It differs by using web app plus local daemon delegating to existing CLIs, not a desktop Electron app with pi-ai. Multica-ai/multica contributes daemon-and-runtime setup, PATH-scan agent detection, local daemon as sole privileged process, and agent-as-teammate view.
Key Features at a Glance
Supported coding-agent CLIs number 12: Claude Code, Codex CLI, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, GitHub Copilot CLI, Hermes (ACP), Kimi CLI (ACP), Pi (RPC), Kiro CLI (ACP). They auto-detect on PATH and swap with one click. BYOK fallback uses OpenAI-compatible proxy at /api/proxy/stream. Users input baseUrl, apiKey, model for providers like Anthropic-via-OpenAI, DeepSeek, Groq, MiMo, OpenRouter, self-hosted vLLM, or others. Internal-IP/SSRF blocks occur at daemon edge.
Built-in design systems total 129: two hand-authored starters plus 70 from awesome-design-md like Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Xiaohongshu, and 57 from awesome-design-skills under design-systems/.
Skills number 31: 27 prototypes (web-prototype, saas-landing, dashboard, mobile-app, gamified-app, social-carousel, magazine-poster, dating-web, sprite-animation, motion-frames, critique, tweaks, wireframe-sketch, pm-spec, eng-runbook, finance-report, hr-onboarding, invoice, kanban-board, team-okrs) plus four decks (guizang-ppt, simple-deck, replit-deck, weekly-update). Grouped by scenario: design, marketing, operation, engineering, product, finance, hr, sale, personal.
Media generation covers image, video, audio. Gpt-image-2 (Azure/OpenAI) handles posters, avatars, infographics, illustrated maps. Seedance 2.0 (ByteDance) manages 15s text-to-video and image-to-video. HyperFrames (heygen-com/hyperframes) converts HTML to MP4 motion graphics like product reveals, kinetic typography, data charts, social overlays, logo outros. Ninety-three prompts in prompt-templates/ include 43 gpt-image-2, 39 Seedance, 11 HyperFrames, with previews and attribution.
Visual directions feature five schools: Editorial Monocle, Modern Minimal, Warm Soft, Tech Utility, Brutalist Experimental. Each includes OKLch palette and font stack in apps/web/src/prompts/directions.ts.
Device frames: iPhone 15 Pro, Pixel, iPad Pro, MacBook, Browser Chrome, pixel-accurate under assets/frames/.
Agent runtime uses local daemon to spawn CLI in project folder, providing Read, Write, Bash, WebFetch on real disk, with Windows ENAMETOOLONG fixes.
Imports accept Claude Design ZIP via welcome dialog; POST /api/import/claude-design turns it into editable project.
Persistence via SQLite at .od/app.sqlite for projects, conversations, messages, tabs, templates.
Lifecycle via pnpm tools-dev (start/stop/run/status/logs/inspect/check). Optional Electron shell with sandboxed renderer and sidecar IPC.
Deployable to local (pnpm tools-dev), Vercel web, packaged Electron.
License: Apache-2.0.
Demo and User Interface Elements
Entry view lets users pick skill, design system, enter brief. Turn-1 discovery form covers surface, audience, tone, brand context, scale. Direction picker offers five options if no brand. Live todo progress streams. Sandboxed preview in srcdoc iframe, editable, exportable as HTML/PDF/ZIP.
Seventy-two system library shows four-color signatures, DESIGN.md, swatches, showcases.
Deck mode uses guizang-ppt-skill for magazine layouts, WebGL heroes, HTML/PDF output.
Mobile prototypes use iPhone 15 Pro frames with Dynamic Island, status bar, home indicator.
Skills Catalog
Thirty-one skills follow Claude Code SKILL.md with od: frontmatter: mode, platform, scenario, preview.type, design_system.requires, default_for, featured, fidelity, speaker_notes, animations, example_prompt. Modes: prototype (27 single-page artifacts), deck (4 presentations). Scenarios group picker: design, marketing, operation, engineering, product, finance, hr, sale, personal.
Stay updated
Get the day's AI and automation news in your inbox. No spam, unsubscribe anytime.
Showcase skills include dating-web (dating dashboard), digital-eguide (e-guide spreads), email-marketing (HTML email), gamified-app (mobile prototype), mobile-onboarding (onboarding flow), motion-frames (CSS animations), social-carousel (social cards), sprite-animation (pixel explainer).
Design/marketing prototypes: web-prototype (landings), saas-landing, dashboard, pricing-page, docs-page, blog-post, mobile-app, mobile-onboarding, gamified-app, email-marketing, social-carousel, magazine-poster, motion-frames, sprite-animation, dating-web, digital-eguide, wireframe-sketch, critique, tweaks.
Deck: guizang-ppt (magazine PPT), simple-deck, replit-deck, weekly-update.
Operations: pm-spec, team-okrs, meeting-notes, kanban-board, eng-runbook, finance-report, invoice, hr-onboarding.
Adding skills: drop folder, read docs/skills-protocol.md, restart daemon. Catalog at GET /api/skills; examples at GET /api/skills/:id/example.
Six Core Concepts
-
No shipped agent; scans PATH for claude, codex, etc., swaps via picker. BYOK proxy rejects unsafe hosts.
-
Skills as files in skills/ following SKILL.md.
-
Design systems as Markdown DESIGN.md with nine sections.
-
Discovery form upfront prevents redirects.
-
Daemon gives real filesystem access; SQLite persists state.
-
Composable prompt stack from files.
Architecture and Setup
Browser (Next.js 16) connects to local daemon (Express + SQLite) via /api/*, spawning CLIs.
Layer stack: Frontend Next.js 16/React 18/TypeScript; Daemon Node 24/Express/SQLite; Agent transport child_process.spawn with parsers; BYOK proxy; Storage files/SQLite; Preview srcdoc iframe; Exports HTML/PDF/PPTX/ZIP/Markdown; Lifecycle pnpm tools-dev.
Quickstart: git clone https://github.com/nexu-io/open-design.git, corepack enable, pnpm install, pnpm tools-dev run web. Needs Node 24, pnpm 10.33.x.
First load detects agents, loads skills/systems, creates .od/.
.od/ holds app.sqlite, artifacts/, projects/.
Repository includes apps/daemon/web, packages/, skills/, design-systems/, assets/, docs/.
Design systems: 72 from categories like AI/LLM (claude, cohere), Developer Tools (cursor, vercel), etc.
Visual directions detailed with moods/refs.
Media: gpt-image-2, seedance-2.0, hyperframes-html; 93 templates.
Imports and BYOK proxy included.
Related on Neura Market