Designer MCP — Conception fondée sur la recherche

Que fait Designer MCP — Conception fondée sur la recherche ?

Fondez chaque conception sur des preuves réelles de produits avant l'implémentation. Cette compétence combine une méthodologie basée sur la recherche avec une bibliothèque locale et gratuite de 1 342 systèmes de design extraits.

La bibliothèque de recherche comprend une couche :

1. Styles — direction visuelle et goût, extraits de pages web marketing/produits réelles.

Les écrans et parcours existent dans le produit payant Refero mais ne sont pas dans ce déploiement. Pour les questions au niveau écran ou parcours, utilisez les références artisanales incluses et les propres documents de l'utilisateur, et dites-le clairement plutôt que d'inventer des précédents.

Non-négociables

• Recherche avant le travail de conception. Chaque conception doit être fondée sur des références avant implémentation. Ne vous fiez pas au goût générique du modèle.
• Utilisez d'abord les styles pour le travail visuel. Si le serveur MCP est indisponible, utilisez les références artisanales incluses et conservez le même workflow de verrouillage par référence.
• Ne copiez pas une seule référence. Étudiez plusieurs références solides et synthétisez une nouvelle direction pour le produit de l'utilisateur.
• Ne faites pas la moyenne des références vers un juste milieu sécurisé. Lorsque les références sont en conflit, choisissez une direction dominante et préservez ses traits marquants. Les références secondaires ne peuvent ajouter que des détails précis.
• Ne modifiez pas la signification des tokens. Si une référence indique qu'une couleur, police, rayon, ombre, dégradé ou composant est pour un rôle spécifique, utilisez-le uniquement pour ce rôle ou omettez-le.
• Respectez les directives d'images. Si un style dépend de la photographie, de l'illustration, de prises de vue produit ou de graphismes, préservez le rôle du média. Utilisez des actifs réels/générés/libres de droits lorsqu'ils sont disponibles ; sinon, créez un espace réservé intentionnel avec une direction artistique. Ne simulez pas des images complexes avec du CSS faible, du texte décoratif ou des boîtes ornementales.
• N'utilisez pas de compétences génériques de conception frontend/produit comme autorité de conception parallèle lorsque cette compétence est disponible. C'est la méthodologie de conception ; les compétences génériques tendent à ramener le travail vers une conception AI générique.
• Le résultat de la recherche doit être spécifique. Nommez les références, décrivez les choix concrets et expliquez ce qui sera adapté.
• Pas de conception à partir de la mémoire atmosphérique. Chaque décision majeure visuelle, de mise en page, de contenu ou d'interaction doit être traçable jusqu'à la recherche, au brief de l'utilisateur ou à une référence artisanale.
• Synthétisez avant l'implémentation. Transformez la recherche en concept, direction de tokens et registre de décisions concrètes avant de dessiner ou coder.
• Un brief n'est pas une cible de construction. Avant l'implémentation, verrouillez soit une source visuelle fournie par l'utilisateur, une cible de produit/système de design existant, une maquette générée sélectionnée, ou une direction explicite verrouillée par référence approuvée pour la construction directe.
• Utilisez la génération d'images uniquement lorsqu'elle change le résultat. La génération d'images peut être lente et peut ne pas exister dans tous les environnements de codage. Utilisez-la pour l'exploration visuelle, les maquettes, les images, les illustrations, les textures et les actifs difficiles ; évitez-la pour les petites corrections, les modifications de production évidentes ou le travail UI natif au code.
• Validez après avoir construit le travail visuel. Comparez l'implémentation rendue avec la cible/référence verrouillée avant la remise. Corrigez les dérives de conception actionnables au lieu de considérer la recherche comme suffisante.

Configuration MCP

Cette compétence est utile en elle-même comme méthodologie de conception basée sur la recherche et référence artisanale. La recherche est obligatoire dans les deux cas — utilisez les outils MCP pour la recherche de style en direct lorsqu'ils sont disponibles, sinon effectuez la recherche avec les références artisanales incluses et toute référence fournie par l'utilisateur.

Le serveur local s'exécute dans Docker :

