banner-designvon nextlevelbuilder

Banner Design Skill.

Ein Claude Code und Codex Skill für Bildarbeit: Banner für Social Media, Anzeigen, Website-Heroes und Print.

Images & Generative Art
Image

OpenDesign herunterladen Anleitung ansehen

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/banner-design/SKILL.mdSKILL.md

--- name: banner-design description: Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, … --- ## When to Activate ## Workflow ## Art Direction Styles (Top 10) ## Design Rules ## Security

Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 7.010 Zeichen insgesamt

01 Was es tut

Was die banner-design 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

Entwirft Banner für Social-Media-Cover, Werbekampagnen, Website-Hero-Bereiche und Print, indem mehrere Art-Direction-Optionen in HTML/CSS erzeugt werden. Erfasst Anforderungen durch strukturierte Fragen (Plattform, Inhalt, Marke, Stil, Menge), verweist auf mitgelieferte Größen- und Sicherheitszonen-Richtlinien und exportiert pixelgenaue PNGs in exakten Plattformabmessungen.

Unterstützt 22 Art-Direction-Stile, darunter minimalistisch, Gradient, fette Typografie, fotobasiert, geometrisch, Glasmorphismus und Neon. Deckt Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display und benutzerdefinierte Formate ab. Standardmäßig 3 Optionen pro Anfrage. Verwendet vom Nutzer bereitgestellte Assets, mit CSS erstellte Visuals oder optional generierte Hintergründe – erfindet niemals Markenregeln. Übernimmt keine Videobearbeitung, kein vollständiges Website-Design und keine Druckproduktion.

Was er erzeugt

PNG-Bilddateien in exakten Plattformabmessungen, exportiert nach assets/banners/{campaign}/ mit Kebab-Case-Benennung
HTML/CSS-Quellcode für jede Banner-Variante, falls eine Bildaufnahme nicht möglich ist

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Anforderungen über strukturierte Fragen erfassen
Erfasst Zweck (Social Cover, Anzeige, Hero, Print), Plattform oder benutzerdefinierte Abmessungen, Inhalt (Headline, Subtext, CTA, Logo), Markenrichtlinien, Stilpräferenz und Menge (standardmäßig 3 Optionen).
02
Art Direction und Sicherheitszonen recherchieren
Liest die mitgelieferte Referenz banner-sizes-and-styles.md für Zielformat, Sicherheitszonen und geeignete Stile.
03
Jede Option in HTML/CSS gestalten
Erstellt Banner in exakten Plattformabmessungen mit Sicherheitszonen-Regeln (kritischer Inhalt in den zentralen 70–80 %), unter Verwendung von höchstens 2 Schriftarten, einem einzigen CTA und einem Textkontrast von 4,5:1.
04
Visuelle Quelle pro Option wählen
Bevorzugt vom Nutzer bereitgestellte Assets, verwendet mit CSS erstellte Visuals (Gradients, geometrische Formen) für ergebnisse ohne Abhängigkeiten, oder generiert optional Hintergründe im Zielseitenverhältnis, falls die Laufzeitumgebung dies unterstützt.
05
Banner als PNG-Bilder exportieren
Zeigt jedes Banner im Browser in exakter Viewport-Größe an, erfasst es mit der Standard-Screenshot-Funktion als PNG und prüft Pixelabmessungen, Sicherheitszonen-Zuschnitt, Schriftladung und Bildqualität.
06
Optionen mit Begründung präsentieren
Zeigt alle exportierten Bilder nebeneinander mit dem Namen des Art-Direction-Stils, einer Vorschau, der wichtigsten Design-Begründung, dem Dateipfad und den Abmessungen.

02 Finden Sie Ihren Favoriten

Wann der banner-design-Skill zu verwenden ist

Verwenden Sie den banner-design-Skill in Claude Code oder Codex, wenn die Aufgabe Bildarbeit dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Erstellung von Social-Media-Covers oder Headern für Plattformen wie Facebook, Twitter/X, LinkedIn, YouTube und Instagram
Gestaltung von Werbebannern oder Display-Ads für Google Ads und andere Werbeplattformen
Visuelles Design für Website-Hero-Bereiche in Standard- oder benutzerdefinierten Abmessungen
Design für Event- oder Druckbanner mit CMYK-Ausgabe und Anschnitt-Spezifikationen
Erstellung von Creative Assets für Kampagnen, die mehrere Art-Direction-Varianten erfordern

Grenzen kennen

Videobearbeitung oder Motion Graphics für Banner

Was Sie bereitstellen sollten

Plattform- oder benutzerdefinierte AbmessungenGibt die Ziel-Social-Plattform an (Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Ads) oder liefert exakte Pixelmaße für benutzerdefinierte Formate.
InhaltselementeLiefert Headline, unterstützenden Text, Call-to-Action-Text und Anforderungen zur Logoplatzierung für die Banner-Komposition.
Markenrichtlinien und AssetsStellt vorhandene Markenfarben, Typografie-Spezifikationen, Logodateien und andere verifizierte Markenvorgaben zur Anwendung bereit.
Präferenz für Art DirectionGibt den gewünschten Stil aus 22 Optionen an (minimalistisch, Gradient, fette Typografie, geometrisch, Glasmorphismus, Neon usw.) oder bittet um Stilempfehlungen.

03 Innerhalb des Skills

Regeln, die der banner-design-Skill Claude Code und Codex vorgibt

