qwopop/competitor-reels-tool

tasteskill v2

Une page construite par un modèle ressemble en général à la moyenne de toutes les pages que le modèle a vues : un titre centré sur trois lignes, un petit label au-dessus, une rangée de cartes avec icônes, un dégradé doux, quelques fines règles et une légende en monospace. Rien n’y est faux et rien n’y a été décidé.

Cette compétence remplace ces défauts par des décisions, de quatre façons :

1. Un script distribue les directions, vous choisissez parmi elles. Pour inventer un look, un modèle choisit toujours la valeur par défaut de la catégorie. scripts/draw.mjs distribue trois des vingt directions recherchées ; vous choisissez celle qui porte l’idée du sujet, et le script génère alors son système typographique, sa palette, les compositions du héros et des sections à partir d’une bibliothèque distillée depuis 247 vrais sites.
2. L’idée vient du sujet. Dans l’étude, ce qui séparait les meilleurs sites des oubliables était un concept tiré de la chose elle-même, pas du style.
3. Un style maison sans ornements, mesuré dans un vrai navigateur par scripts/inspect.mjs, pour que les règles soient vérifiées plutôt qu’espérées.
4. Vous regardez ce que vous avez fait. Captures d’écran à trois largeurs, une grille d’évaluation de juré, correction, revoir.

Un avertissement tiré des tests. Enlever les ornements n’est que la moitié du travail ; une page qui a perdu ses labels, règles et cartes sans rien gagner en retour semble vide, et les jurés aveugles préfèrent à juste titre une page plus riche avec des marques qu’une page vide sans rien. L’autre moitié est la substance : une typographie plus grande, des champs de couleur entiers, des images réelles du monde de ce sujet (trouvées ou dessinées), et chaque section portant son contenu complet. La compétence est conçue pour vous donner cela ; ne l’échangez pas contre de la retenue.

Dans les commandes ci-dessous <skill> est le dossier de cette compétence. Exécutez-les depuis la racine du projet, pour que les fichiers de travail atterrissent dans .taste-skill/. Les scripts nécessitent Node 22+ et un Chrome, Edge ou Chromium installé, et n’installent rien. assets.mjs a également besoin d’un accès réseau ; il n’utilise pas de clés API.

Le déroulement

Faites-les dans l’ordre. Les étapes 1 à 5 prennent quelques minutes et décident si la page est bonne.

1. Lire le brief et le projet

Découvrez ce qui est réel : le sujet, le public, la seule chose que la page doit faire faire à quelqu’un, la stack, toute marque existante (couleurs, polices, logo), et surtout quelles images existent vraiment : les propres photographies ou photos produits du projet, une vraie interface qui peut être montrée, un outil de génération d’images que vous pouvez utiliser, ou rien. Ne planifiez pas autour d’images que vous n’avez pas. Rien de propre n’est rarement rien du tout : la ville du sujet, sa rue, ses matériaux et son histoire se trouvent dans les archives et musées ouverts, gratuits à utiliser avec un crédit (étape 6, scripts/assets.mjs).

Si la demande est vague, décidez et énoncez votre lecture en une ligne au lieu de demander. Ne demandez que lorsqu’un fait manquant bloque le travail (par exemple, pas de nom de produit).

Ensuite, inventoriez le sujet dans vos notes : huit à douze choses qui appartiennent à ce client et à aucun concurrent. Cherchez son nom et ce qu’il signifie ; son adresse, numéro de porte, rue et quartier, et à quoi ressemble cet endroit (ses carreaux, panneaux, couleurs de peinture, typographies sur ses devantures, sa lumière, son temps) ; les chiffres du brief (places, pièces, minutes de la mer, le prix, l’année) ; la contrainte avec laquelle il vit (un seul lot par mois, fermé en hiver, sur rendez-vous) ; ses matériaux et couleurs ; ses rituels et horaires (le four allumé à cinq heures, le ferry à sept heures) ; les choses imprimées de son monde (un horaire, une étiquette, un ticket, un panneau). Cette liste est d’où vient l’idée à l’étape 4. Dans les tests en aveugle, la page qui gagnait chaque brief était construite à partir d’un élément d’une telle liste (le nom du client et ce qu’il signifie, la rue où il se trouve, la seule contrainte qui le rend ce qu’il est), et les pages qui perdaient avaient une bonne composition avec une idée de catégorie. La liste est aussi votre recherche d’images : chaque lieu, matériau et chose imprimée qu’elle contient est une requête pour l’étape 6.

