pack-de-référence-marque

Pack de référence de marque

Le pack est du contexte, pas du contenu. Il enregistre ce que la marque est déjà (audience, voix, langage visuel, jetons, ainsi que les écrans et la copie dont chaque affirmation provient) afin que les formats, scripts et décisions de conception puissent être pris à partir de lui plus tard. Pas d'accroches, scripts ou séries dans le pack. Si une source en suggère un, notez la source et laissez la décision ouverte.

Où il se situe :

upstream (stratégie) ──→ ce skill (marque observée) ──→ downstream (formats, scripts, réels)
ICP · VOC · voix de marque   ce que les surfaces disent/montrent      script-à-réel, shader-lab

Ce skill n'établit pas l'ICP, la voix du client ou la voix de marque. Il trouve les artefacts upstream, vérifie les surfaces par rapport à eux, et marque chacun comme vérifié / inféré / manquant (pack §0). Les lacunes remontent en upstream ; ne les masquez pas ici.

Fichiers :

• template.md : la structure des sections du pack.
• scripts/ : assistants génériques de capture et de rendu.
• apps/<app>/ : un dossier par application avec ses URLs, recette de flux, particularités, règles de production et mise en page PDF.
  • Lisez apps/<app>/README.md en premier. Pour une nouvelle application, créez-le lors de l'ingestion.

Les commandes ci-dessous sont écrites relatives à ce dossier de skill (.claude/skills/brand-reference-pack/), et les chemins de sortie sont relatifs à l'endroit où vous les exécutez. Exécutez-les depuis la racine du projet et préfixez scripts/ par le chemin du skill. pack_pdf.py résout sa configuration par rapport au skill.

0. Ingestion (un tour AskUserQuestion, nouvelle application uniquement)

Collectez :

• Nom de l'application.
• URL du site web.
• Identifiants réseaux sociaux.
• Identifiant App Store et pays (ID de package Play si pertinent).
• Comment exécuter l'application : build simulateur, TestFlight, application web ou émulateur.
• Chemin du dépôt de code, s'il y en a un.
• Documents existants sur la marque, l'ICP ou la recherche.
• Quel est le flux principal.
• Ce qui est interdit en production.
• Dossier de sortie.

Écrivez les réponses dans apps/<app>/README.md.

1. Vérification des fondations (ICP, VOC, voix de marque)

Pour chaque fondation, cherchez l'artefact upstream : un wiki ou dossier de docs, des decks de recherche, un livre de marque.

• ICP : un client cible défini, soutenu par des données ou des recherches. Notez sa confiance et sa taille d'échantillon.
• Voix du client : les mots des clients eux-mêmes issus d'entretiens, d'avis, du support ou de la communauté. Les témoignages sur le site de la marque ne comptent que comme preuve faible : ils sont curés.
• Voix de marque : un guide de voix écrit ou des règles de copy.

Enregistrez chacun dans le tableau §0 du pack. À travers les étapes 2 à 5, vérifiez si les surfaces live correspondent à l'artefact. Les incohérences vont dans les Décisions ouvertes. Si un artefact est manquant, dites-le et nommez le travail upstream qui le comblerait ; n'inventez pas la fondation à partir des surfaces.

2. Surfaces publiques (parallèles si possible)

Chaque affirmation nécessite un fichier dans refs/.

Site web :

node scripts/site.mjs <url> <brand>/refs/web

Cela enregistre des captures d'écran pleine page et hero pour desktop et mobile, plus site-styles.json avec les polices (y compris les vrais noms derrière les identifiants de font-host), les couleurs, les images, les liens et le texte de la page. Découpez la capture pleine page en environ 4 parties pour la lire.

App Store :

node scripts/store.mjs <id> <brand>/refs/store [country]

Cela enregistre la fiche (le positionnement officiel), les captures d'écran du store, et les avis en tant que matière première VOC.

Réseaux sociaux (dans le navigateur intégré) :

• Refusez les cookies optionnels.
• Grille : collectez les src et alt des images de chaque publication, dessinez-les sur un canvas, remplacez la page par celui-ci et capturez.
• Légendes : fetch same-origin de la page de chaque publication → og:description.
• Déconnecté, vous n'obtenez qu'environ 12 publications. Dites-le, et si les réels comptent, demandez à l'utilisateur de se connecter ou d'exporter.
• Si vous obtenez les réels, notez leur rythme, style de légende et audio.
• Écrivez tout dans refs/<platform>/.

Documents existants : utilisez un sous-agent Explore pour synthétiser l'audience, la promesse, la terminologie, les règles de voix et les affirmations, avec des citations de fichiers.

