ckm:design

Überblick

Was ist ckm:design?

ckm:design ist ein einheitlicher, designzentrierter Skill, mit dem dein Agent visuelle Assets für dein gesamtes Markenerlebnis planen und produzieren kann. Er ist für UI/UX- und Brand-Workflows konzipiert – nicht nur zum Ausgeben von Code – und kombiniert strukturierte Referenzen mit optionalen lokalen Skripten, um Folgendes zu unterstützen:

• Markenidentität und visuelle Leitlinie
• Design Tokens und Design-System-Spezifikationen
• UI-Styling-Guidance für shadcn/ui und Tailwind
• Logo-Design und KI-Logo-Generierung (55 Styles)
• Corporate Identity Program (CIP) Deliverables und Mockups
• HTML-basierte Präsentationen und Pitch-Decks (mit Chart.js)
• Banner-Design für Social, Ads, Web und Print (22 Styles, komplette Größenmatrix)
• Icon-Design mit KI-generierten SVGs (15 Styles)
• Social-Photos und Marketingbilder für alle wichtigen Plattformen

Der Skill wird mit umfangreichen Referenzen und Datentabellen ausgeliefert, damit der Agent konkrete, umsetzungsreife Empfehlungen geben kann – ohne dass du Größen-Tabellen oder Brand-Guidelines manuell nachschlagen musst.

Für wen ist ckm:design gedacht?

ckm:design passt gut, wenn du:

• UI/UX-Designer bist und dir einen Assistenten wünschst, der in Flows, Komponenten, Tokens und Art Direction denkt.
• Frontend-Entwickler bist und präzise Bannergrößen, Icon-Spezifikationen oder HTML-Strukturen für Slides brauchst – bei sauberer Abstimmung von Code und Design.
• Brand- oder Marketing-Verantwortliche:r bist und Logos, CIP-Rollouts, Social-Kampagnen und Pitch-Decks planst.
• Gründer:in oder Teil eines kleinen Teams bist und End-to-End-Guidance für Brand und UI benötigst, aber kein vollständiges Design-Team hast.

Wenn du nur rohe Codegenerierung ohne Designbegründung brauchst, ist ein leichter, reiner Engineering-Skill vermutlich besser. ckm:design ist für Szenarien gedacht, in denen visuelle Qualität, Konsistenz und Markenfit wichtig sind.

Welche Probleme löst ckm:design?

Mit den mitgelieferten Referenzen und Daten hilft ckm:design deinem Agenten:

• Brand-Output zu standardisieren – Logos, Banner, Social-Photos und CIP-Assets unter einem einheitlichen visuellen System auszurichten.
• Größen und Formate direkt korrekt zu treffen – mit plattformspezifischen Tabellen für Social Media, Google Display Network, Web-Heroes und Print.
• Corporate-Identity-Programme zu skalieren – indem Branchen, Styles und Deliverables für große CIP-Sets sinnvoll kombiniert werden.
• Design und Umsetzung zu verbinden – durch Verknüpfung von Brand-Entscheidungen mit Design Tokens, CSS-Variablen, shadcn/ui und Tailwind.
• Schnell zu prototypen – mit HTML-Slide-Templates und CIP-Mockups, die sich testen lassen, lange bevor ein vollständiges Design-System steht.

---

Nutzung

1. ckm:design-Skill installieren

Du installierst ckm:design in dein Claude-kompatibles Skills-Setup aus dem Upstream-Repository:

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

Damit wird der design Skill aus dem Repository nextlevelbuilder/ui-ux-pro-max-skill in dein lokales Verzeichnis ~/.claude/skills/design (oder das entsprechende Verzeichnis in deiner Umgebung) gezogen.

Nach der Installation solltest du Folgendes sehen:

• SKILL.md – Top-Level-Beschreibung und Routing-Guidance.
• data/ – CSV-Datensätze für CIP-, Logo- und Icon-Styles.
• references/ – die zentrale Wissensbasis für Design-Aufgaben.
• scripts/ – optionale Python-Utilities für CIP- und Icon-Generierung.

2. Das Design-Routing-Modell verstehen

ckm:design fungiert als Design-Einstiegspunkt und routet Arbeit an spezialisierte Sub-Skills weiter, wie in references/design-routing.md und SKILL.md beschrieben.

Zentrale Design-Domains:

