ReScienceLab/gabarit-rapide

Kit de marque

Un dossier canvas contient des planches : des artboards HTML que vous avez construites. Ce skill ajoute un second type de contenu au même dossier — les images publiées par l'entreprise, disposées sous forme de formes d'image plutôt que de planches. Logos, spécimens typographiques, captures d'écran de l'App Store, publications sociales, créations publicitaires, photos de presse.

L'objectif est la comparaison verticale dans une colonne. Les lignes sont des surfaces, pas des types d'actifs, donc l'avatar sur X se situe au-dessus de l'avatar sur Instagram, lui-même au-dessus de l'avatar sur TikTok, et un avatar qui diffère des autres apparaît comme une rupture dans la colonne, plutôt que comme quelque chose qu'il faut chercher.

Lisez references/sources.md avant de collecter. C'est le guide par surface, dans l'ordre de rendu, avec les appels. Lisez references/manifest.md lorsque vous arriverez à la rédaction du manifeste et au câblage du générateur ; il contient le schéma, le script de vérification et la règle de gen.py.

Ce que vous produisez

canvases/<slug>/
  assets/brand/
    manifest.json          la source de référence : lignes, dans l'ordre canonique
    identity/  social/  stores/  ads/  press/
  gen.py                   lit le manifeste, ajoute ses lignes à layout.json
  layout.json              ce que le canvas et la page de marque affichent réellement

assets/brand/ est la seule partie de assets/ à laquelle le canvas donne une URL. Le générateur intègre tout le reste de assets/ dans une planche sous forme d'URI de données, donc une image qui doit avoir sa propre forme doit vivre ici.

Les sept étapes

N'écrivez jamais le manifeste en premier. Chaque fichier qu'il référence doit déjà avoir passé la vérification. Un fichier qui échoue est supprimé ; il n'obtient pas d'entrée dans le manifeste avec une mention dans l'étiquette.

