Concevoir avec Open Design un site qui colle à votre marque existante

Ce guide se concentre sur une astuce phare d'Open Design : pointez-le vers votre site existant et l'agent tire votre véritable marque — polices, couleurs, ton — dans une spécification, puis conçoit dans votre voix. Il couvre aussi l'installation bureau en un clic et un regard franc sur les raisons de se tourner vers une alternative ouverte. Il suit la réalisation pratique que Brendan O'Connell mène dans sa démonstration, réécrite et mise à jour pour la version actuelle. Regardez la vidéo ci-dessus pour le déroulé en direct, ou poursuivez la lecture pour la version écrite.

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

Qu'est-ce qu'Open Design ?

Open Design est une plateforme de conception open source et local-first qui tourne par-dessus l'agent de code que vous utilisez déjà — Claude Code, Codex, Cursor, Gemini, OpenCode et d'autres — ou avec votre propre clé API. C'est en somme un espace de travail à la Claude Design que vous exécutez sur votre propre machine, sans être enfermé dans le cloud d'un seul fournisseur ni soumis aux plafonds d'usage de cet outil. Il est sous Apache-2.0, livré avec une vaste bibliothèque de skills et de systèmes de design, et y ajoute la génération de médias (image, vidéo, audio).

Pourquoi se tourner vers une alternative ouverte

La motivation de Brendan est concrète et mérite d'être répétée, car c'est le facteur décisif pour beaucoup. Il a généré un seul système de design dans l'outil cloud fermé, et cela a englouti environ 75 % de sa limite hebdomadaire — le laissant coincé jusqu'à la semaine suivante. Cette limite est distincte du quota normal de l'abonnement, ce qui rend le flux de travail quasi inutilisable pour une vraie itération. Tourner sur votre propre abonnement Claude Code (ou tout autre) supprime ce mur : vous ne heurtez pas de plafond de design séparé et vous n'êtes pas enfermé dans un seul écosystème.

Étape 1 — Installer (la voie en un clic)

La voie la plus simple, et celle que recommande Brendan, c'est l'application de bureau : rendez-vous sur open-design.ai/download et récupérez l'exécutable pour macOS ou Windows. L'application est opérationnelle en peu de temps et détecte automatiquement les CLI d'agents déjà présentes sur votre machine — Brendan n'a rien configuré ; elle a repéré son abonnement Claude Code et était prête à l'emploi.

Vous préférez le terminal ? 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 (un port dynamique — n'en codez aucun en dur). À droite, vous trouverez les réglages : les agents détectés, ainsi que les fournisseurs de médias (OpenAI pour l'image, MiniMax pour la vidéo, ElevenLabs pour la voix), des connecteurs (Composio MCP), et même des animaux de bureau. Vous pouvez aussi apporter votre propre clé pour n'importe quel fournisseur.

Étape 2 — Concevoir à partir de votre marque existante

Voilà l'astuce qui vaut à elle seule le prix du billet. Créez un projet, choisissez haute fidélité, et dans votre brief, dites-lui de concevoir pour votre site existant. L'agent dispose d'un outil de récupération web, il va donc lire votre site en ligne, puis en dériver une spécification de marque.

Dans la vidéo, Brendan le pointe vers son propre site et Open Design :

1. récupère la page et en extrait le contenu réel.
2. rédige un brand-spec.md qui capture sa police réelle (il a correctement repéré Fig Tree), sa couleur et ses choix de design — « pas de boutons en pilule, pas de cartes entièrement arrondies, couleur d'accent employée avec parcimonie, espaces blancs généreux » — plus son ton (« pas de marketing haletant »).
3. génère un DESIGN.md et construit la page dans cette voix, en mêlant sa marque existante à une mise en page plus nette.

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

Avant de construire, Open Design fait passer un court formulaire de découverte (une page ou quelques pages ? direction visuelle ? coller au site actuel ? des espaces réservés réalistes ?) afin de verrouiller la bonne direction. Le résultat conserve son slogan, son bleu et sa police, puis y superpose une mise en page plus tranchée — une sortie multipage que vous pouvez parcourir au clic.

Étape 3 — Vérifier l'auto-contrôle anti-slop et exporter

En terminant, Open Design exécute un auto-contrôle anti-slop — Brendan le voit confirmer « pas d'émojis, une seule police, une touche décisive, du texte de positionnement réel d'un bout à l'autre ». C'est le garde-fou qui empêche le résultat d'avoir l'air généré.

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

Parcourez les onglets exemples et systèmes de design pour trouver des points de départ (chaque système de design vous fournit un DESIGN.md entièrement éditable), et quand vous êtes satisfait, exportez l'artefact en HTML, PDF ou ZIP. Comme tout tourne localement sur votre propre agent, il n'y a aucun plafond de design séparé à heurter pendant que vous itérez.

Conseils

• Pointez-le vers votre site en ligne pour hériter de vos vraies polices, couleurs et de votre ton — la voie la plus rapide vers un résultat fidèle à la marque.
• Utilisez l'application de bureau pour la voie sans configuration ; elle détecte automatiquement votre agent.
• Tournez sur votre propre abonnement CLI pour esquiver le plafond hebdomadaire de design distinct des outils fermés.
• Lisez les brand-spec.md / DESIGN.md générés — ce sont des fichiers éditables, alors corrigez tout ce que la récupération a mal saisi.
• Investissez un peu dans le prompt — un brief plus riche produit une première version nettement meilleure.

FAQ

Peut-il vraiment concevoir à partir de mon site existant ? Oui — l'agent dispose d'un outil de récupération web. Dites-lui de concevoir pour votre site et il extrait vos polices, couleurs, choix de mise en page et ton dans un brand-spec.md, puis conçoit dans cette voix.

Dois-je configurer mon agent ? En général non. L'application de bureau détecte automatiquement les CLI d'agents déjà installées (Claude Code, Codex, Gemini et plus). Vous pouvez aussi apporter votre propre clé.

A-t-il les limites d'usage de l'outil fermé ? Pas de plafond de design séparé — la génération s'appuie sur l'agent/l'abonnement que vous connectez, vous n'êtes donc pas bloqué après un seul 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 des fournisseurs que vous connectez.

---

Ce guide écrit s'appuie sur la démonstration de Brendan O'Connell. Regardez la vidéo complète ci-dessus, et abonnez-vous à Brendan O'Connell pour d'autres décryptages d'outils open source.