designvon nextlevelbuilder

Design Skill.

Ein Claude Code und Codex Skill für Marken- und Design-System-Arbeit: Markenidentität, Design Tokens, UI-Styling, Logo-Generierung und Corporate-Identity-Programme.

Brand & Design Systems

OpenDesign herunterladen Anleitung ansehen

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

--- name: design description: Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, … --- ## When to Use ## Sub-skill Routing ## Script Paths ## Logo Design (Built-in) ## CIP Design (Built-in) ## Slides (Built-in)

Front Matter und Abschnittsüberschriften aus der Quelldatei vom 14.09.2026 · 13.348 Zeichen insgesamt

01 Was es tut

Was der 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

Vereinheitlichte Design-Skill für Markenidentität, Design-Tokens, UI-Styling mit shadcn/ui und Tailwind, Logo-Generierung (55 Stile über Gemini, Atlas Cloud oder MuAPI), Corporate-Identity-Programme mit 50 Deliverables, HTML-Präsentationen mit Chart.js, Banner-Design (22 Art-Direction-Stile für Social, Ads, Web, Print), Icon-Design (15 Stile, SVG-Ausgabe über Gemini 3.1 Pro) sowie Social-Media-Fotodesign für Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok und Threads. Leitet an externe Sub-Skills für brand, design-system und ui-styling weiter und bietet zugleich integrierte Workflows für Logo, CIP, Slides, Banner, Icons und Social-Fotos mit Python-Skripten, KI-Generierung und HTML-zu-Screenshot-Export.

Was er erzeugt

Banner-PNG-Screenshots in exakten Plattformabmessungen, exportiert über chrome-devtools
SVG-Icon-Dateien in 15 Stilen mit optionalen Mehrgrößen-Exporten und Batch-Varianten
Social-Media-Bilder in plattformspezifischen Abmessungen, gespeichert in organisierten Asset-Verzeichnissen

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Nach Aufgabentyp weiterleiten
Der Skill leitet Markenidentität und -stimme an den Brand-Sub-Skill, Tokens und Spezifikationen an design-system sowie shadcn/ui- und Tailwind-Code an ui-styling weiter und übernimmt Logo, CIP, Slides, Banner, Icons und Social-Fotos mit integrierten Workflows.
02
Logos mit KI-Anbietern generieren
Führen Sie Python-Skripte aus, um 55 Stile, 30 Farbpaletten und 25 Branchenleitfäden zu durchsuchen, und generieren Sie dann Logos über Gemini Nano Banana, Atlas Cloud oder MuAPI mit weißen Hintergründen.
03
CIP-Deliverables mit Mockups erstellen
Generieren Sie Mockups für Corporate-Identity-Programme für 50 Deliverables mit den Modellen Gemini Flash oder Pro, optional mit Logo-Overlay, und rendern Sie anschließend HTML-Präsentationen der Ausgabe.
04
Strategische HTML-Präsentationen erstellen
Erstellen Sie Präsentationen mit Chart.js-Integration, Design-Tokens und Copywriting-Formeln, indem Sie die Referenz zum Slides-Erstellungsworkflow laden.
05
Banner mit HTML/CSS gestalten
Anforderungen erfassen, auf Pinterest über ui-ux-pro-max recherchieren, HTML/CSS-Banner mit frontend-design und ai-artist/ai-multimodal für Visuals gestalten und dann über chrome-devtools in exakten Abmessungen exportieren.
06
Screenshots exportieren und prüfen
Verwenden Sie chrome-devtools oder Playwright, um Designs mit exakten Pixelabmessungen und 2x-Device-Scale-Factor zu screenshoten, und prüfen Sie dann visuell und beheben Layoutprobleme vor dem endgültigen Export.

02 Finden Sie Ihren Favoriten

Wann Sie den design-Skill verwenden

