nexu-io-open-design/docs/i18n/README.fr.md

Open Design : l'alternative open source à Claude Design

🔥 Open Design 0.10.0 est là : l'espace de travail design Agentic tout-en-un. Tout le métier tient désormais dans une seule fenêtre — partez d'une idée vague, découvrez des références, rassemblez la matière, éditez de manière interactive, mettez vos commentaires en file d'attente, peaufinez les animations, puis transmettez le résultat à un éditeur ou à un Code Agent — sans quitter l'application. Avec les sessions parallèles, ce n'est plus un assistant, mais une équipe de design locale qui travaille pour vous. Télécharger 0.10.0 · Rejoindre la discussion

⚡ Open Design AMR (Agentic Model Router) — le service de modèles officiel. Une seule recharge pour utiliser GPT, Claude, Gemini et DeepSeek directement dans Open Design : plus de 20 modèles phares, zéro configuration, facturation à l'usage réel des tokens. Essayer AMR

🏅 Le programme Open Design Fellow est désormais ouvert. Si vous croyez vous aussi que le design devrait être ouvert — devenez Open Design Fellow, façonnez le produit aux côtés de l'équipe principale et aidez davantage de personnes à participer à la définition de l'avenir du design. Détails → MAINTAINERS.md et Discord.

Site web · Télécharger · Model Router · Discord · Suivre @nexudotio

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

---

Qu'est-ce qu'Open Design

🎨 L'alternative open source et local-first à Claude Design.  🖥️ Application de bureau native pour macOS et Windows.  ⚡ Plus de 100 skills · ✨ 150 systèmes DESIGN.md de qualité professionnelle · 📦 261 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 Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity et 21 CLI locaux, ou tout point de terminaison compatible OpenAI via BYOK.

Open Design, c'est ce que vous obtenez lorsque la boucle agent-native lancée par Anthropic avec Claude Design — découvrir le brief, verrouiller la direction, diffuser l'artefact en flux, critiquer, livrer — cesse d'être fermée et devient un système de fichiers de skills, de systèmes de design et de plugins que les agents de code déjà présents sur votre ordinateur peuvent lire, écrire et remixer. Votre CLI devient le moteur de design, votre ordinateur devient le studio, et le DESIGN.md de votre équipe devient 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 de ce qu'est Open Design et de ce qu'il fait. Partez de la page Accueil, orchestrez des workflows récurrents avec Automation, distillez un contrat de marque dans Design System, et étendez le tout avec les Plugins et les intégrations ; à l'intérieur du Studio de n'importe quel projet, le même système de design produit en flux des prototypes, des artefacts en direct, des HyperFrames, des présentations et des images.

Pages principales

Accueil — le point d'entrée de la vue d'ensemble. Choisissez un skill et un système de design, saisissez le brief et lancez tout depuis un seul endroit.

Automation — orchestrez des workflows de design répétitifs en automatisations réutilisables et programmables.	Design System — distillez le DESIGN.md de votre équipe en un contrat de marque qui façonne chaque sortie.
Plugin — parcourez, installez et distribuez des plugins de workflow pour étendre la génération à la demande.	Intégrations — connectez des systèmes externes et des outils MCP, et utilisez Open Design depuis n'importe quel IDE, script ou automatisation.

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

À l'intérieur du Studio d'un projet, le même système de design produit en flux plusieurs types d'artefacts :

Prototype — artefacts HTML d'une seule page qui lisent votre système de design et s'affichent dans une iframe sandboxée, prévisualisables instantanément et téléchargeables en tant que source.	HyperFrame — mouvement programmatique et graphiques animés, rendus en un véritable MP4 (par ex. 1920×1080 · 30 fps).
Présentation — des pitch decks que vous pouvez feuilleter, parcourir au clavier et exporter en PPTX / PDF.	Image — images et ressources visuelles de qualité professionnelle, avec génération et téléchargement en haute résolution.

---

Compatibilité des plateformes

Open Design se présente sous forme de skills, d'un CLI et d'un serveur MCP que les principaux agents de code consomment nativement. Une fois OD installé, une seule commande od mcp install <agent> câble le serveur MCP dans la configuration de cet agent, et vous appelez les mêmes outils depuis n'importe quel agent.

Agent de code / plateforme	Statut	Installation du serveur MCP en une ligne
Claude Code	✅ Pris en charge	od mcp install claude
Codex CLI	✅ Pris en charge	od mcp install codex
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
Gemini CLI	✅ Pris en charge	od mcp install gemini
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
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

od mcp install <agent> --print pour un aperçu à blanc · --uninstall pour supprimer · liste complète avec od mcp install --help.

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 prise en charge d'OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM ou tout point de terminaison compatible OpenAI. Une protection SSRF par cible bloque les IP internes / link-local / CGNAT à la périphérie du daemon.

