Transformez une image de référence en vraie page avec Open Design (gratuitement via Gemini)

Ce guide porte sur un workflow d'Open Design précis et sous-utilisé : partir d'une image de référence. Trouvez un design qui vous plaît — un shot Dribbble, la capture d'un site quelconque — déposez-le, et Open Design construit une vraie page dans ce langage visuel. Et vous pouvez faire tourner le tout gratuitement sur le palier gratuit d'un agent de code. Il suit le walkthrough que Compile Future donne dans sa vidéo, réécrit et remis à jour avec la version actuelle. Regardez la vidéo ci-dessus, ou lisez la version écrite ci-dessous.

L'espace de travail Open Design : décrivez ce que vous voulez construire, choisissez un mode, et votre agent fait le reste.

Qu'est-ce qu'Open Design ?

Open Design est une plateforme de design open source et local-first — une alternative à Claude Design qui tourne sur votre propre machine. La différence majeure : au lieu d'être verrouillé sur un seul modèle, il pilote l'agent de code que vous utilisez déjà — Claude Code, Codex, Cursor, Gemini, OpenCode et d'autres. Il est livré avec une bibliothèque riche de skills et de systèmes de design de marques (Airbnb, Apple, Cursor, Ferrari, Figma et bien d'autres), si bien que la génération part d'une vraie esthétique plutôt que d'un prompt générique.

• Open source, Apache-2.0 — clonez-le, auto-hébergez-le, ou téléchargez simplement l'application.
• Tourne en local — vos projets vivent sur votre propre machine.
• N'importe quel modèle — y compris les paliers gratuits ; aucun GPU requis (le modèle tourne dans le cloud via votre CLI, pas sur votre matériel).

Étape 1 — Installer et connecter un modèle gratuit

Téléchargez l'installateur depuis open-design.ai/download (DMG macOS ou .exe Windows), ou lancez-le depuis les sources. Au premier lancement, choisissez votre agent. Compile Future utilise Gemini CLI parce que son palier gratuit est généreux (de nombreuses requêtes gratuites par jour) — ainsi tout le workflow ne coûte rien :

• Choisissez Gemini dans la configuration. S'il n'est pas détecté, installez Gemini CLI (une seule commande depuis son site) et connectez-vous avec un compte Google.
• Vous préférez autre chose ? N'importe quelle CLI détectée fonctionne, ou apportez votre propre API key.

Voilà pourquoi « aucun GPU » : le modèle tourne dans le cloud via votre CLI, donc même un ordinateur portable modeste suffit.

Étape 2 — Construire à partir d'un prompt textuel (la base)

Définissez un système de design par défaut (Compile Future en aime un audacieux), choisissez Prototype, nommez-le, et sélectionnez high fidelity pour le meilleur rendu. Envoyez votre brief. Open Design pose quelques questions de découverte (outil unique / landing page / tout-en-un ? responsive ? ton ? contexte de marque ?) et une direction visuelle (par ex. un look minimaliste à la Vercel), puis construit une première version propre. Vous pouvez ajuster les couleurs d'accent directement sur la page.

Un vrai prototype généré, rendu dans l'aperçu — une landing page d'agence sombre et cinématographique.

Étape 3 — Le workflow par image de référence (la bonne partie)

Voici la technique qui vaut la vidéo. Au lieu de décrire un look avec des mots, montrez le look à Open Design :

1. Trouvez un design qui vous plaît — parcourez Dribbble (cherchez par ex. « tools website ») ou n'importe quel site en ligne pour vous inspirer.
2. Enregistrez-en une capture d'écran.
3. De retour dans Open Design, créez un projet en mode free-form, joignez la capture, et lancez ce prompt : « build my [site], use the design language from the image I shared. »
4. Répondez aux questions de découverte en lui disant de coller à l'UI de l'image.

Open Design rédige une brand spec à partir de la référence (il l'affiche et vous demande de la confirmer), puis construit la page dans ce langage visuel — même ressenti de mise en page, mêmes couleurs et typographie que votre référence, appliqués à votre contenu. C'est le moyen le plus rapide d'obtenir un résultat fidèle à la marque quand vous pouvez voir ce que vous voulez mais sans pouvoir le décrire.

La bibliothèque de plugins : installez des skills directement depuis le registry — y compris des skills de design anti-slop.

Étape 4 — Éditer et publier

Affinez en langage courant — « remove the sign-in button », « adjust the card radius » — et regardez-le se mettre à jour. Consultez le code via Source, puis utilisez Share pour télécharger un ZIP, un PDF ou un PowerPoint, exporter du HTML autonome, ou deploy to Vercel en un clic (collez simplement un Vercel token) pour obtenir un lien partageable.

Astuces

• Tournez gratuitement sur le palier gratuit de Gemini CLI (ou n'importe quelle CLI à palier gratuit) — pas d'abonnement, pas de GPU.
• Utilisez une image de référence quand vous pouvez vous représenter le look sans pouvoir le décrire — Dribbble ou la capture d'un site quelconque.
• Le mode free-form + « match the image » est le schéma de prompt qui colle parfaitement à la référence.
• Confirmez la brand spec qu'il génère avant qu'il construise, pour que la direction soit la bonne.
• high fidelity pour un rendu soigné ; itérez avec des éditions en langage courant.

FAQ

Ai-je besoin d'un GPU ? Non. Le modèle tourne via votre CLI (dans le cloud), pas sur votre machine — un ordinateur portable normal suffit.

Puis-je vraiment l'utiliser gratuitement ? Oui — pointez-le vers une CLI à palier gratuit comme Gemini et vous pourrez générer des designs sans frais ; vous ne payez que si vous choisissez un modèle/API payant.

Comment concevoir à partir d'une image qui me plaît ? Utilisez le mode free-form, joignez la capture d'écran et dites-lui d'utiliser le langage de design de l'image ; il extrait une brand spec et construit dans ce style.

Est-ce gratuit et open source ? Oui — Apache-2.0. Faites-le tourner en local gratuitement ; vous ne payez que pour l'usage du modèle/des médias de ce que vous connectez.

---

Ce guide écrit s'appuie sur le walkthrough de Compile Future. Regardez la vidéo complète ci-dessus, et abonnez-vous à Compile Future pour plus de workflows d'IA gratuits.