CommunityBildgithub.com

ElKrapulito/calucha-landing

Umfassendes 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-Photos (HTML→Screenshot, Multi-Plattform). Aktionen: Logo entwerfen, CIP erstellen, Mockups generieren, Folien bauen, Banner designen, Icon generieren, Social-Photos erstellen, Social-Media-Bilder, Markenidentität, Designsystem.

Was ist calucha-landing?

Dieses einheitliche Design-Skill vereint die wesentlichsten Bereiche des modernen visuellen Designs in einem KI-gestützten Workflow. Es deckt die komplette Markenentwicklung ab: von der Definition der Markenidentität über die Erstellung von Design-Tokens und UI-Styling (shadcn/ui + Tailwind) bis hin zur automatischen Logo- und Icon-Generierung. Besonders hervorzuheben ist die integrierte Unterstützung für ein umfassendes Corporate-Identity-Programm (CIP) mit über 50 Deliverables, HTML-Präsentationen mit Chart.js, Bannerdesign für 22 verschiedene Stile und die plattformspezifische Social-Photo-Erstellung. Das Skill nutzt dabei leistungsstarke KI-Modelle wie Gemini Flash/Pro und Gemini 3.1 Pro sowie lokale Python-Skripte für Logo-Suche, Logo-Generierung, CIP-Mockups, CIP-HTML-Rendering und Icon-Generierung. Es ist optimiert für Claude Code und erfordert Python, die GEMINI_API_KEY und wenige Abhängigkeiten.

Funktioniert mit✓Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/ElKrapulito/calucha-landing/tree/HEAD/.claude/skills/design

Installed? Explore more Bild skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Design

Einheitliches Design-Skill: Marke, Tokens, UI, Logo, CIP, Folien, Banner, Social-Photos, Icons.

Wann verwenden

  • 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, Druck
  • Social-Photos für Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok

Sub-Skill-Routing

AufgabeSub-SkillDetails
Markenidentität, -stimme, -assetsbrandExternes Skill
Tokens, Spezifikationen, CSS-Variablendesign-systemExternes Skill
shadcn/ui, Tailwind, Codeui-stylingExternes Skill
Logoerstellung, 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-Photos (integriert)references/social-photos-design.md
SVG-Icons, IconsetsIcon (integriert)references/icon-design.md

Logo-Design (Integriert)

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

Logo: Design-Brief generieren

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

IMMER Logo-Ausgabebilder mit weißem Hintergrund erzeugen.

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 reparieren.

Nach der Generierung den Benutzer IMMER nach einer HTML-Vorschau über AskUserQuestion fragen. Falls 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 generieren

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 (EMPFEHLENSWERT)
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 existiert, zuerst den Logo-Design-Abschnitt oben verwenden.

Folien (Integriert)

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

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

Folien: Wissensbasis

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

Banner-Design (Integriert)

22 Art-Direction-Stile für Social, Anzeigen, Web, Druck. Nutzt die Skills frontend-design, ai-artist, ai-multimodal, chrome-devtools.

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

Banner: Workflow

  1. Anforderungen sammeln über AskUserQuestion – Zweck, Plattform, Inhalt, Marke, Stil, Menge
  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 in PNG mit exakten Abmessungen via chrome-devtools
  5. Präsentieren – Alle Optionen nebeneinander zeigen, auf Feedback iterieren

Banner: Kurze Größenreferenz

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 AdsMittel. Rechteck300 x 250
WebsiteHero1920 x 600-1080

Banner: Top-Kunststile

StilAm besten geeignet für
MinimalistischSaaS, Technik
Fette TypografieAnkündigungen
FarbverlaufModerne Marken
FotobasiertLifestyle, E-Commerce
GeometrischTechnik, Fintech
GlassmorphismusSaaS, Apps
Neon/CyberpunkGaming, Events

Banner: Designregeln

  • Sichere Zonen: Kritischer Inhalt in den zentralen 70–80 %
  • Ein CTA pro Banner, unten rechts, mindestens 44px Höhe
  • Maximal 2 Schriftarten, mindestens 16px Body, ≥32px Überschrift
  • Text unter 20 % für Anzeigen (Meta bestraft)
  • Druck: 300 DPI, CMYK, 3–5 mm Anschnitt

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
sharpTechnik, Fintech, Unternehmen
flatMaterial Design, Google-Stil
gradientModerne Marken, SaaS

Modell: gemini-3.1-pro-preview – Nur-Text-Ausgabe (SVG ist XML-Text). Keine Bildgenerierungs-API erforderlich.

Social-Photos (Integriert)

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

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

Social-Photos: Workflow

  1. Orchestrieren – project-management-Skill für TODO-Aufgaben; parallele Subagents 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 mit exakter px (2x deviceScaleFactor)
  6. Verifizieren – Mit Chrome MCP oder chrome-devtools-Skill exportierte Designs visuell prüfen; Layout-/Styling-Probleme beheben und erneut exportieren
  7. Berichten – Zusammenfassung in plans/reports/ mit Designentscheidungen
  8. Organisieren – assets-organizing-Skill aufrufen, um Ausgabedateien und Berichte zu sortieren

Social-Photos: 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 (Designsystem-Skill) → Semantische Token-Ebenen erstellen
  3. Implementieren (UI-Styling-Skill) → Tailwind, shadcn/ui konfigurieren

Referenzen

ThemaDatei
Design-Routingreferences/design-routing.md
Logo-Design-Leitfadenreferences/logo-design.md
Logo-Stilereferences/logo-style-guide.md
Logo-Farbenreferences/logo-color-psychology.md
Logo-Promptsreferences/logo-prompt-engineering.md
CIP-Design-Leitfadenreferences/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-Copyreferences/slides-copywriting-formulas.md
Folien-Strategiereferences/slides-strategies.md
Banner-Größen & -Stilereferences/banner-sizes-and-styles.md
Social-Photos-Leitfadenreferences/social-photos-design.md
Icon-Design-Leitfadenreferences/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-Suche für Logo-Daten
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-Suche für CIP-Daten
scripts/icon/generate.pySVG-Icons mit Gemini 3.1 Pro generieren

Voraussetzungen

Python: Dieses 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).

Überprüfen Sie, ob Python installiert ist:

python3 --version || python --version

Einrichtung

export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
pip install google-genai pillow

Hinweis für Windows: Verwenden Sie python statt 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

Individual skills in this repo

This repo contains 6 individual skills — each has its own dedicated page.

ElKrapulito/calucha-landing

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated 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, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

ElKrapulito/calucha-landing

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

ElKrapulito/calucha-landing

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

ElKrapulito/calucha-landing

Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

ElKrapulito/calucha-landing

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

ElKrapulito/calucha-landing

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

Verwandte Skills

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More Bild skills