Eerst de vraagvorm
Surface · doelgroep · toon · merk · schaal. Dertig seconden radio-buttons verslaat dertig minuten heen-en-weer.
Opensource · Local-first · BYOK
Open Design
Hét open source-alternatief voor Claude Design.
Aangedreven door de coding-agent CLI die je al hebt — Claude Code, Codex, Cursor, Gemini, OpenCode, plus elf andere. 110 Skills · 141 Design Systems · 5 visuele richtingen · Apache-2.0.
Apache-2.0 · Geen account nodig · Jouw CLI, jouw sleutels
Open Design · live demo
Bekijk alle 110 skills Waarom dit bestaat
Claude Design ging viraal. En bleef dicht.
Anthropic's Claude Design (Opus 4.7, april 2026) liet zien wat er gebeurt als een LLM stopt met proza schrijven en begint met het uitleveren van design-artifacts. Het ging viraal — en bleef closed-source, betaald, cloud-only, vastgeklonken aan Anthropic's model en Anthropic's skills. Open Design is het open source-alternatief. Dezelfde loop. Dezelfde artifact-first denkwijze. Geen lock-in.
Dicht → Open
Apache-2.0, van top tot teen.
Elke skill is een bestand. Elk design system is een Markdown-bestand. Elke prompt is een TypeScript-module die je kunt lezen en aanpassen.
Eigen agent → De jouwe
Gebruik de CLI die je al hebt.
16 coding-agent CLI's worden automatisch op je PATH gevonden. Geen CLI? Plak een willekeurige OpenAI-compatibele baseUrl + apiKey.
Cloud → Lokaal
Draait op je laptop. Deployt naar Vercel.
pnpm tools-dev om lokaal te draaien. SQLite in .od/. Optionele Vercel-deploy. Jouw data, jouw filesystem, jouw keuze.
Hoe een prompt een artifact wordt
Vier stappen. Geen improvisatie.
OD laat het model geen enkele pixel uit de losse pols schilderen. Elke briefing ligt vast voordat het verfwerk begint.
Richtingkiezer
Geen brand-spec? Kies uit 5 zorgvuldig samengestelde visuele richtingen — elk een deterministisch OKLch-palet + font-stack.
TodoWrite-stream
Het plan van de agent verschijnt als live kaart. in_progress → completed updates komen in real time binnen. Je kunt goedkoop bijsturen, midden in de vlucht.
<artifact> rendert
Sandboxed iframe-preview. Direct ter plekke bewerkbaar. Te downloaden als HTML, PDF, PPTX of ZIP.
Wat er in de doos zit
110 Skills × 141 Design Systems.
Elke Skill is een map. Elk Design System is een Markdown-bestand met 9 secties. Sleep een map erin, herstart de daemon, hij verschijnt in de picker. Wissel van systeem en de volgende render gebruikt nieuwe tokens.
Skill spotlight · html-ppt
Eén skill. 36 thema's, 31 layouts, 47 animaties, 14 deck-templates.
De meegeleverde html-ppt skill levert elke primitive die een deck-agent nodig heeft: een presenter-modus, een layout-bibliotheek, een kinetische animatie-set en 14 kant-en-klare templates om te forken. Sleep de map erin, herstart de daemon, je hebt een in-browser PPT-engine.
Taste-locked varianten
Dezelfde engine, drie smaken.
html-ppt-taste-brutalist en html-ppt-taste-editorial worden geleverd als zelfstandige "taste-locked" wrappers — dezelfde skill, esthetiek erin gespijkerd. Drie meer voor webprototypes: web-prototype-taste-{brutalist,editorial,soft}.
Bring your own agent
16 CLI's automatisch gevonden op je PATH.
Welke je ook geïnstalleerd hebt, ze worden kandidaat-design-engines. Wissel met één klik vanuit de model-picker.
claude
Claude Code
stream-json
codex
Codex CLI
json-event-stream
cursor-agent
Cursor Agent
json-event-stream
gemini
Gemini CLI
json-event-stream
opencode
OpenCode
json-event-stream
qwen
Qwen Code
plain
qoder
Qoder CLI
json-event-stream
copilot
GitHub Copilot CLI
stream-json
devin
Devin Terminal
ACP
hermes
Hermes
ACP
kimi
Kimi CLI
ACP
kiro-cli
Kiro CLI
ACP
kilo
Kilo
ACP
vibe-acp
Mistral Vibe
ACP
deepseek
DeepSeek TUI
stream-json
pi
Pi
stdio JSON-RPC
Geen CLI geïnstalleerd? POST /api/proxy/stream accepteert elke OpenAI-compatibele, Azure-compatibele of Google-compatibele baseUrl + apiKey + model. Anthropic-via-OpenAI shim, DeepSeek, Groq, OpenRouter, Azure OpenAI, Google Vertex, je eigen vLLM — allemaal dezelfde loop. SSRF-beveiligd tegen loopback / link-local / RFC1918 bestemmingen aan de daemon-rand.
Zeven dragende ideeën
Waar we in geloven, in zeven regels.
01
We leveren geen agent. De jouwe is goed genoeg.
+
01
We leveren geen agent. De jouwe is goed genoeg.
De daemon scant je PATH op 16 bekende coding-agent CLI's. Welke ie vindt, worden kandidaat-design-engines, aangestuurd via stdio met één adapter per CLI.
02
Skills zijn bestanden, geen plug-ins.
+
02
Skills zijn bestanden, geen plug-ins.
Elke skill is SKILL.md + assets/ + references/. Sleep een map naar skills/, herstart de daemon, hij verschijnt in de picker. De meegeleverde magazine-web-ppt is letterlijk overgenomen, met licentie behouden.
03
Design Systems zijn portable Markdown, geen theme-JSON.
+
03
Design Systems zijn portable Markdown, geen theme-JSON.
Het 9-secties DESIGN.md-schema — kleur, typografie, spacing, layout, componenten, motion, voice, brand, anti-patterns. Elk artifact leest van het actieve systeem. Wissel van systeem → volgende render gebruikt nieuwe tokens.
04
Het interactieve vraagformulier voorkomt 80% van de bijsturing.
+
04
Het interactieve vraagformulier voorkomt 80% van de bijsturing.
Beurt 1 is alleen een <question-form> — geen denkwerk, geen tools, geen verhaal. Surface · doelgroep · toon · merk · schaal. De prijs van een verkeerde richting is één chat-rondje, niet één afgemaakte deck.
05
De daemon laat de agent voelen alsof hij op je laptop zit.
+
05
De daemon laat de agent voelen alsof hij op je laptop zit.
De daemon spawnt de CLI met cwd op de artifact-map van je project. De agent krijgt Read, Write, Bash, WebFetch — echte tools tegen een echt filesystem. SQLite bewaart projecten, conversaties, berichten en tabs.
06
De prompt-stack is het product.
+
06
De prompt-stack is het product.
Discovery directives + identity charter + actieve DESIGN.md + actieve SKILL.md + projectmetadata + skill-side-files. Elke laag is composeerbaar. Elke laag is een bestand dat je kunt aanpassen.
07
Open Design is geen silo. Je andere agents lezen mee.
+
07
Open Design is geen silo. Je andere agents lezen mee.
`od mcp` stelt het project beschikbaar als stdio-MCP-server. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — alles wat MCP spreekt — leest je artifacts, bestanden en metadata direct. Read-only aan de rand: bestand-reads, search, metadata. Geen schrijfvlak, geen externe calls.
De prompt-stack
DISCOVERY directives (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critique)
+ identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
+ active DESIGN.md (141 systems available)
+ active SKILL.md (110 skills available)
+ project metadata (kind, fidelity, speakerNotes, animations, inspiration ids)
+ skill side files (auto-injected pre-flight: read assets/template.html + references/*.md)
+ (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
Elke laag is composeerbaar. Elke laag is een bestand dat je kunt aanpassen.
Vergelijken
Open Design vs het veld.
Closed cloudproduct, open desktop-peer, open webapp. We lenen royaal van open-codesign en geven daar credit voor op /about — andere vorm, andere prompt-stack, dezelfde noordster.
| Claude Design | Open CoDesign | Open Design | |
|---|---|---|---|
| Licentie & kosten | |||
| Licentie | Closed | MIT | Apache-2.0 |
| Minimale facturering | Pro / Max / Team | BYOK | BYOK — plak een OpenAI-compatibele URL |
| Vorm | |||
| Vorm | Web (claude.ai) | Desktop (Electron) | Webapp + lokale daemon |
| Te deployen op Vercel | — | — | Ja |
| AI-runtime & flow | |||
| Agent-runtime | Meegeleverd (Opus 4.7) | Meegeleverd (pi-ai) | Je bestaande CLI |
| Provider-flexibiliteit | Alleen Anthropic | 7+ via pi-ai | 16 CLI + BYOK-proxy |
| Vraagformulier (beurt 1) | — | — | Vaste regel |
| 5 visuele richtingen | — | — | Ja |
| 5-dim zelfkritiek | — | — | Pre-emit gate |
| Skills, systemen & migratie | |||
| Skills | Eigendom | 12 TS-modules | 110 droppable SKILL.md-bundels |
| Design systems | Eigendom | DESIGN.md (v0.2) | 141 systemen meegeleverd |
| Claude Design ZIP-import | n.v.t. | — | Ja — werk verder waar Anthropic ophield |
Claude Design is een handelsmerk van Anthropic. Open Design is niet verbonden aan of onderschreven door Anthropic.
Verder dan chat
Beeld, video, audio — dezelfde surface.
De chat die <artifact>-HTML produceert, drijft ook beeld-, video- en audiogeneratie aan. Elke render landt als echte .png of .mp4 in de werkruimte van je project. 95 kant-en-klare prompts onder prompt-templates/.
01
gpt-image-2
Posters · avatars · geïllustreerde kaarten · infographics · social cards in magazinestijl · game-UI · narratieve game-stills
uitklappen gpt-image-2
3D Stone Staircase Evolution
uitklappen gpt-image-2
Illustrated City Food Map
uitklappen gpt-image-2
Cinematic Elevator Scene
uitklappen gpt-image-2
Cyberpunk Anime Portrait
uitklappen gpt-image-2
Glamorous Studio Portrait
uitklappen gpt-image-2
Anime Fighting Game — Captain Ryuuga vs Kaze Renshin
uitklappen gpt-image-2
Three Kingdoms — Guanyu Slaying Yanliang
uitklappen gpt-image-2
Three Kingdoms — Lyubu Yuanmen Archery
uitklappen gpt-image-2
Three Kingdoms — Zhaoyun Cradle Escape
uitklappen gpt-image-2
Ancient China Open-World MMO HUD
uitklappen gpt-image-2
Crayon Kid Drawing → Photoreal Rework
uitklappen gpt-image-2
Otaku Dance Choreography Breakdown — 16 panels
uitklappen gpt-image-2
Sensational Girl Dance Storyboard — 8 shots
02
Seedance 2.0
15s cinematische t2v + i2v met audio · narratieve shorts · productfilms
Seedance 2.0
Music Podcast & Guitar
Seedance 2.0
Emotional Face Close-up
Seedance 2.0
Luxury Supercar Cinematic
Seedance 2.0
Forbidden City Cat Satire
Seedance 2.0
Japanese Romance Short
Seedance 2.0
Cinematic Dragon Flight
Seedance 2.0
Wasteland Factory Chase
Seedance 2.0
Cyberpunk Game Trailer
Seedance 2.0
Crimson Horizon Sci-Fi
Seedance 2.0
Magical Academy Storyboard
Seedance 2.0
Vampire Alley Fight
Seedance 2.0
Retro HK Wuxia Aesthetic
Seedance 2.0
Three Kingdoms — Guanyu Slaying Yanliang
Seedance 2.0
Three Kingdoms — Lyubu Yuanmen Archery
Seedance 2.0
Three Kingdoms — Zhaoyun Cradle Escape
Seedance 2.0
3D Animated Boy Building Lego
Seedance 2.0
Ancient Guardian Dragon Rescue
Seedance 2.0
Ancient Indian Kingdom — FPV
Seedance 2.0
Character Intro Motion Graphics
Seedance 2.0
East Asian Woman Hand Dance
Seedance 2.0
Marine Biologist Exploration
Seedance 2.0
Street Racing Cinematic
Seedance 2.0
Toaster Rocket Jumpscare
Seedance 2.0
Vintage Disney Pirate Crocodile
Seedance 2.0
Hollywood Haute Couture Fantasy
03
HyperFrames
HTML→MP4 motion graphics · productonthullingen · kinetische typografie · datacharts
uitklappen HyperFrames
Logo Outro Cinematic
uitklappen HyperFrames
App Showcase 3-Phone
uitklappen HyperFrames
TikTok Karaoke
uitklappen HyperFrames
Bar-Chart Race
uitklappen HyperFrames
Flight Map Route
uitklappen HyperFrames
Money Counter Hype
uitklappen HyperFrames
Social Overlay Stack
uitklappen HyperFrames
UI 3D Reveal
Quickstart
Drie commando's. Geen account nodig.
Node ~24, pnpm 10.33.x. Draait op macOS, Windows en Linux (AppImage-build via `pnpm tools-pack linux build --to appimage`). De daemon maakt een lokale .od/-map aan voor SQLite + per-project artifacts. Er is geen init-stap.
git clone https://github.com/nexu-io/open-design.git
cd open-design && pnpm install
pnpm tools-dev run webWat is nieuw · v0.5.0
Eén keer renderen, v0.4.0, eindeloos itereren.
v0.5.0 zet de volgende knik in de artifact-loop — Inspect mode boort door tot DOM-niveau, dashboards trekken live data het paneel in, Critique Theater gaat door naar Phase 5 met een geharde rubric en panelleden die zelf MCP aanroepen. Linux krijgt een eersteklas CLI-lifecycle, Docker Compose krijgt één commando, Nano Banana ligt al voorbedraad klaar.
Inspect mode
Inspect — wijs een DOM-node aan, krijg een schone bewerkbrok.
Klik een element in de preview, Inspect mode geeft de exacte node terug — class, prop, layout — en koppelt dat direct aan de volgende prompt. Geen omweg meer langs de agent om het verhaal opnieuw te vertellen: gewoon aanwijzen en zeggen 'maak dit anders'.
v0.5.0 · PR #672
Live dashboards
Live Artifacts — eersteklas, geen bevroren mocks.
v0.5.0 promoveert live data tot een eigen artifact-categorie. Twee nieuwe dashboard-skills (`live-dashboard`, `flowai-live-dashboard-template`) komen al voorbedraad met Composio-connectoren — trek uit GitHub, Linear, Notion, Gmail, en het artifact werkt zichzelf ter plekke bij.
v0.5.0 · PR #698 + #701
Critique Phase 5
Phase 5 — rubric is aangescherpt, panelleden roepen MCP aan.
Critique Theater gaat door naar Phase 5: de rubric wiebelt niet meer per beoordeling, panelleden roepen MCP-tools aan om bewijs te verifiëren, transcripts zijn gestructureerder, persistentie blijft stabiel als meerdere artifacts parallel draaien.
v0.5.0 · PR #689 + #694
Protocol
od mcp — Open Design als MCP-server.
Draai `od mcp` en elke MCP-bewuste coding-agent (Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf) leest direct de bestanden, zoekindex en metadata van je project. Read-only aan de rand. Uitgebracht in v0.4.0 en nog steeds de hoofdingang voor je coding-agents.
v0.4.0 · PR #399
De stamboom van Open Design
Waaruit Open Design is samengesteld.
alchaincyf
Design-filosofie kompas
huashu-design ↗
Junior-Designer workflow, 5-stappen brand-asset protocol, anti-AI-slop checklist, 5-dimensionale zelfkritiek en de 5 stromingen × 20 design-filosofieën achter de richtingkiezer van Open Design.
op7418
Deck-modus
guizang-ppt-skill ↗
Letterlijk meegeleverd onder skills/guizang-ppt/ met originele LICENSE bewaard. Magazine-layouts, WebGL-hero en P0/P1/P2 checklist-cultuur leven door in elke andere skill van Open Design.
OpenCoworkAI
Dichtstbijzijnde peer · UX-noordster
open-codesign ↗
Streaming artifact-loop, sandboxed iframe-preview, live agent-paneel (todos + tool calls + onderbreekbaar), export in vijf formaten, comment-mode preview-annotaties. De vorm is bewust uiteengelopen — open-codesign levert Electron + pi-ai, Open Design levert web + lokale daemon + jouw CLI.
multica-ai
Daemon-architectuur
multica ↗
PATH-scan agent-detectie, de lokale daemon als enige geprivilegieerde proces, het agent-as-teammate wereldbeeld. Open Design neemt het architectuurmodel over; de multica-code zelf wordt niet meegeleverd.
Geef ons een ster
Heeft dit je dertig minuten bespaard — geef het een ★.
Sterren betalen geen huur, maar ze vertellen de volgende designer, agent en contributor dat dit experiment hun aandacht waard is.
Apache-2.0
Opensource
110
Skills
141
Design Systems
16 + BYOK
CLI's
FAQ
Veelgestelde vragen
Wat is Open Design?
+
Open Design is hét open source-alternatief voor Anthropic's Claude Design. Het draait lokaal met pnpm tools-dev, deployt naar Vercel en gebruikt de coding-agent CLI die je al hebt (Claude Code, Codex, Cursor, Gemini, OpenCode, +11 meer) als design-engine. Apache-2.0 gelicenseerd.
Hoe verschilt Open Design van Claude Design?
+
Claude Design is closed-source, betaald (Pro/Max/Team), cloud-only en vastgeklonken aan Anthropic's model en skills. Open Design is opensource, BYOK, local-first en laat je vrij wisselen tussen 16 CLI-adapters of een willekeurige OpenAI- / Azure- / Google-compatibele endpoint.
Kan Open Design Claude Design vervangen voor mijn team?
+
Als je self-hosting, model-flexibiliteit of custom skills nodig hebt: ja. De gesloten loop (agent detecteren → skill + design system kiezen → chat → <artifact> parseren → preview → opslaan) draait end-to-end. v0.4.x voegde Critique Theater toe (Design Jury-score vóór de uitgave), Tweaks mode (element-picker + chat-bijlagen), Manual edit mode en live artifacts die live data binnenhalen via Composio-connectoren.
Heb ik een Claude Pro-abonnement nodig om Open Design te gebruiken?
+
Nee. Open Design gebruikt welke coding-agent CLI je ook al op je PATH hebt, of een willekeurige OpenAI-compatibele API-sleutel via de BYOK-proxy. Breng je eigen sleutels mee voor welke provider je ook prefereert.
Welke coding-agent CLI's ondersteunt Open Design?
+
16 out-of-the-box: Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Qoder CLI, GitHub Copilot CLI, Devin for Terminal, Hermes, Kimi CLI, Kiro CLI, Kilo, Mistral Vibe, DeepSeek TUI en Pi. Automatisch gevonden op PATH bij daemon-start.
Hoe importeer ik een bestaand Claude Design-project in Open Design?
+
Sleep een Claude Design export-ZIP op het welkomstvenster. POST /api/import/claude-design pakt hem uit naar een echte .od/projects/<id>/-map, opent het entry-bestand als tab en zet een continue-prompt klaar voor je lokale agent.
Kan ik Open Design zelf hosten op Vercel?
+
Ja. De weblaag is Next.js 16 + React 18 + TypeScript, te deployen op Vercel. De lokale daemon blijft op je laptop. Topology B (Vercel + tunnel) staat op de roadmap voor volledig remote setups.
Hoe voeg ik een eigen design system toe aan Open Design?
+
Sleep een DESIGN.md-bestand in design-systems/<jouw-merk>/ volgens het 9-secties schema (kleur, typografie, spacing, layout, componenten, motion, voice, brand, anti-patterns). Herstart de daemon en hij verschijnt in de picker.
Is Open Design gratis? Wat is de licentie?
+
Apache-2.0. De meegeleverde skills/guizang-ppt/ en skills/html-ppt/ behouden hun originele MIT-licenties met attributie. Er is geen betaalde tier. Geen gebruikslimieten. De enige kosten zijn wat je gekozen LLM-provider rekent.
Hoe vermijdt Open Design de AI-slop look?
+
Een vraagformulier in beurt 1 legt de briefing vast voordat het model schildert. Een 5-richtingen kiezer levert deterministische paletten als er geen brand-spec is. Een 5-dimensionale zelfkritiek scoort de output voordat hij wordt uitgegeven. Elke skill levert een P0/P1/P2 checklist die via pre-flight side-file injection wordt afgedwongen. Agressieve paarse gradients, generieke emoji-iconen en Inter-as-display zijn expliciet verboden in de prompt-stack.
Kan ik Open Design gebruiken zonder een CLI te installeren?
+
Ja. POST /api/proxy/stream stuurt SSE-chunks door naar elke OpenAI-, Azure- of Google-compatibele endpoint. Plak een baseUrl, apiKey en model — DeepSeek, Groq, OpenRouter, MiMo, Azure OpenAI, Google Vertex, je eigen vLLM, de Anthropic-via-OpenAI shim, allemaal werken ze. SSRF-beveiligd tegen loopback en private netwerken.
Hoe verifieer ik mijn BYOK-providerconfig zonder een chat te starten?
+
Settings → Execution heeft een Connection test-knop (v0.5.0, PR #507). Plak je baseUrl + apiKey + model, klik Test — Open Design vuurt een minimale handshake af op de provider en toont de respons of het exacte error-frame. Werkt voor Anthropic, OpenAI-compat, Azure en Google. Bespaart je de chat-en-dan-fout-traceren rondgang als de key fout is, de modelnaam verkeerd staat, of de gateway je tegenhoudt.
Wordt mijn data naar Anthropic gestuurd als ik Open Design gebruik?
+
Alleen als je Anthropic's model kiest (Claude Code of via de BYOK-proxy met een Anthropic-sleutel). Open Design zelf bewaart alles in een lokale SQLite in .od/app.sqlite en per-project bestanden onder .od/projects/. Niets wordt geüpload naar Open Design-servers — er zijn geen Open Design-servers.
Kunnen mijn andere coding-agents Open Design-projecten lezen?
+
Ja. Draai `od mcp` en Open Design stelt zichzelf beschikbaar als stdio-MCP-server. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — elke MCP-bewuste tool — kan je projectbestanden lezen, search draaien en metadata inspecteren. De interface is read-only aan de rand: bestand-reads, search, metadata. Geen schrijfvlak, geen externe calls. Uitgebracht in v0.4.0.
Wat is Critique Theater?
+
Een Design Jury met 5 panelleden die elke artifact scoort vóór de uitgave — toegankelijkheid, brand fit, craft, content, structuur. Persistentie + transcript + orchestrator zijn end-to-end vanaf v0.4.0 Phase 4. Onder de ingestelde drempel herziet de agent en herscoort hij; daarboven gaat de artifact eruit.
Wat zijn live artifacts en welke connectoren worden ondersteund?
+
Live artifacts halen live data binnen in het preview-paneel via een Composio-connectorencatalogus — GitHub, Linear, Notion, Gmail en meer. De meegeleverde skills orbit-general / orbit-github / orbit-gmail / orbit-linear / orbit-notion en social-media-dashboard tonen de end-to-end bedrading. Uitgebracht in v0.4.0 (PR #381).
Ship
Lever je eerste artifact in drie minuten.
Clone de repo. Draai drie commando's. Typ een prompt. Zie het vraagformulier verschijnen, vul het in, kijk hoe de todo-kaart streamt, kijk hoe het artifact rendert.