Expert en Design Web

Designer web expert créant des systèmes visuels distinctifs pour les applications web.

Points de Décision

Sélection de l'Approche de Mise en Page

SI contenu-textuel lourd (blog, documentation, plateforme d'apprentissage)
├─ Système de grille à 12 colonnes
├─ Haute densité de texte avec hiérarchie claire
└─ Gouttières cohérentes pour la lisibilité

SI axé marketing/conversion (SaaS, landing page e-commerce)
├─ Design centré sur la section hero
├─ Mises en page asymétriques autorisées pour l'impact
└─ Grands espaces blancs pour guider l'attention

SI e-commerce/catalogue lourd
├─ Grille CSS auto-fit pour les produits
├─ Mises en page basées sur des cartes
└─ Importance du filtre/recherche

SI interface tableau de bord/application
├─ Barre latérale + contenu principal
├─ Densité des données priorisée
└─ Navigation toujours accessible

SI style éditorial/magazine
├─ Systèmes de grille mixtes
├─ Grandes images avec citations mises en avant
└─ Variété visuelle plutôt que cohérence

Stratégie de Palette de Couleurs

SI public B2B/Entreprise
├─ Bleu comme couleur primaire (confiance, professionnalisme)
├─ Palette majoritairement neutre
└─ Couleurs d'accent minimales

SI marque Grand Public/Lifestyle
├─ Couleurs primaires plus chaudes (orange, vert, violet)
├─ Options d'accent saisonnières
└─ Choix guidés par l'émotion

SI site à fort trafic/critique pour l'accessibilité
├─ Contraste minimum de 4,5:1 imposé
├─ Combinaisons testées pour le daltonisme
└─ Variantes en mode sombre requises

Arbre de Décision de Hiérarchie Visuelle

SI objectif utilisateur = action immédiate (inscription, achat)
├─ CTA dans la zone hero au-dessus de la ligne de flottaison (obligatoire)
├─ Action principale unique par page
└─ Poids visuel sur les éléments de conversion

SI objectif utilisateur = consommation de contenu
├─ Aperçu/résumé du contenu en premier
├─ Plusieurs chemins d'engagement acceptables
└─ Expérience de lecture optimisée

SI objectif utilisateur = exploration (portfolio, catalogue)
├─ Mise en page grille/galerie comme principale
├─ Optimisé pour un balayage rapide
└─ Flux miniature → détail

Modes d'Échec

Syndrome du Comité de Design

Symptômes : Plusieurs styles visuels sur la même page, messages de marque conflictuels, aucun système de design clair
Règle de Détection : Si vous voyez 3 styles de boutons ou familles de polices différents sur une page
Correctif : Établir un document de principes de design, imposer une source de vérité unique, obtenir l'adhésion des parties prenantes sur les contraintes

Décoration au Détriment de la Fonction

Symptômes : Animations sans but, éléments visuels qui n'aident pas la compréhension, chargement lent dû aux graphiques
Règle de Détection : Si vous ne pouvez pas expliquer comment chaque élément visuel aide l'utilisateur à atteindre son objectif
Correctif : Supprimer les éléments qui ne servent pas les besoins utilisateur, justifier chaque animation par un avantage utilisateur

Mobile en Second Plan

Symptômes : Défilement horizontal sur mobile, cibles tactiles minuscules, navigation de bureau sur petits écrans
Règle de Détection : Si la version mobile nécessite un zoom ou un défilement horizontal pour être utilisée
Correctif : Commencer par le mobile, tester sur des appareils réels, garantir des cibles tactiles minimales de 44 px

Échec d'Accessibilité par Faible Contraste

Symptômes : Texte gris clair (#999) sur blanc, mauvaise lisibilité à la lumière du soleil, plaintes des utilisateurs sur la visibilité du texte
Règle de Détection : Si un texte échoue au rapport de contraste WCAG 4,5:1 lorsqu'il est testé
Correctif : Utiliser des outils de vérification de contraste, tester dans des conditions de lumière vive, proposer une option de mode haut contraste

Effondrement de l'Architecture de l'Information

Symptômes : Les utilisateurs ne trouvent pas le contenu principal, la navigation ne correspond pas aux modèles mentaux, taux de rebond élevés
Règle de Détection : Si les utilisateurs ne peuvent pas accomplir la tâche principale en 3 clics ou 30 secondes
Correctif : Cartographie du parcours utilisateur, tri par cartes pour la navigation, mise en avant des actions clés

Exemples Concrets

Exemple 1 : Refonte de Tableau de Bord SaaS

Contexte : Plateforme d'analyse B2B, utilisateurs passant 2+ heures par jour dans l'interface

Processus de Décision :

Analyse du Public : Utilisateurs experts qui privilégient l'efficacité à l'esthétique
Choix de Mise en Page : Navigation par barre latérale (toujours accessible) + zone de contenu principal
Stratégie de Couleurs : Bleu primaire (#2563eb) pour la confiance, accents minimaux pour réduire la charge cognitive
Hiérarchie : Les tableaux de données obtiennent le plus d'espace, les actions sont secondaires mais accessibles

Décisions de Design Clés :

Affichage dense de l'information (échelle d'espacement 8 px)
Texte à contraste élevé (#1f2937 sur #ffffff)
Taille de bouton cohérente (40 px de hauteur pour un clic facile)
Indicateurs d'état utilisant des couleurs sémantiques (vert = bon, rouge = alerte)

Validation des Résultats :

Amélioration de 23 % de l'accomplissement des tâches
« Facilité d'utilisation » rapportée par les utilisateurs en augmentation
Tickets de support concernant la navigation en baisse de 40 %

Exemple 2 : Page Produit E-commerce

Contexte : Détaillant de mode, public mobile-first (70 % du trafic mobile)

Processus de Décision :

Schéma de Trafic : Navigateurs mobiles, décideurs rapides
Choix de Mise en Page : Une colonne sur mobile, deux colonnes sur bureau
Priorité Visuelle : Images produit > prix > avis > spécifications
Éléments de Conversion : Ajouter au panier collant sur mobile, visible mais pas insistant

Décisions de Design Clés :

L'image hero du produit remplit la largeur de l'écran sur mobile
Prix en typographie large et grasse immédiatement visible
Résumé des avis au-dessus des détails du produit
Sélecteurs de taille/couleur avec retour visuel immédiat

Approche Novice vs Expert :

Le novice ferait : Mettre toutes les informations produit au-dessus de la ligne de flottaison, utiliser de petites images produit
L'expert détecte : Les utilisateurs ont besoin de grandes images pour évaluer la mode, le public soucieux du prix a besoin d'avis de validation tôt

Résultats Mesurables :

Taux de conversion mobile augmenté de 31 %
Durée moyenne de session augmentée (les utilisateurs explorent plus de produits)
Abandon de panier diminué de 18 %

Portes de Qualité

Validation d'un Plan de Design

Indiquez la conformité du design aux Portes de Qualité sous forme de plan structuré (voir schemas/design-plan.schema.json) et vérifiez-le de manière déterministe au lieu d'estimer une maquette :

node scripts/design_audit.mjs --input plan.json

L'auditeur renvoie { pass, score, findings, recommendations } et signale les cinq modes d'échec ci-dessus par leur nom : design-by-committee (trop de styles de boutons/poids de polices/tailles), decoration-over-function, mobile-afterthought (défilement horizontal à 320 px ou cibles tactiles inférieures à 44 px), low-contrast (inférieur à 4,5:1), et information-architecture collapse (navigation qui ne correspond pas au modèle mental de l'utilisateur). Voir examples/expected-output.md pour un exemple de passage et d'échec côte à côte.

Références

Fichier	Charger Quand
`references/layout-systems.md`	Besoin de l'arbre de décision de grille, de l'échelle d'espacement 8 px, des points de rupture responsives, ou des listes de contrôle mobile-first/cohérence.
`references/color-accessibility.md`	Besoin de la palette minimale viable, du tableau de psychologie des couleurs, des conseils pour le mode sombre, ou de la liste de contrôle WCAG 2.1 AA.
`references/tooling-integration.md`	Besoin d'utiliser les outils 21st.dev ou Figma MCP pour passer de la direction de design au code.
`templates/output-template.md`	Besoin d'un modèle de plan de design réutilisable à remplir avant l'audit.
`examples/expected-output.md`	Besoin de la forme d'un audit de plan de design finalisé, à la fois réussi et échoué.
`schemas/design-plan.schema.json`	Besoin de valider la structure d'un plan de design par programmation.
`scripts/design_audit.mjs`	Besoin d'une notation déterministe d'un plan de design par rapport aux Portes de Qualité et aux modes d'échec nommés.
`agents/openai.yaml`	Besoin d'un descripteur de sous-agent pour la génération déléguée de plans de design.

Limites NE-PAS-FAIRE

N'utilisez PAS ce skill pour :

Décisions approfondies de typographie (calculs d'interlignage, espacement des caractères) → utiliser typography-expert
Mathématiques de la théorie des couleurs ou génération de palettes → utiliser color-theory-palette-harmony-expert
Architecture des tokens de système de design ou variables CSS → utiliser design-system-creator
Styles de design rétro ou historiques → utiliser windows-3-1-web-designer
Conception d'interface d'application mobile native → déléguer à native-app-designer
Audits d'accessibilité détaillés → utiliser accessibility-expert
Spécifications d'animations et micro-interactions → utiliser motion-design-expert

Indices de limite :

Si l'utilisateur demande des recommandations spécifiques d'associations de polices → typography-expert
Si l'utilisateur a besoin de calculs de couleurs HSL → color-theory-expert
Si l'utilisateur demande des conseils d'architecture CSS → design-system-creator
Si l'utilisateur a besoin d'une liste de contrôle de conformité WCAG → accessibility-expert

Passerelle QA de mise en page (mécanique — à exécuter avant livraison)

Avant de considérer une page rendue, un artefact, un tableau de bord, une présentation ou un composant comme terminé, exécutez le vérificateur mécanique de débordement/collision. Il rend la page sans tête et signale les collisions texte-texte, les éléments tronqués/ellipsis, le texte s'échappant de son conteneur, et le défilement horizontal de la page — les défauts visuels qu'une capture d'écran cache et qui n'apparaissent qu'à une largeur spécifique ou dans un thème.

Résolvez layout-overflow-guard à partir du catalogue de skills actif avant de l'exécuter. La commande ci-dessous montre le chemin d'installation standard de Claude ; utilisez le chemin rapporté par votre environnement. Si le skill est absent, installez-le ou synchronisez-le au lieu de sauter cette passerelle.

python3 ~/.claude/skills/layout-overflow-guard/scripts/check_layout.py <file-or-url> \
  --widths 1280,1100,860,720,390 --themes light,dark

Vous n'avez pas besoin de lire check_layout.py — invoquez-le avec l'outil Bash et agissez sur son rapport et son code de sortie (non nul = un défaut). Le source du script n'entre jamais dans votre contexte ; seuls ses résultats le font. Conduisez-le à zéro violations sur chaque largeur et les deux thèmes avant de livrer. Détail complet : le skill layout-overflow-guard.

Index du Bundle de Skills

Chaque fichier de ce skill, et quand l'ouvrir. Généré automatiquement ; exécutez scripts/index_references.py --fix.

racine

CHANGELOG.md — Journal des modifications — Tous les changements notables apportés au skill web-design-expert seront documentés dans ce fichier.
README.md — Expert en Design Web — Crée des systèmes visuels web uniques : identité de marque, palettes de couleurs, composition de mise en page et motifs UI responsives pour applications web.

agents/

agents/openai.yaml — openai (données/schéma)

examples/

examples/expected-output.md — Exemple de Sortie : Audit de Plan de Design Web — Scénario : un redesign de site marketing SaaS a été spécifié comme un plan de design structuré (correspondant à schemas/design-plan.schema.json) et est
examples/sample-input.json — exemple d'entrée (données/schéma)

references/

references/color-accessibility.md — Couleur et Accessibilité — Palettes de couleurs, psychologie, mode sombre et conformité WCAG.
references/layout-systems.md — Systèmes de Mise en Page — Systèmes de grille, échelles d'espacement et composition de mise en page.
references/tooling-integration.md — Intégration d'Outils de Design — 21st.dev, Figma MCP et workflows de composants.

schemas/

schemas/design-plan.schema.json — schéma de plan de design (données/schéma)

scripts/

scripts/design_audit.mjs

templates/

templates/output-template.md — Modèle de Plan de Design Web — [Description en une phrase du produit/page que ce plan de design couvre.] Notes de terrain : - primaryActionObviousWithin3s — vrai seulement si un

curiositech/port-daddy

Qu'est-ce que port-daddy ?

Demander à votre IA préférée

Documentation