badmuriss/sites-incroyablement-beaux

Sites Incroyablement Beaux

Une source unique de vérité pour les décisions visuelles et techniques derrière un site web qui donne l'impression d'avoir été livré par une vraie équipe produit, et pas par un modèle de langage qui a deviné ce qui est « moderne et propre ».

Coordination avec $refero-design

Lorsque $refero-design est disponible, chargez-le d'abord et laissez-le gérer la recherche visuelle, le routage des outils Refero, la synthèse, le verrou de référence et le registre des décisions. Utilisez ce skill après ce verrou pour prendre en charge les contraintes d'implémentation : périmètre du système existant, mode de surface, choix du framework, maîtrise de l'espace et de l'interaction, comportement responsive, contrôles anti-« slop » et validation du rendu.

La séquence est fixe :

1. $refero-design recherche les styles, les écrans et les flux en proportion de la tâche.
2. $refero-design choisit une direction principale et enregistre les influences secondaires délimitées.
3. Ce skill traduit le verrou approuvé en un contrat de direction et une UI de production.
4. Ce skill valide le résultat rendu par rapport au verrou et aux plateformes prises en charge.

N'exécutez pas les deux skills comme des autorités de goût concurrentes. Refero fournit les preuves produit et visuelles. Ce skill fournit la discipline d'exécution frontend. Si le MCP de Refero n'est pas disponible, $refero-design utilise son fallback intégré, puis ce skill continue à partir du verrou résultant.

Le framework par défaut est React (Vite / Next / vite-react-ssg). Astro, Vue, et le CSS/JS vanille sont également de première classe ; les idiomes spécifiques aux frameworks se trouvent dans framework-adapters.md. Si rien n'est spécifié, supposez React. Lorsque le système existant est Astro ou que le brief nécessite EmDash, préservez le rendu serveur et utilisez les composants Astro par défaut, en ajoutant des îlots de framework uniquement là où l'interaction les nécessite vraiment.

Comment utiliser

0. Lisez direction-workflow.md. Résolvez la vérité du système existant, puis définissez CHANGE_SCOPE et SURFACE_MODE.
1. Recherchez en proportion du périmètre. Une recherche complète est obligatoire pour world ; local hérite de la surface environnante.
2. Utilisez la présélection de type de projet (Section 1) pour calibrer la retenue du domaine et le coût technique, pas pour choisir l'esthétique.
3. Dérivez la direction à partir des preuves. Utilisez les archétypes d'ambiance et de mise en page comme vocabulaire et comme challengers, jamais comme un menu obligatoire.
4. Enregistrez le contrat de direction avant le code, puis construisez chaque section à neuf.
5. Appliquez les références techniques pour l'espacement, l'animation, les états, la réactivité et l'accessibilité.
6. Auto-évaluez-vous par rapport à la Section 14 et aux Marqueurs d'IA de la Section 13, puis effectuez les passes visuelles délimitées.

Fichiers de référence :

