卧槽！老黄牛逼啊！ 这下直接收藏当可以直接拿html轻松制作视频了，今天正好也在拿hyperframe和remotion捣鼓视频。 这下可以直接拿来用了，直接送枕头了啊！ 地址 https://github.com/nexu-io/open-design…

---

nexu-io/open-design

Source: https://github.com/nexu-io/open-design

Open Design: The open-source Claude Design alternative

🔥 Open Design 0.9.0 is here: create without the setup. The official Model Router is built right into the app — no extra configuration, no CLI to install, no API key to prepare. Just open the app, sign in, and start designing and creating right away. Download 0.9.0 · Join the discussion

🏅 The Open Design Fellow program is now open. If you also believe design should be open — become an Open Design Fellow, shape the product alongside the core team, and help more people take part in defining the future of design. Details → MAINTAINERS.md and Discord.

Website · Download · Discord · Follow @nexudotio

English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe

---

What is Open Design

🎨 The local-first, open-source Claude Design alternative.  🖥️ Native desktop app for macOS and Windows.  ⚡ 100+ skills · ✨ 150 brand-grade DESIGN.md systems · 📦 261 ready-to-use plugins.  🖼️ Generates web · desktop · mobile prototypes, live dashboards / artifacts, decks, images, video, plus HyperFrames motion graphics. 🔒 Sandboxed iframe preview · HTML / PDF / PPTX / MP4 export.  🤖 Runs on Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity and 21 local CLIs, or any OpenAI-compatible endpoint via BYOK.

Open Design is what you get when the agent-native loop Anthropic shipped with Claude Design — discover the brief, lock the direction, stream the artifact, critique, deliver — stops being closed and becomes a filesystem of skills, design systems, and plugins that the coding agents already on your laptop can read, write, and remix. Your CLI becomes the design engine, your laptop becomes the studio, and your team’s DESIGN.md becomes the brand contract.

It’s also the Figma alternative for the agent era — instead of pushing pixels on a canvas, it delivers single-page artifacts in real CSS, real fonts, real components, exported straight to HTML / PDF / PPTX / MP4 — already shaped by your design system, already runnable inside the agent you use every day.

---

Product tour

A quick look at what Open Design is and what it does. Start from Home, orchestrate repeat workflows with Automation, distill a brand contract in Design System, and extend with Plugins and integrations; inside any project’s Studio, the same design system streams out prototypes, live artifacts, HyperFrames, decks, and images.

Core pages

Home — the overview entry point. Pick a skill and a design system, type the brief, and kick off everything from one place.

Automation — orchestrate repetitive design workflows into reusable, schedulable automations.	Design System — distill your team's DESIGN.md into a brand contract that shapes every output.
Plugin — browse, install, and distribute workflow plugins to extend generation on demand.	Integrations — connect external systems and MCP tools, and use Open Design from any IDE, script, or automation.

Studio — many artifact types in one project

Inside a project’s Studio, the same design system streams out multiple artifact types:

Prototype — single-page HTML artifacts that read your design system and render in a sandboxed iframe, previewable instantly and downloadable as source.	HyperFrame — programmatic motion and animated graphics, rendered to a real MP4 (e.g. 1920×1080 · 30fps).
Deck — pitch decks you can page through, navigate by keyboard, and export to PPTX / PDF.	Image — brand-grade images and visual assets, with high-resolution generation and download.

---

Platform Compatibility

Open Design ships as skills, a CLI, and an MCP server that mainstream coding agents consume natively. Once OD is installed, a single od mcp install <agent> wires the MCP server into that agent’s config, and you call the same tools from inside any agent.

Coding agent / platform	Status	One-line MCP server install
Claude Code	✅ Supported	od mcp install claude
Codex CLI	✅ Supported	od mcp install codex
Cursor	✅ Supported	od mcp install cursor
VS Code + GitHub Copilot	✅ Supported	od mcp install copilot
GitHub Copilot CLI	✅ Supported	od mcp install copilot
Gemini CLI	✅ Supported	od mcp install gemini
OpenCode	✅ Supported	od mcp install opencode
OpenClaw	✅ Supported	od mcp install openclaw
Antigravity	✅ Supported	od mcp install antigravity
Cline	✅ Supported	od mcp install cline
Trae	✅ Supported	od mcp install trae
Kimi CLI	✅ Supported	od mcp install kimi
Pi Agent	✅ Supported	od mcp install pi
Mistral Vibe CLI	✅ Supported	od mcp install vibe
Hermes Agent	✅ Supported	od mcp install hermes