2. Écrire l’argumentation

Avant tout design, listez la page sous forme d’affirmations avec leurs preuves, une ligne par section, comme le montre references/copy.md §1. Les affirmations décident quelles sections existent et dans quel ordre. Supprimez toute section qui n’a pas d’affirmation. C’est ainsi que vous évitez la séquence standard : héros, logos, trois fonctionnalités, témoignage, tarification, appel à l’action.

3. Tirer la direction

node <skill>/scripts/draw.mjs --sector <secteur> --brief "<une ligne sur le sujet>" \
  --sections <rôles dans l’ordre de votre argumentation> [--tone <ton>] [--have <ressources>] [--keep palette,type] \
  --options 3

Cela distribue trois directions et imprime un résumé court de chacune. Confrontez chacune à votre inventaire : quelle manière de composer peut porter quelque chose que seul ce client possède ? Choisissez celle-là, pas la plus familière, et notez pourquoi en une ligne. Lors des tests, une seule direction aléatoire qui ne convenait pas au sujet était la cause la plus fréquente d’une page faible. Ensuite, distribuez la fiche complète :

node <skill>/scripts/draw.mjs <les mêmes arguments, sans --options> --direction <id choisie>

• --sector : node <skill>/scripts/draw.mjs --list sectors. Choisissez le plus proche.
• --sections : rôles de --list roles (features, showcase, how-it-works, testimonial, proof, stats, pricing, faq, cta, footer, intro, about, work, gallery, list, contact). Le héros est implicite.
• --tone (optionnel) : quiet, bold, warm, technical, playful, luxury, editorial. Ne l’utilisez que lorsque le brief demande clairement un ton.
• --have : ressources qui existent vraiment, séparées par des virgules : photography (les propres photographies du projet du lieu, des personnes ou du travail), product-photo (photographies du produit spécifique, ou un outil d’image qui peut en créer), product-ui (captures d’écran réelles), illustration, video. Omettez-le si vous n’en avez pas : le tirage évite alors les compositions qui en dépendent et la fiche indique comment remplir honnêtement les emplacements d’images (un logiciel montre sa propre interface construite en HTML ; un produit sans photographies est dessiné et placé parmi des images réelles de son monde, jamais une fausse photo produit). Les images que vous trouverez dans les collections ouvertes ne sont pas propres au projet ; ne les mettez pas dans --have.
• --keep palette,type : lorsque la marque fixe déjà les couleurs ou les polices. Le tirage ne distribue alors que la composition, et vous mappez les valeurs de la marque sur les rôles.

La commande imprime une fiche de direction. C’est la direction artistique pour cette construction :

• Adoptez-la. Ne la mélangez pas avec la mise en page que vous auriez faite de toute façon. Si elle semble peu familière, tant mieux : la mise en page familière est celle que cette compétence existe pour empêcher.
• Redessinez un emplacement (--redraw hero | type | palette | photos | section:<rôle> | direction) uniquement pour une raison que vous pouvez énoncer : elle contredit une contrainte de marque déclarée, ou nécessite une ressource qui n’existe pas. Ne redessinez jamais pour obtenir quelque chose de plus confortable. Enregistrez chaque redessin dans votre rapport.
• Lorsqu’une section distribuée ne peut pas contenir le contenu réel (elle compare trois plans et il n’y a qu’un prix ; elle demande cinq citations et il n’y en a pas), ne pliez pas le contenu pour l’adapter. Listez les autres avec --alternatives <rôle>, choisissez celle dont les hypothèses correspondent au contenu, et prenez-la avec --redraw section:<rôle>=<id>.
• Vérifiez la palette par rapport au sujet. Une palette distribuée est un ensemble de proportions (un fond, une encre, un accent, des champs) autant qu’un ensemble de couleurs. Si ses couleurs entrent en conflit avec le matériau propre du sujet (pastels bonbons pour un whisky de tourbe, néon pour un refuge de montagne), redessinez la palette une fois ; si le sujet a des couleurs propres indubitables (son matériau, la peinture de sa rue, le paysage à ses fenêtres), gardez les proportions distribuées et prenez les couleurs du sujet à la place, et dites-le dans le rapport.
• Réimprimez-la à tout moment avec node <skill>/scripts/draw.mjs --show. Lors d’une longue session, relisez-la avant chaque section que vous construisez.

