<h1 align="center">Open Design : l'alternative open source à Claude Design</h1>

> 🔥 **Open Design 0.9.0 est là : créez sans la moindre configuration.** Le [Model Router officiel](https://open-design.ai/amr) est intégré directement dans l'application — aucune configuration supplémentaire, aucun CLI à installer, aucune clé API à préparer. Ouvrez simplement l'application, connectez-vous et commencez à concevoir et à créer immédiatement. [Télécharger 0.9.0](https://github.com/nexu-io/open-design/releases) · [Rejoindre la discussion](https://github.com/nexu-io/open-design/discussions/3524)
>
> 🏅 **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`](../../MAINTAINERS.md) et [Discord](https://discord.gg/qhbcCH8Am4).

<p align="center">
  <img src="https://repo-assets.open-design.ai/resources/images/hero.png" alt="Open Design — l'alternative open source à Claude Design · 150 systèmes de design · 261 plugins · 21 agents de code · 14 fournisseurs de médias" width="100%" />
</p>

<p align="center">
  <a href="https://open-design.ai/">Site web</a> ·
  <a href="https://open-design.ai/">Télécharger</a> ·
  <a href="https://discord.gg/qhbcCH8Am4">Discord</a> ·
  <a href="https://x.com/nexudotio">Suivre @nexudotio</a>
</p>

<p align="center">
  <a href="https://github.com/nexu-io/open-design/releases"><img alt="release" src="https://img.shields.io/github/v/release/nexu-io/open-design?style=flat&color=blueviolet&label=release&include_prereleases&display_name=tag" /></a>
  <a href="../../LICENSE"><img alt="license" src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat" /></a>
  <a href="https://discord.gg/qhbcCH8Am4"><img alt="discord" src="https://img.shields.io/discord/1479002485040480266?style=flat&logo=discord&logoColor=white&label=discord&color=5865F2&cacheSeconds=3600" /></a>
  <a href="QUICKSTART.fr.md"><img alt="quickstart" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat" /></a>
</p>

<p align="center"><a href="../../README.md">English</a> · <a href="README.es.md">Español</a> · <a href="README.pt-BR.md">Português</a> · <a href="README.de.md">Deutsch</a> · <b>Français</b> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · <a href="README.ar.md">العربية</a> · <a href="README.ru.md">Русский</a> · <a href="README.uk.md">Українська</a> · <a href="README.tr.md">Türkçe</a></p>

---

## Qu'est-ce qu'Open Design

🎨 **L'alternative open source et local-first à [Claude Design][cd].** &nbsp;🖥️ **Application de bureau native pour macOS et Windows.** &nbsp;⚡ **Plus de 100 skills** · ✨ **150 systèmes `DESIGN.md` de qualité professionnelle** · 📦 **261 plugins prêts à l'emploi.** &nbsp;🖼️ 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. &nbsp;🤖 **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.

[cd]: https://x.com/claudeai/status/2045156267690213649

---

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

<table>
<tr>
<td valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/home.png" alt="Page d'accueil" /><br/>
<sub><b>Accueil</b> — 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.</sub>
</td>
</tr>
</table>

<table>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/automation.png" alt="Page Automation" /><br/>
<sub><b>Automation</b> — orchestrez des workflows de design répétitifs en automatisations réutilisables et programmables.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/design-system.png" alt="Page Design System" /><br/>
<sub><b>Design System</b> — distillez le <code>DESIGN.md</code> de votre équipe en un contrat de marque qui façonne chaque sortie.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/plugin.png" alt="Page Plugin" /><br/>
<sub><b>Plugin</b> — parcourez, installez et distribuez des plugins de workflow pour étendre la génération à la demande.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/integrations.png" alt="Page Intégrations" /><br/>
<sub><b>Intégrations</b> — connectez des systèmes externes et des outils MCP, et utilisez Open Design depuis n'importe quel IDE, script ou automatisation.</sub>
</td>
</tr>
</table>

### 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 :

<table>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-prototype.png" alt="Prototype" /><br/>
<sub><b>Prototype</b> — 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.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-hyperframe.png" alt="HyperFrame" /><br/>
<sub><b>HyperFrame</b> — mouvement programmatique et graphiques animés, rendus en un véritable MP4 (par ex. 1920×1080 · 30 fps).</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-ppt.png" alt="Présentation" /><br/>
<sub><b>Présentation</b> — des pitch decks que vous pouvez feuilleter, parcourir au clavier et exporter en PPTX / PDF.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-image.png" alt="Image" /><br/>
<sub><b>Image</b> — images et ressources visuelles de qualité professionnelle, avec génération et téléchargement en haute résolution.</sub>
</td>
</tr>
</table>

---

## 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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | Statut &nbsp;&nbsp; | Installation du serveur MCP en une ligne &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |
|---|:---:|---|
| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | ✅ Pris en charge | `od mcp install claude` |
| [Codex CLI](https://github.com/openai/codex) | ✅ Pris en charge | `od mcp install codex` |
| [Cursor](https://www.cursor.com/cli) | ✅ Pris en charge | `od mcp install cursor` |
| [VS Code + GitHub Copilot](https://github.com/features/copilot) | ✅ Pris en charge | `od mcp install copilot` |
| [GitHub Copilot CLI](https://github.com/features/copilot/cli) | ✅ Pris en charge | `od mcp install copilot` |
| Gemini CLI | ✅ Pris en charge | `od mcp install gemini` |
| [OpenCode](https://opencode.ai/) | ✅ Pris en charge | `od mcp install opencode` |
| [OpenClaw](https://github.com/openclaw/openclaw) | ✅ Pris en charge | `od mcp install openclaw` |
| [Antigravity](https://antigravity.google) | ✅ Pris en charge | `od mcp install antigravity` |
| [Cline](https://github.com/cline/cline) | ✅ Pris en charge | `od mcp install cline` |
| [Trae](https://www.trae.ai/) | ✅ Pris en charge | `od mcp install trae` |
| Kimi CLI | ✅ Pris en charge | `od mcp install kimi` |
| [Pi Agent](https://github.com/badlogic/pi-mono) | ✅ Pris en charge | `od mcp install pi` |
| [Mistral Vibe CLI](https://github.com/mistralai/mistral-vibe) | ✅ Pris en charge | `od mcp install vibe` |
| [Hermes Agent](https://github.com/nousresearch/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`.

<p align="center">
  <img src="https://repo-assets.open-design.ai/resources/images/coding-agents.png" alt="Les 21 CLI d'agents de code pris en charge par Open Design — Claude Code · Codex · OpenCode · Hermes · Antigravity · Gemini · Grok Build · Kimi · Cursor Agent · Qwen · Qoder · GitHub Copilot · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek · Reasonix · Aider · Devin · Trae" width="100%" />
</p>

**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`](../../apps/daemon/src/agents.ts). Ajouter un nouveau CLI tient en une seule entrée — voir [`docs/agent-adapters.md`](../../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.

<table>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/01-entry-view.png" alt="Vue d'entrée" /><br/>
<sub><b>Vue d'entrée</b> — 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.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/mobile-onboarding.png" alt="Onboarding mobile" /><br/>
<sub><b>Prototype mobile</b> — 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 <code>assets/frames/</code>.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/dating-web.png" alt="Prototype web dating-web" /><br/>
<sub><b>Prototype web</b> — un tableau de bord éditorial avec barres de défilement, KPI et graphiques. Rendu directement à partir de <code>design-templates/dating-web/</code>.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/gamified-app.png" alt="Application gamifiée" /><br/>
<sub><b>Prototype d'application mobile</b> — 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.</sub>
</td>
</tr>
</table>

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

<table>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/live-dashboard.png" alt="Tableau de bord en direct" /><br/>
<sub><b>Tableau de bord en direct</b> — 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.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/research-decision-room.png" alt="Salle de décision" /><br/>
<sub><b>Salle de décision</b> — un artefact de briefing multi-sources pour les réunions produit / recherche / opérations.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/github-dashboard.png" alt="Tableau de bord GitHub" /><br/>
<sub><b>Tableau de bord façon GitHub</b> — des métriques de dépôt présentées sous forme d'artefact en direct.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/flowai-live-dashboard-template.png" alt="Tableau de bord en direct Flow" /><br/>
<sub><b>Modèle de tableau de bord en direct Flow</b> — un modèle de KPI spécifique à un domaine, mis aux couleurs de la marque via le <code>DESIGN.md</code> actif.</sub>
</td>
</tr>
</table>

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

<table>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/07-magazine-deck.png" alt="Présentation magazine (guizang-ppt)" /><br/>
<sub><b>Mode présentation (guizang-ppt)</b> — mises en page magazine, héro WebGL, checklists P0/P1/P2. Intégré tel quel depuis <a href="https://github.com/op7418/guizang-ppt-skill"><code>op7418/guizang-ppt-skill</code></a> avec sa licence d'origine préservée.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/deck-swiss-international.png" alt="Présentation suisse" /><br/>
<sub><b>Présentation de style Swiss International</b> — ancrée sur une grille, accents monochromes. L'un des <b>15 modèles de présentation</b> et <b>36 thèmes</b> sous <code>design-templates/html-ppt-*/</code>.</sub>
</td>
</tr>
</table>

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

<table>
<tr>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1776662673014_nf0taw_HGRMNDybsAAGG88.jpg" alt="Carte gastronomique illustrée d'une ville" /><br/><sub><b>Carte gastronomique illustrée d'une ville</b><br/>Affiche de voyage éditoriale dessinée à la main</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453149026_gd2k50_HHCSvymboAAVscc.jpg" alt="Scène d'ascenseur cinématographique" /><br/><sub><b>Scène d'ascenseur cinématographique</b><br/>Photo éditoriale en une seule image</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453164993_mt5b69_HHDoWfeaUAEA6Vt.jpg" alt="Portrait anime cyberpunk" /><br/><sub><b>Portrait cyberpunk</b><br/>Avatar de profil — texte néon sur le visage</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1776661968404_8a5flm_HGQc_KOaMAA2vt0.jpg" alt="Évolution d'un escalier en pierre 3D" /><br/><sub><b>Escalier en pierre 3D</b><br/>Infographie en pierre taillée</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453184257_vb9hvl_HG9tAkOa4AAuRrn.jpg" alt="Portrait glamour" /><br/><sub><b>Portrait glamour</b><br/>Prise de vue studio éditoriale</sub></td>
</tr>
</table>

**93 prompts prêts à reproduire** se trouvent dans [`prompt-templates/`](../../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][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.

<table>
<tr>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-saas-product-promo-30s.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" alt="Promo SaaS" /></a><br/><sub><b>Promo produit SaaS de 30 s</b> · 16:9 · révélations 3D d'UI</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-tiktok-karaoke-talking-head.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png" alt="Karaoké TikTok" /></a><br/><sub><b>Karaoké TikTok face caméra</b> · 9:16 · TTS + sous-titres synchronisés mot à mot</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-brand-sizzle-reel.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt="Sizzle reel de marque" /></a><br/><sub><b>Sizzle reel de marque de 30 s</b> · 16:9 · typographie cinétique réactive à l'audio</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-data-bar-chart-race.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" alt="Course de graphiques à barres" /></a><br/><sub><b>Course de graphiques à barres</b> · 16:9 · infographie de données façon NYT</sub></td>
</tr>
<tr>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-flight-map-route.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" alt="Carte de vol" /></a><br/><sub><b>Carte de vol</b> · 16:9 · révélation de trajet façon Apple</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-logo-outro-cinematic.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt="Outro de logo" /></a><br/><sub><b>Outro de logo cinématographique de 4 s</b> · 16:9 · assemblage pièce par pièce + bloom</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-money-counter-hype.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png" alt="Compteur d'argent" /></a><br/><sub><b>Compteur d'argent $0 → $10K</b> · 9:16 · hype façon Apple</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-website-to-video-promo.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" alt="Site web vers vidéo" /></a><br/><sub><b>Site web vers vidéo</b> · 16:9 · capture le site sous 3 fenêtres d'affichage</sub></td>
</tr>
</table>

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/`](../../design-templates/hyperframes/).

