Open Design : l’alternative open source GRATUITE à Claude Design

Open Design prend une idée et la transforme en prototypes, sites web, slides et même vidéos HTML — le tout s’exécutant en local sur votre propre machine. Dans cette démo, Code A Program installe l’application de bureau, connecte un agent de codage et construit une landing page haut de gamme pour un outil d’écriture IA nommé Draft, puis la peaufine et la déploie sans jamais quitter l’espace de travail. Regardez le déroulé complet dans la vidéo de Code A Program, ou suivez le guide écrit ci-dessous.

Open Design en local : un espace de travail de design open source et agent-native que vous contrôlez entièrement — non verrouillé sur un seul modèle.

Qu’est-ce qu’Open Design ?

Open Design est une plateforme de design open source et local-first — une alternative gratuite à Claude Design et Figma. Au lieu de vous lier à un fournisseur de modèle, elle fonctionne par-dessus l’agent de codage que vous utilisez déjà, si bien que vous apportez votre propre agent et votre propre key.

• Open source, Apache-2.0 — lisez chaque ligne, auto-hébergez-la, ou téléchargez simplement l’application de bureau.
• Fonctionne en local — les projets vivent dans vos propres dossiers sur votre machine, pas dans le cloud d’un tiers.
• Apportez votre propre agent — plus de 21 agents de codage sont pris en charge, dont Claude Code, Codex, Cursor, Gemini, OpenCode et d’autres ; vous choisissez quelle CLI pilote la génération.
• Plus que des prototypes — sites web, prototypes, decks de slides, génération d’images et même vidéo HTML, le tout depuis un seul espace de travail.
• Tout est inclus — 129 design systems intégrés et plus de 460 plugins pour ne jamais partir d’une toile vierge.

Si vous avez utilisé Claude Design, la sensation vous sera immédiatement familière — Open Design conserve la même expérience posée, puis y ajoute le modèle de votre choix.

Étape 1 — Choisissez votre agent et votre modèle

Téléchargez l’application de bureau depuis open-design.ai, installez-la et répondez aux courtes questions d’intégration. Cela vous dépose directement dans l’interface de chat principale.

En haut à droite, choisissez votre fournisseur d’agent IA. Comme fournisseurs CLI locaux, vous pouvez choisir Claude Code, Codex CLI, Gemini CLI (qui a des quotas gratuits), OpenCode et d’autres. Dans la démo, Code A Program utilise OpenCode avec le modèle GLM 5.2 parce qu’il s’est montré solide pour le front-end — mais l’essentiel, c’est la flexibilité : vous n’êtes verrouillé ni sur un modèle ni sur une plateforme.

Étape 2 — Rédigez votre prompt

Le chat propose une option joindre un fichier pour le matériel de référence, ainsi qu’une section plugins. Open Design est livré avec plus de 460 plugins couvrant des assistants de build et de test, des maquettes 3D, des cadres d’appareils mobiles et de bureau, et bien plus — si vous avez besoin d’éléments 3D ou d’une coque d’appareil, vous ajoutez le plugin plutôt que de vous battre avec le prompt.

La bibliothèque de plugins : plus de 460 plugins pour construire, tester, faire des maquettes 3D, des cadres d’appareils et plus — ajoutez ce dont votre design a besoin.

Collez maintenant un brief. Le prompt de démo demande une landing page haut de gamme pour un assistant d’écriture IA nommé Draft, avec une palette sobre noir ardoise, ivoire et orange électrique, un hero éditorial audacieux doté d’une animation de génération de texte en direct, un canevas d’écriture interactif, un workflow en trois étapes, une section de résultats, une grille tarifaire à deux niveaux, une FAQ et un appel à l’action final percutant — tout en évitant explicitement les cartes, les dégradés, le glassmorphisme et l’imagerie de robot générique.

Il y a un levier de plus à connaître : vous pouvez fonder un design sur un design system populaire de marques comme Apple, Airbnb, BMW, IBM ou Spotify. Code A Program le laisse de côté pour ce run, mais il est là quand vous voulez coller à un look précis.

Étape 3 — Regardez-le construire et s’auto-vérifier

Envoyez le prompt et Open Design commence à préparer le projet. Après environ une minute, il peut poser quelques questions de suivi — répondez-y pour de meilleurs résultats, ou cliquez sur tout ignorer et laissez-le continuer.

Dans la démo, la landing page elle-même se termine en environ six minutes. Open Design passe ensuite le temps restant à effectuer des auto-vérifications — vérifier la structure, revoir la mise en page, contrôler les animations et corriger de petits problèmes avant de marquer le build comme terminé. Une fois prêt, cliquez sur l’icône de présentation pour ouvrir le site dans un nouvel onglet.

