Open Design est le rêve de tout vibe coder

Ce guide est le manuel du vibe coder pour Open Design : apportez l'agent que vous utilisez déjà, choisissez un design system pour que votre résultat ne crie pas « généré par IA », rédigez un prompt pour une structure qui convertit réellement, puis itérez par la conversation. Il suit les trois projets enchaînés que Sean Kochel réalise dans ses démonstrations pratiques — une landing page, une application mobile et une application de bureau — réécrits et mis à jour avec 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 — prototypes, présentations, images et vidéos réunis dans un même canevas, calme et familier.

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à. 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. Comme le dit Sean : il y a une couche CLI où vous configurez votre agent, un system prompt qui pilote la qualité, puis les éléments qui font toute la valeur — la prise en charge des skills et une vaste bibliothèque de design systems. Les sorties sont de vrais fichiers HTML, donc tout ce que vous créez s'intègre directement dans votre projet réel.

Pourquoi les vibe coders y trouvent leur compte :

• Apportez votre propre agent et votre clé — pas de deuxième abonnement, pas d'enfermement chez un fournisseur.
• Fonctionne en local — le résultat est du HTML que vous pouvez reprendre tel quel dans votre base de code.
• Les design systems éliminent l'esthétique « IA » — partez d'une vraie marque plutôt que d'une page blanche.
• Les skills sont personnalisables — ajoutez vos propres règles de rédaction, paradigmes UX ou processus.
• Open source, Apache-2.0 — lisez-le, forkez-le, livrez du travail client avec.

Les deux problèmes que rencontre tout projet en vibe coding

Sean structure tout le workflow autour de deux modes d'échec, et il vaut la peine de les nommer car le reste du manuel explique comment les éviter :

1. Ça ressemble à de la bouillie d'IA. Des dégradés génériques, la même police serif, une soupe de conteneurs — un résultat que vous n'aimez même pas vous-même.
2. Ce n'est pas structuré pour remplir sa mission. Une landing page qui ne convertit pas, une application dont le parcours n'a pas de sens.

Un design system résout le premier problème. Un prompt réfléchi avec une vraie structure résout le second. Gardez les deux à l'esprit pour chacun des projets ci-dessous.

Étape 1 — Installer et choisir votre agent

Vous avez trois portes d'entrée :

Voie	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	Ceux qui vivent dans le terminal	Un CLI d'agent de code existant

La voie la plus rapide est l'application de bureau — récupérez-la sur open-design.ai/download ; elle détecte automatiquement les CLI d'agent déjà présents dans votre PATH. Pour l'exécuter depuis les sources :

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 utilise un port dynamique — ne le codez pas en dur). Au premier lancement, indiquez à Open Design l'agent que vous voulez voir piloter le travail, ou apportez votre propre clé API.

Étape 2 — Construire une landing page qui convertit

C'est la première démonstration de Sean, et elle sert de modèle à tout le reste :

1. Choisissez un design system. Dans la démonstration, il choisit celui d'Anthropic. C'est votre garde-fou anti-bouillie — l'agent hérite de la palette, de la typographie et du langage de composants de cette marque.

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.

2. Rédigez le prompt pour la structure, pas seulement pour l'ambiance. Sean lui indique précisément quelles sections construire — onze au total — et colle le résumé exécutif de son PRD (vision produit, énoncé du problème, utilisateur cible, solution proposée, fonctionnalités principales) pour que le texte dispose d'un vrai contexte de travail.
3. Répondez aux questions de découverte. Tout comme Claude Design, Open Design pose des questions de clarification avant d'écrire. Ici, il fait appel à son skill de landing page SaaS pour exécuter — et comme les skills ne sont que des fichiers, vous pourriez à la place charger vos propres consignes de rédaction ou votre structure de sections sous forme de skill.
4. Laissez-le travailler. Environ cinq minutes plus tard, il obtient un premier jet professionnel — une vraie structure orientée conversion, un tableau comparatif soigné, une fiche d'étude de cas joliment stylisée, une FAQ solide.