# Enregistrer le serveur MCP (Hermes / tout client MCP stdio)
hermes mcp add designer \
  --command docker \
  --args run --rm -i -v "$HOME/.refero-cache:/cache:ro" \
         designer-mcp:latest node scripts/mcp-entry.mjs

Redémarrez ensuite la passerelle (ou /reload-mcp) pour que les outils s'enregistrent.

Pour une galerie navigateur des mêmes données — vignettes, échantillons, échelles typographiques :

cd designer-mcp-docker && docker compose up -d   # http://127.0.0.1:8787

Pour les détails complets des outils, lisez references/mcp-tools.md.

Découverte

Avant de rechercher, formez un court brief de conception. Ne demandez que les informations manquantes qui changeraient matériellement le résultat ; sinon, faites des hypothèses raisonnables et poursuivez.

Clarifiez :

• ce qui est conçu
• plateforme : web, iOS ou les deux
• audience et niveau technique
• objectif principal de l'utilisateur
• sensation ou direction de marque souhaitée
• objections/risques commerciaux ou utilisateur à surmonter
• contraintes : marque existante, framework, délai, accessibilité, contenu
• si la tâche nécessite une direction visuelle, des motifs UI concrets, une logique de parcours ou un mélange
• si la tâche doit passer directement au code, produire d'abord des options visuelles ou créer des actifs générés pendant l'implémentation

Format du brief :

Concevoir [QUOI] pour [QUI] sur [PLATEFORME].
Objectif : [OBJECTIF PRINCIPAL UTILISATEUR].
Ton : [SENSATION SOUHAITÉE].
Objection/risque principal : [OBJECTION].
À retenir : [ACCROCHE OU IDÉE DISTINCTIVE].
Contraintes : [CONTRAINTES].
Recherche nécessaire : [styles/écrans/parcours].
Chemin : [construction directe / exploration visuelle / audit / génération d'actifs].

Routage du Workflow

Choisissez le workflow le plus léger pouvant produire un résultat de haute qualité.

• Construction directe : à utiliser pour les petites corrections UI, les modifications de production claires, le travail sur système de design existant, ou les tâches avec une source concrète à reproduire. Faites la recherche et verrouillez la direction, puis codez.
• Exploration visuelle : à utiliser lorsque l'utilisateur demande des variantes, un nouveau langage visuel, une refonte majeure, une page d'atterrissage ou une autre surface à haute visibilité avec plusieurs directions plausibles. Par défaut, proposez trois options verrouillées par référence et demandez à l'utilisateur de choisir ; voir references/visual-workflow.md.
• Audit : utilisez des captures d'écran ou des références de style comme preuve avant la critique.
• Génération d'actifs : utilisez des images générées uniquement lorsque le verrouillage de référence nécessite des médias bitmap que le code, les icônes ou les actifs existants ne peuvent pas fournir fidèlement ; voir references/visual-workflow.md.

Routage des Outils

Utilisez d'abord les Styles pour le Travail Visuel

Utilisez refero_search lorsque l'utilisateur demande de concevoir, reconcevoir, améliorer, polir ou créer quoi que ce soit avec une composante visuelle.

Un style est une référence de conception sémantique extraite d'une page web marketing/produit réelle. Ce n'est pas une capture d'écran ni une bibliothèque de composants. Les résultats de recherche donnent des aperçus ; les références de style complètes de refero_get fournissent des directives de conception telles que la thèse visuelle, les tokens, la typographie, la mise en page/composition, le rythme des sections, l'espacement, l'élévation, les surfaces, les composants, le traitement des images, les notes d'implémentation et les règles à faire/à ne pas faire.

Couverture : pages web marketing/produits — pages d'atterrissage, pages de tarification, sites marketing produits, sites éditoriaux de marque et sites SaaS. Les tableaux de bord in-app, les écrans d'authentification, les écrans de paramètres et les écrans d'application iOS ne sont pas couverts en tant que systèmes de style. Pour les tâches UI produit, établissez le langage visuel à partir des styles, puis utilisez les références artisanales pour la logique produit.

Utilisez les styles pour :

• l'apparence et la sensation
• la direction de marque
• les pages d'atterrissage et pages marketing
• la typographie, la palette, la mise en page, la structure des sections, l'espacement, le rayon, l'élévation, les surfaces
• les traitements des composants et parfois des exemples de composants/code
• le traitement des images et des captures d'écran produit
• l'inspiration pour les systèmes de design
• rendre une interface générique plus raffinée

Après avoir trouvé des styles forts :

• utilisez refero_get pour les détails complets
• utilisez refero_design_md pour rendre un artefact DESIGN.md portable
• utilisez refero_facets pour voir quelles polices, couleurs, thèmes et industries le catalogue contient réellement avant de vous engager dans une direction

Pour les Motifs Produit et les Parcours

Ce déploiement n'a pas de couche écrans ou parcours. Lorsque la tâche nécessite des motifs UI concrets (un type d'écran spécifique, un état de formulaire, une mise en page de page de tarification) ou une logique de parcours (intégration, paiement, annulation) :

