fergo5002/design-research

À utiliser lorsqu'un design a besoin de références avant d'avoir besoin de pixels, et toujours lorsque `ddr domain match` renvoie une confiance inférieure à ce dont le projet a besoin, qu'un brief arrive sur un terrain inconnu, ou que le travail réalisé jusqu'ici semble générique. Exécute la boucle d'expertise : cartographie les meilleures réalisations de la catégorie, des catégories adjacentes et d'autres disciplines, les examine correctement dans un vrai navigateur, les déconstruit, traque le « slop » de la catégorie, consigne ce qu'il a appris dans le dossier et la bibliothèque de référence du domaine, retire ce qui est obsolète, et réévalue les scores jusqu'à ce que l'agent ait gagné le droit de concevoir.

Qu'est-ce que design-research ?

Cette compétence transforme un agent IA en chercheur en design rigoureux avant toute phase de création. Elle répond au problème fondamental : on conçoit bien là où on a « regardé » attentivement, et mal ailleurs. Le système ne produit pas un simple moodboard, mais un « domaine » structuré comprenant un dossier de connaissances, une bibliothèque de références validées et un score de confiance calculé. L'agent utilise une série de commandes `ddr` pour cartographier le territoire (direct, leader, extérieur), déconstruire et mesurer des sites réels (polices, couleurs, espacements, animations), identifier des contre-exemples de « slop », et documenter chaque observation avec des preuves mesurables. Le score de confiance, basé sur la profondeur et la qualité des références, guide l'agent : il continue la recherche jusqu'à atteindre un seuil adapté aux enjeux du projet (faible, moyen, élevé). La compétence prend en charge la création de nouveaux domaines, la mise à jour des références, et l'audit régulier pour éviter la stagnation. Elle s'intègre avec des outils comme Exa, Brave Search, Mobbin, Refero, Playwright et Firecrawl pour la collecte et l'analyse. L'objectif ultime est de garantir que l'agent possède une expertise réelle et documentée avant de commencer à concevoir.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/fergo5002/design-director/tree/HEAD/skills/design-research

Installed? Explore more Recherche et analyse de données skills: affaan-m/uspto-database, affaan-m/scholar-evaluation, affaan-m/literature-review · View all 6 →

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Design research : la boucle d'expertise

Outils : <commande> ddr une fois installé (python tools/ddr.py install), sinon python <repo>/tools/ddr.py <commande>, où <repo> se trouve deux dossiers au-dessus du dossier réel (résolution des liens symboliques) de cette compétence.

Vous concevez bien là où vous avez regardé attentivement, et mal ailleurs. Cette compétence vous permet de devenir expert d'un domaine avant d'y concevoir, et de maintenir cette expertise au fil du temps. Le résultat n'est pas un moodboard. C'est un domaine : un dossier de ce que vous comprenez désormais, une bibliothèque de références que vous avez effectivement vues, et un score de confiance calculé à partir de ces preuves.

Une recherche qui ne modifie pas une décision n'est que de la navigation. Une recherche que vous n'avez pas enregistrée est perdue. Faites les deux correctement ou ne prétendez pas avoir fait des recherches.

0. Où vous en êtes

ddr domain match "<le brief en une phrase>"

Cela renvoie le secteur (le type d'activité ou d'audience) et le pattern (le flux ou la surface : onboarding, checkout, réservation, tarification, tableau de bord) avec un niveau de confiance pour chacun. Puis ddr domain plan <slug> --stakes faible|moyen|élevé :

EnjeuxQuandCible
faibleun composant ou une modification dans un système existant35
moyenune page, un flux, la refonte d'une surface55
élevéun nouveau site, une marque, un lancement, tout ce qui engage l'image de l'entreprise70

