ishan-parihar/website-design

Conception de Site Web

Un pipeline qui transforme n'importe quel agent IA, y compris les modèles petits ou faibles, en un outil capable de livrer et déployer des sites web esthétiques, riches en fonctionnalités et de classe mondiale. Chaque phase produit un artefact nommé que la phase suivante relit, garantissant qu'aucune décision n'est jamais refaite ou perdue. Déclenché via les conventions skill-creator ; chaque description est une chaîne entre guillemets sur une seule ligne.

Artéfacts du pipeline (mémoire de travail) : DESIGN BRIEF (audience, ambiance, cadrans) → DIRECTION (style, palette, typographie, autorisé/interdit) → TOKENS (propriétés CSS personnalisées canoniques, mode sombre) → SECTION MAP (sections ordonnées avec emplacements titre/corps/asset/CTA) → DEPLOY SPEC (hôte, type, URL, rollback).

Schéma de routage : Pipeline + Facettes

Pipeline (dans l'ordre, ne jamais sauter une phase) :

1. briefing - extraire le DESIGN BRIEF du message utilisateur, liens, captures d'écran, dépôt.
2. direction - choisir le style, la palette, la typographie AVANT tout HTML ou CSS.
3. system - transformer la DIRECTION en TOKENS et câbler le thème/mode sombre.
4. structure - transformer TOKENS et DIRECTION en SECTION MAP.
5. components - construire chaque section à partir de recettes de blocs (enfants : navigation, héros, sections de fonctionnalités, preuve sociale, conversion, formulaires).
6. content - remplir chaque emplacement de la SECTION MAP avec du contenu réel et des ressources réelles.
7. motion - spécifications d'animation par section selon le cadran MOTION.
8. quality - contrôles de revue uniquement : anti-slop, accessibilité, performance, audit, production, preflight (dernière porte).
9. deploy - choisir l'hôte : higgsfield ou generic.

Facettes (points d'entrée, pas des phases) :

• Site déjà existant (URL, dépôt, fichiers) → commencer par redesign AVANT briefing, puis réintégrer le pipeline.
• Les feuilles quality/* sont en lecture seule ; les charger lors de la vérification, pas lors de la construction.
• version-control s'exécute EN PARALLÈLE de chaque phase : valider chaque artefact au fur et à mesure de sa production. Travailler dans un dépôt géré par webdev (WEBSITES/) rend cela obligatoire.

Enfants

• briefing - toujours en premier pour les nouvelles constructions ; produit le DESIGN BRIEF avec les cadrans VARIANCE/MOTION/DENSITY.
• direction - style, palette, typographie via une recherche vérifiée ui-ux-pro-max ; produit DIRECTION.md.
• system - tokens canoniques, thème, mode sombre ; produit TOKENS.
• structure - sections ordonnées et nombre d'emplacements ; produit SECTION MAP.
• components - recettes de blocs par type de section ; charge une feuille par section.
• content - contenu réel, images réelles, pas de remplissage ; produit CONTENT.
• motion - spécifications d'animation, squelettes GSAP, chemins de mouvement réduit.
• preflight - dernière porte ; consulte tous les frères qualité, puis passe au déploiement.
• deploy - routeur d'hébergement : higgsfield (site/app/jeu) ou hôte statique générique ; produit DEPLOY SPEC.
• redesign - entrée prioritaire d'audit lorsqu'un site existe déjà.
• version-control - discipline Git à toutes les phases ; ne jamais laisser de travail non validé.

Navigation (routeur racine uniquement)

• Sauter : connaître la phase ? Charger cet enfant directement ; ne jamais charger tout l'arbre.
• Parcourir : uniquement lorsque la décision elle-même n'est pas claire ; lire un routeur à la fois.
• Annoncer la phase sous laquelle vous opérez ; lorsqu'elle change, le dire.
• Réacheminer : si la feuille chargée contredit la tâche, revenir ici et choisir à nouveau ; ne jamais improviser une feuille.
• Déléguer les branches larges à un sous-agent avec le chemin de l'enfant et une tâche découpée ; seul ce sous-arbre se charge.
• Limite : une feuille ne dépasse jamais les règles de son ancêtre ; ce fichier prévaut en cas de conflit.

Conventions

Promues depuis _build/plan-expanded.md ; contraignantes pour chaque nœud du sous-arbre.

• Vérification pour modèles faibles : tableaux de décision, nombres concrets ("padding 96-128px", jamais "généreux"), 3 à 8 vérifications réussite/échec par feuille qui sont comptables et greppables. Expliquer en une ligne pour que les modèles plus intelligents généralisent ; la règle mécanique se suffit à elle-même.
• Ancrage du sujet : chaque choix esthétique s'ancre dans le sujet concret, l'audience et le travail principal (industrie, matériaux, vernaculaire). Un magasin de jouets pour filles de 8 à 11 ans et un outil pour analystes financiers doivent diverger. Contenu RÉEL partout ; lorsque le contenu manque, proposer un texte concret via briefing et confirmer.
• Agnostique en matière de langage : les principes vivent dans le HTML sémantique + CSS dans references/stack-adapters.md. Ne jamais dépendre de React, Tailwind ou tout autre framework.
• Tokens canoniques : définis dans system, utilisés partout : --bg --surface --text --text-muted --accent --accent-contrast --border --destructive, --radius --radius-lg, --font-display --font-body --font-mono, --space-1..--space-10 (4 8 12 16 24 32 48 64 96 128), --container, --shadow-1 --shadow-2.
• Cadrans de briefing : entiers de 1 à 10, noms exacts VARIANCE (1 minimal, 10 asymétrique/art), MOTION (1 statique, 10 cinématique), DENSITY (1 clairsemé, 10 dense). Ne jamais inventer de nouveaux cadrans.
• Protocole ui-ux-pro-max : les choix de direction/système sont vérifiés par rapport aux données de style/palette/typographie du pack ; en cas de résultats vides, revenir aux tableaux intégrés et le dire.
• Cinq artefacts voyagent sous forme de blocs délimités, relus par leur nom, jamais de mémoire.
• Frontmatter : name: correspond au dossier, description: chaîne de déclenchement entre guillemets sur une seule ligne.
• Style : pas de tiret cadratin (utiliser un trait d'union ou un point), pas d'émojis, les interdictions absolues vivent UNIQUEMENT dans anti-slop, les liens croisés entre frères sont relatifs à la racine (heroes).

Non-négociables

• Aucun tiret cadratin nulle part dans aucun nœud ; le détecteur de la feuille anti-slop le recherche.
• Aucun logo, témoignage, statistique ou image de marque fabriqué ; content propose, l'utilisateur confirme.
• Aucun token de remplacement ; chaque section est rendue à travers l'ensemble de tokens canoniques.
• Aucun mélange de systèmes de conception : une famille de style, une palette, un appariement typographique par construction.
• Aucun artefact non validé : version-control valide la sortie de chaque phase avant le début de la phase suivante.
• Pas de déploiement sans que preflight soit réussi.
• Les graphiques sont explicitement hors du périmètre de cette compétence. Pour la visualisation de données (25 types de graphiques dans ui-ux-pro-max), interroger python ~/.agents/skills/ui-ux-pro-max/scripts/search.py "<forme des données>" --domain chart plutôt que d'improviser une grille + barres.