Le contrat d'adaptateur et les parseurs de flux se trouvent dans apps/daemon/src/agents.ts. Ajouter un nouveau CLI tient en une seule entrée — voir 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.

Vue d'entrée — choisissez un skill, choisissez un système de design, saisissez le brief. Une seule surface pour les prototypes, les tableaux de bord, les présentations, les applications mobiles, les pages de magazine.	Prototype mobile — habillage iPhone 15 Pro au pixel près, parcours multi-écrans. L'agent ne redessine jamais le cadre du téléphone ; les cadres d'appareils partagés se trouvent dans assets/frames/.
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 Open Design. 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 Open Design

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.

Open Design (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 actif — un schéma en 9 sections couvrant palette, typographie, espacement, mouvement, voix, anti-patterns. 150 systèmes sont fournis avec le dépôt (Linear, Stripe, Vercel, Airbnb, Apple, Tesla, Notion, Anthropic, Cursor, Supabase, Figma…). Déposez un dossier, le sélecteur le trouve.
• 🖥️ Local-first, BYOK à chaque couche. Les applications de bureau natives restent local-first, sans aller-retour vers le cloud. Avant de décrire des chemins de données du daemon, vous DEVEZ lire AGENTS.md à la racine, section Daemon data directory contract.
• 🌍 Composable sur trois plans. Les plugins portent des workflows exécutables · les skills portent le goût du design de l'agent · les systèmes de design portent la marque. Tous trois sont de simples fichiers que n'importe qui peut écrire, versionner 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	Open Design
Open source	❌	❌	❌	✅ Apache-2.0
Auto-hébergement / bureau	❌	❌	❌	✅ macOS + Windows + Vercel
Agent-native (s'exécute dans votre CLI)	Anthropic uniquement	❌	Agent cloud uniquement	✅ 21 CLI + BYOK
DESIGN.md de qualité professionnelle	Propriétaire	Theme JSON	Tokens limités	✅ 150 systèmes fournis
Skills / plugins / modèles	Fermé	Boutique de plugins	Fermé	✅ Plus de 100 skills · 261 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 Open Design. 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 et 150 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 Open Design 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.

# One-line install into the agent you're using:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | openclaw | antigravity | gemini
#         | pi | vibe | hermes | cline | kimi | trae | opencode

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

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

L'agent lit skills/, choisit le bon SKILL.md, lie le DESIGN.md que vous avez nommé, et émet un <artifact> prévisualisable à http://localhost:7456.

🐳 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://localhost:7456

🧑‍💻 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

Node ~24, pnpm 10.33.x. Utilisateurs de Windows, consultez docs/windows-troubleshooting.md. Démarrage rapide complet, variables d'environnement, Nix flake 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

1. 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…
2. 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.
3. L'agent émet le premier <artifact>. Plugin + skill + DESIGN.md sont liés. Il se diffuse en flux dans une iframe sandboxée, modifiable sur place — pas « régénérer à partir de zéro ».
4. 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.
5. Open Design 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 Open Design depuis votre agent de code

Open Design 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 Open Design 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):
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

# Then the agent can:
od search-files "primary button"      # search files across projects
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug>                # latest rendered artifact
od plugin run web-prototype --brief "..."
od skill list --scenario marketing

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

---

Skills

Plus de 100 skills fournis prêts à l'emploi — chacun est un dossier sous skills/ suivant la convention SKILL.md de Claude Code, étendue d'un frontmatter od: (mode, platform, scenario, preview.type, design_system.requires, default_for, fidelity, example_prompt). Déposez un dossier, redémarrez le daemon, il apparaît dans le sélecteur.

Deux modes ancrent le catalogue : prototype (artefacts d'une seule page web/mobile/bureau) et deck (présentations à balayage horizontal). Également les modes image, video, audio, template, design-system et utility. Le champ scenario les regroupe par audience : design · marketing · operation · engineering · product · finance · hr · sale · personal.

Skill	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 complet des skills → docs/skills-protocol.md. Point de terminaison du registre des skills : GET /api/skills.

---

Systèmes de design

150 systèmes DESIGN.md de qualité professionnelle sont fournis avec le dépôt — chacun un seul fichier Markdown avec un schéma en 9 sections (couleur, typographie, espacement, mise en page, composants, mouvement, voix, marque, anti-patterns), issus de VoltAgent/awesome-design-md. Changez de système → le prochain rendu utilise les nouveaux tokens. Pas de theme JSON.

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

261 plugins officiels se trouvent dans plugins/_official/. Chaque plugin est un dossier d'agent-skill portable — un SKILL.md (lisible par tout agent prenant en charge les Agent Skills), plus un manifeste open-design.json optionnel qui donne à Open Design des métadonnées de marketplace, des entrées, des aperçus, des pipelines et des déclarations de capacités. Accédez directement à une catégorie :

Catégorie	Nombre	Contenu
scenarios/	11	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
image-templates/	45	Prompts d'image en un coup — éditorial, cinématographique, produit, portrait
video-templates/	50	Modèles de mouvement HyperFrames / Seedance / Veo
design-systems/	142	DESIGN.md de marque emballés en plugins
atoms/	13	Fragments d'UI réutilisables (boutons, héros, cartes de KPI)
examples/	140	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 n'a besoin au minimum que d'un SKILL.md ; pour le lister dans la marketplace Open Design, ajoutez un open-design.json :

my-plugin/
├── SKILL.md            ← required: YAML frontmatter (name · description) + trigger phrasing + workflow (aim for < 500 lines)
├── open-design.json    ← needed to list: marketplace metadata + inputs + pipeline + capabilities
├── 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 (ID stable), version (semver), compat.agentSkills[].path (pointe vers ./SKILL.md), od.kind (skill / scenario / atom / bundle), od.taskKind (new-generation / figma-migration / code-migration / tune-collab), od.mode (la surface de sortie, par ex. 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), od.inputs[] (paramètres au moment 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

1. Déposez le dossier du plugin dans plugins/community/ (plugins tiers), ou — pour le livrer empaqueté avec Open Design — dans le tier correspondant de plugins/_official/.
2. Passez la validation : od plugin validate, pnpm guard, pnpm --filter @open-design/plugin-runtime typecheck.
3. 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).
4. 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/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 })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · copilot · openclaw · antigravity ·│
   │  gemini · opencode · qwen · qoder · hermes (ACP) · kimi (ACP) ·    │
   │  pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek     │
   │  reads SKILL.md + DESIGN.md, writes artifacts to disk             │
   └──────────────────────────────────────────────────────────────────┘

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	iframe srcdoc sandboxée + parseur <artifact> en flux
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

