OpenDesign : l'alternative open source à Claude Design

⚡ OpenDesign Cloud — le service de modèles officiel. Une seule recharge pour utiliser des modèles d'agents et d'images dans OpenDesign : GPT, Claude et DeepSeek pour les agents ; GPT Image 2.0, Seedream 5.0 Pro et Nano Banana 2.0 pour les images.

🚀 DeepSeek V4 Flash et V4 Pro sont maintenant disponibles. Mettez une intelligence de premier plan au service des prototypes, présentations, systèmes de design et tâches quotidiennes des agents. Les membres OpenDesign peuvent utiliser les deux modèles sans limite pendant deux semaines, directement dans l'application.

🧩 DeepSeek Harness est maintenant pris en charge. Connectez l'Agent Harness officiel dsh de DeepSeek à OpenDesign en tant que runtime natif, avec raisonnement structuré, appels d'outils, découverte des modèles, annulation et reprise de session. Les fichiers générés restent dans le workflow OpenDesign pour la prévisualisation en direct et la livraison.

Site web · Télécharger · OpenDesign Cloud · Discord · Suivre @OpenDesignHQ

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

Qu'est-ce qu'OpenDesign

🎨 L'alternative open source à Claude Design. 🖥️ Application de bureau native et local-first pour macOS et Windows. ⚡ Skills composables, systèmes de design DESIGN.md fidèles à votre marque et plugins prêts à l'emploi. 🖼️ Génère des prototypes web · bureau · mobile, des tableaux de bord / artefacts en direct, des présentations, des images, de la vidéo, ainsi que des motion graphics HyperFrames. 🔒 Aperçu en iframe sandboxée · export HTML / PDF / PPTX / MP4. 🤖 Fonctionne avec DeepSeek Harness (dsh) · Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Amp · Hermes · Kimi · Antigravity et 26 exécutables CLI locaux distincts, ou tout point de terminaison compatible OpenAI via BYOK.

OpenDesign ouvre la boucle agent-native proposée par Anthropic avec Claude Design — comprendre le brief, fixer la direction, générer l'artefact en continu, le critiquer et le livrer — en la transformant en un système de fichiers de skills fonctionnels, de modèles de rendu, de systèmes de design et de plugins. Les agents de code déjà installés sur votre ordinateur peuvent les lire, les écrire et les remixer. Votre CLI devient le moteur de design, votre ordinateur le studio et le DESIGN.md de votre équipe le contrat de marque.

C'est aussi l'alternative à Figma pour l'ère des agents — au lieu de déplacer des pixels sur un canevas, il livre des artefacts d'une seule page en CSS réel, en polices réelles, en composants réels, exportés directement en HTML / PDF / PPTX / MP4 — déjà façonnés par votre système de design, déjà exécutables au sein de l'agent que vous utilisez chaque jour.

Visite du produit

Un aperçu rapide du workflow principal d'OpenDesign. Commencez sur Home avec un brief, explorez les skills réutilisables dans Plugins et transformez les références de marque en Design System. Entrez ensuite dans le Studio d'un projet pour créer et affiner prototypes, présentations, applications mobiles, images, documents et HyperFrames au même endroit.

Pages principales

Page d’accueil OpenDesign avec types d’artefacts, champ de brief, sélecteur de modèle et exemples