3. Jetons de code (s'il y a un dépôt)

Utilisez un sous-agent Explore pour trouver le thème pour le framework utilisé par l'application :

• Flutter ThemeData et constantes de couleur
• Configuration Tailwind
• Variables CSS
• Catalogues d'actifs iOS
• colors.xml Android

Couvrez également les polices, les rayons, les conventions de mouvement, les shaders, les fichiers de logo et la copie UI notable. Vérifiez ponctuellement les hexadécimaux vous-même. Écrivez tokens.json avec les rôles de couleur, l'échelle typographique (mise à l'échelle pour 1080×1920), la forme, le mouvement et le canvas.

Copie in-app : extrayez chaque chaîne destinée à l'utilisateur du code UI, textuellement avec fichier:ligne, pour le cerveau de persona (étape 7) :

python3 scripts/app_copy.py <src root> <persona>/raw/app-copy/app-copy-<date>.md <ui dirs/files…>

(Flutter : app/lib avec pages widgets constants models enums main.dart ; --ext=.tsx etc. pour d'autres piles.) Il filtre les logs, clés et identifiants ; parcourez quand même la sortie pour détecter tout élément secret avant qu'il n'atterrisse dans le cerveau.

4. Parcours de l'application live

La source la plus riche : c'est ici que la grammaire visuelle et verbale réelle du produit se montre.

• Consentement d'abord : dites exactement ce que l'exécution écrit en production (compte, réponses d'évaluation, rapports générés, complétions) et obtenez un oui. L'utilisateur effectue chaque inscription et connexion. Ne saisissez jamais d'identifiants, ne vous abonnez jamais, ne messez jamais un coach IA.
• Regardez et enregistrez : attachez le panneau du simulateur (mcp__Claude_Code_iOS_Simulator__control attach).
  • Démarrez xcrun simctl io <UDID> recordVideo --codec=h264 --force <file> en arrière-plan.
  • Arrêtez-le pendant la connexion et démarrez-en un nouveau après, pour que rien ne doive être rogné.
  • Arrêtez avec pkill -INT -f recordVideo.
• Conduisez par les labels d'accessibilité, pas par les coordonnées : UDID=… OUT=<brand>/refs/app scripts/ui.sh tree|shot|label|tap|swipe|hold.
  • Prenez un cliché de chaque nouvel écran, nommé d'après son titre.
  • Attendez que les animations et la copie CMS se stabilisent avant de photographier ; si une ligne n'a pas été rendue, elle est « non capturée ».
  • Construisez une planche-contact par étape (PIL, quelques lignes) et lisez celle-ci, pas chaque PNG.
  • Suivez la recette de l'application dans apps/<app>/README.md. Ajoutez toute nouvelle particularité rencontrée dans ce fichier.
• Audio : l'enregistrement du simulateur n'en a pas. Si l'application a de la voix ou de l'audio, demandez à l'utilisateur un fichier source.
• Après :
  • Re-numérotez les captures d'écran dans l'ordre de capture.
  • Construisez refs/app-flow-sheet.jpg.
  • Compressez les enregistrements : scale=540:-2,fps=30,crf 26.

5. Écrire le pack

Remplissez template.md dans <brand>/README.md.

• Ne citez que ce que vous avez vu.
• Là où les surfaces sont en désaccord, la surface live la plus récente est la valeur par défaut de travail et le désaccord va dans les Décisions ouvertes.
• §0 provient de l'étape 1.

6. Vérifier

Donnez à un sous-agent frais le README et le dossier refs/, pas vos conclusions. Demandez-lui de vérifier chaque ligne citée, hexadécimal et affirmation par rapport à un fichier, et de lister tout ce qui n'a pas de source. Corrigez ou marquez chaque élément avant de rendre la main.

7. Sortie

• PDF : écrivez apps/<app>/pdf.json (copiez celui de GetAhead : couverture, police, accent, groupes de palette pointant vers tokens.json, lignes de spécimens, pages de captures d'écran). Exécutez ensuite :

  python3 scripts/pack_pdf.py apps/<app>/pdf.json
  

  Vérifiez le résultat en tant que planche-contact pdftoppm -r 40.
• Docs : si le projet a un wiki ou des documents, déposez le pack en suivant ses propres conventions (page, index, journal, drapeaux de contradiction sur les pages qu'il remplace).
• Cerveau de persona : si le projet en a un (par ex. persona/, le cerveau marque-en-tant-que-personne à partir duquel la génération de scripts parle), copiez les captures du parcours de l'application dans son raw/app-run-<date>/ et la copie in-app dans raw/app-copy/ (avec le oui de l'utilisateur : raw/ est à eux), puis exécutez le propre workflow d'ingestion du cerveau (son CLAUDE.md) : pages source, pages concept, reconstruction de carte avec les lignes textuelles de l'application. Le pack enregistre à quoi la marque ressemble ; le cerveau enregistre comment elle parle — les scripts puisent dans le cerveau.
• Envoyer : le PDF et le README, avec SendUserFile.
• Rapporter :
  • ce qui a été écrit en production
  • ce qui n'a pas été capturé
  • l'état des fondations
  • les décisions ouvertes