• direction-workflow.md — contexte cible, CHANGE_SCOPE, SURFACE_MODE, contrat de direction, porte des maquettes, finition délimitée
• foundations.md — limites faisant autorité pour le type de héros, la hauteur de la fenêtre, les propriétés d'animation, les sourcils et la priorité du système existant
• spatial-design.md — échelle de 4pt, hiérarchie, requêtes de conteneur
• motion-design.md — easing, durées, mouvement réduit, un catalogue de motifs de transition
• interaction-design.md — les 8 états, focus-visible, popovers, modales
• laws-of-ux.md — heuristiques de composition avec des recherches nommées : Hick, Miller, Fitts, Von Restorff, Peak-End, Jakob, charge cognitive
• form-validation.md — timing de validation, machine d'état des champs, :user-invalid, résumés d'erreurs, schéma comme contrat cross-stack
• responsive-design.md — mobile-first, requêtes de pointeur, safe-area, srcset
• framework-adapters.md — équivalents React / Vue / vanille pour l'animation, l'état, l'hydratation
• component-libs.md — (React uniquement) composants animés copiables : Magic UI, React Bits, icônes Lucide animées via le registre shadcn
• scroll-motion.md — (Niveau 3) GSAP ScrollTrigger + Lenis smooth-scroll, avec garde-fous de perf/a11y
• design-references.md — (recherche, gratuit) la couche de recherche sans Refero : lire les jetons réels d'un site live, les packs DESIGN.md, les galeries gratuites, les systèmes de design publics, et une banque de références segment → produits
• media-pipeline.md — photos libres de droits (Pexels/Unsplash/Pixabay/domaine public, avec les règles d'hébergement par source) + catalogue sous licence de Magnific via REST + images générées via deux voies pair ($image-gen / Magnific MCP), routes de détourage alpha, + (Niveau 3, coûteux) image→vidéo via Magnific, avec une recette <video>
• style-interview.md — (mode interview) quand demander la direction à l'utilisateur, le script du tour, comment construire des candidats à partir de la recherche au lieu de proposer la liste d'archétypes comme un menu
• redesign.md : (mode refonte) Analyser, Diagnostiquer, Réparer ; détection de mode (Greenfield / Préserver / Révision) ; ce qui ne change jamais en silence
• conversion-diagnosis.md — (pages d'atterrissage) la porte de livraison pré-contenu plus le diagnostic d'acquisition et de conversion en dix couches

Le SEO, les scores d'accessibilité et les Core Web Vitals ne sont pas audités ici. Ce skill construit ; la vérification d'une URL live appartient au skill site-audit, qui possède les règles SEO on-page (titre, meta, canonical, OG, schema, robots, sitemap), la couche AEO/GEO, l'exécution axe-core et le budget CWV. Construisez jusqu'au pré-vol du §14, puis pointez site-audit vers l'URL déployée.

Une page d'atterrissage live est diagnostiquée avant que son contenu ne soit réécrit. Lisez conversion-diagnosis.md, ouvrez la page déployée dans un profil de navigateur utilisateur réel et un profil Googlebot rendu, et établissez si les deux reçoivent une page fonctionnelle. Un script cassé, un premier écran lent, un crawler bloqué, un CTA mort ou un formulaire inutilisable l'emportent sur le polissage du contenu. Le SEO gagne la visite ; l'expérience livrée doit la transformer en lead.

---

Deux modes : autonome (par défaut) vs interview

Autonome (par défaut) : travaillez à partir du contexte que vous avez déjà plus des hypothèses raisonnables de la présélection. Ne demandez rien à l'utilisateur. Un détail manquant ? Supposez la valeur la plus probable, notez l'hypothèse en une ligne, continuez. C'est le seul mode sûr lorsqu'il n'y a pas d'humain dans la boucle.

Interview : déclenché lorsque l'invocation le demande explicitement (--interview, "modo entrevista", "demande-moi quel style"), ou lorsque CHANGE_SCOPE=world, la session est assistée et l'utilisateur n'a épinglé ni référence ni marque. Il se déroule en deux temps : recueillez le brief (segment/produit, audience, objectif, ton, objection, contraintes, sites qu'ils aiment déjà), puis recherchez d'abord et revenez avec deux ou trois directions concrètes parmi lesquelles choisir — toile, police, rôle d'accent, stratégie média, geste signature, et le vrai produit dont chacun est issu. Le but est un site avec le visage de l'utilisateur plutôt qu'un défaut compétent.

Les deux modes effectuent la recherche de la Section 0, et tous deux aboutissent au même verrou de référence et contrat de direction. La seule différence est qui prend la décision de goût. Protocole complet, script de questions, règle anti-menu et limites de tours : style-interview.md.

Refaire un site existant plutôt que d'en construire un nouveau ? Voir redesign.md pour le mode refonte (Analyser, Diagnostiquer, Réparer) et les règles Préserver vs Révision. Les deux modes ci-dessus s'appliquent toujours ; une refonte protège simplement ce que le site live gagne déjà.

---

0. RECHERCHE D'ABORD — proportionnelle au périmètre de changement

Non-négociable pour CHANGE_SCOPE=world. Une marque entièrement définie n'excuse pas de sauter la recherche structurelle pour un nouveau monde ou un remplacement. Pour surface, recherchez les structures et les flux comparables tout en préservant le système existant. Pour local, la surface environnante est la preuve principale ; ne recherchez que ce qu'elle ne peut pas répondre. Voir direction-workflow.md.

Chaque décision visuelle part de preuves de ce que les vrais produits ont réellement livré, pas de la mémoire du modèle du « bon goût ». Les modèles sont forts en code et en logique et faibles en goût produit, donc ancrez le goût à des références réelles.

Où rechercher

Premium recommandé — Refero (refero.design). Si les outils mcp__refero__* sont disponibles, utilisez-les en premier. Trois couches :

• Styles (direction visuelle, commencez ici) : refero_search_styles(query) → refero_get_style(...).
• Écrans (UI concrète) : refero_search_screens(query, platform:"web"|"ios") → refero_get_screen(...), refero_get_similar_screens(...), refero_get_screen_image(...).
• Flux (parcours multi-étapes — onboarding/checkout) : refero_search_flows(...) → refero_get_flow(...).
• Les écrans utilisent des UUID, les flux des IDs numériques. Paginez avec page uniquement. get_screen_image coûte un appel vision — utilisez-le seulement lorsque vous devez inspecter les pixels.

Voie gratuite (pas de Refero) — design-references.md. Refero rend cette étape rapide ; ce n'est pas ce qui la rend possible. La voie gratuite produit le même verrou de référence à partir de la même classe de preuves, et le fichier contient tout le carnet d'adresses : comment lire les jetons réels d'un site live avec curl/WebFetch (la preuve la plus forte qui soit, meilleure que n'importe quelle capture d'écran), les packs DESIGN.md open-source (première partie chez VoltAgent/official-design-md, 70+ marques rétro-conçues chez VoltAgent/awesome-design-md), les galeries vérifiées gratuites (siteinspire, httpster, minimal.gallery, onepagelove sections, dark.design, navbar.gallery, footer.design), les systèmes de design publics, et une banque segment → produits réels à étudier pour ne jamais partir d'une requête vide.

Version courte si vous ne lisez rien d'autre : choisissez deux ou trois produits réels dans le segment, ouvrez-les, extrayez leur pile de polices et leurs propriétés CSS personnalisées, nommez ce qui rend chacun bon, et enregistrez-le. Ne verrouillez jamais un trait que vous n'avez pas réellement regardé.

Le workflow

1. Contexte + brief court : résolvez la vérité du système existant, CHANGE_SCOPE, SURFACE_MODE, quoi / pour qui / plateforme / objectif / ton / objection / contrainte. (Autonome : inférez. Interview : demandez.)
2. Styles d'abord : deux ou trois recherches sous différents angles — un esthétique, un domaine/segment, une marque de référence forte. Ouvrez une à trois directions fortes.
3. Écrans/flux lorsque vous avez besoin d'une structure d'écran concrète ou d'une logique de parcours. Pour SURFACE_MODE=persuader, la cible pixel doit elle-même être une surface marketing persuasive avec un support focal visible. Les pages légales/conditions, la documentation, les répertoires, les journaux de modifications, les index d'archives, les tableaux de bord et les pages éditoriales de texte uniquement sont des contre-exemples, jamais le verrou d'écran principal. Nommez le support focal de la cible et un moment visuel de soutien avant de coder. Si l'écran inspecté fonctionne grâce à la photographie, l'illustration, l'image de produit ou l'animation, préservez ce rôle média. Le remplacer par de la typographie, des règles, des métadonnées ou des cartes vides est une dérive de référence.
4. Synthétisez — ne faites pas la moyenne. Choisissez une direction principale dominante et préservez ses traits distinctifs. Les références secondaires apportent un détail chacune. Jamais le tiède juste milieu de tout : si une référence est sombre, une a des empattements, une est acide, la réponse n'est pas crème polie + empattement éduqué.
5. Verrou de référence + registre de décisions + contrat de direction avant de coder :
   • Verrou de référence : la direction principale + trois à cinq traits à préserver (toile, police, accent, mise en page, densité, média) + ce qu'il faut emprunter aux secondaires + règles de rôle (CTA uniquement, code uniquement, décoratif uniquement) + stratégie média (réel / généré / stock / espace réservé).
   • Registre de décisions : un tableau décision | source | rôle/règle | pourquoi. Chaque choix visuel majeur remonte à une référence, une contrainte client, une vérité visuelle du système existant ou une règle de métier dans ce skill. Pas de source signifie que ça ne part pas.
   • Contrat de direction : les cinq blocs courts dans direction-workflow.md. La passe de finition vérifie le rendu par rapport à eux.
6. Implémentez en utilisant les présélections (Section 1), les niveaux (PREMIUM_TECH_TIER), et les règles anti-« slop » (Section 13).

Ce qui l'emporte sur quoi (recherche vs ce skill)

DUR — la vérité produit, l'accessibilité et le système existant l'emportent :

• Dans les périmètres local et surface, les tokens de marque établis et les conventions de composants l'emportent sur les valeurs par défaut de ce skill. Ne remplacez pas une police existante, une couleur de marque violette, un système Lucide, un rayon ou un langage de composant à moins que l'utilisateur n'autorise une refonte ou ne demande à supprimer ce marqueur. Voir foundations.md.
• L'accessibilité, la correction sémantique, le comportement fonctionnel, les ressources réelles et les contraintes explicites de l'utilisateur l'emportent toujours. Corrigez un échec de contraste sans l'utiliser comme permission pour restyler le produit.
• Dans le périmètre world, le contenu et les marqueurs de goût s'appliquent à chaque nouveau choix : usage excessif du em-dash, pilules flottantes décoratives, violet IA par réflexe, polices par défaut sans raison, faux humains IA dans les témoignages et icônes dans des boîtes décoratives.
• Ne clonez pas un style directement ; gardez les rôles de tokens intacts (un accent réservé au CTA reste réservé au CTA).

SOUPLE — une référence réelle l'emporte (structure et mise en page) :

• La structure de page, l'ordre et le nombre de sections, la forme du pied de page, la forme du héros, la variation de mise en page, la densité : mené par la recherche, pas par un modèle fixe. Les règles structurelles dans ce skill sont des valeurs par défaut raisonnables, pas une loi — si les références montrent une structure différente et bonne pour le cas, suivez les références.
• La structure n'est « mauvaise » que si elle casse l'utilisabilité, la conversion ou la réactivité — pas parce qu'elle diverge de la valeur par défaut de ce skill.

0.1 — Visu

…