1. Regardez un exemple terminé. L'application en fournit douze. Listez-les et affichez les lignes de l'un d'eux :

   KIT="$(sp root)"
   ls "$KIT"/canvases/*/assets/brand/manifest.json
   python3 -c 'import json,sys
   for r in json.load(open(sys.argv[1])): print(len(r["images"]), r["title"])' \
     "$KIT/canvases/claude-ios/assets/brand/manifest.json"
   

   sp introuvable ? Exécutez sh <sp-canvas skill dir>/scripts/install.sh (Windows : install.ps1) et suivez le fichier references/install.md de ce skill. Une ligne [super-prototyping:notice] sur sa sortie d'erreur standard contient sa propre règle : terminez l'étape, puis faites ce qu'elle dit.
2. Le kit de marque ou de presse de l'entreprise. Les logos en haute résolution, la typographie et les valeurs de couleur proviennent de là, alors vérifiez-le d'abord. Voir references/sources.md.
3. Fiches des boutiques d'applications. La source groupée la plus fiable, et une API renvoie toutes les captures d'écran en une seule fois.
4. Réseaux sociaux. L'avatar, la bannière et 4 à 8 visuels publiés par plateforme. Vérifiez d'abord chaque identifiant (handle) — voir « Vérifier le compte, pas l'identifiant » ci-dessous.
5. Site marketing et salle de presse. Image hero, illustration de page de fonctionnalité, cartes og:image, photos de presse.
6. Vérifiez chaque fichier. Octets, extension, dimensions, taille, doublons. references/manifest.md contient le script. Il doit afficher NO PROBLEMS.
7. Écrivez le manifeste, câblez gen.py, régénérez, visualisez dans un navigateur.

Les lignes sont un vocabulaire fixe

Les titres des lignes proviennent de cette liste, et les lignes que vous écrivez doivent apparaître comme une sous-séquence de celle-ci : cet ordre, en sautant celles qui ne s'appliquent pas.

Logo et logotype · Police de caractères · Direction artistique · Identité appliquée ·
X · Instagram · TikTok · YouTube · LinkedIn ·
App Store · Google Play · Microsoft Store ·
Cartes d'annonce · Publicités payantes · Photographie de presse

Identité d'abord, puis une ligne par plateforme. Deux de ces titres ne sont pas évidents, donc pour correspondre aux dossiers fournis :

• Direction artistique correspond au style d'imagerie que l'entreprise elle-même publie : systèmes d'illustration, art hero, traitement photographique, études de personnages, art directeur.
• Identité appliquée correspond à l'identité sur les objets : UI du produit, affiches, signalétique, scènes d'événements, marchandisage.

N'inventez pas de titre de ligne. Si une surface n'existe pas pour ce produit, laissez-la de côté : une ligne absente est correcte, une ligne vide est un bug, et une ligne avec du matériel d'autre chose est un mensonge.

Combien

Les douze dossiers fournis contiennent de 50 à 144 actifs, la plupart entre 70 et 120. La diversité des surfaces est l'objectif, donc 4 à 8 visuels publiés par plateforme sociale valent mieux que quarante captures d'écran d'une seule boutique — mais une ligne de boutique prend tout ce que la boutique a, ce qui dans ces dossiers représente 4 à 20 actifs.

Cinq règles qui déterminent ce qui entre

La provenance est binaire et ce n'est jamais une supposition

"theirs" signifie que l'entreprise l'a publié. "archive" signifie qu'une archive de marque organisée l'a fait, et une archive ne compte comme telle que si elle nomme la source originale et la date de chaque élément. Si vous ne pouvez établir ni l'un ni l'autre, l'actif ne rentre pas. C'est la raison d'être de ce système : une image indique d'où elle vient, et quelque chose organisé par un tiers ne passe jamais pour quelque chose que l'entreprise a diffusé.

Vérifiez le compte, pas l'identifiant

Ne faites pas confiance à un identifiant qu'on vous a donné, y compris celui écrit dans un cahier des charges. Confirmez qu'il résout, qu'il est vérifié là où la vérification existe, et qu'il s'agit bien de la bonne entreprise. Les comptes imitations (squattés) ou dormants sont courants : lors d'un passage, le simple @tiktok sur X s'est avéré être un compte d'offres locales sans lien, et le vrai compte était @tiktok_us.

Dites dans votre rapport quels identifiants et identifiants de boutique vous avez utilisés, et lesquels se sont avérés incorrects.

Un code 200 ne prouve pas que la page existe

Les sites marketing et les salles de presse sont généralement des applications monopages qui renvoient HTTP 200 pour n'importe quel chemin, y compris un chemin inventé. Vérifiez plutôt le <title> rendu. Un article réel a son propre titre ; un slug inventé reçoit le titre générique du site :

curl -sL "$URL" | grep -o '<title>[^<]*</title>'

Exécutez cela d'abord sur un slug délibérément faux sur le même site, afin de savoir à quoi ressemble son titre générique. Tout slug qui renvoie le titre générique n'existe pas : abandonnez-le, et abandonnez tout ce que vous en avez tiré.

Les mêmes octets deux fois sont un seul actif

Après chaque lot de téléchargements, depuis le dossier canvas :

find assets/brand -type f -exec md5 -r {} \; | sort | awk '{print $1}' | uniq -d

Il ne doit rien afficher. Si un hash entre en collision, supprimez la nouvelle copie. Les rognures et redimensionnements d'une même image ne sont pas identiques au niveau des octets et aucun outil ici ne les détecte — cela se fait à l'œil, et vous conservez la plus grande.

L'extension doit correspondre aux octets

file <chemin> fait autorité, pas l'URL à partir de laquelle vous avez téléchargé. PNG enregistré en .jpg, WebP enregistré en .png et une page de défi HTML enregistrée en .jpg sont déjà arrivés. Renommez pour correspondre. HEIF est converti plutôt que renommé, car aucun navigateur ici ne le dessine :

sips -s format jpeg in.heic --out out.jpg

Où vont les fichiers

groupe	contient
identity	logo, logotype, spécimens typographiques, couleur, direction artistique, identité appliquée
social	X, Instagram, TikTok, YouTube, LinkedIn
stores	App Store, Google Play, Microsoft Store
ads	créations publicitaires payantes, cartes d'annonce
press	photographie de presse

Utilisez ces cinq noms ; n'en inventez pas de parallèles. Nommez un fichier d'après ce qu'il est (x-avatar.jpg, appstore-iphone-03.jpg, wordmark-black.svg).

Certains dossiers contiennent déjà une image sous assets/brand/ que le générateur intègre dans une planche plutôt que de la dessiner comme une ligne — une photo de profil qu'un maquette utilise, par exemple. Ce ne sont pas du matériel de marque ; laissez-les exactement comme ils sont, et en dehors du manifeste. Trouvez-les avant de commencer :

git ls-files assets/brand/

Chaque chemin affiché va dans l'ensemble IGNORE du script de vérification, écrit de manière relative au dossier canvas, c'est ainsi que le script compare.

Câblage

Une constante à côté des autres constantes de répertoire du dossier :

BRAND_DIR = OUT / "assets" / "brand"

et une ligne là où ce dossier termine sa liste de lignes. Les générateurs ici se présentent sous deux formes, alors faites correspondre celle que vous avez devant vous :

    rows += json.loads((BRAND_DIR / "manifest.json").read_text())        # dans layout()
LAYOUT["rows"] += json.loads((BRAND_DIR / "manifest.json").read_text())  # LAYOUT au niveau du module

Les lignes de marque vont après chaque ligne de planche, et la lecture est inconditionnelle, sans if BRAND_DIR.exists(). Ajoutez la ligne uniquement une fois que le manifeste existe, sinon python3 gen.py lèvera FileNotFoundError lors de la lecture.

Ensuite, python3 gen.py et vérifiez que le diff de layout.json est une pure addition. S'il supprime des lignes, arrêtez-vous et lisez la section « gen.py doit être une opération sans effet » de references/manifest.md ; vous avez trouvé un vrai bug et la régénération endommagerait les données.

Le canvas récupère le dossier sans autre changement : la ligne s'affiche, le bouton « Kit de marque » apparaît dans la barre d'outils et le dossier rejoint le sélecteur de la page de marque.

Vérifiez dans un navigateur avant de faire votre rapport

Ouvrez les deux pages du dossier sur le serveur de développement :

http://127.0.0.1:<port>/?canvas=<slug>            le canvas
http://127.0.0.1:<port>/brand.html?canvas=<slug>  le kit de marque

Exécutez ceci sur le kit de marque, pas sur le canvas. Le chargement différé signifie qu'une image qui n'a jamais défilé dans la vue n'a jamais échoué non plus, donc forcez le chargement et comptez :

const imgs = [...document.querySelectorAll("main img")];
for (const i of imgs) i.loading = "eager";
await Promise.allSettled(imgs.map((i) => i.decode()));
imgs.filter((i) => i.naturalWidth === 0).length;  // doit être 0

Le canvas dessine ses lignes de marque comme des formes tldraw et supprime celles qui sont hors écran, donc le même compte là-bas ne prouve rien. Zoomez pour ajuster et regardez à la place.

Rapport

• La sortie complète du script de vérification, tableau des lignes inclus.
• Si l'entreprise publie un kit de marque ou de presse formel, et son URL.
• Quels comptes, identifiants et identifiants de boutique vous avez utilisés et vérifiés, et ceux qui se sont avérés incorrects, dormants, squattés ou appartenant à une autre entreprise.
• Chaque candidat que vous avez rejeté, et pourquoi : 404, bloqué, non propriétaire, trop petit, doublon, mauvaise entreprise.
• Ce que vous n'avez pas pu atteindre, divisé en ce qui n'existe pas et ce qui existe mais a été bloqué depuis votre emplacement.

Des lacunes énoncées clairement valent mieux qu'un manifeste gonflé. Un honnête « ce produit n'a pas de fiche Microsoft Store » vaut plus qu'une ligne de captures d'écran de quelque chose d'autre.