Inno-Merkle-TH/social-mockup-studio

Social Mockup Studio

Transforme un brief en maquettes pixel-parfaites des écrans LINE, Facebook et TikTok, pour n'importe quelle marque, sur iOS, Android ou desktop. Le kit sépare deux éléments qui ne doivent jamais être confondus :

• Chrome de la plateforme (barre d'état, en-tête LINE, barre d'onglets FB, rail TikTok…) se trouve dans assets/kit.css. Il ressemble toujours à la vraie application, jamais à la marque.
• Contenu de la marque (messages Flex, art de menu riche, création publicitaire, avatar, style CTA) est piloté uniquement par les variables de <projet>/brand.css.

Changer de marque = changer brand.css + images + texte. C'est ce qui rend les résultats comparables d'une marque à l'autre.

Flux de travail

0. Pré-vérification (avant la première question). Lancez python3 scripts/preflight.py --brand <site de la marque> --surfaces <line,fb,tiktok>. Mettez ses lignes DITES À L'UTILISATEUR dans votre première réponse :
   • Pas de navigateur : dites que rien ne peut être rendu, exporté ou vérifié visuellement ici.
   • Site de la marque ou sources d'images bloqués : dites-le, nommez les fichiers exacts à téléverser (logo, image hero du message riche, images de tuiles…, plus les couleurs hex de la marque et le libellé du CTA), ou demandez à l'utilisateur d'autoriser le domaine.
   • Ne construisez jamais avec des illustrations inventées pour combler le vide.
   • Copiez le résultat dans notes.md → Environnement.
