Frontend & UI
image-to-code
Génère d’abord des images de design, les analyse, puis construit le code frontend correspondant.
De quoi il s’agit
Un workflow qui part de l’image pour les tâches web visuelles. L’agent génère des images de référence par section, en extrait typo, espacement, couleur et composants, puis implémente le site en conséquence.
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In C
Pourquoi ça compte pour le design
- Le code suit une vraie référence visuelle, donc l’implémentation ne dérive pas vers des mises en page génériques.
- Chaque section reçoit sa propre grande image, ce qui garde le texte et l’espacement analysables.
- Les heros restent sous trois lignes de titre et sans empilement de conteneurs imbriqués.
Ce que ça couvre
- Mandatory image-first rule
- Generate enough images rule
- Deep image analysis requirement
- Hero minimalism rules
- Anti-drift implementation rule
- Anti-AI-slop rules
Comment l’installer
image-to-code
-
Clonez le dépôt.
git clone https://github.com/Leonxlnx/taste-skill -
Pointez Codex sur le fichier du skill.
skills/image-to-code-skill/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Indiquez le nombre de sections ; dans Codex, le skill génère une image par section.
-
Demandez un rendu de détail plus rapproché si un bouton ou une typo reste illisible.
-
Faites-lui lancer la vérification de clarté avant d’écrire le moindre fichier d’implémentation.
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 imagegen-frontend-mobile Génère des parcours d’écrans d’app mobile premium en images, pas en code. 
Frontend & UI Ce qu’il fait imagegen-frontend-web Génère une image de référence horizontale par section de landing page. 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.