od mcp install <agent> --print for a dry-run preview · --uninstall to remove · full list with od mcp install --help.

No CLI installed? The BYOK proxy at POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream gives you the same loop (no process spawn) — paste baseUrl + apiKey + model, with support for OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM, or any OpenAI-compatible endpoint. Per-target SSRF protection blocks internal IPs / link-local / CGNAT at the daemon edge.

The adapter contract and stream parsers live in apps/daemon/src/agents.ts. Adding a new CLI is one entry — see docs/agent-adapters.md.

---

Demo

Four core product categories, all rendered by a coding agent running on your laptop. Click a thumbnail to see the real example.

1 · Prototypes — web · desktop · mobile

The default output surface. Single-page HTML artifacts that read your DESIGN.md and render in a sandboxed iframe.

Entry view — pick a skill, pick a design system, type the brief. One surface for prototypes, dashboards, decks, mobile apps, magazine pages.	Mobile prototype — pixel-accurate iPhone 15 Pro chrome, multi-screen flows. The agent never redraws the phone frame; shared device frames live in assets/frames/.
Web prototype — an editorial dashboard with scrollbars, KPIs, and charts. Rendered straight from design-templates/dating-web/.	Mobile app prototype — a three-screen gamified flow with XP ribbons and quest detail. Hand off straight to Cursor / Codex / Claude Code to turn into React/Next/Vue.

2 · Live artifacts & dashboards

Live dashboards, decision rooms, KPI walls — single-page artifacts that pull data through a tweaks panel and stay editable in place.

Live dashboard — an editable KPI wall whose tweaks panel surfaces the parameters worth nudging. The agent emits a manifest, and the iframe re-renders without a reload.	Decision room — a multi-source briefing artifact for product / research / ops meetings.
GitHub-style dashboard — repo metrics presented as a live artifact.	Flow live-dashboard template — a domain-specific KPI template, branded through the active DESIGN.md.

3 · Decks — magazine decks, weekly updates, pitches

Deck mode (guizang-ppt) — magazine layouts, WebGL hero, P0/P1/P2 checklists. Bundled verbatim from op7418/guizang-ppt-skill with its original license preserved.

Swiss International-style deck — grid-anchored, monochrome accents. One of 15 deck templates and 36 themes under design-templates/html-ppt-*/.

Every deck exports to HTML (single file, inlined assets), PDF (browser print, deck-aware), PPTX (agent-driven skill), ZIP (archive), or Markdown.

4 · Images — gpt-image-2, ImageRouter, custom API

Illustrated city food map Hand-drawn editorial travel poster

Cinematic elevator scene Single-frame editorial still

Cyberpunk portrait Profile avatar — neon face text

3D stone staircase Hewn-stone infographic

Glamorous portrait Editorial studio shot

93 ready-to-replicate prompts live in prompt-templates/ — preview thumbnails, full prompt body, target model, aspect ratio, and source attribution. One click drops a brief into the composer.

5 · Video & HyperFrames — agent-native motion graphics

HyperFrames is HeyGen’s open-source, agent-native video framework, integrated as a first-class citizen in Open Design. The agent writes HTML + CSS + GSAP, and HyperFrames renders it to a deterministic MP4 via headless Chrome + FFmpeg. Pair it with Seedance 2.0 for cinematic t2v / i2v, Veo 3 / Sora 2 / Kling 2 for routed model variants, and Suno v5 / Lyria 2 for the audio layer.

30s SaaS product promo · 16:9 · UI 3D reveals	TikTok karaoke talking-head · 9:16 · TTS + word-synced captions	30s brand sizzle reel · 16:9 · audio-reactive kinetic type	Bar chart race · 16:9 · NYT-style data infographic
Flight map · 16:9 · Apple-style route reveal	4s cinematic logo outro · 16:9 · piece-by-piece assembly + bloom	$0 → $10K money counter · 9:16 · Apple-style hype	Website-to-video · 16:9 · captures the site at 3 viewports

11 HyperFrames templates + 39 Seedance prompts ship with the repo. Catalog thumbnails © HeyGen; the framework is Apache-2.0. The OD-specific render workflow (composition cache, sandbox-exec workaround, MP4-as-chip) is detailed in design-templates/hyperframes/.

---

Why Open Design

