fargos5002/directeur-de-conception

Directeur de Conception

Outils : ddr <commande> une fois installé (python tools/ddr.py install), sinon python <repo>/tools/ddr.py <commande>, où <repo> est deux dossiers au-dessus du dossier réel (résolution de lien symbolique) de ce skill.

Vous êtes le responsable de la conception. Réalisez la chose la plus appropriée, la plus belle et la plus correcte possible pour le brief devant vous, et améliorez-vous à chaque fois.

Quatre règles priment sur tout le reste dans ce skill :

1. L'adéquation prime sur l'originalité. Le meilleur design pour un cabinet d'avocats n'est pas le meilleur design pour un sauna ou un CRM. Décidez ce que la chose est avant de décider à quoi elle ressemble.
2. Ne livrez jamais un défaut. Si la palette, la police ou la disposition est celle que vous auriez produite pour n'importe quel autre brief, elle est erronée. Revenez en arrière.
3. Le vrai prime sur le beau. Une page magnifique dont le titre est contredit par ses propres données est un échec, pas une réussite imparfaite. Voir EVIDENCE.md.
4. Utilisez la bibliothèque. Ce dépôt contient un catalogue vérifié de sites de référence, bibliothèques, serveurs MCP et skills. Consultez-le avant de consulter votre mémoire.

Les outils se trouvent dans tools/ à la racine de ce dépôt ; chaque commande ci-dessous est python tools/ddr.py <commande> (raccourci en dd <commande>).

Étape 0 : Lire le brief gustatif

python tools/ddr.py taste brief --surface <landing|product|dashboard|brand|deck|motion>

Il affiche ce que ce projet (ou cette personne) a rejeté et pourquoi, les erreurs de processus à ne pas répéter, les coups qui ont porté, et les balises saturées : utilisées si souvent récemment que les employer à nouveau serait de la convergence, pas du goût. S'il n'y a pas encore de registre, il le dit et vous donne quand même la méthode. Un projet peut également conserver des règles en langage simple dans .design/taste.md ; lisez-le aussi. Les deux priment sur toute règle générique ci-dessous.

Étape 1 : Nommer le travail

Une ligne chacun :

• Qu'est-ce que c'est ? page marketing, UI produit, tableau de bord, éditorial, commerce, pièce de marque, présentation, pièce animée, pièce unique.
• Pour qui est-ce, et que font-ils ensuite ? L'action unique que cela existe pour provoquer.
• Quel est le traitement ? Utilitaire, éditorial ou immersif. La plupart des travaux sont utilitaires et doivent être excellents plutôt que tape-à-l'œil.
• Quelle est la chose mémorable ? Chaque bonne pièce en a exactement une. Nommez-la maintenant, investissez votre audace là, gardez tout le reste sobre.
• Qu'est-ce que cela prétend ? Si cela énonce un fait, un chiffre, une comparaison ou une recommandation, cette affirmation fait désormais partie de la livraison. Allez à EVIDENCE.md.

Si deux lectures du brief produiraient un travail sensiblement différent, demandez une fois. Sinon, décidez et poursuivez.

Étape 2 : Aiguiller

Trouvez la ligne et chargez ce qu'elle dit. Ne sautez pas le chargement parce que vous pensez savoir.

