williamsnieves/landing-factory

tasteskill v2

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

Cette compétence remplace ces valeurs par défaut par des décisions, de quatre manières :

1. Un script distribue les directions, vous choisissez parmi elles. Invité à inventer un look, un modèle choisit la valeur par défaut de la catégorie à chaque fois. scripts/draw.mjs distribue trois directions parmi vingt documentées ; vous choisissez celle qui porte l'idée du sujet, et le script distribue alors son système typographique, sa palette, ses compositions de hero et de sections à partir d'une bibliothèque distillée à partir de 247 sites réels.
2. L'idée vient du sujet. Dans l'étude, ce qui distinguait 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, de sorte 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 jury, corrigez, regardez à nouveau.

Un avertissement appris lors des tests. Enlever les ornements n'est que la moitié du travail ; une page qui a perdu ses étiquettes, règles et cartes sans rien gagner en retour paraît vide, et les jurys aveugles préfèrent à juste titre une page plus riche avec des signes distinctifs qu'une page vide sans eux. L'autre moitié est la substance : une typographie plus grande, des champs de couleur entiers, de vraies photos 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, de sorte que les fichiers de travail atterrissent dans .taste-skill/ à cet endroit. Les scripts nécessitent Node 22+ et un Chrome, Edge ou Chromium installé, et n'installent rien. assets.mjs nécessite également un accès réseau ; il n'utilise pas de clés API.

Le déroulement

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

1. Lisez le brief et le projet

Découvrez ce qui est réel : le sujet, le public, la seule chose que la page doit amener quelqu'un à faire, la stack, toute marque existante (couleurs, polices, logo), et surtout quelles images existent vraiment : les propres photographies ou photos de produits du projet, une interface réelle qui peut être montrée, un outil de génération d'images que vous pouvez appeler, ou rien. Ne planifiez pas autour d'images que vous n'avez pas. « Rien de propre » est rarement rien du tout : la ville du sujet, sa rue, ses matériaux et son histoire sont dans des 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 interprétation en une ligne au lieu de demander. Demandez seulement 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 que le nom signifie ; son adresse, numéro de porte, rue et quartier, et à quoi ressemble cet endroit (ses carreaux, panneaux, couleurs de peinture, polices sur ses devantures, sa lumière, son temps) ; les chiffres du brief (places, chambres, 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 billet, un panneau). Cette liste est d'où vient l'idée à l'étape 4. Dans les tests en aveugle, la page qui a gagné chaque brief a été 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 définit), et les pages qui ont perdu avaient une bonne composition avec une idée de catégorie. La liste est aussi votre recherche d'images : chaque lieu, matériau et objet imprimé qu'elle contient est une requête pour l'étape 6.

2. Écrivez l'argument

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 : hero, logos, trois fonctionnalités, témoignage, tarifs, appel à l'action.

3. Tirez la direction

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

Cela distribue trois directions et imprime un court résumé 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 écrivez une ligne dans vos notes sur pourquoi. 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, tirez la feuille 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 hero est implicite.
• --tone (optionnel) : quiet, bold, warm, technical, playful, luxury, editorial. Ne le passez que lorsque le brief le demande clairement.
• --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 les fabriquer), product-ui (captures d'écran réelles), illustration, video. Omettre si vous n'en avez pas : le draw évite alors les compositions qui en dépendent et la feuille dit 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 de vraies images de son monde, jamais une fausse photo de produit). Les images que vous trouverez dans les collections ouvertes ne sont pas la propriété du projet ; laissez-les en dehors de --have.
• --keep palette,type : lorsque la marque fixe déjà les couleurs ou les polices. Le draw ne distribue alors que la composition, et vous mappez les valeurs de la marque sur les rôles.

La commande imprime une feuille 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:<role> | direction) uniquement pour une raison que vous pouvez énoncer : elle contredit une contrainte de marque énoncé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 seul prix ; elle veut cinq citations et il n'y en a aucune), ne pliez pas le contenu pour l'adapter. Listez les autres avec --alternatives <role>, choisissez celle dont les hypothèses correspondent au contenu, et prenez-la avec --redraw section:<role>=<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 se heurtent au matériau propre du sujet (pastels bonbons pour un whisky de tourbe, néons pour un refuge de montagne), redessinez la palette une fois ; si le sujet a des couleurs indubitables qui lui sont propres (son matériau, la peinture de sa rue, le paysage devant ses fenêtres), conservez 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. Dans une session longue, relisez-la avant chaque section que vous construisez.

4. Trouvez 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 tant que les deux blancs ne sont pas remplis à partir du sujet lui-même :

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

Où chercher le premier blanc :