• Brand Identity → wird in der Regel von einem separaten brand Skill übernommen.
• Design-Systeme und Tokens → über den design-system Skill.
• UI-Implementation (shadcn/ui, Tailwind) → über den ui-styling Skill.
• Logo-Erstellung → integrierte Logo-Design-Referenzen.
• CIP-Design → Corporate-Identity-Deliverables und Mockups.
• Slides → HTML-Präsentationen mit Chart.js.
• Banner-Design → Social-, Ads-, Web- und Print-Banner.
• Icon-Design → SVG-Icon-Generierung über Skripte.

In Prompts kannst du den Design-Typ mit dem argument-hint-Pattern des Skills andeuten:

ckm:design [design-type] [context]

Beispiele:

• ckm:design logo fintech SaaS brand for B2B dashboards
• ckm:design cip rebrand for hospitality hotel chain
• ckm:design banner LinkedIn company cover product launch

3. Referenzen für UI/UX- und Brand-Entscheidungen nutzen

Die Stärke von ckm:design liegt in den strukturierten Referenzdateien. Nutze sie als maßgebliche Quelle, wenn du deinen Agenten nach Specs fragst.

UI/UX- und Design-System-Planung

Auch wenn die eigentliche Umsetzung an design-system oder ui-styling geroutet wird, kannst du ckm:design verwenden, um:

• Tokens und Specs auf Design-Ebene zu diskutieren (Farben, Typografie, Abstände, States).
• Brand-Farben und Typografie auf CSS-Variablen und Tailwind config abzubilden.
• Komponentenverhalten und States vor der Implementierung zu planen.

Der Agent kann die High-Level-Design-Intention aus ckm:design mit codefokussierten Skills für die Umsetzung kombinieren.

Banner- und Kampagnenkreation

Für Kampagnen und UI-Banner greifst du auf references/banner-sizes-and-styles.md zurück:

• Wähle die richtigen Größen pro Plattform (Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, Google Display Network, Website, E-Mail und Printformate).
• Entscheide dich zwischen 22 Art-Direction-Styles (z. B. Minimalist, Corporate Minimal, Luxury Premium, Modern Tech, Warm Organic, Bold Dynamic).
• Bitte den Agenten, Messaging und Layout auf spezifische Placements zu mappen, zum Beispiel:
  • Facebook Cover vs Event Cover
  • LinkedIn Company Cover vs persönlicher Banner
  • GDN Billboard vs Medium Rectangle
  • Website Hero vs Blog Header

Beispielprompt für Kampagnenplanung:

Using ckm:design, plan a full banner set for a modern tech SaaS launch, including LinkedIn company cover, Twitter header, Instagram post, and a Google Display billboard. Use Modern Tech art direction and map each asset to the correct pixel size.

Corporate Identity Program (CIP) Rollouts

CIP-Support ist in folgenden Dateien abgedeckt:

• references/cip-deliverable-guide.md – was in ein vollständiges Identity-System gehört.
• references/cip-design.md – wie Daten und Skripte 50+ Deliverables, 20 Styles und 20 Branchen unterstützen.
• references/cip-style-guide.md – detaillierte Style-Archetypen (Corporate Minimal, Modern Tech, Luxury Premium, Classic Traditional, Warm Organic, Bold Dynamic usw.).
• references/cip-prompt-engineering.md – Prompt-Strukturen für die Mockup-Generierung.

Nutze diese, um:

• Den Scope eines Rebrandings zu definieren (Visitenkarten, Beschilderung, Fahrzeuge, Apparel, digitale Assets, Events und mehr).
• Jedes Deliverable mit einem branchen- und stilgerechten Style Guide abzugleichen.
• Stark strukturierte Prompts für Mockups zu erzeugen, die ein Gemini-Modell oder eine andere Image-Engine konsistent interpretieren kann.

Beispiel für einen High-Level-Prompt:

Use ckm:design to create a CIP plan for a premium hospitality brand. Choose a suitable style from the CIP style guide and list all recommended deliverables, from stationery to vehicle branding and trade show assets.

4. CIP-Briefs und Mockups mit Skripten generieren (optional)

Wenn du über die konzeptionelle Planung hinausgehen und CIP-Mockups mit den enthaltenen Python-Skripten generieren möchtest, folge references/cip-design.md.

Stelle sicher, dass Python 3 installiert ist und du Zugriff auf ein kompatibles Gemini-Modell hast, wie in deiner Toolchain beschrieben.

4.1. CIP-Daten durchsuchen und Brief erstellen

Nutze das BM25-basierte Search-Script, um Deliverables, Styles und Branchen zu explorieren und einen initialen Brief zu generieren:

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

Du kannst in bestimmten Domains suchen:

# Deliverables
python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable

# Design styles
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style

# Industry guidelines
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry

# Mockup contexts
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

