Loi de fer

AUCUNE SORTIE D'INTERFACE SANS AVOIR TERMINÉ LA PHASE DE DESIGN THINKING — définir l'Objectif, le Ton (une seule direction) et l'Ancre de différenciation avant d'écrire une seule ligne de code. Le score DFII doit être ≥ 8 pour continuer.

Compétence de Conception Frontend

Objectif

Fournit une méthodologie de conception frontend créative, des principes visuels et des listes de contrôle qualité pour construire des interfaces distinctives et de qualité production qui évitent l'esthétique générique de l'IA.

Processus

Phase de Design Thinking (obligatoire — ne pas sauter)
- Définir l'Objectif : quelle action cette interface permet-elle ? Est-elle persuasive, fonctionnelle, exploratoire ou expressive ?
- Définir le Ton : choisir UNE direction dominante (Brutaliste / Éditoriale / Luxe / Rétro-futuriste / Industrielle / Organique / Ludique / Maximaliste / Minimaliste). Ne pas mélanger plus de deux tons.
- Définir l'Ancre de différenciation : répondre à « Si cette interface était capturée d'écran sans le logo, comment la reconnaîtrait-on ? » Celle-ci doit être visible dans l'interface finale.
Évaluer le DFII — calculer l'Indice de Faisabilité et d'Impact du Design (voir ci-dessous). Score < 8 → repenser l'orientation avant de continuer.
Charger les principes -- Lire reference/frontend-design-principles.md pour les conseils sur la typographie, la couleur, le mouvement et la mise en page.
Implémenter -- Écrire le code fonctionnel (Angular, Flutter ou HTML/CSS/JS) aligné sur l'esthétique choisie. Suivre les jetons de design de l'espace de travail (daisyUI pour Angular, AppSpacing/colorScheme pour Flutter).
Livrer avec la structure de livraison requise -- inclure le Résumé de l'orientation design, l'Aperçu du système de design, l'Implémentation et la Mise en avant de la différenciation.

Pour les principes de design complets, les anti-patrons et la liste de contrôle qualité :

Lire reference/frontend-design-principles.md

Gestion des erreurs

Si le framework cible n'est pas spécifié, demander à l'utilisateur avant de continuer. Si les ressources de polices ou d'actifs externes ne sont pas disponibles, documenter le choix de repli et continuer.

Indice de Faisabilité et d'Impact du Design (DFII)

Évaluer l'orientation du design avant d'écrire du code. Un score minimum de 8 est requis pour continuer.

Dimensions (chacune notée de 1 à 5)

Dimension	Question
Impact esthétique	Quelle est la distinction visuelle et la mémorabilité de cette direction ?
Adéquation au contexte	Cette esthétique convient-elle au produit, au public et à l'objectif ?
Faisabilité d'implémentation	Peut-elle être construite proprement avec la technologie disponible ?
Sécurité des performances	Restera-t-elle rapide et accessible ?
Risque de cohérence	Peut-elle être maintenue sur plusieurs écrans/composants ? (soustraire ceci)

Formule

DFII = (Impact + Adéquation + Faisabilité + Performance) − Risque de cohérence
Plage : −5 → +15

Interprétation

DFII	Signification	Action
12–15	Excellent	Exécuter pleinement
8–11	Fort	Continuer avec discipline
4–7	Risqué	Réduire le périmètre ou les effets
≤ 3	Faible	Repenser l'orientation esthétique

Structure de livraison requise

Chaque livrable de conception frontend DOIT inclure les quatre sections :

1. Résumé de l'orientation design

Nom de l'esthétique (ex. « Brutalisme éditorial », « Minimalisme luxueux »)
Score DFII
Inspiration clé (conceptuelle — pas de plagiat visuel)

2. Aperçu du système de design

Polices (avec justification — pourquoi cette police pour ce produit ?)
Variables de couleur (les nommer : --color-primary, --color-accent, --color-neutral)
Rythme d'espacement (unité de base et échelle)
Philosophie du mouvement (rare/intentionnel ? ou aucun ?)

3. Implémentation

Code fonctionnel complet
Commentaires uniquement là où l'intention n'est pas évidente
Pour Angular : utiliser les jetons sémantiques daisyUI (bg-primary, text-base-content) — pas de hexadécimal en dur
Pour Flutter : utiliser Theme.of(context).colorScheme et les jetons AppSpacing.* — pas de Color(0xFF...)

4. Mise en avant de la différenciation

Énoncer explicitement :

« Cela évite une interface générique en faisant X au lieu de Y. »

Si vous ne pouvez pas compléter cette phrase, le design n'est pas assez distinctif.

Checklist opérateur (Porte de pré-livraison)

Mandat d'ambition créative

Claude est capable d'un travail créatif extraordinaire. Ne vous retenez pas — montrez ce qui peut vraiment être créé en pensant hors des sentiers battus et en vous engageant pleinement dans une vision distinctive.

Interprétez les exigences de manière créative. Faites des choix inattendus qui semblent vraiment conçus pour le contexte. Aucun design ne devrait partager le même ADN esthétique.

NE JAMAIS converger vers des choix communs d'une génération à l'autre. Le fait que Space Grotesk, les dégradés violets ou les mises en page symétriques « aient fonctionné avant » est précisément la raison pour ne pas les réutiliser. La variété est obligatoire, pas optionnelle.

Questions à poser avant de commencer (si nécessaire)

À qui cela s'adresse-t-il, émotionnellement ?
Cela doit-il sembler digne de confiance, excitant, calme ou provocateur ?
La mémorabilité ou la clarté est-elle plus importante ?
Cela s'adaptera-t-il à d'autres pages/composants ?
Que devraient ressentir les utilisateurs dans les 3 premières secondes ?

Intégration dans l'espace de travail

Stack	Règle de jeton de design	Référence
Angular	Jetons sémantiques daisyUI uniquement — `bg-primary`, `text-base-content`, `border-base-300`	`angular-spa/reference/daisyui-v5-components.md`
Flutter	`Theme.of(context).colorScheme.` + `AppSpacing.` — jamais `Color(0xFF...)` ou `EdgeInsets.all(16)`	`ui-standards-tokens/reference/ui-design-tokens.md`
HTML/CSS	Variables CSS exclusivement — `var(--color-primary)`	Définir dans le bloc `:root`
React Native	Hors du périmètre de cette compétence → utiliser la compétence `mobile-developer`	`.claude/skills/mobile-developer/SKILL.md`

Compétences associées :

web-design-guidelines — exécuter après l'implémentation pour auditer selon les directives d'interface web Vercel
design-system — application de la conformité des jetons pour Angular et Flutter
angular-spa — patrons d'implémentation Angular avec daisyUI
ui-standards-tokens — définitions des jetons de design Flutter

kumaran-is/claude-code-onboarding

Qu'est-ce que claude-code-onboarding ?

Demander à votre IA préférée

Documentation