spb/lou-ka

1# Lou-Ka — Kit Figma du frontend23Fichier Figma **généré depuis le code source** du frontend Lou-Ka déployé sur le cluster4(M4M64a : `~/apps/lou-ka`, www.lou-ka.com) : design system, composants, écrans desktop 14405et mobile 390, plus les captures du site en production.67Figma ne permet pas de créer un `.fig` hors de l'application : le kit prend donc la forme d'un8**plugin de développement** qui construit le fichier en une exécution (≈ 20 s), à partir des9jetons de `frontend/src/ka/tokens.css` et des styles de `frontend/src/styles.css`.1011## Importer dans Figma (3 minutes)12131. Dans Figma (application de bureau), créer un fichier vide **Lou-Ka — Design system**.142. Menu **Plugins → Development → Import plugin from manifest…** et choisir15   `plugin/manifest.json` de ce dossier.163. **Plugins → Development → Lou-Ka — Générateur de fichier Figma**. Le plugin charge les17   polices Google **Space Grotesk**, **Inter** et **JetBrains Mono** (disponibles dans Figma sans18   installation), puis crée les 6 pages et se ferme.194. Facultatif : glisser les captures pleine page de `references/full/` sur la page20   « ⑤ Références live » (Figma importe les JPEG directement).2122Le plugin n'a **aucun accès réseau** (`networkAccess: none`) : les photos et captures sont23embarquées en base64 dans `plugin/code.js`.2425## Contenu du fichier généré2627| Page | Contenu |28|---|---|29| ⓪ Couverture | Logo, titre, sommaire |30| ① Fondations | Nuancier (18 couleurs + 2 filets), 21 styles typographiques, espacements `--sp-1…8`, rayons (10 / 6 / 999 / 24), bordures, 6 ombres décalées, logo « porte entrouverte » (clair, sombre, wordmark), règles d'usage. Crée aussi les **styles Figma** (couleur, texte, effet) et **2 collections de variables** (`Lou-Ka · Couleurs`, `Lou-Ka · Dimensions`). |31| ② Composants | Boutons (jeu de variantes : défaut / primaire / accent CTA / fantôme / connexion), chips (défaut / survol / actif / accent), badges photo, FairValueBadge (▼ ≈ ▲), pastille KA Score, jauges KA, recherche `.q-big` + critères, champs, KPI + sparkline, jauges Stats, cellules, carte d'annonce (composant + survol + recommandée + mobile), header desktop/mobile, ticker, tabbar flottante, bouton KA Agent, pagination, zone de recherche, barre de résultats, footer Groupe KA, blocs de fiche (héro, coût réel, historique, analyse de prix, carte, KA Scores, quartier). |32| ③ Écrans · Desktop 1440 | Accueil, Fiche logement, Stats, Villes — auto-layout complet, contenu réel (annonce 719 5e Avenue, chiffres live du 2026-09-04). |33| ④ Écrans · Mobile 390 | Les mêmes 4 écrans + menu plein écran + feuille de critères ; repère du pli à 844 px ; tabbar, barre d'action basse et bouton KA positionnés en absolu. |34| ⑤ Références live | 10 captures du site en production (5 pages × desktop/mobile) mises à l'échelle 1440 / 390. |3536Les écrans sont construits avec les mêmes fonctions que les composants : modifier une fonction37dans `plugin/src/code.js` et relancer `node build.mjs` régénère tout de façon cohérente.3839## Dossier4041```42lou-ka-figma/43├── plugin/44│   ├── manifest.json        ← à importer dans Figma45│   ├── code.js              ← GÉNÉRÉ (source + images embarquées, ≈ 2,9 Mo)46│   ├── src/code.js          ← source du générateur (éditer ici)47│   └── test/run-mock.mjs    ← exécution hors Figma sur une maquette de l'API48├── tokens/lou-ka.tokens.json← jetons W3C Design Tokens (Tokens Studio / import de variables)49├── references/50│   ├── fold/                ← captures au-dessus du pli (@2x) — embarquées51│   ├── full/                ← captures pleine page — à glisser dans Figma52│   ├── photos/              ← 12 photos d'annonces réelles (640 px) — embarquées53│   └── manifest.json        ← annonce de référence, liste des captures54├── shots.mjs                ← capture www.lou-ka.com (Playwright de ~/ka-screenshots)55└── build.mjs                ← assemble plugin/code.js56```5758## Régénérer5960```bash61node shots.mjs                    # nouvelles captures + photos depuis le site live62node build.mjs                    # réassemble plugin/code.js63node plugin/test/run-mock.mjs     # vérifie que le plugin s'exécute (hors Figma)64```6566Dans Figma, relancer le plugin **dans un fichier vide** (il crée des pages et des styles ; il ne67nettoie pas une exécution précédente).6869## Fidélité et limites7071- Les valeurs `clamp()` sont figées à leur maximum (1440 px) pour le desktop et à leur valeur72  390 px pour le mobile.73- Le grain de film (`body::before`), les flous `backdrop-filter` et les animations ne sont pas74  reproduits.75- Les cartes Mapbox sont des placeholders vectoriels aux couleurs ka-maps (eau vert forêt,76  routes lime) ; les photos sont de vraies photos d'annonces du jour de la capture.77- La création des variables échoue silencieusement sur les forfaits Figma limités ; les styles78  sont créés dans tous les cas.79- Source de vérité du design : le code dans le repo `lou-ka` (spbgit). Ce kit en est une80  projection à la date de génération, pas l'inverse.81