• utilisez les références artisanales incluses — elles couvrent les formulaires, la mise au point, les états vides, les motifs d'intégration et l'artisanat de conversion
• utilisez le produit existant de l'utilisateur, les captures d'écran ou le système de design lorsqu'ils sont fournis
• soyez explicite sur le fait que ceux-ci sont fondés sur l'artisanat plutôt que sur des références

N'inventez pas de précédent que vous n'avez pas consulté.

Utilisez le Workflow Visuel pour les Images et l'AQ

Pour la génération d'images, les options visuelles, les actifs générés et l'AQ visuelle, lisez references/visual-workflow.md lorsque la tâche le nécessite.

Workflow de Recherche

1. Recherchez la Direction Visuelle avec les Styles

Pour toute tâche de conception visuelle, commencez ici.

Boucle recommandée :

1. Recherchez 3 à 5 angles visuels différents.
2. Incluez une requête esthétique large.
3. Incluez une requête de domaine/catégorie.
4. Incluez une requête de marque connue ou de produit fort lorsque pertinent.
5. Récupérez 3 à 4 styles forts avec refero_get ; les styles complets sont volumineux, divisez donc les recherches plus importantes en plusieurs lots.
6. Comparez ce que chaque style apporte.
7. Choisissez une base principale et empruntez 1 à 2 détails spécifiques d'autres styles.
8. Verrouillez les traits distinctifs de la référence principale avant l'implémentation.

Les bonnes requêtes de style et la liste de contrôle d'extraction complète (quoi extraire de chaque style : thèse, type, rôles de couleur, espacement, mise en page, composants, images, stratégie médias, règles à faire/à ne pas faire) sont listées dans references/research-playbook.md.

Règle de synthèse :

• Style principal : ambiance globale, densité et structure.
• Styles secondaires : détails spécifiques empruntés.
• Contexte utilisateur : adaptez tout au produit, à l'audience et à la tâche.
• N'utilisez pas la moyenne/intersection de toutes les références. Si une référence est sombre, une acide et une avec empattements, la réponse n'est pas crème chaud + orange adouci + empattements polis.

Ne présentez jamais le résultat comme « copier X ». Présentez-le comme une nouvelle direction inspirée par plusieurs références.

Avant l'implémentation, créez un verrouillage de référence :