In April 2026, Anthropic released Claude Design — the first time an LLM stopped writing prose and started delivering design artifacts directly. It went viral. But it stayed closed-source, paid-only, cloud-only, locked to Anthropic’s model, Anthropic’s skills, Anthropic’s surface. 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:

• 🤖 Agent-native, model-agnostic. We don’t ship an agent. The claude / codex / cursor-agent / copilot / hermes / kimi already on your PATH are the design engine. Swap with one click.
• 🧠 Brand-grade by default. Every render reads the active DESIGN.md — a 9-section schema covering palette, type, spacing, motion, voice, anti-patterns. 150 systems ship with the repo (Linear, Stripe, Vercel, Airbnb, Apple, Tesla, Notion, Anthropic, Cursor, Supabase, Figma…). Drop a folder in, the picker finds it.
• 🖥️ Local-first, BYOK at every layer. Native desktop apps for macOS (Apple Silicon + Intel) and Windows (x64). Linux AppImage on the optional release lane. SQLite at .od/app.sqlite, files at .od/projects/<id>/, no telemetry, no cloud round-trip.
• 🌍 Composable on three planes. Plugins carry runnable workflows · skills carry the agent’s design taste · design systems carry the brand. All three are plain files anyone can author, version, and publish.
• 🔁 Refresh an existing codebase. Hand a git repo + DESIGN.md to the agent and it refactors your real components to the brand spec. Dedicated plugins migrate Figma / Pencil workflows into React / Next.js / Vue code.
• 🔒 Privacy by conviction. Everything runs where your data lives — your laptop, your team’s server, your Vercel project. When the network is needed, the BYOK proxy is SSRF-guarded.

Comparison

	Claude Design	Figma	Lovable / v0 / Bolt	Open Design
Open source	❌	❌	❌	✅ Apache-2.0
Self-host / desktop	❌	❌	❌	✅ macOS + Windows + Vercel
Agent-native (runs in your CLI)	Anthropic only	❌	Cloud agent only	✅ 21 CLIs + BYOK
Brand-grade DESIGN.md	Proprietary	Theme JSON	Limited tokens	✅ 150 systems shipped
Skills / plugins / templates	Closed	Plugin store	Closed	✅ 100+ skills · 261 plugins
HyperFrames (HTML→MP4)	❌	❌	❌	✅ First-class
Refresh an existing repo to brand	❌	❌	❌	✅ via agent + DESIGN.md
Minimum billing	Pro / Max / Team	Pro / Org	Pro / Team	BYOK · any compatible endpoint

---

Quick start

🖥️ Download the desktop app (recommended — zero config)

The fastest way to use Open Design. No Node, no pnpm, no clone.

• macOS (Apple Silicon · Intel x64) → open-design.ai or GitHub Releases
• Windows (x64) → open-design.ai or GitHub Releases
• Linux (AppImage, optional lane) → GitHub Releases

After install: the app auto-detects every coding-agent CLI on your PATH, loads 100+ skills and 150 design systems, and lets you type a brief in the entry view.

🤖 Install into your coding agent (no UI)

You can use Open Design without ever opening the GUI — call it as a skill, plugin, or MCP server inside Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi, and more.

# One-line install into the agent you're using:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | openclaw | antigravity | gemini
#         | pi | vibe | hermes | cline | kimi | trae | opencode

Then, inside the agent:

> Use open-design to generate a landing page with the Linear design system

The agent reads skills/, picks the right SKILL.md, binds the DESIGN.md you named, and emits an <artifact> previewable at http://localhost:7456.

🐳 Run with Docker

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://localhost:7456

macOS users: If the web UI shows Authorization: Bearer <OD_API_TOKEN> required, Docker Desktop bridge networking is the cause. See Docker Desktop on macOS for the fix.

🧑‍💻 Run from source

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Node ~24, pnpm 10.33.x. Windows users, see docs/windows-troubleshooting.md. Full quickstart, env vars, Nix flake, and packaged build flow → QUICKSTART.md.

A full workflow — from brief to artifact

brief → plugin → direction → design system → artifact → handoff → memory