Verwenden Sie den design Skill in Claude Code oder Codex, wenn die Aufgabe Marken- und Designsystem-Arbeit dieser Art ist. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Erstellung von Markenidentitätspaketen mit Logo, Corporate-Identity-Deliverables und Pitch-Deck-Präsentationen
Gestaltung von Social-Media-Bildern für mehrere Plattformen wie Instagram, Facebook, LinkedIn, Twitter, Pinterest und TikTok
Erstellung von Bannern für Social-Media-Cover, Werbekampagnen, Website-Header und Druckmaterialien
Aufbau von Design-Systemen mit semantischen Tokens, Tailwind-Konfiguration und shadcn/ui-Komponenten

Grenzen kennen

Der Icon-Generator erzeugt ausschließlich SVG-Textausgaben, keine Rasterbilddateien

Was Sie bereitstellen sollten

Gemini API keyErforderliche Umgebungsvariable für die Logo-, CIP- und Icon-Generierung über Google AI Studio
MuAPI API key (optional)Optionale Umgebungsvariable, um MuAPI als alternativen Bildgenerierungsanbieter für Logos zu verwenden
Logo-Dateipfad für CIPPfad zu einer vorhandenen Logo-PNG-Datei, die bei der Generierung von CIP-Mockups auf Corporate-Identity-Deliverables gelegt wird
Banner-Anforderungen über AskUserQuestionZweck, Plattform, Inhalt, Markenrichtlinien, Art-Direction-Stil und Menge werden vor der Banner-Gestaltung interaktiv erfasst
Markenkontext für Social-FotosMarkenrichtlinien aus dem Brand-Sub-Skill und Design-Tokens aus design-system, um Konsistenz über Social-Media-Bilder hinweg zu gewährleisten

03 Innerhalb des Skills

Regeln, die der Design-Skill Claude Code und Codex vorgibt

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

Logos immer mit weißem Hintergrund generieren
Die Logo-Generierung muss in allen Fällen Ausgabebilder mit weißem Hintergrund erzeugen.
Skriptpfade sind relativ zum Skill-Verzeichnis
Skriptpfade in diesem Skill und seinem references-Ordner sind relativ zum Verzeichnis, das SKILL.md enthält, nicht zum Projektstamm.
Nach der Logo-Generierung nach einer HTML-Vorschau fragen
Fragen Sie den Benutzer nach der Logo-Generierung immer über AskUserQuestion, ob er eine HTML-Vorschaugalerie möchte, und rufen Sie bei Zustimmung den ui-ux-pro-max-Skill auf, um sie zu erstellen.
Fehlgeschlagene Skripte direkt beheben
Wenn Python-Skripte während der Ausführung fehlschlagen, versuchen Sie, sie direkt zu beheben, anstatt den Fehler nur zu melden.
Empfohlenes Logo-Overlay für CIP verwenden
Beim Erstellen von CIP-Mockups ist die Verwendung einer vorhandenen Logodatei mit dem Flag --logo der empfohlene Ansatz.
Banner-Text muss bei Anzeigen unter 20 % bleiben
Halten Sie bei Werbebannern den Textanteil unter 20 % der Gesamtfläche, da Meta-Plattformen textreiche Anzeigen abstrafen.
Unter Windows Python statt Python3 verwenden
Ersetzen Sie unter Windows-Systemen python3 durch python in allen Befehlsbeispielen im gesamten Skill.
Kritische Banner-Inhalte in zentralen Schutzzonen platzieren
Platzieren Sie alle kritischen Banner-Inhalte innerhalb der zentralen Schutzzone von 70-80 %, um die Sichtbarkeit plattformübergreifend zu gewährleisten.

04 In Betrieb nehmen

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.

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 design

Generische skills-CLI-Form für .claude/skills/design/SKILL.md; das Repository dokumentiert möglicherweise seinen eigenen Pfad.

Geben Sie dem Skill eine erste Brand- und Design-System-Arbeitsaufgabe

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

Starter prompt

Design a complete brand package for [TechFlow], a B2B SaaS startup in the fintech space. Create a minimalist logo with tech-appropriate colors, generate a full corporate identity program including business cards, letterhead, and email signature, then build a 10-slide pitch deck presentation with our Q4 metrics [revenue chart data] and competitive positioning [market analysis]. Export everything with consistent design tokens.

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, dass Banner-CTAs die Mindesthöhe von 44px erfüllen und unten rechts positioniert sind
Stellen Sie sicher, dass Druckbanner mit 300 DPI, CMYK-Farbmodus und 3-5 mm Anschnitt erstellt werden

