Kc1t/sites-pixel-perfect

Sites pixel perfect

Un site IA devient générique pour trois raisons : un plan vague, un actif provenant d'une banque d'images, et personne qui ne vérifie le résultat. Cette skill résout les trois : l'actif est généré sur mesure via Higgsfield, le plan est un prompt pixel perfect avec des mesures partout, et le résultat est vérifié par capture d'écran avant livraison.

Suivez toujours les étapes dans l'ordre.

1. Lire la demande et décider (sans interroger)

Décidez ces cinq choses et communiquez vos choix dans un message court :

• Quoi et pour qui : le produit ou la personne, et qui la page doit convaincre.
• L'ambiance en trois mots (ex. : « calme, cher, nocturne »).
• L'effet, un seul, qui est la signature de la page (recettes dans references/efeitos.md) :
  • curseur : un personnage tourne la tête en suivant la souris (vidéo contrôlée par la souris) ;
  • lanterne : le curseur ouvre un cercle qui révèle ce qui se trouve à l'intérieur de l'image ;
  • boucle : photo qui devient vidéo en boucle, avec parallaxe sur les couches.
• Sortie : un seul index.html (par défaut), ou le prompt pixel perfect sans assemblage (quand seul le prompt est demandé).
• Périmètre : uniquement le hero (par défaut) ou l'ensemble de la page d'atterrissage.

Ne posez de questions que si vous ne pouvez pas avancer sans réponse (par exemple, le nom d'une marque réelle).

2. Générer les actifs via Higgsfield

L'actif est ce qui donne à la page son aspect coûteux. Ordre de préférence :

1. Les actifs de l'utilisateur.
2. Générer via Higgsfield, par le MCP, avec la recette de l'effet choisi dans references/efeitos.md.
3. Sans possibilité de génération : page uniquement composée de typographie et de mouvement. Jamais de boîte grise, de banque d'images ou d'URL inventée.

Règles valables pour tout effet :

• Image d'abord, vidéo ensuite. L'image coûte peu de crédits, la vidéo en coûte des dizaines. Ne générez la vidéo que lorsque les images sont correctes. Indiquez le coût avant de générer la vidéo.
• La deuxième image est toujours une modification de la première (Nano Banana modifiant la base), avec « keep everything identical » et le seul changement. Générer à nouveau à partir de zéro désaligne tout.
• Direction par rapport au bord de l'image, pas au personnage (« head turned toward the LEFT edge of the image »). « À sa gauche » le modèle se trompe.
• Nano Banana accepte un job à la fois. Envoyez-en un, attendez qu'il se termine, puis envoyez le suivant. Deux jobs simultanés génèrent une erreur de limite.
• Moitié vide pour le texte : le sujet dans une moitié, l'autre moitié lisse.
• Arrière-plan de l'image = arrière-plan de la page. Notez le hex du bord de l'image ; il devient --bg.

3. Rédiger le prompt pixel perfect

Rédigez le prompt en huit parties, dans cet ordre, avec le modèle dans references/especificacao.md : polices, couleurs, actifs, structure, animation, JavaScript, responsive, vérification.

Tout avec une valeur. Rien de tel que « beau dégradé » ou « animation fluide » : chaque adjectif est accompagné du nombre qui le produit. Écrivez également le texte réel de la page (titre, sous-titre, navigation, boutons).

Si seul le prompt est demandé, c'est lui la livraison : vérifiez-le avec references/revisao.md et arrêtez-vous ici.

4. Assembler

Assemblez exactement ce que le prompt indique :

• Un index.html avec <style> et <script> à l'intérieur, polices par lien, bibliothèques via CDN avec version fixe.
• La première règle CSS place l'arrière-plan sur html, body, pour éviter un flash blanc.
• HTML sémantique, <title> réel, alt, focus visible et prefers-reduced-motion respecté.
• Sur mobile (sans souris) et avec mouvement réduit, l'effet reste figé sur une belle image.
• Pas de lorem ipsum, pas de boîte de remplacement, pas d'emoji comme icône.

5. Vérifier et corriger (obligatoire)

Prenez une capture d'écran de la page sur desktop (1440×900) et sur mobile (390×844) et regardez les captures. Avec Playwright : npx playwright screenshot --viewport-size=1440,900 index.html desktop.png. Sans outil de capture, dites que la page n'a pas été vérifiée visuellement et révisez le code par rapport à references/revisao.md.

Attribuez une note avec le barème de references/revisao.md, corrigez les trois points les plus faibles avec des valeurs concrètes et reprenez une capture. Jusqu'à trois cycles, ou jusqu'à ce que la moyenne dépasse 8 sans note inférieure à 7.

6. Publier (si demandé)

Le MCP de Higgsfield dépose le site sur une adresse .higgsfield.app (create_website et deploy_website ; le processus pas à pas se trouve dans get_workflow_instructions avec website-builder-flow). Tout déploiement est public immédiatement : prévenez avant et ne laissez ni clé ni donnée personnelle sur le site.

7. Livrer

• Le fichier, et comment l'ouvrir.
• La capture d'écran finale du desktop.
• Deux ou trois lignes sur l'effet et les choix effectués.
• Les crédits dépensés dans Higgsfield, par actif.
• Ce qu'il faut changer, s'il y a quelque chose de provisoire.

Fichiers

• references/efeitos.md : les trois recettes, avec les prompts de génération et le code.
• references/especificacao.md : le modèle du prompt pixel perfect en huit parties.
• references/revisao.md : le barème de notation et le cycle de correction.

Structure (demande → média → spécification → assemblage → capture) adaptée du MotionSites Web Builder, licence MIT (voir LICENSE.md). Les prompts, recettes et code de cette skill nous appartiennent.