Question 1

Pi peut-il vraiment faire du travail de design ?

Accepted Answer

Oui — avec un skill esthétique, un design system et de véritables images de référence dans le contexte, Pi produit une UI responsive de qualité production, et vous pouvez le router vers un modèle multimodal performant pour vérifier le résultat par rapport aux références. Sans ce contexte, il a tendance à revenir à un aspect générique, ce qui est précisément le manque que comble OpenDesign.

Question 2

Dois-je payer pour concevoir avec Pi ?

Accepted Answer

Pi lui-même est gratuit et open source (MIT). Vous ne payez que pour le modèle sous-jacent — apportez votre propre clé API de fournisseur (BYOK), ou utilisez un abonnement Claude Pro/Max, ChatGPT Plus/Pro ou GitHub Copilot via /login. Dans tous les cas, OpenDesign ne fait jamais transiter vos identifiants.

Question 3

Qu'est-ce qui rend Pi adapté au design ?

Accepted Answer

Il est agnostique quant au fournisseur : vous apportez vos propres clés et routez vers l'un des plus de 20 fournisseurs, en choisissant le modèle dont les points forts correspondent à la tâche, et en changeant en cours de session. Mais le goût vient toujours du design system, du skill et des références que vous fournissez, pas du modèle.

Question 4

Quel modèle utiliser avec Pi pour le design frontend ?

Accepted Answer

Pi route vers de nombreux fournisseurs, choisissez donc en fonction de la tâche — un modèle multimodal performant lit bien les captures d'écran de référence, tandis que d'autres peuvent convenir au refactoring. L'avantage de Pi est que vous pouvez changer sans modifier votre workflow. OpenDesign vous permet de conserver le même contexte de design quel que soit le modèle choisi.

Question 5

Comment connecter Pi à Figma ?

Accepted Answer

Pi prend en charge les serveurs MCP, vous pouvez donc ajouter un serveur MCP Figma et récupérer le contexte de conception réel — composants, variables, données de mise en page — afin que le code généré corresponde à la source plutôt que de l'approximer.

Question 6

Ce qu'est réellement Pi

Accepted Answer

Pi est un agent de codage IA open source (MIT) pour le terminal, qui fait partie de la boîte à outils pi d'earendil-works. Il lit votre dépôt, modifie des fichiers et exécute des commandes shell — il planifie et vérifie son travail à partir de tâches en langage naturel plutôt que de simplement compléter des lignes. Son cœur est délibérément réduit : quatre outils par défaut — read, write, edit et bash — plus grep, find et ls intégrés.

Pour le travail de design, la propriété qui ressort est que Pi est agnostique vis-à-vis du fournisseur. Il normalise Anthropic, OpenAI, Google et bien d'autres fournisseurs derrière une API unifiée : vous apportez donc vos propres clés et choisissez le modèle par tâche — par exemple un modèle multimodal puissant pour lire des captures d'écran de référence — puis basculez avec /model ou Ctrl+L en cours de session, sans changer votre flux de travail.

N'importe quel modèle, vos clés : Pi route vers plus de 20 fournisseurs, dont Anthropic et OpenAI. Vous vous authentifiez avec vos propres clés API (BYOK), ou vous vous connectez à un abonnement Claude Pro/Max, ChatGPT Plus/Pro ou GitHub Copilot avec /login.

Skills + Extensions : Pi charge des Skills (des paquets de capacités Markdown suivant le standard Agent Skills) et des Extensions TypeScript — l'endroit naturel pour encoder vos conventions de design et ajouter des outils personnalisés.

Sessions ramifiées : les sessions sont stockées sous forme d'arbres JSONL, ce qui vous permet de créer une branche d'exploration et de parcourir l'historique dans un seul fichier, sans perdre les passes précédentes.

Identifiant : votre propre clé API de fournisseur (BYOK — Anthropic, OpenAI, Google, etc.) ou une connexion par abonnement via /login ; stockée localement dans ~/.pi/agent/auth.json (0600)