1. A PM submits a brief. The plugin picker offers landing page · pitch deck · dashboard · social post · PM spec · OKR scorecard…
2. A designer (or the agent) locks the direction. No brand? Pick from 5 curated directions. Have a brand? Drop a screenshot / URL → the agent connects GitHub, imports Figma, and codifies a reusable DESIGN.md.
3. The agent emits the first <artifact>. Plugin + skill + DESIGN.md are bound. It streams into a sandboxed iframe, editable in place — not “regenerate from scratch.”
4. Hand off to engineering. The artifact is real HTML/CSS — drop it into Cursor, Codex, or Claude Code to keep building as code. Or export PPTX / PDF / MP4 straight to marketing.
5. Open Design gets smarter as you use it. Your screenshots, fonts, palettes, and confirmed artifacts accumulate as defaults for the next session. Less rework, less drift.

---

Use Open Design from your coding agent

Open Design ships a stdio MCP server and per-agent install scripts. Any MCP-compatible agent in another repo can read files from your local Open Design projects directly — tokens CSS, JSX components, entry HTML — as a structured API queryable by name. The agent always sees the live file, not a stale export.

# One-line install (16+ CLIs supported):
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

# Then the agent can:
od search-files "primary button"      # search files across projects
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug>                # latest rendered artifact
od plugin run web-prototype --brief "..."
od skill list --scenario marketing

Why MCP? Exporting and re-attaching a zip every iteration breaks flow. MCP exposes the design source directly — the agent always sees the live file.

For an agent starting from scratch, the installer places ~/.config/<agent>/open-design.json (or the platform equivalent) plus a copy-paste MCP snippet. Cursor gets a one-click deeplink; Claude Code gets a claude mcp add-json one-liner; every other agent gets JSON in the schema its config expects. Full per-agent flow → Settings → MCP server in the desktop app, or docs/agent-adapters.md.

Security model. Read-only by default, the daemon binds to 127.0.0.1, and SSRF is blocked at the proxy edge. LAN exposure requires an explicit OD_BIND_HOST plus OD_ALLOWED_ORIGINS. Connector credentials and live-artifact preview routes stay loopback-only regardless.

---

Skills

100+ skills ship in the box — each is a folder under skills/ following the Claude Code SKILL.md convention, extended with an od: frontmatter (mode, platform, scenario, preview.type, design_system.requires, default_for, fidelity, example_prompt). Drop a folder in, restart the daemon, it appears in the picker.

Two modes anchor the catalog: prototype (web/mobile/desktop single-page artifacts) and deck (horizontal-swipe presentations). Also image, video, audio, template, design-system, and utility modes. The scenario field groups them by audience: design · marketing · operation · engineering · product · finance · hr · sale · personal.

Skill	Mode	Scenario	What it produces
web-prototype	prototype	design	Default landing page / hero
saas-landing	prototype	marketing	Hero / features / pricing / CTA
dashboard	prototype	operation	Admin / analytics (with sidebar)
mobile-app	prototype	design	iPhone 15 Pro / Pixel framed app
mobile-onboarding	prototype	design	Splash · value-prop · sign-in flow
social-carousel	prototype	marketing	3-card 1080×1080 carousel
email-marketing	prototype	marketing	Table-fallback-safe brand email
magazine-poster	prototype	marketing	Single-page magazine layout
motion-frames	prototype	marketing	Looping CSS motion hero
sprite-animation	prototype	marketing	8-bit pixel animated explainer
pm-spec	prototype	product	PM spec doc (with TOC + decision log)
team-okrs	prototype	product	OKR scorecard
eng-runbook	prototype	engineering	Incident runbook
finance-report	prototype	finance	Exec finance summary
hr-onboarding	prototype	hr	Role onboarding plan
guizang-ppt	deck	marketing	Magazine-style web PPT (deck default)
html-ppt-*	deck	marketing	15 deck templates × 36 themes (master template in design-templates/html-ppt/)
hyperframes	video	marketing	HTML → MP4 motion graphics (HeyGen OSS framework)
critique	utility	design	Five-dimensional self-critique scoresheet
tweaks	utility	design	AI-emitted tweaks-panel manifest

Full skill protocol → docs/skills-protocol.md. Skill registry endpoint: GET /api/skills.

---

Design Systems

150 brand-grade DESIGN.md systems ship with the repo — each a single Markdown file with a 9-section schema (color, typography, spacing, layout, components, motion, voice, brand, anti-patterns), from VoltAgent/awesome-design-md. Switch a system → the next render uses the new tokens. No theme JSON.

Full catalog (click to expand)

AI & LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

Developer Tools — cursor · vercel · linear-app · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent

Productivity — notion · figma · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast

Fintech — stripe · coinbase · binance · kraken · mastercard · revolut · wise

E-commerce — shopify · airbnb · uber · nike · starbucks · pinterest

Media — spotify · playstation · wired · theverge · meta

Automotive — tesla · bmw · ferrari · lamborghini · bugatti · renault

Other — apple · ibm · nvidia · vodafone · resend · spacex

Starters — default (Neutral Modern) · warm-editorial

Re-import the library via scripts/sync-design-systems.ts. Add your own brand → drop a DESIGN.md into design-systems/<brand>/. Full guide → design-systems/README.md.

---

Plugins

261 official plugins live in plugins/_official/. Each plugin is a portable agent-skill folder — a SKILL.md (readable by any agent that supports Agent Skills), plus an optional open-design.json manifest that gives Open Design marketplace metadata, inputs, previews, pipelines, and capability declarations. Jump straight to a category:

Category	Count	Contents
scenarios/	11	Complete design scenarios — od-default, od-design-refine, od-figma-migration, od-code-migration, od-react-export, od-nextjs-export, od-vue-export, od-media-generation, od-new-generation, od-tune-collab, od-plugin-authoring
image-templates/	45	One-shot image prompts — editorial, cinematic, product, portrait
video-templates/	50	HyperFrames / Seedance / Veo motion templates
design-systems/	142	Brand DESIGN.md wrapped as plugins
atoms/	13	Reusable UI fragments (buttons, heroes, KPI cards)
examples/	140	Remixable reference outputs

Also plugins/community/ for community plugins and plugins/registry/ for the publishing flow.

What plugins can do

• 🤖 Run in any coding agent — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi… through the same skill protocol the agent already knows.
• 🔁 Migrate Figma / Pencil workflows → React, Next.js, or Vue source. See od-figma-migration.
• 🛠️ Refresh an existing codebase to a brand spec — point a plugin at a git repo + DESIGN.md, get a PR. See od-code-migration.
• 💾 Persist custom workflows — your team’s reusable templates sit next to the shipped ones.

Using plugins

Plugins are at full parity across the web UI and the od CLI — same /api/plugins endpoints, pick whichever fits.

In the desktop / web app: open the Plugin page to browse the marketplace and click Install; inside a project’s Studio, plugins appear as composer chips you click to apply (with the inputs they declare).

On the command line (runs without a UI — this is the path external agents use):

od plugin list                       # list installed plugins (--task-kind / --mode / --tag filters)
od plugin search "landing page"      # search by keyword
od plugin info od-default            # inspect a plugin's metadata, inputs, capabilities
od plugin install od-figma-migration # install from a registry; also accepts ./local-folder or an https://… link
od plugin apply od-default --input brief="a one-page pitch for our seed round"
od plugin upgrade od-default         # upgrade
od plugin uninstall od-default       # uninstall

Every command supports --json, so you can pipe it through jq / xargs into automation.

Building a plugin

A plugin needs only a SKILL.md at minimum; to list it in the Open Design marketplace, add an open-design.json:

my-plugin/
├── SKILL.md            ← required: YAML frontmatter (name · description) + trigger phrasing + workflow (aim for < 500 lines)
├── open-design.json    ← needed to list: marketplace metadata + inputs + pipeline + capabilities
├── README.md           ← optional: usage, install, registry links
├── preview/            ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/           ← optional: concrete use cases

Core open-design.json fields: specVersion (currently 1.0.0), name (stable ID), version (semver), compat.agentSkills[].path (points at ./SKILL.md), od.kind (skill / scenario / atom / bundle), od.taskKind (new-generation / figma-migration / code-migration / tune-collab), od.mode (the output surface, e.g. prototype / deck / live-artifact / image / video / hyperframes / audio / design-system / scenario), od.capabilities[] (declare the minimum — a restricted install grants only prompt:inject by default), od.inputs[] (apply-time parameters).

Scaffold + validate locally:

od plugin scaffold --id my-plugin --title "My Plugin"   # generate the skeleton
od plugin validate ./my-plugin                          # check manifest / file layout
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck

Full field set and runtime contract → plugins/spec/SPEC.md; developing a plugin with a coding agent → plugins/spec/AGENT-DEVELOPMENT.md; copy-paste minimal templates → plugins/spec/examples/.

Contributing a plugin

