imagile-dev/design

Que fait design ?

Créez des interfaces qui paraissent choisies, pas générées. Chaque valeur par défaut est une décision que quelqu'un a ignorée. Ce skill prend chaque décision intentionnellement : un brief d'abord, une construction jusqu'à un socle de qualité, puis une critique de captures d'écran réelles.

Deux modes d'échec, dont le premier est le pire :

1. Générique. La page pourrait appartenir à n'importe quel produit de sa catégorie. Elle porte les valeurs par défaut actuelles de l'IA, ou elle est si plate que personne ne s'en souvient.
2. Bruyant. Chaque élément performe. Le mouvement, les dégradés et les ornements rivalisent, et rien ne se lit en premier.

Le remède aux deux est une seule idée forte, exprimée à un seul endroit, à l'intérieur d'un système discipliné. La retenue n'est pas le but. L'intention l'est.

1. Choisir le mode

Mode	Quand l'utiliser	Faire
Construire	Une nouvelle page, écran, composant, présentation ou jeu d'images	Sections 2 à 5
Affiner	« Rends-le plus audacieux, plus calme, plus simple, plus coloré, plus vivant »	Section 6
Critiquer	« Revue ceci », « est-ce que ça a l'air correct », un score	references/critique.md
Polir	Avant de livrer quoi que ce soit de visuel	Section 7

Affiner ne reconçoit jamais. Il conserve l'identité, le texte et tout ce qui est en dehors de la demande. Si la demande nécessite une reconception, dites-le et arrêtez-vous. Ne faites jamais de compromis entre les deux.

2. Charger le contexte d'abord

1. Lisez DESIGN.md à la racine du dépôt, le CLAUDE.md du dépôt, les tokens existants (global.css, tailwind.config.*, les fichiers de thème) et .claude/image-generation/style.md.
2. Le brief gagne. Quand DESIGN.md ou l'utilisateur impose un style, suivez-le exactement, même si le style figure sur la liste des indices. Les règles ci-dessous ne s'appliquent qu'aux choix que personne n'a encore faits.
3. Sans DESIGN.md, explorez le dépôt, puis posez au maximum trois questions sur des faits durables : qui l'utilise, ce qu'il doit accomplir et quelles preuves existent. Ne demandez jamais à quelqu'un de choisir une esthétique dans l'abstrait. Montrez plutôt deux ou trois options.
4. Écrivez ce que vous apprenez dans DESIGN.md à partir de references/design-md.md. La session suivante ne devrait pas avoir à redemander.
5. Une correction est une règle permanente. Lorsque l'utilisateur corrige un choix visuel, ajoutez une ligne à « Règles permanentes » dans DESIGN.md dans le même tour.
6. Utilisez uniquement les preuves disponibles. N'inventez jamais de témoignages, logos clients, nombres d'utilisateurs, métriques ou citations. Marquez les données fictives et listez-les pour que l'utilisateur les confirme.

3. Rédiger le brief (mode Construire)

Publiez un bref brief dans le chat avant d'écrire du code. Cela prend une minute et évite le résultat générique.

1. Lecture de design. Une ligne : « Je lis ceci comme un [support] pour [public], en mode [mode], penchant vers [direction]. »

2. Mode de support. Choisissez-en un par support, pas par produit. La page d'atterrissage d'un outil de développement reste Persuader.

   Mode	Supports	Expression	Variance / Mouvement / Densité
   Persuader	Page d'atterrissage, tarification, lancement, portfolio d'accueil	Une grande idée, imagerie réelle, un champ de couleur	7 / 6 / 3
   Opérer	Application, tableau de bord, paramètres, administration	Le système est le design. Pas de spectacle	3 / 2 / 7
   Lire	Documentation, articles, leçons	La typographie porte la page	3 / 2 / 5
   Expérience	Jeux, apprentissage ludique, enfants, événements	Personnages, mouvement ambiant, humour	8 / 8 / 4

   Les trois molettes vont de 1 à 10. La variance est symétrie à asymétrie marquée. Le mouvement est statique à cinématique. La densité est galerie à cockpit. Lisez les mots d'ambiance : « minimal » réduit variance et densité, « tape-à-l'œil » ou « vivant » augmente le mouvement, « dense » ou « pro » augmente la densité. Enregistrez les molettes dans DESIGN.md.

3. Phrase de scène. Qui l'utilise, où et dans quelle lumière. « Une infirmière de nuit vérifiant un planning sur un téléphone dans une salle de repos mal éclairée » décide du sombre ou du clair. Une étiquette de catégorie comme « outil de développement signifie sombre » ne le fait pas.

