Open Design

Open source · Local d'abord · BYOK

Open Design

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

Open Design · démo en direct
Parcourir les 110 skills

Pourquoi ce projet existe

Claude Design est devenu viral. Et est resté fermé.

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

Apache-2.0, du début à la fin.

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

Utilisez le CLI que vous avez déjà.

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

Tourne sur votre laptop. Se déploie sur Vercel.

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

Quatre étapes. Aucune improvisation.

OD ne laisse pas le modèle improviser un seul pixel. Chaque brief est verrouillé avant que la peinture commence.

Le formulaire d'abord

Surface · audience · ton · marque · échelle. Trente secondes de boutons radio valent mieux que trente minutes de corrections.

Sélecteur de direction

Pas de charte ? Choisissez parmi 5 directions visuelles curatées — chacune avec une palette OKLch déterministe et un stack de polices.

TodoWrite en streaming

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.

<artifact> rendu

Aperçu dans une iframe en sandbox. Modifiable sur place. Téléchargeable en HTML, PDF, PPTX ou ZIP.

Skill spotlight · html-ppt

Un seul skill. 36 thèmes, 31 layouts, 47 animations, 14 templates de deck.

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.

vue d'ensemble animée html-ppt — slides, layouts, transitions

Variantes « taste-locked »

Même moteur, trois tastes.

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

16 CLIs détectés automatiquement dans votre PATH.

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

Ce en quoi nous croyons, en six lignes.

01

On ne livre pas d'agent. Le vôtre suffit.

+

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

Les Skills sont des fichiers, pas des plugins.

+

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

Les Design Systems sont du Markdown portable, pas du JSON de thème.

+

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 formulaire interactif évite 80 % des corrections.

+

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 donne à l'agent l'impression d'être sur votre laptop.

+

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

Le prompt stack est le produit.

+

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

Open Design n'est pas une île. Vos autres agents le lisent.

+

