Frontend & UI
Impeccable
Une vingtaine de commandes pour construire, critiquer et affiner des interfaces frontend.
De quoi il s’agit
Un skill de design frontend dont les commandes se regroupent en build, evaluate, refine, enhance, fix et iterate. Il lit le contexte du projet et une référence de registre, puis écrit du code de niveau production.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing page
Pourquoi ça compte pour le design
- La séparation par registre envoie pages marketing et UI produit vers des règles de design distinctes.
- Des interdits absolus rejettent le texte en dégradé, les bordures à liseré latéral et les eyebrows au-dessus de chaque section.
- Les planchers de contraste sont explicites : 4.5:1 pour le corps de texte, 3:1 pour le grand texte.
Ce que ça couvre
- Setup
- Design guidance
- The AI slop test
- Commands
- Routing rules
- Hooks
Comment l’installer
Impeccable
-
Clonez le dépôt.
git clone https://github.com/pbakaus/impeccable -
Pointez Codex sur le fichier du skill.
plugin/skills/impeccable/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Lancez context.mjs une fois par session pour que le skill charge PRODUCT.md et DESIGN.md.
-
Invoquez une commande comme critique, polish ou animate avec un fichier cible.
-
Utilisez le mode live avec un dev server actif pour générer des variantes dans le navigateur.
Chaque plugin présenté ici est gratuit, open source, et renvoie à sa vraie source amont.
En savoir plus sur la liste codex-design ↗Autres plugins design pour Codex
Frontend & UI Ce qu’il fait gpt-taste Construit des pages primables avec du scroll GSAP et des grilles bento sans trous. 
Design systems Ce qu’il fait Stitch Design Taste Rédige un DESIGN.md qui oriente Google Stitch vers des écrans non génériques. 
Frontend & UI Ce qu’il fait image-to-code Génère d’abord des images de design, les analyse, puis construit le code frontend correspondant. 
Frontend & UI Ce qu’il fait imagegen-frontend-mobile Génère des parcours d’écrans d’app mobile premium en images, pas en code. Prochaine étape
Designez avec Open Design, sans la config
Installez ce plugin vous-même, ou faites tourner toute une couche design sélectionnée autour de Codex avec Open Design. Apportez votre clé, gardez la main sur ce que vous produisez.