Le résultat généré : un hero éditorial avec une animation de frappe en direct, un workflow, des résultats, une tarification, une FAQ et un footer — responsive sur tablette et mobile.

Le résultat comporte un hero avec animation de frappe IA, des effets de défilement fluides, une section d’éditeur interactive, une bande de workflow, une section de résultats clients, une tarification mensuelle/annuelle, une FAQ et un footer épuré. Passez aux vues tablette et mobile pour confirmer que le design responsive tient la route.

Étape 4 — Peaufinez avec la barre d’outils sur le canevas

La barre d’outils de droite est l’endroit où vous peaufinez sans brûler de tokens sur des changements triviaux :

• Screenshot — capturez une image du site.
• Comment — sélectionnez n’importe quel élément (par exemple le titre du hero) et décrivez un changement, comme recolorer un mot dans le thème orange. Regroupez plusieurs commentaires et envoyez-les d’un coup, ou envoyez-en un directement au chat.
• Marker — surlignez n’importe quelle zone de la page et partagez-la avec l’agent.
• Element edit — changez directement les polices, la largeur, les couleurs et plus encore sur un élément sélectionné, pour que les petits ajustements ne nécessitent jamais une régénération complète.

Vous disposez aussi de contrôles de zoom et d’une vue de tous les commentaires ouverts. Dans la démo, le texte « actually » est recoloré en orange directement là, dans la barre d’outils.

Étape 5 — Exportez et déployez

Au-dessus de la barre d’outils se trouve l’option télécharger — exportez le projet en PDF, image, ZIP ou HTML. Il y a aussi enregistrer comme modèle, pour réutiliser ce design comme point de départ de futurs projets.

Le menu partager est la partie intéressante. De là, vous pouvez :

• déployer sur Vercel en un clic — connectez votre compte Vercel avec un jeton d’accès et cliquez sur déployer.
• déployer sur Cloudflare de la même façon.
• ouvrir dans un éditeur comme Cursor ou VS Code, ou dans des outils CLI comme Gemini CLI, Codex et Claude Code. Open Design vous remet le HTML généré ainsi que son dossier Skills, afin que vous puissiez convertir le design en projet Next.js — ou dans n’importe quel framework de votre choix.

Dans paramètres, vous pouvez ajouter des règles globales (par exemple « toujours utiliser TypeScript »), stocker des mémoires utiles comme la fonction de mémoire de Claude, et configurer des fournisseurs de médias — une key ElevenLabs pour la voix et le son, ainsi que Nano Banana, OpenAI ou OpenRouter pour la génération d’images. Vous pouvez aussi ajouter des skills (il existe un skill agent-browser pour automatiser des tâches de navigation, et plusieurs skills front-end), brancher des serveurs MCP et changer l’emplacement par défaut des projets.

Conseils pour en tirer davantage

• Les modèles gratuits suffisent pour démarrer. Tout le site de démo a été généré avec un palier Gemini gratuit et reste superbe ; passez à un modèle payant quand vous voulez une meilleure qualité sur du travail réel.
• Ajoutez les plugins avant de prompter quand vous savez que vous aurez besoin de maquettes 3D ou de cadres d’appareils.
• Utilisez le bon outil pour le changement — l’éditeur d’éléments et les commentaires gèrent les petits ajustements sans reconstruction complète.
• Enregistrez les mises en page réussies comme modèles pour que votre prochain projet démarre en avance.

FAQ

Open Design est-il gratuit ? Oui — il est open source sous Apache-2.0 et s’exécute gratuitement en local. Vous ne payez que pour l’usage du modèle/API de l’agent et des fournisseurs de médias que vous connectez, et vous pouvez utiliser des paliers gratuits comme celui de Gemini.

Quels agents de codage prend-il en charge ? Plus de 21 agents, dont Claude Code, Codex CLI, Cursor, Gemini CLI et OpenCode. Vous choisissez le fournisseur dans le menu en haut à droite.

En quoi diffère-t-il de Claude Design ? La même sensation familière, mais open source, local-first et à agent interchangeable — vous n’êtes verrouillé ni sur un modèle ni sur une plateforme, et vous pouvez exporter ou déployer votre projet comme vous le souhaitez.

Puis-je déployer sans quitter l’application ? Oui — le menu partager déploie sur Vercel ou Cloudflare en un clic (vous fournissez le jeton d’accès du fournisseur), ou remet le code à Cursor, VS Code ou un agent CLI.

Dois-je utiliser un modèle payant pour de bons résultats ? Non — pour la plupart des landing pages et des designs front-end, les modèles gratuits sont déjà assez performants ; passez à un modèle payant seulement lorsque vous voulez des résultats plus avancés.

---

Ce guide écrit est basé sur la démo de Code A Program. Regardez la vidéo complète ci-dessus, et abonnez-vous à Code A Program pour d’autres vidéos pratiques sur les outils IA.