Prise en main de Open Design : la bonne façon d’utiliser Claude Design en version open source

Présentation du projet

Open Design est une alternative open source à Claude Design, développée et maintenue par nexu-io/open-design.

Son idée centrale est très directe : ne pas réinventer la roue. Les agents de codage déjà présents sur votre ordinateur (Claude Code, Codex, Cursor Agent, etc., soit 16 CLI au total) deviennent directement le moteur de design. Ils sont combinés avec 31 compétences de design modulables et 72 systèmes de design « prêts à l’emploi » de niveau marque pour réaliser l’ensemble du processus sur votre machine.

Caractéristiques clés :

---

Profil des lecteurs visés

• Développeurs front-end/full-stack : veulent utiliser l’IA pour générer des maquettes, sans devoir apprendre des opérations Figma complexes
• Développeurs solo : doivent produire rapidement une landing page, un prototype mobile, une démo produit
• Équipes design : souhaitent une solution d’automatisation locale, sans dépendre du cloud
• Passionnés d’outils IA : veulent explorer le potentiel des agents de codage existants dans le domaine du design

---

Dépendances essentielles et environnement

Node.js ~24
pnpm 10.33.x (géré via Corepack)
Système d’exploitation : macOS / Windows / Linux

Open Design scanne automatiquement les agents de codage déjà installés sur votre PATH. Si aucune CLI n’est présente sur votre machine, il vous guidera pour configurer le mode BYOK (nécessite une API Key).

---

Arborescence complète du projet

open-design/
├── apps/
│   ├── daemon/                 # Service local (Express + SQLite)
│   │   └── src/
│   │       ├── agents.ts       # Détection des agents de codage et adaptateurs
│   │       ├── skills.ts       # Chargeur de compétences
│   │       └── server.ts       # Routes API
│   └── web/                    # Front-end Next.js 16
│       └── src/
│           ├── prompts/        # Modèles de prompts
│           ├── artifacts/      # Analyse des livrables
│           └── components/     # Composants UI
├── skills/                     # 31 compétences de design
│   ├── web-prototype/          # Prototype web
│   ├── mobile-app/             # Application mobile
│   ├── dashboard/              # Tableau de bord
│   ├── guizang-ppt/            # Présentations
│   └── ...
├── design-systems/             # 72 systèmes de design
│   ├── linear-app/
│   ├── vercel/
│   ├── anthropic/
│   └── ...
├── assets/frames/              # Trames d’appareils (iPhone, Pixel, iPad, MacBook)
└── .od/                        # Données d’exécution (SQLite, fichiers du projet)

---

Étapes pas à pas

1) Cloner le dépôt et installer les dépendances

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install

corepack enable lit automatiquement la version pnpm verrouillée dans package.json (10.33.x) afin de garantir la cohérence entre environnements d’équipe.

2) Démarrer le serveur de développement local

pnpm tools-dev run web

Une fois le démarrage réussi, deux URL seront affichées :

✅ Daemon running at http://localhost:17456
✅ Web running at http://localhost:17573

Ouvrez l’URL Web dans votre navigateur pour commencer à l’utiliser.

3) Choisir l’agent de codage

Lors de la première ouverture de l’interface Web, Open Design détecte automatiquement les agents de codage présents sur votre PATH.

Les 16 CLI prises en charge :

Le sélecteur de modèle en haut à droite de l’interface affiche les agents détectés. S’il n’y a aucune CLI, cliquez sur la sélection du mode BYOK, puis exécutez via vos clés API en utilisant les interfaces OpenAI/Anthropic/Azure/Gemini.

4) Choisir les compétences de design

La page d’accueil liste 31 compétences, regroupées par scénarios :

• Design : web-prototype (par défaut), mobile-app, mobile-onboarding, gamified-app, wireframe-sketch, critique, tweaks
• Marketing : saas-landing, pricing-page, blog-post, email-marketing, social-carousel, magazine-poster, motion-frames, sprite-animation
• Opérations/Ingénierie/Produit : dashboard, docs-page, pm-spec, team-okrs, meeting-notes, kanban-board, eng-runbook, finance-report, invoice, hr-onboarding
• Deck (présentations) : guizang-ppt (par défaut), simple-deck, replit-deck, weekly-update

En fonction de vos besoins, cliquez sur la compétence correspondante : par exemple, choisissez mobile-app pour générer un prototype mobile.

5) Choisir un système de design

Après la sélection d’une compétence, un panneau des systèmes de design s’affiche. Par défaut, deux systèmes de départ sont proposés : default (Neutral Modern) et warm-editorial (Warm Editorial).

La bibliothèque complète contient 72 systèmes de design de marque :

• AI & LLM : claude, cohere, mistral-ai, ollama, x-ai…
• Outils de développement : cursor, vercel, linear-app, supabase, posthog, sentry…
• Produits : notion, figma, airtable, intercom, raycast…
• E-commerce : shopify, airbnb, uber, nike, starbucks…
• Automobile : tesla, bmw, ferrari, lamborghini…
• Autres : apple, ibm, nvidia, spotify…

