modbender/skill-library-mcp

Design Style Skill

Zweck

Dieser Skill hilft Claude Code, schöne, unverwechselbare Frontend-Oberflächen zu erstellen, indem er automatisch Design-System-Prompts aus dem prompts/-Verzeichnis abruft. Anstatt generische UI zu produzieren, ermöglicht dieser Skill Claude, Oberflächen mit spezifischen Designästhetiken wie Neo-Brutalismus, Modern Dark, Luxus, Cyberpunk und mehr zu bauen.

Wann verwenden

Dieser Skill wird automatisch aufgerufen, wenn:

• Der Nutzer bittet, eine Webseite, Landing Page oder Webanwendung zu bauen
• Der Nutzer eine UI-Komponente mit einem bestimmten Designstil anfordert
• Der Nutzer Frontend, React, Vue oder Webentwicklung erwähnt
• Der Nutzer nach einer bestimmten Ästhetik fragt (z. B. „mach es modern und dunkel“ oder „verwende einen brutalistischen Stil“)

Verfügbare Designstile

Die folgenden Designsysteme sind im prompts/-Verzeichnis verfügbar:

• Academia – Gelehrt, klassisch, verfeinert
• ArtDeco – Luxuriöser Glamour der 1920er
• Bauhaus – Funktionalistischer, geometrischer Minimalismus
• BoldTypography – Typografie-getriebenes Design
• Botanical – Von der Natur inspiriert, organisch
• Claymorphism – Weiche, tonartige 3D-Elemente
• Cyberpunk – Futuristisch, Neon, High-Tech
• Enterprise – Professionell, corporate, skalierbar
• FlatDesign – Sauber, minimalistisch, 2D
• Fluent2 – Microsoft Fluent 2 Design System
• HumanistLiterary – Warm, literarisch, gesprächig (Claude-Ästhetik)
• Industrial – Roh, mechanisch, utilitaristisch
• Kinetic – Dynamisch, bewegungsfokussiert
• Luxury – Premium, elegant, anspruchsvoll
• Material – Google Material Design
• Maximalism – Kühn, ausdrucksstark, reichhaltig
• MinimalDrak – Minimales dunkles Thema (Anmerkung: Tippfehler im Original)
• ModernDark – Zeitgenössische dunkle UI mit Tiefe
• Monochrome – Schwarz und Weiß, hoher Kontrast
• Neo-brutalism – Kühn, roh, farbenfroher Brutalismus
• Neumorphism – Weiche UI, skeuomorph
• Newsprint – Zeitungsinspiriert
• Organic – Natürliche, fließende Formen
• PlayfulGeometric – Lustige geometrische Formen
• Professional – Sauber, geschäftsorientiert
• Retro – Vintage, nostalgisch
• Saas – Moderne SaaS-Ästhetik
• Sketch – Handgezeichnet, künstlerisch
• Swiss – Internationaler Typografiestil
• TerminalCLI – Kommandozeilen-Ästhetik
• Vaporwave – 80er/90er Ästhetik, nostalgisch
• Web3 – Dezentralisiert, Krypto-inspiriert

Wie es funktioniert

Schritt 1: Nutzerabsicht verstehen

Wenn der Nutzer Frontend-Arbeit anfordert, ermittle zuerst:

1. Tech-Stack – Welches Framework verwenden sie? (React, Vue, Next.js, etc.)
2. Designpräferenz – Haben sie einen bestimmten Stil oder eine bestimmte Ästhetik erwähnt?
3. Komponentenumfang – Einzelne Komponente, ganze Seite oder gesamte Anwendung?

Schritt 2: Designstil auswählen

Wenn der Nutzer einen Stil angibt:

• Stimme seine Anfrage mit verfügbaren Stilen ab (z. B. „brutalistisch“ → Neo-brutalism)
• Groß-/Kleinschreibung wird ignoriert (brutalism, Brutalism, BRUTALISMUS funktionieren alle)

Wenn der Nutzer keinen Stil angibt:

• Für moderne, professionelle Projekte → ModernDark oder Professional
• Für kreative, kühne Projekte → Neo-brutalism oder BoldTypography
• Für minimalistische, saubere Projekte → FlatDesign oder Swiss
• Für Unternehmens-/Firmenprojekte → Enterprise

Frage den Nutzer, wenn du dir unsicher bist, welcher Stil seinen Bedürfnissen entspricht.

Schritt 3: Designsystem abrufen

Verwende das Read-Tool, um die entsprechende Prompt-Datei zu laden:

Read: prompts/<StyleName>.md

Zum Beispiel:

• prompts/Neo-brutalism.md
• prompts/ModernDark.md
• prompts/Cyberpunk.md

Schritt 4: Designsystem anwenden

Sobald du die Designsystem-Prompt geladen hast:

1. Verinnerliche die Designphilosophie – Verstehe die Kernprinzipien, visuellen Signaturen und Unterscheidungsmerkmale
2. Extrahiere Design-Tokens – Farben, Typografie, Abstände, Schatten, Rahmen
3. Befolge Komponentenmuster – Verwende die angegebenen Button-Stile, Karten-Layouts, etc.
4. Wende den „Bold Factor“ an – Implementiere signifikante Elemente, die das Design authentisch machen
5. Vermeide Anti-Patterns – Verwende keine Techniken, die die Ästhetik brechen

