J'ai remplacé Claude Design par cette alternative open source !

Ce guide vous montre comment faire tourner Open Design entièrement sur votre propre machine — sans compte cloud, sans facturation par design, rien ne quitte votre ordinateur portable. L'idée est d'associer Open Design à un exécuteur de modèle local (quelque chose comme Ollama) et aux agents de codage en ligne de commande que vous avez déjà installés, pour que la génération se fasse en local et que votre travail reste privé. Il suit le chemin emprunté par AI Automation Station dans leur tutoriel d'installation locale, réécrit et mis à jour pour correspondre à la version actuelle. Regardez la vidéo ci-dessus pour la démonstration en direct, ou poursuivez votre lecture pour la version écrite.

L'espace de travail Open Design fonctionnant en local — vos projets, votre agent, votre machine.

Qu'est-ce qu'Open Design ?

Open Design est une plateforme de design open source et local-first — une alternative agent-native à Claude Design et Figma. Ce qui rend possible une configuration entièrement locale, c'est son architecture de base : au lieu d'être câblé à un seul fournisseur de modèle, Open Design fonctionne par-dessus l'agent de codage que vous utilisez déjà. Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode et bien d'autres s'y branchent tous. C'est « apportez votre propre agent » plutôt que simplement « apportez votre propre clé ».

Cela compte pour ce tutoriel, car si l'agent que vous choisissez fonctionne en local — un agent en ligne de commande ouvert pilotant un modèle local via un exécuteur comme Ollama — alors toute la boucle reste sur votre machine. Aucun crédit consommé, aucun prompt envoyé à une API distante.

Quelques points à connaître :

