← Guides pratiques Apercu: Claude Design, c'est fini... La MEILLEURE alternative GRATUITE à Claude Design (illimitée et open source)
Guides pratiques

Claude Design, c'est fini... La MEILLEURE alternative GRATUITE à Claude Design (illimitée et open source)

Installez Open Design et pilotez-le avec Gemini CLI, afin que la génération de design par IA en haute fidélité tourne sur le niveau gratuit de Gemini — un espace de travail open source et local-first que vous pouvez utiliser sans payer pour l'agent.

Sandeep Singh 11 mai 2026 11:04 YouTube ↗

Ce guide vous montre comment faire tourner Open Design avec Gemini CLI comme agent qui pilote la génération — afin que prototypes, landing pages et interfaces sortent d'un seul espace de travail tout en s'appuyant sur le généreux niveau gratuit de Gemini. Il suit le parcours que Sandeep Singh adopte dans son tutoriel pratique, réécrit et mis à jour pour correspondre à la version actuelle. Regardez la vidéo ci-dessus pour la version en direct, ou poursuivez votre lecture.

Le coût, c'est tout l'enjeu. Open Design lui-même est gratuit et open source ; la seule chose que vous « payez », c'est l'agent et le modèle que vous apportez. Apportez Gemini CLI, authentifiez-vous avec votre compte Google, et cette facture tombe pratiquement à zéro.

L'espace de travail Open Design. L'espace de travail Open Design — open source, local-first, et piloté par n'importe quel agent de code que vous connectez.

Qu'est-ce qu'Open Design ?

Open Design est une plateforme de design open source et local-first qui fonctionne par-dessus l'agent de code que vous utilisez déjà plutôt que de vous enfermer chez un seul fournisseur de modèle. C'est du « apportez votre propre agent » : Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode et plus de 21 autres peuvent chacun piloter la génération. Vous choisissez l'agent ; Open Design s'occupe de la surface de design.

Quelques éléments qui valent le coup d'œil :

  • Open source, Apache-2.0 — clonez-le, auto-hébergez-le, lisez chaque ligne.
  • Fonctionne en local — vos projets résident dans des dossiers sur votre propre machine, pas dans le cloud de quelqu'un d'autre.
  • Agent enfichable — plus de 21 agents de code sont pris en charge, y compris Gemini CLI ; vous choisissez celui qui pilote la génération.
  • Plus que des prototypes — prototypes, artefacts vivants, présentations, mises en page façon magazine, génération d'images et même de vidéos, le tout depuis un seul espace de travail.
  • Points de départ intégrés — des design systems de marque et des modèles sont fournis d'emblée, vous n'êtes donc jamais face à une page blanche.

Il tient debout par ses propres mérites : un espace de travail de design local et agnostique vis-à-vis du modèle. Le fait qu'il s'associe parfaitement à un agent gratuit comme Gemini CLI est le bonus qui le rend véritablement gratuit à l'usage.

Avant de commencer

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

MéthodeIdéale pourPrérequis
Application de bureauLa plupart des gens — zéro configurationAucun. Il suffit de télécharger et d'ouvrir.
Lancer depuis les sourcesLes développeurs qui veulent lire ou modifier le codeNode ~24, pnpm 10.33.x
Installer dans votre agentLes personnes qui vivent dans le terminalUne CLI d'agent de code existante

L'application de bureau est la méthode recommandée aujourd'hui — pas de Node, pas de pnpm, pas de clone. Sandeep télécharge l'installeur pour sa plateforme (un .dmg sur macOS, un setup.exe sur Windows) directement depuis la dernière version.

Étape 1 — Installer Open Design

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 toutes les CLI d'agents de code déjà présentes dans votre PATH et charge pour vous les skills et design systems intégrés. Au premier lancement, vous arrivez sur l'écran de connexion, où vous choisissez une CLI locale ou collez votre propre clé API.

Option B — Lancer depuis les sources