6 konkrete Anweisungen, Vorgaben und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Standardmäßig 3 Art-Direction-Optionen
Erzeugt 3 Designoptionen pro Anfrage, sofern der Nutzer während der Anforderungsermittlung keine andere Anzahl angibt.
Maximal 2 Schriftarten und 1 CTA pro Banner
Verwendet höchstens 2 Schriftarten und enthält einen einzigen Call-to-Action, unten rechts positioniert, mit mindestens 44px Höhe und einem Aktionsverb.
Erfindet niemals Markenrichtlinien
Wendet nur vom Nutzer bereitgestellte oder verifizierte Markenregeln, Farben, Logos und Typografie an. Erfindet keine Markenspezifikationen.
Textanteil bei Ads unter 20% halten
Begrenzt den Textanteil bei Werbeformaten auf unter 20% der Bannerfläche, da Meta stark textbetonte Displaywerbung abwertet.
Druckspezifikationen: 300 DPI, CMYK, 3–5mm Anschnitt
Erstellt Druckbanner mit 300 DPI Auflösung im CMYK-Farbraum mit 3–5mm Anschnitträndern für professionelle Ausgabe.
Verwendet die kebab-case-Namenskonvention für Dateien
Benennt exportierte Dateien als {style}-{width}x{height}.{ext} in kebab-case, optional mit dem Präfix {YYMMDD}- für zeitkritische Kampagnen.

04 In Betrieb nehmen

banner-design 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.

banner-design 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/nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design

Generische skills-CLI-Form für .claude/skills/banner-design/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Gib dem Skill eine erste Bildarbeitsaufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Design 3 LinkedIn cover banners for our Q2 product launch. The headline is "Ship faster with AI-powered workflows," subtext "Join 10,000+ teams building better software," and CTA "Start free trial." Use our logo from assets/logo.svg, brand colors #0066FF (primary) and #00CC88 (accent), and Inter font family. Show minimalist, gradient, and bold typography options at 1584×396.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Prüfen Sie, ob die exportierten PNG-Abmessungen exakt den Plattformspezifikationen aus der Größenreferenz entsprechen
Bestätigen Sie, dass die Dateigröße die Plattformgrenzen nicht überschreitet, und optimieren oder reduzieren Sie bei Bedarf die Qualität

In OpenDesign importieren Sie banner-design über seinen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

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

Author: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Skill-Datei: .claude/skills/banner-design/SKILL.md Inhaltsprüfsumme bei Verifizierung erfasst; Commit 7f69fed
License: MIT Aus LICENSE; SKILL.md nennt „MIT".
Repository-Sterne: 127.450 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository nextlevelbuilder/ui-ux-pro-max-skill, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für banner-design.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Wann aktivierenListet Auslöser auf: Banner-/Cover-/Header-Anfragen, Social Media, Anzeigen, Hero-Bereiche, Events, Kreativkampagnen
Verfügbare RessourcenIn sich geschlossener Workflow mit gebündelter Größenreferenz; Browser-Recherche und Bildgenerierung sind optional
WorkflowFünfstufiger Prozess von der Anforderungserhebung über Recherche, Design, Export bis zur Iteration
Schritt 1: Anforderungen erfassen (AskUserQuestion)Erfasst Zweck, Plattform, Inhalt, Marke, Stilpräferenz und Menge über strukturierte Fragen
Schritt 2: Recherche & Art DirectionLiest die Größenreferenz, recherchiert optional Beispiele, wählt 2–3 komplementäre Art Directions
Schritt 3: Design & Optionen generierenErstellt HTML/CSS-Banner in exakten Abmessungen mit Sicherheitszonen, wählt visuelle Quelle, komponiert die finale Version
Schritt 4: Banner als Bilder exportierenVorschau im Browser, erfasst PNG, prüft Abmessungen und Qualität, optimiert bei Bedarf
Schritt 5: Optionen präsentieren & iterierenZeigt alle Varianten mit Begründung und Dateipfaden, iteriert basierend auf Feedback
Schnellreferenz für BannergrößenTabelle gängiger Plattformgrößen: Facebook, Twitter, LinkedIn, YouTube, Instagram, Google, Website-Hero
Art-Direction-Stile (Top 10)Tabelle mit 10 Stilen inklusive bester Anwendungsfälle und Schlüsselelemente; vollständige 22 in der Referenz
DesignregelnSicherheitszonen, CTA-Platzierung, Typografiegrenzen, Textverhältnis, Druckspezifikationen, Regeln zur Markenanwendung
SicherheitStandard-Schutzmaßnahmen: keine Skill-Interna, explizite Ablehnung außerhalb des Umfangs, keine Datenoffenlegung, Rollengrenzen

Die eigene Beschreibung des Skills

„Gestalten Sie Banner für soziale Medien, Anzeigen, Website-Hero-Bereiche, kreative Assets und Print. Mehrere Art-Direction-Optionen mit optionalen generierten oder bereitgestellten Bildern. Aktionen: design, create, generate banner. Plattformen: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, Website-Hero, Print. Stile: minimalistisch, Farbverlauf, fette Typografie, fotobasiert, illustriert, geometrisch, retro, Glassmorphismus, 3D, Neon, Duoton, Editorial, Collage."

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

06 Vor der Installation

Fragen zum Skill banner-design

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Erfordert dieser Skill externe Bildgenerierung oder Browser-Tools?

Nein. Der Workflow ist in sich geschlossen und nutzt CSS-erstellte Visuals (Verläufe, geometrische Formen, Typografie) für abhängigkeitsfreie Ergebnisse. Browser-Recherche, Bildgenerierung und Screenshot-Tools sind optionale Fähigkeiten, die das Ergebnis verbessern, wenn verfügbar, aber nicht erforderlich sind.

Banner Design

Führen Sie banner-design für eine echte Bildaufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie banner-design über den SKILL.md-Link, fügen Sie die obige Eingabe ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen