marvinmcv-svg/SCCS-Landing-page

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 fines règles et une légende en police monospace. Rien n'y est faux et rien n'y est 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. Quand on demande à un modèle d'inventer un look, il choisit la valeur par défaut de la catégorie à chaque fois. scripts/draw.mjs distribue trois directions parmi vingt recherchées ; vous choisissez celle qui porte l'idée du sujet, et le script distribue alors son système typographique, sa palette, sa composition de héros et de sections à partir d'une bibliothèque distillée de 247 sites réels.
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, 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 et n'a rien gagné en retour semble vide, et les jurés aveugles préfèrent à juste titre une page plus riche avec des indices 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, 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 nécessite également un accès réseau ; il n'utilise pas de clés API.

L'exécution

Faites-les dans l'ordre. Les étapes 1 à 5 prennent quelques minutes et déterminent 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 faire faire à quelqu'un, la stack, toute marque existante (couleurs, polices, logo), et surtout quelles images existent réellement : les propres photographies du projet ou photos de produit, 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. N'avoir rien de propre n'est rarement rien du tout : la ville, la rue, les matériaux et l'histoire du sujet se trouvent dans les archives et musées ouverts, libres d'utilisation 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 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 dans le 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 à l'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 dans laquelle il se trouve, la seule contrainte qui le rend ce qu'il est), 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'argumentaire

Avant tout design, listez la page sous forme de revendications avec leurs preuves, une ligne par section, comme le montre references/copy.md §1. Les revendications décident quelles sections existent et dans quel ordre. Supprimez toute section qui n'a pas de revendication. C'est ainsi que vous évitez la séquence standard de héros, logos, trois fonctionnalités, témoignage, tarification, 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 argumentaire> [--tone <ton>] [--have <actifs>] [--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 a ? 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, distribuez la feuille complète :

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

• --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 le passez que lorsque le brief demande clairement un ton.
• --have : actifs qui existent vraiment, séparés 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 créer), product-ui (captures d'écran réelles), illustration, video. Laissez-le de côté si vous n'en avez pas : le dessin évite alors les compositions qui en dépendent et la feuille indique comment remplir les emplacements d'images honnêtement (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 propres au projet ; laissez-les hors de --have.
• --keep palette,type : lorsque la marque fixe déjà les couleurs ou les polices. Le dessin 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:<rôle> | direction) uniquement pour une raison que vous pouvez énoncer : elle contredit une contrainte de marque énoncée, ou a besoin d'un actif 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 forfaits et il y a 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 <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 se battent avec le matériau propre du sujet (pastels bonbons pour un whisky de tourbe, néon pour une cabane 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 à l'extérieur de 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. Dans une longue session, 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 pour 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 comme des 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'être là ?
• 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 : ticket, 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, un autre fabricant de meubles en chêne, une autre cabane 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 "aucune au-delà de la formule standard".

Une chose interactive. Donnez à la page une chose que le visiteur peut faire, ou qui est différente à chaque visite, créé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 de la cabane est allumé maintenant et combien de temps jusqu'au dernier ferry ; choisissez une taille et voyez-la contre la pièce. Dans les tests à l'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 un 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. Écrivez les mots

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

• Chaque titre tient en deux lignes ou moins à chaque largeur. 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 de galerie étudiés ont une médiane de 5 mots et 32 caractères.
• Une phrase de soutien. Une action primaire, 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 petit texte). Pour un produit : ce que c'est et ce que ça coûte ou fait. Pour une personne : qui et ce qu'il/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 complètement son information : le menu entier avec les prix, chaque chambre avec ses propres détails, chaque intervenant et intervention, le prix avec ce qu'il inclut, une réponse à chaque question réelle. Les sections minces 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 là où le brief laisse des lacunes (noms de plats, noms de chambres et tarifs, 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, toujours

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. Tokens. Rôles de couleur et de typographie de la feuille en tant que propriétés personnalisées CSS. Tout en aval ne fait référence qu'aux tokens. <skill>/assets/base.css est une fondation neutre dont vous pouvez partir (reset, noms de tokens, échelons typographiques fluides, grille, styles de focus et de sélection, assistants de mouvement) ; elle n'a pas de look propre.
2. Le héros, exactement comme le décrit le blueprint, sur ordinateur et en largeur téléphone. Faites la grande chose grande et la petite chose petite 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, y compris les tarifs, la FAQ et le 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 standard.
4. Imagerie, dans cet ordre de préférence :
   1. les propres du projet ;
   2. générée, 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 des licences autorisant une utilisation commerciale, par défaut). Cherchez dans l'inventaire, pas dans la catégorie : sa rue dans les vieilles cartes postales, une vieille carte du quartier, son matériau en gros plan, son métier dans les gravures, un objet de musée de son genre, une planche botanique, une carte des étoiles. Utilisez-les grandes 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, salle, plat, personne ou équipe du client ;
   4. dessinée en...