Comment fonctionne Open Design — l'architecture auto-hébergeable « apportez votre propre clé »

Ce guide s'adresse à celles et ceux qui veulent comprendre ce qu'ils exécutent réellement : comment Open Design fonctionne sous le capot, pourquoi il peut être auto-hébergé et BYOK à chaque couche, et pourquoi ses skills et ses systèmes de design ne sont que des fichiers que vous pouvez forker. Il suit la présentation centrée sur l'architecture que donne AI Stack Engineer dans sa vidéo complète, réécrite et mise à jour selon la version actuelle. Regardez la vidéo ci-dessus pour la démonstration en direct, ou lisez la version écrite ci-dessous.

Le hub de plugins : parcourez le registre, importez des plugins et préparez-les pour votre équipe.

Qu'est-ce qu'Open Design ?

Open Design est un remplaçant entièrement open source d'un outil de design cloud : local-first, déployable sur le web et BYOK à chaque couche. « BYOK » signifie apportez votre propre clé (bring your own key). Plutôt que d'embarquer son propre modèle ou agent, Open Design analyse votre machine à la recherche de n'importe quel CLI de codage que vous possédez déjà — Claude Code, Codex, Cursor, Gemini, OpenCode, et d'autres — et s'en sert comme moteur. Si aucun n'est dans votre chemin, il existe un repli sur l'API Anthropic. La licence est Apache-2.0 : vous pouvez donc le forker, le déployer en interne et le modifier librement.

Le point sur lequel AI Stack Engineer revient sans cesse : un outil de design cloud ne tourne que sur le modèle d'un seul fournisseur, dans son cloud, derrière un abonnement payant, sans aucune possibilité d'auto-hébergement. Open Design inverse les trois — votre machine, votre agent, votre clé.

Comment c'est construit (la partie qui vaut la peine d'être comprise)

L'architecture est volontairement simple :

• Frontend — une application Vite + React + TypeScript.
• Backend — un démon Node + Express avec SQLite pour les projets, les conversations, les messages et les onglets.
• Le démon est le seul processus privilégié. Il lance le CLI que vous avez choisi, avec le répertoire de travail défini sur un dossier propre à chaque projet, sous un répertoire caché .od.

C'est ce dernier point qui fait d'Open Design plus qu'une boîte de chat : l'agent obtient de vrais outils de lecture / écriture / bash / web-fetch sur un vrai système de fichiers. Lorsqu'il génère un artefact, il écrit de véritables fichiers sur le disque, que vous pouvez ouvrir, modifier, versionner et exporter — au lieu de renvoyer un bloc dans une fenêtre de chat.

Les skills et les systèmes de design ne sont que des fichiers

Deux briques font l'essentiel du travail, et toutes deux sont de simples fichiers qui vous appartiennent :

• Les skills couvrent des surfaces concrètes — prototype web, landing SaaS, dashboard, page de tarifs, docs, blog, application mobile, présentations (dont un skill de PPT façon magazine) — auxquels s'ajoutent des modèles de livrables comme des specs PM, des points hebdomadaires, des comptes-rendus de réunion, des runbooks, des rapports financiers, des factures, des tableaux Kanban et des OKR. Chacun est un fichier que vous pouvez lire, modifier ou enrichir.
• Les systèmes de design sont stockés sous forme de fichiers DESIGN.md en markdown brut. Chacun définit la couleur, la typographie, les espacements, la mise en page, les composants, le mouvement, le ton, les règles de marque et les anti-patterns, tirés de marques réelles.

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

Parce que les deux sont des fichiers, tout votre flux de design devient versionnable et forkable — une équipe peut garder son skill interne et son DESIGN.md de marque dans git, et faire générer n'importe quel agent à partir de là.

Installer et auto-héberger

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install   # cela télécharge beaucoup de dépendances — laissez-lui une minute
pnpm tools-dev run web

Ouvrez l'URL locale qu'il affiche (un port dynamique — ne le codez pas en dur). Vous préférez zéro configuration ? L'application de bureau sur open-design.ai/download évite Node et pnpm. Au premier lancement, elle analyse votre PATH et liste les agents trouvés ; choisissez-en un (AI Stack Engineer teste le chemin non-Claude avec OpenCode), ou utilisez l'option BYOK d'Anthropic.

Deux astuces dans la pile de prompts qu'il vaut la peine de connaître : un formulaire de découverte (il interroge sur la surface, l'audience, le ton, la marque, l'échelle avant d'écrire — 30 secondes de boutons radio économisent 30 minutes de réorientation) et un sélecteur de direction (cinq directions visuelles soignées avec des palettes déterministes, pour que le modèle n'improvise pas l'ambiance).

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

Une fois terminé, exportez en HTML, PDF ou ZIP — ou déployez. Comme c'est déployable sur le web et local-first, rien n'a à passer par le cloud d'un tiers.

Le verdict honnête

AI Stack Engineer reste équitable : un outil cloud soigné, accordé à un modèle de premier plan, l'emporte encore sur la finition prête à l'emploi et l'étendue des exports. Open Design l'emporte sur ce qui compte pour beaucoup de gens — il est gratuit et sous Apache-2.0, vous apportez votre propre agent et votre propre clé, et la flexibilité de modèle est un superpouvoir discret : si un fournisseur augmente ses prix, ou si vous voulez comparer comment deux modèles gèrent une mise en page, vous changez d'agent dans le menu déroulant et relancez. Quelques notes honnêtes : c'est au stade précoce d'une preview de recherche ; Claude Code bénéficie du streaming le plus riche (stream-JSON structuré) tandis que les autres CLI sont en mode ligne par ligne ; la qualité de sortie dépend fortement du modèle que vous visez ; et certaines fonctionnalités, comme les retouches chirurgicales en mode commentaire, sont encore sur la feuille de route.

Conseils

• Comprenez le dossier de projet .od — vos artefacts y sont de vrais fichiers ; sauvegardez-les / committez-les.
• Gardez les skills et DESIGN.md dans git pour un flux versionné et partageable en équipe.
• Utilisez un CLI local afin que la génération s'appuie sur un abonnement que vous payez déjà.
• Choisissez le moteur délibérément — un modèle faible, même avec un excellent système de design, produit malgré tout un résultat faible.
• Auto-hébergez / déployez lorsque vous avez besoin de confidentialité ou de contrôle — rien n'a à quitter votre machine.

FAQ

Que signifie « BYOK à chaque couche » ? Vous apportez votre propre CLI d'agent et votre propre clé de modèle. Open Design fournit la surface de design, les skills et les systèmes de design ; le modèle et son coût restent de votre côté.

Où vit réellement mon travail ? Sur votre machine, dans un dossier propre à chaque projet sous .od, géré par le démon local (SQLite + vrais fichiers). C'est auto-hébergeable et déployable sur le web.

Puis-je personnaliser les skills et les systèmes de design ? Oui — ce sont de simples fichiers (les skills sous forme de dossiers, les systèmes de design sous forme de DESIGN.md). Modifiez-les, ajoutez les vôtres et gardez-les sous contrôle de version.

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

---

Ce guide écrit s'appuie sur la présentation complète d'AI Stack Engineer. Regardez la vidéo entière ci-dessus et abonnez-vous à AI Stack Engineer pour d'autres décryptages pratiques de stacks IA.