Schritt 5: Mit Kontext bauen

Vor dem Schreiben von Code:

• Identifiziere den vorhandenen Tech-Stack des Nutzers
• Verstehe ihre Komponentenarchitektur
• Notiere etwaige Einschränkungen (CSS-Frameworks, Designbibliotheken, etc.)

Beim Schreiben von Code:

• Passe dich ihren vorhandenen Mustern und Konventionen an
• Zentralisiere Design-Tokens in CSS-Variablen oder einer Konfigurationsdatei
• Erstelle wiederverwendbare, zusammensetzbare Komponenten
• Erkläre deine Architekturentscheidungen kurz

Qualitätsstandards:

• Erhalte oder verbessere die Barrierefreiheit
• Stelle reaktionsschnelles Design über alle Geräte hinweg sicher
• Triff bewusste, kreative Designentscheidungen (kein generischer Boilerplate-Code)
• Hinterlasse die Codebasis sauberer, als du sie vorgefunden hast

Beispiele

Beispiel 1: Nutzer gibt Stil an

Nutzer: „Erstelle eine Landing Page für mein SaaS-Produkt mit einem neo-brutalistischen Design“

Skill-Aktionen:

1. Erkenne Schlüsselwörter: „Landing Page“, „neo-brutalistisch“
2. Ordne „neo-brutalistisch“ → prompts/Neo-brutalism.md zu
3. Lese die Designsystem-Prompt
4. Stelle klärende Fragen: „Welchen Tech-Stack verwendest du? React, Vue oder einfaches HTML/CSS?“
5. Baue die Landing Page nach den Prinzipien des Neo-Brutalismus (dicke Rahmen, harte Schatten, kräftige Farben, etc.)

Beispiel 2: Nutzer gibt keinen Stil an

Nutzer: „Hilf mir, eine Portfolio-Website zu bauen“

Skill-Aktionen:

1. Erkenne: „Portfolio-Website“ (kreativer Kontext)
2. Schlage Optionen vor: „Möchtest du einen bestimmten Designstil? Ich kann es in Modern Dark (anspruchsvoll), Neo-Brutalismus (kühn und kreativ) oder Swiss (minimalistisch und sauber) erstellen.“
3. Nutzer antwortet mit Präferenz
4. Lade die entsprechende Prompt und baue

Beispiel 3: Komponentenanfrage

Nutzer: „Füge ein Kontaktformular zu meiner Next.js-App hinzu. Mach es modern und professionell.“

Skill-Aktionen:

1. Schlüsselwörter: „Next.js“, „modern und professionell“
2. Wähle: ModernDark.md (modern) oder Professional.md (professionell)
3. Lese Designsystem
4. Baue Formularkomponente, die ihren Next.js-Mustern entspricht
5. Verwende Design-Tokens aus der Prompt (Farben, Typografie, Schatten, etc.)

Schnellreferenz-Befehle

Bei der Implementierung kannst du schnell auf bestimmte Abschnitte verweisen:

Farben:

Grep: pattern "Token|Value|Usage" path "prompts/<Style>.md"

Typografie:

Grep: pattern "Font|Weight|Size" path "prompts/<Style>.md"

Komponentenmuster:

Grep: pattern "Button|Card|Input" path "prompts/<Style>.md"

Tipps für die besten Ergebnisse

1. Lies die gesamte Prompt – Überfliege sie nicht. Die Abschnitte zur Designphilosophie und Differenzierung sind entscheidend.
2. Implementiere signifikante Elemente – Jedes Designsystem hat einen „Bold Factor“-Abschnitt. Diese Elemente machen es authentisch.
3. Vermeide Anti-Patterns – Jede Prompt listet auf, was NICHT getan werden soll. Befolge diese Regeln strikt.
4. Stelle Fragen – Wenn die Bedürfnisse des Nutzers unklar sind, frage vor dem Bauen.
5. Passe vorhandenen Code an – Kämpfe nicht gegen ihren Tech-Stack. Integriere das Designsystem in ihre vorhandenen Muster.

Hinweise

• Alle Designsystem-Prompts folgen der gleichen Struktur: Abschnitte <role> und <design-system>
• Die Prompts enthalten detaillierte Farbpaletten, Typografieskalen, Komponentenmuster und Implementierungsbeispiele
• Jeder Stil ist produktionsreif und wurde sorgfältig auf visuelle Unterscheidbarkeit ausgelegt
• Die Prompts wurden entwickelt, um generische, KI-ähnliche Oberflächen zu verhindern

Zukünftige Erweiterungen

Mögliche Verbesserungen für diesen Skill:

• Unterstützung für Stilkombinationen (z. B. „Cyberpunk + Minimal“)
• Workflow zur Erstellung benutzerdefinierter Stile
• Extraktion von Design-Tokens nach JSON/CSS
• Generierung von Komponentenbibliotheken aus Prompts