Frontend & UI
UI-UX Pro Max · Banner Design
Conçoit des bannières aux bonnes dimensions en HTML, puis les exporte en PNG.
De quoi il s’agit
Un workflow de bannière en cinq étapes : recueillir le besoin, chercher une direction artistique, construire la bannière en HTML et CSS avec des visuels générés, capturer aux pixels exacts de la plateforme, puis présenter des options à itérer.
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, Linked
Pourquoi ça compte pour le design
- Chaque bannière s’exporte aux pixels exacts de la plateforme : rien n’est rogné ni redimensionné.
- Les visuels générés sont rendus sans texte : les titres restent en HTML net.
- Trois directions artistiques par demande : on compare avant de s’engager.
Ce que ça couvre
- Workflow
- Banner size quick reference
- Art direction styles
- Design rules
- Prerequisites
Comment l’installer
UI-UX Pro Max · Banner Design
-
Clonez le dépôt.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Pointez Codex sur le fichier du skill.
cli/assets/skills/banner-design/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Répondez aux questions d’objectif, de plateforme, de contenu, de marque, de style et de quantité.
-
Il construit une bannière HTML par direction artistique, zones sûres appliquées.
-
Il capture chacune à la largeur et à la hauteur fixées, en compressant les fichiers trop lourds.
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.