Un autre dépôt open source vient de cloner Claude Design

Ce guide est un tour d'horizon structuré d'Open Design : installez-le, lancez une démo rapide, explorez les design systems et modèles intégrés, et terminez par un avis honnête sur ce qui brille et ce qui reste encore brut. Il suit le parcours emprunté par Chase AI dans sa démonstration pratique, réécrit et mis à jour avec la version actuelle pour que vous puissiez suivre pas à pas. Regardez la vidéo ci-dessus pour la démonstration en direct, ou poursuivez la lecture pour la version écrite.

L'espace de travail Open Design — un canevas serein et familier réunissant prototypes, présentations, images et vidéos au même endroit.

Qu'est-ce qu'Open Design ?

Open Design est une plateforme de design open source et local-first qui s'exécute par-dessus l'agent de codage que vous utilisez déjà. Au lieu de vous enfermer chez un seul fournisseur de modèle, elle détecte les CLI déjà présents sur votre machine — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode, et une vingtaine d'autres — et laisse cet agent piloter la génération. Chase appelle cela « bring your own agent », et c'est précisément l'idée : vous ne payez pas de frais d'API séparés en plus d'un abonnement que vous possédez déjà, car la génération passe par votre propre CLI.

Quelques raisons qui valent le coup d'œil :

• Open source, Apache-2.0 — clonez-le, hébergez-le vous-même, lisez chaque ligne.
• Fonctionne localement — vos projets vivent dans des dossiers sur votre propre machine, pas dans le cloud de quelqu'un d'autre.
• Agents enfichables — plus de 21 agents de codage sont pris en charge ; vous choisissez quel CLI pilote le travail, ou apportez votre propre clé API pour un autre harnais.
• Plus que des prototypes — prototypes, présentations, mises en page magazine, génération d'images et même vidéo, le tout depuis un seul espace de travail.
• Une riche bibliothèque de design systems et de skills intégrée, pour ne pas partir d'une page blanche.

Si vous avez utilisé Claude Design, l'interface vous paraîtra immédiatement familière — Open Design conserve la même esthétique apaisée, puis superpose des capacités supplémentaires (présentations, image et vidéo). Pour être honnête : c'est un espace de travail open, local et agent-native à part entière, pas un simple relooking d'un outil existant.

Avant de commencer

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

Méthode	Idéale pour	Prérequis
Application de bureau	La plupart des gens — zéro configuration	Aucun. Il suffit de télécharger et d'ouvrir.
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	Les personnes qui vivent dans le terminal	Un CLI d'agent de codage existant

Chase montre la voie du terminal dans sa vidéo, mais l'application de bureau est la méthode recommandée aujourd'hui — pas de Node, pas de pnpm, pas de clone, et elle détecte automatiquement vos agents.

Étape 1 — Installer Open Design

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

Rendez-vous sur open-design.ai/download et récupérez la version correspondant à votre système d'exploitation. Après l'installation, l'application détecte automatiquement chaque CLI d'agent de codage déjà présent dans votre PATH et charge pour vous les skills et design systems intégrés. C'est le moyen le plus rapide d'obtenir un espace de travail fonctionnel.

Option B — Exécuter depuis les sources

Si vous préférez l'exécuter depuis le dépôt — comme le fait Chase dans la vidéo — vous n'avez besoin que 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. Elle résout un port dynamique, ne le codez donc pas en dur — cliquez simplement sur l'adresse indiquée. Vous avez besoin de Node ~24 et de pnpm 10.33.x ; Corepack sélectionnera pour vous la version de pnpm épinglée. (Si un serveur de développement ne démarre pas, vous pouvez dire à votre agent « lance le serveur de développement d'Open Design » et le laisser gérer la commande.)

Option C — Installer dans votre agent de codage

Pour utiliser Open Design sans jamais ouvrir l'interface graphique — en l'appelant comme un skill au sein de votre agent — exécutez :

od mcp install <agent>
# od est fourni avec Open Design ; <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Ensuite, dans l'agent, demandez simplement : Use open-design to generate a landing page with the Airbnb design system.

Étape 2 — Premier lancement : connecter votre agent de codage

Au premier lancement d'Open Design, l'outil analyse votre machine et vous montre chaque CLI local trouvé. Une invite vous demande comment vous souhaitez piloter l'IA. C'est l'étape « bring your own agent ».

• Choisissez un CLI local. Pointer Open Design vers Claude Code, Codex ou OpenCode signifie que la génération puise dans l'abonnement que vous payez déjà, au lieu de facturer des frais d'API séparés. (Vous pouvez aussi brancher votre propre clé API si vous préférez un autre harnais.)
• Laissez le modèle par défaut sauf raison particulière — il suit la configuration propre à votre CLI.
• Ajoutez des fournisseurs de médias (facultatif). Vous voulez générer des images, de la vidéo ou de l'audio ? Ajoutez vos propres clés API pour des fournisseurs comme OpenAI, MiniMax, ElevenLabs, et d'autres. C'est ce qui débloque le volet image et vidéo de l'espace de travail — quelque chose qu'un simple clone de Claude Design ne vous offre pas.
• Activez les skills et design systems. N'activez que les capacités nécessaires au travail qui vous attend.

Vous pouvez modifier tout cela plus tard, alors restez simple au premier passage.

Étape 3 — Explorer l'espace de travail

En haut, vous trouverez Designs, Examples, Design systems, ainsi que les bibliothèques de modèles image et vidéo. Les deux qui comptent le plus au premier coup d'œil sont les design systems et les exemples.

