tasteskill v2 (anti-slop front-end)

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 filets 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 défauts par des décisions, de quatre façons :

1. Un script distribue les directions, vous choisissez parmi elles. Quand on demande à un modèle d'inventer un look, il choisit à chaque fois le défaut de la catégorie. scripts/draw.mjs distribue trois des vingt directions étudiées ; vous choisissez celle qui porte l'idée du sujet, et le script distribue alors son système de typographie, sa palette, ses compositions 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 sites oubliables était un concept issu 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 sont 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, 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, ses filets et ses 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 marqueurs qu'une page vide sans eux. L'autre moitié est la substance : typographie plus grande, champs de couleur entiers, photos 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, afin que les fichiers de travail atterrissent dans .taste-skill/ là-bas. Les scripts nécessitent Node 22+ et un Chrome, Edge ou Chromium installé, et n'installent rien. assets.mjs a aussi 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, l'unique chose que la page doit faire faire à quelqu'un, la pile technique, toute marque existante (couleurs, polices, logo), et surtout quelles images existent vraiment : les propres photographies ou photos de produit 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 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, 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 que le nom signifie ; son adresse, numéro de rue et quartier, et à quoi ressemble cet endroit (ses carrelages, panneaux, couleurs de peinture, polices sur ses devantures, sa lumière, son temps) ; les chiffres dans le brief (places, chambres, minutes jusqu'à 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) ; 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 aveugles, 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 qui s'y trouve est une requête pour l'étape 6.

2. Rédiger l'argumentation

Avant tout design, listez la page comme des 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 de héros, logos, trois fonctionnalités, témoignage, tarifs, 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 <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. Dans les 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 le passez que lorsque le brief le demande clairement.
• --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 en faire), product-ui (captures d'écran réelles), illustration, video. Laissez-le de côté si vous n'en avez pas : le tirage évite alors les compositions qui en dépendent et la fiche dit comment remplir honnêtement les emplacements d'images (le 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 de produit). Les images que vous trouverez dans les collections ouvertes ne sont pas propres au projet ; laissez-les en dehors de --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 énoncée, ou nécessite 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 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 <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 les matériaux du sujet (couleurs pastel 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 devant 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 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].

Endroits où chercher le premier blanc :

• Sa production. Que produit la chose ? Mettez la production réelle sur la page en tant que matériau. (Un appareil photo qui imprime des poèmes délivrait son texte 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 un mur, se diviser vers 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 : 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 cabane sur la même montagne). Si la phrase fonctionne toujours, l'idée appartient à la catégorie : un pain 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 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 coupé dans les lettres de la fonderie ; fixez le prêt et lisez le chiffre mensuel réel ; voyez si le poêle de la cabane est allumé maintenant et combien de temps il reste jusqu'au dernier ferry ; choisissez une taille et voyez-la par rapport à la pièce. Dans les tests aveugles, chaque page gagnante en avait une et les jurés la nommaient en premier. Règles : elle utilise le contenu réel du sujet, fonctionne sur un téléphone avec un pouce, a une solution de repli simple sans script, 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 la page entière comme un bloc de contenu textuel (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 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 que le brief demande livre son information complètement : 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 pour chaque vraie question. Les sections maigres sont la raison la plus courante pour laquelle une page propre perd face à une page plus chargée.
• Des détails d'exemple sont attendus là où le brief laisse des lacunes (noms de plats, noms et tarifs de chambres, titres de projets) afin que le design soit vu à pleine densité ; listez-les dans le rapport pour que le client les confirme. La preuve n'est jamais inventée : pas de clients, citations, avis, presse, logos ou statistiques commerciales.

6. Construisez-la, encore

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

1. Jetons. Rôles de couleur et de typographie de la fiche sous forme de propriétés personnalisées CSS. Tout en aval ne fait que référencer des jetons. <skill>/assets/base.css est une fondation neutre dont vous pouvez partir (réinitialisation, noms de jetons, pas de taille de type fluide, grille, styles de mise au point et de sélection, aides au mouvement) ; elle n'a pas de look propre.
2. Le héros, exactement comme le plan le décrit, à la fois en largeur bureau et 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 plan, 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 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. images réelles 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 l'utilisation commerciale, par défaut). Recherchez l'inventaire, pas 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 des étoiles. Utilisez-les grandes et avec intention : une photographie d'archive comme héros, une gravure agrandie comme motif de la page, la vraie carte de la rue comme section de contact. Regardez chacune avant de choisir ; --get <réf> la télécharge dans assets/ et enregistre sa source et sa licence, et --credits imprime la ligne de crédits 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ée en...