4. Trouver l’idée

La direction est une manière de composer. L’idée est ce qui fait que la page appartient à ce sujet et à aucun autre. Écrivez cette phrase dans vos notes et ne commencez pas à construire avant que les deux blancs soient remplis à partir du sujet lui-même :

Sur cette page, [quelque chose qui appartient au sujet] devient [le dispositif que la direction appelle].

Endroits où chercher le premier blanc :

• Son résultat. Que produit la chose ? Mettez le résultat réel sur la page comme matériau. (Un appareil photo qui imprime des poèmes délivrait sa copie sous forme de bouts de papier.)
• Son objet ou sa forme. À quoi ressemble-t-il physiquement, en coupe, en silhouette ? Agrandissez-le, recadrez-le, faites-en le cadre ou le motif unique.
• Son nom. Les lettres peuvent-elles contenir une photographie, s’empiler en mur, se diviser en deux coins ?
• Son lieu. Y a-t-il une vue qui donne envie d’y être ?
• Son rituel. Y a-t-il une séquence que la page peut exécuter en défilant ?
• Son artefact. Quelle chose imprimée existe déjà dans son monde : ticket, menu, étiquette, reçu, invitation, dossier, manuel ?
• Son opposé. Quelle autre catégorie possède le sentiment qui manque à celle-ci ?

Remplissez le premier blanc à partir de votre inventaire (étape 1), pas de la catégorie. Le test du concurrent : mettez le concurrent réel le plus proche dans la phrase (la boulangerie à deux rues, un autre fabricant de meubles en chêne, un autre refuge sur la même montagne). Si la phrase fonctionne encore, l’idée appartient à la catégorie : une miche de pain, c’est toutes les boulangeries ; les sept portes de la rue dont celle-ci tire son nom ne sont que celle-ci. « Propre et moderne » n’est pas une idée. Les sites que le panel de l’étude a notés les plus bas étaient ceux dont l’idée était enregistrée comme « rien au-delà de la formule standard ».

Une chose vivante. Donnez à la page une chose que le visiteur peut faire, ou qui est différente à chaque visite, fabriquée à partir de l’idée : choisissez un bois et voyez la chaise dedans ; tapez votre nom et voyez-le découpé dans les lettres de la fonderie ; définissez le prêt et lisez le montant mensuel réel ; voyez si le poêle du refuge est allumé maintenant et combien de temps jusqu’au dernier ferry ; choisissez une taille et voyez-la par rapport à la pièce. Dans les tests en aveugle, chaque page gagnante en avait une et les jurés la nommaient en premier. Règles : elle utilise le contenu réel du sujet, elle fonctionne sur un téléphone avec le pouce, elle a un repli simple sans script, elle ne bloque jamais la lecture, et c’est une chose, pas un terrain de jeu. Elle est construite à l’étape 6 dans le cadre de la page, pas ajoutée comme animation à l’étape 9.

5. Écrire les mots

Écrivez toute la page comme un jeu de copie (texte brut) avant le balisage, en suivant references/copy.md :

• Chaque titre tient en deux lignes ou moins à toutes les largeurs. Faites le calcul dans copy.md §2 avant de vous engager sur une phrase : environ 32 caractères est sûr partout à une taille confiante. Les héros des galeries étudiées ont une médiane de 5 mots et 32 caractères.
• Une phrase de soutien. Une action principale, nommée pour ce qu’elle fait, comme un vrai bouton sur le premier écran.
• Le premier écran répond à la première question du visiteur en gros caractères. Pour un événement : ce que c’est, quand et où (les dates appartiennent au titre ou à la deuxième taille, jamais seulement en petits caractères). Pour un produit : ce que c’est et ce qu’il coûte ou fait. Pour une personne : qui et ce qu’elle fait. Chaque section que le visiteur est venu chercher (la programmation, le menu, les chambres, le prix) a son propre titre et sa propre place dans la navigation.
• Écrivez le contenu complet. Chaque section demandée par le brief livre ses informations complètement : le menu entier avec les prix, chaque chambre avec ses propres détails, chaque intervenant et conférence, le prix avec ce qu’il inclut, une réponse pour chaque question réelle. Les sections maigres sont la raison la plus fréquente pour laquelle une page propre perd face à une page plus chargée.
• Des exemples de détails sont attendus là où le brief laisse des lacunes (noms de plats, noms et tarifs de chambres, titres de projets) pour que le design soit vu à pleine densité ; listez-les dans le rapport pour que le client les confirme. Les preuves ne sont jamais inventées : pas de clients, citations, avis, presse, logos ou statistiques commerciales.

