GitHub - nexu-io/open-design: 🎨 Anthropic의 Claude Design에 대한 로컬 우선, 오픈 소스 대안입니다. ⚡ 19가지 기술 · ✨ 71가지 브랜드급 디자인 시스템 🖼 웹 생성 · 데스크탑 · 모바일 프로토타입 · 슬라이드 · 이미지 · 비디오 · HyperFrames 📦 샌드박스 미리보기 · HTML/PDF/PPTX/MP4 내보내기 🤖 Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI에서 실행됩니다.

The open-source alternative to Claude Design. Local-first, web-deployable, BYOK at every layer — 16 coding-agent CLIs auto-detected on your PATH (Claude Code, Codex, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen, Qoder CLI, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, Kilo, Mistral Vibe, DeepSeek TUI) 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 · Español · Português (Brasil) · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe 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 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 intoapps/daemon/src/prompts/discovery.ts .op7418/guizang-ppt-skill — the deck mode. Bundled verbatim underskills/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 bundlingpi-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. | What you get | | |---|---| | Coding-agent CLIs (16) | Claude Code · Codex CLI · Devin for Terminal · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · Qoder CLI · GitHub Copilot CLI · Hermes (ACP) · Kimi CLI (ACP) · Pi (RPC) · Kiro CLI (ACP) · Kilo (ACP) · Mistral Vibe CLI (ACP) · DeepSeek TUI — auto-detected on PATH , swap with one click | | BYOK fallback | Protocol-specific API proxy at /api/proxy/{anthropic,openai,azure,google}/stream — paste baseUrl + apiKey + model , choose Anthropic / OpenAI / Azure OpenAI / Google Gemini, and the daemon normalizes SSE back to the same chat stream. 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/daemon/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 desktop app for macOS (Apple Silicon) and Windows (x64) — download from open-design.ai or the latest release | | License | Apache-2.0 | | 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 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. | 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 . 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. | | 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 | | 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 | replit-deck | — | Product-walkthrough deck (Replit-style) | weekly-update | — | Team weekly cadence as a swipe deck (progress · blockers · next) | | Skill | Scenario | What it produces | |---|---|---| pm-spec | product | PM specification doc with TOC + decision log | team-okrs | product | OKR scoresheet | meeting-notes | operation | Meeting decision log | kanban-board | operation | Board snapshot | eng-runbook | engineering | Incident runbook | finance-report | finance | Exec finance summary | invoice | finance | Single-page invoice | hr-onboarding | hr | Role onboarding plan | Adding a skill takes one folder. Read docs/skills-protocol.md for the extended frontmatter, fork an existing skill, restart the daemon, it appears in the picker. The catalog endpoint is GET /api/skills ; per-skill seed assembly (template + side-file references) lives at GET /api/skills/:id/example . The daemon scans your PATH for claude , codex , devin , cursor-agent , gemini , opencode , qwen , qodercli , copilot , hermes , kimi , pi , kiro-cli , kilo , vibe-acp , and deepseek on startup. Whichever ones it finds become candidate design engines — driven over stdio with one adapter per CLI, swappable from the model picker. Inspired by multica and cc-switch . No CLI installed? The API mode is the same pipeline minus the spawn — choose Anthropic, OpenAI-compatible, Azure OpenAI, or Google Gemini and the daemon forwards normalized SSE chunks back. Loopback is allowed for local LLM providers such as Ollama and LM Studio; non-loopback private, link-local, CGNAT, multicast, reserved, and redirect targets are rejected at the daemon edge. Following Claude Code's SKILL.md convention, each skill is SKILL.md + assets/ + references/ . Drop a folder into skills/ , restart the daemon, it appears in the picker. The bundled magazine-web-ppt is op7418/guizang-ppt-skill committed verbatim — original license preserved, attribution preserved. The 9-section DESIGN.md schema from VoltAgent/awesome-design-md — color, typography, spacing, layout, components, motion, voice, brand, anti-patterns. Every artifact reads from the active system. Switch system → next render uses the new tokens. The dropdown ships with Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Apple, Anthropic, Cursor, Supabase, Figma, Resend, Raycast, Lovable, Cohere, Mistral, ElevenLabs, X.AI, Spotify, Webflow, Sanity, PostHog, Sentry, MongoDB, ClickHouse, Cal, Replicate, Clay, Composio, Xi