Dans les termes du Skill
Un skill frontend anti-slop pour les landing pages, portfolios et refontes. L'agent lit le brief, en déduit une direction de design, puis règle trois curseurs (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) qui conditionnent chaque décision de mise en page, de mouvement et de densité. Il fait correspondre les briefs à de véritables design systems lorsqu'il en existe un (Fluent, Carbon, GOV.UK, Polaris) et signale honnêtement les directions purement esthétiques.
Les règles strictes couvrent l'adaptation du hero à la fenêtre visible, la sobriété de l'eyebrow, un seul accent et un seul thème par page, les tics d'IA interdits, ainsi que des bibliothèques d'icônes, de polices et d'animations spécifiques. Les refontes commencent par un audit. Le tout se termine par une Pre-Flight Check mécanique dont chaque case doit être validée avant la mise en production du code.
Ce qu'il produit
- Une Design Read en une ligne formulée avant tout code : type de page, audience, langage d'ambiance, et le design system ou la famille esthétique privilégiée.
- Code frontend en Tailwind v4 par défaut, avec un repli sur la v3 uniquement lorsque le projet existant l'exige.
- Des commentaires de code qui indiquent clairement quelles parties sont des inspirations reprises et lesquelles sont du matériel officiel.
- Des emplacements réservés clairement identifiés lorsqu'aucune source d'image n'existe, accompagnés d'une liste finale des images encore nécessaires.
Fonctionnement
- 01Lire le brief avant toute chose
L'agent déduit ce que l'utilisateur souhaite réellement à partir du type de page, des mots d'ambiance, des références, de l'audience, des actifs de marque existants et des contraintes implicites, plutôt que de se rabattre sur une esthétique par défaut.
- 02Régler les trois curseurs
La base est 8 / 6 / 4, ajustée de façon conversationnelle par la design read. Des préréglages existent selon le cas d'usage, du service du secteur public (3 / 2 / 5) à la landing page d'agence (9 / 8 / 3).
- 03Choisir une base honnêtement
Si le brief évoque Microsoft, IBM, GitHub, Shopify, Atlassian ou le secteur public, installer et utiliser le package officiel plutôt que de recréer son CSS à la main.
- 04Appliquer la stack par défaut
React ou Next.js avec Server Components, Tailwind v4, et Motion importé depuis motion/react, avec l'animation isolée dans des composants clients de type leaf.
- 05Exécuter la Pre-Flight Check
Avant de produire du code, chaque case de la matrice de la Section 14 doit être validée ; une seule case non cochée signifie que le travail n'est pas terminé.