In OpenDesign importieren Sie das Design über den 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/design/SKILL.md Content-Prüfsumme bei Verifikation 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 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 verwendenListet Anwendungsfälle auf: Markenidentität, Design-Tokens, UI-Styling, Logos, CIP, Präsentationen, Banner, Social-Fotos, Icons
Sub-Skill-RoutingLeitet Aufgaben an externe brand/design-system/ui-styling skills oder an integrierte logo/CIP/slides/banner/social/icon Arbeitsabläufe weiter
Skript-PfadeErklärt, dass Skript-Pfade relativ zum Skill-Verzeichnis, nicht zum Projekt-Root, sind
Logo-Design (eingebaut)Befehle zum Durchsuchen von 55 Stilen und Generieren von Logos über Gemini, Atlas Cloud oder MuAPI mit weißen Hintergründen
CIP-Design (eingebaut)Befehle zum Durchsuchen von 50 Deliverables und Generieren von Corporate-Identity-Mockups mit Flash- oder Pro-Modellen
Slides (eingebaut)Verweist auf die strategische Erstellung von HTML-Präsentationen mit Chart.js und Copywriting-Formeln
Banner-Design (eingebaut)Workflow zum Gestalten von 22 Art-Direction-Stilen mit frontend-design, ai-artist und chrome-devtools für den Export
Icon-Design (eingebaut)Befehle zum Generieren von SVG-Icons in 15 Stilen mit reiner Textausgabe von Gemini 3.1 Pro
Social-Fotos (eingebaut)Workflow für plattformübergreifendes Social-Image-Design von HTML bis zum Screenshot-Export mit Verifizierung
WorkflowsAbläufe für komplette Markenpakete und die Erstellung neuer Designsysteme über mehrere Sub-Skills hinweg
VoraussetzungenPython-Anforderung mit Windows-spezifischen Anweisungen zu python vs. python3
EinrichtungUmgebungsvariablen für Gemini- und MuAPI-API-Schlüssel sowie Installation von Python-Paketen

Die eigene Beschreibung des Skills

„Umfassender Design-Skill: Markenidentität, Design-Tokens, UI-Styling, Logo-Generierung (55 Stile, Gemini, Atlas Cloud oder MuAPI AI), Corporate-Identity-Programm (50 Deliverables, CIP-Mockups), HTML-Präsentationen (Chart.js), Banner-Design (22 Stile, Social/Ads/Web/Print), Icon-Design (15 Stile, SVG, Gemini 3.1 Pro), Social-Media-Fotos (HTML→Screenshot, Multi-Plattform). Aktionen: Logo entwerfen, CIP erstellen, Mockups generieren, Folien erstellen, Banner entwerfen, Icon generieren, Social-Media-Fotos erstellen, Social-Media-Bilder, Markenidentität, Design-System. Plattformen: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 13.348 Zeichen. Die vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum design-Skill

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

Wie führe ich Python-Skripte unter Windows aus?

Ersetzen Sie python3 in allen Befehlsbeispielen durch python. Verwenden Sie beispielsweise python scripts/logo/search.py statt python3 scripts/logo/search.py. Dasselbe gilt für pip-Befehle, bei denen Sie gegebenenfalls python -m pip install benötigen.

Design

Führen Sie design für eine echte Marken- und Designsystem-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie design über dessen SKILL.md-Link, fügen Sie den Prompt oben ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design

Was der Design-Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann Sie den design-Skill verwenden

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die der Design-Skill Claude Code und Codex vorgibt

Logos immer mit weißem Hintergrund generieren

Skriptpfade sind relativ zum Skill-Verzeichnis

Nach der Logo-Generierung nach einer HTML-Vorschau fragen

Fehlgeschlagene Skripte direkt beheben

Empfohlenes Logo-Overlay für CIP verwenden

Banner-Text muss bei Anzeigen unter 20 % bleiben

Unter Windows Python statt Python3 verwenden

Kritische Banner-Inhalte in zentralen Schutzzonen platzieren