Open Design face à Figma et Claude Design — guide complet

Ce guide propose une visite complète d'Open Design articulée autour d'une seule question : où un espace de travail de conception nativement piloté par agent se situe-t-il à côté de Figma et de Claude Design ? On y installe l'application, on configure un agent, on travaille avec les design systems intégrés, on construit une vraie landing page de bout en bout, on itère avec les outils sur le canvas, et on exporte le résultat. Il suit le parcours emprunté par Anton Larichev (PurpleSchool) dans sa démonstration pratique, réécrit et mis à jour pour la version actuelle. Regardez la vidéo ci-dessus pour voir le déroulé en direct, ou poursuivez la lecture pour la version écrite.

L'espace de travail Open Design — prototypes, présentations, images et vidéo réunis dans un canvas paisible et familier.

Qu'est-ce qu'Open Design ?

Open Design est une plateforme de conception open source et local-first qui s'exécute par-dessus l'agent de code que vous utilisez déjà. Au lieu d'être lié à un seul modèle, il 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. La formule d'Anton est exacte : en surface, cela ressemble beaucoup à Claude Design, mais sous le capot ce n'est « qu'une interface supplémentaire qui pilote les mêmes agents que vous avez déjà installés ». Vous ne payez pas un deuxième abonnement par-dessus votre plan de code.

Ce qui justifie de s'y intéresser sérieusement :

• Open source, Apache-2.0 — clonez-le, auto-hébergez-le, utilisez-le pour vos missions clients.
• Fonctionne en local — rien n'est mis en ligne ; vos projets vivent dans des dossiers sur votre propre machine.
• Agent enfichable — pointez-le vers n'importe quel CLI pris en charge, ou apportez votre propre clé API pour un autre harness.
• Une vaste bibliothèque de design systems et de skills intégrée, pour ne pas partir d'une page blanche.
• Bien plus que de la conception statique — prototypes, présentations, génération d'images et vidéo, le tout depuis un seul espace de travail.

En quoi il diffère de Figma

C'est la comparaison que la plupart des gens veulent vraiment, alors soyons directs.

Figma est un éditeur vectoriel manuel et collaboratif. Vous déplacez chaque frame, dessinez chaque composant, et sa force réside dans la précision et le travail d'équipe en temps réel. Rien ici ne génère le design à votre place — vous êtes le designer qui fait le travail.

Open Design inverse cette logique. Vous décrivez ce que vous voulez, choisissez un design system, et l'agent génère un véritable artefact HTML interactif que vous affinez ensuite. Le résultat est du code, pas un fichier vectoriel — ce qui signifie que tout ce que vous construisez est immédiatement plus proche de votre projet réel.

Un point sur lequel Anton est honnête : Open Design est aujourd'hui peu performant pour extraire un design system d'un fichier Figma. Si vous lui fournissez un export Figma aujourd'hui, le système extrait revient généralement en désordre. Donc si votre source de vérité vit dans Figma, l'itinéraire le plus propre consiste à faire d'abord transformer ce design Figma en code par votre agent, puis à importer le code dans Open Design (plus de détails ci-dessous). Considérez Open Design comme une surface de génération et d'itération, pas comme un importateur Figma.

En quoi il diffère de Claude Design

Si vous avez utilisé Claude Design, l'interface vous semblera instantanément familière — même esthétique paisible, même boucle centrée sur l'artefact. Les différences qui comptent :

• N'importe quel modèle, pas un seul. Claude Design vous enferme dans Opus 4.7. Open Design pilote l'agent que vous choisissez — et vous pouvez en changer en cours de projet.
• Génération de médias intégrée. Ajoutez des clés de fournisseurs (OpenAI GPT Image, MiniMax, ElevenLabs, et d'autres) et Open Design générera images, audio et vidéo directement. C'est la différence marquante qu'Anton souligne — un outil de design mono-fournisseur ne vous offre pas cela.
• Local et sûr pour un usage commercial. Apache-2.0 et local-first signifient que les missions clients ne quittent jamais votre machine et ne nécessitent la permission de personne.

Étape 1 — Installer Open Design

Vous avez trois portes d'entrée. Choisissez celle qui vous convient :

Méthode	Idéale pour	Prérequis
Application de bureau	La plupart des gens — zéro 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	Les personnes qui vivent dans le terminal	Un CLI d'agent de code existant

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

Rendez-vous sur open-design.ai/download et récupérez le build correspondant à votre OS. Après l'installation, l'application détecte automatiquement tous les CLI d'agent de code déjà présents dans votre PATH et charge pour vous les skills et design systems intégrés. C'est le chemin le plus rapide vers un espace de travail opérationnel.

Option B — Exécuter depuis les sources

Si vous préférez l'exécuter depuis le dépôt — comme Anton le fait dans la vidéo — il 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 l'URL locale qu'il affiche. Il résout un port dynamique, donc n'en codez aucun en dur — cliquez simplement sur l'adresse qu'il vous montre. Vous avez besoin de Node ~24 et de pnpm 10.33.x ; Corepack sélectionne pour vous la version épinglée de pnpm.

Option C — Installer dans votre agent de code

Pour appeler Open Design comme un skill au sein de votre agent, sans jamais ouvrir l'interface graphique :

od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

Ensuite, à l'intérieur de l'agent : Use open-design to generate a landing page with the Stripe design system.

Étape 2 — Configurer votre agent

Au premier lancement, Open Design analyse votre machine et affiche tous les CLI qu'il a trouvés, puis vous guide à travers une configuration rapide :

• Choisissez l'agent et le modèle. Anton utilise Claude Code sur Opus 4.7 (« l'un des meilleurs pour le design »), mais vous pouvez pointer vers Codex, Gemini CLI, ou tout autre agent détecté. Un bouton Test permet de confirmer la connexion.
• Ou utilisez une clé API. Vous préférez ne pas passer par un CLI local ? Définissez plutôt une base URL, une clé et un modèle.
• Ajoutez des fournisseurs de médias. C'est l'élément différenciant — ajoutez des clés pour OpenAI GPT Image, MiniMax, ElevenLabs et d'autres afin de générer images, audio et vidéo sur-le-champ.
• Activez des skills. Activez les skills de conception dont vous avez besoin (system design, prototype, brand guidelines, et plus) ; laissez le reste désactivé.