Vous pouvez aussi importer votre propre fichier DESIGN.md, afin de définir 9 dimensions de spécifications de design (couleurs de marque, typographies, espacements, etc.).

6) Envoyer des instructions de design

Saisissez vos besoins en design dans la zone de saisie, par exemple :

make me a mobile onboarding flow for a fitness app with dark theme

Après avoir rempli le formulaire puis envoyé, l’agent va :

1. Générer un plan TodoWrite et le mettre à jour en streaming en temps réel
2. Lire les modèles de compétences et le système de design
3. Exécuter une auto-vérification sur 5 dimensions (philosophie, hiérarchie, exécution, spécificité, retenue)
4. Produire le code <artifact>
5. Rendre un aperçu dans un iframe sandbox

7) Aperçu et export

Une fois la maquette rendue, vous pouvez :

• Édition en temps réel : modifier directement le HTML/CSS dans l’espace de fichiers à droite
• Téléchargement : exporter en HTML (ressources intégrées), PDF, PPTX, ZIP ou Markdown
• Enregistrer sur le disque : cliquez sur « Save to disk », les livrables sont enregistrés dans .od/artifacts/
• Continuer la conversation : dites à l’agent « rendre les boutons plus arrondis » ou « changer la palette de couleurs », et il modifiera le travail en se basant sur la maquette actuelle

Autres commandes fréquemment utilisées :

# Voir l’état d’exécution
pnpm tools-dev status

# Voir les logs
pnpm tools-dev logs

# Arrêter tous les services
pnpm tools-dev stop

# Redémarrer (si vous changez de ports)
pnpm tools-dev restart --daemon-port 17456 --web-port 17573

# Diagnostiquer un problème
pnpm tools-dev check

---

Modifier un projet existant

La plupart des gens, après avoir obtenu Open Design, se disent « c’est juste un outil pour générer une nouvelle page, non ? ». En réalité, vous pouvez l’utiliser pour modifier un projet existant, et il n’a pas besoin que votre projet contienne déjà un DESIGN.md.

La logique est très simple : l’agent dispose d’un accès complet au système de fichiers—Read, Write, Bash, WebFetch tout est disponible. En lui faisant analyser votre code, il comprendra votre langage de design, puis produira un rendu basé sur le style existant.

Construire rapidement une base visuelle avec le sélecteur de direction

Quand il n’y a pas de spécifications de design, Turn 2 affiche 5 directions prédéfinies : chacune est un palette de couleurs déterministe en OKLch + une pile de polices :

Après avoir choisi une direction, l’agent couvrira les variables :root des modèles de compétences avec cette palette. Ensuite, tous les composants suivront ces règles.

Téléverser des captures : laisser l’agent extraire le langage de design

C’est une manière plus fidèle à un projet réel. Open Design intègre un protocole d’extraction d’actifs de marque :

1. Locate  — repérer les blocs de couleurs clés dans la capture
2. Download — télécharger la capture dans le répertoire du projet
3. Grep hex — extraire les valeurs hex
4. Codify   — écrire dans brand-spec.md
5. Vocalise — l’agent produit en se basant sur brand-spec.md, et non en devinant à partir de la mémoire

La manipulation est simple :

"Here's our current app, I want you to match the styles"
# puis ajouter une capture ou coller l’URL de la page existante

L’agent analysera les couleurs principales et secondaires, les caractéristiques de typographie et les espacements dans la capture, générera brand-spec.md, puis toutes les modifications ultérieures se feront à partir de cette spécification.

Lire directement le code : plus précis que les captures

Le répertoire de travail par défaut de l’agent est .od/projects/<id>/, mais vous pouvez y placer un projet existant :

# Copier votre projet dans le répertoire de travail d’Open Design
cp -r ~/my-app/.   .od/projects/<ID_du_projet>/

Ou bien utiliser un serveur MCP pour permettre à l’agent de lire à travers les répertoires (voir la section suivante).

Ensuite, envoyez ce type d’instructions :

"Read all .css files in ./src/styles and extract the color palette"

"Read the component library at ./components/. Generate a new
form component using the same spacing and border-radius tokens"

"I see you use Tailwind. Add a new button variant that matches
your existing primary/secondary button styles"

L’agent parcourra les fichiers, analysera les variables CSS / la configuration Tailwind, extraira les tokens de design, puis générera des livrables cohérents avec le style du code existant.

Serveur MCP : lire les fichiers de design entre projets

Vous ne voulez pas copier les fichiers ? Open Design propose un serveur MCP qui permet à votre agent de codage de lire directement les fichiers d’un projet Open Design.

Dans Open Design : Settings → MCP Server, vous trouverez des guides de configuration selon différents clients. Une fois configuré, vos agents Claude Code / Cursor exécutés dans d’autres projets (par ex. ~/my-app) peuvent interroger les fichiers de design du projet ouvert dans Open Design.

Processus recommandé pour les scénarios de modification

1. Ouvrir Open Design et choisir une compétence proche du style de votre projet (par ex. web-prototype)