• Sa production. Que produit la chose ? Mettez la production réelle sur la page comme matériau. (Un appareil photo qui imprime des poèmes a livré son texte sous forme de bouts de papier.)
• Son objet ou sa forme. À quoi ressemble-t-elle physiquement, en coupe, en silhouette ? Agrandissez-la, recadrez-la, faites-en le cadre ou le seul motif.
• Son nom. Les lettres peuvent-elles contenir une photographie, s'empiler en un 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. Quel objet imprimé existe déjà dans son monde : billet, menu, étiquette, reçu, invitation, dossier, manuel ?
• Son contraire. 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 plus loin, un autre fabricant de meubles en chêne, une autre hutte sur la même montagne). Si la phrase fonctionne toujours, l'idée appartient à la catégorie : un pain de mie est chaque boulangerie ; les sept portes de la rue dont celle-ci porte le 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 le 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 gravé 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 dans la pièce. Dans les tests en aveugle, chaque page gagnante en avait une et les jurés l'ont nommée en premier. Règles : elle utilise le contenu réel du sujet, elle fonctionne sur un téléphone avec le pouce, elle a une solution de 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 en tant qu'animation à l'étape 9.

5. Écrivez les mots

Écrivez la page entière comme un jeu de copy (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 dans une phrase : environ 32 caractères sont sûrs partout à une taille confiante. Les héros de la galerie étudiée 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 pour laquelle le visiteur est venu (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 fournit 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 à chaque question réelle. Les sections légères sont la raison la plus courante pour laquelle une page propre perd face à une page plus chargée.
• Des exemples de détails sont attendus lorsque le brief laisse des lacunes (noms de plats, noms et tarifs des chambres, titres de projets) afin 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 l'animation désactivée dans votre tête ; une page qui a besoin d'animation pour avoir l'air finie n'est pas finie. Ordre de travail :

1. Tokens. Rôles de couleur et de typographie de la feuille en tant que propriétés personnalisées CSS. Tout ce qui suit ne fait référence qu'aux tokens. <skill>/assets/base.css est une base neutre à partir de laquelle vous pouvez démarrer (réinitialisation, noms de tokens, paliers de type fluide, grille, styles de focus et de sélection, les aides au mouvement) ; elle n'a pas de look qui lui soit propre.

2. Le hero, exactement comme le blueprint le décrit, en desktop et en largeur téléphone. Obtenez la grande chose grande et les petites choses petites avant que quoi que ce soit d'autre 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, tarifs, FAQ et pied de page inclus : l'échec le plus courant dans l'étude, même parmi les bons sites, est un premier écran distinctif suivi de blocs standard.

4. L'imagerie, dans cet ordre de préférence :

   1. les images propres 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 qui autorisent une utilisation commerciale, par défaut). Cherchez dans l'inventaire, pas dans la catégorie : sa rue sur 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 des étoiles. Utilisez-les en grand et avec intention : une photographie d'archive comme hero, une gravure agrandie en motif de la page, la vraie carte de la rue comme section de 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, la chambre, le plat, la personne ou l'équipe du client ;
   4. dessinée en SVG ou en toile, lorsque aucune image réelle n'existe. Ne fabriquez jamais de photos de produits, de photos de personnes de stock, de photos culinaires de stock ou de photos de lieux de stock. Pas de placeholders de type « image de 3D d'un gadget » non plus.

   Les dimensions des emplacements d'images sont dans le blueprint de la section. Le script assets.mjs peut redimensionner (--resize) ce que vous téléchargez.

5. La chose vivante, maintenant, en HTML, CSS et JavaScript simple. Pas de framework d'animation ; pas de bibliothèque externe. Elle est construite en tant que composant de la page, pas ajoutée par-dessus.

6. Le pied de page, avec les crédits pour toute image de collection ouverte que vous avez utilisée. node <skill>/scripts/assets.mjs --credits les imprime.

7. La mise en page responsive. Le blueprint de la section donne la disposition en écran large ; la disposition étroite suit la même hiérarchie et est construite avec des requêtes média CSS à trois largeurs de rupture : étroit (< 640 px), moyen (640–1024 px), large (> 1024 px).

8. Assombrir la page une fois. Regardez-la en niveaux de gris (ajoutez filter: grayscale(1) au body). Si le texte se fond dans l'arrière-plan, le contraste est insuffisant : augmentez le poids de la police ou assombrissez/éclaircissez le fond. Revenez en arrière.

7. Triez les caractères

Avant d'inspecter avec un navigateur, exécutez scripts/inspect.mjs pour mesurer ce qui peut l'être :

node <skill>/scripts/inspect.mjs <fichier html> --out .taste-skill/report-initial.md

Cela vérifie les choses suivantes (définies dans references/inspect.md) et imprime un rapport :

• Toutes les polices sont-elles chargées et à la taille prévue ? Il mesure chaque taille de police déclarée et la signale si elle est inférieure à sa valeur cible recommandée d'après references/inspect.md.
• Les écarts entre les rôles de police sont-ils suffisants ? Le rapport vérifie que le corps de texte, le titre, l'accroche (hero) ont des écarts de taille suffisants pour une lisibilité et une hiérarchie.
• Rapports de contraste pour tout texte sur fond de couleur. Il calcule le contraste WCAG AA/AAA pour chaque paire de texte et d'arrière-plan, et signale les échecs.
• Tout texte dans des images. Si des images contiennent du texte, il le signale.
• Tout fond d'image qui entre en conflit avec la palette. Il échantillonne les couleurs dominantes de toute image sur le chemin d'une section et les compare aux couleurs de la palette.
• L'alignement vertical du hero. Il mesure la distance du haut de la page au début du contenu principal.
• Les noms de couleurs par rapport aux rôles. Il vérifie si les couleurs déclarées comme --color-ground, --color-ink, etc. sont utilisées là où elles sont attendues.

Lisez le rapport. Si une vérification échoue ou est marginale, corrigez-la maintenant. Relancez jusqu'à ce que tout soit acceptable.

8. Inspectez

Ouvrez le HTML dans un vrai navigateur, pas un environnement headless. Regardez-le à 1400 px, à 768 px, à 375 px, en paysage et en portrait. Le script inspect.mjs a déjà mesuré ce qui peut l'être ; vous cherchez maintenant ce qu'un script ne peut pas voir :

• Y a-t-il un espace ou un retrait involontaire quelque part ? La page doit être à fleur sur les côtés en largeur téléphone ; tout espace de chaque côté est une décision, pas un accident.
• Est-ce qu'il y a un alignement qui dépasse de 2 px ? La grille est définie dans base.css ; respectez ses incréments.
• Est-ce que deux choses visuellement similaires sont côte à côte ? Si deux sections ont le même fond et le même espacement, elles se fondent l'une dans l'autre. Changez l'une des deux.
• Le texte est-il vraiment lisible à toutes les largeurs, en vraie taille, sur un vrai écran ? Ne zoomez pas.
• Le premier écran a-t-il l'air fini sans défilement ? Si le titre est à moitié caché par le pli, réduisez la hauteur du hero ou déplacez le contenu vers le haut.
• La chose vivante fonctionne-t-elle sans JavaScript ? Désactivez JS, rechargez : la page doit être entièrement lisible et utilisable. La chose vivante a une solution de repli simple.

Notez jusqu'à cinq problèmes. Corrigez-les. Répétez jusqu'à ce que le seul problème soit « Je ne trouve rien à redire. »

9. Animer, si nécessaire

Si le brief demande un mouvement, gardez-le pour la fin et faites en sorte qu'il provienne de l'idée, pas d'un désir de mouvement. La règle : un mouvement est soit une réponse à une action (le bouton s'illumine quand vous le survolez), soit un changement de page (le haut de la section suivante entre lorsque vous défilez jusqu'à elle). Aucun mouvement en continu qui ne s'arrête pas. CSS @keyframes et transitions seulement, pas de JavaScript. La chose vivante est déjà animée si elle répond à l'entrée de l'utilisateur ; ne l'habillez pas en plus.

10. L'examen du jury

Construisez le rapport :

node <skill>/scripts/report.mjs

Cela assemble .taste-skill/report-initial.md (qui existe maintenant) avec vos notes des étapes ci-dessus, ajoute les crédits d'images et produit un rapport de conception complet dans .taste-skill/report-<horodatage>.md. Lisez-le. Si quelque chose manque ou est inexact, corrigez le code ou vos notes et relancez.

Ensuite, prenez des captures d'écran :

node <skill>/scripts/screenshot.mjs chemin/vers/votre/page.html

Cela produit trois captures d'écran dans .taste-skill/ : une large (1400 px), une moyenne (768 px), une étroite (375 px). Avant de les prendre, confirmez que la page est ouverte dans un navigateur visible et que la fenêtre fait au moins 1400 px de large.

Ensuite, regardez-les. Utilisez la grille d'évaluation du jury de references/jury-rubric.md et notez la page vous-même. Si une note est inférieure à 2 sur 5 pour un critère, corrigez-la. Prenez à nouveau des captures d'écran. Vous avez terminé.

Références

• references/copy.md – guide de rédaction, calculs de largeur de titre, exemples
• references/inspect.md – règles de style maison mesurables (taille de police, contraste, alignement de grille, espacement, écarts de rôles)
• references/jury-rubric.md – grille d'évaluation pour l'auto-évaluation comme examen du jury
• references/lessons.md – leçons tirées de l'étude (échecs courants à éviter, ce qui a fonctionné dans chaque brief gagnant)

Brefs

Les brefs de test utilisés dans l'étude sont dans briefs/. Lancez la compétence sur l'un d'eux pour vous entraîner :

• briefs/atlas-camera.md
• briefs/botany-bar.md
• briefs/gruene-hutte.md
• briefs/le-club.md

Scripts

Tous les scripts sont dans scripts/ :

• draw.mjs – distribue et affiche les directions artistiques
• inspect.mjs – vérifie les règles de style maison dans le HTML
• assets.mjs – recherche et télécharge des images depuis des collections ouvertes
• screenshot.mjs – prend des captures d'écran via le débogage à distance Chrome
• report.mjs – assemble le rapport

Les scripts s'importent les uns les autres ; exécutez-les toujours depuis la racine du projet.