Concevoir avec une qualité digne de Claude Design sans brûler de tokens

Ce guide prend l’angle du coût de front : si vous avez utilisé un outil de design cloud fermé, vous connaissez la magie — et vous savez que les tokens s’épuisent vite. Open Design vous permet de concevoir avec une qualité comparable en faisant tourner le travail via n’importe quel modèle de votre choix — l’agent que vous payez déjà, ou votre propre clé — pour ne pas rationner un budget de design séparé. Il suit la construction que Roy Shavit réalise dans sa démonstration, réécrite en anglais et mise à jour avec la version actuelle. Regardez la vidéo ci-dessus pour la démonstration en direct, ou lisez la suite pour la version écrite.

La galerie HyperFrames : des créations de motion et de vidéo pilotées par le code, à forker et à remixer.

Qu’est-ce qu’Open Design ?

Open Design est une plateforme de design open source et local-first. Comme l’outil cloud fermé, vous lui donnez un prompt et récupérez un artefact réel — une landing page, une application ou un deck — sous forme de HTML modifiable sur lequel vous pouvez continuer à travailler dans VS Code ou votre éditeur. Trois choses le distinguent, et les deux premières expliquent pourquoi il revient moins cher :

• Il est open source (Apache-2.0) — lisez le code, forkez-le, hébergez-le vous-même.
• Il tourne sur votre ordinateur — les fichiers restent sur votre machine ; rien ne part vers un cloud tiers.
• Il utilise n’importe quel modèle de votre choix — Codex, Claude, ou plus de 15 autres modèles via votre CLI existante, ou votre propre clé API (BYOK).

La question du coût : arrêtez de rationner les tokens

La formule de Roy est sans détour, et c’est tout l’enjeu : un outil de design cloud fermé épuise très vite son allocation de tokens, si bien que vous finissez par rationner votre travail de design. Open Design supprime ce plafond parce que la génération passe par l’agent/l’abonnement que vous avez déjà, ou une clé que vous contrôlez. Vous décidez du compromis coût/qualité projet par projet — un modèle bon marché pour les brouillons, un modèle haut de gamme pour la passe finale — au lieu d’être facturé au compteur par le plafond de design séparé d’un tiers. L’auto-hébergement signifie aussi que le travail se fait sur votre machine, ce qui garde tout léger.

Étape 1 — Installer et détecter vos modèles

Le chemin le plus simple est l’application de bureau : rendez-vous sur open-design.ai/download, choisissez votre OS, téléchargez et glissez-la dedans. Vous préférez 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 (un port dynamique — n’en codez aucun en dur). Dans les paramètres, Open Design reconnaît immédiatement les modèles installés localement — Roy a Codex et Claude, et il détecterait aussi OpenCode ou d’autres. Définissez un modèle par défaut, ou apportez votre propre clé de n’importe quel fournisseur, pour ne même pas avoir besoin d’une CLI installée. C’est là sa singularité : vous n’êtes pas forcé chez un seul fournisseur.

Mode présentation : choisissez une catégorie de deck et forkez un exemple comme point de départ.

Étape 2 — Construire une landing page, itérer à moindre coût

Roy construit une landing page pour un service de streaming de jeux. Il envoie le brief, Open Design renvoie un formulaire de découverte (type de sortie, audience, direction de marque, périmètre, niveau de mouvement), il répond, et il construit — en tournant ici sur Claude Opus parce que c’est ce que sa CLI a configuré. Le résultat est une solide première version : hero, chiffres de démo, prise en charge des plateformes, une page de tarifs, des témoignages, une FAQ — responsive sur ordinateur, tablette et téléphone.

Les outils d’itération maintiennent le coût des changements bas : sélectionner une zone et ajouter une note, laisser un commentaire, ou faire de l’édition en ligne pour modifier le texte directement. Basculez en vue code pour voir le HTML généré et les fichiers de design. Quand vous êtes satisfait, le bouton Partager exporte en PDF ou déploie directement vers Vercel ou Cloudflare Pages (collez votre token et le site passe en ligne), ou vous cliquez vers la source et continuez dans VS Code, Cursor ou votre éditeur.

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

Étape 3 — Au-delà des pages : générer une vidéo

Open Design ne se limite pas au design statique. Roy utilise la compétence de mouvement hyperframes pour générer un graphique à barres animé dans un style New York Times — cela prend quelques minutes et produit un vrai MP4 que vous pouvez intégrer dans une vidéo plus longue ou utiliser comme extrait de marque. Il y a aussi plus de 170 plugins de systèmes de design à choisir (Apple, PlayStation, et plus), et comme la bibliothèque est ouverte, la communauté continue d’y ajouter.

Quand utiliser quoi (l’avis honnête)

Roy est juste à ce sujet. Tournez-vous vers Open Design quand vous voulez de la flexibilité sur les modèles, un coût plus bas, ou l’auto-hébergement — le travail reste sur votre machine et tourne sur le modèle de votre choix, y compris un modèle tiers. Tournez-vous vers l’outil cloud fermé quand vous voulez une configuration minimale, sans installation, et le moins d’effort pour démarrer — et notez qu’il reste un peu plus abouti dès la sortie de boîte. Même contenu, finition légèrement supérieure là-bas ; nettement plus de contrôle et un coût de fonctionnement plus bas ici.

Conseils

• Faites tourner sur l’agent que vous payez déjà (ou BYOK) pour échapper à un plafond de tokens séparé.
• Brouillonnez sur un modèle bon marché, finalisez sur un modèle puissant — vous contrôlez le curseur coût/qualité projet par projet.
• Utilisez l’édition en ligne et les commentaires de zone pour des changements peu coûteux et chirurgicaux plutôt que des régénérations complètes.
• Exportez vers le code ou déployez sur Vercel/Cloudflare directement depuis Partager une fois terminé.
• Essayez la compétence hyperframes quand vous avez besoin de mouvement/vidéo, pas seulement de pages statiques.

FAQ

En quoi cela économise-t-il des tokens par rapport à un outil cloud fermé ? La génération passe par votre propre agent/abonnement ou votre propre clé API, il n’y a donc pas de budget de design séparé compté au compteur à épuiser — vous choisissez le modèle et le coût.

Puis-je continuer à travailler la sortie dans mon éditeur ? Oui — la sortie est du HTML/des fichiers modifiables. Cliquez vers la source et continuez dans VS Code, Cursor ou n’importe quel éditeur, ou déployez sur Vercel/Cloudflare Pages.

Peut-il faire plus que des pages web ? Oui — prototypes, decks, images et vidéo (via la compétence de mouvement hyperframes), plus une grande bibliothèque de systèmes de design.

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

---

Ce guide écrit est basé sur la démonstration de Roy Shavit. Regardez la vidéo complète ci-dessus, et abonnez-vous à Roy Shavit pour plus de contenu pratique sur la création avec l’IA.