GitHub - nexu-io/open-design: 🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.
Pangram verdict · v3.3
We believe that this document is a mix of AI-generated, and human-written content
AI likelihood · overall
MixedArticle text · 1,729 words · 6 segments analyzed
The open-source alternative to Claude Design. Local-first, web-deployable, BYOK at every layer — 11 coding-agent CLIs auto-detected on your PATH (Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro) become the design engine, driven by 31 composable Skills and 72 brand-grade Design Systems. No CLI? An OpenAI-compatible BYOK proxy is the same loop minus the spawn. English · Deutsch · 简体中文 · 繁體中文 · 한국어 · 日本語 Why this exists Anthropic's Claude Design (released 2026-04-17, Opus 4.7) showed what happens when an LLM stops writing prose and starts shipping design artifacts. It went viral — and stayed closed-source, paid-only, cloud-only, locked to Anthropic's model and Anthropic's skills. There is no checkout, no self-host, no Vercel deploy, no swap-in-your-own-agent. Open Design (OD) is the open-source alternative. Same loop, same artifact-first mental model, none of the lock-in. We don't ship an agent — the strongest coding agents already live on your laptop. We wire them into a skill-driven design workflow that runs locally with pnpm tools-dev, can deploy the web layer to Vercel, and stays BYOK at every layer. Type make me a magazine-style pitch deck for our seed round. The interactive question form pops up before the model improvises a single pixel. The agent picks one of five curated visual directions. A live TodoWrite plan streams into the UI. The daemon builds a real on-disk project folder with a seed template, layout library, and self-check checklist. The agent reads them — pre-flight enforced — runs a five-dimensional critique against its own output, and emits a single <artifact> that renders in a sandboxed iframe seconds later. That's not "AI tries to design something". That's an AI that has been trained, by the prompt stack, to behave like a senior designer with a working filesystem, a deterministic palette library, and a checklist culture — exactly the bar Claude Design set, but open and yours. OD stands on four open-source shoulders: alchaincyf/huashu-design — the design-philosophy compass.
Junior-Designer workflow, the 5-step brand-asset protocol, the anti-AI-slop checklist, the 5-dimensional self-critique, and the "5 schools × 20 design philosophies" idea behind our direction picker — all distilled into apps/web/src/prompts/discovery.ts. op7418/guizang-ppt-skill — the deck mode. Bundled verbatim under skills/guizang-ppt/ with original LICENSE preserved; magazine-style layouts, WebGL hero, P0/P1/P2 checklists. OpenCoworkAI/open-codesign — the UX north star and our closest peer. The first open-source Claude-Design alternative. We borrow its streaming-artifact loop, its sandboxed-iframe preview pattern (vendored React 18 + Babel), its live agent panel (todos + tool calls + interruptible generation), and its five-format export list (HTML / PDF / PPTX / ZIP / Markdown). We deliberately diverge on form factor — they are a desktop Electron app bundling pi-ai; we are a web app + local daemon that delegates to your existing CLI. multica-ai/multica — the daemon-and-runtime architecture. PATH-scan agent detection, the local daemon as the only privileged process, the agent-as-teammate worldview. At a glance What you get Coding-agent CLIs (11) Claude Code · Codex CLI · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · GitHub Copilot CLI · Hermes (ACP) · Kimi CLI (ACP) · Pi (RPC) · Kiro CLI (ACP) — auto-detected on PATH, swap with one click BYOK fallback OpenAI-compatible proxy at /api/proxy/stream — paste baseUrl + apiKey + model and any vendor (Anthropic-via-OpenAI, DeepSeek, Groq, MiMo, OpenRouter, your self-hosted vLLM, or any other OpenAI-compatible provider) becomes the engine. Internal-IP/SSRF blocked at the daemon edge.
Design systems built-in 129 — 2 hand-authored starters + 70 product systems (Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Xiaohongshu, …) from awesome-design-md, plus 57 design skills from awesome-design-skills added directly under design-systems/ Skills built-in 31 — 27 in prototype mode (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, …) + 4 in deck mode (guizang-ppt · simple-deck · replit-deck · weekly-update). Grouped in the picker by scenario: design / marketing / operation / engineering / product / finance / hr / sale / personal. Media generation Image · video · audio surfaces ship alongside the design loop. gpt-image-2 (Azure / OpenAI) for posters, avatars, infographics, illustrated maps · Seedance 2.0 (ByteDance) for cinematic 15s text-to-video and image-to-video · HyperFrames (heygen-com/hyperframes) for HTML→MP4 motion graphics (product reveals, kinetic typography, data charts, social overlays, logo outros). 93 ready-to-replicate prompts gallery — 43 gpt-image-2 + 39 Seedance + 11 HyperFrames — under prompt-templates/, with preview thumbnails and source attribution. Same chat surface as code; outputs a real .mp4 / .png chip into the project workspace. Visual directions 5 curated schools (Editorial Monocle · Modern Minimal · Warm Soft · Tech Utility · Brutalist Experimental) — each ships a deterministic OKLch palette + font stack (apps/web/src/prompts/directions.ts) Device frames iPhone 15 Pro · Pixel · iPad Pro · MacBook · Browser Chrome — pixel-accurate, shared across skills under assets/frames/ Agent runtime Local daemon spawns the CLI in your project folder — agent gets
real Read, Write, Bash, WebFetch against a real on-disk environment, with Windows ENAMETOOLONG fallbacks (stdin / prompt-file) on every adapter Imports Drop a Claude Design export ZIP onto the welcome dialog — POST /api/import/claude-design parses it into a real project so your agent can keep editing where Anthropic left off Persistence SQLite at .od/app.sqlite: projects · conversations · messages · tabs · saved templates. Reopen tomorrow, todo card and open files are exactly where you left them. Lifecycle One entry point: pnpm tools-dev (start / stop / run / status / logs / inspect / check) — boots daemon + web (+ desktop) under typed sidecar stamps Desktop Optional Electron shell with sandboxed renderer + sidecar IPC (STATUS / EVAL / SCREENSHOT / CONSOLE / CLICK / SHUTDOWN) — drives tools-dev inspect desktop screenshot for E2E Deployable to Local (pnpm tools-dev) · Vercel web layer · packaged Electron (placeholder, in-flight) License Apache-2.0 Demo Entry view — pick a skill, pick a design system, type the brief. The same surface for prototypes, decks, mobile apps, dashboards, and editorial pages. Turn-1 discovery form — before the model writes a pixel, OD locks the brief: surface, audience, tone, brand context, scale. 30 seconds of radios beats 30 minutes of redirects. Direction picker — when the user has no brand, the agent emits a second form with 5 curated directions (Monocle / Modern Minimal / Tech Utility / Brutalist / Soft Warm). One radio click → a deterministic palette + font stack, no model freestyle. Live todo progress — the agent's plan streams as a live card. in_progress → completed updates land in real time. The user can redirect cheaply, mid-flight. Sandboxed preview — every <artifact> renders in a clean srcdoc iframe. Editable in place via the file workspace; downloadable as HTML, PDF, ZIP. 72-system library — every product system shows its 4-color signature. Click for the full DESIGN.md, swatch grid, and live showcase. Deck mode (guizang-ppt) — the bundled guizang-ppt-skill drops in unchanged. Magazine layouts, WebGL hero backgrounds, single-file HTML output, PDF export.
Mobile prototype — pixel-accurate iPhone 15 Pro chrome (Dynamic Island, status bar SVGs, home indicator). Multi-screen prototypes use the shared /frames/ assets so the agent never re-draws a phone. Skills 31 skills ship in the box. Each is a folder under skills/ following the Claude Code SKILL.md convention with an extended od: frontmatter that the daemon parses verbatim — mode, platform, scenario, preview.type, design_system.requires, default_for, featured, fidelity, speaker_notes, animations, example_prompt (apps/daemon/src/skills.ts). Two top-level modes carry the catalog: prototype (27 skills — anything that renders as a single-page artifact, from a magazine landing to a phone screen to a PM spec doc) and deck (4 skills — horizontal-swipe presentations with deck-framework chrome). The scenario field is what the picker groups them by: design · marketing · operation · engineering · product · finance · hr · sale · personal. Showcase examples The visually distinctive skills you'll most likely run first. Each ships a real example.html you can open straight from the repo to see exactly what the agent will produce — no auth, no setup. dating-web · prototypeConsumer dating / matchmaking dashboard — left rail nav, ticker bar, KPIs, 30-day mutual-matches chart, editorial typography. digital-eguide · templateTwo-spread digital e-guide — cover (title, author, TOC teaser) + lesson spread with pull-quote and step list. Creator / lifestyle tone. email-marketing · prototypeBrand product-launch HTML email — masthead, hero image, headline lockup, CTA, specs grid. Centered single-column, table-fallback safe. gamified-app · prototypeThree-frame gamified mobile-app prototype on a dark showcase stage — cover, today's quests with XP ribbons + level bar, quest detail. mobile-onboarding · prototypeThree-frame mobile onboarding flow — splash, value-prop, sign-in. Status bar, swipe dots, primary CTA. motion-frames · prototypeSingle-frame motion-design hero with looping CSS animations — rotating type ring, animated globe, ticking timer.
Hand-off ready for HyperFrames. social-carousel · prototypeThree-card 1080×1080 social-media carousel — cinematic panels with display headlines that connect across the series, brand mark, loop affordance. sprite-animation · prototypePixel / 8-bit animated explainer slide — full-bleed cream stage, animated pixel mascot, kinetic Japanese display type, looping CSS keyframes. Design & marketing surfaces (prototype mode) Skill Platform Scenario What it produces web-prototype desktop design Single-page HTML — landings, marketing, hero pages (default for prototype) saas-landing desktop marketing Hero / features / pricing / CTA marketing layout dashboard desktop operation Admin / analytics with sidebar + dense data layout pricing-page desktop sale Standalone pricing + comparison tables docs-page desktop engineering 3-column documentation layout blog-post desktop marketing Editorial long-form mobile-app mobile design iPhone 15 Pro / Pixel framed app screen(s) mobile-onboarding mobile design Multi-screen mobile onboarding flow (splash · value-prop · sign-in) gamified-app mobile personal Three-frame gamified mobile-app prototype email-marketing desktop marketing Brand product-launch HTML email (table-fallback safe) social-carousel desktop marketing 3-card 1080×1080 social carousel magazine-poster desktop marketing Single-page magazine-style poster motion-frames desktop marketing Motion-design hero with looping CSS animations sprite-animation desktop marketing Pixel / 8-bit animated explainer slide dating-web desktop personal Consumer dating dashboard mockup digital-eguide desktop marketing Two-spread digital e-guide (cover + lesson) wireframe-sketch desktop design Hand-drawn ideation sketch — for the "show something visible early" pass critique desktop design Five-dimensional self-critique scoresheet (Philosophy · Hierarchy · Detail · Function · Innovation) tweaks desktop design AI-emitted tweaks panel — the model surfaces the parameters worth nudging Deck surfaces (deck mode) Skill Default for What it produces guizang-ppt default for deck Magazine-style web PPT — bundled verbatim from op7418/guizang-ppt-skill, original LICENSE preserved simple-deck — Minimal horizontal-swipe deck