4. Phrase d'idée. « [Quelque chose que seul ce sujet possède] devient [un dispositif visuel]. » Ensuite, effectuez le test du concurrent : remplacez par le nom d'un concurrent. Si la phrase fonctionne toujours, l'idée est générique. Réécrivez-la.

5. Tokens. Quatre à six couleurs nommées et une stratégie de couleur (references/color.md). Les familles typographiques et leurs rôles (references/typography.md). Un concept de mise en page sous forme de phrase plus un wireframe ASCII. Le niveau de mouvement.

6. Argument (Persuader uniquement). Une affirmation par section, chacune avec sa preuve. Supprimez toute section sans affirmation. Ne par défaut pas sur hero, bande de logos, trois fonctionnalités, CTA.

7. Vérifiez-le par rapport aux indices. Pour chaque axe que le brief laisse libre, lisez references/tells.md. Demandez si le thème peut être deviné à partir de la seule catégorie, puis si le style peut être deviné à partir de la catégorie plus « pas le style habituel ». Si l'une des réponses est oui, révisez cette partie et dites ce qui a changé.

4. Construire jusqu'au socle

Dépensez l'audace à un seul endroit. Laissez un élément être la chose mémorable, gardez tout ce qui l'entoure calme, et coupez la décoration qui ne sert pas l'idée. Lorsque vous retirez un indice, remplissez l'espace avec quelque chose de réel : échelle, imagerie, contenu ou un champ de couleur. La suppression seule laisse une page mince et vide.

Le socle tient sur toutes les surfaces sans être annoncé :

• Jetons, pas littéraux. Les couleurs, la typographie, l'espacement, le rayon et le mouvement vivent sous forme de jetons sur :root. Le clair et le sombre proviennent de prefers-color-scheme, remplaçable avec data-theme. Un bouton de bascule, s'il est présent, gagne.
• Contraste. 4,5:1 pour le texte, 3:1 pour le texte grand, les icônes, les contrôles et les anneaux de focus. Jamais de texte gris sur fond coloré.
• Typographie. Au plus deux familles. Cinq tailles ou moins. Corps de texte 16px ou plus avec 45 à 75 caractères par ligne. Les titres tiennent en deux lignes à toutes les largeurs.
• Mobile d'abord. Fonctionne à partir de 320px avec une gouttière de 16px et aucun défilement horizontal. Les cibles tactiles font 44px. Les champs de saisie font 16px pour qu'iOS ne zoome pas. Ne désactivez jamais le zoom.
• États. Chaque contrôle a les états par défaut, survol, focus-visible, actif, désactivé, chargement, erreur et succès. Chaque région asynchrone a les états chargement, vide et erreur.
• Stabilité. Pas de changement de mise en page. Les panneaux animés ou asynchrones maintiennent une hauteur fixe. Les cartes dans une grille partagent une hauteur avec le pied de page épinglé.
• Ne jamais incliner quelque chose de cliquable. L'inclinaison est réservée aux tampons décoratifs et autocollants uniquement.
• Mouvement. Utile, interruptible, transform et opacity uniquement, et plus doux sous prefers-reduced-motion. Le contenu est visible sans JavaScript.
• Imagerie. Art réel ou généré dans un style cohérent. Les personnages et l'art décoratif sont livrés comme un découpage transparent, jamais une boîte sombre. Pas de texte intégré dans les images.
• Texte. Court, spécifique et écrit du côté de l'utilisateur. Les visuels battent les paragraphes.

Le détail se trouve dans les références. Lisez uniquement ce dont la tâche a besoin :

Fichier	Couvre
references/typography.md	Choisir les polices, l'échelle, la mesure, la typographie d'affichage, le chargement
references/color.md	Stratégie de couleur, jetons OKLCH, mode sombre, contraste
references/layout.md	Espace, cadre, grilles, hiérarchie, responsive et tactile
references/motion.md	Animer ou non, assouplissements, durées, performance, mouvement réduit
references/interaction.md	États, formulaires, données dans le pire cas, vitesse perçue
references/copy.md	Rédaction UX, erreurs, états vides, contenu honnête
references/imagery.md	Direction artistique, art généré, photos, icônes
references/decks.md	Diaporamas et présentations
references/tells.md	La liste datée des valeurs par défaut du design généré

5. Regardez-le