Si vous préférez le lancer depuis le dépôt, vous n'avez besoin que d'une poignée de 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 qu'il affiche — le port est attribué dynamiquement, utilisez donc l'adresse qui apparaît dans votre terminal plutôt qu'une adresse fixe. Vous avez besoin de Node ~24 et de pnpm 10.33.x ; Corepack sélectionnera pour vous la version de pnpm épinglée.

Option C — Installer dans votre agent de code

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

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

Ensuite, à l'intérieur de l'agent, il suffit de demander : Use open-design to generate a landing page with a modern minimal design system.

Connecter Gemini CLI comme agent

C'est l'étape qui rend ce workflow gratuit. Open Design ne fournit pas de modèle qui lui soit propre — il pilote la CLI vers laquelle vous le pointez — vous apportez donc Gemini CLI et laissez son niveau gratuit faire le travail.

Pourquoi Gemini CLI ? Deux raisons, comme le formule Sandeep : les modèles Gemini tiennent leur rang face aux autres, et le niveau gratuit est généreux. Connectez-vous avec un compte Google et vous obtenez une importante allocation de requêtes quotidiennes sans frais ; la clé API Gemini offre une allocation gratuite plus limitée. Pour un travail de design soutenu, la connexion via compte Google est celle à privilégier.

  1. Installez Gemini CLI. Suivez la commande d'installation sur la page d'accueil de Gemini CLI (Homebrew sur macOS et Linux, ou l'installeur documenté ailleurs). N'importe quel terminal fait l'affaire.
  2. Lancez gemini et authentifiez-vous. Démarrez-le, accordez votre confiance au dossier de travail lorsque c'est demandé, puis choisissez Sign in with Google. Votre navigateur s'ouvre pour une connexion Google en deux clics et signale le succès. Redémarrez Gemini CLI ; vous devriez voir le modèle actif et 0% de quota utilisé.
  3. Pointez Open Design dessus. Redémarrez Open Design et ouvrez les Settings. Gemini CLI apparaît désormais comme un agent disponible — sélectionnez-le, faites Test the connection, et vous devriez recevoir un OK en retour. Enregistrez, et vous êtes prêt à concevoir.

Vous pouvez aussi coller ici votre propre clé API au lieu d'utiliser une CLI locale, et ajouter des clés distinctes pour les modèles d'image, de vidéo et d'audio si vous souhaitez générer des médias plus tard. Pour un travail de design gratuit, avec une sensation d'illimité, la connexion via Gemini CLI suffit toutefois amplement. Tout dans les Settings est modifiable par la suite, alors gardez la première passe simple.

Explorer l'espace de travail

Open Design organise votre travail par projet : chaque projet réside dans son propre dossier, et changer de dossier change de projet. Au sein d'un projet, vous pouvez créer des prototypes, des artefacts vivants, des présentations, des images et même de la vidéo et de l'audio — pas seulement de l'interface.

La bibliothèque de design systems intégrée. La bibliothèque de design systems — des points de départ de marque que vous pouvez prévisualiser et intégrer dans n'importe quel projet.

La bibliothèque de design systems intégrée vous offre des points de départ de marque à prévisualiser et réutiliser, de sorte que vous n'êtes pas bloqué à devoir définir des tokens avant de pouvoir commencer. Vous pouvez aussi apporter votre propre design system, importer un projet Claude Design existant, ou partir de rien et laisser Open Design déduire des valeurs par défaut sensées.

La bibliothèque de modèles. Modèles : points de départ pour prototypes, présentations, images et vidéos — filtrez par type et forkez pour commencer.

La bibliothèque de modèles va au-delà des systèmes de marque, jusqu'aux prototypes, présentations et génération d'images comme de vidéos. Filtrez par type et forkez n'importe lequel comme point de départ. Vous pouvez parcourir l'intégralité de la bibliothèque de plugins sur le web, à open-design.ai/plugins, avant d'installer quoi que ce soit.

Construire quelque chose

Avec Gemini CLI connecté, le flux de construction est le même que celui que Sandeep déroule dans la vidéo :

  1. Créez un projet. Nommez-le, choisissez un design system qui correspond au look souhaité, et sélectionnez High fidelity afin de voir le vrai rendu plutôt qu'un wireframe.
  2. Rédigez le brief. Au lieu d'utiliser l'un des prompts suggérés, décrivez ce que vous voulez — Sandeep demande une landing page. Vous pouvez aussi joindre une capture d'écran d'une mise en page qui vous plaît et demander à Open Design de suivre ce thème.
  3. Répondez aux questions de clarification. L'agent pose des questions de suivi pertinentes : une seule landing page ou landing + tarification, surface responsive, à qui elle s'adresse, un ton visuel (Sandeep choisit une ambiance moderne, minimale, façon Linear/Vercel), et d'éventuelles couleurs ou polices de marque. Vous pouvez laisser des champs vides ou le laisser choisir une direction pour vous.
  4. Choisissez une direction visuelle et générez. Choisissez l'une des directions proposées, envoyez, et quelques secondes plus tard la landing page stylisée apparaît avec les sections que vous avez demandées.
  5. Itérez par des prompts. Envie de remplacer un logo, d'ajouter une icône manquante ou d'étoffer la FAQ ? Décrivez simplement la modification et envoyez. Si une retouche déplace quelque chose, un prompt de suivi le remet en place.

Quand le résultat vous convient, ouvrez les fichiers de design, inspectez le code source, modifiez les calques manuellement si vous le souhaitez, puis exportez — PDF, PPTX, un bundle compressé, ou un déploiement sur Vercel.

La gratuité est bien réelle : Sandeep construit deux prototypes avec plusieurs itérations et, lorsqu'il vérifie ensuite sa consommation Gemini, n'a dépensé qu'environ 2 % de son allocation quotidienne. Avec une importante allocation journalière qui se renouvelle chaque jour, vous pouvez concevoir presque en continu sans surveiller un compteur.

Astuces

  • Connectez-vous à Gemini CLI avec votre compte Google plutôt qu'avec une clé API — l'allocation gratuite quotidienne est bien plus large, et c'est ce qui rend ce workflow réellement gratuit.
  • Commencez en haute fidélité lorsque vous voulez juger le vrai design ; ne passez au wireframe que pour ébaucher rapidement la structure.
  • Vérifiez votre consommation avec stats dans Gemini CLI pour voir à quel point le travail de design coûte peu par rapport à votre allocation quotidienne.
  • Vos designs restent attachés au dossier du projet — organisez votre travail en lançant Open Design sur le bon répertoire.
  • Vous n'avez pas besoin d'un design system pour démarrer. Partez d'un système intégré, importez un projet Claude Design, ou laissez Open Design déduire des valeurs par défaut.

FAQ

Est-ce vraiment gratuit ? En pratique, oui. Open Design est open source sous Apache-2.0, donc le logiciel ne coûte rien. Le seul coût, c'est l'agent et le modèle que vous apportez — et avec Gemini CLI authentifié via un compte Google, vous puisez dans une importante allocation gratuite quotidienne. Dans la vidéo, deux prototypes plus des itérations ont utilisé environ 2 % du quota du jour, qui se renouvelle quotidiennement.

Quels agents de code prend-il en charge ? Plus de 21 agents, dont Gemini, Claude Code, Codex, Cursor, GitHub Copilot et OpenCode. Open Design détecte les CLI déjà installées sur votre machine et vous laisse en choisir une comme agent par défaut.

Suis-je obligé d'utiliser Gemini CLI ? Non. Gemini CLI est la voie vers une configuration gratuite et à quota élevé, mais vous pouvez connecter n'importe quel agent pris en charge, ou coller votre propre clé API pour un agent ou pour les modèles d'image, de vidéo et d'audio.

Ai-je besoin d'un design system avant de pouvoir commencer ? Non. Open Design est fourni avec des design systems de marque et des modèles comme points de départ, et vous pouvez importer un design system existant ou le laisser déduire des valeurs par défaut sensées.


Ce guide écrit s'appuie sur le tutoriel pratique de Sandeep Singh. Regardez la vidéo complète ci-dessus, et abonnez-vous à Sandeep Singh pour plus de tutoriels pratiques sur les outils d'IA.