Frontend & UI
imagegen-frontend-web
Erzeugt ein horizontales Referenzbild pro Section einer Landingpage.
Worum es geht
Ein Bild-Regie-Skill für Website-Design-Referenzen. Er erzeugt ein separates horizontales Bild je Section, mit einer festen Palette und variierender Hero-Komposition über das gesamte Set.
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections pro
Warum das fürs Design zählt
- Eine Landingpage mit acht Sections ergibt acht lesbare Comps, kein zusammengequetschtes Board.
- Die Hero-Komposition variiert über das ausgelutschte Standardmuster links Text, rechts Bild hinaus.
- Eine Palette, eine Schriftskala und eine CTA-Familie gelten für jeden erzeugten Frame.
Was es abdeckt
- Image count and page slicing
- The combinatorial variation engine
- Hero minimalism rules
- Color and material rules
- Multi-image consistency rule
- Default site packs
So installierst du es
imagegen-frontend-web
-
Klone das Repo.
git clone https://github.com/Leonxlnx/taste-skill -
Verweise Codex auf die Skill-Datei.
skills/imagegen-frontend-web/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Sag, wie viele Sections du willst, ohne Angabe setzt der Skill standardmäßig sechs an.
-
Der Skill nennt zuerst die Anzahl und beschriftet dann jede Ausgabe mit ihrer Section-Nummer.
-
Gib Stimmungswörter wie editorial oder cinematic an, um Hero-Größe und Hintergrund zu lenken.
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.