Eisernes Gesetz

KEINE UI‑AUSGABE OHNE VORHERIGEN ABSCHLUSS DER DESIGN‑THINKING‑PHASE – definiere zuerst Zweck, Ton (eine Richtung) und Differenzierungsanker, bevor du eine einzige Zeile Code schreibst. Der DFII‑Wert muss ≥ 8 betragen, um fortzufahren.

Frontend‑Design Fähigkeit

Zweck

Bietet eine kreative Frontend‑Designmethodik, visuelle Prinzipien und Qualitätschecklisten für den Bau unverwechselbarer, produktionstauglicher Oberflächen, die generische KI‑Ästhetik vermeiden.

Prozess

Design‑Thinking‑Phase (obligatorisch – nicht überspringen)
- Definiere den Zweck: Welche Aktion ermöglicht diese Oberfläche? Ist sie überzeugend, funktional, erkundend oder ausdrucksstark?
- Definiere den Ton: Wähle EINE dominante Richtung (Brutalistisch / Redaktionell / Luxuriös / Retro‑zukunftsweisend / Industriell / Organisch / Verspielt / Maximalistisch / Minimalistisch). Mische nicht mehr als zwei.
- Definiere den Differenzierungsanker: Beantworte „Wenn dies mit entferntem Logo abgescreent würde, wie könnte jemand es erkennen?“ Dies muss in der endgültigen UI sichtbar sein.
Bewerte DFII – berechne den Design‑Machbarkeits‑ und Wirkungsindex (siehe unten). Wert < 8 → überdenke die Richtung, bevor du fortfährst.
Lade Prinzipien – lies reference/frontend‑design‑principles.md für Hinweise zu Typografie, Farbe, Bewegung und Layout.
Implementiere – erstelle funktionierenden Code (Angular, Flutter oder HTML/CSS/JS), der auf die gewählte Ästhetik abgestimmt ist. Folge den Design‑Tokens des Arbeitsbereichs (daisyUI für Angular, AppSpacing/colorScheme für Flutter).
Liefere mit erforderlicher Ausgabestruktur aus – füge Designrichtungsübersicht, Design‑System‑Snapshot, Implementierung und Differenzierungsaufruf ein.

Vollständige Designprinzipien, Anti‑Patterns und Qualitätscheckliste:

Lies reference/frontend‑design‑principles.md

Fehlerbehandlung

Wenn das Zielframework nicht angegeben ist, frage den Benutzer, bevor du fortfährst. Wenn externe Schrift‑/Asset‑Ressourcen nicht verfügbar sind, dokumentiere die Ersatzlösung und fahre fort.

Design‑Machbarkeits‑ und Wirkungsindex (DFII)

Bewerte die Designrichtung, bevor du Code schreibst. Mindestpunktzahl von 8 erforderlich, um fortzufahren.

Dimensionen (jeweils 1–5 bewertet)

Dimension	Frage
Ästhetische Wirkung	Wie visuell unverwechselbar und einprägsam ist diese Richtung?
Kontextpassung	Passt diese Ästhetik zum Produkt, zur Zielgruppe und zum Zweck?
Implementierungs‑Machbarkeit	Kann dies sauber mit der verfügbaren Technologie umgesetzt werden?
Leistungssicherheit	Bleibt es schnell und zugänglich?
Konsistenzrisiko	Kann dies über Bildschirme/Komponenten hinweg beibehalten werden? (this subtrahieren)

Formel

DFII = (Wirkung + Passung + Machbarkeit + Leistung) − Konsistenzrisiko
Bereich: −5 → +15

Interpretation

DFII	Bedeutung	Aktion
12–15	Ausgezeichnet	Vollständig umsetzen
8–11	Stark	Mit Disziplin fortfahren
4–7	Riskant	Umfang oder Effekte reduzieren
≤ 3	Schwach	Ästhetische Richtung überdenken

Erforderliche Ausgabestruktur

Jede Frontend‑Design‑Ausgabe MUSS alle vier Abschnitte enthalten:

