distill

Vue d’ensemble de la compétence distill

Ce que fait distill

La compétence distill est un workflow de simplification d’interface conçu pour ramener un design à sa fonction essentielle. Elle est faite pour les moments où une interface paraît chargée, bruyante, trop décorée, suréquipée en fonctionnalités ou difficile à parcourir. Au lieu d’imaginer encore plus d’UI, distill pousse dans la direction inverse : supprimer, fusionner, masquer et clarifier jusqu’à ce que l’objectif principal de l’utilisateur devienne évident.

Quand utiliser distill pour le design UI

Utilisez distill for UI Design quand vous avez déjà un écran, un composant ou un parcours et que vous voulez le rendre plus propre sans perdre en utilité. C’est un bon choix pour les designers, les ingénieurs frontend et les équipes produit confrontés à :

• des dashboards encombrés
• des formulaires avec trop de choix
• des CTA en concurrence
• une hiérarchie visuelle faible
• un excès de couleurs, de styles ou de traitements de surface
• une dérive fonctionnelle qui masque la tâche principale

Le vrai besoin auquel répond distill

Dans la pratique, la mission de la compétence distill n’est pas de « rendre l’interface plus jolie ». Elle consiste à identifier l’objectif principal unique d’une UI, puis à réduire tout ce qui détourne l’attention de cet objectif. Concrètement, cela revient à décider ce qu’il faut supprimer complètement, ce qu’il faut regrouper derrière une divulgation progressive, ce qu’il faut fusionner et ce qu’il faut mettre davantage en avant.

Ce qui distingue distill d’un prompt générique

Un prompt générique du type « simplifie cette UI » produit souvent des conseils vagues. distill est plus exploitable, car il aborde la simplification comme un audit méthodique :

1. évaluer d’où vient la complexité
2. identifier la tâche essentielle
3. supprimer les éléments et les variations inutiles
4. préserver l’utilité tout en renforçant la clarté

C’est cette structure qui justifie principalement son installation plutôt qu’un simple prompting au fil de l’eau.

Point de vigilance clé avant adoption

La contrainte la plus importante, c’est que distill n’est pas autonome. Ses propres instructions imposent d’appeler d’abord /frontend-design et, si le contexte de design n’existe pas encore, d’exécuter /teach-impeccable avant de continuer. Si vous cherchez une compétence prête à l’emploi qui fonctionne seule, cette chaîne de dépendances est le principal frein à connaître dès le départ.

Comment utiliser la compétence distill

Contexte d’installation de distill

Cette compétence se trouve dans pbakaus/impeccable, sous .agents/skills/distill. Un schéma d’installation courant est :

npx skills add pbakaus/impeccable --skill distill

Comme l’extrait du dépôt n’expose que SKILL.md, considérez ce fichier comme la source d’usage faisant autorité, et partez du principe que la compétence s’appuie sur des compétences complémentaires dans le même repo.

Commencez par lire ce fichier

Commencez par :

• SKILL.md

Pour l’usage de distill, ce fichier est plus important qu’un README, car il contient le véritable contrat d’invocation, le workflow et les étapes préalables.

Respectez la chaîne de dépendances requise

Avant d’utiliser distill, procédez dans cet ordre :

1. invoquez /frontend-design
2. suivez son protocole de collecte de contexte
3. s’il n’existe pas encore de contexte de design, exécutez /teach-impeccable
4. ensuite seulement, lancez distill

Ce n’est pas une simple finition facultative. La compétence dépend explicitement d’un contexte de design préalable ; sauter cette étape augmente le risque d’une simplification superficielle ou arbitraire.

De quelles entrées distill a besoin

La compétence distill fonctionne bien mieux si vous fournissez une cible concrète, avec assez de contexte pour juger ce qui est vraiment essentiel. Les bonnes entrées incluent en général :

• l’écran, le composant ou le parcours précis
• la tâche principale de l’utilisateur
• les points de douleur actuels, comme l’encombrement, le trop grand nombre d’actions, une hiérarchie faible ou du bruit visuel
• les contraintes, comme les champs obligatoires, les mentions légales, les limites de plateforme ou les règles du design system existant

Exemples minimaux de cible :

• distill checkout sidebar
• distill onboarding modal
• distill analytics dashboard header

Transformer un objectif vague en prompt distill solide

Prompt faible :

• « Simplifie cette page. »

Prompt plus solide, dans l’esprit du guide distill :

• « Use distill on the settings screen. The main goal is helping users change notification preferences quickly. Current issues: too many card sections, repeated labels, three competing save actions, and decorative borders everywhere. Keep required compliance copy and email/SMS toggles. Recommend what to remove, combine, hide, or restyle. »