La revue de code n'est pas une revue de design. Rendez-le et regardez-le.

1. Lancez la page et capturez des captures d'écran à 375px et 1440px, plus 768px pour les mises en page qui changent là. Capturez le clair et le sombre quand les deux existent. Utilisez playwright-cli, le panneau du navigateur ou tout outil navigateur dont la session dispose.
2. Plissez les yeux sur chaque capture d'écran. L'élément principal, l'élément secondaire et les groupes devraient encore se lire dans cet ordre.
3. Recherchez les collisions : chevauchements, bannières rognées, texte qui se répartit là où il ne devrait pas, icônes mal alignées, grilles inégales, une rangée de 3 plus 1 là où du 2 par 2 convient.
4. Critiquez avec references/critique.md, corrigez dans son ordre de correction, et capturez à nouveau. Arrêtez-vous après trois tours et rapportez ce qui reste.
5. Pour les jeux et les pièces interactives, jouez-y. Un test de jeu par sous-agent à la largeur mobile trouve ce que la lecture du code ne trouvera jamais.
6. Laissez le serveur de développement en cours d'exécution et donnez l'URL à l'utilisateur. Mettez les captures d'écran finales dans la PR : mobile et desktop, clair et sombre.

Lorsque la direction est ouverte, comme une police, un logo ou une palette, construisez deux ou trois petites maquettes côte à côte et laissez l'utilisateur choisir. Ensuite, construisez la gagnante.

6. Affiner

Chaque affinement suit une méthode : évaluer l'état actuel, écrire une thèse d'une phrase, l'appliquer dans le vocabulaire du système existant, capturer des captures d'écran, puis polir.

Demande	Que faire
Plus audacieux	Élevez la cible au niveau de confiance de ses voisins : échelle, poids, engagement coloré, imagerie. Puis calmez ce qui l'entoure
Plus calme	Retirez un accessoire à la fois. Abaissez la molette de mouvement. Fusionnez les couleurs pour moins de rôles
Plus simple	Coupez les sections qui ne font aucune affirmation. Réduisez les mots de moitié. Transformez les paragraphes en un visuel
Plus de couleur	Montez d'un échelon sur l'échelle de stratégie de couleur. N'ajoutez jamais une deuxième teinte d'accent d'abord
Typographie	Reconstruisez l'échelle et l'appariement à partir de references/typography.md
Mise en page	Corrigez le cadre, les bords gauches et le rythme à partir de references/layout.md
Animer	Passez d'abord la porte de fréquence dans references/motion.md. Ajoutez ensuite un moment orchestré
Texte plus clair	Appliquez references/copy.md
Responsive	Retravaillez pour 375px d'abord : colonne unique, vraies cibles tactiles, rien de rogné
Renforcer	Fournissez les données du pire cas et ajoutez les états manquants à partir de references/interaction.md

7. Checklist de livraison

Exécutez ceci avant de considérer tout travail visuel comme terminé :

• DESIGN.md reflète les décisions prises et les corrections données
• Les captures d'écran à 375px et desktop, clair et sombre, ne montrent aucune collision ou rognage
• Rien sur references/tells.md n'apparaît sauf si le brief l'a imposé
• Chaque contrôle a ses états, et chaque région asynchrone a chargement, vide et erreur
• Les données du pire cas se rendent : noms longs, zéro et un élément, nombres énormes
• Le clavier atteint tout, le focus est visible et le mouvement réduit est respecté
• Le skill accessibility signale zéro violation grave sur les thèmes principaux
• Les images sont cohérentes, découpées là où elles doivent l'être, et optimisées avec web-optimize
• Le texte est réduit à ce dont l'utilisateur a besoin, sans preuve inventée
• Le serveur de développement est en cours d'exécution et la PR contient les captures d'écran

Compétences associées

• accessibility audite WCAG 2.2 AA avec axe-core sur plusieurs largeurs, schémas et thèmes.
• image-generation crée de l'art à partir d'un style.md verrouillé sur une palette. background-removal le découpe. web-optimize l'exporte.
• architecture contient les valeurs par défaut de la pile pour les sites dans sa référence web.

Crédits

Ce skill paraphrase et combine des idées du skill frontend-design d'Anthropic (Apache-2.0), d'Impeccable de Paul Bakaus (Apache-2.0), des compétences d'ingénierie design d'Emil Kowalski (MIT) et de taste-skill de Leonxlnx (MIT). Aucun texte n'est copié. Chaque fichier de référence nomme la source de ses règles.