Die data/cip/ CSV-Dateien enthalten die zugrunde liegenden Deliverables, Branchen, Styles und Mockup-Kontexte, die dieses Search-Utility nutzt.

4.2. CIP-Mockup-Bilder generieren

In references/cip-design.md findest du Kommandos zur Nutzung von scripts/cip/generate.py für die Gemini-basierte Mockup-Generierung:

# Single deliverable mockup with logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Full CIP set with logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

Nutze deine eigenen Model-Keys und Environment-Konfiguration; ckm:design liefert die Datenstruktur, Prompt-Gerüste und Script-Entry-Points – nicht das Modell selbst.

4.3. HTML-Präsentationen der CIP-Ergebnisse rendern

Sobald du Mockup-Daten hast, kannst du eine HTML-Präsentation rendern mit:

python3 ~/.claude/skills/design/scripts/cip/render-html.py

Dadurch entsteht eine HTML-Übersicht, die du Stakeholdern als visuelle Zusammenfassung des Identity-Systems senden kannst.

5. Logos und Icons mit KI-Unterstützung gestalten

ckm:design enthält außerdem fokussierte Guidance und Skripte für Logo- und Icon-Arbeiten.

5.1. Logo-Planung und Prompt Engineering

Verlasse dich auf:

• references/logo-design.md – Grundlagen der Logo-Komposition.
• references/logo-color-psychology.md – Farbwahl nach Markenpersönlichkeit und Branche.
• references/logo-style-guide.md – wie du aus den 55 verfügbaren Logo-Styles auswählst.
• references/logo-prompt-engineering.md – empfohlene Prompt-Strukturen für Gemini-basierte Logo-Generierung.

Nutze diese Referenzen, wenn du deinen Agenten bittest:

• Ein Logo-System zu definieren (Primary, Stacked, Icon-only, monochrome Varianten).
• Farben und Typografie zu wählen, die zu deiner Brand-Strategie passen.
• AI-Prompts zu formulieren, die detailliert genug sind, um brauchbare Logo-Kandidaten zu erzeugen.

Die integrierte Logo-Funktionalität ist so ausgelegt, dass sie mit den CIP- und Banner-Tools zusammenspielt, damit dein Brand Mark über alle Touchpoints hinweg konsistent bleibt.

5.2. Icon-Design mit SVG-Output

references/icon-design.md dokumentiert, wie du KI-gestützte SVG-Icons mit scripts/icon/generate.py und Gemini 3.1 Pro Preview erzeugst.

Beispielkommandos:

# Simple icons
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"

# Named icon in a category
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

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

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

# Discover available styles and categories
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories

Das ist besonders nützlich für UI/UX-Teams, die zusammenhängende Icon-Sets benötigen, die zur gleichen visuellen Sprache wie ihre Logos und CIP-Materialien passen.

6. HTML-Slide-Decks und Marketing-Visuals erstellen

ckm:design enthält ein vollständiges Slide-Design-Referenzset, ideal für Produktdemos, Sales-Decks und interne Präsentationen:

• references/slides.md – Überblick über das Slide-System.
• references/slides-create.md – wie du von der Outline zum Deck kommst.
• references/slides-layout-patterns.md – typische Seiten-Layouts.
• references/slides-copywriting-formulas.md – Messaging-Frameworks für Klarheit und Überzeugungskraft.
• references/slides-strategies.md – Strategien für die Erzählstruktur.
• references/slides-html-template.md – HTML-Basetemplate für Slides (mit Chart.js-Integration).

Damit kannst du:

• Deinen Agenten bitten, eine Slide-Outline zu erstellen und Abschnitte auf Layout-Patterns zu mappen.
• HTML-Slide-Decks generieren, die zu deinen Brand Tokens und Farben passen.
• Chart.js-Visualisierungen für Metriken und Dashboards ergänzen.

Beispielprompt:

Using ckm:design, draft a 12-slide product launch deck for a B2B SaaS. Use the HTML slide template and suggest appropriate Chart.js charts for the metrics slides.

7. Social-Photos und Multi-Plattform-Kampagnen

references/social-photos-design.md gibt dir Guidance für Social-Photos und Multi-Plattform-Assets.

Der Design-Skill hilft dir dabei:

• Profilbilder, Cover Images und Post Templates über Plattformen wie Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads und Google Ads hinweg zu koordinieren.
• HTML-to-Screenshot-Workflows zu nutzen, um Social-Visuals mit konsistenter Typografie und Layout schnell zu iterieren.
• Jedes Social Asset sauber in dein zentrales Brand- und CIP-System einzubetten.

---

FAQ

Wann ist ckm:design die richtige Wahl?