Envie d'un ressenti différent ? Sean relance exactement le même brief avec un ton brutaliste plutôt qu'éditorial et obtient un design nettement différent — même structure, habillage différent, parce que le design system fait le gros du travail.

Étape 3 — Construire une application mobile, écran par écran

Pour la démonstration mobile, Sean travaille un écran à la fois. Il garde le même design system Anthropic, puis pour chaque écran colle un prompt construit à partir de son PRD — un fil d'actualité d'accueil, un écran de recommandations « comblez les manques », un journal alimentaire ponctuel. L'agent pose ses questions de clarification, maquette une mise en page iOS et respecte le design system choisi sur les trois écrans.

La leçon : la façon dont vous formulez le prompt pour l'UX détermine l'essentiel du résultat. Lorsqu'il reformule la même application comme une interface de coaching centrée sur le chat, il obtient un ensemble d'écrans radicalement différent — mais toujours cohérent. Le design system la maintient fidèle à la marque ; votre prompt décide du paradigme.

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

Étape 4 — Passer au multimodal : des écrans à l'application de bureau

La dernière démonstration montre l'astuce multimodale. Sean fait des captures d'écran de ses trois écrans mobiles, les dépose dans un nouveau chat et formule une demande ouverte : « maquette une version application web de cette fonctionnalité de base ». Cinq minutes plus tard, il obtient une transposition propre vers le bureau en trois volets — la navigation à gauche, le canevas de travail au centre, une vue de progression à droite — avec les interactions par commandes slash maquettées elles aussi.

Même un prompt vague accompagné d'images de référence vous donne un point de départ utilisable. Avec une spécification en bonne et due forme, c'est plus précis, mais l'idée tient : vous pouvez passer d'une surface à l'autre avec fluidité.

Conseils

• Partez toujours d'un design system. C'est le plus puissant des leviers contre l'esthétique « IA ».
• Rédigez explicitement le prompt pour la structure. Listez les sections ou les écrans ; collez un vrai contexte issu d'un PRD pour que le texte ne sonne pas creux.
• Appuyez-vous sur les skills — et écrivez les vôtres. Les skills ne sont que des fichiers ; chargez vos règles de rédaction ou vos paradigmes UX directement dans le workflow.
• Itérez par la conversation. Un cadrage UX différent produit des résultats très différents ; c'est une fonctionnalité, alors essayez-en plusieurs.
• Utilisez des images de référence. Faites des captures d'écran existantes et déposez-les pour transposer d'une surface à l'autre.
• Rappelez-vous que la sortie est du HTML. Elle est conçue pour s'intégrer à un projet que vous avez déjà démarré.

FAQ

Dois-je utiliser un modèle particulier ? Non. Open Design pilote l'agent que vous avez configuré — Claude Code, Codex, Cursor, Gemini, OpenCode, et d'autres — ou votre propre clé API. Aucun enfermement chez un fournisseur.

En quoi est-ce différent de Claude Design ? Même ressenti familier, mais gratuit, open source, local-first, agnostique vis-à-vis du modèle, et bien plus personnalisable — vous pouvez ajouter vos propres skills et processus. Sans oublier la génération d'images et de vidéos qu'un outil mono-fournisseur ne vous offre pas.

Puis-je fusionner ce que je construis dans une application existante ? Oui — les sorties sont des fichiers HTML, donc elles sont faites pour s'intégrer à un projet que vous avez déjà démarré. Sean aborde les workflows de fusion pilotés par spécification dans une vidéo complémentaire.

Est-ce gratuit ? L'application est open source sous licence 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 est basé sur les démonstrations pratiques de Sean Kochel. Regardez la vidéo complète ci-dessus, et abonnez-vous à Sean Kochel pour découvrir d'autres workflows de création avec l'IA.