Maikozort/claude-skills

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 a été décidé.

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

1. Un script distribue les directions, vous choisissez parmi elles. Lorsqu'on lui demande d'inventer un look, un modèle choisit la valeur par défaut de la catégorie à chaque fois. 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 typographique, sa palette, les compositions du hero et des 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 séparait les meilleurs sites des oubliables était un concept tiré de la chose elle-même, pas du style.
3. Une charte sans ornements, mesurée dans un vrai navigateur par scripts/inspect.mjs, afin 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, une correction, puis on regarde à 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 règles et ses cartes sans rien gagner en retour donne l'impression d'être vide, et les jurés aveugles préfèrent à juste titre une page plus riche avec des indices à une page vide sans eux. L'autre moitié est la substance : une typographie plus large, des champs entiers de couleur, de vraies images 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 aucune clé API.

L'exécution

Faites-les 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 faire faire à quelqu'un, 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 n'est rarement rien du tout : la ville, la rue, les matériaux et l'histoire du sujet se trouvent dans des archives ouvertes et des musées, 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 porte, rue et quartier, et à quoi ressemble cet endroit (ses carreaux, panneaux, couleurs de peinture, polices sur ses devantures de magasins, sa lumière, son temps) ; les chiffres dans le 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. Lors de 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 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 également votre recherche d'images : chaque lieu, matériau et chose imprimée sur la liste est une requête pour l'étape 6.

2. Rédigez l'argumentaire

Avant tout design, listez la page sous forme d'affirmations avec leur preuve, 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, tarification, appel à l'action.

3. Tirez la direction

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

Ceci distribue trois directions et imprime un bref 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 correspondait pas au sujet était la cause la plus courante 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 hero est implicite.
• --tone (optionnel) : quiet, bold, warm, technical, playful, luxury, editorial. Passez-le uniquement lorsque le brief le demande clairement.
• --have : ressources qui existent vraiment, séparées par des virgules : photography (les propres photographies du lieu, des personnes ou du travail du projet), 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. Ommettez-le si vous n'en avez aucune : le tirage évite alors les compositions qui en dépendent et la fiche 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 photo de produit factice). Les images que vous trouverez dans les collections ouvertes ne sont pas la propriété du projet ; ne les incluez 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 autrement. Si elle semble peu familière, tant mieux : la mise en page familière est celle que cette compétence a pour but d'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 y a un 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 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 qui lui sont propres et indubitables (son matériau, la peinture de sa rue, le paysage en dehors de 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 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 rend la page propre à ce sujet et à aucun autre. Écrivez cette phrase dans vos notes et ne commencez pas à construire tant que les deux espaces vides ne sont pas remplis à partir du sujet lui-même :

Sur cette page, [quelque chose qui appartient au sujet] devient [le dispositif demandé par la direction].

Où chercher pour le premier espace vide :

• 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 a livré sa copie 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 motif unique.
• 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 seule 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 espace vide à 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 : une miche de 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 le moins bien notés étaient ceux dont l'idée était enregistrée comme « aucune 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 chiffre mensuel réel ; voyez si le poêle de la cabane est allumé en ce moment et combien de temps jusqu'au dernier ferry ; choisissez une taille et voyez-la par rapport à la pièce. Lors de 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 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 avec 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 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 uniquement en petits caractères). Pour un produit : ce que c'est et ce que ça 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 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 à chaque vraie question. 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. La preuve n'est jamais inventée : pas de clients, citations, avis, actualités, logos ou statistiques commerciales.

6. Construisez-la, tout de même

Construisez la page avec les animations désactivées dans votre tête ; une page qui a besoin d'animation pour avoir l'air finie n'est pas finie. Ordre de travail :

1. Jetons. Les rôles de couleur et de typographie de la fiche en tant que propriétés personnalisées CSS. Tout ce qui est en aval ne fait référence qu'aux jetons. <skill>/assets/base.css est une base neutre dont vous pouvez partir (réinitialisation, noms de jetons, étapes de type fluide, grille, styles de focus et de sélection, les aides au mouvement) ; il n'a pas de look propre.
2. Le hero, exactement comme le décrit le blueprint, en version desktop et en version téléphone. Mettez la grande chose en grand et les petites choses en petit 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. Images, dans cet ordre de préférence :
   1. les propres images du projet ;
   2. générées, si vous avez un outil d'image ;
   3. de vraies images du monde du sujet issues 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 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 céleste. Utilisez-les en grand et avec intention : une photographie d'archive comme le 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 construit une page de crédits.