Open Design

active

Open-Source Alternative to Claude Design

TypeScriptNext.js 16React 18Node 24pnpmElectronPlaywrightViteSQLiteSSE Streaming
Key Metrics 15 coding-agent CLIs auto-detected, 31 skills, 129 design systems built-in, Apache 2.0

Problem

Anthropic’s Claude Design (released April 2026, Opus 4.7) showed what happens when an LLM starts shipping design artifacts instead of prose. It went viral — and stayed closed-source, paid-only, cloud-only, locked to Anthropic’s model. No checkout, no self-host, no swap-in-your-own-agent.

Solution

Open Design (OD) is the open-source alternative. Same artifact-first mental model, none of the lock-in. It doesn’t ship an agent — it auto-detects 15 coding-agent CLIs on your PATH (Claude Code, Codex, Hermes, Gemini CLI, and more) and wires them into a skill-driven design workflow that runs locally.

Key capabilities:

  • 31 composable Skills — web prototypes, SaaS landing pages, dashboards, mobile apps, magazine decks, wireframes, PM specs, and more
  • 129 design systems — Linear, Stripe, Vercel, Apple, Notion, and curated brand-grade palettes from awesome-design-md
  • 15 coding-agent CLIs auto-detected — swap agents with one click, or use the BYOK proxy fallback
  • 5 curated visual directions — Editorial Monocle, Modern Minimal, Warm Soft, Tech Utility, Brutalist Experimental
  • Device frames — iPhone 15 Pro, iPad Pro, MacBook, Browser Chrome — pixel-accurate
  • Media generation — gpt-image-2, Seedance 2.0 (video), HyperFrames (HTML→MP4 motion graphics)
  • Claude Design import — drop an Anthropic CD export ZIP, the daemon parses it into a real project
  • Full local persistence — SQLite at .od/app.sqlite, reopen exactly where you left off
  • Local daemon + web app + optional Electron desktop

Architecture

Local daemon (privileged)
    ├── PATH-scan → agent detection
    ├── Spawn agent CLI in project folder
    ├── SSE stream → Next.js web frontend
    └── SQLite persistence
            ↕
    Web frontend (Vercel-deployable)
            ↕
    Optional: Electron desktop shell

OD stands on four open-source foundations: huashu-design (design philosophy), guizang-ppt-skill (deck mode), open-codesign (streaming artifact loop), and multica (daemon-and-runtime architecture).

Status

Active. v0.4.0 running on my homelab. Self-hosting the full stack — daemon on UM890, web via local dev server. Contributing upstream as I uncover edge cases on the Thai setup.

Tech Stack

  • Runtime: Node 24, pnpm 10.33, TypeScript
  • Web: Next.js 16 App Router, React 18, SSE streaming
  • Desktop: Electron (optional)
  • Daemon: Local privileged process, SQLite, CLI agent spawning
  • Media: gpt-image-2, Seedance 2.0, HyperFrames (HeyGen)
  • Testing: Playwright E2E, Vitest, jsdom
  • License: Apache 2.0

View on GitHub →