_{Home — Choisissez un type d'artefact, saisissez un brief, puis définissez le système de design, le répertoire de travail et le modèle avant de commencer.}

_{Plugins — Parcourez les skills officiels par catégorie, recherchez dans le catalogue et lancez un workflow avec Try it.} _{Design System — Extrayez et affinez le langage visuel d'une marque, prévisualisez le résultat et continuez à créer avec lui dans le même espace de travail.}

Studio — de nombreux types d'artefacts dans un seul projet

Dans le Studio d'un projet, la conversation, les fichiers générés et la prévisualisation en direct restent réunis pour six types d'artefacts :

_{Prototype — Générez ou reconstruisez des expériences web, inspectez la page rendue et itérez sur place avec l'agent.}	_{Présentation — Créez des présentations de plusieurs diapositives, examinez les miniatures et les notes du présentateur, puis exportez lorsqu'elles sont prêtes.}
_{Application mobile — Générez et peaufinez des interfaces mobiles dans un aperçu d'appareil, avec la conversation, les fichiers de sortie et les prochaines étapes à côté.}	_{Image — Générez des ressources visuelles depuis la conversation du projet, prévisualisez le résultat en taille réelle, puis téléchargez-le ou ouvrez-le.}
_{Document — Créez des guides multipages et des documents éditoriaux soignés, vérifiez la mise en page rendue, puis exportez ou partagez.}	_{HyperFrame — Créez des motion graphics pilotés par le code, prévisualisez l'animation dans Studio et exportez la vidéo finale.}

---

Compatibilité des plateformes

OpenDesign se connecte aux principaux agents de code de deux façons : par des skills, un CLI et un serveur MCP pour les agents qui utilisent OD, et par des adaptateurs de runtime natifs pour les agents qu'OD lance directement. DeepSeek Harness est un runtime natif à part entière via la CLI officielle dsh, avec streaming structuré, découverte des modèles, annulation et reprise de session.

Agent de code / plateforme	Statut	Configuration rapide
Claude Code	✅ Pris en charge	`od mcp install claude`
Claude Desktop	✅ Pris en charge¹	`od mcp install claude-desktop`
Codex CLI	✅ Pris en charge	`od mcp install codex`
DeepSeek Reasonix	✅ Pris en charge	`od mcp install reasonix`
DeepSeek Harness	✅ Runtime natif	`od agent setup deepseek-harness`
Raven	✅ Pris en charge	`od mcp install raven`
Cursor	✅ Pris en charge	`od mcp install cursor`
VS Code + GitHub Copilot	✅ Pris en charge	`od mcp install copilot`
GitHub Copilot CLI	✅ Pris en charge	`od mcp install copilot`
OpenCode	✅ Pris en charge	`od mcp install opencode`
OpenClaw	✅ Pris en charge	`od mcp install openclaw`
Antigravity	✅ Pris en charge	`od mcp install antigravity`
Cline	✅ Pris en charge	`od mcp install cline`
Trae	✅ Pris en charge	`od mcp install trae`
Kimi CLI	✅ Pris en charge	`od mcp install kimi`
Kiro	✅ Pris en charge	`od mcp install kiro`
Pi Agent	✅ Pris en charge	`od mcp install pi`
Mistral Vibe CLI	✅ Pris en charge	`od mcp install vibe`
Hermes Agent	✅ Pris en charge	`od mcp install hermes`

Pour DeepSeek Harness, installez d'abord la CLI officielle dsh, puis sélectionnez-la dans OpenDesign ou lancez od agent setup deepseek-harness pour installer ou réparer le composant de connexion d'OD. Pour les intégrations MCP : od mcp install <agent> --print affiche un aperçu sans modification · --uninstall supprime l'intégration · od mcp install --help donne la liste complète.

¹ La configuration automatique du serveur MCP pour Claude Desktop est actuellement prise en charge uniquement sur macOS et Windows.

Aucun CLI installé ? Le proxy BYOK à POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream vous offre la même boucle (sans spawn de processus) — collez baseUrl + apiKey + model, avec des préréglages pour OpenAI, Atlas Cloud, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM ou tout point de terminaison compatible OpenAI. Atlas Cloud utilise https://api.atlascloud.ai/v1 avec votre propre clé et des identifiants de modèles compatibles OpenAI comme qwen/qwen3.5-flash. Une protection SSRF par cible bloque les IP internes / link-local / CGNAT à la périphérie du daemon.

Les définitions de runtime se trouvent dans apps/daemon/src/runtimes/defs/, avec leur enregistrement et le traitement partagé des flux dans apps/daemon/src/runtimes/. Le contrat des adaptateurs est décrit dans docs/agent-adapters.md.

Démo

Quatre catégories de produits principales, toutes rendues par un agent de code s'exécutant sur votre ordinateur. Cliquez sur une vignette pour voir l'exemple réel.

1 · Prototypes — web · bureau · mobile

La surface de sortie par défaut. Des artefacts HTML d'une seule page qui lisent votre DESIGN.md et s'affichent dans une iframe sandboxée.

_{Prototype web — un tableau de bord éditorial avec barres de défilement, KPI et graphiques. Rendu directement à partir de design-templates/dating-web/.} _{Prototype d'application mobile — un parcours gamifié sur trois écrans avec rubans d'XP et détail de quête. Transmettez-le directement à Cursor / Codex / Claude Code pour le transformer en React/Next/Vue.}

2 · Artefacts et tableaux de bord en direct

Tableaux de bord en direct, salles de décision, murs de KPI — des artefacts d'une seule page qui récupèrent des données via un panneau de réglages et restent modifiables sur place.

_{Tableau de bord en direct — un mur de KPI modifiable dont le panneau de réglages fait apparaître les paramètres qui méritent un ajustement. L'agent émet un manifeste, et l'iframe se réaffiche sans rechargement.}	_{Salle de décision — un artefact de briefing multi-sources pour les réunions produit / recherche / opérations.}
_{Tableau de bord façon GitHub — des métriques de dépôt présentées sous forme d'artefact en direct.}	_{Modèle de tableau de bord en direct Flow — un modèle de KPI spécifique à un domaine, mis aux couleurs de la marque via le DESIGN.md actif.}

3 · Présentations — présentations magazine, mises à jour hebdomadaires, pitches

_{Mode présentation (guizang-ppt) — mises en page magazine, héro WebGL, checklists P0/P1/P2. Intégré tel quel depuis op7418/guizang-ppt-skill avec sa licence d'origine préservée.} _{Présentation de style Swiss International — ancrée sur une grille, accents monochromes. L'un des 15 modèles de présentation et 36 thèmes sous design-templates/html-ppt-*/.}

Chaque présentation s'exporte en HTML (fichier unique, ressources intégrées), PDF (impression navigateur, adaptée aux présentations), PPTX (skill piloté par l'agent), ZIP (archive) ou Markdown.

4 · Images — `gpt-image-2`, ImageRouter, API personnalisée

_{Carte gastronomique illustrée d'une ville
Affiche de voyage éditoriale dessinée à la main}

_{Scène d'ascenseur cinématographique
Photo éditoriale en une seule image}

_{Portrait cyberpunk
Avatar de profil — texte néon sur le visage}

_{Escalier en pierre 3D
Infographie en pierre taillée}

_{Portrait glamour
Prise de vue studio éditoriale}

93 prompts prêts à reproduire se trouvent dans prompt-templates/ — vignettes d'aperçu, corps complet du prompt, modèle cible, ratio d'aspect et attribution de la source. Un clic dépose un brief dans le compositeur.

5 · Vidéo et HyperFrames — motion graphics agent-native

HyperFrames est le framework vidéo open source et agent-native de HeyGen, intégré comme citoyen de première classe dans OpenDesign. L'agent écrit du HTML + CSS + GSAP, et HyperFrames le rend en un MP4 déterministe via Chrome headless + FFmpeg. Associez-le à Seedance 2.0 pour du t2v / i2v cinématographique, à Veo 3 / Sora 2 / Kling 2 pour des variantes de modèles routées, et à Suno v5 / Lyria 2 pour la couche audio.

_{Promo produit SaaS de 30 s · 16:9 · révélations 3D d'UI}	_{Karaoké TikTok face caméra · 9:16 · TTS + sous-titres synchronisés mot à mot}	_{Sizzle reel de marque de 30 s · 16:9 · typographie cinétique réactive à l'audio}	_{Course de graphiques à barres · 16:9 · infographie de données façon NYT}
_{Carte de vol · 16:9 · révélation de trajet façon Apple}	_{Outro de logo cinématographique de 4 s · 16:9 · assemblage pièce par pièce + bloom}	_{Compteur d'argent $0 → $10K · 9:16 · hype façon Apple}	_{Site web vers vidéo · 16:9 · capture le site sous 3 fenêtres d'affichage}

11 modèles HyperFrames + 39 prompts Seedance sont fournis avec le dépôt. Vignettes du catalogue © HeyGen ; le framework est sous Apache-2.0. Le workflow de rendu spécifique à OD (cache de composition, contournement sandbox-exec, MP4-en-chip) est détaillé dans design-templates/hyperframes/.

Pourquoi OpenDesign

En avril 2026, Anthropic a publié Claude Design — la première fois qu'un LLM cessait d'écrire de la prose pour livrer directement des artefacts de design. C'est devenu viral. Mais c'est resté propriétaire, payant uniquement, dans le cloud uniquement, verrouillé sur le modèle d'Anthropic, les skills d'Anthropic, la surface d'Anthropic. Pas de paiement à l'usage, pas d'auto-hébergement, pas de déploiement Vercel, pas de remplacement par votre propre agent.

OpenDesign (OD) est l'alternative open source. La même boucle, le même modèle mental orienté artefact, sans aucun verrouillage :

🤖 Agent-native, agnostique au modèle. Nous ne livrons pas d'agent. Les claude / codex / cursor-agent / copilot / hermes / kimi déjà présents dans votre PATH sont le moteur de design. Changez-en d'un seul clic.
🧠 Qualité professionnelle par défaut. Chaque rendu lit le DESIGN.md du package actif comme contrat de marque central. Le dépôt fournit 151 packages de systèmes de design ; les packages historiques peuvent ne contenir que DESIGN.md, tandis que les plus récents peuvent ajouter manifest.json, tokens.css, des composants, des assets et leur provenance. Déposez un dossier, le sélecteur le trouve.
🖥️ Local-first, BYOK à chaque couche. Applications de bureau natives pour macOS (Apple Silicon et Intel) et Windows (x64), avec une AppImage Linux dans la voie de publication optionnelle. L'analyse d'usage et la relecture de session nécessitent un consentement ; la télémétrie de sécurité et de fiabilité, expurgée des données sensibles, reste active. Avant de décrire des chemins de données du daemon, les contributeurs et opérateurs DOIVENT lire AGENTS.md → Daemon data directory contract. Ce README NE DOIT PAS répéter ce contrat.
🌍 Composable sur quatre plans. Les plugins portent les workflows · les skills fonctionnels le comportement de l'agent · les modèles de design les plans de rendu · les systèmes de design la marque. Ces quatre éléments sont des répertoires portables et versionnables que chacun peut créer et publier.
🔁 Rafraîchissez une base de code existante. Confiez un dépôt git + un DESIGN.md à l'agent et il refactorise vos vrais composants selon les spécifications de la marque. Des plugins dédiés migrent les workflows Figma / Pencil vers du code React / Next.js / Vue.
🔒 Confidentialité par conviction. Tout s'exécute là où vivent vos données — votre ordinateur, le serveur de votre équipe, votre projet Vercel. Lorsque le réseau est nécessaire, le proxy BYOK est protégé contre la SSRF.

Comparaison

	Claude Design	Figma	Lovable / v0 / Bolt	OpenDesign
Open source	❌	❌	❌	✅ Apache-2.0
Auto-hébergement / bureau	❌	❌	❌	✅ macOS + Windows + Docker
Agent-native (s'exécute dans votre CLI)	Anthropic uniquement	❌	Agent cloud uniquement	✅ 26 CLI + BYOK
`DESIGN.md` de qualité professionnelle	Propriétaire	Theme JSON	Tokens limités	✅ 151 systèmes fournis
Skills / plugins / modèles	Fermé	Boutique de plugins	Fermé	✅ Plus de 100 skills fonctionnels · catalogue séparé de modèles de rendu · 277 plugins
HyperFrames (HTML→MP4)	❌	❌	❌	✅ Première classe
Rafraîchir un dépôt existant à la marque	❌	❌	❌	✅ via agent + `DESIGN.md`
Facturation minimale	Pro / Max / Team	Pro / Org	Pro / Team	BYOK · tout point de terminaison compatible

Démarrage rapide

🖥️ Téléchargez l'application de bureau (recommandé — zéro configuration)

Le moyen le plus rapide d'utiliser OpenDesign. Pas de Node, pas de pnpm, pas de clone.

macOS (Apple Silicon · Intel x64) → open-design.ai ou GitHub Releases
Windows (x64) → open-design.ai ou GitHub Releases
Linux (AppImage, voie optionnelle) → GitHub Releases

Après l'installation : l'application détecte automatiquement chaque CLI d'agent de code présent dans votre PATH, charge plus de 100 skills fonctionnels, le catalogue séparé de modèles de rendu et 151 packages de systèmes de design, et vous permet de saisir un brief dans la vue d'entrée.

🤖 Installez-le dans votre agent de code (sans interface)

Vous pouvez utiliser OpenDesign sans jamais ouvrir l'interface graphique — appelez-le en tant que skill, plugin ou serveur MCP à l'intérieur de Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi, et bien d'autres.

Si vous avez installé l'application macOS via le DMG ou le cask Homebrew, votre shell peut encore associer od à l'utilitaire système de représentation octale /usr/bin/od. Dans ce cas, ouvrez Settings → MCP server dans l'application et copiez l'extrait correspondant à votre client : il utilise des chemins absolus et ne dépend pas de la commande od seule.

# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw
#         | antigravity | pi | vibe | hermes | cline | kimi | kiro
#         | trae | opencode

# Hosted equivalent for curl-based setup:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

install.sh est un simple script d'enveloppe pour od mcp install : l'URL hébergée renvoie ainsi un script shell plutôt que la page d'accueil HTML. Le script s'arrête immédiatement si le shell trouve un exécutable od qui n'appartient pas à OpenDesign.

Utilisateurs de macOS / WSL2 : la commande système /usr/bin/od peut masquer celle d'OpenDesign. Dans l'application de bureau, privilégiez l'extrait de Settings → MCP server ; sous WSL2, commencez par le guide de configuration WSL2.

Ensuite, à l'intérieur de l'agent :

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

Dans une exécution CLI locale avec système de fichiers, l'agent compose le skill fonctionnel ou le modèle choisi avec votre DESIGN.md, écrit les fichiers canoniques et OpenDesign les prévisualise. Une exécution BYOK/API sans outils de fichiers renvoie un unique bloc <artifact> complet.

🐳 Exécutez avec Docker

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

Si le navigateur demande des identifiants, utilisez open-design comme nom d'utilisateur et la valeur de OD_API_TOKEN dans deploy/.env comme mot de passe. Le trafic du réseau bridge Docker reste ainsi authentifié, sans exiger le réseau hôte. Les clients API peuvent continuer à utiliser Authorization: Bearer <OD_API_TOKEN>.

🚀 Déployer sur Sealos

Le modèle Sealos App Store exécute l'image Docker publiée d'OpenDesign avec un stockage persistant pour l'espace de travail et une Basic Auth sur le proxy public. Pour les déploiements Docker publics ou partagés personnalisés, suivez les indications de proxy inverse et OPEN_DESIGN_ALLOWED_ORIGINS dans deploy/README.md.

🧑‍💻 Exécutez depuis les sources

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

Ouvrez l'URL affichée par tools-dev ; les ports de développement sont attribués dynamiquement sans flags explicites.

Node ~24, pnpm 10.33.x. Sous WSL2, consultez le guide WSL2 ; sous Windows natif, consultez docs/windows-troubleshooting.md. Démarrage rapide complet, variables d'environnement et flux de build packagé → QUICKSTART.fr.md.

Un workflow complet — du brief à l'artefact

brief → plugin → direction → système de design → artefact → transmission → mémoire

Un PM soumet un brief. Le sélecteur de plugins propose landing page · pitch deck · tableau de bord · publication sociale · spec PM · tableau de scores OKR…
Un designer (ou l'agent) verrouille la direction. Pas de marque ? Choisissez parmi 5 directions sélectionnées. Vous avez une marque ? Déposez une capture d'écran / une URL → l'agent se connecte à GitHub, importe Figma, et codifie un DESIGN.md réutilisable.
L'agent crée le premier livrable. Le plugin, le skill fonctionnel ou le modèle de design et le DESIGN.md sont associés. Les exécutions CLI avec système de fichiers écrivent les fichiers canoniques du projet et l'aperçu suit leurs modifications ; les exécutions BYOK/API sans outils de fichiers renvoient un bloc <artifact> complet.
Transmettez à l'ingénierie. L'artefact est du véritable HTML/CSS — déposez-le dans Cursor, Codex ou Claude Code pour continuer à construire en code. Ou exportez en PPTX / PDF / MP4 directement vers le marketing.
OpenDesign devient plus intelligent à mesure que vous l'utilisez. Vos captures d'écran, polices, palettes et artefacts confirmés s'accumulent comme valeurs par défaut pour la session suivante. Moins de retouches, moins de dérive.

Utilisez OpenDesign depuis votre agent de code

OpenDesign livre un serveur MCP en stdio et des scripts d'installation par agent. Tout agent compatible MCP dans un autre dépôt peut lire directement des fichiers de vos projets OpenDesign locaux — tokens CSS, composants JSX, HTML d'entrée — comme une API structurée interrogeable par nom. L'agent voit toujours le fichier en direct, jamais un export périmé.

# One-line install (16+ CLIs supported):
od mcp install <agent>

# Then the agent can:
od project list --json
od files list <project-id> --json
od files read <project-id> <relative-path>
od plugin list --json
od skills list --json

Pourquoi MCP ? Exporter et rattacher un zip à chaque itération casse le flux. MCP expose directement la source de design — l'agent voit toujours le fichier en direct.

Pour un agent partant de zéro, l'installeur place ~/.config/<agent>/open-design.json (ou l'équivalent de la plateforme) plus un extrait MCP à copier-coller. Cursor obtient un deeplink en un clic ; Claude Code obtient une ligne claude mcp add-json ; chaque autre agent obtient du JSON dans le schéma attendu par sa configuration. Sur une installation macOS de bureau, privilégiez cet extrait dans Settings plutôt que la commande od mcp install <agent> seule dans le terminal : /usr/bin/od peut être prioritaire dans le PATH. Flux complet par agent → Settings → MCP server dans l'application de bureau, ou docs/agent-adapters.md.

Modèle de sécurité. En lecture seule par défaut, le daemon se lie à 127.0.0.1, et la SSRF est bloquée à la périphérie du proxy. L'exposition au réseau local nécessite un OD_BIND_HOST explicite plus OD_ALLOWED_ORIGINS. Les identifiants de connecteurs et les routes d'aperçu d'artefacts en direct restent en loopback uniquement, quoi qu'il en soit.

Points de terminaison de modèles hébergés en interne. Pour prévenir les attaques SSRF, le daemon bloque par défaut les URL de base de fournisseurs qui se résolvent vers des adresses privées ou internes (RFC1918, link-local, CGNAT et adresses de métadonnées cloud), avec l'erreur Internal IPs blocked. Si vous hébergez une passerelle interne, par exemple LiteLLM ou Ollama sur une adresse 10.x / 192.168.x accessible uniquement par VPN, autorisez explicitement cet hôte avec OD_ALLOWED_INTERNAL_HOSTS=<host1>,<host2>,.... Cette liste accepte des noms d'hôtes ou des IP séparés par des virgules ou des espaces (10.0.0.5, litellm.internal.corp) ; une valeur host:port ou une URL complète est ramenée à son nom d'hôte. Les adresses IPv6 doivent être entre crochets, par exemple [fd00::1].

La liste est vide par défaut et ne reconnaît que des hôtes exacts, sans correspondance par sous-domaine ni sous-chaîne. Elle s'applique uniquement aux points de terminaison de fournisseurs que vous configurez : test de connexion, découverte des modèles et chat BYOK. Elle n'assouplit pas la protection des URL de téléchargement renvoyées dans les réponses des fournisseurs. Une entrée mal formée ou une notation CIDR, non prise en charge, est ignorée avec un avertissement : une faute de frappe ne modifie jamais silencieusement la protection. Autoriser un nom d'hôte revient à faire confiance à toutes les adresses vers lesquelles il se résout, comme pour OD_ALLOWED_ORIGINS. Autorisez plutôt l'IP résolue si vous voulez que l'adresse issue de la résolution DNS soit revérifiée.

Skills et modèles de design

Plus de 100 skills fonctionnels sont fournis dans skills/. Chacun suit la convention Agent Skills SKILL.md et fournit des comportements, des références ou des outils réutilisables. Les modèles de rendu se trouvent séparément dans design-templates/ ; ils peuvent eux aussi utiliser SKILL.md, mais alimentent le catalogue de modèles plutôt que le registre des skills fonctionnels.

Deux modes structurent le catalogue : prototype (artefacts monopages web, mobile ou bureau) et deck (présentations à défilement horizontal). D'autres modèles couvrent image, video, audio et les surfaces utilitaires. Le champ scenario regroupe les modèles par public : design · marketing · operation · engineering · product · finance · hr · sale · personal.

Modèle de design	Mode	Scénario	Ce qu'il produit
`web-prototype`	prototype	design	Landing page / héro par défaut
`saas-landing`	prototype	marketing	Héro / fonctionnalités / tarifs / CTA
`dashboard`	prototype	operation	Admin / analytique (avec barre latérale)
`mobile-app`	prototype	design	Application encadrée iPhone 15 Pro / Pixel
`mobile-onboarding`	prototype	design	Parcours splash · proposition de valeur · connexion
`social-carousel`	prototype	marketing	Carrousel 3 cartes 1080×1080
`email-marketing`	prototype	marketing	E-mail de marque sûr en repli sur tableaux
`magazine-poster`	prototype	marketing	Mise en page magazine d'une seule page
`motion-frames`	prototype	marketing	Héro en mouvement CSS en boucle
`sprite-animation`	prototype	marketing	Explainer animé en pixels 8 bits
`pm-spec`	prototype	product	Document de spec PM (avec sommaire + journal de décisions)
`team-okrs`	prototype	product	Tableau de scores OKR
`eng-runbook`	prototype	engineering	Runbook d'incident
`finance-report`	prototype	finance	Synthèse financière pour dirigeants
`hr-onboarding`	prototype	hr	Plan d'onboarding de poste
`guizang-ppt`	deck	marketing	PPT web de style magazine (présentation par défaut)
`html-ppt-*`	deck	marketing	15 modèles de présentation × 36 thèmes (modèle maître dans `design-templates/html-ppt/`)
`hyperframes`	video	marketing	Motion graphics HTML → MP4 (framework OSS de HeyGen)
`critique`	utility	design	Grille d'auto-critique en cinq dimensions
`tweaks`	utility	design	Manifeste de panneau de réglages émis par l'IA

Protocole et séparation des répertoires → docs/skills-protocol.md. Endpoints : GET /api/skills pour les skills fonctionnels et GET /api/design-templates pour les modèles.

Systèmes de design

151 packages de systèmes de design centrés sur DESIGN.md sont fournis. Les packages historiques peuvent ne contenir que ce contrat Markdown ; les plus récents peuvent aussi inclure manifest.json, tokens.css compilé, fixtures, assets et preuves de provenance. Le catalogue mêle sources upstream et ajouts propres au projet ; design-systems/README.md documente forme et provenance. Changez de système : le prochain rendu utilise les nouveaux tokens.

Catalogue complet (cliquez pour déplier)

IA et LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

Outils pour développeurs — cursor · vercel · linear-app · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent

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

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

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

Médias — spotify · playstation · wired · theverge · meta

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

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

Starters — default (Neutral Modern) · warm-editorial

Réimportez la bibliothèque via scripts/sync-design-systems.ts. Ajoutez votre propre marque → déposez un DESIGN.md dans design-systems/<brand>/. Guide complet → design-systems/README.md.

Plugins

277 plugins officiels et 183 exemples remixables se trouvent dans plugins/_official/. Chaque entrée est un répertoire portable ancré par open-design.json et le payload de son type : SKILL.md pour les workflows, template.json pour les modèles média ou DESIGN.md pour les systèmes de design.

Catégorie	Nombre	Contenu
`scenarios/`	13	Scénarios de design complets — `od-default`, `od-design-refine`, `od-figma-migration`, `od-code-migration`, `od-react-export`, `od-nextjs-export`, `od-vue-export`, `od-media-generation`, `od-new-generation`, `od-tune-collab`, `od-plugin-authoring`, `od-share-to-community`, `od-web-effect-extractor`
`image-templates/`	45	Prompts d'image en un coup — éditorial, cinématographique, produit, portrait
`video-templates/`	63	Modèles de mouvement HyperFrames / Seedance / Veo
`design-systems/`	143	`DESIGN.md` de marque emballés en plugins
`atoms/`	13	Fragments d'UI réutilisables (boutons, héros, cartes de KPI)
`examples/`	183	Sorties de référence remixables

Voir aussi plugins/community/ pour les plugins communautaires et plugins/registry/ pour le flux de publication.

Ce que les plugins peuvent faire

🤖 S'exécuter dans n'importe quel agent de code — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi… via le même protocole de skill que l'agent connaît déjà.
🔁 Migrer les workflows Figma / Pencil → source React, Next.js ou Vue. Voir od-figma-migration.
🛠️ Rafraîchir une base de code existante selon des spécifications de marque — pointez un plugin vers un dépôt git + un DESIGN.md, obtenez une PR. Voir od-code-migration.
💾 Persister des workflows personnalisés — les modèles réutilisables de votre équipe côtoient ceux livrés d'origine.

Utiliser les plugins

Les plugins sont à parité totale entre l'interface web et le CLI od — les mêmes points de terminaison /api/plugins, choisissez celui qui convient.

Dans l'application de bureau / web : ouvrez la page Plugin pour parcourir la marketplace et cliquez sur Install ; à l'intérieur du Studio d'un projet, les plugins apparaissent comme des chips dans le compositeur sur lesquelles vous cliquez pour les appliquer (avec les entrées qu'ils déclarent).

En ligne de commande (s'exécute sans interface — c'est la voie qu'utilisent les agents externes) :

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

Chaque commande prend en charge --json, vous pouvez donc la canaliser via jq / xargs dans votre automatisation.

Construire un plugin

Un plugin OpenDesign exige open-design.json et le payload de son type. Les skills et scénarios incluent aussi SKILL.md ; les autres types utilisent leur payload dédié :

my-plugin/
├── open-design.json    ← required: marketplace metadata + inputs + pipeline + capabilities
├── SKILL.md            ← required for agent-skill/scenario entries; omit for other plugin types
├── README.md           ← optional: usage, install, registry links
├── preview/            ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/           ← optional: concrete use cases

Champs principaux de open-design.json : specVersion (actuellement 1.0.0), name (identifiant stable), version (version sémantique), compat.agentSkills[].path (optionnel, pointe vers ./SKILL.md lorsqu'un Agent Skill est exposé), od.kind (skill / scenario / atom / bundle), od.taskKind (new-generation / figma-migration / code-migration / tune-collab), od.mode (surface de sortie, par exemple prototype / deck / live-artifact / image / video / hyperframes / audio / design-system / scenario), od.capabilities[] (déclarez le minimum : une installation restreinte n'accorde que prompt:inject par défaut) et od.inputs[] (paramètres fournis lors de l'application).

Échafaudez + validez localement :

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

Ensemble complet des champs et contrat d'exécution → plugins/spec/SPEC.md ; développer un plugin avec un agent de code → plugins/spec/AGENT-DEVELOPMENT.md ; modèles minimaux à copier-coller → plugins/spec/examples/.

Contribuer un plugin

Déposez le dossier du plugin dans plugins/community/ (plugins tiers), ou — pour le livrer empaqueté avec OpenDesign — dans le tier correspondant de plugins/_official/.
Passez la validation : od plugin validate, pnpm guard, pnpm --filter @open-design/plugin-runtime typecheck.
Remplissez la PR à l'aide du modèle dans plugins/spec/CONTRIBUTING.md (ID, version, voie, mode, capacités, exemples de déclencheurs ; joignez une capture d'écran / un aperçu pour les plugins visuels).
Pour publier sur un registre externe (skills.sh / ClawHub / GitHub autonome) → plugins/spec/PUBLISHING-REGISTRIES.md.

Point de terminaison du registre des plugins : GET /api/plugins. Vue d'ensemble du répertoire → plugins/README.md (简体中文).

Architecture

┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐
│  chat · file workspace · iframe preview · settings · import · MCP     │
└──────────────┬─────────────────────────────────────┬─────────────────┘
               │ /api/*                              │
               ▼                                     ▼
   ┌─────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  local daemon (Express+SQLite)  │   ─→ any OpenAI-compatible BYOK,
   │                                  │       SSRF-guarded at the edge
   │  /api/skills    /api/design-templates    /api/plugins    │
   │  /api/design-systems            │
   │  /api/chat (SSE)   /api/proxy/* │
   │  /api/projects/:id/files/...    │
   │  /api/artifacts/{save,lint}     │
   │  /api/import/claude-design      │
   │  MCP stdio server                │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: managed project cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  Local runtime definitions come from runtimes/registry.ts;                 │
   │  the base registry has 27 definitions (including byok-opencode),           │
   │  backed by 26 distinct local CLI executables because byok-opencode shares │
   │  the OpenCode executable. See docs/agent-adapters.md.                     │
   │  composes a functional skill or design template + DESIGN.md; writes files │
   └──────────────────────────────────────────────────────────────────┘

Couche	Stack
Frontend	Next.js 16 App Router + React 18 + TypeScript
Daemon	Node 24 · Express · streaming SSE · `better-sqlite3`
Stockage	Avant de modifier ou de documenter des chemins de stockage du daemon, vous DEVEZ lire `AGENTS.md` à la racine, section Daemon data directory contract. Ce README NE DOIT PAS le répéter.
Aperçu	Les exécutions filesystem rendent les fichiers canoniques ; BYOK/API analyse un bloc `<artifact>` complet dans une iframe `srcdoc` sandboxée
Export	HTML (intégré) · PDF (impression navigateur) · PPTX (piloté par l'agent) · ZIP · Markdown · MP4 (HyperFrames)
Bureau	Coque Electron + renderer sandboxé + IPC sidecar (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
Cycle de vie	Un seul point d'entrée : `pnpm tools-dev` (start / stop / run / status / logs / inspect / check)

Architecture complète → docs/architecture.md. Protocole des skills → docs/skills-protocol.md. Contrat d'adaptateur d'agent → docs/agent-adapters.md.

Feuille de route

Historique de la livraison par phases (document archivé) → docs/roadmap.md.

Communauté

De vraies personnes derrière chaque canal.

💬 Discord — chat quotidien, partage de plugins, questions → discord.gg/mHAjSMV6gz
🐦 X / Twitter — notes de version, jalons, coulisses → @OpenDesignHQ
🗣️ GitHub Discussions — Q&R approfondies, RFC, « montrez votre travail » → Discussions
🐛 GitHub Issues — rapports de bugs, demandes de fonctionnalités → Issues

Les labels good-first-issue et help-wanted sont la façon la plus simple de se lancer.

Contribuer

OpenDesign continue d'avancer parce que des contributeurs — designers, ingénieurs, auteurs de prompts — continuent de se présenter. Beaucoup des skills, systèmes de design et plugins les plus utilisés ont été écrits par des personnes extérieures à l'équipe principale.

🎯 Par où commencer (effet de levier maximal, changement minimal)

Vous voulez livrer…	Comment	Où
Un nouveau skill fonctionnel	Déposez un dossier avec `SKILL.md` et, si nécessaire, `assets/` + `references/`	`skills/` · spec dans `docs/skills-protocol.md`
Un nouveau modèle de rendu	Ajoutez un bundle `SKILL.md` avec ses ressources de rendu	`design-templates/`
Un nouveau système de design	Déposez un package centré sur `DESIGN.md` ; ajoutez `manifest.json`, `tokens.css`, composants, assets ou provenance selon les besoins	`design-systems/<brand>/`
Un nouveau plugin	Déposez `open-design.json` + le payload propre à son type sous un dossier de catégorie	`plugins/community/` · spec dans `plugins/spec/SPEC.md` · guide de dev agent dans `plugins/spec/AGENT-DEVELOPMENT.md`
Prendre en charge un nouveau CLI d'agent de code	Définition de runtime + entrée de registre ; parseur seulement pour un nouveau format	`apps/daemon/src/runtimes/defs/`
Corriger un bug ou peaufiner l'UI	Parcourez le label `good-first-issue`	Issues →
Traduire la documentation	Mettez à jour les fichiers `README.<lang>.md`	`TRANSLATIONS.md`

🤖 Contribuer en tant qu'agent

Si vous êtes l'agent qui lit ceci, la voie la plus rapide est :

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

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

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

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

Flux complet de contribution adapté aux agents, style de code et exigences pour les PR → English (Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย).

🏅 Programme OpenDesign Fellow

Nous recrutons des OpenDesign Fellows dans le monde entier — les Fellows façonnent le produit aux côtés de l'équipe principale, représentent officiellement OpenDesign dans leur région et font grandir la communauté localement, avec le soutien d'un financement ($1,000 / MR), de crédits LLM gratuits et d'une voie de revue directe. Détails → MAINTAINERS.md et l'annonce sur Discord.

Mainteneurs

Ils portent une grande partie de la charge — maintenance quotidienne, revue et soutien à la communauté.

_{@Nagendhra-web}
_Mainteneur

_@Sid-Qin
_Mainteneur

_@YOMXXX
_Mainteneur

Règles des mainteneurs, critères de promotion et protocole de départ → MAINTAINERS.md (aussi Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย).

Contributeurs

Merci à toutes les personnes qui ont pris part — code, documentation, retours, une issue pertinente, un nouveau skill, un nouveau système de design.

Activité du dépôt

Le SVG ci-dessus est régénéré quotidiennement par .github/workflows/metrics.yml à l'aide de lowlighter/metrics.

Mettez-nous une étoile

Si cela vous a fait gagner trente minutes, mettez-lui une ★. Les étoiles ne paient pas le loyer — mais elles disent au prochain designer, agent et contributeur que cette expérience mérite leur attention. Un clic, trois secondes, un vrai signal.

Références et filiation

Projet	Rôle
Claude Design	Le produit propriétaire dont ce dépôt est l'alternative open source.
`alchaincyf/huashu-design`	La boussole de la philosophie de design — workflow de designer junior, protocole de ressources de marque, checklist anti-AI-slop, critique en cinq dimensions.
`op7418/guizang-ppt-skill`	Le skill de PPT web de style magazine, intégré tel quel sous `design-templates/guizang-ppt/`. Par défaut pour le mode présentation.
`lewislulu/html-ppt-skill`	La famille HTML PPT Studio — 15 modèles de présentation, 36 thèmes, 31 mises en page de page, runtime d'animation, mode présentateur à cartes magnétiques.
`OpenCoworkAI/open-codesign`	La première alternative open source à Claude Design ; des patterns UX que nous empruntons (boucle d'artefact en flux, iframe sandboxée, panneau d'agent en direct).
`multica-ai/multica`	L'architecture daemon + adaptateur — détection d'agents par scan du PATH, daemon local comme unique processus privilégié.
`VoltAgent/awesome-design-md`	Source historique du schéma `DESIGN.md` original en 9 sections et de 70 systèmes dérivés de l'upstream ; les packages actuels peuvent étendre cette base.
`bergside/awesome-design-skills`	Source des 57 skills de design ajoutés sous `design-systems/`.
`heygen-com/hyperframes`	Le framework de motion graphics HTML→MP4, intégré comme `hyperframes-html` de première classe dans OpenDesign.
Claude Code skills	La convention `SKILL.md` que nous adoptons telle quelle.

Provenance détaillée → docs/references.md.

Licence

Apache-2.0. Les skills et modèles intégrés possédant leur propre fichier LICENSE conservent leur licence, notamment design-templates/guizang-ppt/ (MIT, @op7418), design-templates/html-ppt/ (MIT, @lewislulu) et skills/web-clone/ (MIT, @Jane-xiaoer).

FilesExpand file tree

README.fr.md

Latest commit

History