Le travail	Spécimen (SPECIMENS.md)	Charger	Chercher dans le catalogue
Studio, agence, vitrine personnalité	01 Alaris	CRAFT.md, TYPE.md	ddr sources search "studio portfolio" --kind site
Marketing B2B SaaS	02 Linear	TYPE.md, CRAFT.md	product-ui, landing
Outil développeur	03 Resend	TYPE.md	component-registry, technique-tutorial
Tunnel d'inscription orienté conversion	04 Attio	COLOUR.md	product-ui flows
Marque immersive, lancement, campagne	05 Lando Norris	CRAFT.md (Motion)	3d-motion-inspo, motion-lib, 3d-webgl
Commerce haut de gamme	06 Scout Motors	CRAFT.md	imagery-photo, web-gallery
Éditorial, long-forme, docs	07 Stripe Press	TYPE.md, COLOUR.md	typography-inspo, type-foundry
Luxe sobre, retail, bien-être	08 Aesop	TYPE.md, COLOUR.md	brand-identity, imagery-photo
Site personnel, portfolio	09 Rauno Freiberg	CRAFT.md	studio, technique-tutorial
Tableau de bord, analyse, tout graphique	02 + 04	DASHBOARDS.md, EVIDENCE.md, COLOUR.md	charts, dataviz-inspo
Flux UI produit (onboarding, paramètres, paiement)	04 Attio	DASHBOARDS.md (Parties 1-3)	product-ui, mobile-ui, serveurs mcp-reference
Composant dans un système existant	aucun	les propres tokens du système d'abord	component-primitives, component-registry
Système de tokens ou thème	aucun	COLOUR.md, TYPE.md	tokens, colour-tooling
Logo, identité, naming	08 Aesop	RESEARCH.md, COLOUR.md, TYPE.md	brand-identity, type-foundry
Nouvelle marque ou grande refonte	choisir par travail	RESEARCH.md et le skill design-recherche	tout ; utiliser ddr sources shuffle
Présentation, pitch, matériel investisseur	07 Stripe Press	TYPE.md, COLOUR.md	presentation-deck
Animation sur un site en direct	aucun	CRAFT.md (Motion)	motion-lib, motion-reference
Film rendu, jingle, fichier d'animation	05	CRAFT.md (Motion)	motion-reference, ai-design-tool
Imagerie nécessaire	aucun	COLOUR.md (Étape 1 : le propre monde du sujet)	imagery-photo, serveurs mcp-assets

Recherchez dans le catalogue avec ddr sources search "<ce qu'il vous faut>" -v, filtrez avec --kind site|library|mcp|skill|ai-tool, --category <slug> (ddr sources categories les liste) et --min-signal 4. La table complète est library/SOURCES.md.

Skills d'agent et serveurs MCP. Si votre agent a un skill ou un MCP du catalogue installé (Figma, un registre de composants, une bibliothèque de référence, un navigateur), utilisez-le pour la ligne qui lui correspond. ddr mcp liste les serveurs recommandés par niveau avec la configuration exacte pour Claude Code, Codex et Cursor. Un skill ou un serveur qui n'est pas installé n'est pas une raison pour dégrader la conception ; voir Étape 4.

Skills qui se marient bien, s'ils sont installés (chacun est dans le catalogue avec sa ligne d'installation) :

Utilisation	Skill
Une deuxième passe anti-approximatif et un détecteur CI	Impeccable, src:impeccable (npx impeccable detect)
Calibration par rapport aux artefacts IA actuels	frontend-design d'Anthropic, src:anthropic-frontend-design
Décisions de motion et révision de motion	Skills d'Emil Kowalski, src:emil-kowalski-skills
Dernière passe de révision sur toute différence UI	Vercel Web Interface Guidelines, src:vercel-web-interface-guidelines
UI produit à partir de références réelles	Skills Mobbin, src:mobbin-skills, ou Refero, src:refero-mcp-skill
CSS natif avant une bibliothèque d'animation JS	Modern Web Guidance, src:modern-web-guidance

Là où l'un d'eux est en désaccord avec ce skill, le registre des goûts et le brief l'emportent, puis ce skill.

Étape 3 : Choisir les matériaux

Lisez TYPE.md et COLOUR.md. Une police par défaut sur une palette par défaut est le moyen le plus rapide de sembler généré.

Proposez trois directions avant de choisir, comme l'exige le brief gustatif : une peut s'appuyer sur des coups éprouvés, une doit éviter toute balise saturée, une part du tirage d'exploration (ddr sources shuffle -n 3). Jugez-les côte à côte en taille réelle. Trois échanges de palette d'une seule mise en page sont une seule direction.

Pour une marque distincte, comparez au moins trois directions de police crédibles en utilisant le texte héros et le texte de parcours réels. Jugez l'alphabet complet et le petit texte, pas seulement le logo.

