POUR ALLER PLUS LOIN
Pour aller plus loin avec Pi
Tutoriels, documentation et guides pas à pas pour concevoir avec Pi, tels que listés dans le guide publié.
Pi 
OpenDesign Concevoir avec
Pi dans
OpenDesign.
Comment concevoir des interfaces avec Pi dans OpenDesign : skills portables, le modèle et la clé que vous choisissez, une tâche de comparaison de plans du brief au fichier révisé, et les limites à connaître avant de commencer.
Du brief à l’interface01 / Pi
VOUS APPORTEZ L'IDÉE↗
« Comparaison de forfaits avec un seul
skill portable, n’importe quel modèle. »
TROIS ENTRÉES DANS CE GUIDE PI
Choisissez par où commencer avec Pi
CE GUIDE · CONCEPTION D'INTERFACE
Construire une interface produit avec Pi
Ce guide : brief, références, règles de conception et un résultat HTML révisé.
Lire ce guide CONFIGURATIONConfigurer Pi à partir de zéro
Voici le parcours complet, d'une machine vierge jusqu'à un Pi capable de construire et de vérifier une UI.
Accéder à la configuration COMPARAISONComparer Pi à d'autres agents
En quoi Pi diffère de Codex, Claude Code, Cursor pour le travail de design, et quand choisir un autre workflow.
Voir la comparaisonSur cette page Exemple
Une tâche de design Pi complète
Une tâche de design Pi, du brief à l'interface
Une seule tâche, montrée de bout en bout : le brief et les contraintes que vous transmettez, l'artifact qui en résulte, et les vérifications que vous effectuez encore avant que ce soit terminé. L'interface ci-dessous est un exemple illustratif conçu pour cette page, pas une exécution Pi enregistrée.
1Brief de conception et contraintes
BriefConcevez une page de comparaison de plans pour une application de prise de notes : plans gratuit, personnel et équipe, un comparatif des fonctionnalités et une courte FAQ. Bureau et téléphone.
- Système de conceptionToile papier OpenDesign : Albert Sans, un accent vert
- Points de rupture1440px pour le bureau et 390px pour le mobile, sans défilement horizontal
- InteractionsBascule de facturation, CTA des plans, expansion des lignes de comparaison
- SortieUn fichier HTML autonome avec des points d'ancrage
data-od-idstables
2Répartition du travail : vous, Pi et OpenDesign
- Vous
Rédigez le brief, sélectionnez le système de conception et définissez les critères d'acceptation.
- Pi
Planifie la mise en page, écrit le HTML, le CSS et le JavaScript et le révise sur demande.
- OpenDesign
Fournit le système de conception et le skill, génère l'aperçu et enregistre chaque version comme un fichier dans le projet.
- Révision
La hiérarchie visuelle, l'espacement sur la grille de 8px, les deux points de rupture et chaque interaction sont vérifiés avant la remise.
3Artefact Pi : la page de comparaison des plans à 1440px et 390px
4Vérification avant transmission
Mise en page
Grille et espacement
Les trois plans et le comparatif partagent la grille de 8px ; les lignes de fonctionnalités s'alignent entre les colonnes.
Hiérarchie
Hiérarchie visuelle
Le prix et le nom du plan en premier ; l'accent marque le badge le plus choisi et son bouton.
Réactif
Mise en page mobile
Le plan personnel en premier, puis le gratuit, puis l'équipe ; la bascule reste en haut.
Interaction
Vérifications d'interaction
Activez la bascule, naviguez au clavier entre les CTA, développez une ligne de comparaison.
Adéquation
Quand Pi convient à la tâche, et quand non
Pi convient quand
- N'importe quel modèle, vos clés. Acheminez vers Anthropic, OpenAI, Google et d'autres avec vos propres clés ; choisissez un modèle multimodal performant pour le passage de capture d'écran à UI et changez avec /model.
- Skills portables. Encodez vos conventions de design sous forme de Skills conformes au standard Agent-Skills, qui se transposent sur les agents compatibles, pas seulement Pi.
- MCP + Extensions. Apportez un contexte de design réel via un serveur MCP Figma, et scriptez la boucle de vérification avec des Extensions TypeScript.
- Ouvert et BYOK. Sous licence MIT et local-first ; vous ne payez que le modèle sous-jacent et vos identifiants restent sur votre machine.
Choisissez un autre workflow quand
- Vous avez besoin de fichiers vectoriels modifiables. Le livrable est du HTML, pas un document de design modifiable. Vérifiez un workflow vectoriel distinct pour le format d'asset requis.
- Vous n'avez ni référence ni contrainte. Sans design system ni exemples, le résultat tend vers un aspect générique ; rédigez d'abord le brief.
- Vous ne disposez pas des identifiants requis par cet agent. Requis : votre propre clé API de fournisseur (bring your own key) ou une connexion par abonnement via /login. OpenDesign ne fournit ni ne relaie d'identifiants.
- Votre équipe travaille dans Aider ou OpenCode. Ces agents ont leurs propres pages ; l'espace de travail est le même, la configuration diffère. Voir les agents associés.
Compatibilité
Prérequis pour Pi avant de commencer
Ce guide couvre Pi tel que connecté via l'application de bureau OpenDesign. Références publiées vérifiées le 6 septembre 2026.
Portée de l'outilPi, par la communauté
Pi est un agent de code IA en terminal open source (MIT) créé par earendil-works. Il lit votre base de code, modifie des fichiers et exécute des commandes à partir d'un noyau de quatre outils — read, write, edit, bash. Cette page traite de la conception d'interfaces avec Pi via OpenDesign, pas de l'interface propre de Pi. Les notes de configuration d'OpenDesign répertorient les agents disponibles.
Comptes et authentificationVotre propre clé API de fournisseur (BYOK) ou
Votre propre clé API de fournisseur (BYOK) ou connexion par abonnement via /login. Authentifiez-vous avec votre propre clé API de fournisseur (BYOK) ou une connexion par abonnement — les identifiants restent sur votre machine. Cette page ne garantit ni quota ni tarif.
Système et versionsApplication de bureau ou source
Consultez la page de téléchargement pour les builds de bureau. Les exigences Node.js et pnpm indiquées dans le quickstart source s'appliquent à l'exécution depuis les sources, pas à l'installation d'un package de bureau. Version minimale compatible de Pi : non vérifiée ici.
Vérification de la connexionLe signal de réussite
Suivez les instructions de connexion affichées par votre version installée, puis exécutez une petite tâche. Confirmez que Pi l'a traitée et que l'artefact s'ouvre. Un téléchargement seul n'établit pas une connexion fonctionnelle.
Commencez par l’application de bureau
Configuration de Pi en trois étapes
Téléchargez d'abord, terminez la configuration de Pi pour votre version installée, puis vérifiez un petit résultat. Vous n'avez pas besoin de compiler OpenDesign depuis les sources pour suivre ce chemin.
- 1
Téléchargez l’application de bureau OpenDesign
Choisissez le paquet adapté à votre ordinateur, installez-le et ouvrez l’application.
Télécharger OpenDesignPOINT DE CONTRÔLEL'application de bureau s'ouvre. Déjà installée ? Passez à l'étape suivante ; il n'est pas nécessaire de la télécharger à nouveau. - 2
Préparez votre connexion Pi
Suivez les instructions de Pi dans votre version installée. Authentifiez-vous avec votre propre clé API de fournisseur (BYOK) ou une connexion par abonnement — les identifiants restent sur votre machine.
Documentation Pi sur les fournisseurs et l'authentification# 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)D'après les notes de configuration de Pi dans le guide publié ; vérifiez la documentation du fournisseur pour la commande actuelle.
POINT DE CONTRÔLEConfirmez l'agent et le compte prévus. S'il n'est pas disponible, vérifiez la compatibilité avant de tenter une tâche plus importante. - 3
Exécutez une petite tâche Pi
Utilisez un petit brief afin de pouvoir juger l’ensemble du cycle, y compris une révision.
Brief de démarrageCréez un écran de paramètres avec un formulaire de profil et une confirmation d'enregistrement. Utilisez mes règles de design. Vérifiez-le aux largeurs bureau et mobile.
POINT DE CONTRÔLEOuvrez le résultat, testez l'état de sauvegarde et demandez une modification précise. Un fichier généré est le début de la revue, pas la fin.
Pour exécuter OpenDesign depuis les sources, suivez plutôt le guide de démarrage technique.
Le workflow de design Pi
Le workflow de design Pi en cinq étapes
La même tâche de page de comparaison des plans, suivie du brief au fichier vérifié. Chaque étape indique ce que vous fournissez, ce que fait Pi, ce qu'apporte OpenDesign et ce que vous vérifiez.
- 1
Brief de design
Langage simple, trois à six lignes. Nommez l'audience, la fonction de l'écran et les plateformes.
- VousRédigez le brief ; joignez une capture d'écran de référence si vous en avez une.
- PiLit le brief et le fichier d'instructions du projet ; pose des questions en cas d'ambiguïté.
- OpenDesignFournit le projet, la surface de prompt et le skill correspondant au type d'artefact.
- VérificationConfirmez que le brief énonce les critères d'acceptation. Les ajouter maintenant coûte moins cher qu'après la génération.
- 2
Contraintes de design
Un design system et quelques règles strictes. C'est ce qui distingue un résultat conforme à votre marque d'un rendu générique.
- VousChoisissez un design system ; indiquez les points de rupture et les composants à utiliser obligatoirement.
- PiCharge les tokens DESIGN.md et les règles de posture dans le contexte avant d'écrire une ligne.
- OpenDesignFournit la bibliothèque de design systems et associe celui choisi au modèle du skill.
- VérificationLes tokens correspondent à votre marque. Un accent unique, les bonnes polices, le bon rayon.
- 3
Générer l'interface
Pi écrit un fichier HTML autonome : mise en page, styles, interactions et hooks stables.
- VousAttendez, ou répondez à une question de clarification. Rien à configurer.
- PiPlanifie les sections, écrit le HTML, le CSS et le JavaScript, exécute le fichier et corrige ce qui échoue.
- OpenDesignEnregistre l'artefact dans le dossier du projet et l'indexe pour l'aperçu.
- VérificationRien pour l'instant. Jugez le fichier une fois rendu, pas depuis la source.
- 4
Aperçu
Le fichier s'affiche dans OpenDesign aux largeurs que vous avez demandées. C'est ici que le design est évalué.
- VousChangez de largeur, parcourez les interactions, laissez des commentaires sur les éléments.
- PiLit vos commentaires sur l'aperçu et prépare la révision suivante.
- OpenDesignAffiche l'aperçu, expose des cibles
data-od-idpour les commentaires et les modifications. - VérificationHiérarchie, contraste, débordement à 390px, états de focus, et si l'accent est utilisé avec parcimonie.
- 5
Réviser et vérifier
Demandez des modifications en pointant les éléments dans l'aperçu. Chaque révision est un nouveau fichier ; rien n'est écrasé silencieusement.
- VousTransformez les commentaires en demandes ; décidez quand la tâche est terminée.
- PiApplique les modifications sur place et réexécute le fichier.
- OpenDesignConserve les versions côte à côte ; exporte une image ou le HTML une fois terminé.
- VérificationRevérifiez uniquement la zone modifiée, puis toute la page une fois à chaque point de rupture.
Ressources
Ressources de design pour Pi
Skills Parcourir les skills Systèmes de design Parcourir les systèmes Modèles Parcourir les modèles
Skills de design
Les types de produits que Pi peut produire dans OpenDesign, un skill par type.
Design systems
Tokens de marque et composants à lier avant que Pi ne génère quoi que ce soit.
Modèles
Points de départ pour des présentations, des pages d'atterrissage et des écrans produit.
Limites
Limites de Pi, vérifications manuelles et solutions de repli
- PortéeIl est agnostique quant au fournisseur : il normalise entre Anthropic, OpenAI, Google et plus de 20 fournisseurs, ce qui vous permet d'apporter vos propres clés et de changer de modèle en cours de session. Cette page traite de Pi en tant qu'agent connecté à OpenDesign, pas de l'ensemble des fonctionnalités de Pi.
- Limites d'utilisationLes limites d'utilisation et les coûts dépendent de l'identifiant que vous utilisez (votre propre clé API de fournisseur ou une connexion par abonnement via /login). Cette page n'affirme rien quant à des quotas gratuits.
- RéseauDes fichiers de projet locaux ne signifient pas une inférence hors ligne. Vérifiez les paramètres du fournisseur et les politiques de données de votre agent avant de partager des informations sensibles.
- La sortie est en HTMLLes artefacts sont des fichiers HTML, pas des fichiers de design vectoriels.
- Revue manuelleL'accessibilité, le contenu réel, l'adéquation à la marque et la justesse des interactions sont vérifiés par vous dans l'aperçu. Considérez toute autovérification de l'agent comme une première passe.
- Solution de repliSi l'agent est indisponible ou qu'une tâche échoue, vérifiez les instructions de connexion et l'authentification de la version installée. Conservez l'erreur et le dernier artefact fonctionnel avant de modifier la configuration.
FAQ
Questions fréquentes sur Pi et OpenDesign
Pi peut-il vraiment faire du travail de design ?
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.
Dois-je payer pour concevoir avec Pi ?
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.
Qu'est-ce qui rend Pi particulièrement adapté au design ?
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.
Quel modèle utiliser avec Pi pour le design frontend ?
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.
Comment connecter Pi à Figma ?
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.
Démarrer une première tâche de design avec Pi
Commencez par une petite tâche, évaluez l'aller-retour, puis apportez le véritable brief. Choisissez l'option correspondant à votre configuration ; la page ne la détecte pas.