83.3K+Download
Zur Nutzungsanleitung springen
imagegen-frontend-webvon Leonxlnx

ImageGen Frontend Web Skill.

Ein Claude Code- und Codex-Skill für UI-Design: abschnittsweise Website-Design-Referenzen über Bilderzeugung.

  • Web & UI
  • Image
OpenDesign herunterladenAnleitung ansehen
Leonxlnx/taste-skill · skills/imagegen-frontend-web/SKILL.mdSKILL.md
--- name: imagegen-frontend-web description: 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 produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. THE COMBINATORIAL VARIATION ENGINE ## 3. FRONTEND REFERENCE RULE ## 4. HERO MINIMALISM RULES ## 5. IMAGE COUNT & PAGE SLICING ## 6. CREATIVITY ESCALATION RULE
Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 36.780 Zeichen insgesamt

01 Was es tut

Was der imagegen-frontend-web Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Der Skill erzeugt hochwertige Website-Design-Referenzen als separate horizontale Bilder – ein Bild pro Abschnitt. Er setzt Kompositionsvielfalt jenseits des überstrapazierten Links-Text/Rechts-Bild-Musters durch, verwendet Randlos-Hintergründe selbstbewusst, variiert Hero-Größen (riesig/mittel/mini) und behält eine einzige durchgängige Palette über alle Abschnitte bei. Konzipiert für Landingpages, Marketing-Websites und Produkt-Comps, die Entwickler oder Coding-Modelle nachbilden können.

Er verwendet konfigurierbare Basis-Regler: DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8. Der Skill durchbricht KI-Standards durch kombinatorische Variation – die Wahl von einem Theme-Paradigma, typografischem Charakter, Hero-Architektur, Abschnittssystem und narrativer Konzeptachse – während er Konversionsdisziplin und großzügige, gleichmäßige Abstände zwischen den Abschnitten beibehält.

Was er erzeugt

  • Horizontale Bilder (16:9, 16:10 oder 21:9), die pro Frame einen fokussierten Abschnitt in hoher Wiedergabetreue darstellen
  • Abschnittsweise beschrifteter Bildsatz: „Abschnitt X von N: <Name>“, bis die vollständige Anzahl geliefert ist
  • Konsistente Markenwelt über alle Frames hinweg: gleiche Palette, Schriftfamilie, CTA-Identität, Eckenradius, Bildbehandlung, tonale Stimme
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Briefing Lesen und Basis-Regler Anpassen

    Der Skill liest den Nutzer-Prompt sorgfältig und passt dann Regler (Design-Varianz, visuelle Dichte, Art Direction, Implementierungsklarheit, Bildnutzung, Abstand, Layout-Variation, Konversionsdisziplin), Hero-Größe, Hintergrundmodus, Gradientennutzung und Kompositionsvielfalt an das Briefing an.

  2. 02
    Eine Option aus Jeder Kombinatorischen Kategorie Wählen

    Der Skill legt sich auf ein Theme-Paradigma, einen Hintergrundcharakter, einen typografischen Charakter, eine Hero-Architektur, ein Abschnittssystem, genau 4 signaturhafte Komponenten, genau 2 bewegungsimplizierte Sprachen und eine narrative Konzeptachse fest – alles basierend auf dem Prompt.

  3. 03
    Ein Horizontales Bild pro Abschnitt Erzeugen

    Jeder Abschnitt erhält sein eigenes separates horizontales 16:9-, 16:10- oder 21:9-Bild. Der Skill kombiniert niemals mehrere Abschnitte in einem Frame und liefert nie einen einzelnen hohen Ausschnitt zurück.

  4. 04
    Kompositionsanker und Hintergrundmodi Variieren

    Über die Abschnitte hinweg wählt der Skill unterschiedliche Kompositionsanker (zentriert, unten links über Bild, oben links führend, gestapelt zentriert, off-grid editorial usw.) und Hintergrundmodi (einfarbig, randlos mit Bild, editoriales Seitenbild, Duoton, radiale Vignette), damit die Seite repetitive KI-Layouts vermeidet.

  5. 05
    21-Punkte-Klarheitsprüfung vor der Ausgabe durchführen

    Vor der Finalisierung überprüft der Skill Hierarchie, Sauberkeit des Heros, visuelle Unterscheidbarkeit, Abwesenheit von KI-Merkmalen, hochwertiges Empfinden, Codierbarkeit, Konsistenz über mehrere Bilder hinweg, Bildstärke, Freiraum, gleichmäßige Abstände, bewusste Kreativität und korrekte Bildanzahl.

02 Finden Sie Ihren Favoriten

Wann der imagegen-frontend-web Skill zu verwenden ist