1. Drop the plugin folder into plugins/community/ (third-party plugins), or — to ship it bundled with Open Design — into the matching tier of plugins/_official/.
2. Pass validation: od plugin validate, pnpm guard, pnpm --filter @open-design/plugin-runtime typecheck.
3. Fill the PR using the template in plugins/spec/CONTRIBUTING.md (ID, version, lane, mode, capabilities, trigger examples; attach a screenshot / preview for visual plugins).
4. To publish to an external registry (skills.sh / ClawHub / standalone GitHub) → plugins/spec/PUBLISHING-REGISTRIES.md.

Plugin registry endpoint: GET /api/plugins. Directory overview → plugins/README.md (简体中文).

---

Architecture

┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐
│  chat · file workspace · iframe preview · settings · import · MCP     │
└──────────────┬─────────────────────────────────────┬─────────────────┘
               │ /api/*                              │
               ▼                                     ▼
   ┌─────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  local daemon (Express+SQLite)  │   ─→ any OpenAI-compatible BYOK,
   │                                  │       SSRF-guarded at the edge
   │  /api/skills    /api/plugins    │
   │  /api/design-systems            │
   │  /api/chat (SSE)   /api/proxy/* │
   │  /api/projects/:id/files/...    │
   │  /api/artifacts/{save,lint}     │
   │  /api/import/claude-design      │
   │  MCP stdio server                │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: .od/projects/<id> })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · copilot · openclaw · antigravity ·│
   │  gemini · opencode · qwen · qoder · hermes (ACP) · kimi (ACP) ·    │
   │  pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek     │
   │  reads SKILL.md + DESIGN.md, writes artifacts to disk             │
   └──────────────────────────────────────────────────────────────────┘

| Layer | Stack ||—|—| | Frontend | Next.js 16 App Router + React 18 + TypeScript | | Daemon | Node 24 · Express · SSE streaming · better-sqlite3 | | Storage | Files at .od/projects/<id>/ + SQLite at .od/app.sqlite + media-config.json (gitignored, auto-created). OD_DATA_DIR relocates everything. | | Preview | Sandboxed srcdoc iframe + streaming <artifact> parser | | Export | HTML (inlined) · PDF (browser print) · PPTX (agent-driven) · ZIP · Markdown · MP4 (HyperFrames) | | Desktop | Electron shell + sandboxed renderer + sidecar IPC (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN) | | Lifecycle | One entry point: pnpm tools-dev (start / stop / run / status / logs / inspect / check) |

Full architecture → docs/architecture.md. Skill protocol → docs/skills-protocol.md. Agent adapter contract → docs/agent-adapters.md.

---

Roadmap

• Daemon + 21 coding-agent CLI adapters + skill registry + design-system catalog
• Web app + chat + question form + 5-direction picker + todo progress + sandboxed preview
• 100+ skills · 150 design systems · 5 visual directions · 5 device frames
• SQLite-backed projects · conversations · messages · tabs · templates
• Multi-provider BYOK proxy (/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream) + SSRF guard
• Claude Design ZIP import (/api/import/claude-design)
• Sidecar protocol + Electron desktop + IPC automation
• Artifact lint API + 5-dim self-critique pre-emit gate
• 0.8.0 — plugin marketplace infrastructure (261 official plugins, manifest spec, per-agent install scripts)
• 0.9.0 — Open Design AMR (official Model Router built into the app: zero config, one-click sign-in)
• Packaged Electron builds — macOS (Apple Silicon + Intel) + Windows (x64) + Linux AppImage (optional lane)
• Comment-mode surgical edits — partially shipped; reliable targeted patching in progress
• AI-emitted tweaks panel UX — not yet implemented
• npx od init to scaffold a project with DESIGN.md
• Plugin SDK + od plugin {add,list,remove,test,publish} CLI
• Figma / Pencil → React / Next / Vue migration plugins (alpha)
• Refresh-existing-codebase plugin (point at a git repo + DESIGN.md)

Phased delivery → docs/roadmap.md.

---

Community

Real people behind every channel.

• 💬 Discord — daily chat, plugin sharing, questions → discord.gg/qhbcCH8Am4
• 🐦 X / Twitter — release notes, milestones, behind the scenes → @nexudotio
• 🗣️ GitHub Discussions — deep Q&A, RFCs, “show your work” → Discussions
• 🐛 GitHub Issues — bug reports, feature requests → Issues

The good-first-issue and help-wanted labels are the easiest way in.

---

Contributing

Open Design keeps moving because contributors — designers, engineers, prompt authors — keep showing up. Many of the most-used skills, design systems, and plugins were written by people outside the core team.

🎯 Where to start (max leverage, min change)

Want to ship…	How	Where
A new skill	Drop a folder with SKILL.md + assets/ + references/	skills/ · spec in docs/skills-protocol.md
A new design system	Drop a DESIGN.md using the 9-section schema	design-systems/<brand>/
A new plugin	Drop open-design.json + manifest under a category folder	plugins/community/ · spec in plugins/spec/SPEC.md · agent dev guide in plugins/spec/AGENT-DEVELOPMENT.md
Support a new coding-agent CLI	One adapter entry + stream parser	apps/daemon/src/agents.ts
Fix a bug or polish UI	Browse the good-first-issue label	Issues →
Translate the docs	Update the README.<lang>.md files	TRANSLATIONS.md

🤖 Contributing as an agent

If you are the agent reading this, the fastest path is:

# 1. Boot locally
git clone https://github.com/nexu-io/open-design.git
cd open-design && corepack enable && pnpm install
pnpm tools-dev run web

# 2. Find a good-first-issue and assign yourself
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number>   # create a branch and worktree

# 3. Make the change, run the checks
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test

# 4. Open the PR
gh pr create --fill

Full agent-friendly contribution flow, code style, and PR bar → CONTRIBUTING.md (Deutsch · Français · 简体中文 · 日本語 · Português).

🏅 Open Design Fellow program

We’re recruiting Open Design Fellows around the world — Fellows shape the product alongside the core team, represent Open Design officially in their region, and grow the community locally, backed by funded support ($1,000 / MR), free LLM credits, and a direct review track. Details → MAINTAINERS.md and the announcement on Discord.

---

Maintainers

They carry a lot of the load — daily maintenance, review, and community support.

@Nagendhra-web Maintainer

@Sid-Qin Maintainer

@YOMXXX Maintainer

Maintainer rules, promotion criteria, and the exit protocol → MAINTAINERS.md (also Deutsch · Français · 简体中文 · 日本語 · Português).

Contributors

Thanks to everyone who has taken part — code, docs, feedback, a sharp issue, a new skill, a new design system.

---

Repository activity

The SVG above is regenerated daily by .github/workflows/metrics.yml using lowlighter/metrics.

---

Star us

If this saved you thirty minutes, give it a ★. Stars don’t pay rent — but they tell the next designer, agent, and contributor that this experiment is worth their attention. One click, three seconds, a real signal.

---

References & lineage

Project	Role
Claude Design	The closed-source product this repo is the open-source alternative to.
alchaincyf/huashu-design	The design-philosophy compass — junior-designer workflow, brand-asset protocol, anti-AI-slop checklist, five-dimensional critique.
op7418/guizang-ppt-skill	The magazine-style web PPT skill, bundled verbatim under design-templates/guizang-ppt/. Default for deck mode.
lewislulu/html-ppt-skill	The HTML PPT Studio family — 15 deck templates, 36 themes, 31 page layouts, animation runtime, magnetic-card presenter mode.
OpenCoworkAI/open-codesign	The first open-source Claude Design alternative; UX patterns we borrow (streaming-artifact loop, sandboxed iframe, live agent panel).
multica-ai/multica	The daemon + adapter architecture — PATH-scan agent detection, local daemon as the only privileged process.
VoltAgent/awesome-design-md	Source of the 9-section DESIGN.md schema and 70 product systems.
bergside/awesome-design-skills	Source of the 57 design skills added under design-systems/.
heygen-com/hyperframes	The HTML→MP4 motion-graphics framework, integrated as the first-class hyperframes-html in Open Design.
Claude Code skills	The SKILL.md convention we adopt verbatim.

Detailed provenance → docs/references.md.

License

Apache-2.0. The bundled design-templates/guizang-ppt/ retains its original LICENSE (MIT, @op7418). The bundled design-templates/html-ppt/ retains its original LICENSE (MIT, @lewislulu).

Tom Huang (@tuturetom): 正式开源 html-video 🚀 html版剪映来了！

你的 Agent 现在可以通过写 html轻松做出世界级水准的产品宣传、知识解说视频，成本极低！🔥

历时 3 天，3 万行代码！支持20多套顶尖视频风格模板，分页编辑，mp4 导出，支持包括Claude Code、Codex、hermes、cursor等主流 Agent接入即用💥地址见评论区