Si la cible est atteinte, lisez ddr domain brief <secteur> <pattern> et retournez au directeur de design. Sinon, exécutez la boucle ci-dessous jusqu'à ce qu'elle le soit, ou jusqu'à ce que vous ayez fait ce que le temps permet et que vous puissiez honnêtement dire jusqu'où vous êtes allé. N'attendez pas qu'on vous le demande. Dites à l'utilisateur en une ligne : « La confiance pour 'independent stays' est de 12, donc je recherche d'abord la catégorie (environ 20 références). »

Nouveau territoire

Lorsqu'aucun domaine ne correspond, créez-en un. Choisissez le niveau auquel les références se transfèrent : les maisons de retraite et les cabinets dentaires sont tous deux des « soins de santé », mais leurs sites ne partagent presque rien, ce sont donc des secteurs distincts. Deux domaines dont les meilleures références seraient la même liste ne forment qu'un seul domaine.

ddr domain new independent-stays --kind secteur --title "Independent stays" \
  --summary "Gîtes, maisons d'hôtes et petits hôtels qui vendent en direct" \
  --keywords "autonome,gîte,maison d'hôtes,chambre d'hôtes,hôtel de charme,location de vacances" \
  --aliases "hébergement court séjour,location saisonnière"

Les mots-clés sont les termes qu'un client utiliserait, pas des termes de design. Un pattern est quelque chose qui se répète dans différents secteurs avec ses propres bonnes pratiques ; créez-en un lorsque le brief est centré dessus. Reliez les domaines qui s'informent mutuellement (ddr domain relate independent-stays booking --how "disponibilité avant le prix"), fusionnez deux domaines qui s'avèrent n'en faire qu'un (ddr domain merge <depuis> <vers>, rien n'est supprimé), et divisez un domaine qui a développé deux audiences en créant le second et en déplaçant les références qui lui appartiennent.

Vos instruments

Utilisez les meilleurs dont vous disposez, dans cet ordre, et précisez lesquels vous avez utilisés :

TâcheMeilleurSolution de repli
Trouver des candidats par descriptionExa MCP (ddr mcp --research pour la configuration)votre propre recherche web, le catalogue
Trouver les meilleurs indépendants dans un lieu ou un métierBrave Search MCP recherche locale et de lieurecherche web pour "meilleur <métier> dans ", sites d'avis, listes de finalistes de prix
Captures d'écran et flux de produits réelsMobbin ou Refero MCP (payant)déconstructions publiques, parcourir le flux vous-même
Examiner une référence et la mesurerddr teardown <url> --into <slug>Playwright ou Chrome DevTools MCP, puis captures d'écran
Parcourir un parcours en toute sécuritéddr teardown <url> --walk "Réserver>Voir les disponibilités"Playwright MCP, sans jamais rien soumettre
Voir l'âge d'un designddr history <url>, puis déconstruire une version archivéeles propres actualités du site ou les articles de lancement
Comparer côte à côteddr sheet --domain <slug> --with yours.pngddr sheet a.png b.png c.png
Extraire les repères d'une marqueFirecrawl MCP format brandingmesure de la police et de la palette via ddr teardown