Vous pourrez tout modifier plus tard, alors gardez ce premier passage simple.

Étape 3 — Travailler avec les design systems

La bibliothèque de design systems est le cœur de l'outil. Chaque entrée part d'une vraie marque et codifie sa palette, sa typographie, ses composants et son atmosphère générale en un système réutilisable.

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.

Il existe deux façons d'y intégrer votre propre marque, et Anton teste les deux :

1. Importer un ZIP Claude Design (la plus propre aujourd'hui). Vous avez construit un système dans Claude Design ? Ouvrez-le là-bas, choisissez Share → Download project as .zip, et glissez ce ZIP dans Open Design. Tous vos tokens et composants sont repris tels quels.
2. Extraire un système depuis du code existant. Créez un fichier haute fidélité sans design system attaché, pointez son import vers un dossier contenant votre vrai code, et demandez à l'agent d'en dériver un design system — couleurs, typographie, espacements et un kit de composants JSX. Ce ne sera pas parfait, mais c'est un solide point de départ que vous pouvez ajuster.

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

Étape 4 — Construire une vraie page et itérer

Le vrai workflow consiste à construire des prototypes et des présentations. Dans la vidéo, Anton construit une page de tarification/landing pour PurpleSchool à partir d'un design system importé :

1. Créez un projet, choisissez web/desktop/mobile, et optez pour wireframe ou haute fidélité.
2. Attachez le design system et collez votre brief (Anton utilise une spec courte : hero, tarifs, fonctionnalités, FAQ, footer).
3. Choisissez votre modèle dans le projet (ici, Claude Code sur Opus) et envoyez.
4. Répondez aux questions de clarification qu'Open Design pose avant d'écrire la moindre ligne — support, audience, ton — puis regardez-le dérouler une liste de tâches.

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

Là où Open Design prouve sa valeur, c'est dans l'itération sur le canvas : sélectionnez n'importe quel bloc et commentez-le, dessinez directement sur l'aperçu pour pointer ce que vous voulez changer, modifiez polices et tailles en ligne, et vérifiez la mise en page aux largeurs desktop/tablette/mobile. C'est la boucle de feedback rapide qu'il est malaisé de reproduire avec un simple agent dans un terminal.

Quand le résultat vous convient, exportez-le en HTML autonome ou en ZIP et transmettez-le à votre équipe — ou intégrez le code directement dans votre projet.

Conseils

• Ne lui fournissez pas de fichiers Figma bruts. L'extraction depuis Figma est aujourd'hui le chemin le plus faible ; convertissez d'abord Figma en code, puis importez le code.
• Importez un ZIP Claude Design quand vous avez besoin de votre propre marque — c'est l'entrée la plus fluide.
• Utilisez un CLI local pour que la génération s'appuie sur un abonnement que vous payez déjà, plutôt que sur des frais d'API à l'appel.
• Appuyez-vous sur les outils de commentaire et de dessin sur le canvas — sélectionner un bloc et dessiner dessus est bien plus rapide que de décrire le changement en prose.
• Attendez-vous à un bon premier jet, puis peaufinez. Exportez tôt pour repérer les petits écarts d'espacement et de mise en forme.

FAQ

Devrais-je remplacer Figma par Open Design ? Non — ils font des choses différentes. Figma est un éditeur manuel précis et collaboratif ; Open Design est une surface de génération et d'itération nativement pilotée par agent qui produit du code. Utilisez Open Design pour passer rapidement du brief à un vrai brouillon fidèle à votre marque, et gardez Figma pour le travail qui exige une précision manuelle et une collaboration en direct.

Peut-il importer mes designs Figma ? Indirectement. L'extraction directe depuis Figma est aujourd'hui approximative. Le chemin fiable consiste à convertir le design Figma en code avec votre agent, puis à importer ce code (ou à importer un ZIP Claude Design) dans Open Design.

Suis-je obligé d'utiliser Claude ? Non. Open Design pilote n'importe quel agent pris en charge — Codex, Gemini CLI, Cursor, OpenCode, et d'autres — et vous pouvez changer de modèle en cours de projet, ou apporter votre propre clé API.

Est-ce gratuit ? L'application est open source sous Apache-2.0 et gratuite à exécuter en local. Vous ne payez que l'usage du modèle et des médias de l'agent et des fournisseurs que vous connectez.

---

Ce guide écrit s'appuie sur la démonstration pratique d'Anton Larichev. Regardez la vidéo complète ci-dessus, et abonnez-vous à PurpleSchool | Anton Larichev pour plus d'analyses approfondies sur le développement et l'outillage IA.