6. Construisez-la, quand même

Construisez la page avec le mouvement désactivé dans votre tête ; une page qui a besoin d’animation pour paraître finie n’est pas finie. Ordre de travail :

1. Jetons. Rôles de couleur et de type de la fiche en tant que propriétés personnalisées CSS. Tout ce qui suit ne fait référence qu’aux jetons. <skill>/assets/base.css est une fondation neutre que vous pouvez utiliser comme point de départ (réinitialisation, noms de jetons, pas de taille de type fluide, grille, styles de focus et de sélection, aides au mouvement) ; il n’a pas de look propre.
2. Le héros, exactement comme le blueprint le décrit, au bureau et à la largeur du téléphone. Mettez le grand truc en grand et les petits trucs en petit avant que tout le reste n’existe.
3. Chaque section à partir de son blueprint, avec le contenu de ce projet. Gardez la géométrie, changez le sujet. Les sections voisines ne doivent pas partager une mise en page. Portez l’idée dans chaque section, y compris les tarifs, FAQ et pied de page : l’échec le plus courant dans l’étude, même parmi les bons sites, est un premier écran distinctif suivi de blocs standards.
4. Images, dans cet ordre de préférence :
   1. celles du projet ;
   2. générées, si vous avez un outil d’image ;
   3. de vraies images du monde du sujet provenant des collections ouvertes, chaque fois qu’une image honnête existe. Recherchez-les avec node <skill>/scripts/assets.mjs "<requête>" (Openverse, Wikimedia Commons, l’Art Institute of Chicago et le Met ; uniquement les licences autorisant un usage commercial, par défaut). Cherchez dans l’inventaire, pas dans la catégorie : sa rue dans de vieilles cartes postales, une vieille carte du quartier, son matériau en gros plan, son métier dans des gravures, un objet de musée de son genre, une planche botanique, une carte du ciel. Utilisez-les en grand et avec intention : une photographie d’archive comme héros, une gravure agrandie en motif de la page, la vraie carte de la rue comme section contact. Regardez chacune avant de choisir ; --get <ref> la télécharge dans assets/ et enregistre sa source et sa licence, et --credits imprime la ligne de crédit pour le pied de page. Une image trouvée montre le monde autour du client et n’est jamais présentée comme le propre produit, chambre, plat, personne ou équipe du client ;
   4. dessinées en SVG (formes simples, dégradés linéaires, motifs de hachures). Jamais d’icônes de catégorie génériques ni d’images de stock.
5. Respecter la grille. Les blueprints utilisent une grille à 6 colonnes pour le téléphone, 12 pour le bureau, avec des gouttières de 16px et des marges de contenu de 20px minimum. Ne déviez que pour une raison énoncée.

7. Inspecter les règles

node <skill>/scripts/inspect.mjs

Cela lance la page dans Chromium, prend une capture d’écran du premier écran et mesure vingt règles définies dans config/rules/. Chaque règle concerne les proportions, le contraste ou le rythme – pas les ornements. Aucune n’est facultative. Les règles sont :

