Le formulaire d'abord
Surface · audience · ton · marque · échelle. Trente secondes de boutons radio valent mieux que trente minutes de corrections.
Open source · Local d'abord · BYOK
L'alternative open source à Claude Design.
Propulsé par le CLI d'agent de coding que vous avez déjà — Claude Code, Codex, Cursor, Gemini, OpenCode, plus onze autres. 110 Skills · 141 Design Systems · 5 directions visuelles · Apache-2.0.
Apache-2.0 · sans inscription · votre CLI, vos clés
Pourquoi ce projet existe
Claude Design d'Anthropic (Opus 4.7, avril 2026) a montré ce qui se passe quand un LLM cesse d'écrire de la prose et se met à livrer des artifacts de design. Il est devenu viral — et est resté propriétaire, payant, dans le cloud uniquement, verrouillé sur le modèle et les skills d'Anthropic. Open Design est l'alternative open source. Même boucle. Même modèle mental orienté artifact. Sans le verrouillage.
Fermé → ouvert
Chaque skill est un fichier. Chaque design system est un fichier Markdown. Chaque prompt est un module TypeScript que vous pouvez lire et modifier.
Agent fourni → le vôtre
16 CLIs d'agents de coding détectés automatiquement dans votre PATH. Aucun installé ? Collez n'importe quel baseUrl + apiKey compatible OpenAI.
Cloud → local
pnpm tools-dev pour le local. SQLite dans .od/. Déploiement Vercel optionnel. Vos données, votre système de fichiers, votre choix.
Comment un prompt devient un artifact
OD ne laisse pas le modèle improviser un seul pixel. Chaque brief est verrouillé avant que la peinture commence.
Surface · audience · ton · marque · échelle. Trente secondes de boutons radio valent mieux que trente minutes de corrections.
Pas de charte ? Choisissez parmi 5 directions visuelles curatées — chacune avec une palette OKLch déterministe et un stack de polices.
Le plan de l'agent arrive en direct sous forme de carte. in_progress → completed se mettent à jour en temps réel. Vous pouvez corriger le tir à moindre coût, en plein vol.
Aperçu dans une iframe en sandbox. Modifiable sur place. Téléchargeable en HTML, PDF, PPTX ou ZIP.
Ce qui est livré dans la boîte
Chaque Skill est un dossier. Chaque Design System est un fichier Markdown à 9 sections. Déposez un dossier, relancez le daemon, ça apparaît dans le sélecteur. Changez de système, le rendu suivant utilise les nouveaux tokens.
Skill spotlight · html-ppt
Le skill html-ppt livré embarque chaque primitive dont un agent de deck a besoin : un mode présentateur, une bibliothèque de layouts, un kit d'animations cinétiques, et 14 templates prêts à forker. Déposez le dossier, relancez le daemon — vous avez un moteur PPT dans le navigateur.
Variantes « taste-locked »
html-ppt-taste-brutalist et html-ppt-taste-editorial sont livrés comme wrappers « taste-locked » indépendants — même skill, esthétique en dur. Trois autres pour les prototypes web : web-prototype-taste-{brutalist,editorial,soft}.
Bring Your Own Agent
Ceux que vous avez installés deviennent des moteurs de design candidats. Permutables d'un clic depuis le sélecteur de modèle.
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
Aucun CLI installé ? POST /api/proxy/stream accepte n'importe quel baseUrl + apiKey + model compatible OpenAI, Azure ou Google. Shim Anthropic-via-OpenAI, DeepSeek, Groq, OpenRouter, Azure OpenAI, Google Vertex, votre vLLM auto-hébergé — tous dans la même boucle. Protégé contre la SSRF côté daemon, sur les destinations loopback, link-local et RFC1918.
Six idées porteuses
01
Le daemon scanne votre PATH à la recherche de 16 CLIs d'agents de coding connus. Ceux qu'il trouve deviennent des moteurs de design candidats, pilotés sur stdio avec un adaptateur par CLI.
02
Chaque skill est SKILL.md + assets/ + references/. Déposez un dossier dans skills/, relancez le daemon, ça apparaît dans le sélecteur. Le bundle magazine-web-ppt est intégré tel quel, licence préservée.
03
Le schéma DESIGN.md à 9 sections — couleur, typographie, spacing, layout, composants, motion, voix, marque, anti-patterns. Chaque artifact lit le système actif. Changez de système → le rendu suivant utilise les nouveaux tokens.
04
Le tour 1, c'est uniquement un <question-form> — pas de réflexion, pas d'outils, pas de narration. Surface · audience · ton · marque · échelle. Le coût d'une mauvaise direction, c'est un tour de chat, pas un deck terminé.
05
Le daemon spawn le CLI avec cwd sur le dossier d'artifacts de votre projet. L'agent reçoit Read, Write, Bash, WebFetch — de vrais outils sur un vrai système de fichiers. SQLite persiste projets, conversations, messages et tabs.
06
Discovery directives + identity charter + DESIGN.md actif + SKILL.md actif + métadonnées projet + side-files de skill. Chaque couche est composable. Chaque couche est un fichier que vous pouvez modifier.
07
`od mcp` expose le projet comme un MCP server stdio. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — tout outil qui parle MCP — lisent vos artifacts, fichiers et métadonnées en direct. Lecture seule à la frontière : lecture de fichiers, recherche, métadonnées. Pas d'écriture, pas d'appel externe.
Le 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)
Chaque couche est composable. Chaque couche est un fichier que vous pouvez modifier.
Comparer
Un produit cloud fermé, un pair desktop ouvert, une web app ouverte. Nous empruntons généreusement à open-codesign et le créditons sur /about — autre format, autre prompt-stack, même étoile polaire.
| Claude Design | Open CoDesign | Open Design | |
|---|---|---|---|
| Licence et coût | |||
| Licence | fermée | MIT | Apache-2.0 |
| Facturation minimale | Pro / Max / Team | BYOK | BYOK — n'importe quelle URL compatible OpenAI |
| Format | |||
| Format | Web (claude.ai) | Desktop (Electron) | Web app + daemon local |
| Déployable sur Vercel | — | — | oui |
| Runtime IA et flux | |||
| Runtime de l'agent | fourni (Opus 4.7) | fourni (pi-ai) | votre CLI existant |
| Flexibilité fournisseur | Anthropic uniquement | 7+ via pi-ai | 16 CLI + proxy BYOK |
| Formulaire (tour 1) | — | — | règle stricte |
| 5 directions visuelles | — | — | oui |
| Auto-critique 5-dim | — | — | porte avant émission |
| Skills, systèmes et migration | |||
| Skills | propriétaires | 12 modules TS | 110 bundles SKILL.md déposables |
| Design systems | propriétaires | DESIGN.md (v0.2) | 141 systèmes livrés |
| Import ZIP Claude Design | n/a | — | oui — reprenez où Anthropic vous a laissé |
Claude Design est une marque d'Anthropic. Open Design n'est ni affilié à Anthropic ni soutenu par Anthropic.
Au-delà du chat
Le chat qui produit du HTML <artifact> pilote aussi la génération d'image, de vidéo et d'audio. Chaque rendu atterrit comme un vrai .png ou .mp4 dans l'espace de travail de votre projet. 95 prompts prêts à reproduire dans prompt-templates/.
Affiches · avatars · cartes illustrées · infographies · cartes sociales façon magazine · UI de jeu · stills narratifs de jeu
agrandir gpt-image-2
Évolution d'escalier de pierre 3D
agrandir gpt-image-2
Carte food illustrée d'une ville
agrandir gpt-image-2
Scène d'ascenseur cinématique
agrandir gpt-image-2
Portrait anime cyberpunk
agrandir gpt-image-2
Portrait studio glamour
agrandir gpt-image-2
Anime Fighting Game — Captain Ryuuga vs Kaze Renshin
agrandir gpt-image-2
Three Kingdoms — Guanyu tue Yanliang
agrandir gpt-image-2
Three Kingdoms — Lyubu tir à l'arc à Yuanmen
agrandir gpt-image-2
Three Kingdoms — Zhaoyun fuit avec le berceau
agrandir gpt-image-2
HUD MMO open-world Chine antique
agrandir gpt-image-2
Dessin d'enfant aux crayons → photoréaliste
agrandir gpt-image-2
Décortication d'une chorégraphie otaku — 16 panneaux
agrandir gpt-image-2
Storyboard de danse sensationnelle — 8 plans
15s cinématique t2v + i2v avec audio · shorts narratifs · films produit
Seedance 2.0
Music Podcast & Guitare
Seedance 2.0
Gros plan visage émotionnel
Seedance 2.0
Supercar de luxe cinématique
Seedance 2.0
Satire du chat de la Cité interdite
Seedance 2.0
Short romance japonaise
Seedance 2.0
Vol cinématique de dragon
Seedance 2.0
Course-poursuite dans une usine post-apo
Seedance 2.0
Trailer de jeu cyberpunk
Seedance 2.0
Crimson Horizon Sci-Fi
Seedance 2.0
Storyboard d'académie magique
Seedance 2.0
Combat de vampires dans une ruelle
Seedance 2.0
Esthétique wuxia HK rétro
Seedance 2.0
Three Kingdoms — Guanyu tue Yanliang
Seedance 2.0
Three Kingdoms — Lyubu tir à l'arc à Yuanmen
Seedance 2.0
Three Kingdoms — Zhaoyun fuit avec le berceau
Seedance 2.0
Garçon 3D animé construisant en Lego
Seedance 2.0
Sauvetage du dragon gardien antique
Seedance 2.0
Royaume indien antique — FPV
Seedance 2.0
Motion graphics d'intro de personnage
Seedance 2.0
Danse de mains d'une femme est-asiatique
Seedance 2.0
Biologiste marine en exploration
Seedance 2.0
Course de rue cinématique
Seedance 2.0
Jumpscare de fusée-grille-pain
Seedance 2.0
Pirate Disney vintage et crocodile
Seedance 2.0
Fantaisie haute couture hollywoodienne
Motion graphics HTML→MP4 · révélations produit · typographie cinétique · graphiques de données
agrandir HyperFrames
Outro logo cinématique
agrandir HyperFrames
Showcase d'app sur trois téléphones
agrandir HyperFrames
Karaoké TikTok
agrandir HyperFrames
Course de barres
agrandir HyperFrames
Itinéraire sur carte aérienne
agrandir HyperFrames
Compteur d'argent hype
agrandir HyperFrames
Pile d'overlays sociaux
agrandir HyperFrames
Révélation UI 3D
Quickstart
Node ~24, pnpm 10.33.x. Tourne sur macOS, Windows et Linux (build AppImage via `pnpm tools-pack linux build --to appimage`). Le daemon crée un dossier .od/ local pour SQLite et les artifacts par projet. Aucune étape d'init.
git clone https://github.com/nexu-io/open-design.git
cd open-design && pnpm install
pnpm tools-dev run web Quoi de neuf · v0.5.0
v0.5.0 fait passer la boucle d'artifact de « rendu une fois et fini » à « on l'affine sans s'arrêter » — Inspect mode pour ajuster les styles élément par élément, live dashboards promus en catégorie d'artifact de premier plan, grille de notation du Design Jury affûtée. Le `od mcp` de v0.4.0 reste là et continue à brancher tout ça sur les autres coding agents de votre laptop.
Réglage par élément
Survol, clic, ajustez le computed style de l'élément — couleur, espacement, taille de police — sans repasser par l'agent. L'artifact se met à jour sur place. Quand ça tient, les changements remontent dans les fichiers source.
v0.5.0 · PR #362
Catégorie de premier plan
Trois nouveaux skills dashboard (`live-dashboard`, le template `clinic-console` sous `live-artifact`, `flowai-live-dashboard-template`) plus un prompt template de tableau de bord d'équipe façon Notion — tous branchent les artifacts sur de vrais connecteurs Composio. Ce qui tourne dans le panneau d'aperçu, ce sont des données vivantes, pas des mocks figés.
v0.5.0 · PR #778 + #795 + #801 + #799
Garde-fou qualité · Phase 5
La grille de notation de chaque panéliste vit désormais dans un prompt template au niveau du panel, injectée via le system composer partagé. D'un run à l'autre, les évaluations restent cohérentes. Persistance, transcript et orchestrateur de la Phase 4 sont reconduits.
v0.5.0 · PR #524
Protocole
Lancez `od mcp` et n'importe quel agent de coding qui parle MCP (Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf) lit directement les fichiers, l'index de recherche et les métadonnées de votre projet. Read-only à la frontière. Le projet ouvert dans l'app OD est désormais celui que tous les autres agents voient.
v0.4.0 · PR #399
La filiation d'Open Design
alchaincyf
Boussole de philosophie design
Workflow Junior-Designer, protocole brand-asset en 5 étapes, checklist anti-AI-slop, auto-critique 5 dimensions, et les 5 écoles × 20 philosophies design derrière le sélecteur de direction d'Open Design.
op7418
Mode deck
Intégré tel quel sous skills/guizang-ppt/ avec sa LICENSE d'origine. Les layouts magazine, le hero WebGL et la culture des checklists P0/P1/P2 ont nourri tous les autres skills d'Open Design.
OpenCoworkAI
Pair le plus proche · étoile polaire UX
Boucle d'artifact en streaming, aperçu en iframe sandbox, panneau d'agent en direct (todos + tool calls + interruptible), export cinq formats, annotations en mode commentaire. Le format diverge délibérément — open-codesign livre Electron + pi-ai, Open Design livre web + daemon local + votre CLI.
multica-ai
Architecture daemon
Détection d'agent par scan du PATH, daemon local comme seul processus privilégié, vision de l'agent comme coéquipier. Open Design adopte le modèle d'architecture ; le code de multica lui-même n'est pas embarqué.
Mettez-nous une étoile
Les étoiles ne paient pas le loyer, mais elles disent au prochain designer, agent et contributeur que cette expérience mérite leur attention.
Apache-2.0
Open source
110
Skills
141
Design Systems
16 + BYOK
CLIs
FAQ
Open Design est l'alternative open source à Claude Design d'Anthropic. Tourne en local avec pnpm tools-dev, se déploie sur Vercel, et utilise le CLI d'agent de coding que vous avez déjà (Claude Code, Codex, Cursor, Gemini, OpenCode, +11 autres) comme moteur de design. Sous licence Apache-2.0.
Claude Design est propriétaire, payant (Pro/Max/Team), cloud uniquement, et verrouillé sur le modèle et les skills d'Anthropic. Open Design est open source, BYOK, local d'abord, et vous laisse changer librement de modèle entre 16 adaptateurs CLI ou n'importe quel endpoint compatible OpenAI / Azure / Google.
Si vous avez besoin d'auto-hébergement, de flexibilité de modèle ou de skills personnalisés, oui. La boucle complète (détection de l'agent → choix du skill + design system → chat → parsing de <artifact> → aperçu → sauvegarde) tourne de bout en bout. v0.4.x a ajouté Critique Theater (notation par le Design Jury avant émission), Tweaks mode (sélecteur d'élément + pièces jointes au chat), Manual edit mode, et les live artifacts qui tirent de vraies données via les connecteurs Composio.
Non. Open Design utilise le CLI d'agent de coding que vous avez déjà sur votre PATH, ou n'importe quelle clé API compatible OpenAI via le proxy BYOK. Apportez vos propres clés pour le fournisseur que vous préférez.
16 dès le départ : 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 et Pi. Détectés automatiquement dans le PATH au démarrage du daemon.
Glissez un export ZIP Claude Design dans la boîte de bienvenue. POST /api/import/claude-design l'extrait dans un vrai dossier .od/projects/<id>/, ouvre le fichier d'entrée comme tab, et prépare un prompt de continuation pour votre agent local.
Oui. La couche web est Next.js 16 + React 18 + TypeScript, déployable sur Vercel. Le daemon local reste sur votre laptop. La Topologie B (Vercel + tunnel) pour des setups entièrement distants est sur la roadmap.
Déposez un fichier DESIGN.md dans design-systems/<votre-marque>/ en suivant le schéma à 9 sections (couleur, typographie, spacing, layout, composants, motion, voix, marque, anti-patterns). Relancez le daemon — il apparaît dans le sélecteur.
Apache-2.0. Les bundles skills/guizang-ppt/ et skills/html-ppt/ conservent leur licence MIT d'origine, attribution préservée. Pas de palier payant. Pas de limite d'utilisation. Le seul coût, c'est ce que votre fournisseur LLM facture.
Un formulaire au tour 1 verrouille le brief avant que le modèle peigne. Un sélecteur de 5 directions fournit des palettes déterministes en l'absence de charte. Une auto-critique 5 dimensions note le rendu avant émission. Chaque skill embarque une checklist P0/P1/P2 imposée via injection de side-files au pre-flight. Les dégradés violets agressifs, les emojis génériques et l'usage d'Inter en display sont explicitement interdits dans le prompt stack.
Oui. POST /api/proxy/stream relaie les chunks SSE vers n'importe quel endpoint compatible OpenAI, Azure ou Google. Collez baseUrl, apiKey et model — DeepSeek, Groq, OpenRouter, MiMo, Azure OpenAI, Google Vertex, votre vLLM auto-hébergé, le shim Anthropic-via-OpenAI — tout fonctionne. Protégé contre la SSRF sur loopback et réseaux privés.
Settings → Execution a un bouton Connection test (v0.5.0, PR #507). Collez baseUrl + apiKey + model, cliquez Test — Open Design envoie un handshake minimal au provider et affiche soit la réponse, soit le frame d'erreur exact. Compatible Anthropic, OpenAI-compat, Azure et Google. Évite l'aller-retour « ouvrir un chat puis tracer la panne » quand la clé est mauvaise, le nom de modèle est mal tapé ou que le gateway bloque.
Uniquement si vous choisissez le modèle d'Anthropic (Claude Code ou via le proxy BYOK avec une clé Anthropic). Open Design lui-même garde tout dans un SQLite local sous .od/app.sqlite et dans des fichiers par projet sous .od/projects/. Rien n'est uploadé sur des serveurs Open Design — il n'y a pas de serveurs Open Design.
Oui. Lancez `od mcp` et Open Design expose un MCP server stdio. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — tout outil qui parle MCP — peut lire vos fichiers de projet, lancer une recherche, inspecter les métadonnées. L'interface est read-only à la frontière : lecture de fichiers, search, métadonnées. Pas de surface d'écriture, pas d'appels externes. Livré en v0.4.0.
Un Design Jury à 5 panélistes qui note chaque artifact avant qu'il sorte — accessibilité, fit de marque, craft, contenu, structure. Persistance + transcript + orchestrateur sont end-to-end depuis la Phase 4 de v0.4.0. Sous le seuil configuré, l'agent réécrit et renote ; au-dessus, l'artifact est émis.
Les live artifacts tirent des données vivantes dans le panneau d'aperçu via un catalogue de connecteurs Composio — GitHub, Linear, Notion, Gmail, et d'autres. Les skills livrés orbit-general / orbit-github / orbit-gmail / orbit-linear / orbit-notion ainsi que social-media-dashboard montrent le câblage end-to-end. Livré en v0.4.0 (PR #381).
Livrer
Clonez le repo. Lancez trois commandes. Tapez un prompt. Regardez le formulaire arriver, remplissez-le, regardez la carte todo streamer, regardez l'artifact se rendre.