Éditeur : earendil-works (projet open source communautaire)

Licence : MIT, open source

Question 7

Pourquoi un agent multi-fournisseurs et BYOK convient au design

Accepted Answer

L'avantage de Pi pour le design, c'est la flexibilité, pas un modèle unique intégré — mais, comme pour tout agent, le goût doit encore être fourni.

Choisir le bon modèle par tâche : parce que Pi route vers n'importe quel fournisseur, vous pouvez solliciter un modèle multimodal puissant pour lire des captures d'écran de référence, puis passer à un autre pour le refactoring — sans quitter l'agent.

Vos clés, aucun enfermement : le BYOK signifie que vous n'êtes pas lié aux tarifs ou aux limites de contexte d'un seul fournisseur ; choisissez le modèle dont les forces correspondent au travail de design qui vous attend.

Les conventions dans les Skills : un Skill (plus une source MCP comme un serveur Figma) oriente l'agent vers vos tokens, vos composants et vos spécifications réelles, de sorte qu'il travaille pour une marque plutôt que vers un look par défaut.

Le goût vient de trois apports que vous fournissez : un design system, un skill et de vraies images de référence.

La leçon est celle que tout agent enseigne : Pi n'a pas de goût par défaut, et aucun choix de modèle n'en apporte. Il produit du bon design quand vous lui donnez des contraintes — un design system, un skill esthétique et des références concrètes. OpenDesign empaquette exactement ces apports, et c'est pourquoi les deux s'accordent (voir plus bas).

Question 8

Configurer Pi pour le travail de design à partir de zéro

Accepted Answer

La séquence de configuration : installer → s'authentifier (BYOK) → encoder les règles de design dans un Skill → choisir un modèle → activer la vérification par navigateur.Encodez vos règles de design : placez vos tokens, vos primitives et vos conventions dans un Skill et indiquez-le à Pi, pour que le résultat corresponde à une marque au lieu de tomber dans un look générique.Ajoutez la vérification par navigateur : branchez un MCP Playwright ou de navigateur pour que Pi s'affiche dans un vrai navigateur et contrôle sa sortie sur les différents breakpoints, au lieu de simplement confirmer que le build passe.Utilisez la section de configuration actuelle pour les commandes et les détails propres à la version, qui peuvent changer.# 1. Install the Pi coding agent CLI (Node)
npm install -g --ignore-scripts @earendil-works/pi-coding-agent

# 2. Authenticate with your own provider key (BYOK)
export ANTHROPIC_API_KEY=sk-ant-...   # or OPENAI_API_KEY=sk-...
#    (or run /login inside Pi for a Claude / ChatGPT / Copilot subscription)

# 3. Start it in your project
cd your-project
pi

# 4. Switch models any time with /model or Ctrl+LExemple de commande historique issu du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.

Question 9

Le flux de travail de la capture d'écran à l'interface

Accepted Answer

La boucle de design la plus rentable avec Pi consiste à transformer une image de référence en une interface réactive fonctionnelle, puis à itérer jusqu'à ce qu'elle corresponde — en s'appuyant sur un modèle multimodal pour comparer le résultat à la référence. Comme Pi est agnostique vis-à-vis du fournisseur, pointez-le vers le modèle qui lit le mieux les images pour cette passe.Partez des références visuelles les plus claires dont vous disposez — et incluez plusieurs états (desktop et mobile, survol, vide, chargement), pas seulement une belle capture.Choisissez un modèle multimodal puissant pour cette passe avec /model, car la compréhension des images est ce qui détermine la qualité du passage de la capture d'écran à l'interface.Soyez précis dans le prompt ; des prompts vagues produisent une interface générique, même avec un modèle puissant.Gardez votre design system et vos conventions dans un Skill, et indiquez à Pi où se trouvent les tokens et les primitives de référence.Lancez un serveur de développement et faites afficher le rendu de Pi dans un vrai navigateur, en redimensionnant aux breakpoints, puis itérez en comparant son implémentation aux captures d'écran — au lieu de simplement confirmer que le build passe.Donnez à l'agent les références et les contraintes concrètes dès le départ :Gardez des prompts courts et ciblés, committez les bonnes itérations et annulez les mauvaises (en prévenant Pi lorsque vous annulez), afin que chaque passe s'appuie sur une base propre. Les sessions JSONL ramifiées de Pi vous permettent aussi d'explorer une alternative sans perdre le fil d'origine.pi
# in the prompt:
> Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens (see the Skill).
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.Exemple de commande historique issu du guide précédent ; vérifiez la syntaxe actuelle dans la documentation du fournisseur liée.

