Aller au contenu

Langage naturel → prototype Figma (figma-bricks-proto)

Problème

Explorer une idée d'écran passe aujourd'hui par l'ouverture de Figma, la création manuelle de frames et l'assemblage des composants — même une première itération coûte du temps et crée une dépendance forte au designer.1

Outcome visé

Passer de l'idée au prototype Figma exploitable en un cycle court et fiable — de l'ordre de plusieurs heures à quelques minutes de travail actif — sans mobiliser un designer, avec des maquettes conformes au design system (pas de « maquettes sauvages »).1

Hypothèses (falsifiables)

  • Si on génère les prototypes en réutilisant les vrais composants et tokens du DS (clone-and-adapt), alors la cohérence design est garantie « gratuitement » et le temps idée→feedback chute.2
  • Kill criteria : si les prototypes générés ne sont pas exploitables tels quels (composants faux, tokens en dur, rollbacks systématiques), le gain de vitesse ne compense pas la reprise manuelle → pivot.

Plus petit test (MVP)

V0 : génération d'un écran simple (1 page, composants basiques) via Cursor + MCP Figma, reconnaissable et utilisant les bons composants.1

Learning goal

Savoir si une boucle « inspecter le fichier réel → générer → vérifier par capture → corriger » (plutôt que deviner) rend la génération assez fiable pour être utilisée en routine sur les deux surfaces produit Bricks.2

Lentille design (impact UI)

Cf. canon design, checklist QA design.

  • Règle d'or : component-first — avant de créer le moindre élément, chercher le composant du DS qui le couvre ; le hand-build est un dernier recours signalé explicitement.2
  • Respect des tokens (non négociable) : espacements, padding, rayons, couleurs et styles de texte sont liés aux variables Uimmo, jamais figés en dur ; vérification obligatoire avant livraison.2
  • États & garde-fou anti-doublon : avant de générer, vérifier si l'écran existe déjà dans les maquettes et proposer d'itérer dessus plutôt que de repartir de zéro. On ne modifie jamais une maquette de référence (clone-and-adapt vers une page neuve).2
  • Vérification : capture d'écran systématique de la frame produite, comparée au besoin exprimé, avant de livrer le lien Figma profond.2

Périmètre — 2 cibles produit

Le générateur couvre les deux surfaces produit de Bricks. Les recherches de composants sont scopées sur les deux libs de chaque cible (lib socle Uimmo + lib métier).1

Cible Fichier Figma Libs Couverture
EspaceFi (web financier) Oq15YZEhZDeZJjdj9eMPat Uimmo + EspaceFi Chemin rapide validé (gabarits mappés, clone-and-adapt)
App investisseurs (mobile) L6rItBx8sPjGAPYJlW4fK4 Investors + Uimmo Flow « Projets » mappé et validé ; autres archétypes au fil des besoins

La génération vise des fichiers bac-à-sable (« Claude designs »), duplicatas des fichiers prod, pour garder le clone-and-adapt et le binding des tokens sans polluer la prod.2

Livrables attendus

  • [x] Mapping du design system Figma (composants, variantes, tokens)1
  • [x] Agent de génération : description → arbre de composants Figma1
  • [x] Intégration Cursor (prompt / commande)1
  • [x] Mode itératif (modifications incrémentales)1
  • [x] Cible EspaceFi : gabarits mappés + clone-and-adapt validé1
  • [x] Cible App investisseurs : flow « Projets » mappé + test à froid validé1
  • [x] Documentation des patterns supportés et des limites — Guide d'usage, patterns & limites1

Équipe

  • Owner / lead : @remy
  • Stakeholders : team Engineering ; initiative « Accélérer le produit avec l'IA »1

Jalons

  • [x] V0 — écran simple généré via Cursor + MCP Figma (reconnaissable, bons composants)1
  • [x] V1 — templates de pages, variantes, itération conversationnelle sur les 2 cibles ; prototype exploitable et conforme au DS en un cycle court et fiable1
  • [ ] V2 — flows multi-écrans, Slack bot, connexion au second cerveau pour le contexte1

Métriques de succès

Critère V1 requalifié en efficacité + qualité (le wall-clock < 5 min n'était pas fiable, plafonné par la latence du MCP Figma).1 Cibles mesurées sur tests à froid :

  • Efficacité : ~8-14 appels d'outils et ~52-55k tokens par prototype (vs 58 appels / 97k tokens avant optimisation) ; zéro tâtonnement, zéro rollback.1
  • Qualité : prototype conforme au DS (vrais composants, tokens et styles de texte hérités), zéro maquette sauvage.1

Risques identifiés

  • Latence / variance d'infra du MCP Figma : impose un plancher au temps réel (~6-9 min), non contrôlable côté skill.1
  • Composants locaux non publiés (ex. BlockContainer, Sidebar) : pas de clé org résolvable → à instancier par node-id local ou via clone d'un gabarit.2
  • Dérive du DS : les clés de propriété des composants sont stables mais à revérifier si le design system évolue.2

Liens

  1. Projet Linear « Langage naturel → prototype Figma automatique » (id 4f899385-6404-453a-8dd4-2bcc0c0ef176) et ticket BRI-299, consultés le 2026-07-02. ↩↩↩↩↩↩↩↩↩↩↩↩↩↩↩↩↩↩↩

  2. plugins/bricks-design/skills/figma-bricks-proto/SKILL.md, consulté le 2026-07-02. ↩↩↩↩↩↩↩↩↩