[hyperframes]: https://github.com/heygen-com/hyperframes

---

## Pourquoi Open Design

> **En avril 2026, Anthropic a publié [Claude Design][cd] — 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.** Applications de bureau natives pour macOS (Apple Silicon + Intel) et Windows (x64). AppImage Linux sur la voie de publication optionnelle. SQLite à `.od/app.sqlite`, fichiers à `.od/projects/<id>/`, aucune télémétrie, aucun aller-retour vers le cloud.
- 🌍 **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][cd] | 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**](https://open-design.ai/) ou [GitHub Releases](https://github.com/nexu-io/open-design/releases)
- **Windows** (x64) → [**open-design.ai**](https://open-design.ai/) ou [GitHub Releases](https://github.com/nexu-io/open-design/releases)
- **Linux** (AppImage, voie optionnelle) → [GitHub Releases](https://github.com/nexu-io/open-design/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.

```bash
# 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

```bash
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

```bash
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`](../../docs/windows-troubleshooting.md). Démarrage rapide complet, variables d'environnement, Nix flake et flux de build packagé → [`QUICKSTART.fr.md`](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é.

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

Protocole complet des skills → [`docs/skills-protocol.md`](../../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`][acd2]. Changez de système → le prochain rendu utilise les nouveaux tokens. Pas de theme JSON.

<details>
<summary><b>Catalogue complet (cliquez pour déplier)</b></summary>

**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`

</details>

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

[acd2]: https://github.com/VoltAgent/awesome-design-md

---

## Plugins

**261 plugins officiels** se trouvent dans [`plugins/_official/`](../../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/`](../../plugins/_official/scenarios/) | 11 | Scénarios de design complets — [`od-default`](../../plugins/_official/scenarios/od-default/), [`od-design-refine`](../../plugins/_official/scenarios/od-design-refine/), [`od-figma-migration`](../../plugins/_official/scenarios/od-figma-migration/), [`od-code-migration`](../../plugins/_official/scenarios/od-code-migration/), [`od-react-export`](../../plugins/_official/scenarios/od-react-export/), [`od-nextjs-export`](../../plugins/_official/scenarios/od-nextjs-export/), [`od-vue-export`](../../plugins/_official/scenarios/od-vue-export/), [`od-media-generation`](../../plugins/_official/scenarios/od-media-generation/), [`od-new-generation`](../../plugins/_official/scenarios/od-new-generation/), [`od-tune-collab`](../../plugins/_official/scenarios/od-tune-collab/), [`od-plugin-authoring`](../../plugins/_official/scenarios/od-plugin-authoring/) |
| [`image-templates/`](../../plugins/_official/image-templates/) | 45 | Prompts d'image en un coup — éditorial, cinématographique, produit, portrait |
| [`video-templates/`](../../plugins/_official/video-templates/) | 50 | Modèles de mouvement HyperFrames / Seedance / Veo |
| [`design-systems/`](../../plugins/_official/design-systems/) | 142 | `DESIGN.md` de marque emballés en plugins |
| [`atoms/`](../../plugins/_official/atoms/) | 13 | Fragments d'UI réutilisables (boutons, héros, cartes de KPI) |
| [`examples/`](../../plugins/_official/examples/) | 140 | Sorties de référence remixables |

Voir aussi [`plugins/community/`](../../plugins/community/) pour les plugins communautaires et [`plugins/registry/`](../../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](../../docs/agent-adapters.md), Codex, Cursor, Copilot, [OpenClaw](https://github.com/openclaw/openclaw), [Antigravity](https://antigravity.google), 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`](../../plugins/_official/scenarios/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`](../../plugins/_official/scenarios/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) :

```bash
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 :

```bash
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`](../../plugins/spec/SPEC.md) ; développer un plugin avec un agent de code → [`plugins/spec/AGENT-DEVELOPMENT.md`](../../plugins/spec/AGENT-DEVELOPMENT.md) ; modèles minimaux à copier-coller → [`plugins/spec/examples/`](../../plugins/spec/examples/).

### Contribuer un plugin

1. Déposez le dossier du plugin dans [`plugins/community/`](../../plugins/community/) (plugins tiers), ou — pour le livrer empaqueté avec Open Design — dans le tier correspondant de [`plugins/_official/`](../../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`](../../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`](../../plugins/spec/PUBLISHING-REGISTRIES.md).

Point de terminaison du registre des plugins : `GET /api/plugins`. Vue d'ensemble du répertoire → [`plugins/README.md`](../../plugins/README.md) ([简体中文](../../plugins/README.zh-CN.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: .od/projects/<id> })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  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 | Fichiers à `.od/projects/<id>/` + SQLite à `.od/app.sqlite` + `media-config.json` (gitignored, créé automatiquement). `OD_DATA_DIR` relocalise l'ensemble. |
| 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`](../../docs/architecture.md). Protocole des skills → [`docs/skills-protocol.md`](../../docs/skills-protocol.md). Contrat d'adaptateur d'agent → [`docs/agent-adapters.md`](../../docs/agent-adapters.md).

---

## Feuille de route

- [x] Daemon + 21 adaptateurs de CLI d'agents de code + registre de skills + catalogue de systèmes de design
- [x] Application web + chat + formulaire de questions + sélecteur à 5 directions + progression todo + aperçu sandboxé
- [x] Plus de 100 skills · 150 systèmes de design · 5 directions visuelles · 5 cadres d'appareils
- [x] Projets · conversations · messages · onglets · modèles adossés à SQLite
- [x] Proxy BYOK multi-fournisseurs (`/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream`) + protection SSRF
- [x] Import de ZIP Claude Design (`/api/import/claude-design`)
- [x] Protocole sidecar + bureau Electron + automatisation IPC
- [x] API de lint d'artefacts + portail d'auto-critique en 5 dimensions avant émission
- [x] **0.8.0** — infrastructure de marketplace de plugins (261 plugins officiels, spec de manifeste, scripts d'installation par agent)
- [x] **0.9.0** — Open Design AMR (Model Router officiel intégré à l'application : zéro configuration, connexion en un clic)
- [x] 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`](../../docs/roadmap.md).

---

## Communauté

De vraies personnes derrière chaque canal.

- 💬 **Discord** — chat quotidien, partage de plugins, questions → [**discord.gg/qhbcCH8Am4**](https://discord.gg/qhbcCH8Am4)
- 🐦 **X / Twitter** — notes de version, jalons, coulisses → [**@nexudotio**](https://x.com/nexudotio)
- 🗣️ **GitHub Discussions** — Q&R approfondies, RFC, « montrez votre travail » → [**Discussions**](https://github.com/nexu-io/open-design/discussions)
- 🐛 **GitHub Issues** — rapports de bugs, demandes de fonctionnalités → [**Issues**](https://github.com/nexu-io/open-design/issues)

Les labels [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) et [`help-wanted`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) 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/`](../../skills/) · spec dans [`docs/skills-protocol.md`](../../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>/`](../../design-systems/) |
| Un nouveau **plugin** | Déposez `open-design.json` + manifeste sous un dossier de catégorie | [`plugins/community/`](../../plugins/community/) · spec dans [`plugins/spec/SPEC.md`](../../plugins/spec/SPEC.md) · guide de dev agent dans [`plugins/spec/AGENT-DEVELOPMENT.md`](../../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`](../../apps/daemon/src/agents.ts) |
| Corriger un bug ou peaufiner l'UI | Parcourez le label [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) | [Issues →](https://github.com/nexu-io/open-design/issues) |
| Traduire la documentation | Mettez à jour les fichiers `README.<lang>.md` | [`TRANSLATIONS.md`](../../TRANSLATIONS.md) |

### 🤖 Contribuer en tant qu'agent

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

```bash
# 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](../../CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md) · [Français](CONTRIBUTING.fr.md) · [简体中文](CONTRIBUTING.zh-CN.md) · [日本語](CONTRIBUTING.ja-JP.md) · [Português](CONTRIBUTING.pt-BR.md)).

### 🏅 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`](../../MAINTAINERS.md) et l'annonce sur [Discord](https://discord.gg/qhbcCH8Am4).

---

## Mainteneurs

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

<table>
  <tr>
    <td align="center" valign="top" width="200">
      <a href="https://github.com/Nagendhra-web">
        <img src="https://github.com/Nagendhra-web.png" width="96" alt="@Nagendhra-web" /><br/>
        <sub><b>@Nagendhra-web</b></sub>
      </a><br/>
      <sub>Mainteneur</sub>
    </td>
    <td align="center" valign="top" width="200">
      <a href="https://github.com/Sid-Qin">
        <img src="https://github.com/Sid-Qin.png" width="96" alt="@Sid-Qin" /><br/>
        <sub><b>@Sid-Qin</b></sub>
      </a><br/>
      <sub>Mainteneur</sub>
    </td>
  </tr>
</table>

Règles des mainteneurs, critères de promotion et protocole de départ → [`MAINTAINERS.md`](../../MAINTAINERS.md) (aussi [Deutsch](MAINTAINERS.de.md) · [Français](MAINTAINERS.fr.md) · [简体中文](MAINTAINERS.zh-CN.md) · [日本語](MAINTAINERS.ja-JP.md) · [Português](MAINTAINERS.pt-BR.md)).

## Contributeurs

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

<a href="https://github.com/nexu-io/open-design/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=nexu-io/open-design&max=500&columns=20&anon=1&cache_bust=2026-05-30" alt="Contributeurs d'Open Design" />
</a>

---

## Activité du dépôt

<picture>
  <img alt="Open Design — métriques du dépôt" src="https://repo-assets.open-design.ai/resources/images/github-metrics.svg" />
</picture>

Le SVG ci-dessus est régénéré quotidiennement par [`.github/workflows/metrics.yml`](../../.github/workflows/metrics.yml) à l'aide de [`lowlighter/metrics`](https://github.com/lowlighter/metrics).

---

## Mettez-nous une étoile

<p align="center">
  <a href="https://github.com/nexu-io/open-design"><img src="https://repo-assets.open-design.ai/resources/images/star-us.png" alt="Mettez une étoile à Open Design sur GitHub — github.com/nexu-io/open-design" width="100%" /></a>
</p>

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.

<a href="https://star-history.com/#nexu-io/open-design&Date">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&theme=dark&cache_bust=2026-05-28" />
    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&cache_bust=2026-05-28" />
    <img alt="Historique des étoiles d'Open Design" src="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&cache_bust=2026-05-28" />
  </picture>
</a>

---

## Références et filiation

| Projet | Rôle |
|---|---|
| [Claude Design][cd] | Le produit propriétaire dont ce dépôt est l'alternative open source. |
| [`alchaincyf/huashu-design`](https://github.com/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`](https://github.com/op7418/guizang-ppt-skill) | Le skill de PPT web de style magazine, intégré tel quel sous [`design-templates/guizang-ppt/`](../../design-templates/guizang-ppt/). Par défaut pour le mode présentation. |
| [`lewislulu/html-ppt-skill`](https://github.com/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`](https://github.com/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`](https://github.com/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`](https://github.com/VoltAgent/awesome-design-md) | Source du schéma `DESIGN.md` en 9 sections et de 70 systèmes produits. |
| [`bergside/awesome-design-skills`](https://github.com/bergside/awesome-design-skills) | Source des 57 skills de design ajoutés sous `design-systems/`. |
| [`heygen-com/hyperframes`](https://github.com/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][skill] | La convention `SKILL.md` que nous adoptons telle quelle. |

Provenance détaillée → [`docs/references.md`](../../docs/references.md).

[skill]: https://docs.anthropic.com/en/docs/claude-code/skills

## Licence

Apache-2.0. Le `design-templates/guizang-ppt/` intégré conserve sa [LICENSE](../../design-templates/guizang-ppt/LICENSE) d'origine (MIT, [@op7418](https://github.com/op7418)). Le `design-templates/html-ppt/` intégré conserve sa [LICENSE](../../design-templates/html-ppt/LICENSE) d'origine (MIT, [@lewislulu](https://github.com/lewislulu)).
