Avec quel agent de code faut-il faire tourner Open Design ?

La première vraie décision d'Open Design n'est pas quoi construire — c'est quel agent de code le pilote. Ce guide se concentre sur ce choix : la (longue) liste des agents pris en charge, comment en choisir un, et comment configurer et construire. Il suit la démonstration que Tony Xhepa donne dans sa vidéo, réécrite et mise à jour selon la version actuelle. Regardez la vidéo ci-dessus, 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.

Pourquoi l'agent est le choix important

Open Design ne fournit pas son propre modèle — c'est une surface open source, orientée local, qui tourne sur n'importe quel agent de code que vous avez déjà. L'agent que vous choisissez est donc votre moteur de design : il détermine la qualité, le coût et la vitesse. La beauté, c'est l'étendue. La liste des agents pris en charge par Tony est longue : Claude Code, Codex, Devin for Terminal, Cursor, Gemini, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro — et d'autres. Quoi que vous utilisiez déjà, Open Design le prend probablement en charge, et si vous n'en avez aucun d'installé, vous pouvez utiliser à la place une clé API Anthropic ou OpenAI.

Comment en choisir un

Une façon rapide de choisir :

• Vous payez déjà pour une CLI de code ? Utilisez-la — Open Design s'appuie sur cet abonnement, donc pas de deuxième facture.
• Vous voulez le meilleur rendu de design ? Dirigez-le vers un modèle de premier plan (par ex. Claude Code sur un modèle performant) pour la construction initiale.
• Vous le voulez bon marché ou gratuit ? Le palier gratuit de Gemini CLI ou les modèles intégrés d'OpenCode fonctionnent bien ; vous pouvez aussi apporter votre propre clé.
• Vous tenez à la confidentialité/au local ? N'importe quelle CLI locale garde la génération sur des identifiants qui ne quittent jamais votre machine.

Vous n'êtes pas enfermé — changez l'agent actif plus tard en un clic.

Étape 1 — Installer depuis les sources

Open Design est une application Next.js ; le démarrage rapide se résume à quelques commandes :

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

Ouvrez ensuite l'URL locale qu'il affiche (un port dynamique — ne le codez pas en dur). Un point que Tony soulève : il faut Node 24 — sous Node 22, vous verrez un avertissement « unsupported engine », alors installez d'abord Node 24. Vous préférez éviter le terminal ? Il existe une application de bureau sur open-design.ai/download.

Étape 2 — Configurer le mode d'exécution (choisir votre agent)

Au premier lancement, vous définissez le mode d'exécution : CLI locale, API Anthropic ou API OpenAI. Choisissez CLI locale et Open Design affiche les agents qu'il a détectés sur votre machine — Tony a Codex, Gemini, OpenCode et Pi installés (Claude Code affiché comme non installé sur cette machine). Choisissez-en un (il prend OpenCode), éventuellement le modèle, puis Get started.

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

Étape 3 — Créez votre premier design

Créez un Prototype, nommez-le, choisissez la fidélité (élevée) et partez d'un brief suggéré (Tony choisit un tableau de bord d'analytique SaaS). Open Design exécute les questions de découverte (contexte de marque, source de données des graphiques, direction visuelle), vous répondez, choisissez une direction, et il construit. L'artefact terminé dispose d'un aperçu, d'une vue du code source, de commentaires et d'un menu Share — exporter en PDF, télécharger, HTML autonome, enregistrer comme modèle, et plus encore.

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

Astuces

• Choisissez l'agent pour lequel vous payez déjà — pas de second abonnement, et il fixe votre qualité/coût.
• Installez d'abord Node 24 pour éviter l'avertissement de moteur non pris en charge.
• Utilisez le mode local CLI pour qu'Open Design détecte automatiquement vos agents installés.
• Changez d'agent à tout moment — le choix n'est pas permanent ; modifiez-le en un clic.
• Pas de CLI ? Utilisez une clé API (Anthropic ou OpenAI) à la place.

FAQ

Quels agents Open Design prend-il en charge ? Beaucoup — Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen, GitHub Copilot CLI, Devin, Hermes, Kimi, Pi, Kiro, et d'autres. Il détecte automatiquement ceux installés sur votre machine.

Comment en choisir un ? Utilisez la CLI pour laquelle vous payez déjà ; choisissez un modèle puissant pour la construction initiale et un moins cher pour l'itération ; ou utilisez un palier gratuit / votre propre clé API.

Pourquoi l'avertissement Node 24 ? Open Design requiert Node 24 ; sous Node 22, vous verrez un avertissement « unsupported engine ». Installez Node 24 pour le faire disparaître.

Est-ce gratuit et open source ? Oui — Apache-2.0, orienté local. Faites-le tourner gratuitement ; vous ne payez que pour l'utilisation du modèle de l'agent ou de la clé que vous connectez.

---

Ce guide écrit est basé sur la démonstration de Tony Xhepa. Regardez la vidéo complète ci-dessus, et abonnez-vous à Tony Xhepa pour plus d'outils de développement open source.