2. Tour 1 (formulaire) :
   - Surface : Web
   - Audience : le public existant
   - Tone : cohérent avec le produit actuel

3. Tour 2 (direction) :
   - Pour conserver une cohérence → téléverser une capture de page existante afin que l’agent extrait brand-spec.md
   - Pour autoriser un redesign modéré → choisir une direction comme base visuelle

4. Envoyer l’instruction :
   "Add a settings page to my existing project at ./src,
    match the color palette and typography from the attached screenshot"

L’agent fera :

1. Lecture de la capture → extraction de brand-spec.md (ou lecture des variables CSS dans le code)
2. Lecture des fichiers existants de votre projet
3. Réutilisation des couleurs principales/secondaires et des polices dans la nouvelle page
4. Sortie d’un HTML exécutable avec un style cohérent avec votre projet existant

---

Dépannage des problèmes fréquents

Q1 : La version de Node n’est pas correcte, erreur Requested version v24.x.x is not currently installed

Open Design requiert Node 24. Installez-le avec nvm ou fnm :

nvm install 24 && nvm use 24
# ou
fnm install 24 && fnm use 24

Si vous utilisez fnm, assurez-vous que votre fichier de configuration de shell charge fnm env (voir la documentation officielle de fnm).

Q2 : L’agent de codage n’est pas détecté

Open Design scanne PATH lors du premier démarrage. Vérifiez que la CLI est bien installée et disponible globalement :

# Vérifier un agent
which claude     # macOS/Linux
where claude     # Windows

# Si installé mais non détecté, essayez de redémarrer le service
pnpm tools-dev stop && pnpm tools-dev start web

Q3 : Le port est déjà utilisé

Les ports par défaut 17456 (daemon) et 17573 (web) peuvent être déjà pris :

# Passer à d’autres ports
pnpm tools-dev run web --daemon-port 17457 --web-port 17574

Q4 : Après changement de système de design, le style ne se met pas à jour

Le système de design d’Open Design injecte le CSS via la lecture des variables dans DESIGN.md. À chaque changement, l’agent utilise de nouvelles variables dans la nouvelle conversation ; les anciennes conversations générées ne se rafraîchissent pas automatiquement. Ouvrez simplement une nouvelle conversation pour appliquer le nouveau système.

Q5 : L’iframe d’aperçu s’affiche en blanc

L’iframe sandbox rend le contenu via srcdoc. Si rien ne s’affiche :

1. Vérifiez s’il y a des erreurs CSP dans la console du navigateur
2. Confirmez que l’extension anti-pub n’intercepte pas le chargement de l’iframe
3. Cliquez sur « Download HTML », puis ouvrez le fichier téléchargé directement localement pour vérifier

Q6 : Erreur de clé API en mode BYOK

L’agent BYOK est situé à /api/proxy/{anthropic,openai,azure,google}/stream. Vérifiez :

1. La valeur baseUrl configurée sur la page Settings est correcte (format compatible OpenAI)
2. La clé API est valide et dispose des permissions pour le modèle correspondant
3. Si le champ apiKey n’est pas renseigné, le serveur refusera la requête (protection SSRF)

---

Lecture complémentaire / Pistes avancées

Ajouter des compétences de design personnalisées

Les compétences existent sous la forme de dossiers avec SKILL.md + assets/ + references/, en respectant la spécification SKILL.md de Claude Code.

Créez un nouveau dossier dans skills/, ajoutez SKILL.md et définissez le frontmatter od: (mode, scenario, design_system.requires, etc.). Après redémarrage du service, la compétence apparaît automatiquement dans le sélecteur.

Importer un package exporté de Claude Design

Claude Design d’Anthropic prend en charge l’export en ZIP. Faites glisser le ZIP dans la boîte de dialogue d’accueil d’Open Design : POST /api/import/claude-design analyse et reconstruit le projet. L’agent peut alors reprendre l’édition de manière transparente.

Intégrer un serveur MCP

Open Design fournit un serveur MCP stdio. Configurez-le dans des clients MCP comme Claude Code/Cursor/VS Code : l’agent pourra lire directement les fichiers de design et les éléments d’un projet Open Design, sans avoir à exporter manuellement un ZIP.

Construire une app bureau

La version Electron desktop prend en charge macOS (Apple Silicon) et Windows (x64) :

# macOS
pnpm tools-pack mac build --to all
pnpm tools-pack mac install

# Windows
pnpm tools-pack win build --to nsis
pnpm tools-pack win install

L’app empaquetée peut fonctionner de manière autonome, et les données sont stockées dans le répertoire AppData du système.

Étendre les capacités de génération de médias

En plus des livrables de code, Open Design s’intègre aussi à des modèles pour générer des images (gpt-image-2), des vidéos (Seedance 2.0, HyperFrames) et de l’audio (Suno, Udio). Après configuration d’une API Key, le processus de design peut produire directement des fichiers médias comme .mp4 et .png.

---

Adresse du projet : nexu-io/open-design