Castor6/tactus

Fähigkeit: Design-Stil

Zweck

Diese Fähigkeit hilft Claude Code dabei, schöne, unverwechselbare Frontend-Oberflächen zu erstellen, indem automatisch Design-System-Prompts aus dem Verzeichnis prompts/ abgerufen werden. Anstatt generische UI zu produzieren, ermöglicht diese Fähigkeit Claude, Schnittstellen mit spezifischen Design-Ästhetiken wie Neo-Brutalismus, Modern Dark, Luxus, Cyberpunk und mehr zu bauen.

Wann verwenden

Diese Fähigkeit wird automatisch aufgerufen, wenn:

• Der Nutzer bittet, eine Webseite, Landingpage oder Webanwendung zu erstellen
• 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 brutalen Stil“)

Verfügbare Design-Stile

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

• Academia – Gelehrt, klassisch, verfeinert
• ArtDeco – Luxuriöser Glamour der 1920er
• Bauhaus – Funktionalistische, geometrische Minimalität
• 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, konversationell (Claude-Ästhetik)
• Industrial – Roh, mechanisch, utilitaristisch
• Kinetic – Dynamisch, bewegungsfokussiert
• Luxury – Premium, elegant, anspruchsvoll
• Material – Google Material Design
• Maximalism – Kühn, ausdrucksstark, üppig
• MinimalDrak – Minimales dunkles Thema (Anmerkung: Tippfehler im Original)
• ModernDark – Zeitgenössisches dunkles UI mit Tiefe
• Monochrome – Schwarz und Weiß, hoher Kontrast
• Neo-brutalism – Kühner, roher, farbenfroher Brutalismus
• Neumorphism – Weiches UI, Skeuomorphismus
• 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 – Befehlszeilen-Ästhetik
• Vaporwave – 80er/90er-Ästhetik, nostalgisch
• Web3 – Dezentral, Krypto-inspiriert

Wie es funktioniert

Schritt 1: Benutzerabsicht verstehen

Wenn der Nutzer Frontend-Arbeit anfordert, ermittle zunächst:

1. Tech-Stack – Welches Framework verwenden sie? (React, Vue, Next.js usw.)
2. Design-Präferenz – Haben sie einen bestimmten Stil oder eine bestimmte Ästhetik genannt?
3. Komponentenumfang – Einzelne Komponente, vollständige Seite oder gesamte Anwendung?

Schritt 2: Design-Stil auswählen

Wenn der Nutzer einen Stil angibt:

• Ordne seine Anfrage den verfügbaren Stilen zu (z. B. „brutalistisch“ → Neo-brutalism)
• Groß-/Kleinschreibung wird ignoriert (Brutalismus, BRUTALISMUS funktionieren alle)

Wenn der Nutzer keinen Stil angibt:

• Für moderne, professionelle Projekte → ModernDark oder Professional
• Für kreative, mutige 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: Design-System abrufen

Verwende das Lesewerkzeug, 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: Design-System anwenden

Sobald du die Design-System-Prompt geladen hast:

1. Verinnerliche die Design-Philosophie – 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, Kartenlayouts usw.
4. Wende den „Bold Factor“ an – Implementiere Signaturelemente, 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 seine Komponentenarchitektur
• Beachte etwaige Einschränkungen (CSS-Frameworks, Design-Bibliotheken usw.)

Beim Schreiben von Code:

• Passe dich den 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:

• Bewahre oder verbessere die Zugänglichkeit
• Stelle responsives 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 Landingpage für mein SaaS-Produkt mit einem neo-brutalistischen Design“

Fähigkeits-Aktionen:

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

Beispiel 2: Nutzer gibt keinen Stil an

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

Fähigkeits-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-brutalism (kühn und kreativ) oder Swiss (minimalistisch und sauber) erstellen.“
3. Nutzer antwortet mit Präferenz
4. Lade die entsprechende Prompt und baue die Seite

Beispiel 3: Komponentenanfrage

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

Fähigkeits-Aktionen:

1. Schlüsselwörter: „Next.js“, „modern und professionell“
2. Auswahl: ModernDark.md (modern) oder Professional.md (professionell)
3. Lese das Design-System
4. Baue die Formularkomponente passend zu den Next.js-Mustern
5. Verwende Design-Tokens aus der Prompt (Farben, Typografie, Schatten usw.)

Schnellreferenz-Befehle

Bei der Implementierung kannst du schnell auf bestimmte Abschnitte verweisen:

Farben:

Grep: Muster „Token|Wert|Verwendung“ Pfad „prompts/<Stil>.md“

Typografie:

Grep: Muster „Schriftart|Gewicht|Größe“ Pfad „prompts/<Stil>.md“

Komponentenmuster:

Grep: Muster „Button|Karte|Eingabe“ Pfad „prompts/<Stil>.md“

Tipps für beste Ergebnisse

1. Lies die vollständige Prompt – Überfliege sie nicht. Die Abschnitte zur Design-Philosophie und Differenzierung sind entscheidend.
2. Implementiere Signaturelemente – Jedes Designsystem hat einen Abschnitt „Bold Factor“. 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 nach.
5. Passe dich vorhandenem Code an – Kämpfe nicht gegen den Tech-Stack des Nutzers. Integriere das Designsystem in seine vorhandenen Muster.

Hinweise

• Alle Design-System-Prompts folgen derselben Struktur: Abschnitte <rolle> und <design-system>
• Prompts enthalten detaillierte Farbpaletten, Typografieskalen, Komponentenmuster und Implementierungsbeispiele
• Jeder Stil ist produktionsreif und wurde sorgfältig für visuelle Unterscheidbarkeit ausgearbeitet
• Die Prompts sind so konzipiert, dass sie generische, KI-artige Oberflächen verhindern

Zukünftige Erweiterungen

Mögliche Verbesserungen dieser Fähigkeit:

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