1. Prise d'informations (demandez, ne devinez pas). Lisez references/intake.md et posez les questions en plusieurs tours avec AskUserQuestion. Réglez les écrans d'abord (Tour 1b) : demandez si l'utilisateur sait déjà quels écrans il veut (prenez sa liste telle quelle) ou a besoin d'aide (demandez l'objectif, puis proposez 2–3 storyboards de tailles différentes). Confirmez un tableau de storyboard numéroté avant de construire, et n'ajoutez ni ne supprimez jamais d'écrans en silence. Pour chaque écran de chat LINE, demandez toujours si le menu riche est ouvert (ouvert / replié / aucun) et s'il faut montrer uniquement le nouveau message (ancré en haut) ou aussi les messages précédents. Pour un menu riche, montrez d'abord l'image du sélecteur de disposition (templates/richmenu-picker.svg/.png, intake.md Tour 3b explique comment selon l'environnement), puis demandez quel code. Pour LINE, demandez toujours message riche, Flex, ou les deux (Q3c, avec la comparaison visuelle de references/line.md). Demandez tôt le logo, les couleurs de la marque (hex) et le libellé exact du CTA. Enregistrez chaque réponse dans notes.md → Brief, et chaque supposition dans → Hypothèses à confirmer. Ne sautez une question que si l'utilisateur y a déjà répondu ou une valeur par défaut raisonnable est listée. N'inventez jamais d'offres, de prix, de dates, de programmes de fidélité ou d'allégations produit. Demandez, ou marquez-les comme espaces réservés.
2. Structure de base. bash scripts/new_project.sh <chemin/vers/nom-du-projet> → copie le kit, un index.html de démarrage, brand.css et notes.md.
3. Marque + images. Remplissez brand.css à partir des informations recueillies. Placez les polices sous licence dans brand/fonts/ et le logo (marque monochrome pour les avatars) dans brand/. Nettoyez d'abord chaque téléversement : python3 scripts/clean_image.py <fichiers> --for <emplacement> --edges /tmp/edges.png. Il rogne les bandes blanches sur les bords et les enregistre dans assets/clean-log.txt, vérifie la taille par rapport à references/line-image-sizes.md, et écrit une feuille de bord. Ouvrez la feuille et regardez-la. Un message riche fait 1040x1040 sauf si l'utilisateur confirme une autre taille d'OA Manager. Toute limite de plateforme que vous citez nécessite deux sources ou plus ; si elles sont en conflit, dites-le et choisissez la plus sûre. Chaque emplacement d'image reçoit une vraie photo. Les dégradés CSS ou les textes de substitution à la place d'une photographie rendent la maquette artificielle. Suivez references/image-sourcing.md : fourni par l'utilisateur → site web / dossier de presse de la marque → recherche en ligne (scripts/find_images.py "<requête>" --orient portrait crée une planche contact que vous regardez ; puis scripts/fetch_image.py <url> assets/<nom>.jpg --crop 4:5). Vous pouvez aussi rechercher sur le web n'importe quelle page (actualités, revendeur, réseau social de la marque) et passer son URL à fetch_image.py ; il lit l'image principale de la page. Chaque téléchargement est enregistré dans assets/credits.json.
4. Construisez les écrans. La galerie contient un exemple par surface, pas toutes les combinaisons surface × OS (voir la matrice ci-dessous). Copiez le bloc le plus proche de templates/gallery.html dans index.html, puis changez l'appareil à l'aide de references/devices.md : échangez .dev.android ↔ .dev.ios et appliquez les différences de chrome de cet OS (par exemple, onglets FB en haut ↔ barre d'onglets en bas). Modifiez le texte et les images. Les spécificités des plateformes se trouvent dans references/line.md, facebook.md, tiktok.md.
   • Donnez à chaque écran un data-shot unique ; il deviendra le nom du fichier. Le CSS par écran peut être limité avec [data-shot="id"].
   • Nommez les classes du projet avec un préfixe de projet (par exemple .sb-hero, pas .kv/.hero) pour qu'elles n'entrent jamais en conflit avec les classes du kit.
   • Polices et ratios (lisez references/typography-and-ratios.md) : le texte que l'application dessine (bulles, Flex, texte de publication, boutons CTA, légendes) utilise toujours la police de la plateforme, donc ne mettez jamais --brand-head/--brand-body dessus. Les polices de la marque ne vont que dans les images. Les boîtes multimédia prennent un ratio, jamais une hauteur fixe : fil d'actu FB 4:5, carrousel 1:1, Stories/Reels/TikTok 9:16, message riche LINE 1040x1040 par défaut (autres tailles seulement après confirmation, voir references/line-image-sizes.md ; la géométrie bord à bord n'est PAS VÉRIFIÉE), Flex hero 20:13.
   • Ne supprimez, ne raccourcissez et ne déplacez jamais le contenu du brief pour qu'il tienne (par exemple, supprimer la bulle de texte pour qu'une image carrée tienne avec le menu ouvert, ou ancrer en bas un chat "nouveau message uniquement"). Dites-le à l'utilisateur et proposez des options : un menu compact, un texte plus court, ou un écran supplémentaire avec le menu replié.
   • Les détails du kit marqués NON VÉRIFIÉS (actuellement la marge, le rayon et la largeur du message riche dans references/line.md) vont dans notes.md → Non vérifié et dans votre message de livraison.
   • Texte thaï : encadrez les prix, dates, unités et particules finales dans <span style="white-space:nowrap"> pour que les lignes ne se terminent jamais par un "ค่ะ", "ml" ou un mot coupé orphelin.
5. Exportation (sur un Mac, pour que le texte iOS soit rendu avec le vrai SF Pro + Thonburi). node scripts/export.cjs <projet> (première fois sur une machine : cd scripts && npm install ; il utilise Google Chrome installé si le navigateur de Playwright n'est pas téléchargé). Il sert uniquement le dossier du projet. → captures/NN-<shot-id>.png (3× téléphones, 2× desktop, transparents), 00-overview.png, qa.json. Corrigez chaque requête échouée et problème QA qu'il imprime.
   • Si l'exportation ne peut pas être lancée ici (application Claude / sandbox Cowork sans Node, Playwright ou internet) : essayez cd scripts && npm install && npx playwright install chromium une fois. Si cela échoue encore, essayez Python (pip install playwright && python -m playwright install chromium) et faites une capture d'écran de chaque .frame en 3× vous-même. En dernier recours, lancez python3 scripts/bundle.py <projet> pour créer un seul fichier HTML autonome (dist/<nom>.html, qui s'ouvre en double-cliquant). Livrez-le avec le ZIP du projet, et dites clairement à l'utilisateur : "Je n'ai pas pu rendre quoi que ce soit ici, donc ces écrans n'ont pas été vérifiés visuellement. Ouvrez le HTML dans Chrome ; pour enregistrer un écran, faites un clic droit → Inspecter → Capture node screenshot sur le cadre du téléphone, ou lancez l'exportation sur un Mac." Listez ensuite les détails non vérifiés. Ne présentez jamais un résultat non rendu comme vérifié, et ne vous arrêtez jamais sans rien montrer.
   • Fichier HTML unique : construisez-le toujours avec scripts/bundle.py, jamais avec un script ad-hoc. Il vérifie la syntaxe de chaque script en ligne (node --check), échoue si un ID d'icône ou un fichier est manquant, et lorsqu'un navigateur existe, confirme que les barres d'état et les icônes s'affichent. Un bundler ad-hoc a déjà corrompu la sprite d'icônes et tué kit.js, ne laissant ni barre d'état ni icônes.
   • Hors macOS, le texte iOS utilise Inter au lieu de SF Pro (kit.js l'échange). Dites-le dans notes.md, et proposez une réexportation sur Mac pour les fichiers clients finaux.
6. Vérifiez comme le ferait un client. Ouvrez chaque PNG en taille réelle (pas seulement l'aperçu) et parcourez references/qa-checklist.md. Remplissez notes.md → "Vérification pré-livraison par rapport au Brief" pour chaque écran : tout le texte du brief présent, l'ancrage, l'état du menu et le format du message comme demandé, rien n'a été supprimé. Placez votre maquette côte à côte avec une capture d'écran réelle de references/screens/device/ (ou demandez à l'utilisateur des captures d'écran fraîches de la même surface). Les interfaces utilisateur des plateformes changent tous les quelques mois, et une capture réelle est la seule vérité terrain.
7. Enregistrez et livrez honnêtement. Mettez à jour notes.md : espaces réservés, hypothèses, détails non vérifiés, sources d'images et journal de nettoyage, chronologie. Le message de livraison doit contenir : (a) les chemins des fichiers ; (b) ce qui a été et n'a pas été vérifié, par exemple "rendu et vérifié à 100%" vs "non rendu ici" ; (c) Hypothèses à confirmer, sous forme d'une courte liste (première livraison surtout) ; (d) Détails non vérifiés ; (e) tout élément du brief que vous n'avez pas pu intégrer, avec les options que vous proposez.

Matrice de la galerie (✓ = écran prêt à l'emploi ; autres = adapter à partir de la même ligne)

Surface	Android	iOS	Desktop
Chat LINE OA + Flex	✓ sombre	✓ clair	– (pas encore dans le kit)
Menu riche LINE (12 modèles OA Manager + personnalisé + onglets)	✓ sombre L6, ✓ à onglets	✓ grand L4b, ✓ compact C2l	– (non affiché sur LINE PC)
Notification push / écran verrouillé LINE	adapter (.android .notif)	✓	–
Fil d'actu FB image unique	✓ clair	✓ sombre	✓
Carrousel FB	adapter	✓ clair	adapter
Stories/Reels FB	adapter	✓	–
In-feed / Spark / fiche produit TikTok	✓ in-feed	✓ Spark, ✓ fiche produit	✓

Règles de réalisme (apprises à la dure)

Lisez references/realism-rules.md une fois par projet. La version courte :

• Le chrome de la plateforme n'est jamais aux couleurs de la marque. Les en-têtes LINE, l'interface FB/TikTok restent natifs.
• Une chronologie cohérente sur tous les écrans (teaser → lancement → précommande → en vente → maintien). Les dates, jours de la semaine, comptes à rebours et "valable jusqu'au" doivent être cohérents. Vérifiez le jour de la semaine de chaque date.
• N'inventez pas d'avantages (points, niveaux d'adhésion, cadeaux gratuits) que la marque n'offre pas. Si le brief ne le dit pas, c'est un espace réservé ou une question.
• Le contenu est ancré là où la vraie application l'ancrerait. Un nouveau fil LINE commence en haut ; un long fil est aligné en bas (.ln-msgs.bottom). Les grands vides ont l'air faux.
• Les images doivent être lisibles à la taille d'un téléphone. Une vignette de produit de moins de ~60 px est invisible, donc recadrez plus serré ou agrandissez.
• Utilisez des nombres plausibles (likes, commentaires, heures, batterie) et gardez les heures de la barre d'état cohérentes avec l'histoire (une notification à 07h30 ne devrait pas montrer 21h14).
• Un menu riche LINE est une image conçue (2500x1686 ou 2500x843), pas des tuiles d'interface native. Concevez-le comme une œuvre graphique.

Quand quelque chose ne fait pas partie du kit

Construisez-le dans le <style> du index.html du projet en utilisant les mêmes conventions (variables de la plateforme vs marque). Si c'est réutilisable (une nouvelle surface comme LINE VOOM, FB Messenger, TikTok TopView), ajoutez-le à assets/kit.css + templates/gallery.html et mentionnez-le pour que l'équipe puisse l'intégrer.

Fichiers

Chemin	Quoi
assets/kit.css, kit.js, icons.svg, fonts/	le kit (copié dans chaque projet sous kit/)
templates/gallery.html	chaque surface × OS, copiez les blocs d'ici
templates/brand.example.css	variables de marque avec commentaires
templates/index.starter.html, notes.template.md	modèles de projet
scripts/new_project.sh	structurer un projet
scripts/preflight.py	étape 0 : peut-on rendre ? est-ce un Mac ? le site de la marque et les sources d'images sont-ils accessibles ? imprime quoi dire à l'utilisateur
scripts/clean_image.py	rogner les bords blancs des téléversements (journalisé), vérification de la taille par emplacement, feuille de zoom QA
scripts/bundle.py	un seul fichier HTML autonome (CSS/JS/polices/images/sprite intégré), avec vérifications de syntaxe, d'icônes et de rendu
templates/richmenu-picker.svg / .png	chaque disposition de menu riche avec son code, montré à l'utilisateur lors de la prise d'informations ; reconstruire avec scripts/richmenu_picker.py --png
references/line-image-sizes.md	tailles des messages riches LINE / menus riches / Flex / images par voie d'envoi, avec sources et conflits
scripts/find_images.py, fetch_image.py	trouver de vraies photos en ligne (planche contact) · télécharger + recadrer + journaliser la source
references/image-sourcing.md	d'où viennent les images, recadrages par emplacement, règles de création publicitaire
scripts/export.cjs	rendu + QA (nécessite npm install dans scripts/ une fois)
references/intake.md	les rounds de questions + valeurs par défaut
references/line.md, facebook.md, tiktok.md	anatomie, limites, plan de classes par plateforme
references/devices.md	cadres, barres d'état, différences OS
references/realism-rules.md, qa-checklist.md, localization-th.md	barres de qualité
references/screens/	captures d'écran réelles datées + répliques calibrate/
references/typography-and-ratios.md	quelle police chaque plateforme utilise vraiment, tailles mesurées, ratios des médias
scripts/calibrate.cjs	superposer une réplique du kit sur une capture d'écran réelle (côté à côté / fondu / différence + score par bande)