Open Design : moteur de conception alimenté par l'IA, open source, pour les développeurs

Introduction

Si vous avez déjà essayé Claude Design d'Anthropic, vous connaissez l'excitation de voir un LLM transformer un simple cahier des charges en une maquette UI soignée. Le problème ? Claude Design est propriétaire, uniquement cloud, et lié aux modèles et compétences d'Anthropic. Open Design (le projet GitHub à github.com/nexu-io/open-design) résout ce dilemme en proposant un moteur de conception local‑first, open‑source, BYOK (bring‑your‑own‑key) qui fonctionne sur votre ordinateur portable, peut être déployé sur Vercel, et s'intègre à n'importe lequel des 16 CLI d'agents de codage que vous avez déjà.

Cet article passe en revue les concepts clés, l'architecture et les étapes pratiques pour commencer à créer des prototypes, des présentations et des médias de niveau professionnel avec Open Design.

Qu’est‑ce qui différencie Open Design ?

En bref, Open Design vous offre le même modèle mental centré sur l’artifact sans verrouillage propriétaire.

Vue d’ensemble de l’architecture principale

Browser (Next.js 16) ⇄ /api/* (Express daemon) ⇄ Local CLI agents

1. Frontend – Une SPA React/Next.js qui héberge le compositeur de chat, le sélecteur de compétences, le sélecteur de système de design et l’aperçu sandboxé en iframe.
2. Daemon – Un serveur Express (od) sous Node‑24 qui :
3. Parcourt votre $PATH à la recherche des CLI d’agents de codage supportés et les enregistre.
4. Stocke projets, conversations et modèles dans une base SQLite locale (.od/app.sqlite).
5. Normalise les réponses en streaming de n’importe quel fournisseur LLM via un proxy BYOK (/api/proxy/{anthropic,openai,…}).
6. Sert les galeries de modèles de prompts, les catalogues de systèmes de design et le linting d’artifacts.
7. Runtime d’agent – Le daemon lance le CLI sélectionné dans le dossier du projet (.od/projects/<id>). L’agent obtient de réelles capacités de lecture/écriture, Bash et de récupération web, ce qui le fait ressembler à un coéquipier travaillant sur un vrai système de fichiers.

La séparation des responsabilités signifie que vous pouvez exécuter l’interface web sur n’importe quelle machine, tandis que les appels lourds aux LLM se font localement ou via vos propres clés d’API.

Démarrage – Trois chemins rapides

1️⃣ Application de bureau pré‑construite (Zero‑setup)

1. Visitez open‑design.ai et téléchargez le dernier installateur macOS ou Windows.
2. Lancez l’application – elle regroupe le daemon, l’interface web et le shell Electron optionnel.
3. Le premier lancement crée un dossier caché .od, détecte les agents installés et charge la compétence par défaut (web‑prototype).

2️⃣ Docker Compose (Pas de Node requis)

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d   # démarre le daemon + le web sur le port 7456

3️⃣ Exécution depuis le source (Contrôle complet du développeur)

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install
pnpm tools-dev run web   # démarre le daemon + le web, affiche l’URL

Le flux de conception – Du cahier des charges à l’artifact

1. Choisir une compétence – Sélectionnez un prototype (par ex., mobile‑app) ou une présentation (guizang‑ppt). Chaque compétence fournit un SKILL.md qui définit le mode, la plateforme et les actifs requis.
2. Sélectionner un système de design – Choisissez parmi les 72 entrées du catalogue. Le système fournit un DESIGN.md en 9 sections (couleurs, typographie, espacements, etc.).
3. Entrer un cahier des charges – Le premier tour est un formulaire de question qui verrouille la surface, l’audience, le ton, le contexte de marque et l’échelle. Cela élimine 80 % des boucles de refonte coûteuses.
4. Choisir une direction visuelle – Si vous n’avez pas de marque, un second formulaire propose cinq directions sélectionnées (Editorial Monocle, Modern Minimal, Tech Utility, Brutalist, Soft Warm). Un clic injecte une palette déterministe et une pile de polices.
5. Progression Todo en direct – L’agent diffuse une carte todo (in_progress → completed) afin que vous puissiez intervenir en cours de génération.
6. Aperçu sandboxé – L’<artifact> généré s’affiche dans une iframe srcdoc propre. Vous pouvez éditer les fichiers directement dans l’espace de travail et relancer la compétence.
7. Export – Cliquez sur Save pour enregistrer l’artifact en HTML, PDF, PPTX, ZIP ou Markdown. Les modèles que vous aimez peuvent être sauvegardés dans la table SQLite templates pour réutilisation.

Stack de prompts – La sauce secrète

Le stack de prompts d’Open Design n’est pas un simple message system + user. Il se compose de :

• Directives de découverte – le formulaire de question, l’extraction de spécifications de marque, et la critique en 5 dimensions.
• Charte d’identité – règles anti‑AI‑slop, voix de junior‑designer, et contraintes spécifiques à la marque.
• DESIGN.md actif – valeurs de tokens pour le système choisi.
• SKILL.md actif – instructions spécifiques au mode et références de checklist.
• Métadonnées du projet – fidélité, notes du présentateur, drapeaux d’animation.
• Pré‑flight de fichiers annexes – lecture des actifs, validation de la checklist, injection des valeurs par défaut.

Comme chaque couche est un fichier, vous pouvez éditer le stack de prompts directement (apps/daemon/src/prompts/*.ts) pour personnaliser le ton, ajouter de nouvelles philosophies de design, ou intégrer un LLM propriétaire.

Génération de médias – Images, Vidéo, Audio

Open Design propose une galerie de prompt‑templates : * 93 prompts d’image (gpt‑image‑2) – affiches, avatars, infographies. * 39 prompts vidéo Seedance 2.0 – texte‑to‑video cinématographique de 15 s. * 11 modèles HyperFrames – HTML → MP4 motion graphics.

Sélectionnez un modèle, le daemon transmet la requête au modèle approprié, et le .png ou .mp4 résultant atterrit dans le dossier du projet, prêt à être référencé par la compétence suivante.

Extension de la plateforme

Ajouter une nouvelle compétence

1. Créez un dossier sous skills/ en suivant la convention existante SKILL.md.
2. Ajoutez les actifs nécessaires (template.html, references/…).
3. Redémarrez le daemon – la nouvelle compétence apparaît dans le sélecteur.

Ajouter un système de design

Déposez un DESIGN.md dans design-systems/<brand>/. Le schéma en 9 sections (couleurs, typographie, espacements, composants, motion, voix, marque, anti‑patterns) est validé par apps/daemon/src/skills.ts.

Ajouter un nouveau CLI d’agent

Modifiez apps/daemon/src/agents.ts et ajoutez une nouvelle entrée avec le nom du binaire, le format de streaming, et la map des arguments. Le daemon le détectera automatiquement au prochain démarrage.

Cas d’utilisation réels

Comparaison avec les concurrents

• OpenCoDesign – Premier clone open de Claude‑Design, mais limité à un bundle Electron desktop et à moins de compétences.
• OpenCoCodesign – Partage la boucle streaming‑artifact mais fournit son propre agent intégré. Open Design délègue aux agents que vous faites déjà confiance, gardant le runtime léger.
• Claude Design – Puissant mais fermé, uniquement cloud, et coûteux. Open Design reproduit le même ensemble de fonctionnalités tout en restant gratuit, auto‑hébergé et extensible.

Communauté & Contribution

Open Design prospère grâce aux contributions de la communauté : * Les good‑first‑issues sont étiquetés pour les nouveaux venus. * Ajouter une compétence ou un système de design se fait via une PR d’un seul dossier. * Le CONTRIBUTING.md fournit les directives de style, les politiques de revue de code, et les instructions de traduction (le dépôt propose la documentation en 12 langues). * Plus de 170 contributeurs ont déjà aidé à façonner le projet, et le nombre d’étoiles (35 k+) montre un fort intérêt.

Conclusion

Open Design démontre qu’un moteur de conception IA local‑first, open‑source peut rivaliser avec les offres commerciales. En s’appuyant sur les CLI d’agents de codage existants, un riche catalogue de systèmes de design, et un stack de prompts discipliné, il délivre des artefacts rapides, reproductibles et cohérents avec la marque sans jamais envoyer vos actifs propriétaires dans le cloud.

Que vous soyez un fondateur solo créant un pitch deck, une équipe produit prototypant une UI, ou un développeur curieux des flux de travail pilotés par les LLM, Open Design vous donne les outils pour concevoir, itérer et exporter entièrement sous votre contrôle.

Prêt à l’essayer ? Téléchargez l’application de bureau, lancez un conteneur Docker, ou clonez le dépôt et commencez à construire dès aujourd’hui.