Dans les termes du Skill
Ce skill génère des interfaces web ultra-minimalistes, de type document, inspirées des plateformes de travail haut de gamme. Il impose une palette monochrome chaude avec des tons blanc cassé et anthracite, des hiérarchies typographiques sur mesure mêlant serifs éditoriaux et sans-serifs géométriques, et des mises en page bento en aplat avec des accents pastel discrets.
Le protocole interdit strictement les polices Inter, Roboto et Open Sans, les bibliothèques d'icônes standards comme Lucide et Heroicons, les ombres lourdes par défaut de Tailwind, les dégradés, les emojis et les clichés de rédaction générés par IA. Les composants utilisent des bordures 1px solid #EAEAEA, un rayon de bordure net de 8-12px, un padding interne généreux, et des animations d'entrée au défilement avec IntersectionObserver. Le mouvement est discret et raffiné, n'animant que via transform et opacity.
Ce qu'il produit
- Du code frontend en HTML, React, Tailwind ou Vue reflétant nativement l'esthétique haut de gamme, épurée et éditoriale
- Des mises en page avec des structures CSS Grid asymétriques de type bento et un macro-espace blanc généreux
Fonctionnement
- 01Établir le macro-espace blanc en premier
Utiliser un padding vertical massif entre les sections, en particulier py-24 ou py-32 en unités Tailwind.
- 02Contraindre la largeur du contenu
Limiter le contenu typographique principal à max-w-4xl ou max-w-5xl pour conserver des proportions éditoriales.
- 03Appliquer la hiérarchie typographique et les variables monochromes
Définir immédiatement les polices personnalisées et les variables de couleur selon les spécifications de la palette monochrome chaude.
- 04Imposer les normes de bordure
Chaque carte, séparateur et bordure doit utiliser exactement 1px solid #EAEAEA.
- 05Ajouter des animations d'entrée au défilement
Appliquer des animations à tous les blocs de contenu principaux en utilisant IntersectionObserver, jamais des écouteurs window scroll.
- 06Assurer la profondeur visuelle
Les sections ont besoin de profondeur grâce à des images, des dégradés d'ambiance ou des textures subtiles, plutôt que des arrière-plans plats et vides.