Référence/direction principale : [une source dominante]
Préserver : [3 à 5 traits qui doivent survivre : toile, type, accent, mise en page, densité, médias]
Emprunter uniquement : [1 à 2 détails secondaires spécifiques]
Règles de rôle : [significations source des tokens/composants à préserver, ex. CTA uniquement, code uniquement, décoratif uniquement]
Stratégie médias : [réel/généré/libre de droits/natif au code/espace réservé, avec rapport d'aspect et direction artistique]
Rejeter : [valeurs par défaut/moyennes qui effondreraient la direction]
Engagements de tokens : [fond, type, accent, rayon, bordure/ombre, traitement des images, avec rôles]

Si l'implémentation dérive du verrouillage, arrêtez et corrigez-la. N'adoucissez pas les traits distinctifs en couleurs plus sûres, polices plus sûres, rayons plus doux ou mises en page de section génériques. Le verrouillage de référence n'est pas un clonage ; il préserve les traits sélectionnés tout en adaptant le contenu, la marque et les détails d'interaction au produit de l'utilisateur.

Lors de la combinaison de styles, attribuez à chaque source un travail délimité. Par exemple : une source peut posséder la toile/le type, une autre le traitement des fenêtres de code, et une autre le CTA principal. Ne déplacez jamais un token en dehors de son rôle source : les couleurs CTA restent CTA uniquement, les couleurs de syntaxe restent dans le code, les dégradés décoratifs restent décoratifs, et les règles de carte/bouton conservent leur rayon, ombre et comportement d'état spécifiés.

Si le style principal est axé sur l'image, ne le remplacez pas par une mise en page textuelle uniquement. Si vous ne pouvez pas produire l'image ou le graphique nécessaire, préservez l'emplacement avec des dimensions stables, un rapport d'aspect, une légende/texte alternatif et une courte note de direction artistique. Construisez des diagrammes simples, des icônes, des fenêtres de code ou des primitives géométriques uniquement lorsqu'ils correspondent au style source.

Pour une exploration visuelle substantielle, des maquettes générées, des actifs bitmap ou une AQ visuelle post-construction, suivez references/visual-workflow.md.

2. Motifs Produit sans Couche d'Écrans

Utilisez les références artisanales lorsque la tâche nécessite de savoir ce qu'une interface doit contenir ou comment les produits réels résolvent un problème UI spécifique.

Besoin	Référence
Conception de formulaire, états de mise au point, états vides, tableaux, motifs d'intégration	references/craft-details.md
Copie CTA, signaux de confiance, gestion des objections, structure de conversion	references/copywriting.md
Sélection de composants/icônes	references/icons.md
Décisions de rôles typographiques et hiérarchie	references/typography.md
Rôles de couleur, contraste, discipline de palette	references/color.md

Extrayez de celles-ci :

• structure de mise en page
• hiérarchie de l'information
• choix de composants
• motifs CTA
• motifs de contenu/copie
• états et cas limites
• tactiques de confiance ou de conversion
• détails concrets valant la peine d'être adaptés

3. Logique de Parcours sans Couche de Flux

Lorsque la tâche comporte plusieurs étapes ou qu'un utilisateur change d'état au fil du temps, raisonnez à partir du motif d'interaction plutôt que de revendiquer un précédent :

• point d'entrée et état de sortie
• nombre d'étapes
• décisions que l'utilisateur prend
• réducteurs de friction
• confirmations requises
• états de sauvegarde/récupération
• gestion des erreurs
• moments de rétention ou de persuasion
• réponse du système à chaque étape

Profondeur et Synthèse de la Recherche

Faites correspondre la profondeur au risque de la tâche, puis séparez les résultats en trois catégories : direction visuelle (des styles), motif produit (des références artisanales et du matériel utilisateur) et logique de parcours (du raisonnement d'interaction).

Pour l'échelle de profondeur par type de tâche, les formats de sortie pour chaque catégorie, le modèle de résumé de recherche et le tableau du registre de décisions, lisez references/research-playbook.md.

Artisanat de Conception

Après la recherche, exécutez comme un·e designer produit senior. Utilisez les références incluses uniquement lorsque pertinentes ; ne chargez pas chaque fichier par défaut.

• Typographie : references/typography.md
• Couleur : references/color.md
• Mouvement : references/motion.md
• Icônes : references/icons.md
• Formulaires, mise au point, images, toucher, performance, accessibilité : references/craft-details.md
• Copywriting et persuasion : references/copywriting.md
• Vérifications anti-AI-slop : references/anti-ai-slop.md
• Optimisation de la conversion : references/conversion.md
• Responsive et adaptatif : references/responsive.md

Éthique et Limites

Ne contournez pas la recherche. Ne fabriquez pas de références. Si l'utilisateur demande un travail UI produit (formulaires, tableaux, paramètres, navigation) sans styles, utilisez les références artisanales pour la logique produit et, en l'absence de styles, des conventions d'interface standard — en indiquant clairement que la direction visuelle n'est pas fondée sur des preuves. Si la tâche dépasse clairement les capacités de conception de l'agent (production d'actifs 3D, illustration de personnages, photographie, animation complexe), dites-le plutôt que de surpromettre.