Conception de site web

Que fait Conception de site web ?

Chaque projet obtient son propre look, ancré dans son sujet et des références réelles. Cette compétence définit l'ordre de travail et les fichiers du projet ; le savoir-faire provient des compétences de design installées à côté.

La porte

Aucun code de page ou de composant tant que design/DESIGN.md → Entrées de design n'a pas ses quatre lignes remplies, dans l'ordre : une source ou "aucun" pour chacune, écrite par vous. Une petite retouche à un design existant est la seule exception (voir Règles).

1. Recueillir les entrées, dans cet ordre

Chaque étape lit ce que les étapes précédentes ont décidé. Une entrée antérieure l'emporte toujours sur une entrée ultérieure.

1. Les références et documents de conception de l'humain (priorité la plus élevée).
   • Lisez design/DESIGN.md. S'il est rempli (les jetons de couleur ont des valeurs), c'est la base : passez à l'étape 3.
   • design/references/ : lisez chaque image une fois et écrivez une ligne par image dans DESIGN.md → Références (fichier → prendre : … · éviter : …). Travaillez ensuite à partir de ce texte.
   • Liens, guides de marque, logos, couleurs ou polices que l'humain vous a donnés dans la conversation, et PROJECT.md.
   • Brief vide ? Posez à l'humain 3 questions courtes en un seul message : ce que c'est et pour qui ; trois mots pour l'ambiance ; des sites qu'il aime ou n'aime pas. Écrivez les réponses dans DESIGN.md → Brief.
   • Écrivez Entrées de design → Références (ce que vous avez trouvé, ou "aucun").
2. Si l'étape 1 n'a donné aucun langage de design : une base awesome-design-md.
   • {{run}} design:md list affiche le catalogue par catégorie avec une ligne par entrée (--category <mot> le restreint). Proposez 2–3 qui correspondent au brief, chacun avec une phrase expliquant pourquoi, et laissez l'humain choisir.
   • {{run}} design:md use <nom> le copie dans design/DESIGN.md avec le crédit. Remplacez chaque nom de marque, logo et marque déposée par ceux du projet.
   • Sautez cette étape si l'étape 1 a donné un langage de design, ou si DESIGN.md commence déjà par une entrée (son en-tête le mentionne).
   • Écrivez Entrées de design → Base (l'entrée, ou "aucun : construit à partir des références de l'humain").
3. taste-skill (compétence design-taste-frontend) : la direction artistique.
   • Exécutez ses étapes 1–4 (brief et inventaire du sujet, l'argument, la direction, l'idée) pour cette page.
   • Lorsque les étapes 1–2 ont fixé les couleurs et la typographie, utilisez --keep palette,type pour qu'elle planifie la composition, l'imagerie et les sections à l'intérieur du langage de design au lieu de le remplacer.
   • Écrivez la direction choisie dans les sections de DESIGN.md (thème, mise en page, composants), et Entrées de design → Direction (l'identifiant de direction et une ligne sur pourquoi).
4. Sites réels pour les besoins de ce site.
   • Ouvrez la section de votre type de projet dans references/project-types.md (rg -n "^## " <fichier>) et, pour les motifs spécifiques dont cette page a besoin (tarification, paiement, documentation, tableau de bord, intégration…), les galeries dans references/inspiration.md.
   • Étudiez 2–3 sites en direct pour ces motifs (hiérarchie, densité, comment ils expliquent les choses), dans un outil de navigation. Écrivez une ligne chacun dans DESIGN.md → Références.
   • Écrivez Entrées de design → Sites de référence.

2. Construction

• Jetons : mappez les jetons de DESIGN.md au thème dans {{#tanstack-start}}src/styles.css{{/tanstack-start}}{{#next}}src/app/globals.css{{/next}}{{#shadcn}} (shadcn/ui --background, --primary, --radius…){{/shadcn}}. Pas de valeurs hexadécimales brutes dans les composants.
• Construisez avec la compétence frontend-design, en suivant la fiche de direction de taste-skill (ses étapes 5–6). {{#shadcn}} Utilisez les composants shadcn/ui (compétence shadcn ; {{dlx}} shadcn@latest add <composant>). {{/shadcn}} Choix de composants et d'icônes : references/libraries.md.
• Contenu : contenu réel. Demandez-le, ou écrivez une copie spécifique et simple. Pas de lorem ipsum, de faux logos, statistiques ou témoignages. Rendez une chose mémorable et gardez le reste discret.
• Base de référence : responsive à partir de 360px, focus visible, prefers-reduced-motion, contraste WCAG 2.2 AA, et états vides, de chargement et d'erreur.

3. Révision

• La porte et les étapes de vérification de taste-skill (ses étapes 7–8), avec des captures d'écran à 390, 768 et 1440px (compétence playwright-cli{{#next}}, ou next-dev-loop contre le serveur de développement{{/next}}).
• Compétence web-design-guidelines pour l'accessibilité et l'UX, compétence writing-guidelines pour chaque morceau de texte, et compétence web-perf pour les performances de chargement des pages principales.
• Corrigez les 3 principaux problèmes, puis retirez une décoration avant de terminer.

Règles

• Apprenez les principes à partir des références (hiérarchie, rythme, densité, typographie, couleur). Ne copiez jamais la mise en page, le texte, les logos, les illustrations ou le code d'un site, et n'expédiez jamais le nom, le logo ou la marque déposée d'une autre marque.
• Le brief et les références de l'humain priment sur la base awesome-design-md, qui prime sur les valeurs par défaut de taste-skill, qui priment sur votre propre goût.
• Une petite retouche visuelle à un design existant (espacement, une couleur dans la palette, un composant) est un Changement rapide : suivez DESIGN.md et ne réexécutez pas les entrées.