Pourquoi cela fonctionne :

• un objectif principal unique est nommé
• les sources probables de complexité sont explicites
• ce qui ne peut pas être supprimé est indiqué
• la demande porte sur des décisions de simplification actionnables, pas sur une critique générique

Ce que distill cherche à détecter

D’après la source, distill audite activement :

• un trop grand nombre d’éléments
• des variations stylistiques excessives
• une surcharge d’information
• du bruit visuel
• une hiérarchie confuse
• une dérive fonctionnelle

Si vous savez déjà lesquels de ces problèmes s’appliquent, dites-le. La compétence est plus tranchée lorsqu’elle n’a pas à tout déduire à partir d’un contexte limité.

Workflow distill recommandé en pratique

Un bon workflow réel ressemble à ceci :

1. recueillir le contexte de l’écran avec /frontend-design
2. formuler l’objectif utilisateur principal unique
3. exécuter distill sur une cible précise
4. examiner ses suggestions de suppression et de consolidation
5. demander une justification de layout révisé ou un plan d’implémentation
6. vérifier que la version simplifiée couvre toujours les cas limites nécessaires

C’est important, car la simplification peut facilement aller trop loin. Le meilleur usage de distill consiste souvent en un premier passage pour retirer le bruit, puis un second pour vérifier que les tâches essentielles sont toujours bien prises en charge.

Quels résultats attendre

Vous pouvez vous attendre à des recommandations sur :

• ce qu’il faut supprimer complètement
• ce qu’il faut masquer derrière une divulgation progressive
• ce qu’il faut fusionner en un seul contrôle ou une seule section
• quels traitements visuels réduire
• comment renforcer la hiérarchie autour de l’action principale

N’attendez pas de détails d’implémentation pixel perfect de la seule compétence, sauf si vous posez explicitement des questions de suivi.

Conseils pratiques qui changent la qualité du résultat

Pour un meilleur usage de distill :

• donnez un écran à la fois, pas un produit entier
• nommez la tâche principale en une phrase
• distinguez clairement les éléments obligatoires des éléments optionnels
• mentionnez les actions critiques côté business qui doivent rester visibles
• ajoutez si possible des captures d’écran, des listes de composants ou la structure du code

La logique centrale de la compétence est : « qu’est-ce qu’on peut retirer sans nuire à l’objectif principal ? ». Si les éléments obligatoires sont flous, vous obtiendrez rapidement des recommandations faibles.

Quand distill est particulièrement efficace

La compétence distill donne les meilleurs résultats sur des interfaces qui fonctionnent déjà, mais paraissent trop chargées. Elle est particulièrement utile pour :

• des outils internes avec des années de contrôles accumulés
• des écrans enterprise avec trop de données visibles
• des vues mobiles où la densité nuit à la lisibilité
• des passes de refonte où le périmètre produit est figé, mais la clarté reste insuffisante

FAQ sur la compétence distill

distill convient-il aux débutants ?

Oui, à condition d’avoir déjà quelque chose de concret à simplifier. La compétence apporte un angle de simplification plus net qu’une critique de design ouverte. La principale difficulté pour les débutants tient au workflow préalable : il faut suivre la mise en place du contexte de design prévue par le repo, au lieu de traiter distill comme une commande magique en une ligne.

distill sert-il seulement au nettoyage visuel ?

Non. La compétence distill s’attaque aussi à la complexité structurelle : trop d’actions, trop d’informations affichées en même temps, des priorités peu claires et une surcharge fonctionnelle. Elle concerne autant l’interaction et la hiérarchie que le styling de surface.

Quand ne faut-il pas utiliser distill ?

N’utilisez pas distill si le principal problème vient d’une capacité manquante, d’exigences floues ou d’une définition insuffisante du parcours utilisateur. Simplifier une UI avant d’avoir clarifié le vrai objectif utilisateur peut conduire à supprimer les mauvais éléments. Ce n’est pas non plus le bon choix si vous avez besoin d’idéation large plutôt que de réduction.

distill vs prompting classique

L’avantage de distill par rapport à un prompt standard du type « rends ça plus propre » tient à son modèle de décision plus resserré. Il demande explicitement ce qui est nécessaire, ce qui relève du nice-to-have et ce qui peut être supprimé, masqué ou fusionné. Il est donc meilleur pour les décisions de désencombrement que pour l’exploration visuelle libre.

distill fonctionne-t-il sans le reste de impeccable ?

