Du prompt à l’URL en ligne — Éditer, inspecter et déployer en un clic avec Open Design

Ce guide mène un prototype du prompt jusqu'à une URL en ligne : choisir un design system, générer, peaufiner avec les outils Edit et Inspect sur le canevas, puis déployer directement vers Vercel ou Cloudflare Pages — sans quitter Open Design. Il s'appuie sur la démo que 01Coder réalise dans sa démonstration, adaptée pour ce guide écrit et mise à jour avec la version actuelle. Regardez la vidéo ci-dessus pour le déroulé en direct, ou poursuivez la lecture pour la version écrite.

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 qui fonctionne par-dessus l’agent de codage que vous utilisez déjà — Claude Code, Codex, Gemini, Hermes, et d’autres — ou votre propre API key. Elle est livrée sous forme d’application de bureau (aucune compilation requise) et associe une riche bibliothèque de skills à une riche bibliothèque de design systems de qualité marque, pour que vous partiez d’une vraie esthétique plutôt que d’une toile vierge.

• Open source, Apache-2.0 — clonez-la, auto-hébergez-la, ou téléchargez simplement l’application.
• Fonctionne en local — vos projets vivent sur votre propre machine.
• Agent interchangeable — changez d’agent en bas à gauche à tout moment.
• Des design systems de vraies marques — Apple, Airbnb, ElevenLabs, et bien d’autres.

Étape 1 — Installer et choisir un design system

Le chemin le plus simple est l’application de bureau depuis open-design.ai/download (macOS et Windows ; Docker ou pnpm si vous préférez exécuter depuis les sources). Au lancement, le coin inférieur gauche affiche l’agent actif (01Coder utilise Codex) — cliquez dessus pour en changer.

Créez un Prototype, donnez-lui un nom, et choisissez un design system dans le menu déroulant — chaque entrée habille le rendu selon le look de cette marque. Si vous avez déjà construit quelque chose dans Claude Design, importez son ZIP ici.

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

Étape 2 — Générer avec la phase de découverte + une direction visuelle

Rédigez votre brief et envoyez. Open Design pose une courte série de questions de découverte (à qui c’est destiné, le ton du design, le contexte de marque, la langue), puis propose un sélecteur de direction visuelle — 01Coder choisit une direction éditoriale « FT Magazine ». Choisissez-en une et il construit la première version à droite.

Étape 3 — Peaufiner avec Edit et Inspect

C’est ici que vous polissez sans relancer de prompt :

• Edit — cliquez sur n’importe quel élément et changez directement son contenu. 01Coder raccourcit un libellé de « GitHub » à « GH » et réécrit un mot d’un titre, puis clique sur apply content. Vous pouvez ajuster les liens de la même manière, et le panneau de gauche affiche l’artefact organisé par calques.
• Inspect — pour le style visuel. La première fois, il avertit que l’artefact n’a pas de balises data-oid ; laissez l’agent les ajouter (c’est ainsi qu’Open Design cible les éléments de façon fiable), puis rechargez. Maintenant, cliquer sur n’importe quel élément (par exemple le h1 du hero) vous permet d’ajuster la couleur, le fond et la taille de police, avec une réinitialisation si vous allez trop loin.

Pour les changements plus importants, revenez dans le chat pour une édition conversationnelle directe — Edit/Inspect servent aux ajustements rapides et chirurgicaux.

Étape 4 — Déployer vers une URL en ligne en un clic

Quand c’est prêt, le menu Share (en haut à droite) exporte en PDF, PPTX, ZIP ou HTML autonome — ou déploie sur Vercel ou Cloudflare Pages en un clic. En utilisant Cloudflare comme le fait 01Coder :

1. Cliquez sur deploy → Cloudflare, puis get / create an API token.
2. Créez un token personnalisé avec la permission Cloudflare Pages, passez au récapitulatif, et créez-le.
3. Collez le token dans Open Design, ajoutez votre account ID (copiez-le depuis le tableau de bord Cloudflare), et déployez.
4. Ouvrez le lien qu’il vous donne — si le premier chargement semble étrange, rafraîchissez une ou deux fois pendant la propagation.

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

Pas satisfait du résultat en ligne ? Retournez dans le chat, itérez, et redéployez.

Conseils

• Partez d’un design system pour que le premier jet soit déjà fidèle à la marque.
• Laissez l’agent ajouter les balises data-oid avant d’utiliser Inspect, puis rechargez l’aperçu.
• Utilisez Edit pour le texte, Inspect pour le style, le chat pour la structure — choisissez le bon outil pour le changement.
• Pour un déploiement Cloudflare, il vous faut les deux : un token API (avec permission Pages) et votre account ID.
• Rafraîchissez après le premier déploiement si la page ne s’est pas encore propagée.

FAQ

Puis-je vraiment déployer vers une URL publique depuis l’intérieur d’Open Design ? Oui — le menu Share déploie sur Vercel ou Cloudflare Pages en un clic (vous fournissez le token du fournisseur ; Cloudflare a aussi besoin de votre account ID).

Qu’est-ce que data-oid et pourquoi Inspect le réclame-t-il ? C’est un attribut qu’Open Design ajoute aux éléments pour pouvoir les cibler de façon fiable. Laissez l’agent l’ajouter, rechargez, et Inspect fonctionne.

Dois-je exécuter depuis les sources ? Non — téléchargez l’application de bureau pour macOS ou Windows. Docker et pnpm depuis les sources sont des options si vous préférez.

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

---

Ce guide écrit est basé sur la démo pratique de 01Coder. Regardez la vidéo complète ci-dessus, et abonnez-vous à 01Coder pour d’autres analyses approfondies de produits IA.