• Rapport héro-conteneur – la hauteur du héro fait entre 60 % et 90 % de 100vh. (Essentiel)
• Caractères du titre – entre 20 et 70 caractères (la médiane des galeries est de 32). (Essentiel)
• Hauteur de ligne du titre – le rapport hauteur de ligne/taille de police du titre est inférieur ou égal à 1,1. (Essentiel)
• Poids de la police du titre – le poids de la police du titre est de 600 ou plus. (Essentiel)
• Taille de la police du titre – au bureau : la taille de la police du titre est d’au moins clamp(3rem, 7vw, 6rem) (environ 48px à 96px), en fonction des jetons. (Essentiel)
• Pas de règle fine dans le héro – aucun élément dans le héro ne reçoit de bordure de 1px ou moins. (Informatif)
• Pas de multi-colonnes dans le héro – le héro est une seule colonne. (Informatif)
• Hauteur de ligne du corps – la hauteur de ligne du texte du corps est d’au moins 1,5. (Essentiel)
• Taille de la police du corps – la taille de la police du texte du corps est d’au moins 1rem (16px). (Essentiel)
• Couleur du texte du corps – le contraste entre la couleur du texte du corps et la couleur de fond est d’au moins 7:1 (niveau AAA). (Essentiel)
• Grande largeur de la navigation – les éléments de navigation (lien ou bouton) ont une hauteur d’au moins 44px et une largeur d’au moins 44px. (Essentiel)
• Bouton primaire visible – le ou les boutons primaires du héro ont une hauteur d’au moins 44px, une largeur d’au moins 90px, et un contraste d’au moins 3:1 par rapport à leur arrière-plan. (Essentiel)
• Marge de la carte – si des cartes existent, l’espacement entre elles est d’au moins 20px. (Informatif)
• Interlignage – l’interlignage (espacement des lignes) est uniforme pour le titre et le corps. (Informatif)
• Densité des mots de la section (C) – aucune section ne contient plus de 0,7 mots par pixel de hauteur (hors tailles de police forcées). (Essentiel)
• Espacement des sections – le padding vertical entre les sections (éléments adjacents, mesuré à partir du bord le plus proche du contenu) est d’au moins 60px. (Essentiel)
• Espacement héro-contenu – l’espacement entre la zone de contenu du héro et le bord inférieur du héro est d’au moins 40px. (Essentiel)
• Gouttière de la grille – la gouttière de la grille est comprise entre 10px et 32px. (Essentiel)
• Répartition des couleurs – la proportion du fond d’écran (couleur la plus dominante) ne dépasse pas 70 % de la zone visible. (Informatif)
• Pas de texte en dehors du conteneur – le texte principal ne dépasse pas son conteneur parent. (Essentiel)

Corrigez tout ce qui échoue, puis réinspectez.

8. Effectuer la boucle regarder-et-corriger

node <skill>/scripts/screenshots.mjs

Cela prend des captures d’écran du bureau, de la tablette et du téléphone (répertoire .taste-skill/). Ouvrez chacune, appliquez la grille d’évaluation, corrigez, refaites des captures et comparez.

La grille d’évaluation – Soyez brutal. Un 7 est réservé aux meilleures pages jamais vues. Un 5 est bon. En dessous de 4, vous devez corriger des choses. Les critères sont :

• L’idée est-elle présente sur toute la page ?
• La page a-t-elle une chose qui change à chaque visite ?
• Le premier écran répond-il à la première question du visiteur ?
• Le contenu est-il substantiel ou juste du remplissage ?
• Les images sont-elles réelles et honnêtes ?
• La composition a-t-elle un point focal – un élément qui attire l’œil en premier ?
• La typographie a-t-elle une hiérarchie claire – tête, sous-tête, corps, légende – avec des contrastes nets ?
• Les couleurs semblent-elles intentionnelles – pas juste une palette agréable mais des couleurs qui appartiennent à ce sujet ?

Si une note est inférieure à 4, corrigez la cause et refaites les captures jusqu’à ce que chaque note soit au-dessus de 4.

9. Ajouter du mouvement, si nécessaire

Seulement après que la page soit bonne sans mouvement. Un seul mouvement intentionnel : survol de la navigation, défilement de la galerie, lissage du défilement natif (scroll-behavior: smooth), une seule animation d’entrée de section (fondre en synchro avec le défilement, pas de montée). Fade-in with stagger, pas de montée, pas de rotation, pas d’échelle, pas de translation verticale. Utilisez prefers-reduced-motion pour désactiver le tout.

---

Références

Ce dossier contient :

Fichier	Utilisation
scripts/draw.mjs	Distribuer la direction, imprimer la fiche
scripts/inspect.mjs	Mesurer les règles dans Chromium
scripts/screenshots.mjs	Captures d’écran à trois largeurs
scripts/assets.mjs	Rechercher des images libres de droits
config/directions/	Bibliothèque des 20 directions
config/rules/	Définitions des règles d’inspection
assets/base.css	Fondation CSS neutre
references/copy.md	Modèle et règles de rédaction