ckm:design eignet sich besonders, wenn du:

• End-to-End-Visual-Direction über UI/UX, Branding, CIP und Marketing hinweg brauchst.
• Möchtest, dass dein Agent in Design Tokens, Art Direction und Brand-Systemen denkt – nicht nur in CSS-Snippets.
• Eine Marken-Relaunch, einen neuen Produkt-Launch oder ein Design-System-Rollout planst und einen konsistenten, referenzgestützten Ansatz suchst.
• AI Image Generation (Logos, Icons, CIP-Mockups, Social-Photos) mit menschlicher Designkontrolle kombinieren willst.

Wann ist ckm:design nicht das passende Tool?

Weniger geeignet ist ckm:design, wenn du:

• Nur reine Backend- oder Algorithmus-Unterstützung ohne Designanteil brauchst.
• Einen One-Click-Logo-Generator suchst, ohne Rücksicht auf ein übergeordnetes Brand-System.
• Keine Möglichkeit oder keinen Wunsch hast, optionale Python-Tools auszuführen (der Skill ist auch ohne Skripte für Guidance nützlich, du musst dann aber auf deinen eigenen Image-Stack zurückgreifen).

Benötigt ckm:design Figma oder eine bestimmte Design-App?

Nein. ckm:design ist tool-agnostisch. Es liefert Struktur und Guidance, die du anwenden kannst in:

• Figma oder ähnlichen Tools für UI/UX-Layout und Prototyping.
• Frontend-Codebasen mit shadcn/ui und Tailwind.
• Präsentationstools oder purem HTML für Slides.
• Jeder Bildbearbeitung oder AI-Generierungspipeline, die die erzeugten Prompts und Specs verarbeiten kann.

Du kannst deinen bestehenden Design-Stack weiter nutzen; der Skill fungiert als Entscheidungs- und Spezifikationsebene darüber.

Kann ich ckm:design ohne die Python-Skripte verwenden?

Ja. Der Kernnutzen von ckm:design liegt in den strukturierten Referenzen und Datendateien:

• Du kannst dich bei Planung und Spezifikation vollständig auf references/*.md und data/*.csv über den Agenten stützen.
• Skripte in scripts/cip/ und scripts/icon/ sind optionale Beschleuniger für Teams, die Mockup- und SVG-Generierung automatisieren möchten.

Wenn du die Skripte nicht nutzt, bekommst du trotzdem:

• Korrekte Größen, Styles und Deliverable-Listen.
• Prompt-Frameworks für deine eigenen AI-Image-Tools.
• Konsistente Guidance für die Ausrichtung von Brand, UI und Marketing.

Wie arbeitet ckm:design mit anderen Design-Skills zusammen?

Das Repository ist als Suite kooperierender Design-Skills organisiert. ckm:design:

• Dient als Routing- und Orchestrierungsschicht für visuelle Aufgaben.
• Delegiert tiefgehende Brand-Identity-Arbeit an brand.
• Delegiert Token-Architektur und Komponenten-Specs an design-system.
• Delegiert Implementierungsdetails (shadcn/ui, Tailwind-Klassen) an ui-styling.

In der Praxis gehst du so vor:

1. Starte mit ckm:design, um das visuelle Problem zu rahmen und den passenden Sub-Skill auszuwählen.
2. Nutze den verlinkten Spezial-Skill für die detaillierte Umsetzung.
3. Kehre zu ckm:design zurück, um sicherzustellen, dass alle Outputs mit dem übergeordneten Brand- und CIP-Plan konsistent sind.

Wo sollte ich nach der Installation von ckm:design zuerst reinschauen?

Für einen schnellen, aber fundierten Einstieg:

1. Öffne SKILL.md, um Scope und Haupt-Workflows zu verstehen.
2. Sieh dir references/design-routing.md an, um zu verstehen, wie Tasks über die Design-Skill-Familie hinweg gemappt werden.
3. Überfliege die folgenden Kernreferenzen – je nach akutem Bedarf:
   • references/banner-sizes-and-styles.md – für Kampagnen und Banner.
   • references/cip-deliverable-guide.md und references/cip-style-guide.md – für Corporate-Identity-Systeme.
   • references/logo-design.md und references/logo-color-psychology.md – für Logo-Projekte.
   • references/slides.md und references/slides-html-template.md – für Decks und Präsentationen.
   • references/social-photos-design.md – für Social-Kampagnen.

Damit hast du genug Kontext, um zu entscheiden, wie du ckm:design in deinem UI/UX-, Branding- oder Marketing-Workflow einsetzen möchtest, bevor du in die optionalen Skripte einsteigst.