Communitygithub.com

notesgpt/design

Umfassende Design-Skill: Markenidentität, Design-Tokens, UI-Styling, Logo-Generierung (55 Stile, Gemini 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 bauen, Banner entwerfen, Icon generieren, Social-Media-Fotos erstellen, Markenidentität, Designsystem. Plattformen: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

Was ist design?

Diese Skill ist eine umfassende, integrierte Design-Plattform für KI-Agenten, die eine breite Palette von Designaufgaben von der Markenidentität bis hin zu Social-Media-Fotos abdeckt. Sie ermöglicht es dem Agenten, mit einem einzigen Befehl Logos in über 55 Stilen zu generieren, komplette Corporate-Identity-Programme (CIP) mit über 50 Deliverables zu erstellen, interaktive HTML-Präsentationen mit Chart.js zu bauen und Banner für verschiedene Plattformen wie Facebook, YouTube, Google Ads und Web zu gestalten. Die Skill nutzt leistungsstarke KI-Modelle wie Gemini für die Bildgenerierung und kann SVG-Icons in 15 verschiedenen Stilen direkt als Text ausgeben. Sie ist für die Ausführung auf dem lokalen Rechner konzipiert (Python-Skripte) und integriert nahtlos externe Sub-Skills wie Brand, Design-System und Frontend-Design für komplexere Workflows. Der Workflow ist stark strukturiert: Der Agent sammelt Anforderungen, ruft spezifische Skripte auf und kann die Ergebnisse dann als HTML-Vorschau oder Screenshot präsentieren, was sie ideal für die schnelle Erstellung professioneller Design-Assets macht.

Funktioniert mit✓Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/notesgpt/iMedix-Interactive-Knowledge-Graph-Homepage/tree/claude/beautiful-davinci-ge2ure/.claude/skills/design
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht design?

Vereinheitlichte Design-Skill: Marke, Tokens, UI, Logo, CIP, Folien, Banner, Social-Media-Fotos, Icons.

Verwendung

  • Markenidentität, Stimme, Assets
  • Designsystem-Tokens und Spezifikationen
  • UI-Styling mit shadcn/ui + Tailwind
  • Logo-Design und KI-Generierung
  • Corporate-Identity-Programm (CIP)-Deliverables
  • Präsentationen und Pitch Decks
  • Banner-Design für soziale Medien, Anzeigen, Web, Print
  • Social-Media-Fotos für Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok

Sub-Skill-Routing

AufgabeSub-SkillDetails
Markenidentität, Stimme, AssetsbrandExterne Skill
Tokens, Spezifikationen, CSS-Variablendesign-systemExterne Skill
shadcn/ui, Tailwind, Codeui-stylingExterne Skill
Logo-Erstellung, KI-GenerierungLogo (integriert)references/logo-design.md
CIP-Mockups, DeliverablesCIP (integriert)references/cip-design.md
Präsentationen, Pitch DecksFolien (integriert)references/slides.md
Banner, Cover, HeaderBanner (integriert)references/banner-sizes-and-styles.md
Social-Media-Bilder/FotosSocial-Media-Fotos (integriert)references/social-photos-design.md
SVG-Icons, Icon-SetsIcon (integriert)references/icon-design.md

Logo-Design (integriert)

55+ Stile, 30 Farbpaletten, 25 Branchenleitfäden. Gemini Nano Banana Modelle.

Logo: Design-Brief erstellen

python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "Markenname"

Logo: Stile/Farben/Branchen durchsuchen

python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry

Logo: Mit KI generieren

ALWAYS generieren Sie Ausgabe-Logos mit weißem Hintergrund.

python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage

WICHTIG: Wenn Skripte fehlschlagen, versuchen Sie, sie direkt zu beheben.

Nach der Generierung IMMER den Benutzer über AskUserQuestion nach einer HTML-Vorschau fragen. Wenn ja, /ui-ux-pro-max für die Galerie aufrufen.

CIP-Design (integriert)

50+ Deliverables, 20 Stile, 20 Branchen. Gemini Nano Banana (Flash/Pro).

CIP: Brief erstellen

python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "Markenname"

CIP: Domänen durchsuchen

python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

CIP: Mockups generieren

# Mit Logo (EMPFOHLEN)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /pfad/zu/logo.png --deliverable "business card" --industry "consulting"

# Vollständiges CIP-Set
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /pfad/zu/logo.png --industry "consulting" --set

# Pro-Modell (4K Text)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Ohne Logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt

Modelle: flash (Standard, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)

CIP: HTML-Präsentation rendern

python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /pfad/zu/cip-output

Tipp: Wenn kein Logo vorhanden ist, zuerst den Abschnitt Logo-Design oben verwenden.

Folien (integriert)

Strategische HTML-Präsentationen mit Chart.js, Design-Tokens, Texten nach Copywriting-Formeln.

Laden Sie references/slides-create.md für den Erstellungs-Workflow.

Folien: Wissensdatenbank

ThemaDatei
Erstellungsanleitungreferences/slides-create.md
Layout-Musterreferences/slides-layout-patterns.md
HTML-Vorlagereferences/slides-html-template.md
Texterstellungreferences/slides-copywriting-formulas.md
Strategienreferences/slides-strategies.md

Banner-Design (integriert)

22 Art-Direction-Stile für Social, Ads, Web, Print. Verwendet die Skills frontend-design, ai-artist, ai-multimodal, chrome-devtools.

Laden Sie references/banner-sizes-and-styles.md für eine vollständige Referenz zu Größen und Stilen.

Banner: Workflow

  1. Anforderungen sammeln via AskUserQuestion — Zweck, Plattform, Inhalt, Marke, Stil, Anzahl
  2. Recherchieren — ui-ux-pro-max aktivieren, Pinterest nach Referenzen durchsuchen
  3. Designen — HTML/CSS-Banner mit frontend-design erstellen, Visuals mit ai-artist/ai-multimodal generieren
  4. Exportieren — Screenshot als PNG in exakten Abmessungen via chrome-devtools
  5. Präsentieren — Alle Optionen nebeneinander zeigen, auf Feedback iterieren

Banner: Schnelle Größenübersicht

PlattformTypGröße (px)
FacebookCover820 x 312
Twitter/XHeader1500 x 500
LinkedInPersönlich1584 x 396
YouTubeKanal-Kunst2560 x 1440
InstagramStory1080 x 1920
InstagramBeitrag1080 x 1080
Google AdsMittleres Rechteck300 x 250
WebsiteHero1920 x 600-1080

Banner: Top-Kunststile

StilAm besten geeignet für
MinimalistischSaaS, Tech
Fette TypografieAnkündigungen
FarbverlaufModerne Marken
FotobasiertLifestyle, E-Com
GeometrischTech, Fintech
GlassmorphismusSaaS, Apps
Neon/CyberpunkGaming, Events

Banner: Design-Regeln

  • Safe Zones: Kritischer Inhalt in den zentralen 70-80%
  • Ein CTA pro Banner, unten rechts, mind. 44px Höhe
  • Max. 2 Schriftarten, mind. 16px Fließtext, ≥32px Überschrift
  • Text unter 20% für Anzeigen (Meta bestraft)
  • Print: 300 DPI, CMYK, 3-5mm Beschnitt

Icon-Design (integriert)

15 Stile, 12 Kategorien. Gemini 3.1 Pro Preview generiert SVG-Textausgabe.

Icon: Einzelnes Icon generieren

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

Icon: Batch-Variationen generieren

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

Icon: Multi-Größen-Export

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

Icon: Top-Stile

StilAm besten geeignet für
outlinedUI-Oberflächen, Web-Apps
filledMobile Apps, Navigationsleisten
duotoneMarketing, Landingpages
roundedFreundliche Apps, Gesundheit
sharpTech, Fintech, Unternehmen
flatMaterial Design, Google-Stil
gradientModerne Marken, SaaS

Modell: gemini-3.1-pro-preview — reine Textausgabe (SVG ist XML-Text). Keine Bildgenerierungs-API erforderlich.

Social-Media-Fotos (integriert)

Multi-Plattform Social-Image-Design: HTML/CSS → Screenshot-Export. Verwendet die Skills ui-ux-pro-max, brand, design-system, chrome-devtools.

Laden Sie references/social-photos-design.md für Größen, Vorlagen und Best Practices.

Social-Media-Fotos: Workflow

  1. Orchestrieren — project-management-Skill für TODO-Aufgaben; parallele Subagenten für unabhängige Arbeit
  2. Analysieren — Prompt parsen: Thema, Plattformen, Stil, Markenkontext, Inhaltselemente
  3. Ideenfindung — 3-5 Konzepte, via AskUserQuestion präsentieren
  4. Designen — /ckm:brand → /ckm:design-system → zufällig /ck:ui-ux-pro-max ODER /ck:frontend-design aufrufen; HTML pro Idee × Größe
  5. Exportieren — chrome-devtools oder Playwright-Screenshot in exakten px (2x deviceScaleFactor)
  6. Verifizieren — Chrome MCP oder chrome-devtools-Skill verwenden, um exportierte Designs visuell zu prüfen; Layout-/Styling-Probleme beheben und neu exportieren
  7. Berichten — Zusammenfassung in plans/reports/ mit Design-Entscheidungen
  8. Organisieren — assets-organizing-Skill aufrufen, um Ausgabedateien und Berichte zu sortieren

Social-Media-Fotos: Wichtige Größen

PlattformGröße (px)PlattformGröße (px)
IG Beitrag1080×1080FB Beitrag1200×630
IG Story1080×1920X Beitrag1200×675
IG Karussell1080×1350LinkedIn1200×627
YT Thumbnail1280×720Pinterest1000×1500

Workflows

Komplettes Markenpaket

  1. Logo → scripts/logo/generate.py → Logo-Varianten generieren
  2. CIP → scripts/cip/generate.py --logo ... → Deliverable-Mockups erstellen
  3. Präsentation → references/slides-create.md laden → Pitch Deck bauen

Neues Designsystem

  1. Marke (brand-Skill) → Farben, Typografie, Stimme definieren
  2. Tokens (design-system-Skill) → Semantische Token-Ebenen erstellen
  3. Implementieren (ui-styling-Skill) → Tailwind, shadcn/ui konfigurieren

Referenzen

ThemaDatei
Design-Routingreferences/design-routing.md
Logo-Design-Anleitungreferences/logo-design.md
Logo-Stilereferences/logo-style-guide.md
Logo-Farbenreferences/logo-color-psychology.md
Logo-Promptsreferences/logo-prompt-engineering.md
CIP-Design-Anleitungreferences/cip-design.md
CIP-Deliverablesreferences/cip-deliverable-guide.md
CIP-Stilereferences/cip-style-guide.md
CIP-Promptsreferences/cip-prompt-engineering.md
Folien erstellenreferences/slides-create.md
Folien-Layoutsreferences/slides-layout-patterns.md
Folien-Vorlagereferences/slides-html-template.md
Folien-Textreferences/slides-copywriting-formulas.md
Folien-Strategiereferences/slides-strategies.md
Banner-Größen & -Stilereferences/banner-sizes-and-styles.md
Social-Media-Fotos-Anleitungreferences/social-photos-design.md
Icon-Design-Anleitungreferences/icon-design.md

Skripte

SkriptZweck
scripts/logo/search.pyLogo-Stile, -Farben, -Branchen durchsuchen
scripts/logo/generate.pyLogos mit Gemini KI generieren
scripts/logo/core.pyBM25-Suchmaschine für Logodaten
scripts/cip/search.pyCIP-Deliverables, -Stile, -Branchen durchsuchen
scripts/cip/generate.pyCIP-Mockups mit Gemini generieren
scripts/cip/render-html.pyHTML-Präsentation aus CIP-Mockups rendern
scripts/cip/core.pyBM25-Suchmaschine für CIP-Daten
scripts/icon/generate.pySVG-Icons mit Gemini 3.1 Pro generieren

Voraussetzungen

Python: Diese Skill verwendet Python-Skripte. Unter Windows verwenden Sie python anstelle von python3 (z.B. python scripts/logo/search.py statt python3 scripts/logo/search.py).

Prüfen, ob Python installiert ist:

python3 --version || python --version

Einrichtung

export GEMINI_API_KEY="Ihr-Schlüssel"  # https://aistudio.google.com/apikey
pip install google-genai pillow

Hinweis für Windows: Verwenden Sie python anstelle von pip wo nötig (z.B. python -m pip install ...).

Integration

Externe Sub-Skills: brand, design-system, ui-styling Verwandte Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools

Verwandte Skills

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community