`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

Open Design face au reste.

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

Image, vidéo, audio — même surface.

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/.

01

gpt-image-2

Affiches · avatars · cartes illustrées · infographies · cartes sociales façon magazine · UI de jeu · stills narratifs de jeu

Évolution d'escalier de pierre 3D agrandir

gpt-image-2

Évolution d'escalier de pierre 3D

Carte food illustrée d'une ville agrandir

gpt-image-2

Carte food illustrée d'une ville

Scène d'ascenseur cinématique agrandir

gpt-image-2

Scène d'ascenseur cinématique

Portrait anime cyberpunk agrandir

gpt-image-2

Portrait anime cyberpunk

Portrait studio glamour agrandir

gpt-image-2

Portrait studio glamour

Anime Fighting Game — Captain Ryuuga vs Kaze Renshin agrandir

gpt-image-2

Anime Fighting Game — Captain Ryuuga vs Kaze Renshin

Three Kingdoms — Guanyu tue Yanliang agrandir

gpt-image-2

Three Kingdoms — Guanyu tue Yanliang

Three Kingdoms — Lyubu tir à l'arc à Yuanmen agrandir

gpt-image-2

Three Kingdoms — Lyubu tir à l'arc à Yuanmen

Three Kingdoms — Zhaoyun fuit avec le berceau agrandir

gpt-image-2

Three Kingdoms — Zhaoyun fuit avec le berceau

HUD MMO open-world Chine antique agrandir

gpt-image-2

HUD MMO open-world Chine antique

Dessin d'enfant aux crayons → photoréaliste agrandir

gpt-image-2

Dessin d'enfant aux crayons → photoréaliste

Décortication d'une chorégraphie otaku — 16 panneaux agrandir

gpt-image-2

Décortication d'une chorégraphie otaku — 16 panneaux

Storyboard de danse sensationnelle — 8 plans agrandir

gpt-image-2

Storyboard de danse sensationnelle — 8 plans

02

Seedance 2.0

15s cinématique t2v + i2v avec audio · shorts narratifs · films produit

lecture au survol agrandir

Seedance 2.0

Music Podcast & Guitare

lecture au survol agrandir

Seedance 2.0

Gros plan visage émotionnel

lecture au survol agrandir

Seedance 2.0

Supercar de luxe cinématique

lecture au survol agrandir

Seedance 2.0

Satire du chat de la Cité interdite

lecture au survol agrandir

Seedance 2.0

Short romance japonaise

lecture au survol agrandir

Seedance 2.0

Vol cinématique de dragon

lecture au survol agrandir

Seedance 2.0

Course-poursuite dans une usine post-apo

lecture au survol agrandir

Seedance 2.0

Trailer de jeu cyberpunk

lecture au survol agrandir

Seedance 2.0

Crimson Horizon Sci-Fi

lecture au survol agrandir

Seedance 2.0

Storyboard d'académie magique

lecture au survol agrandir

Seedance 2.0

Combat de vampires dans une ruelle

lecture au survol agrandir

Seedance 2.0

Esthétique wuxia HK rétro

lecture au survol agrandir

Seedance 2.0

Three Kingdoms — Guanyu tue Yanliang

lecture au survol agrandir

Seedance 2.0

Three Kingdoms — Lyubu tir à l'arc à Yuanmen

lecture au survol agrandir

Seedance 2.0

Three Kingdoms — Zhaoyun fuit avec le berceau

lecture au survol agrandir

Seedance 2.0

Garçon 3D animé construisant en Lego

lecture au survol agrandir

Seedance 2.0

Sauvetage du dragon gardien antique

lecture au survol agrandir

Seedance 2.0

Royaume indien antique — FPV

lecture au survol agrandir

Seedance 2.0

Motion graphics d'intro de personnage

lecture au survol agrandir

Seedance 2.0

Danse de mains d'une femme est-asiatique

lecture au survol agrandir

Seedance 2.0

Biologiste marine en exploration

lecture au survol agrandir

Seedance 2.0

Course de rue cinématique

lecture au survol agrandir

Seedance 2.0

Jumpscare de fusée-grille-pain

lecture au survol agrandir

Seedance 2.0

Pirate Disney vintage et crocodile

lecture au survol agrandir

Seedance 2.0

Fantaisie haute couture hollywoodienne

03

HyperFrames

Motion graphics HTML→MP4 · révélations produit · typographie cinétique · graphiques de données

Outro logo cinématique agrandir

HyperFrames

Outro logo cinématique

Showcase d'app sur trois téléphones agrandir

HyperFrames

Showcase d'app sur trois téléphones

Karaoké TikTok agrandir

HyperFrames

Karaoké TikTok

Course de barres agrandir

HyperFrames

Course de barres

Itinéraire sur carte aérienne agrandir

HyperFrames

Itinéraire sur carte aérienne

Compteur d'argent hype agrandir

HyperFrames

Compteur d'argent hype

Pile d'overlays sociaux agrandir

HyperFrames

Pile d'overlays sociaux

Révélation UI 3D agrandir

HyperFrames

Révélation UI 3D

appuyez sur Échap ou cliquez à côté pour fermer

Quickstart

Trois commandes. Sans inscription.

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

Quatre bascules depuis v0.4.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

Inspect mode — cliquez n'importe quoi dans l'aperçu.

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

Live dashboards passent du démo à l'option par défaut.

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 du Design Jury passe par le system composer.

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

od mcp — Open Design en MCP server.

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

Mettez-nous une étoile

Si ça vous a fait gagner trente minutes — donnez un ★.

Les étoiles ne paient pas le loyer, mais elles disent au prochain designer, agent et contributeur que cette expérience mérite leur attention.

Étoiles Forks Issues Dernier commit
★ Étoile sur GitHub

Apache-2.0

Open source

110

Skills

141

Design Systems

16 + BYOK

CLIs

FAQ

Questions fréquentes

Qu'est-ce qu'Open Design ?

+

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.

En quoi Open Design diffère-t-il de Claude Design ?

+

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.

Open Design peut-il remplacer Claude Design pour mon équipe ?

+

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.

Faut-il un abonnement Claude Pro pour utiliser Open Design ?

+

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.

Quels CLIs d'agents de coding Open Design supporte-t-il ?

+

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.

Comment importer un projet Claude Design existant dans Open Design ?

+

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.

Puis-je auto-héberger Open Design sur Vercel ?

+

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.

Comment ajouter un design system personnalisé à Open Design ?

+

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.

Open Design est-il gratuit ? Quelle licence ?

+

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.

Comment Open Design évite-t-il le look « AI slop » ?

+

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.

Puis-je utiliser Open Design sans installer aucun CLI ?

+

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.

Comment valider ma config provider BYOK sans lancer un chat ?

+

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.

Mes données partent-elles chez Anthropic quand j'utilise Open Design ?

+

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.

Mes autres agents de coding peuvent-ils lire les projets 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.

Qu'est-ce que Critique Theater ?

+

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.

Que sont les live artifacts et quels connecteurs sont supportés ?

+

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

Livrez votre premier artifact en trois minutes.

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.