Pas vraiment de façon propre. D’après la source, distill suppose que /frontend-design et parfois /teach-impeccable aient été exécutés d’abord. Si votre environnement ne peut pas invoquer ces compétences complémentaires, vous pouvez toujours reproduire le workflow manuellement, mais vous perdez une partie du cadrage contextuel prévu.

distill est-il adapté aux équipes orientées code ?

Oui. La décision d’installer distill est pertinente pour les équipes très frontend, car la simplification dépend souvent d’une bonne compréhension de ce qui est réellement nécessaire dans le code et dans la logique produit. C’est particulièrement utile quand la dette de design se manifeste par trop de contrôles, trop d’états et trop de traitements visuels dans une UI déjà en production.

Comment améliorer l’usage de la compétence distill

Donnez à distill un objectif principal unique

L’amélioration la plus rentable consiste à formuler une seule tâche principale pour l’UI cible. La source elle-même insiste sur le fait qu’il doit y avoir ONE primary user goal. Si vous fournissez plusieurs objectifs d’importance égale, la compétence distill ne pourra pas simplifier de manière tranchée, car tout commencera à paraître essentiel.

Indiquez ce qui peut disparaître, ce qui doit rester et ce qui est incertain

Un bon prompt pour distill distingue :

• ce qu’il faut absolument garder
• ce qu’on peut supprimer sans risque
• ce qui est incertain ou négociable

Ce cadrage évite deux échecs fréquents : une sortie trop timide qui ne retire rien, ou au contraire une sortie trop agressive qui coupe des éléments nécessaires.

Nommez les vraies sources de complexité

Ne dites pas seulement « c’est chargé ». Dites à distill si cette complexité vient :

• de trop de boutons
• d’informations répétées
• de trop nombreux styles visuels
• de bordures ou d’ombres inutiles
• d’un mauvais regroupement
• de trop d’options visibles

Cela améliore la précision des recommandations, car la compétence raisonne déjà dans ces catégories.

Demandez des décisions de suppression, pas une critique générique

Un meilleur prompt serait :

• « Use distill and list what should be removed, combined, hidden, or visually softened. »

Un prompt plus faible serait :

• « Thoughts on this design? »

Le premier produit une sortie directement exploitable. Le second invite à un commentaire large et réduit la valeur du workflow de guide distill.

Faites une itération pour simplifier, puis une autre pour valider

Après le premier passage, demandez :

• quels risques d’utilisabilité la simplification introduit
• quels cas limites risquent désormais d’être trop profondément cachés
• si le CTA principal est plus clair
• si les actions secondaires critiques restent faciles à découvrir

Ce deuxième passage améliore l’usage de distill, car la qualité d’une simplification ne se mesure pas seulement à ce qu’on retire, mais aussi à ce qu’on préserve.

Fournissez des artefacts, pas seulement des descriptions

Si possible, ajoutez :

• une capture d’écran
• un wireframe
• un inventaire des composants
• la hiérarchie d’information actuelle
• des extraits de code pertinents pour l’UI conditionnelle

Plus la cible est concrète, plus distill peut identifier avec assurance ce qui est décoratif, redondant ou structurellement inutile.

Surveillez les modes d’échec courants

Les résultats faibles apparaissent généralement quand :

• la finalité principale de l’écran est floue
• chaque demande de partie prenante est traitée comme également importante
• les contraintes obligatoires sont omises
• vous demandez de simplifier un produit entier d’un coup
• la collecte de contexte via /frontend-design a été sautée

Si distill paraît générique, la cause vient le plus souvent non pas de la compétence elle-même, mais d’entrées insuffisamment spécifiées.

Demandez à distill d’expliquer les arbitrages

L’un des meilleurs moyens d’augmenter la confiance dans la sortie consiste à demander :

• quel bénéfice utilisateur est apporté par chaque suppression
• quel coût de découvrabilité implique le masquage de certaines fonctionnalités
• pourquoi un contrôle fusionné est préférable à des contrôles séparés

Cela transforme la compétence distill d’un simple outil de nettoyage en un outil d’aide à la décision, ce qui la rend plus utile pour une adoption en équipe.

Associez distill à un suivi orienté implémentation

Une fois que distill a identifié la direction de simplification, enchaînez avec une seconde demande portant sur :

• une structure de layout révisée
• des choix de composants alignés sur le design system
• des notes d’implémentation frontend
• des critères d’acceptation pour l’écran simplifié

C’est souvent à cette étape de relais que la compétence devient réellement utile en pratique, au lieu d’être seulement juste sur le plan conceptuel.