Question 10

Skills, Extensions et thèmes

Accepted Answer

Pi s'étend lui-même à l'exécution via quelques couches, qui se transposent proprement dans un flux de design ouvert.

Skills : des paquets de capacités Markdown suivant le standard Agent Skills — le foyer durable et portable de vos conventions de design, de vos tokens et de vos checklists de revue. Le même Skill fonctionne sur les agents compatibles, pas seulement sur Pi.

Extensions et modèles de prompt : les Extensions TypeScript ajoutent des outils, des commandes et des éléments d'interface personnalisés ; les modèles de prompt réutilisables s'exécutent via /name. Les deux vous permettent de scripter la boucle de vérification sans quitter le terminal.

MCP et thèmes : Pi se connecte à des serveurs MCP pour importer du contexte de design externe (le plus pertinent étant un serveur MCP Figma), et les thèmes se rechargent à chaud pour que l'interface du terminal reste lisible pendant que vous travaillez.

Ce sont des capacités portables — les Skills et MCP en particulier — exactement le genre de choses qu'OpenDesign est conçu pour orchestrer, plutôt que de les recréer projet par projet.

Question 11

Pi vs Codex vs Claude Code vs Cursor vs Gemini CLI pour le design

Accepted Answer

Il n'y a pas de vainqueur unique pour le travail de design — chaque agent a une force différente, et les équipes expérimentées les combinent. Un résumé honnête :

Pi — Agnostique vis-à-vis du fournisseur et BYOK — route vers n'importe quel modèle (Anthropic, OpenAI, Google…) et change en cours de session ; MIT, auto-extensible — Choisir le meilleur modèle par tâche sans enfermement propriétaire

Codex — Belle finition visuelle avec un skill frontend ; builds asynchrones en sandbox — Builds asynchrones délégués et règles AGENTS.md portables

Claude Code — Décisions de design précises (hex, espacement, typographie) et UX consciente de la base de code — Raisonnement frontend et refactorings à grand contexte

Cursor — Boucle visuelle construire-et-voir avec aperçu en direct et éditions en ligne — Travail d'interface à itérer et observer au sein d'un IDE

Gemini CLI — Forte compréhension multimodale des images et un contexte de 1M de tokens ; offre gratuite — Travaux riches en captures d'écran et maintien d'un design system entier en contexte

L'angle de Pi est orthogonal aux autres : c'est l'agent qui vous permet d'utiliser n'importe lequel de ces modèles sous-jacents avec vos propres clés. Le verdict récurrent de la communauté tient toujours — le goût vient des humains : tous produisent par défaut une esthétique générique sans skills, références et contraintes. C'est là le vrai problème à résoudre, et il a la forme d'un outil de design, pas d'un modèle.

Agent — Force en design — Idéal pour

Question 12

Les pièges, et comment éviter le look « AI slop »

Accepted Answer

La plainte la plus fréquente à propos du design généré par IA est qu'il paraît générique — dégradés doux, panneaux flottants, coins arrondis surdimensionnés, ombres dramatiques, une ambiance Inter-et-violet qui « crie que c'est une IA qui l'a fait ». Parmi les autres problèmes signalés figurent des mises en page mobiles cassées et des instructions qui fuient dans les textes de l'interface. Aucun de ces problèmes n'est propre à Pi ni à un modèle en particulier ; c'est ce qui se produit quand un agent tourne sans contexte de design soigné.