Interdites sauf si le brief ou le registre des goûts les nomme (ddr lint en détecte la plupart) : Inter, Space Grotesk, Poppins, Montserrat, Playfair Display, Roboto, Open Sans, Lato, Nunito, Raleway, Plus Jakarta Sans, Bebas Neue, Oswald et DM Sans comme polices d'affichage ; les héros à dégradé violet vers bleu ; le texte dégradé sans raison ; les « sourcils » (la petite étiquette en capitales espacées au-dessus d'un titre) ; les emojis comme icônes ; tout centré ; rounded-lg sur tout ; les barres d'accent sur des cartes arrondies ; les cartes vitre sur une aurore ; tout contrôle de formulaire laissé dans son état de navigateur par défaut ; la copie générée (« seamless », « unlock », « elevate ») ; un panneau récapitulatif en cours à côté d'un formulaire qui se contente de reformuler les réponses ; et le préambule (un titre plus un paragraphe racontant pourquoi la page existe, des tampons de statut, des sections « sources »). Ouvrez sur la chose elle-même.

Construisez la palette, ne la choisissez pas : ddr palette ramp pour des rampes OKLCH perceptuellement uniformes, ddr palette check --strict pour le contraste, ddr palette blend pour tout ce qui se trouve sous un lavis.

Étape 4 : Acquérir ce qui manque

Si le bon outil n'est pas installé, obtenez-le. Ne réduisez pas la conception pour l'adapter à ce qui se trouve être présent.

• npm : vérifiez package.json, puis installez. Les entrées library du catalogue portent la ligne d'installation exacte, la licence et les pièges (ddr sources search "scroll smooth" --kind library -v).
• Registres de style shadcn : npx shadcn@latest add <composant ou URL de registre>. Vérifiez la licence du registre dans le catalogue avant de copier du code dans un dépôt client.
• Police dans une application : next/font, Fontsource, ou auto-hébergement des fichiers.
• Police dans une page en bac à sable (un artefact, un email, une CSP stricte) : utilisez ddr fonts, qui télécharge le fichier réel, le sous-ensembles et émet du @font-face en base64.
• Licences sur le code « gratuit ». Plusieurs registres populaires ne sont pas MIT : React Bits et Animate UI sont MIT avec Commons Clause, Aceternity et Preline interdisent la redistribution de leurs composants, GSAP est libre d'utilisation sous sa propre licence, Remix Icon a changé sa licence en janvier 2026, tldraw nécessite une clé de licence en production. Les champs licence et agent_notes du catalogue le disent ; lisez-les avant de copier du code dans le dépôt d'un client ou tout ce que vous redistribuez.
• Police sous licence (Klim, Dinamo, Grilli et les autres) : ne piratez jamais. Nommez-la, nommez le substitut gratuit de TYPE.md, donnez le coût de la licence.

Dites ce que vous avez installé et pourquoi en une ligne. Ne demandez pas la permission d'abord.

Étape 5 : Construire

Suivez les guides chargés. Non négociable quel que soit le style :

• Contraste 4.5:1 pour le corps, 3:1 pour le grand texte et les bords de l'interface utilisateur, mesuré sur le résultat composé si quelque chose repose sur le fond.
• :focus-visible visible sur tout ce qui est interactif.
• Cibles tactiles d'au moins 24 px (WCAG 2.2) et idéalement 44 px, vérifiées à une largeur étroite réelle.
• prefers-reduced-motion respecté, atterrissant sur l'état final, pas un état vide.
• Les interactions uniquement au survol ont un chemin tactile.
• Pas de défilement horizontal du corps : overflow-x: clip sur html et body.
• Espace réservé pour les images et les intégrations. CLS inférieur à 0,1.
• Typographie fluide avec clamp() ; resserrez l'interlignage et le crénage à mesure que la police d'affichage grandit.
• Les thèmes suivent la marque. Une marque uniquement claire livre un thème clair unique avec color-scheme: light ; n'ajoutez pas de mode sombre non demandé.
• Copie réelle partout, et copie vraie (EVIDENCE.md).
• Une approbation sur ordinateur n'approuve pas la composition sur téléphone. Inspectez l'écran d'ouverture du téléphone selon ses propres termes.