1. Designrichtungsübersicht

Name der Ästhetik (z. B. „Redaktioneller Brutalismus“, „Luxuriöser Minimalismus“)
DFII‑Wert
Wichtigste Inspiration (konzeptionell – kein visuelles Plagiat)

2. Design‑System‑Snapshot

Schriftarten (mit Begründung – warum diese Schrift für dieses Produkt?)
Farbvariablen (benenne sie: --color-primary, --color-accent, --color-neutral)
Abstandsrhythmus (Basiseinheit und Skala)
Bewegungsphilosophie (sparsam / zielgerichtet? oder gar keine?)

3. Implementierung

Vollständiger funktionierender Code
Kommentare nur dort, wo die Absicht nicht offensichtlich ist
Für Angular: Verwende daisyUI‑Semantik‑Tokens (bg-primary, text-base-content) – keine hartcodierten Hex‑Werte
Für Flutter: Verwende Theme.of(context).colorScheme und AppSpacing.*‑Tokens – niemals Color(0xFF...)

4. Differenzierungsaufruf

Formuliere ausdrücklich:

„Dies vermeidet generische UI, indem X anstelle von Y getan wird.“

Wenn du diesen Satz nicht vervollständigen kannst, ist das Design nicht unverwechselbar genug.

Betreiber‑Checkliste (Vor‑Auslieferung‑Tor)

Kreative Ambitionsvorgabe

Claude ist zu außergewöhnlicher kreativer Arbeit fähig. Halte dich nicht zurück – zeige, was wirklich erschaffen werden kann, wenn man über den Tellerrand hinausdenkt und sich voll und ganz einer unverwechselbaren Vision verschreibt.

Interpretiere Anforderungen kreativ. Triff unerwartete Entscheidungen, die sich wirklich für den Kontext entworfen anfühlen. Keine zwei Designs sollten die gleiche ästhetische DNA teilen.

Konvergiere NIEMALS bei gemeinsamen Entscheidungen über Generationen hinweg. Die Tatsache, dass Space Grotesk, Lila‑Verläufe oder symmetrische Hero‑Layouts „früher funktioniert haben“, ist genau der Grund, sie nicht wieder zu verwenden. Vielfalt ist obligatorisch, nicht optional.

Vorbereitende Fragen (falls erforderlich)

Für wen ist dies, emotional gesehen?
Sollte es vertrauenswürdig, aufregend, ruhig oder provokativ wirken?
Ist Einprägsamkeit oder Klarheit wichtiger?
Wird dies auf andere Seiten/Komponenten skalieren?
Was sollen die Benutzer in den ersten 3 Sekunden fühlen?

Arbeitsbereichs‑Integration

Stack	Design‑Token‑Regel	Referenz
Angular	Nur daisyUI‑Semantik‑Tokens – `bg-primary`, `text-base-content`, `border-base-300`	`angular-spa/reference/daisyui-v5-components.md`
Flutter	`Theme.of(context).colorScheme.` + `AppSpacing.` – niemals `Color(0xFF...)` oder `EdgeInsets.all(16)`	`ui-standards-tokens/reference/ui-design-tokens.md`
HTML/CSS	Ausschließlich CSS‑Variablen – `var(--color-primary)`	Definiere im `:root`‑Block
React Native	Außerhalb des Gültigkeitsbereichs dieser Fähigkeit – verwende die `mobile-developer`‑Fähigkeit	`.claude/skills/mobile-developer/SKILL.md`

Verwandte Fähigkeiten:

web-design-guidelines – nach der Implementierung ausführen, um gegen die Vercel Web Interface Guidelines zu prüfen
design-system – Token‑Konformitätsdurchsetzung für Angular und Flutter
angular-spa – Angular‑Implementierungsmuster mit daisyUI
ui-standards-tokens – Flutter‑Design‑Token‑Definitionen

kumaran-is/claude-code-onboarding

Was ist claude-code-onboarding?

In Ihrer bevorzugten KI fragen

Dokumentation