[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-602":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":47,"readmeContent":48,"aiSummary":49,"trendingCount":16,"starSnapshotCount":16,"syncStatus":50,"lastSyncTime":51,"discoverSource":52},602,"open-design","nexu-io\u002Fopen-design","nexu-io","🎨 Local-first, open-source Claude Design alternative. 🖥️ Native desktop app. ⚡ 259+ Skills · ✨ 142+ Design Systems 🖼️ Web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML\u002FPDF\u002FPPTX\u002FMP4 export 🤖 Claude Code \u002F OpenClaw \u002F Codex \u002F Cursor \u002F OpenCode \u002F Qwen \u002F Copilot \u002F Hermes \u002F Kimi & 17+ CLIs.","https:\u002F\u002Fopen-design.ai",null,"TypeScript",60098,6756,194,213,0,709,4213,28163,3431,120,"Apache License 2.0",false,"main",true,[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46],"agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding","2026-06-07 04:00:29","# Open Design\n\n> **The open-source alternative to [Claude Design][cd].** 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.\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"docs\u002Fassets\u002Fbanner.png\" alt=\"Open Design — editorial cover: design with the agent on your laptop\" width=\"100%\" \u002F>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\u002Fstargazers\">\u003Cimg alt=\"Stars\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fnexu-io\u002Fopen-design?style=for-the-badge&labelColor=0d1117&color=ffd700&logo=github&logoColor=white\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\u002Fnetwork\u002Fmembers\">\u003Cimg alt=\"Forks\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fnexu-io\u002Fopen-design?style=for-the-badge&labelColor=0d1117&color=2ecc71&logo=github&logoColor=white\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\u002Fissues\">\u003Cimg alt=\"Issues\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fnexu-io\u002Fopen-design?style=for-the-badge&labelColor=0d1117&color=ff6b6b&logo=github&logoColor=white\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\u002Fpulls\">\u003Cimg alt=\"Pull Requests\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues-pr\u002Fnexu-io\u002Fopen-design?style=for-the-badge&labelColor=0d1117&color=9b59b6&logo=github&logoColor=white\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\u002Fgraphs\u002Fcontributors\">\u003Cimg alt=\"Contributors\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fcontributors\u002Fnexu-io\u002Fopen-design?style=for-the-badge&labelColor=0d1117&color=3498db&logo=github&logoColor=white\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\u002Fcommits\u002Fmain\">\u003Cimg alt=\"Commit activity\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fcommit-activity\u002Fm\u002Fnexu-io\u002Fopen-design?style=for-the-badge&labelColor=0d1117&color=e67e22&logo=git&logoColor=white\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\u002Fcommits\u002Fmain\">\u003Cimg alt=\"Last commit\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flast-commit\u002Fnexu-io\u002Fopen-design?style=for-the-badge&labelColor=0d1117&color=8e44ad&logo=git&logoColor=white\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fopen-design.ai\u002F\">\u003Cimg alt=\"Download\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fdownload-open--design.ai-ff6b35?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\u002Freleases\">\u003Cimg alt=\"Latest release\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fv\u002Frelease\u002Fnexu-io\u002Fopen-design?style=flat-square&color=blueviolet&label=release&include_prereleases&display_name=tag\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"LICENSE\">\u003Cimg alt=\"License\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-Apache%202.0-blue.svg?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#supported-coding-agents\">\u003Cimg alt=\"Agents\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fagents-16%20CLIs%20%2B%20BYOK%20proxy-black?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#design-systems\">\u003Cimg alt=\"Design systems\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fdesign%20systems-72-orange?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"#skills\">\u003Cimg alt=\"Skills\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fskills-31-teal?style=flat-square\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002FqhbcCH8Am4\">\u003Cimg alt=\"Discord\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fdiscord-join-5865F2?style=flat-square&logo=discord&logoColor=white\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"QUICKSTART.md\">\u003Cimg alt=\"Quickstart\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fquickstart-3%20commands-green?style=flat-square\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\u003Cb>English\u003C\u002Fb> · \u003Ca href=\"README.es.md\">Español\u003C\u002Fa> · \u003Ca href=\"README.pt-BR.md\">Português (Brasil)\u003C\u002Fa> · \u003Ca href=\"README.de.md\">Deutsch\u003C\u002Fa> · \u003Ca href=\"README.fr.md\">Français\u003C\u002Fa> · \u003Ca href=\"README.zh-CN.md\">简体中文\u003C\u002Fa> · \u003Ca href=\"README.zh-TW.md\">繁體中文\u003C\u002Fa> · \u003Ca href=\"README.ko.md\">한국어\u003C\u002Fa> · \u003Ca href=\"README.ja-JP.md\">日本語\u003C\u002Fa> · \u003Ca href=\"README.ar.md\">العربية\u003C\u002Fa> · \u003Ca href=\"README.ru.md\">Русский\u003C\u002Fa> · \u003Ca href=\"README.uk.md\">Українська\u003C\u002Fa>\u003C\u002Fp>\n\n---\n\n## Why this exists\n\nAnthropic's [Claude Design][cd] (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.\n\n**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.\n\nType `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 `\u003Cartifact>` that renders in a sandboxed iframe seconds later.\n\nThat'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.\n\nOD stands on four open-source shoulders:\n\n- [**`alchaincyf\u002Fhuashu-design`**](https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-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\u002Fweb\u002Fsrc\u002Fprompts\u002Fdiscovery.ts`](apps\u002Fweb\u002Fsrc\u002Fprompts\u002Fdiscovery.ts).\n- [**`op7418\u002Fguizang-ppt-skill`**](https:\u002F\u002Fgithub.com\u002Fop7418\u002Fguizang-ppt-skill) — the deck mode. Bundled verbatim under [`skills\u002Fguizang-ppt\u002F`](skills\u002Fguizang-ppt\u002F) with original LICENSE preserved; magazine-style layouts, WebGL hero, P0\u002FP1\u002FP2 checklists.\n- [**`OpenCoworkAI\u002Fopen-codesign`**](https:\u002F\u002Fgithub.com\u002FOpenCoworkAI\u002Fopen-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 \u002F PDF \u002F PPTX \u002F ZIP \u002F Markdown). We deliberately diverge on form factor — they are a desktop Electron app bundling [`pi-ai`][piai]; we are a web app + local daemon that delegates to your existing CLI.\n- [**`multica-ai\u002Fmultica`**](https:\u002F\u002Fgithub.com\u002Fmultica-ai\u002Fmultica) — the daemon-and-runtime architecture. PATH-scan agent detection, the local daemon as the only privileged process, the agent-as-teammate worldview.\n\n## At a glance\n\n| | What you get |\n|---|---|\n| **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 |\n| **BYOK fallback** | Protocol-specific API proxy at `\u002Fapi\u002Fproxy\u002F{anthropic,openai,azure,google}\u002Fstream` — paste `baseUrl` + `apiKey` + `model`, choose Anthropic \u002F OpenAI \u002F Azure OpenAI \u002F Google Gemini, and the daemon normalizes SSE back to the same chat stream. Internal-IP\u002FSSRF blocked at the daemon edge. |\n| **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`][acd2], plus 57 design skills from [`awesome-design-skills`][ads] added directly under `design-systems\u002F` |\n| **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 \u002F marketing \u002F operation \u002F engineering \u002F product \u002F finance \u002F hr \u002F sale \u002F personal. |\n| **Media generation** | Image · video · audio surfaces ship alongside the design loop. **gpt-image-2** (Azure \u002F OpenAI) for posters, avatars, infographics, illustrated maps · **Seedance 2.0** (ByteDance) for cinematic 15s text-to-video and image-to-video · **HyperFrames** ([heygen-com\u002Fhyperframes](https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes)) 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\u002F`](prompt-templates\u002F), with preview thumbnails and source attribution. Same chat surface as code; outputs a real `.mp4` \u002F `.png` chip into the project workspace. |\n| **Visual directions** | 5 curated schools (Editorial Monocle · Modern Minimal · Warm Soft · Tech Utility · Brutalist Experimental) — each ships a deterministic OKLch palette + font stack ([`apps\u002Fweb\u002Fsrc\u002Fprompts\u002Fdirections.ts`](apps\u002Fweb\u002Fsrc\u002Fprompts\u002Fdirections.ts)) |\n| **Device frames** | iPhone 15 Pro · Pixel · iPad Pro · MacBook · Browser Chrome — pixel-accurate, shared across skills under [`assets\u002Fframes\u002F`](assets\u002Fframes\u002F) |\n| **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 \u002F prompt-file) on every adapter |\n| **Imports** | Drop a [Claude Design][cd] export ZIP onto the welcome dialog — `POST \u002Fapi\u002Fimport\u002Fclaude-design` parses it into a real project so your agent can keep editing where Anthropic left off |\n| **Persistence** | SQLite at `.od\u002Fapp.sqlite`: projects · conversations · messages · tabs · saved templates. Reopen tomorrow, todo card and open files are exactly where you left them. |\n| **Lifecycle** | One entry point: `pnpm tools-dev` (start \u002F stop \u002F run \u002F status \u002F logs \u002F inspect \u002F check) — boots daemon + web (+ desktop) under typed sidecar stamps |\n| **Desktop** | Optional Electron shell with sandboxed renderer + sidecar IPC (STATUS \u002F EVAL \u002F SCREENSHOT \u002F CONSOLE \u002F CLICK \u002F SHUTDOWN) — drives `tools-dev inspect desktop screenshot` for E2E |\n| **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](https:\u002F\u002Fopen-design.ai\u002F) or the [latest release](https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\u002Freleases) |\n| **License** | Apache-2.0 |\n\n[acd2]: https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md\n[ads]: https:\u002F\u002Fgithub.com\u002Fbergside\u002Fawesome-design-skills\n\n## Demo\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\u003Cimg src=\"docs\u002Fscreenshots\u002F01-entry-view.png\" alt=\"01 · Entry view\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Entry view\u003C\u002Fb> — pick a skill, pick a design system, type the brief. The same surface for prototypes, decks, mobile apps, dashboards, and editorial pages.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\u003Cimg src=\"docs\u002Fscreenshots\u002F02-question-form.png\" alt=\"02 · Turn-1 discovery form\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Turn-1 discovery form\u003C\u002Fb> — 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.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\u003Cimg src=\"docs\u002Fscreenshots\u002F03-direction-picker.png\" alt=\"03 · Direction picker\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Direction picker\u003C\u002Fb> — when the user has no brand, the agent emits a second form with 5 curated directions (Monocle \u002F Modern Minimal \u002F Tech Utility \u002F Brutalist \u002F Soft Warm). One radio click → a deterministic palette + font stack, no model freestyle.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\u003Cimg src=\"docs\u002Fscreenshots\u002F04-todo-progress.png\" alt=\"04 · Live todo progress\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Live todo progress\u003C\u002Fb> — the agent's plan streams as a live card. \u003Ccode>in_progress\u003C\u002Fcode> → \u003Ccode>completed\u003C\u002Fcode> updates land in real time. The user can redirect cheaply, mid-flight.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\u003Cimg src=\"docs\u002Fscreenshots\u002F05-preview-iframe.png\" alt=\"05 · Sandboxed preview\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Sandboxed preview\u003C\u002Fb> — every \u003Ccode><artifact>\u003C\u002Fcode> renders in a clean srcdoc iframe. Editable in place via the file workspace; downloadable as HTML, PDF, ZIP.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\u003Cimg src=\"docs\u002Fscreenshots\u002F06-design-systems-library.png\" alt=\"06 · 72-system library\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>72-system library\u003C\u002Fb> — every product system shows its 4-color signature. Click for the full \u003Ccode>DESIGN.md\u003C\u002Fcode>, swatch grid, and live showcase.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\u003Cimg src=\"docs\u002Fscreenshots\u002F07-magazine-deck.png\" alt=\"07 · Magazine deck\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Deck mode (guizang-ppt)\u003C\u002Fb> — the bundled \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fop7418\u002Fguizang-ppt-skill\">\u003Ccode>guizang-ppt-skill\u003C\u002Fcode>\u003C\u002Fa> drops in unchanged. Magazine layouts, WebGL hero backgrounds, single-file HTML output, PDF export.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\u003Cimg src=\"docs\u002Fscreenshots\u002F08-mobile-app.png\" alt=\"08 · Mobile prototype\" \u002F>\u003Cbr\u002F>\n\u003Csub>\u003Cb>Mobile prototype\u003C\u002Fb> — pixel-accurate iPhone 15 Pro chrome (Dynamic Island, status bar SVGs, home indicator). Multi-screen prototypes use the shared \u003Ccode>\u002Fframes\u002F\u003C\u002Fcode> assets so the agent never re-draws a phone.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## Skills\n\n**31 skills ship in the box.** Each is a folder under [`skills\u002F`](skills\u002F) following the Claude Code [`SKILL.md`][skill] 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\u002Fdaemon\u002Fsrc\u002Fskills.ts`](apps\u002Fdaemon\u002Fsrc\u002Fskills.ts)).\n\nTwo 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`.\n\n### Showcase examples\n\nThe 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.\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"skills\u002Fdating-web\u002F\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fskills\u002Fdating-web.png\" alt=\"dating-web\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\n\u003Csub>\u003Cb>\u003Ca href=\"skills\u002Fdating-web\u002F\">\u003Ccode>dating-web\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fb> · \u003Ci>prototype\u003C\u002Fi>\u003Cbr\u002F>Consumer dating \u002F matchmaking dashboard — left rail nav, ticker bar, KPIs, 30-day mutual-matches chart, editorial typography.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"skills\u002Fdigital-eguide\u002F\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fskills\u002Fdigital-eguide.png\" alt=\"digital-eguide\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\n\u003Csub>\u003Cb>\u003Ca href=\"skills\u002Fdigital-eguide\u002F\">\u003Ccode>digital-eguide\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fb> · \u003Ci>template\u003C\u002Fi>\u003Cbr\u002F>Two-spread digital e-guide — cover (title, author, TOC teaser) + lesson spread with pull-quote and step list. Creator \u002F lifestyle tone.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"skills\u002Femail-marketing\u002F\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fskills\u002Femail-marketing.png\" alt=\"email-marketing\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\n\u003Csub>\u003Cb>\u003Ca href=\"skills\u002Femail-marketing\u002F\">\u003Ccode>email-marketing\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fb> · \u003Ci>prototype\u003C\u002Fi>\u003Cbr\u002F>Brand product-launch HTML email — masthead, hero image, headline lockup, CTA, specs grid. Centered single-column, table-fallback safe.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"skills\u002Fgamified-app\u002F\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fskills\u002Fgamified-app.png\" alt=\"gamified-app\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\n\u003Csub>\u003Cb>\u003Ca href=\"skills\u002Fgamified-app\u002F\">\u003Ccode>gamified-app\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fb> · \u003Ci>prototype\u003C\u002Fi>\u003Cbr\u002F>Three-frame gamified mobile-app prototype on a dark showcase stage — cover, today's quests with XP ribbons + level bar, quest detail.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"skills\u002Fmobile-onboarding\u002F\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fskills\u002Fmobile-onboarding.png\" alt=\"mobile-onboarding\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\n\u003Csub>\u003Cb>\u003Ca href=\"skills\u002Fmobile-onboarding\u002F\">\u003Ccode>mobile-onboarding\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fb> · \u003Ci>prototype\u003C\u002Fi>\u003Cbr\u002F>Three-frame mobile onboarding flow — splash, value-prop, sign-in. Status bar, swipe dots, primary CTA.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"skills\u002Fmotion-frames\u002F\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fskills\u002Fmotion-frames.png\" alt=\"motion-frames\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\n\u003Csub>\u003Cb>\u003Ca href=\"skills\u002Fmotion-frames\u002F\">\u003Ccode>motion-frames\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fb> · \u003Ci>prototype\u003C\u002Fi>\u003Cbr\u002F>Single-frame motion-design hero with looping CSS animations — rotating type ring, animated globe, ticking timer. Hand-off ready for HyperFrames.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"skills\u002Fsocial-carousel\u002F\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fskills\u002Fsocial-carousel.png\" alt=\"social-carousel\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\n\u003Csub>\u003Cb>\u003Ca href=\"skills\u002Fsocial-carousel\u002F\">\u003Ccode>social-carousel\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fb> · \u003Ci>prototype\u003C\u002Fi>\u003Cbr\u002F>Three-card 1080×1080 social-media carousel — cinematic panels with display headlines that connect across the series, brand mark, loop affordance.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"skills\u002Fsprite-animation\u002F\">\u003Cimg src=\"docs\u002Fscreenshots\u002Fskills\u002Fsprite-animation.png\" alt=\"sprite-animation\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\n\u003Csub>\u003Cb>\u003Ca href=\"skills\u002Fsprite-animation\u002F\">\u003Ccode>sprite-animation\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fb> · \u003Ci>prototype\u003C\u002Fi>\u003Cbr\u002F>Pixel \u002F 8-bit animated explainer slide — full-bleed cream stage, animated pixel mascot, kinetic Japanese display type, looping CSS keyframes.\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n### Design & marketing surfaces (prototype mode)\n\n| Skill | Platform | Scenario | What it produces |\n|---|---|---|---|\n| [`web-prototype`](skills\u002Fweb-prototype\u002F) | desktop | design | Single-page HTML — landings, marketing, hero pages (default for prototype) |\n| [`saas-landing`](skills\u002Fsaas-landing\u002F) | desktop | marketing | Hero \u002F features \u002F pricing \u002F CTA marketing layout |\n| [`dashboard`](skills\u002Fdashboard\u002F) | desktop | operation | Admin \u002F analytics with sidebar + dense data layout |\n| [`pricing-page`](skills\u002Fpricing-page\u002F) | desktop | sale | Standalone pricing + comparison tables |\n| [`docs-page`](skills\u002Fdocs-page\u002F) | desktop | engineering | 3-column documentation layout |\n| [`blog-post`](skills\u002Fblog-post\u002F) | desktop | marketing | Editorial long-form |\n| [`mobile-app`](skills\u002Fmobile-app\u002F) | mobile | design | iPhone 15 Pro \u002F Pixel framed app screen(s) |\n| [`mobile-onboarding`](skills\u002Fmobile-onboarding\u002F) | mobile | design | Multi-screen mobile onboarding flow (splash · value-prop · sign-in) |\n| [`gamified-app`](skills\u002Fgamified-app\u002F) | mobile | personal | Three-frame gamified mobile-app prototype |\n| [`email-marketing`](skills\u002Femail-marketing\u002F) | desktop | marketing | Brand product-launch HTML email (table-fallback safe) |\n| [`social-carousel`](skills\u002Fsocial-carousel\u002F) | desktop | marketing | 3-card 1080×1080 social carousel |\n| [`magazine-poster`](skills\u002Fmagazine-poster\u002F) | desktop | marketing | Single-page magazine-style poster |\n| [`motion-frames`](skills\u002Fmotion-frames\u002F) | desktop | marketing | Motion-design hero with looping CSS animations |\n| [`sprite-animation`](skills\u002Fsprite-animation\u002F) | desktop | marketing | Pixel \u002F 8-bit animated explainer slide |\n| [`dating-web`](skills\u002Fdating-web\u002F) | desktop | personal | Consumer dating dashboard mockup |\n| [`digital-eguide`](skills\u002Fdigital-eguide\u002F) | desktop | marketing | Two-spread digital e-guide (cover + lesson) |\n| [`wireframe-sketch`](skills\u002Fwireframe-sketch\u002F) | desktop | design | Hand-drawn ideation sketch — for the \"show something visible early\" pass |\n| [`critique`](skills\u002Fcritique\u002F) | desktop | design | Five-dimensional self-critique scoresheet (Philosophy · Hierarchy · Detail · Function · Innovation) |\n| [`tweaks`](skills\u002Ftweaks\u002F) | desktop | design | AI-emitted tweaks panel — the model surfaces the parameters worth nudging |\n\n### Deck surfaces (deck mode)\n\n| Skill | Default for | What it produces |\n|---|---|---|\n| [`guizang-ppt`](skills\u002Fguizang-ppt\u002F) | **default** for deck | Magazine-style web PPT — bundled verbatim from [op7418\u002Fguizang-ppt-skill][guizang], original LICENSE preserved |\n| [`simple-deck`](skills\u002Fsimple-deck\u002F) | — | Minimal horizontal-swipe deck |\n| [`replit-deck`](skills\u002Freplit-deck\u002F) | — | Product-walkthrough deck (Replit-style) |\n| [`weekly-update`](skills\u002Fweekly-update\u002F) | — | Team weekly cadence as a swipe deck (progress · blockers · next) |\n\n### Office & operations surfaces (prototype mode, document-flavored scenarios)\n\n| Skill | Scenario | What it produces |\n|---|---|---|\n| [`pm-spec`](skills\u002Fpm-spec\u002F) | product | PM specification doc with TOC + decision log |\n| [`team-okrs`](skills\u002Fteam-okrs\u002F) | product | OKR scoresheet |\n| [`meeting-notes`](skills\u002Fmeeting-notes\u002F) | operation | Meeting decision log |\n| [`kanban-board`](skills\u002Fkanban-board\u002F) | operation | Board snapshot |\n| [`eng-runbook`](skills\u002Feng-runbook\u002F) | engineering | Incident runbook |\n| [`finance-report`](skills\u002Ffinance-report\u002F) | finance | Exec finance summary |\n| [`invoice`](skills\u002Finvoice\u002F) | finance | Single-page invoice |\n| [`hr-onboarding`](skills\u002Fhr-onboarding\u002F) | hr | Role onboarding plan |\n\nAdding a skill takes one folder. Read [`docs\u002Fskills-protocol.md`](docs\u002Fskills-protocol.md) for the extended frontmatter, fork an existing skill, restart the daemon, it appears in the picker. The catalog endpoint is `GET \u002Fapi\u002Fskills`; per-skill seed assembly (template + side-file references) lives at `GET \u002Fapi\u002Fskills\u002F:id\u002Fexample`.\n\n## Six load-bearing ideas\n\n### 1 · We don't ship an agent. Yours is good enough.\n\nThe daemon scans your `PATH` for [`claude`](https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-code), [`codex`](https:\u002F\u002Fgithub.com\u002Fopenai\u002Fcodex), `devin`, [`cursor-agent`](https:\u002F\u002Fwww.cursor.com\u002Fcli), [`gemini`](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fgemini-cli), [`opencode`](https:\u002F\u002Fopencode.ai\u002F), [`qwen`](https:\u002F\u002Fgithub.com\u002FQwenLM\u002Fqwen-code), `qodercli`, [`copilot`](https:\u002F\u002Fgithub.com\u002Ffeatures\u002Fcopilot\u002Fcli), `hermes`, `kimi`, [`pi`](https:\u002F\u002Fgithub.com\u002Fbadlogic\u002Fpi-mono\u002Ftree\u002Fmain\u002Fpackages\u002Fcoding-agent), [`kiro-cli`](https:\u002F\u002Fkiro.dev), `kilo`, [`vibe-acp`](https:\u002F\u002Fgithub.com\u002Fmistralai\u002Fmistral-vibe), 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`](https:\u002F\u002Fgithub.com\u002Fmultica-ai\u002Fmultica) and [`cc-switch`](https:\u002F\u002Fgithub.com\u002Ffarion1231\u002Fcc-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, with loopback \u002F link-local \u002F RFC1918 destinations rejected at the edge.\n\n### 2 · Skills are files, not plugins.\n\nFollowing Claude Code's [`SKILL.md` convention](https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-code\u002Fskills), each skill is `SKILL.md` + `assets\u002F` + `references\u002F`. Drop a folder into [`skills\u002F`](skills\u002F), restart the daemon, it appears in the picker. The bundled `magazine-web-ppt` is [`op7418\u002Fguizang-ppt-skill`](https:\u002F\u002Fgithub.com\u002Fop7418\u002Fguizang-ppt-skill) committed verbatim — original license preserved, attribution preserved.\n\n### 3 · Design Systems are portable Markdown, not theme JSON.\n\nThe 9-section `DESIGN.md` schema from [`VoltAgent\u002Fawesome-design-md`][acd2] — 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, Xiaohongshu…** — plus 57 design skills sourced from [`awesome-design-skills`][ads].\n\n### 4 · The interactive question form prevents 80% of redirects.\n\nOD's prompt stack hard-codes a `RULE 1`: every fresh design brief begins with a `\u003Cquestion-form id=\"discovery\">` instead of code. Surface · audience · tone · brand context · scale · constraints. A long brief still leaves design decisions open — visual tone, color stance, scale — exactly the things the form locks down in 30 seconds. The cost of a wrong direction is one chat round, not one finished deck.\n\nThis is the **Junior-Designer mode** distilled from [`huashu-design`](https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design): batch the questions up front, show something visible early (even a wireframe with grey blocks), let the user redirect cheaply. Combined with the brand-asset protocol (locate · download · `grep` hex · write `brand-spec.md` · vocalise), it's the single biggest reason output stops feeling like AI freestyle and starts feeling like a designer who paid attention before painting.\n\n### 5 · The daemon makes the agent feel like it's on your laptop, because it is.\n\nThe daemon spawns the CLI with `cwd` set to the project's artifact folder under `.od\u002Fprojects\u002F\u003Cid>\u002F`. The agent gets `Read`, `Write`, `Bash`, `WebFetch` — real tools against a real filesystem. It can `Read` the skill's `assets\u002Ftemplate.html`, `grep` your CSS for hex values, write a `brand-spec.md`, drop generated images, and produce `.pptx` \u002F `.zip` \u002F `.pdf` files that show up in the file workspace as download chips when the turn ends. Sessions, conversations, messages, tabs persist in a local SQLite DB — pop the project open tomorrow and the agent's todo card is right where you left it.\n\n### 6 · The prompt stack is the product.\n\nWhat you compose at send time isn't \"system + user\". It's:\n\n```\nDISCOVERY directives  (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critique)\n  + identity charter   (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)\n  + active DESIGN.md   (72 systems available)\n  + active SKILL.md    (31 skills available)\n  + project metadata   (kind, fidelity, speakerNotes, animations, inspiration ids)\n  + skill side files   (auto-injected pre-flight: read assets\u002Ftemplate.html + references\u002F*.md)\n  + (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE   (nav \u002F counter \u002F scroll \u002F print)\n```\n\nEvery layer is composable. Every layer is a file you can edit. Read [`apps\u002Fweb\u002Fsrc\u002Fprompts\u002Fsystem.ts`](apps\u002Fweb\u002Fsrc\u002Fprompts\u002Fsystem.ts) and [`apps\u002Fweb\u002Fsrc\u002Fprompts\u002Fdiscovery.ts`](apps\u002Fweb\u002Fsrc\u002Fprompts\u002Fdiscovery.ts) to see the actual contract.\n\n## Architecture\n\n```\n┌────────────────────── browser (Next.js 16) ──────────────────────┐\n│  chat · file workspace · iframe preview · settings · imports     │\n└──────────────┬───────────────────────────────────┬───────────────┘\n               │ \u002Fapi\u002F* (rewritten in dev)          │\n               ▼                                    ▼\n   ┌──────────────────────────────────┐   \u002Fapi\u002Fproxy\u002F{provider}\u002Fstream (SSE)\n   │  Local daemon (Express + SQLite) │   ─→ any OpenAI-compat\n   │                                  │       endpoint (BYOK)\n   │  \u002Fapi\u002Fagents          \u002Fapi\u002Fskills│       w\u002F SSRF blocking\n   │  \u002Fapi\u002Fdesign-systems  \u002Fapi\u002Fprojects\u002F…\n   │  \u002Fapi\u002Fchat (SSE)      \u002Fapi\u002Fproxy\u002F{provider}\u002Fstream (SSE)\n   │  \u002Fapi\u002Ftemplates       \u002Fapi\u002Fimport\u002Fclaude-design\n   │  \u002Fapi\u002Fartifacts\u002Fsave  \u002Fapi\u002Fartifacts\u002Flint\n   │  \u002Fapi\u002Fupload          \u002Fapi\u002Fprojects\u002F:id\u002Ffiles…\n   │  \u002Fartifacts (static)  \u002Fframes (static)\n   │\n   │  optional: sidecar IPC at \u002Ftmp\u002Fopen-design\u002Fipc\u002F\u003Cns>\u002F\u003Capp>.sock\n   │  (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)\n   └─────────┬────────────────────────┘\n             │ spawn(cli, [...], { cwd: .od\u002Fprojects\u002F\u003Cid> })\n             ▼\n   ┌──────────────────────────────────────────────────────────────────┐\n   │  claude · codex · devin (ACP) · gemini · opencode · cursor-agent │\n   │  qwen · qoder · copilot · hermes (ACP) · kimi (ACP) · pi (RPC) · kiro (ACP) · kilo (ACP) · vibe (ACP) · deepseek  │\n   │  reads SKILL.md + DESIGN.md, writes artifacts to disk            │\n   └──────────────────────────────────────────────────────────────────┘\n```\n\n| Layer | Stack |\n|---|---|\n| Frontend | Next.js 16 App Router + React 18 + TypeScript, Vercel-deployable |\n| Daemon | Node 24 · Express · SSE streaming · `better-sqlite3`; tables: `projects` · `conversations` · `messages` · `tabs` · `templates` |\n| Agent transport | `child_process.spawn`; typed-event parsers for `claude-stream-json` (Claude Code), `qoder-stream-json` (Qoder CLI), `copilot-stream-json` (Copilot), `json-event-stream` per-CLI parsers (Codex \u002F Gemini \u002F OpenCode \u002F Cursor Agent), `acp-json-rpc` (Devin \u002F Hermes \u002F Kimi \u002F Kiro \u002F Kilo \u002F Mistral Vibe via Agent Client Protocol), `pi-rpc` (Pi via stdio JSON-RPC), `plain` (Qwen Code \u002F DeepSeek TUI) |\n| BYOK proxy | `POST \u002Fapi\u002Fproxy\u002F{anthropic,openai,azure,google}\u002Fstream` → provider-specific upstream APIs, normalized `delta\u002Fend\u002Ferror` SSE; rejects loopback \u002F link-local \u002F RFC1918 hosts at the daemon edge |\n| Storage | Plain files in `.od\u002Fprojects\u002F\u003Cid>\u002F` + SQLite at `.od\u002Fapp.sqlite` + credentials at `.od\u002Fmedia-config.json` (gitignored, auto-created). `OD_DATA_DIR=\u003Cdir>` relocates all daemon data (used for test isolation and read-only-install setups); `OD_MEDIA_CONFIG_DIR=\u003Cdir>` further narrows the override to just `media-config.json` for setups that want to keep API keys outside the data dir |\n| Preview | Sandboxed iframe via `srcdoc` + per-skill `\u003Cartifact>` parser ([`apps\u002Fweb\u002Fsrc\u002Fartifacts\u002Fparser.ts`](apps\u002Fweb\u002Fsrc\u002Fartifacts\u002Fparser.ts)) |\n| Export | HTML (inline assets) · PDF (browser print, deck-aware) · PPTX (agent-driven via skill) · ZIP (archiver) · Markdown |\n| Lifecycle | `pnpm tools-dev start \\| stop \\| run \\| status \\| logs \\| inspect \\| check`; ports via `--daemon-port` \u002F `--web-port`, namespaces via `--namespace` |\n| Desktop (optional) | Electron shell — discovers the web URL through sidecar IPC, no port guessing; same `STATUS`\u002F`EVAL`\u002F`SCREENSHOT`\u002F`CONSOLE`\u002F`CLICK`\u002F`SHUTDOWN` channel powers `tools-dev inspect desktop …` for E2E |\n\n## Quickstart\n\n### Download the desktop app (no build required)\n\nThe fastest way to try Open Design is the prebuilt desktop app — no Node, no pnpm, no clone:\n\n- **[open-design.ai](https:\u002F\u002Fopen-design.ai\u002F)** — official download page\n- **[GitHub releases](https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\u002Freleases)**\n\n### Run from source\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design.git\ncd open-design\ncorepack enable\ncorepack pnpm --version   # should print 10.33.2\npnpm install\npnpm tools-dev run web\n# open the web URL printed by tools-dev\n```\n\nWindows launcher: build `OpenDesign.exe` yourself with the instructions in `tools\u002Flauncher\u002FREADME.md`, or download it from GitHub Releases. Then place it in the repo root and double-click it to run `pnpm install` if needed and start Open Design with `pnpm tools-dev`.\n\nEnvironment requirements: Node `~24` and pnpm `10.33.x`. `nvm`\u002F`fnm` are optional helpers only; if you use one, run `nvm install 24 && nvm use 24` or `fnm install 24 && fnm use 24` before `pnpm install`.\n\nFor desktop\u002Fbackground startup, fixed-port restarts, and media generation dispatcher checks (`OD_BIN`, `OD_DAEMON_URL`, `apps\u002Fdaemon\u002Fdist\u002Fcli.js`), see [`QUICKSTART.md`](QUICKSTART.md).\n\nThe first load:\n\n1. Detects which agent CLIs you have on `PATH` and picks one automatically.\n2. Loads 31 skills + 72 design systems.\n3. Pops the welcome dialog so you can paste an Anthropic key (only needed for the BYOK fallback path).\n4. **Auto-creates `.\u002F.od\u002F`** — the local runtime folder for the SQLite project DB, per-project artifacts, and saved renders. There is no `od init` step; the daemon `mkdir`s everything it needs on boot.\n\nType a prompt, hit **Send**, watch the question form arrive, fill it, watch the todo card stream, watch the artifact render. Click **Save to disk** or download as a project ZIP.\n\n### First-run state (`.\u002F.od\u002F`)\n\nThe daemon owns one hidden folder at the repo root. Everything in it is gitignored and machine-local — never commit it.\n\n```\n.od\u002F\n├── app.sqlite                 ← projects · conversations · messages · open tabs\n├── artifacts\u002F                 ← one-off \"Save to disk\" renders (timestamped)\n└── projects\u002F\u003Cid>\u002F             ← per-project working dir, also the agent's cwd\n```\n\n| Want to… | Do this |\n|---|---|\n| Inspect what's in there | `ls -la .od && sqlite3 .od\u002Fapp.sqlite '.tables'` |\n| Reset to a clean slate | `pnpm tools-dev stop`, `rm -rf .od`, run `pnpm tools-dev run web` again |\n| Move it elsewhere | `OD_DATA_DIR=\u003Cabsolute-or-relative-path> pnpm tools-dev run web` — the daemon resolves `~\u002F` and anchors relative paths to the repo root. `OD_MEDIA_CONFIG_DIR=\u003Cdir>` narrows the override to just `media-config.json` if you want credentials in a separate location. |\n\n#### Migrating a pre-desktop-app `.od\u002F` into the installed Desktop app\n\nIf you ran the repo first and only later installed the packaged Desktop app, the two writers point at different roots:\n\n- Repo dev-server (`pnpm tools-dev start web`) writes to `\u003Crepo-root>\u002F.od\u002F`.\n- Installed Desktop app writes under `\u003CappData>\u002FOpen Design\u002Fnamespaces\u002F\u003Cchannel>\u002Fdata\u002F`, where `\u003CappData>` is Electron's per-OS app-data base (everything before the `Open Design` segment that `app.getPath(\"userData\")` already includes). The channel suffix is **platform-specific** — the release workflows append `-win`\u002F`-linux`:\n\n  | Platform | `\u003CappData>` (Electron `appData` base) | Stable channel | Beta channel |\n  |---|---|---|---|\n  | macOS | `~\u002FLibrary\u002FApplication Support` | `release-stable` | `release-beta` |\n  | Windows | `%APPDATA%` (= `%USERPROFILE%\\AppData\\Roaming`) | `release-stable-win` | `release-beta-win` |\n  | Linux | `$XDG_CONFIG_HOME` (default `~\u002F.config`) | `release-stable-linux` | `release-beta-linux` |\n\n  Example resolved paths:\n  - macOS beta: `~\u002FLibrary\u002FApplication Support\u002FOpen Design\u002Fnamespaces\u002Frelease-beta\u002Fdata\u002F`\n  - Windows beta: `%APPDATA%\\Open Design\\namespaces\\release-beta-win\\data\\`\n  - Linux beta: `~\u002F.config\u002FOpen Design\u002Fnamespaces\u002Frelease-beta-linux\u002Fdata\u002F`\n\n  If unsure, inspect the packaged daemon log right after the app boots; it logs the resolved `daemonDataRoot`.\n\n> **⚠️ Do this in a clean state.** Migration replaces (not merges) the Desktop app's data dir with your repo `.od\u002F`. Both writers must be fully stopped before copying — quit the Desktop app **and** stop the repo dev-server. SQLite-WAL needs to flush cleanly on both sides; if either daemon is still running it can write SQLite\u002FWAL pages or project\u002Fartifact files mid-snapshot, leaving the staged copy inconsistent. If the Desktop app already has projects you care about, decide which side is authoritative before continuing — the steps below back up the Desktop's current `data\u002F` to a sibling but do not merge.\n\nTo carry your existing projects, SQLite, artifacts, and `media-config.json` over to the Desktop app:\n\n```bash\nset -euo pipefail\n# 1. Stop both writers so the source and target are quiescent.\n#    - Quit the Desktop app (Cmd+Q on macOS, File → Exit on Windows\u002FLinux).\n#    - Stop the repo dev-server: `pnpm tools-dev stop` from the repo root.\n# 2. Set REPO and APP_DATA to your actual paths; the example below is macOS + beta.\nREPO=\"\u002Fpath\u002Fto\u002Fopen-design\"\nAPP_DATA=\"$HOME\u002FLibrary\u002FApplication Support\u002FOpen Design\u002Fnamespaces\u002Frelease-beta\u002Fdata\"\n\n# 3. Preflight: see what (if anything) the Desktop app already has.\nls \"$APP_DATA\u002Fprojects\" 2>\u002Fdev\u002Fnull && echo \"↑ Desktop already has projects — confirm this is a replace, not a merge.\"\n\n# 4. Stage into a sibling first, then atomically swap into place. `set -e` plus\n#    the explicit rsync exit check guarantee a non-zero copy aborts before any\n#    `mv` runs, so the Desktop data dir cannot end up half-populated.\nSTAGE=\"${APP_DATA}.staged-$(date +%F-%H%M)\"\nmkdir -p \"$STAGE\"\nrsync -a --exclude='backup-*' \"$REPO\u002F.od\u002F\" \"$STAGE\u002F\" || { echo \"rsync failed — aborting before swap\"; exit 1; }\n\n# 5. Backup the Desktop's current data, then promote the staged copy.\nmv \"$APP_DATA\" \"${APP_DATA}.fresh-baseline-$(date +%F-%H%M)\"\nmv \"$STAGE\" \"$APP_DATA\"\n\n# 6. Relaunch the Desktop app. The daemon applies forward schema changes on boot.\n```\n\nIf anything looks wrong after relaunch, restore the original Desktop data by deleting `$APP_DATA` and renaming the `.fresh-baseline-*` directory back into place.\n\n> **⚠️ Schema migrations are forward-only.** The daemon applies `CREATE TABLE IF NOT EXISTS` \u002F `ALTER TABLE` changes on boot; there is no version guard. After migrating, **do not** open the same data dir with an older repo checkout — unsupported columns or behavior mismatches can leave the workspace inconsistent. Back up `app.sqlite*` before the first launch with the new app.\n\n> **⚠️ Advanced: sharing one data dir between repo dev-server and Desktop app.** Pointing both at the same dir via `OD_DATA_DIR` is possible but **only safe one-at-a-time**. The daemon opens `app.sqlite` in WAL mode and writes uncoordinated files under `projects\u002F` and `artifacts\u002F`; running both writers concurrently can corrupt SQLite or clobber artifacts. Always stop the Desktop app before starting the dev-server, and stop the dev-server before opening the Desktop app:\n>\n> ```bash\n> OD_DATA_DIR=\"$HOME\u002FLibrary\u002FApplication Support\u002FOpen Design\u002Fnamespaces\u002Frelease-beta\u002Fdata\" \\\n>   pnpm tools-dev start web\n> ```\n\nFull file map, scripts, and troubleshooting → [`QUICKSTART.md`](QUICKSTART.md).\n\n## Running the Project\n\nOpen Design can run as a web app in your browser or as an Electron desktop application. Both modes share the same local daemon + web architecture.\n\n### Web \u002F Localhost (Default)\n\n```bash\n# Foreground mode — keeps the lifecycle command in the foreground (logs written to files)\npnpm tools-dev run web\n\n# View recent logs:\npnpm tools-dev logs\n\n# Background mode — daemon + web run as background processes\npnpm tools-dev start web\n```\n\nBy default, `tools-dev` binds to available ephemeral ports and prints the actual URLs on startup. To use fixed ports from a stopped state:\n\n```bash\npnpm tools-dev run web --daemon-port 17456 --web-port 17573\n```\n\nIf daemon\u002Fweb are already running, use `restart` to switch ports in the existing session:\n\n```bash\npnpm tools-dev restart --daemon-port 17456 --web-port 17573\n```\n\n### Desktop \u002F Electron\n\n```bash\n# Start daemon + web + desktop in the background\npnpm tools-dev\n\n# Check desktop status\npnpm tools-dev inspect desktop status\n\n# Take a screenshot of the desktop app\npnpm tools-dev inspect desktop screenshot --path \u002Ftmp\u002Fopen-design.png\n```\n\nThe desktop app discovers the web URL automatically via sidecar IPC — no port guessing required.\n\n### Other Useful Commands\n\n| Command | What it does |\n|---|---|\n| `pnpm tools-dev status` | Show running sidecar statuses |\n| `pnpm tools-dev logs` | Show daemon\u002Fweb\u002Fdesktop log tails |\n| `pnpm tools-dev stop` | Stop all running sidecars |\n| `pnpm tools-dev restart` | Stop then restart all sidecars |\n| `pnpm tools-dev check` | Status + recent logs + common diagnostics |\n\nFor fixed-port restarts, background startup, and full troubleshooting see [`QUICKSTART.md`](QUICKSTART.md).\n\n## Use Open Design from your coding agent\n\nOpen Design ships a stdio MCP server. Wire it into Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf, or any MCP-compatible client and the agent in another repo can read files from your local Open Design projects directly. Replaces the export-then-attach loop. When the agent calls `search_files`, `get_file`, or `get_artifact` without a project argument, the MCP defaults to whatever project (and file) you have open in Open Design right now, so prompts like *\"build this in my app\"* or *\"match these styles\"* just work.\n\n**Why MCP?** Exporting and re-attaching a zip every design iteration breaks flow. The MCP server exposes your design source directly -- tokens CSS, JSX components, entry HTML -- as a structured API the agent can query by name. The agent always sees the live file, not a stale copy from the last export.\n\nOpen **Settings → MCP server** in the Open Design app for a per-client install flow. The panel bakes the absolute path to your `node` binary and the daemon's built `cli.js` into every snippet, so it works on a fresh source clone where `od` is not on your PATH. Cursor gets a one-click deeplink; the rest get a copy-paste JSON snippet in the schema their config file expects (Claude Code includes a `claude mcp add-json` one-liner so you do not have to hand-edit `~\u002F.claude.json`). Restart or reload your client after install for the server to show up.\n\nThe daemon must be running locally for MCP tool calls to succeed. If the agent was started before Open Design, restart the agent after Open Design is up so it can reach the live daemon. Tool calls made while the daemon is offline return a clear `\"daemon not reachable\"` error rather than a crash.\n\n**Security model.** The MCP server is read-only; it exposes file reads, file metadata, and search -- nothing that writes to disk or calls an external service. It runs as a child process of the coding agent over stdio, so any MCP client you register inherits read access to your local Open Design projects. Treat it like installing a VS Code extension: only register clients you trust. The daemon binds to `127.0.0.1` by default; LAN-wide exposure requires an explicit `OD_BIND_HOST` opt-in.\n\n## Repository structure\n\n```\nopen-design\u002F\n├── README.md                      ← this file\n├── README.de.md                   ← Deutsch\n├── README.ru.md                   ← Русский\n├── README.zh-CN.md                ← 简体中文\n├── QUICKSTART.md                  ← run \u002F build \u002F deploy guide\n├── package.json                   ← pnpm workspace, single bin: od\n│\n├── apps\u002F\n│   ├── daemon\u002F                    ← Node + Express, the only server\n│   │   ├── src\u002F                   ← TypeScript daemon source\n│   │   │   ├── cli.ts             ← `od` bin source, compiled to dist\u002Fcli.js\n│   │   │   ├── server.ts          ← \u002Fapi\u002F* routes (projects, chat, files, exports)\n│   │   │   ├── agents.ts          ← PATH scanner + per-CLI argv builders\n│   │   │   ├── claude-stream.ts   ← streaming JSON parser for Claude Code stdout\n│   │   │   ├── skills.ts          ← SKILL.md frontmatter loader\n│   │   │   └── db.ts              ← SQLite schema (projects\u002Fmessages\u002Ftemplates\u002Ftabs)\n│   │   ├── sidecar\u002F               ← tools-dev daemon sidecar wrapper\n│   │   └── tests\u002F                 ← daemon package tests\n│   │\n│   └── web\u002F                       ← Next.js 16 App Router + React client\n│       ├── app\u002F                   ← App Router entrypoints\n│       ├── next.config.ts         ← dev rewrites + prod static export to out\u002F\n│       └── src\u002F                   ← React + TypeScript client modules\n│           ├── App.tsx            ← routing, bootstrap, settings\n│           ├── components\u002F        ← chat, composer, picker, preview, sketch, …\n│           ├── prompts\u002F\n│           │   ├── system.ts      ← composeSystemPrompt(base, skill, DS, metadata)\n│           │   ├── discovery.ts   ← turn-1 form + turn-2 branch + 5-dim critique\n│           │   └── directions.ts  ← 5 visual directions × OKLch palette + font stack\n│           ├── artifacts\u002F         ← streaming \u003Cartifact> parser + manifests\n│           ├── runtime\u002F           ← iframe srcdoc, markdown, export helpers\n│           ├── providers\u002F         ← daemon SSE + BYOK API transports\n│           └── state\u002F             ← config + projects (localStorage + daemon-backed)\n│\n├── e2e\u002F                           ← Playwright UI + external integration\u002FVitest harness\n│\n├── packages\u002F\n│   ├── contracts\u002F                 ← shared web\u002Fdaemon app contracts\n│   ├── sidecar-proto\u002F             ← Open Design sidecar protocol contract\n│   ├── sidecar\u002F                   ← generic sidecar runtime primitives\n│   └── platform\u002F                  ← generic process\u002Fplatform primitives\n│\n├── skills\u002F                        ← 31 SKILL.md skill bundles (27 prototype + 4 deck)\n│   ├── web-prototype\u002F             ← default for prototype mode\n│   ├── saas-landing\u002F  dashboard\u002F  pricing-page\u002F  docs-page\u002F  blog-post\u002F\n│   ├── mobile-app\u002F  mobile-onboarding\u002F  gamified-app\u002F\n│   ├── email-marketing\u002F  social-carousel\u002F  magazine-poster\u002F\n│   ├── motion-frames\u002F  sprite-animation\u002F  digital-eguide\u002F  dating-web\u002F\n│   ├── critique\u002F  tweaks\u002F  wireframe-sketch\u002F\n│   ├── pm-spec\u002F  team-okrs\u002F  meeting-notes\u002F  kanban-board\u002F\n│   ├── eng-runbook\u002F  finance-report\u002F  invoice\u002F  hr-onboarding\u002F\n│   ├── simple-deck\u002F  replit-deck\u002F  weekly-update\u002F   ← deck mode\n│   └── guizang-ppt\u002F               ← bundled magazine-web-ppt (default for deck)\n│       ├── SKILL.md\n│       ├── assets\u002Ftemplate.html   ← seed\n│       └── references\u002F{themes,layouts,components,checklist}.md\n│\n├── design-systems\u002F                ← 72 DESIGN.md systems\n│   ├── default\u002F                   ← Neutral Modern (starter)\n│   ├── warm-editorial\u002F            ← Warm Editorial (starter)\n│   ├── linear-app\u002F  vercel\u002F  stripe\u002F  airbnb\u002F  notion\u002F  cursor\u002F  apple\u002F  …\n│   └── README.md                  ← catalog overview\n│\n├── assets\u002F\n│   └── frames\u002F                    ← shared device frames (used cross-skill)\n│       ├── iphone-15-pro.html\n│       ├── android-pixel.html\n│       ├── ipad-pro.html\n│       ├── macbook.html\n│       └── browser-chrome.html\n│\n├── templates\u002F\n│   ├── deck-framework.html        ← deck baseline (nav \u002F counter \u002F print)\n│   └── kami-deck.html             ← kami-flavored deck starter (parchment \u002F ink-blue serif)\n│\n├── scripts\u002F\n│   └── sync-design-systems.ts     ← re-import upstream awesome-design-md tarball\n│\n├── docs\u002F\n│   ├── spec.md                    ← product spec, scenarios, differentiation\n│   ├── architecture.md            ← topologies, data flow, components\n│   ├── skills-protocol.md         ← extended SKILL.md od: frontmatter\n│   ├── agent-adapters.md          ← per-CLI detection + dispatch\n│   ├── modes.md                   ← prototype \u002F deck \u002F template \u002F design-system\n│   ├── references.md              ← long-form provenance\n│   ├── roadmap.md                 ← phased delivery\n│   ├── schemas\u002F                   ← JSON schemas\n│   └── examples\u002F                  ← canonical artifact examples\n│\n└── .od\u002F                           ← runtime data, gitignored, auto-created\n    ├── app.sqlite                 ← projects \u002F conversations \u002F messages \u002F tabs\n    ├── projects\u002F\u003Cid>\u002F             ← per-project working folder (agent's cwd)\n    └── artifacts\u002F                 ← saved one-off renders\n```\n\n## Design Systems\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"docs\u002Fassets\u002Fdesign-systems-library.png\" alt=\"The 72 design systems library — style guide spread\" width=\"100%\" \u002F>\n\u003C\u002Fp>\n\n72 systems out of the box, each as a single [`DESIGN.md`](design-systems\u002FREADME.md):\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>Full catalog\u003C\u002Fb> (click to expand)\u003C\u002Fsummary>\n\n**AI & LLM** — `claude` · `cohere` · `mistral-ai` · `minimax` · `together-ai` · `replicate` · `runwayml` · `elevenlabs` · `ollama` · `x-ai`\n\n**Developer Tools** — `cursor` · `vercel` · `linear-app` · `framer` · `expo` · `clickhouse` · `mongodb` · `supabase` · `hashicorp` · `posthog` · `sentry` · `warp` · `webflow` · `sanity` · `mintlify` · `lovable` · `composio` · `opencode-ai` · `voltagent`\n\n**Productivity** — `notion` · `figma` · `miro` · `airtable` · `superhuman` · `intercom` · `zapier` · `cal` · `clay` · `raycast`\n\n**Fintech** — `stripe` · `coinbase` · `binance` · `kraken` · `mastercard` · `revolut` · `wise`\n\n**E-Commerce** — `shopify` · `airbnb` · `uber` · `nike` · `starbucks` · `pinterest`\n\n**Media** — `spotify` · `playstation` · `wired` · `theverge` · `meta`\n\n**Automotive** — `tesla` · `bmw` · `ferrari` · `lamborghini` · `bugatti` · `renault`\n\n**Other** — `apple` · `ibm` · `nvidia` · `vodafone` · `sentry` · `resend` · `spacex`\n\n**Starters** — `default` (Neutral Modern) · `warm-editorial`\n\n\u003C\u002Fdetails>\n\nThe product-system library is imported via [`scripts\u002Fsync-design-systems.ts`](scripts\u002Fsync-design-systems.ts) from [`VoltAgent\u002Fawesome-design-md`][acd2]. Re-run to refresh. The 57 design skills are sourced from [`bergside\u002Fawesome-design-skills`][ads] and added directly in `design-systems\u002F`.\n\n## Visual directions\n\nWhen the user has no brand spec, the agent emits a second form with five curated directions — the OD adaptation of [`huashu-design`'s \"5 schools × 20 design philosophies\" fallback](https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design#%E8%AE%BE%E8%AE%A1%E6%96%B9%E5%90%91%E9%A1%BE%E9%97%AE-fallback). Each direction is a deterministic spec — palette in OKLch, font stack, layout posture cues, references — that the agent binds verbatim into the seed template's `:root`. One radio click → a fully specified visual system. No improvisation, no AI-slop.\n\n| Direction | Mood | Refs |\n|---|---|---|\n| Editorial — Monocle \u002F FT | Print magazine, ink + cream + warm rust | Monocle · FT Weekend · NYT Magazine |\n| Modern minimal — Linear \u002F Vercel | Cool, structured, minimal accent | Linear · Vercel · Stripe |\n| Tech utility | Information density, monospace, terminal | Bloomberg · Bauhaus tools |\n| Brutalist | Raw, oversized type, no shadows, harsh accents | Bloomberg Businessweek · Achtung |\n| Soft warm | Generous, low contrast, peachy neutrals | Notion marketing · Apple Health |\n\nFull spec → [`apps\u002Fweb\u002Fsrc\u002Fprompts\u002Fdirections.ts`](apps\u002Fweb\u002Fsrc\u002Fprompts\u002Fdirections.ts).\n\n## Media generation\n\nOD doesn't stop at code. The same chat surface that produces `\u003Cartifact>` HTML also drives **image**, **video**, and **audio** generation, with model adapters wired into the daemon's media pipeline ([`apps\u002Fdaemon\u002Fsrc\u002Fmedia-models.ts`](apps\u002Fdaemon\u002Fsrc\u002Fmedia-models.ts), [`apps\u002Fweb\u002Fsrc\u002Fmedia\u002Fmodels.ts`](apps\u002Fweb\u002Fsrc\u002Fmedia\u002Fmodels.ts)). Every render lands as a real file in the project workspace — `.png` for image, `.mp4` for video — and shows up as a download chip when the turn ends.\n\nThree model families carry the load today:\n\n| Surface | Model | Provider | What it's for |\n|---|---|---|---|\n| **Image** | `gpt-image-2` | Azure \u002F OpenAI | Posters, profile avatars, illustrated maps, infographics, magazine-style social cards, photo restoration, exploded-view product art |\n| **Video** | `seedance-2.0` | ByteDance Volcengine | 15s cinematic t2v + i2v with audio — narrative shorts, character close-ups, product films, MV-style choreography |\n| **Video** | `hyperframes-html` | [HeyGen \u002F OSS](https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes) | HTML→MP4 motion graphics — product reveals, kinetic typography, data charts, social overlays, logo outros, TikTok-style verticals with karaoke captions |\n\nA growing **prompt gallery** at [`prompt-templates\u002F`](prompt-templates\u002F) ships **93 ready-to-replicate prompts** — 43 image (`prompt-templates\u002Fimage\u002F*.json`), 39 Seedance (`prompt-templates\u002Fvideo\u002F*.json` excluding `hyperframes-*`), 11 HyperFrames (`prompt-templates\u002Fvideo\u002Fhyperframes-*.json`). Each carries a preview thumbnail, the prompt body verbatim, the target model, the aspect ratio, and a `source` block for license + attribution. The daemon serves them at `GET \u002Fapi\u002Fprompt-templates`, the web app surfaces them as a card grid in the **Image templates** and **Video templates** tabs of the entry view; one click drops a prompt into the composer with the right model preselected.\n\n### gpt-image-2 — image gallery (sample of 43)\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"20%\" valign=\"top\">\u003Cimg src=\"https:\u002F\u002Fcms-assets.youmind.com\u002Fmedia\u002F1776661968404_8a5flm_HGQc_KOaMAA2vt0.jpg\" alt=\"3D Stone Staircase Evolution\" \u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>3D Stone Staircase Evolution Infographic\u003C\u002Fb>\u003Cbr\u002F>3-step infographic, hewn-stone aesthetic\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"20%\" valign=\"top\">\u003Cimg src=\"https:\u002F\u002Fcms-assets.youmind.com\u002Fmedia\u002F1776662673014_nf0taw_HGRMNDybsAAGG88.jpg\" alt=\"Illustrated City Food Map\" \u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Illustrated City Food Map\u003C\u002Fb>\u003Cbr\u002F>Editorial hand-illustrated travel poster\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"20%\" valign=\"top\">\u003Cimg src=\"https:\u002F\u002Fcms-assets.youmind.com\u002Fmedia\u002F1777453149026_gd2k50_HHCSvymboAAVscc.jpg\" alt=\"Cinematic Elevator Scene\" \u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Cinematic Elevator Scene\u003C\u002Fb>\u003Cbr\u002F>Single-frame editorial fashion still\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"20%\" valign=\"top\">\u003Cimg src=\"https:\u002F\u002Fcms-assets.youmind.com\u002Fmedia\u002F1777453164993_mt5b69_HHDoWfeaUAEA6Vt.jpg\" alt=\"Cyberpunk Anime Portrait\" \u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Cyberpunk Anime Portrait\u003C\u002Fb>\u003Cbr\u002F>Profile avatar — neon face text\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"20%\" valign=\"top\">\u003Cimg src=\"https:\u002F\u002Fcms-assets.youmind.com\u002Fmedia\u002F1777453184257_vb9hvl_HG9tAkOa4AAuRrn.jpg\" alt=\"Glamorous Woman in Black\" \u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Glamorous Woman in Black Portrait\u003C\u002Fb>\u003Cbr\u002F>Editorial studio portrait\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\nFull set → [`prompt-templates\u002Fimage\u002F`](prompt-templates\u002Fimage\u002F). Sources: most pull from [`YouMind-OpenLab\u002Fawesome-gpt-image-prompts`](https:\u002F\u002Fgithub.com\u002FYouMind-OpenLab\u002Fawesome-gpt-image-prompts) (CC-BY-4.0) with author attribution preserved per template.\n\n### Seedance 2.0 — video gallery (sample of 39)\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"20%\" valign=\"top\">\u003Ca href=\"https:\u002F\u002Fcustomer-qs6wnyfuv0gcybzj.cloudflarestream.com\u002Fc4515f4f328539e1ded2cc32f4ce63e7\u002Fdownloads\u002Fdefault.mp4\">\u003Cimg src=\"https:\u002F\u002Fcustomer-qs6wnyfuv0gcybzj.cloudflarestream.com\u002Fc4515f4f328539e1ded2cc32f4ce63e7\u002Fthumbnails\u002Fthumbnail.jpg\" alt=\"Music Podcast Guitar\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>Music Podcast & Guitar Technique\u003C\u002Fb>\u003Cbr\u002F>4K cinematic studio film\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"20%\" valign=\"top\">\u003Ca href=\"https:\u002F\u002Fcustomer-qs6wnyfuv0gcybzj.cloudflarestream.com\u002F4a47ba646e7cedd79363c861864b8714\u002Fdownloads\u002Fdefault.mp4\">\u003Cimg src=\"https:\u002F\u002Fcustomer-qs6wnyfuv0gcybzj.cloudflarestream.com\u002F4a47ba646e7cedd79363c861864b8714\u002Fthumbnails\u002Fthumbnail.jpg\" alt=\"Emotional Face\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>Emotional Face Close-up\u003C\u002Fb>\u003Cbr\u002F>Cinematic micro-expression study\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"20%\" valign=\"top\">\u003Ca href=\"https:\u002F\u002Fcustomer-qs6wnyfuv0gcybzj.cloudflarestream.com\u002F7e8983364a95fe333f0f88bd1085a0e8\u002Fdownloads\u002Fdefault.mp4\">\u003Cimg src=\"https:\u002F\u002Fcustomer-qs6wnyfuv0gcybzj.cloudflarestream.com\u002F7e8983364a95fe333f0f88bd1085a0e8\u002Fthumbnails\u002Fthumbnail.jpg\" alt=\"Luxury Supercar\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>Luxury Supercar Cinematic\u003C\u002Fb>\u003Cbr\u002F>Narrative product film\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"20%\" valign=\"top\">\u003Ca href=\"https:\u002F\u002Fcustomer-qs6wnyfuv0gcybzj.cloudflarestream.com\u002F0279a674ce138ab5a0a6f020a7273d89\u002Fdownloads\u002Fdefault.mp4\">\u003Cimg src=\"https:\u002F\u002Fcustomer-qs6wnyfuv0gcybzj.cloudflarestream.com\u002F0279a674ce138ab5a0a6f020a7273d89\u002Fthumbnails\u002Fthumbnail.jpg\" alt=\"Forbidden City Cat\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>Forbidden City Cat Satire\u003C\u002Fb>\u003Cbr\u002F>Stylised satire short\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"20%\" valign=\"top\">\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FYouMind-OpenLab\u002Fawesome-seedance-2-prompts\u002Freleases\u002Fdownload\u002Fvideos\u002F1402.mp4\">\u003Cimg src=\"https:\u002F\u002Fcustomer-qs6wnyfuv0gcybzj.cloudflarestream.com\u002F7f63ad253175a9ad1dac53de490efac8\u002Fthumbnails\u002Fthumbnail.jpg\" alt=\"Japanese Romance\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>Japanese Romance Short Film\u003C\u002Fb>\u003Cbr\u002F>15s Seedance 2.0 narrative\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\nClick any thumbnail to play the actual rendered MP4. Full set → [`prompt-templates\u002Fvideo\u002F`](prompt-templates\u002Fvideo\u002F) (the `*-seedance-*` and Cinematic-tagged entries). Sources: [`YouMind-OpenLab\u002Fawesome-seedance-2-prompts`](https:\u002F\u002Fgithub.com\u002FYouMind-OpenLab\u002Fawesome-seedance-2-prompts) (CC-BY-4.0) with original tweet links and author handles preserved.\n\n### HyperFrames — HTML→MP4 motion graphics (11 ready-to-replicate templates)\n\n[**`heygen-com\u002Fhyperframes`**](https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes) is HeyGen's open-source agent-native video framework — you (or the agent) write HTML + CSS + GSAP, HyperFrames renders it to a deterministic MP4 via headless Chrome + FFmpeg. Open Design ships HyperFrames as a first-class video model (`hyperframes-html`) wired into the daemon dispatch, plus the `skills\u002Fhyperframes\u002F` skill that teaches the agent the timeline contract, scene-transition rules, audio-reactive patterns, captions\u002FTTS, and the catalog blocks (`npx hyperframes add \u003Cslug>`).\n\nEleven hyperframes prompts ship under [`prompt-templates\u002Fvideo\u002Fhyperframes-*.json`](prompt-templates\u002Fvideo\u002F), each one a concrete brief that produces a specific archetype:\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"25%\" valign=\"top\">\u003Ca href=\"prompt-templates\u002Fvideo\u002Fhyperframes-product-reveal-minimal.json\">\u003Cimg src=\"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Fcatalog\u002Fblocks\u002Flogo-outro.png\" alt=\"Product reveal\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>5s minimal product reveal\u003C\u002Fb> · 16:9 · push-in title card with shader transition\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" valign=\"top\">\u003Ca href=\"prompt-templates\u002Fvideo\u002Fhyperframes-saas-product-promo-30s.json\">\u003Cimg src=\"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Fcatalog\u002Fblocks\u002Fapp-showcase.png\" alt=\"SaaS promo\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>30s SaaS product promo\u003C\u002Fb> · 16:9 · Linear\u002FClickUp-style with UI 3D reveals\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" valign=\"top\">\u003Ca href=\"prompt-templates\u002Fvideo\u002Fhyperframes-tiktok-karaoke-talking-head.json\">\u003Cimg src=\"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Fcatalog\u002Fblocks\u002Ftiktok-follow.png\" alt=\"TikTok karaoke\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>TikTok karaoke talking-head\u003C\u002Fb> · 9:16 · TTS + word-synced captions\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" valign=\"top\">\u003Ca href=\"prompt-templates\u002Fvideo\u002Fhyperframes-brand-sizzle-reel.json\">\u003Cimg src=\"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Fcatalog\u002Fblocks\u002Flogo-outro.png\" alt=\"Brand sizzle\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>30s brand sizzle reel\u003C\u002Fb> · 16:9 · beat-synced kinetic typography, audio-reactive\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"25%\" valign=\"top\">\u003Ca href=\"prompt-templates\u002Fvideo\u002Fhyperframes-data-bar-chart-race.json\">\u003Cimg src=\"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Fcatalog\u002Fblocks\u002Fdata-chart.png\" alt=\"Data chart\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>Animated bar-chart race\u003C\u002Fb> · 16:9 · NYT-style data infographic\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" valign=\"top\">\u003Ca href=\"prompt-templates\u002Fvideo\u002Fhyperframes-flight-map-route.json\">\u003Cimg src=\"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Fcatalog\u002Fblocks\u002Fnyc-paris-flight.png\" alt=\"Flight map\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>Flight map (origin → dest)\u003C\u002Fb> · 16:9 · Apple-style cinematic route reveal\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" valign=\"top\">\u003Ca href=\"prompt-templates\u002Fvideo\u002Fhyperframes-logo-outro-cinematic.json\">\u003Cimg src=\"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Fcatalog\u002Fblocks\u002Flogo-outro.png\" alt=\"Logo outro\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>4s cinematic logo outro\u003C\u002Fb> · 16:9 · piece-by-piece assembly + bloom\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" valign=\"top\">\u003Ca href=\"prompt-templates\u002Fvideo\u002Fhyperframes-money-counter-hype.json\">\u003Cimg src=\"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Fcatalog\u002Fblocks\u002Fapple-money-count.png\" alt=\"Money counter\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>$0 → $10K money counter\u003C\u002Fb> · 9:16 · Apple-style hype with green flash + burst\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"25%\" valign=\"top\">\u003Ca href=\"prompt-templates\u002Fvideo\u002Fhyperframes-app-showcase-three-phones.json\">\u003Cimg src=\"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Fcatalog\u002Fblocks\u002Fapp-showcase.png\" alt=\"App showcase\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>3-phone app showcase\u003C\u002Fb> · 16:9 · floating phones with feature callouts\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" valign=\"top\">\u003Ca href=\"prompt-templates\u002Fvideo\u002Fhyperframes-social-overlay-stack.json\">\u003Cimg src=\"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Fcatalog\u002Fblocks\u002Finstagram-follow.png\" alt=\"Social overlay\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>Social overlay stack\u003C\u002Fb> · 9:16 · X · Reddit · Spotify · Instagram in sequence\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" valign=\"top\">\u003Ca href=\"prompt-templates\u002Fvideo\u002Fhyperframes-website-to-video-promo.json\">\u003Cimg src=\"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Fcatalog\u002Fblocks\u002Finstagram-follow.png\" alt=\"Website to video\" \u002F>\u003C\u002Fa>\u003Cbr\u002F>\u003Csub>\u003Cb>Website-to-video pipeline\u003C\u002Fb> · 16:9 · captures site at 3 viewports + transitions\u003C\u002Fsub>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" valign=\"top\"> \u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\nPattern is the same as the rest: pick a template, edit the brief, send. The agent reads the bundled `skills\u002Fhyperframes\u002FSKILL.md` (which carries the OD-specific render workflow — composition source files into a `.hyperframes-cache\u002F` so they don't clutter the file workspace, daemon dispatches `npx hyperframes render` to dodge the macOS sandbox-exec \u002F Puppeteer hang, only the final `.mp4` lands as a project chip), authors the composition, and ships an MP4. Catalog block thumbnails © HeyGen, served from their CDN; the OSS framework itself is Apache-2.0.\n\n> **Also wired but not surfaced as templates yet:** Kling 2.0 \u002F 1.6 \u002F 1.5, Veo 3 \u002F Veo 2, Sora 2 \u002F Sora 2-Pro (via Fal), MiniMax video-01 — all live in `VIDEO_MODELS` ([`apps\u002Fweb\u002Fsrc\u002Fmedia\u002Fmodels.ts`](apps\u002Fweb\u002Fsrc\u002Fmedia\u002Fmodels.ts)). Suno v5 \u002F v4.5, Udio v2, Lyria 2 (music) and gpt-4o-mini-tts, MiniMax TTS (speech) cover the audio surface. Templates for these are open contributions — drop a JSON into `prompt-templates\u002Fvideo\u002F` or `prompt-templates\u002Faudio\u002F` and it shows up in the picker.\n\n## Beyond chat — what else ships\n\nThe chat \u002F artifact loop gets the spotlight, but a handful of less-visible capabilities are already wired and worth knowing before you compare OD to anything else:\n\n- **Claude Design ZIP import.** Drop an export from claude.ai onto the welcome dialog. `POST \u002Fapi\u002Fimport\u002Fclaude-design` extracts it into a real `.od\u002Fprojects\u002F\u003Cid>\u002F`, opens the entry file as a tab, and stages a continue-where-Anthropic-left-off prompt for your local agent. No re-prompting, no \"ask the model to re-create what we just had\". ([`apps\u002Fdaemon\u002Fsrc\u002Fserver.ts`](apps\u002Fdaemon\u002Fsrc\u002Fserver.ts) — `\u002Fapi\u002Fimport\u002Fclaude-design`)\n- **Multi-provider BYOK proxy.** `POST \u002Fapi\u002Fproxy\u002F{anthropic,openai,azure,google}\u002Fstream` takes `{ baseUrl, apiKey, model, messages }`, builds the provider-specific upstream request, normalizes SSE chunks into `delta\u002Fend\u002Ferror`, and rejects loopback \u002F link-local \u002F RFC1918 destinations to head off SSRF. OpenAI-compatible covers OpenAI, Azure AI Foundry `\u002Fopenai\u002Fv1`, DeepSeek, Groq, MiMo, OpenRouter, and self-hosted vLLM; Azure OpenAI adds deployment URL + `api-version`; Google uses Gemini `:streamGenerateContent`.\n- **User-saved templates.** Once you like a render, `POST \u002Fapi\u002Ftemplates` snapshots the HTML + metadata into the SQLite `templates` table. The next project picks it from a \"your templates\" row in the picker — same surface as the shipped 31, but yours.\n- **Tab persistence.** Every project remembers its open files and active tab in the `tabs` table. Reopen the project tomorrow and the workspace looks exactly the way you left it.\n- **Artifact lint API.** `POST \u002Fapi\u002Fartifacts\u002Flint` runs structural checks on a generated artifact (broken `\u003Cartifact>` framing, missing required side files, stale palette tokens) and returns findings the agent can read back into its next turn. The five-dim self-critique uses this to ground its score in real evidence, not vibes.\n- **Sidecar protocol + desktop automation.** Daemon, web, and desktop processes carry typed five-field stamps (`app · mode · namespace · ipc · source`) and expose a JSON-RPC IPC channel at `\u002Ftmp\u002Fopen-design\u002Fipc\u002F\u003Cnamespace>\u002F\u003Capp>.sock`. `tools-dev inspect desktop status \\| eval \\| screenshot` drives that channel, so headless E2E works against a real Electron shell without bespoke harnesses ([`packages\u002Fsidecar-proto\u002F`](packages\u002Fsidecar-proto\u002F), [`apps\u002Fdesktop\u002Fsrc\u002Fmain\u002F`](apps\u002Fdesktop\u002Fsrc\u002Fmain\u002F)).\n- **Windows-friendly spawning.** Every adapter that would otherwise blow `CreateProcess`'s ~32 KB argv limit on long composed prompts (Codex, Gemini, OpenCode, Cursor Agent, Qwen, Qoder CLI, Pi) feeds the prompt over stdin instead. Claude Code and Copilot keep `-p`; the daemon falls back to a temp prompt-file when even that overflows.\n- **Per-namespace runtime data.** `OD_DATA_DIR` and `--namespace` give you fully isolated `.od\u002F`-style trees, so Playwright, beta channels, and your real projects never share a SQLite file.\n\n## Anti-AI-slop machinery\n\nThe whole machinery below is the [`huashu-design`](https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design) playbook, ported into OD's prompt-stack and made enforceable per-skill via the side-file pre-flight. Read [`apps\u002Fweb\u002Fsrc\u002Fprompts\u002Fdiscovery.ts`](apps\u002Fweb\u002Fsrc\u002Fprompts\u002Fdiscovery.ts) for the live wording:\n\n- **Question form first.** Turn 1 is `\u003Cquestion-form>` only — no thinking, no tools, no narration. The user chooses defaults at radio speed.\n- **Brand-spec extraction.** When the user attaches a screenshot or URL, the agent runs a five-step protocol (locate · download · grep hex · codify `brand-spec.md` · vocalise) before writing CSS. **Never guesses brand colors from memory.**\n- **Five-dim critique.** Before emitting `\u003Cartifact>`, the agent silently scores its output 1–5 across philosophy \u002F hierarchy \u002F execution \u002F specificity \u002F restraint. Anything under 3\u002F5 is a regression — fix and rescore. Two passes is normal.\n- **P0\u002FP1\u002FP2 checklist.** Every skill ships a `references\u002Fchecklist.md` with hard P0 gates. The agent must pass P0 before emitting.\n- **Slop blacklist.** Aggressive purple gradients, generic emoji icons, rounded card with left-border accent, hand-drawn SVG humans, Inter as a *display* face, invented metrics — explicitly forbidden in the prompt.\n- **Honest placeholders > fake stats.** When the agent doesn't have a real number, it writes `—` or a labelled grey block, not \"10× faster\".\n\n## Comparison\n\n| Axis | [Claude Design][cd] (Anthropic) | [Open CoDesign][ocod] | **Open Design** |\n|---|---|---|---|\n| License | Closed | MIT | **Apache-2.0** |","Open Design 是一个本地优先的开源设计工具，旨在成为Anthropic's Claude Design的替代品。它支持通过16种编码代理CLI（如Claude Code、Codex、Qwen等）生成网页、桌面、移动端原型、幻灯片、图像、视频及HyperFrames，并具备72个品牌级别的设计系统。用户可以使用这些技能和设计系统创建高质量的设计作品，并能导出为HTML、PDF、PPTX或MP4格式。该工具特别适合需要快速原型设计、跨平台设计展示以及无代码开发的场景，适用于设计师、开发者和产品经理等角色。",2,"2026-06-06 02:38:22","CREATED_QUERY"]