brand-intake : tokens réels dans, brand.json dehors
Le film doit ressembler au produit, donc les tokens proviennent du produit, jamais du goût. Ordre des sources, arrêtez-vous à la première qui donne une valeur pour un champ, et enregistrez d'où vient chaque valeur :
- Le dépôt de l'utilisateur (meilleur : tokens exacts, vrais noms de polices, le vrai fichier logo).
- L'URL en direct (styles calculés, balises meta, SVG d'en-tête).
- Les captures d'écran fournies par l'utilisateur (échantillonnage de pixels).
- Demandez à l'utilisateur tout ce qui manque encore. Ne devinez jamais.
Sortie (chemins relatifs à launch-video/) : films/<slug>/brand.json, films/<slug>/BRAND-SOURCES.md, et les fichiers logo copiés tels quels dans public/films/<slug>/brand/ (afin que les scènes les chargent avec staticFile()).
Recettes d'extraction : references/sources.md. Mappage des champs, polices de remplacement, calcul de contraste : references/brand-json.md.
Étapes
- Trouver la racine du produit. Si
launch-video/se trouve dans un dépôt produit, la racine du dépôt est un niveau au-dessus. Sinon, demandez l'URL et les captures d'écran. Notez la pile : dépendancespackage.json(version tailwindcss, next, @fontsource/*, shadcn). - Couleurs depuis le dépôt. Dans l'ordre : variables
@themede Tailwind v4 dans CSS,theme.extend.colorsde Tailwind v3tailwind.config.{js,ts,cjs,mjs}, tokens shadcn dansglobals.css(--background,--foreground,--primary,--muted,--card,--accent), autres propriétés personnalisées:root. Convertissez HSL/OKLCH/RVB en hexadécimal à 6 chiffres. Utilisez le thème utilisé par le site marketing (sombre ou clair), pas les deux mélangés. - Polices depuis le dépôt. Imports
next/font/googleounext/font/local, dépendances@fontsource*,@font-face,font-familysurbody/html/h1,fontFamilyde Tailwind. Enregistrez les noms de familles et les poids réellement utilisés. - Logo depuis le dépôt. Cherchez d'abord SVG :
public/logo*.svg,public/*mark*.svg,app/icon.svg,public/favicon.svg,src/assets/*logo*,src/components/*Logo*(JSX SVG en ligne : extrayez le<svg>), puis PNG ≥ 512 px (apple-touch-icon.pngfait 180 px : dernier recours pour une marque, jamais pour un logotype). Copiez danspublic/films/<slug>/brand/sans modification. - Rayon et thème.
--radiusouborderRadiusde Tailwind ; thème = sombre si la luminance relative du fond < 0.2. - Combler les lacunes depuis l'URL en direct (
references/sources.md§ URL en direct) : meta theme-color,og:image,link rel=icon, SVG en ligne d'en-tête, styles calculés debody, bouton primaire,h1. - Combler les lacunes depuis les captures d'écran : échantillonnez les pixels à des points nommés (fond de page, texte de corps, bouton primaire, carte). Écrivez les coordonnées des pixels dans BRAND-SOURCES.md.
- Nom, slogan, URL : depuis
package.jsonname/description, le<title>du site, leh1héros,og:description, première ligne du README. Utilisez les propres mots de l'utilisateur ; n'écrivez jamais un nouveau slogan ici (le texte est fait dans story). - Mapper les polices que vous ne pouvez pas livrer ou charger vers une police OFL livrée par rôle (brand-json.md § polices) et dites-le.
- Vérification de contraste (brand-json.md § contraste) : fg sur bg ≥ 4.5:1 requis (cible 7:1), accent sur bg ≥ 3:1. Écrivez les chiffres. Un accent échouant → conservez-le pour les formes, choisissez
fgpour le texte dessus. - Écrivez
brand.json, puis validez sischemas/brand.schema.jsonexiste :npx -y -p ajv-cli@5 -p ajv-formats ajv validate --spec=draft2020 -c ajv-formats -s schemas/brand.schema.json -d films/<slug>/brand.json - Écrivez
BRAND-SOURCES.md: une ligne par valeur → source (fichier:ligne, URL + sélecteur, ou capture d'écran + x,y). - Montrez à l'utilisateur un résumé de 6 lignes (nom, thème, 6 échantillons en hex, polices, fichier logo, tout élément mappé ou demandé).
Arrêts stricts (ne continuez pas le pipeline)
| Situation | Faire | Jamais |
|---|---|---|
| Aucun fichier logo dans le dépôt, le site ou les captures d'écran | Demandez : « Envoyez le logo en SVG (de préférence) ou un PNG ≥ 512 px avec transparence. » | dessiner, tracer, générer ou approximer un logo |
| Logo uniquement comme un petit favicon | Demandez un fichier plus grand | upscaler un favicon de 32 px en une marque héroïque |
| Aucune couleur capturée (pas d'accès au dépôt, site bloqué, pas de captures d'écran) | Demandez l'URL ou 2-3 captures d'écran, ou les codes hex | choisir des couleurs « sympas » ou une palette par défaut |
| Palettes conflictuelles (app vs marketing) | Demandez laquelle le film doit utiliser ; par défaut, le site marketing | les mélanger |
| L'utilisateur veut un logotype textuel parce qu'aucun logo n'existe | Autorisé uniquement avec un « oui » explicite : nom du produit dans la police d'affichage, couleur fg | le présenter comme leur logo |
Règles
- Copiez les fichiers logo octet par octet. Ne recolorisez, recadrez ou « nettoyez » pas un logo sauf si l'utilisateur le demande.
- N'utilisez jamais le logo d'une autre entreprise ou les logos des clients de l'utilisateur sans confirmation de l'utilisateur qu'il en a le droit.
- Ne récupérez jamais de polices depuis des sources dont la licence interdit la redistribution dans un dépôt (polices FFL Fontshare comme Satoshi ou General Sans, Apple SF Pro) : mappez-les (brand-json.md § polices).
brand.jsonne contient aucun secret ni donnée personnelle au-delà du nom public du produit et de l'URL.- Réexécuter la collecte écrase uniquement les champs dont la source a changé ; conservez les champs que l'utilisateur a modifiés manuellement (diff d'abord).
- Les compétences en aval lisent uniquement
brand.json; ne codez jamais en dur les valeurs hex de la marque dans les scènes[craft/06#grade-discipline].