• Open source, Apache-2.0 — clonez-le, auto-hébergez-le, lisez chaque ligne.
• Fonctionne en local — vos projets vivent dans vos propres dossiers, pas dans le cloud de quelqu'un d'autre.
• Agents enfichables — plus de 21 agents de codage sont pris en charge ; vous choisissez quelle CLI pilote la génération.
• Plus que des prototypes — prototypes, artefacts en direct, présentations, mises en page de magazine, génération d'images et même vidéo, le tout depuis un seul espace de travail.
• De vrais points de départ intégrés — des design systems inspirés de marques connues (Airbnb, Airtable et d'autres), ainsi que des templates et des préréglages d'images, pour ne jamais vous retrouver devant une toile blanche.

Si vous avez déjà utilisé Claude Design, la sensation vous sera familière. Open Design conserve cette même esthétique apaisante et fonctionne dans le navigateur tout comme Claude Design — puis ouvre le moteur en dessous pour que vous puissiez y brancher l'agent de votre choix.

Avant de commencer

Vous avez trois façons d'installer Open Design. Choisissez celle qui vous convient :

Voie	Idéale pour	Prérequis
Application de bureau	La plupart des gens — aucune configuration	Aucun. Téléchargez et ouvrez, c'est tout.
Exécuter depuis les sources	Les développeurs qui veulent lire ou modifier le code	Node ~24, pnpm 10.33.x
Installer dans votre agent	Ceux qui vivent dans le terminal	Une CLI d'agent de codage existante

La vidéo emprunte la voie d'exécution depuis les sources, mais l'application de bureau est la voie recommandée aujourd'hui — elle n'a besoin ni de Node, ni de pnpm, ni de clonage.

Pour une configuration entièrement locale, vous voudrez aussi avoir installé un agent en ligne de commande capable de fonctionner en local avant de commencer — par exemple OpenCode, qui est livré avec des modèles gratuits intégrés et peut pointer vers un exécuteur local comme Ollama. Open Design le détectera automatiquement dès qu'il sera dans votre PATH.

Étape 1 — Installer Open Design

Option A — Application de bureau (recommandée, aucune configuration)

Rendez-vous sur open-design.ai et cliquez sur Download desktop. Des builds sont disponibles pour macOS (Apple Silicon et Intel), Windows (x64) et Linux (AppImage). Après l'installation, l'application détecte automatiquement chaque CLI d'agent de codage déjà présente dans votre PATH et charge pour vous les skills et design systems intégrés.

Option B — Exécuter depuis les sources

Pour le lancer directement depuis le dépôt — comme dans la vidéo — il vous suffit de quelques commandes :

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

Ouvrez ensuite l'URL locale affichée dans votre terminal. Vous avez besoin de Node ~24 et de pnpm 10.33.x ; Corepack choisira pour vous la version de pnpm épinglée. Le port est attribué dynamiquement, alors utilisez l'adresse affichée par la commande plutôt que d'en deviner une.

Option C — Installer dans votre agent de codage

Pour piloter Open Design depuis le terminal — en l'appelant comme skill ou serveur MCP au sein de votre agent, sans interface graphique — exécutez :

od mcp install <agent>
# od ships with Open Design; <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Puis demandez, au sein de l'agent : Use open-design to generate a dense analytics dashboard with the Airbnb design system.

Premier lancement : connectez votre agent local

La première fois que vous lancez Open Design, il analyse votre machine et affiche tous les agents en ligne de commande qu'il a trouvés — Claude Code, OpenCode, Codex, Gemini et d'autres. C'est le moment qui rend un flux de travail 100 % local concret : vous choisissez quel agent génère vos designs.

• Choisissez un agent local pour ne pas dépenser de crédits. Claude Code est excellent, mais il puise dans vos crédits Claude. Choisir plutôt une option gratuite et locale comme OpenCode signifie que la génération se fait sur votre machine gratuitement. OpenCode regroupe plusieurs modèles gratuits (dont MiniMax) et peut se placer devant un exécuteur local tel qu'Ollama, de sorte que le modèle ne quitte jamais votre ordinateur.
• N'ajoutez des clés d'API de fournisseur que si vous le souhaitez. Il existe un endroit pour coller des clés pour Anthropic, OpenAI, Azure et Google Gemini si vous voulez un jour faire appel à un modèle hébergé. Pour une exécution entièrement locale, vous pouvez sauter cette étape entièrement.
• Ajoutez des fournisseurs de médias (facultatif). Si vous voulez générer des images, de la vidéo ou de l'audio, ajoutez vos propres clés pour ces fournisseurs. C'est la partie « apportez votre propre clé » — et elle est optionnelle.
• Activez les skills et les design systems. N'activez que les capacités dont vous avez besoin pour le travail en cours.

Tout cela peut être modifié plus tard, alors gardez le premier passage simple : choisissez votre agent local et passez à la suite.

Explorez l'espace de travail

Open Design garde votre travail cadré par projet — les designs que vous créez vivent dans le dossier de projet où vous travaillez. Changez de dossier et vous changez de projet.

Démarrez un nouveau prototype (la vidéo en nomme un « Tube Analytics ») et vous avez immédiatement un choix : partir d'un design system ou travailler en format libre. Vous n'êtes pas obligé de définir un design system d'abord. Vous pouvez choisir l'un des systèmes intégrés — le système Claude/Anthropic, Airbnb, Airtable et d'autres — ou importer un ZIP Claude Design pour que tous vos tokens et composants existants suivent.

La bibliothèque de design systems : de vrais points de départ de marques que vous pouvez prévisualiser, dont vous pouvez récupérer le DESIGN.md et que vous pouvez insérer dans n'importe quel projet.

Il y a ici plus que des systèmes de marque. Open Design est livré avec une galerie de designs d'exemple que vous pouvez prévisualiser avant de les utiliser — cliquez sur l'un d'eux et il ouvre un aperçu en direct accompagné du prompt qui l'a produit. Cliquez sur Use prompt pour partir de là. À côté se trouvent des templates d'images que vous pouvez forker comme point de départ.

Designs d'exemple et templates d'images — prévisualisez-en un, puis forkez-le ou réutilisez son prompt.

Construisez quelque chose — en local

Voici maintenant la partie qui prouve que la boucle locale fonctionne. Dans la vidéo, le créateur ouvre un tableau de bord d'analytics SaaS et demande à Open Design de l'étendre.

1. Démarrez le prototype. Choisissez un design system (ou le format libre) et, éventuellement, importez votre ZIP Claude Design pour que l'agent ait le contexte complet de votre design existant.
2. Joignez une référence. Déposez ou collez des images en référence visuelle, ou tapez @ pour joindre un fichier du projet — par exemple un fichier « SaaS Analytics dashboard ».
3. Rédigez le brief. Donnez-lui un prompt concret : « Build out the remaining tabs in the dashboard using your design system. » Vous obtenez la disposition divisée familière — la conversation à gauche, l'aperçu en direct et les fichiers de design à droite.
4. Regardez-le s'exécuter sur votre agent. Open Design appelle la CLI que vous avez choisie — OpenCode, dans la vidéo — et construit les nouveaux écrans. Parce qu'il fonctionne en local via les modèles gratuits d'OpenCode, cela coûte zéro crédit : rien n'est facturé à Claude, Gemini ou Codex. De nouveaux onglets (tendances, générateurs de scripts de contenu, transcriptions, commentaires) apparaissent, stylisés pour correspondre au système existant.
5. Exportez ou déployez. Quand le design est prêt, demandez-lui de le télécharger en ZIP pour le passer dans votre base de code, ou de le déployer directement sur Vercel depuis Open Design — chose que Claude Design n'offre pas. Pour réintégrer les changements dans votre application, déposez le ZIP dans un agent de codage comme Claude Code et dites « implement these design changes using the ZIP file. »

Le résultat est un design réel et interactif — construit de bout en bout sur votre propre machine, avec votre propre agent, gratuitement.

Astuces

• Choisissez un agent local gratuit pour une génération sans frais. OpenCode avec ses modèles gratuits intégrés (ou un modèle local via Ollama) maintient chaque exécution à zéro crédit.
• Gardez les clés hébergées pour quand vous en avez besoin. Ne collez les clés Anthropic/OpenAI/Gemini que si vous voulez faire appel à un modèle premium ; un agent local n'en a besoin d'aucune.
• Vous n'avez pas besoin d'un design system pour commencer. Partez d'un système intégré, importez un ZIP Claude Design, ou allez simplement en format libre.
• Vos designs restent avec le dossier de projet — organisez votre travail en exécutant Open Design sur le bon répertoire.
• L'export est un transfert, pas un verrouillage. Téléchargez en ZIP, déployez sur Vercel, ou transmettez les fichiers à un agent de codage pour les fusionner dans votre code existant.

FAQ

Puis-je vraiment faire tourner Open Design sans aucun coût cloud ? Oui. Open Design lui-même est open source (Apache-2.0) et gratuit à exécuter. Si vous le pointez vers un agent local gratuit comme OpenCode — éventuellement adossé à un exécuteur local tel qu'Ollama — la génération se fait sur votre machine sans aucun coût en crédits. Vous ne payez que si vous choisissez de connecter un modèle hébergé payant ou un fournisseur de médias.

Comment garder tout en local et privé ? Choisissez un agent en ligne de commande local lors du premier lancement plutôt qu'un agent cloud. Parce qu'Open Design fonctionne par-dessus l'agent que vous choisissez, un agent local et un modèle local signifient que vos prompts et vos designs ne quittent jamais votre ordinateur.

Quels agents de codage prend-il en charge ? Plus de 21 agents, dont Claude Code, Codex, Cursor, Gemini, GitHub Copilot et OpenCode. Open Design détecte les CLI déjà installées sur votre machine et vous laisse choisir laquelle pilote la génération.

En quoi est-il différent de Claude Design ? La même sensation familière basée sur le navigateur, mais open source, local-first et à agents enfichables. Vous apportez votre propre agent (local ou hébergé), vous n'êtes pas obligé de définir un design system d'emblée, et vous pouvez faire des choses supplémentaires que Claude Design ne peut pas — comme déployer directement sur Vercel et générer des présentations, des images et de la vidéo depuis le même espace de travail.

---

Ce guide écrit est basé sur le tutoriel d'installation locale d'AI Automation Station. Regardez la vidéo complète ci-dessus et abonnez-vous à AI Automation Station pour plus de tutoriels pratiques sur les outils d'IA.