Verwenden Sie den imagegen-frontend-web-Skill in Claude Code oder Codex, wenn die Aufgabe UI-Design dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Landingpages, Marketing-Websites und Produkt-Comps, die Entwickler oder Coding-Modelle präzise nachbilden müssen
  • Hochwertige Designs mit klaren Konversionsfunneln – keine reinen Kunst-Moodboards
  • Bildgeführte Designs, die Fotografie als zentrales Designmaterial nutzen
  • Entwickler oder Coding-Modelle, die sehr codierbare UI-Referenzen benötigen
  • Websites, die eine ausgeprägte Kompositionsvielfalt über Abschnitte hinweg benötigen, um repetitive KI-Layouts zu vermeiden

Grenzen kennen

  • Anfragen, die ein einziges kombiniertes hohes Bild anstelle separater Frames pro Abschnitt wünschen
  • Sichere kommerzielle Layouts ohne gestalterischen Anspruch oder gewagte Aussagen

Was Sie bereitstellen sollten

  • Site-Typ und Conversion-ZielDer Skill leitet aus dem Prompt den Site-Typ (Landingpage, Marketing-Site, Produktseite, Portfolio, SaaS, E-Commerce, Agentur, Editorial) und das primäre Conversion-Ziel ab, um Designentscheidungen zu steuern.
  • Anzahl der Sections oder Standardwert bei UnklarheitGeben Sie die Anzahl der Sections an, sonst setzt der Skill standardmäßig 6 für Landingpages und 8 für vollständige Websites.
  • Stichwörter zur MarkenstimmungBegriffe wie minimalistisch, clean, editorial, magazine, cinematic, atmosphärisch, premium, luxuriös, SaaS, product, fintech, agency, creative studio, e-commerce steuern Hero-Größe, Hintergrundmodus, Gradient-Einsatz und Kompositionsentscheidungen.
  • Branche oder Region für kulturelle AusrichtungNennt das Briefing eine Branche oder Region, richtet der Skill Palette und typografisches Temperament entsprechend aus – statt standardmäßig auf ein neutrales SF-Startup-Bild zurückzugreifen, außer bei bewusst generischem SaaS.

03 Innerhalb des Skills

Regeln, die der imagegen-frontend-web Skill Claude Code und Codex vorgibt

4 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt — der Teil der Datei, der das Ergebnis verändert.

  1. Standardmäßig linken Text/rechtes Bild-Hero vermeiden

    Der Standard-Hero mit Text links/Bild rechts ist das am häufigsten überstrapazierte KI-Muster.

  2. Komposition variieren — mindestens 3 verschiedene Anker müssen vorkommen

    Jede Section wählt einen Kompositionsanker (zentriert, oben links führend, unten links über Bild, unten rechts CTA-Cluster, linkes Drittel/rechte zwei Drittel, rechtes Drittel/linke zwei Drittel, zentriert tief, off-grid editorial, gestapelt zentriert, Bild als Leinwand).

  3. Standard-Section-Anzahl nach Anfragetyp

    Landingpage oder Site-Template hat standardmäßig 6 Sections (6 Bilder). Vollständige Website oder Marketing-Site hat standardmäßig 8 Sections (8 Bilder). Produktseite oder Portfolio hat standardmäßig 6 Sections.

  4. Hero-Headline kurz und kraftvoll halten

    Die H1 sollte optisch wie eine Premium-Aussage wirken. Headlines sollten meist wie 5-10 starke Wörter klingen, nicht wie ein Absatz.

04 In Betrieb nehmen

imagegen-frontend-web in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

imagegen-frontend-web zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-web

Generische skills-CLI-Form für skills/imagegen-frontend-web/SKILL.md; das Repository dokumentiert eventuell einen eigenen Pfad.

Dem Skill eine erste UI-Design-Aufgabe geben

Passen Sie diesen Prompt mit Ihren eigenen Inhalten und Vorgaben an und führen Sie ihn dann in Claude Code oder Codex aus.

Example prompt
design 8 sections for a fintech website

Quelle: SKILL.md-Beispiel (wörtlich).

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Die Gesamtzahl der Bilder entspricht der Anzahl der Sections — nie weniger
  • Die Seite atmet — der Abstand zwischen den Sections ist gleichmäßig und kontrolliert, nicht zu dicht
  • Die Komposition variiert über die Sections hinweg — Anker und Hintergrundmodi sind gemischt
  • Jemand kann anhand dieser Referenz programmieren