• Daemon + 21 adaptateurs de CLI d'agents de code + registre de skills + catalogue de systèmes de design
• Application web + chat + formulaire de questions + sélecteur à 5 directions + progression todo + aperçu sandboxé
• Plus de 100 skills · 150 systèmes de design · 5 directions visuelles · 5 cadres d'appareils
• Projets · conversations · messages · onglets · modèles adossés à SQLite
• Proxy BYOK multi-fournisseurs (/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream) + protection SSRF
• Import de ZIP Claude Design (/api/import/claude-design)
• Protocole sidecar + bureau Electron + automatisation IPC
• API de lint d'artefacts + portail d'auto-critique en 5 dimensions avant émission
• 0.8.0 — infrastructure de marketplace de plugins (261 plugins officiels, spec de manifeste, scripts d'installation par agent)
• 0.9.0 — Open Design AMR (Model Router officiel intégré à l'application : zéro configuration, connexion en un clic)
• Builds Electron packagés — macOS (Apple Silicon + Intel) + Windows (x64) + AppImage Linux (voie optionnelle)
• Éditions chirurgicales en mode commentaire — partiellement livré ; patching ciblé fiable en cours
• UX du panneau de réglages émis par l'IA — pas encore implémenté
• npx od init pour échafauder un projet avec un DESIGN.md
• SDK de plugins + CLI od plugin {add,list,remove,test,publish}
• Plugins de migration Figma / Pencil → React / Next / Vue (alpha)
• Plugin de rafraîchissement de base de code existante (pointer vers un dépôt git + un DESIGN.md)

Livraison par phases → docs/roadmap.md.

---

Communauté

De vraies personnes derrière chaque canal.

• 💬 Discord — chat quotidien, partage de plugins, questions → discord.gg/qhbcCH8Am4
• 🐦 X / Twitter — notes de version, jalons, coulisses → @nexudotio
• 🗣️ 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

Open Design 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	Déposez un dossier avec SKILL.md + assets/ + references/	skills/ · spec dans docs/skills-protocol.md
Un nouveau système de design	Déposez un DESIGN.md utilisant le schéma en 9 sections	design-systems/<brand>/
Un nouveau plugin	Déposez open-design.json + manifeste 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	Une entrée d'adaptateur + un parseur de flux	apps/daemon/src/agents.ts
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 Open Design Fellow

Nous recrutons des Open Design Fellows dans le monde entier — les Fellows façonnent le produit aux côtés de l'équipe principale, représentent officiellement Open Design 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

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 du schéma DESIGN.md en 9 sections et de 70 systèmes produits.
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 Open Design.
Claude Code skills	La convention SKILL.md que nous adoptons telle quelle.

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

Licence

Apache-2.0. Le design-templates/guizang-ppt/ intégré conserve sa LICENSE d'origine (MIT, @op7418). Le design-templates/html-ppt/ intégré conserve sa LICENSE d'origine (MIT, @lewislulu).