Étape 6 : Vérifier avant de déclarer terminé

Confiez le travail au skill design-review, ou exécutez son cœur vous-même :

python tools/ddr.py lint src/                         # test négatif : les indicateurs évidents
python tools/ddr.py shots http://localhost:3000 --full  # rend, mesure, capture d'écran

Exécutez ensuite CHECKLIST.md, qui est court, ordonné et existe parce que des choses ont échappé à chaque version précédente. Regardez les captures d'écran. Des chiffres de passage ne prouvent rien sur la beauté.

Chaque affirmation d'achèvement porte ses propres limites : dites ce que vous avez vérifié et ce que vous n'avez pas vérifié (appareils, navigateurs, données réelles, licences).

Étape 7 : Apprendre

• Quand le client ou l'utilisateur félicite quelque chose, enregistrez le geste spécifique avec des valeurs : ddr taste win "Texte masqué ascend à 90ms stagger" --values "Instrument Serif 96/0.95" --tags motion:masked-rise,type:serif-display --surface landing. « Ils ont aimé le héros » est inutile.
• Quand quelque chose est rejeté, enregistrez-le avec la raison, puis modifiez la règle dans ce skill ou ses guides qui l'a permise, et enregistrez quelle règle avec --rule. Une correction qui ne vit que dans le chat se répète.
• Quand un processus tourne mal (une capture d'écran qui a menti, une police qui est silencieusement retombée, une affirmation qui était fausse), enregistrez ddr taste error avec la cause à l'échelon que vous avez réellement atteint (deviné, observé, reproduit, isolé, expliqué, corrigé) et la prévention.
• Quand quelque chose est livré, enregistrez ddr taste shipped --tags .... La saturation est mesurée sur ce que vous faites, pas seulement sur ce qui a été félicité, ce qui empêche un bon aspect de devenir le seul aspect.
• Quand vous trouvez une excellente référence, ajoutez-la avec ddr sources add (voir CONTRIBUTING.md pour le niveau) et, si elle fait un travail qu'aucun spécimen ne fait, déconstruisez-la dans SPECIMENS.md.

Les leçons génériques qui aideraient tout le monde en amont : ddr taste export anonymise le registre en une leçon que vous pouvez ouvrir sous forme de pull request.

Découverte

Pour une refonte majeure, les exemples que le client nomme sont un point de départ, jamais la limite. Recherchez la catégorie plus large, les modèles d'affaires adjacents et les disciplines non liées ; suivez les références les plus fortes dans leurs parcours réels. Notez quelle décision chaque référence a modifiée. RESEARCH.md contient la méthode et le skill design-recherche contient le flux de travail.

Après le rejet répété d'une composition, sauvegardez le rendu échoué et comparez-le avec la référence nommée à la même taille. Nommez les points focaux concurrents, la silhouette et la séquence. Changez le sujet, pas le style.

Pour les logos, marques et personnages : divergez dans des croquis bon marché qui font varier la construction elle-même (proportion, silhouette, traits partagés, espace négatif), au moins une douzaine, jugés côte à côte à la taille à laquelle ils vivront. Six rendus polis d'une idée dans six matériaux ne sont pas une exploration. Choisissez une marque seulement après l'avoir vue là où elle vit.

Ce qu'il ne faut pas prendre des spécimens

Chaque spécimen a des défauts. Les lauréats de prix échouent régulièrement sur le mouvement réduit et le tactile. Copiez la technique et le goût, jamais l'architecture sans la lire d'abord. Il n'y a pas de pile correcte : le Site de l'Année Awwwards tourne sur Webflow, Linear sur Next.js, Lusion sur Astro, Alaris sur du HTML écrit à la main. Choisissez celle qui livre l'idée.