Open Design — un premier aperçu honnête (bugs, contournements et configuration avec n'importe quel modèle)

Ce guide est un premier regard volontairement honnête sur Open Design — ce qui fonctionne d'emblée et les aspérités que vous rencontrerez, montrés en direct plutôt que coupés au montage. Il aborde aussi une astuce vraiment utile : brancher n'importe quel modèle à moindre coût via un fournisseur compatible OpenAI. Il s'appuie sur le test pratique que Sasha (ИИШНЫЙ) réalise dans sa démonstration, adapté pour ce guide écrit et mis à jour avec la version actuelle. Regardez la vidéo ci-dessus pour le déroulé en direct, 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.

Qu'est-ce qu'Open Design ?

Open Design est une plateforme de design open source et local-first — une alternative agent-native à Claude Design. Le problème de la « bouillie violette de l'IA » (chaque interface générée se ressemble) est précisément ce que des outils comme celui-ci tentent de résoudre, et la réponse d'Open Design est de tourner par-dessus l'agent de codage que vous utilisez déjà plutôt que de livrer son propre modèle. Il détecte Claude Code, Codex, Cursor, Gemini, OpenCode et d'autres sur votre machine et s'en sert comme moteur. Le cadrage de Sasha : il a récolté des dizaines de milliers d'étoiles GitHub dès sa première semaine parce qu'il est gratuit, ouvert et non verrouillé sur un seul fournisseur.

• Open source, Apache-2.0 — clonez-le, lisez-le, auto-hébergez-le.
• Tourne en local — vos projets sont des dossiers sur votre propre machine.
• N'importe quel agent, n'importe quel modèle — y compris votre propre clé API via n'importe quel fournisseur compatible OpenAI.
• Une bibliothèque fournie de compétences de design et de systèmes de design intégrée.
• Plus que des prototypes — diaporamas, images, et même de la vidéo.

Étape 1 — Installer et configurer

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 — ne le codez pas en dur). Vous préférez zéro configuration ? Récupérez l'application de bureau sur open-design.ai/download. Au premier lancement, la page des paramètres détecte les CLI d'agent présentes sur votre machine — Sasha utilise Codex — et vous laisse définir un modèle par défaut, ajouter des fournisseurs de médias (MiniMax, OpenAI GPT Image, et d'autres), connecter des sources de données, changer de langue et choisir un thème.

Étape 2 — Utiliser n'importe quel modèle via un fournisseur compatible OpenAI

C'est la pépite la plus utile du test de Sasha. Au-delà des CLI détectées, Open Design vous permet d'apporter votre propre clé pour n'importe quelle API compatible OpenAI — ce qui signifie que vous pouvez router via un agrégateur comme OpenRouter et utiliser presque n'importe quel modèle, souvent à moindre coût :

1. Chez votre fournisseur, créez une clé API et copiez-la.
2. Dans les paramètres d'Open Design, choisissez le type de fournisseur OpenAI (OpenRouter et les agrégateurs similaires parlent l'API OpenAI).
3. Collez la clé et, point crucial, changez la base URL pour le point de terminaison de votre fournisseur (p. ex. la base URL d'OpenRouter), puis choisissez le modèle voulu.
4. Enregistrez — la génération passe désormais par ce fournisseur.

Un piège que rencontre Sasha : la sélection du modèle bascule de manière globale, et non par projet ; donc si la génération de médias casse après votre bascule, c'est parce que le fournisseur d'images a suivi le changement de modèle. Définissez explicitement les clés de vos fournisseurs de médias.

Étape 3 — Construire un prototype (aspérités comprises)

Créez un projet, rédigez votre brief, choisissez haute fidélité et envoyez. Open Design exécute d'abord un formulaire de découverte — il adapte les questions à votre prompt (plateforme cible, public visé, ton, animation, contraintes), puis un sélecteur de direction visuelle (typographie + palette), puis il construit. La sortie est un prototype vivant et interactif doté de contrôles intégrés — l'application générée par Sasha vous laisse activer les animations et changer la couleur d'accent directement sur la page.

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

Réserves honnêtes que Sasha montre à l'écran (et comment les gérer) :

• Il peut choisir par défaut la mauvaise compétence. S'il commence à construire un « checkpoint/blog » alors que vous vouliez une application mobile, dites-le-lui explicitement : « utilise la compétence mobile-app / front-end ». Définissez la compétence avant de générer.
• Inspect a besoin de balises data-oid. L'outil Inspect sur le canevas a besoin que l'artefact soit balisé ; s'il dit qu'il ne peut pas sélectionner d'éléments, demandez à l'agent de « reconstruire le prototype avec des balises data-oid », puis rechargez.
• Il est jeune et livre vite. Attendez-vous à des accrocs occasionnels (navigation qui disparaît après une modification, etc.) — le projet se met à jour presque chaque jour, alors re-tirez souvent.

Étape 4 — Les outils sur le canevas (le vrai attrait)

Une fois balisée, la boucle d'édition est le point fort. Inspect vous laisse survoler n'importe quel élément et ajuster directement couleur, taille et style. Edit vous laisse réécrire du texte en ligne (pas d'aller-retour vers le chat pour changer un seul mot). Comment/picker vous laisse sélectionner une zone, dessiner et envoyer une note à l'agent (« fais de ce menu un carrousel défilant avec une barre de progression »). C'est cette boucle de retour rapide et visuelle, difficile à reproduire avec un simple agent dans un terminal.

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

Une fois terminé, Share exporte en PDF, PPTX, HTML autonome ou markdown — ou déploie sur Vercel en un clic. Le verdict honnête de Sasha : pour des présentations et des pages d'aimant à prospects, c'est déjà un mini-constructeur pratique ; pour le prototypage d'applications/sites complexes, attendez-vous à une vraie itération. Vu qu'il n'a qu'une semaine et se met à jour en permanence, les fondations sont solides.

Astuces

• Branchez OpenRouter (ou n'importe quel fournisseur compatible OpenAI) pour utiliser des modèles moins chers ou différents — pensez à changer la base URL.
• Définissez la compétence explicitement avant de générer pour qu'il ne choisisse pas par défaut le mauvais modèle.
• Demandez des balises data-oid si Inspect ne peut pas sélectionner d'éléments, puis rechargez.
• Appuyez-vous sur Inspect/Edit/Comment pour des ajustements visuels rapides plutôt que de relancer un prompt dans le chat.
• Re-tirez souvent — le projet livre des correctifs presque chaque jour.

FAQ

Puis-je utiliser un modèle autre que Claude — et payer moins ? Oui. Pointez Open Design vers n'importe quelle CLI détectée, ou apportez votre propre clé pour n'importe quel fournisseur compatible OpenAI (p. ex. OpenRouter) en réglant la clé et la base URL — cela ouvre presque n'importe quel modèle.

Inspect/edit ne sélectionne pas les éléments — pourquoi ? L'artefact a besoin de balises data-oid. Demandez à l'agent de reconstruire le prototype avec, puis rechargez l'aperçu.

Est-ce prêt pour la production ? C'est tôt et ça itère vite. C'est déjà excellent pour les decks et les pages d'aimant à prospects ; pour des applications complexes, traitez la sortie comme un solide brouillon que vous affinez.

Est-ce gratuit ? L'application est open source sous Apache-2.0 et gratuite en exécution locale. Vous ne payez que pour l'usage du modèle et des médias de l'agent et du fournisseur que vous connectez.

---

Ce guide écrit est basé sur le test pratique de Sasha (ИИШНЫЙ). Regardez la vidéo complète ci-dessus, et abonnez-vous à ИИШНЫЙ pour d'autres tests d'outils d'IA honnêtes et non montés.