La bibliothèque de design systems : chaque entrée décompose une vraie marque en palette, typographie, composants et atmosphère visuelle que vous pouvez réutiliser comme point de départ.

La bibliothèque de design systems est l'élément phare. Chaque entrée prend une marque du monde réel — Airbnb, par exemple — et la décompose en palette, typographie, composants et atmosphère visuelle globale. Si vous voulez une page qui ressemble à cette marque, vous enclenchez le système et la génération démarre à partir de ces règles plutôt que d'une page blanche.

Une note franche issue de la démonstration de Chase : les exemples sont produits par des prompts d'une seule ligne, le prompt exact étant affiché directement sur la carte. Ils sont impressionnants, mais il n'y a aucune recette secrète derrière — ce que vous voyez est ce que vous avez tapé. Considérez-les comme une source d'inspiration, pas comme la promesse d'une magie en un clic. Les galeries de modèles d'image et de vidéo sont similaires : pratiques comme référence, mais d'un intérêt quotidien moindre que les flux de travail prototype et présentation. Concentrez votre attention sur les livrables que vous expédierez réellement.

La bibliothèque de modèles : des points de départ pour prototypes, présentations, images et vidéos que vous pouvez filtrer par type et forker pour commencer.

Vous pouvez parcourir l'ensemble de la bibliothèque de plugins sur le web à l'adresse open-design.ai/plugins avant d'installer quoi que ce soit.

Étape 4 — Créer quelque chose

Le vrai flux de travail — là où Open Design fait ses preuves — consiste à créer des prototypes et des présentations. Cela fonctionne à peu près comme vous l'imaginez :

1. Nommez le projet et choisissez un ou plusieurs design systems dans la liste intégrée.
2. Choisissez la fidélité — wireframe pour esquisser rapidement la structure, ou haute fidélité pour le rendu entièrement stylisé.
3. Importez éventuellement un ZIP Claude Design. Vous avez construit votre propre design system dans Claude Design ? Ouvrez-y le projet, choisissez Share → Download project as .zip, puis téléversez ce ZIP dans Open Design. Tous les fichiers de design apparaissent dans l'espace de travail, prêts à être réutilisés. (Pour l'instant, cet import de ZIP est le moyen le plus propre d'importer votre propre marque — il n'y a pas encore de bouton « créer un design system de zéro ».)
4. Rédigez le brief et lancez la création. Open Design mène le même type de questions-réponses de clarification que vous verriez dans Claude Design — pour qui est-ce, combien de diapositives, quelle fidélité, quel ton visuel — puis établit une liste de tâches et la déroule. Dans la vidéo, Chase demande une landing page pour un SaaS fictif appelé Lighthouse avec trois directions comparables (classique empilée, éditoriale et tapageuse), puis génère une présentation brutaliste et l'exporte vers PowerPoint.

Le résultat est un artefact réel et interactif, construit à partir du design system que vous avez choisi. L'avis honnête de Chase : les résultats atteignent environ une « solution à 90 % » — une présentation fidèle à la marque et utilisable, avec quelques ajustements d'espacement et de mise en forme à votre charge. Pour quelque chose d'encore jeune, c'est un solide point de départ.

Astuces

• Utilisez un CLI local, pas l'API, afin que la génération puise dans un abonnement que vous possédez déjà plutôt que d'être facturée à l'appel.
• Partez d'un design system intégré pour éviter la page blanche ; importez un ZIP Claude Design lorsque vous avez besoin de votre propre marque.
• N'ajoutez que les clés de médias que vous utiliserez vraiment — vous n'avez pas besoin de tous les fournisseurs pour démarrer.
• Attendez-vous à un brouillon à 90 %, puis peaufinez. Exportez tôt (y compris vers PowerPoint) pour repérer les petites dérives de mise en forme avant de transmettre.
• Appuyez-vous d'abord sur les prototypes et les présentations. Ce sont les surfaces les plus abouties ; les galeries d'exemples et de modèles valent mieux comme inspiration que comme livrables finis.

FAQ

Open Design est-il gratuit ? Oui — c'est un logiciel open source sous licence Apache-2.0. Vous l'exécutez localement gratuitement ; vous ne payez que pour l'usage du modèle et des médias de l'agent et des fournisseurs d'API que vous connectez. Le pointer vers un CLI local signifie que la génération s'appuie sur l'abonnement que vous possédez déjà.

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 automatiquement les CLI déjà installés sur votre machine, donc vous n'avez généralement rien à configurer.

Puis-je utiliser mon propre design system ? Oui. La voie la plus fluide aujourd'hui consiste à construire le système dans Claude Design, à télécharger le projet sous forme de ZIP, puis à importer ce ZIP dans Open Design — vos tokens et composants se reportent directement. Il n'y a pas encore de bouton dédié « créer un design system » dans l'interface graphique, l'import de ZIP est donc la voie recommandée.

En quoi est-il différent de Claude Design ? La même sensation familière, mais open source, local-first et compatible avec plus de 21 CLI via des agents enfichables — plus des capacités supplémentaires comme les présentations, les mises en page magazine, la génération d'images et la vidéo qu'un outil mono-fournisseur n'offre pas. C'est une version précoce, attendez-vous donc à quelques aspérités, mais la fondation est solide.

---

Ce guide écrit est basé sur la démonstration pratique de Chase AI. Regardez la vidéo complète ci-dessus, et abonnez-vous à Chase AI pour plus d'analyses pratiques d'outils d'IA.