Codex, Claude Code ou Cursor ne sortent pas une belle interface parce que tu dis “fais un truc clean”. Il leur faut du contexte, des références et une vraie passe de review. Voilà la méthode, les outils, les notions à comprendre et le prompt de départ.
Méthode publique
6 ressources
Sources vérifiées
Reçois la fiche complète
Entre ton email pour rejoindre la newsletter Algomax et débloquer cette ressource. Si tu es déjà abonné, le formulaire sert juste à rattacher l'accès à ton compte.
Les 6 ressources à prendre
D'abord la stack. Après seulement, le guide. Chaque ressource a un rôle simple : cadrer, inspirer ou polir.
Une meilleure UI vient rarement d'un prompt plus long. Elle vient d'un bon setup : skills pour la méthode, MCP pour les références, prompt pour cadrer l'écran.
1
Commence par le vocabulaire
Skill = méthode. MCP = connexion à une source. Prompt = cadrage de la tâche du moment.
2
Donne une direction codable
Pas “fais clean”. Donne public, densité, ton, référence, états attendus et ce que tu refuses de voir.
3
Fais relire avec une vraie checklist
Demande une passe sur hiérarchie, responsive, états, textes, espacements, focus, motion et détails visuels.
C'est quoi un Agent Skill ?
Un skill est un dossier avec un fichier SKILL.md. Dedans, tu mets des instructions, des checklists, des exemples ou des scripts que l'agent charge seulement quand la tâche correspond. Le format est portable entre les agents compatibles Agent Skills.
skills.sh liste notamment Claude Code, Cursor, Codex, GitHub Copilot, Windsurf et Gemini parmi les agents disponibles. Donc l'idée n'est pas “un hack Claude Code”, c'est une méthode d'agent.
À quoi ça sert vraiment ?
Un skill transforme une préférence floue en procédure réutilisable. Au lieu de répéter “pas trop générique, pense au responsive, fais attention aux états”, tu ranges ça dans une méthode que ton agent peut relire au bon moment.
C'est le bon format pour une direction design, une checklist qualité, une convention de code, une recette de review ou une méthode de debug.
C'est quoi un MCP ?
MCP veut dire Model Context Protocol. C'est un standard ouvert qui permet à une app IA de se connecter à des systèmes externes : fichiers, bases de données, outils, prompts, workflows. L'idée simple : donner à l'agent un accès contrôlé à des sources et actions qu'il n'a pas de base.
Mobbin MCP, par exemple, sert à exposer des écrans produit réels à ton agent. Il ne reçoit plus juste “inspire-toi de Linear”, il peut chercher des références concrètes via l'outil.
Skill ou MCP ?
Skill = comment travailler. MCP = à quoi se connecter. Le meilleur setup combine souvent les deux : un skill donne la méthode de design, un MCP fournit les références ou les données.
Pour designer une page pricing : skill pour la méthode de review, MCP Mobbin pour les références, prompt final pour cadrer la passe de code.
Le point clé de l'article Anthropic
“The more you can map aesthetic improvements to implementable frontend code, the better Claude can execute.”
Rôle :
Tu es mon designer produit senior dans un agent de code comme Codex ou Claude Code. Tu dois améliorer cette interface sans produire une démo générique.
Contexte :
- Produit :
- Utilisateur :
- Objectif de l'écran :
- Niveau de densité attendu :
- Ton visuel :
- Référence principale, si disponible :
- À éviter absolument :
Avant d'écrire du code :
1. Reformule la direction design en 5 décisions concrètes.
2. Liste ce qui manque dans mon brief. Si un manque bloque le travail, pose tes questions. Sinon, fais une hypothèse explicite.
3. Propose la structure de l'écran : zones, composants, hiérarchie, états à prévoir.
4. Donne 3 anti-patterns que tu vas éviter dans cette interface.
5. Ensuite seulement, implémente.
Contraintes :
- Ne crée pas une landing page si je demande un outil, une app ou une feature.
- Traduis le goût en décisions front concrètes : typo, couleurs, thème, motion, backgrounds, densité, layout.
- Utilise des vrais états : vide, chargement, erreur, hover, focus, mobile.
- Garde les textes courts dans les boutons et les labels.
- Ne mets pas de cartes dans des cartes sans raison.
- Ne change pas la logique métier sauf si c'est nécessaire, et explique-le.
Format attendu :
## Direction
## Structure
## Risques UI
## Implémentation
## Vérification finale
Checklist avant de ship
Les titres sont plus précis que “Simple, puissant, moderne”.
Les cartes ne sont pas empilées dans d'autres cartes sans raison.
Les boutons utilisent des libellés courts et actionnables.
Les espacements racontent une hiérarchie, pas juste un padding uniforme.
Les états hover, focus, vide, erreur et mobile existent vraiment.
La page peut être comprise en screenshot sans lire trois paragraphes.
Ce que le formulaire ajoute
La page publique te donne déjà la méthode. Le formulaire ajoute le guide condensé, les prompts copiables et la liste des sources vérifiées au même endroit.
Contenu verrouillé
La fiche complète et les prompts prêts à coller apparaissent ici après inscription et connexion.
/frontend-design
Le skill officiel d'Anthropic pour pousser l'agent à réfléchir au brief, au ton, aux contraintes et aux références avant de coder.
Interface Craft
Une bibliothèque de design par Josh Puckett pour comprendre pourquoi une interface paraît propre, dense, calme ou premium.
Impeccable
Un skill open source de Paul Bakaus qui transforme la review UI en commandes concrètes : critique, polish, typeset, layout, bolder, quieter.
Mobbin MCP
Un MCP qui donne à ton agent accès à des écrans de vrais produits. Très utile pour sortir du moodboard flou.