ddr teardown sauvegarde les plis (folds) desktop et mobile, une page entière et une bande d'images d'arrêt de défilement, et mesure la page en direct : les polices et leurs tailles selon la quantité de texte qu'elles composent, la palette par surface peinte, les couleurs des contrôles, les rayons, les ombres, les espacements des sections, la largeur des paragraphes, le mouvement (temporisations de transition, bibliothèques de défilement, vidéo, canvas, règles de mouvement réduit), la pile technologique, la navigation, les appels à l'action et leur position par rapport au pli, et les indicateurs de design généré (contenu factice, sourcils, texte dégradé, verre, triades d'icônes-cartes). Les chiffres rendent vos analyses précises. Ils ne remplacent jamais l'observation : ouvrez les images.

1. Cartographiez le territoire

Notez qui sont les meilleurs avant d'ouvrir une galerie. Les meilleurs dans une catégorie sont les entreprises que les acteurs de ce métier admirent, celles qui gagnent sur leur réputation, et celles dont les sites sont copiés par la catégorie. Trouvez-les de trois manières :

  • Direct (--angle direct) : les 6 à 12 plus forts dans cette catégorie exacte, au sommet du marché et parmi les petits indépendants qui font clairement du bon travail. Utilisez la recherche web, la presse professionnelle, les listes de finalistes de prix dans la catégorie, et le catalogue (ddr sources search "<catégorie>" -v).
  • Leader (--angle leader) : le meilleur travail dans une catégorie adjacente qui résout le même problème pour un client plus exigeant (un groupe d'hôtels de charme pour un gîte, une banque privée pour une coopérative de crédit).
  • Extérieur (--angle outside) : au moins deux références d'une autre discipline complètement, choisies pour l'univers du sujet (guides imprimés, monographies d'architecture, menus, titres de films, signalétique). ddr sources shuffle -n 4 donne un tirage.

Les galeries (Awwwards, recent.design, Land-book) sont des pistes, jamais des preuves. Préférez les prix annuels et mensuels aux sélections quotidiennes.

2. Regardez correctement

Une référence ne compte qu'à hauteur de ce que vous avez réellement vu :

--evidenceSignificationPoids
searchVous avez lu à son sujet ou vu une vignetteun quart
visitedVous avez chargé le site en direct et l'avez luun
screenshotVous l'avez rendu et avez examiné les pixels en desktop et mobileplus
flowVous avez parcouru le parcours réel (réserver, s'inscrire, commander)le plus

Déconstruisez chaque candidat sérieux et ouvrez les images :

ddr teardown https://a.example https://b.example --into <slug>

Regardez les plis et les images d'arrêt de défilement, pas seulement les chiffres. Pour les deux ou trois meilleurs, exécutez aussi ddr history <url> : une référence "fraîche" dont l'apparence date de 2019 est désormais un template, et une version archivée montre quels changements sont récents. Parcourez le parcours qui correspond au brief aussi loin que possible sans payer ni rien soumettre. Un écran de chargement ou un bandeau de cookies n'est pas le design ; notez-le et regardez au-delà.

Si les conditions d'utilisation d'un site interdisent l'accès automatisé (agent_access = "scrape-no" dans le catalogue), naviguez comme le ferait une personne et enregistrez visited. Ne copiez jamais d'écrans payants ou de photographies de quelqu'un d'autre dans un dépôt public ; les captures d'écran restent dans votre dossier personnel du domaine, qui n'est jamais publié.

3. Déconstruisez et enregistrez

Pour chaque référence qui a gagné sa place, enregistrez-la immédiatement, en utilisant les valeurs mesurées de son teardown.md :

ddr domain ref add <slug> --name "Nom" --url https://... --verdict exemplaire \
  --angle direct --evidence screenshot --score 4 --shots shots/<hôte> \
  --take "Le calendrier de disponibilité est l'élément principal, les prix sont affichés par nuit à côté de chaque date, en police sérif condensée à 15 px" \
  --avoid "La vidéo drone en autoplay retarde le premier écran utile de 4 s" \
  --tags layout:calendrier-hero,type:serif-condensé

--take est le geste spécifique, avec des valeurs lorsque vous les avez (tailles, couleurs, temporisations, les mots réels). « Propre et moderne » n'est pas un take. Notez honnêtement : 5 change la façon dont vous concevriez ceci, 3 est solide et typique, tout ce que vous noteriez 2 n'est pas un exemplaire.

4. Traquez le slop

Trouvez 3 à 5 contre-exemples (--verdict counter --avoid "...") : les sites templates, ceux qui ont l'air générés, les sites obsolètes de cette catégorie. Ils sont aussi précieux que les exemplaires, car ils montrent à quoi ressemble spécifiquement le slop de cette catégorie, ce que SLOP.md du directeur de design ne peut décrire que de manière générale. Écrivez le pattern dans la section Slop de la catégorie du dossier. La confiance est plafonnée à 60 tant que cette section n'existe pas.

5. Rédigez le dossier

Ouvrez $(ddr domain path <slug>)/dossier.md et rédigez chaque section à partir de ce que vous avez vu, en nommant les références. Soyez concret et tranché :

  • À qui cela s'adresse : qui l'utilise, ce qui les inquiète, avec quoi ils le comparent.
  • Ce que font les meilleurs : les gestes communs aux meilleurs, avec des valeurs.
  • Conventions à conserver : sur quoi les utilisateurs comptent. Faites-les exceptionnellement bien.
  • Conventions à briser : ce qui est paresseux ou obsolète ici, et ce qui le remplace.
  • Slop de la catégorie : à quoi ressemblent les travaux générés et les templates dans cette catégorie.
  • Langage : type, couleur, imagerie, voix et mouvement qui appartiennent à cet univers, et pourquoi.
  • Questions ouvertes : ce que vous ignorez encore et ce qui y répondrait.

6. Curation

ddr domain audit <slug> --online

Cela signale les références obsolètes (non vues depuis un an), faibles (recherche uniquement), contradictoires (un exemplaire noté 2), mortes, déplacées, ou toutes issues d'un seul angle ou d'une seule source. Agissez sur chaque constat : regardez à nouveau (ddr domain ref seen), re-notez, ou retirez avec une raison (ddr domain ref retire <slug> <id> --reason "refondu en template en 2026"). Les références retirées restent dans le cimetière pour ne jamais être silencieusement ré-ajoutées. Une bibliothèque ne vaut que par ce que vous êtes prêt à jeter.

7. Comparez, puis re-notez

Créez une planche-contact des meilleures références du domaine (ddr sheet --domain <slug> --n 6) et regardez-les en ensemble. Si elles se ressemblent toutes, la bibliothèque a convergé vers une seule idée et la prochaine recherche devrait chercher la référence qui les contredit.

8. Re-notez et décidez

ddr domain status <slug>

Cela affiche le score, chaque composante, les éventuels plafonds et ce qui les augmenterait. Répétez la boucle sur les plus grands écarts jusqu'à atteindre la cible d'enjeux. Ensuite, dites à l'utilisateur où vous en êtes en une ligne ("Independent stays est maintenant à 58 : 14 sites examinés, 4 contre-exemples, le slop documenté") et retournez à l'étape 1 du directeur de design.

Profondeur

Adaptez l'effort aux enjeux et dites ce que vous avez fait :

  • faible : 4 à 6 références, un contre-exemple, la ligne de slop rédigée. Quelques minutes.
  • moyen : 8 à 12 références couvrant les trois angles, 3 contre-exemples, chaque section du dossier. Moins d'une heure.
  • élevé : 15 à 25 références, parcours effectués pour les 3 meilleures, 4 contre-exemples ou plus, deux références extérieures, un passage d'audit. Aussi longtemps que nécessaire.

Le projet conserve son propre petit registre dans .design/references.md : les 5 à 10 références qui ont changé une décision sur ce projet, une ligne chacune, avec la décision qu'elle a changée. Le domaine est ce que vous savez ; le registre du projet est ce que vous avez utilisé.

Règles

  • Empruntez des techniques et des principes, jamais un logo reconnaissable, une photographie, une police payante ou une illustration propriétaire.
  • Enregistrez les accès échoués (paywall, blocage de bot, lien mort) au lieu de deviner ce qui se cachait derrière : ddr domain log <slug> note "Revolut a bloqué le rendu et les requêtes simples".
  • N'enregistrez jamais une référence comme vue que vous n'avez pas vue. Le score existe pour vous empêcher de revendiquer une expertise que vous n'avez pas gagnée ; le gonfler contredit sa seule raison d'être.
  • Lorsqu'une entrée du catalogue est morte ou erronée, corrigez-la avec ddr sources add, et ajoutez-y d'excellentes nouvelles sources, afin que la personne suivante parte avec une longueur d'avance.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills associés