Frontend & UI
UI-UX Pro Max · Banner Design
Gestaltet maßgenaue Banner in HTML und exportiert sie dann als PNGs.
Worum es geht
Ein fünfstufiger Banner-Workflow: Anforderungen sammeln, Art Direction recherchieren, das Banner in HTML und CSS mit generierten Visuals bauen, auf exakte Plattform-Pixel screenshotten und dann Optionen zur Iteration zeigen.
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
Warum das fürs Design zählt
- Jedes Banner exportiert in exakten Plattform-Pixeln, damit nichts beschnitten oder skaliert wird.
- Generierte Visuals werden ohne Text gerendert, damit Headlines gestochenes HTML bleiben.
- Drei Art Directions pro Anfrage, damit der Vergleich vor der Festlegung kommt.
Was es abdeckt
- Workflow
- Banner size quick reference
- Art direction styles
- Design rules
- Prerequisites
So installierst du es
UI-UX Pro Max · Banner Design
-
Klone das Repo.
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill -
Verweise Codex auf die Skill-Datei.
cli/assets/skills/banner-design/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Beantworte die Fragen zu Zweck, Plattform, Inhalt, Marke, Stil und Menge.
-
Er baut ein HTML-Banner pro Art Direction mit angewandten Safe Zones.
-
Er screenshottet jedes in fester Breite und Höhe und komprimiert Dateien über dem Limit.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.