In OpenDesign ist imagegen-frontend-web mitgeliefert: Plugins → Skills, in der oberen Leiste auswählen.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Skill-Datei
skills/imagegen-frontend-web/SKILL.md Inhaltsprüfsumme bei Verifizierung erfasst; Commit ccbc156
License
MIT Aus LICENSE.
Repository-Sterne
86.946 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository Leonxlnx/taste-skill, das 11 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für imagegen-frontend-web.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. HARTE AUSGABEREGEL — ZUERST LESENErzeugen Sie immer ein separates horizontales Bild pro Section, kombinieren Sie niemals mehrere Sections in einem Frame
  2. HERO-KOMPOSITIONS-BIAS — ZUERST LESENVermeiden Sie den überstrapazierten Standard-Hero mit Text links/Bild rechts; bevorzugen Sie Alternativen wie zentriert über Hintergrund oder unten links über Bild
  3. 1. AKTIVE BASISKONFIGURATIONSetzt Regler: DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8, angepasst aus dem Prompt
  4. 2. DIE KOMBINATORISCHE VARIATIONS-ENGINEWählen Sie eine Option aus jeder Kategorie: Theme-Paradigma, Hintergrundcharakter, Typografie-Charakter, Hero-Architektur, Sektionssystem, 4 charakteristische Komponenten, 2 Bewegungssprachen, narrative Grundstruktur
  5. 4. REGELN FÜR HERO-MINIMALISMUSHalten Sie den Hero klar, die Headline kurz und kraftvoll, priorisieren Sie negativen Raum, überfrachten Sie das erste Viewport nicht mit Pills und Details
  6. 5. BILDANZAHL & SEITENAUFTEILUNGEin horizontales Bild pro Sektion; Standard: 6 für Landingpages, 8 für vollständige Websites; mischen Sie unterschiedliche Sektionsgrößen; erzwingen Sie Kontinuität über alle Frames
  7. 6. REGEL ZUR KREATIVITÄTSSTEIGERUNGZeigen Sie echten kreativen Anspruch, indem Sie mindestens 3 dieser Aspekte steigern: Komposition, Typografie, Skalenkontrast, Hero-Konzept, Bildbehandlung, Sektionsrhythmus, Bildausschnitt
  8. 7. IMAGE-FIRST ART DIRECTIONNutzen Sie Bilder aktiv als zentrales Gestaltungsmaterial: art-direktierte Fotografie, Produktbilder, redaktionelle Bilder, Bildausschnitte, gerahmte Panels, geschichtete Kompositionen
  9. 8. ANTI-AI-SLOP-REGELNVerboten: endlose zentrierte Sektionen, lila/blaue KI-Verläufe, schwebende Blobs, Glassmorphism-Spam, Gradient-Headlines, generische Texte, Marquee-Logo-Leisten, gefälschte KPIs
  10. 10. REGEL ZUM SEKTIONSRHYTHMUSVariieren Sie den Sektionsrhythmus durch Änderung von Dichte, Bild-Text-Verhältnis, Ausrichtung, Skalierung, Weißraum, Card-Gruppierung, Hintergrundintensität; vermeiden Sie wiederholte Template-Boxen
  11. 12. DISZIPLIN BEI DICHTE & ABSTANDDie Seite muss atmen; verwenden Sie gleichmäßige vertikale Abstände zwischen den Hauptsektionen, vermeiden Sie Sprünge von eng zu leer, Weißraum ist ein Gestaltungswerkzeug
  12. 13. FARB- & MATERIALREGELNVerwenden Sie eine kontrollierte Palette: 1 Primärfarbe, 1 Sekundärfarbe, 1 Akzentfarbe, eine neutrale Skala; professionelle Farbverläufe sind erlaubt; Regenbogen-Mesh-Blobs sind verboten
Die eigene Beschreibung des Skills
"Elite-Frontend-Bildregie-Skill für Premium-Website-Design-Referenzen mit Conversion-Bewusstsein. KRITISCHE AUSGABEREGEL — generieren Sie EIN separates horizontales Bild FÜR JEDE Sektion. Eine Landing-Page mit 8 Sektionen ergibt 8 Bilder. Komprimieren Sie niemals mehrere Sektionen in ein Bild. Erzwingt Kompositionsvielfalt (nicht immer Text links / Bild rechts), Hintergrundbild-Freiheit, variierende CTAs, variierende Hero-Größen (riesig / mittel / minimalistisch mini), narrativen Konzept-Leitfaden, Second-Read-Momente und eine einzige konsistente Palette über alle Bilder hinweg. Optimiert für Landing-Pages, Marketing-Sites und Produkt-Komps, die Entwickler oder Coding-Modelle präzise nachbauen können."

Front-matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 36.780 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

ImageGen Frontend Web

imagegen-frontend-web für eine echte UI-Design-Aufgabe ausführen.

Der imagegen-frontend-web Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie den Skill unter Plugins → Skills, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladenAlle Skills durchsuchen
Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-web