Ajoutez un skill esthétique : un skill de design soigné force l'agent à s'engager dans une vraie direction au lieu du look par défaut — et comme c'est un Skill portable, il vous suit d'un modèle à l'autre.

Vérifiez dans un vrai navigateur : choisissez un modèle multimodal et faites afficher et auto-contrôler la sortie de Pi sur les différents breakpoints, pour que les mises en page ne cassent pas silencieusement sur mobile.

Fournissez des tokens et des références : de vrais design tokens et des captures d'écran de référence sont le plus grand levier sur la qualité du résultat.

Encodez les règles là où Pi les lit : placez des règles du type « pas de hero cards, deux polices maximum, hiérarchie guidée par la marque » dans un Skill que l'agent charge à chaque exécution.

Remarquez que chaque mesure d'atténuation consiste à donner à l'agent un contexte de design soigné — indépendamment du fournisseur vers lequel vous routez. Maintenir ce contexte à la main, projet par projet, c'est la corvée dont OpenDesign vous libère.

Question 13

Concevoir avec Pi au sein d'OpenDesign

Accepted Answer

OpenDesign est la couche de design open source que le flux de travail ci-dessus ne cesse de réclamer. Il traite Pi comme un adaptateur de première partie et l'enveloppe dans une bibliothèque soignée de skills et de design systems, un pipeline de rendu structuré et une interface de bureau locale — ainsi le contexte de design qui rend Pi bon est présent dès la première exécution, au lieu d'être assemblé à la main à chaque fois. Les deux sont open source et local-first, ce qui rend le duo naturel.

Authentifiez-vous avec votre propre clé API de fournisseur (BYOK) ou une connexion par abonnement — les identifiants restent sur votre machine dans ~/.pi/agent/auth.json et ne passent jamais par nous.

Choisissez un design system et un skill, puis générez des présentations, des prototypes et des landing pages avec un goût cohérent.

Chaque artefact et fichier DESIGN.md vit dans votre propre dépôt, pas dans un cloud hébergé.

Même agent Pi, mêmes clés, même liberté de changer de modèle — plus un flux de design réel, portable et open source autour. C'est local-first et sous licence MIT, donc rien de votre travail ni de vos identifiants ne quitte votre machine.

Installez OpenDesign et sélectionnez Pi comme agent.

Question 14

OpenDesign est-il affilié à Pi ?

Accepted Answer

Non. OpenDesign est indépendant et intègre Pi en tant qu'adaptateur soutenu par la communauté.

Concevoir avec
Pi dans
OpenDesign.

Choisissez votre point de départ pour Pi

Créer une interface produit avec Pi

Configurer Pi à partir de zéro

Comparer Pi à d'autres agents

Un travail de design avec Pi : du brief à l'interface

1Brief de conception et contraintes

2Qui fait quoi : vous, Pi et OpenDesign

3Artefact Pi : page de comparaison de forfaits en 1440px et 390px

4Vérification avant transmission

Grille et espacement

Hiérarchie visuelle

Mise en page mobile

Vérifications d'interaction

Quand Pi est adapté — et quand il ne l'est pas

Pi convient quand

Choisissez un autre workflow quand

Prérequis pour Pi avant de commencer

Portée de l'outilPi, par la communauté

Comptes et authentificationVotre propre clé API de fournisseur (BYOK) ou

Système et versionsApplication de bureau ou source

Vérification de la connexionLe signal de réussite

Configuration de Pi en trois étapes

Téléchargez l’application de bureau OpenDesign

Préparez votre connexion Pi

Exécutez une petite tâche Pi

Le workflow de design en cinq étapes de Pi

Brief de design

Contraintes de design

Générer l'interface

Aperçu

Réviser et vérifier

Ressources de design pour Pi

Pour aller plus loin avec Pi

Skills de design

Design systems

Modèles

Limites de Pi, vérifications manuelles et solutions de repli

Questions fréquentes sur Pi et OpenDesign

Concevoir avec Pi dans OpenDesign.