Claude Design Prinzipien
Kernaussage: Gutes Design wird nicht aus dem Nichts erraten, sondern wächst aus dem vorhandenen Kontext heraus. Dieser Skill komprimiert das Design-Urteilsvermögen von Claude Design in eine ausführbare Checkliste.
🚦 Wann auslösen (Pflichtlektüre)
Wenn die Aufgabe zu einer der folgenden Kategorien gehört, müssen die drei harten Regeln dieses Skills (siehe unten) zuerst geladen werden, bevor gehandelt wird:
- Webseiten, Landing Pages, Komponentenbibliotheken
- Folien, Präsentationen, Berichtsdokumente
- App-/Web-Prototypen, interaktive Demos
- Poster, visuelle Entwürfe, Infografiken
- Markenmaterialien, Karten, Logos
- Alle HTML/SVG-Ausgaben, die "nicht wie KI-generiert" aussehen sollen
Auslösewörter: design, UI, mockup, prototype, slide, deck, poster, landing, wireframe, mock, interface, page, presentation
⛔ Drei harte Regeln (Verstoß bedeutet Fehlschlag)
Regel 1: Vor dem Design muss der Kontext erfasst werden
Es gibt nicht "Ich habe eine gute Idee im Kopf und lege einfach los." Vor dem Handeln muss mindestens eines der folgenden Elemente vorliegen:
- Vorhandene UI-Kit-/Design-System-Dateien
- Marken-Tokens (Farbpalette, Schriftstapel, Abstände, Radius-Spezifikationen)
- Screenshots von Referenzseiten/-produkten
- Komponenten aus dem vorhandenen Codebase
- Eindeutiges Markenbeschreibungsdokument (z. B. Equation Markenhandbuch)
Fehlt eines der oben genannten → Muss zuerst bei Jane angefragt werden, oder gemeinsam ein "visueller DNA-Ankerpunkt" festgelegt werden (z. B. "wie Aesop: Cremeweiß + Serifenschrift + viel Weißraum").
Ein Mock von Grund auf ist das letzte Mittel; falls es passiert, entsteht generischer KI-Schrott.
Regel 2: Mindestens 3 Varianten abgeben, progressiv von Basis bis Avantgarde
Es ist nicht erlaubt, nur eine Lösung anzubieten. Jede Ausgabe umfasst mindestens:
- Variante A (Standard) — Hält sich strikt an das vorhandene Designsystem, null Risiko
- Variante B (Fortgeschritten) — Fügt auf Basis des Systems kleine Änderungen hinzu (Farbschema, Layout, typografischer Rhythmus)
- Variante C (Avantgarde) — Darf das System verlassen, neue Metaphern, neuartige Layouts, mutige Typografie ausprobieren
Präsentiere diese als verschiedene Folien / Tabs / nebeneinander angeordnete Karten, damit Jane mixen und kombinieren kann.
Regel 3: AI-Slop-Liste komplett blockieren
Diese Muster sehen sofort nach KI aus und sind verboten (vollständige Liste siehe ai-slop-avoid.md):
- ❌ Große Farbverlaufs-Hintergründe (Violett-Blau, Pink-Orange usw.)
- ❌ Abgerundete Container + 4px Farbakzent links
- ❌ Selbst gemalte SVG-Illustrationen
- ❌ Inter / Roboto / Arial / Fraunces / Systemschriften
- ❌ Emoji-Haufen (außer die Marke verwendet sie explizit)
- ❌ Daten, Icons, Statistiken, die nur zum Füllen da sind
- ❌ Erfundene "Nutzerbewertungen", Platzhalter-Porträts
- ❌ Jeder Abschnitt bekommt "Vertrauenssiegel" / "Kundenlogos"
📐 Ausführungsprozess (7 Schritte)
1. Anforderung lesen → Erkennen, ob dieser Skill ausgelöst wird
2. Kontext erfassen → UI-Kit / Marken-Assets / Referenzen anfordern; wenn nicht vorhanden, Jane fragen
3. Fragenkatalog → Mindestens 10 Fragen nach question-templates.md stellen
4. Visuelles System definieren → Mündlich/schriftlich klar sagen: "Ich verwende Schrift X + Farbpalette Y + Layout-Rhythmus Z"
5. Mehrere Varianten bauen → Mindestens 3 Varianten, als Tabs/Tweaks/Folien präsentiert
6. Selbstprüfung → ai-slop-avoid.md-Liste durchgehen
7. Ausliefern → Datei für Jane öffnen + open -R Fenster im Finder
🎛️ Tweaks: Echtzeit-Anpassungsmodus (optional, aber empfohlen)
In der HTML-Ausgabe einen JSON-Konfigurationsblock mit folgender Markierung hinterlegen:
<script>
const TWEAKS = /*EDITMODE-BEGIN*/{
"primaryColor": "#D97757",
"fontSize": 16,
"radius": 8,
"dark": false
}/*EDITMODE-END*/;
</script>
Zweck: Bei späteren Farb-/Schriftgrößenänderungen kann ich dieses JSON gezielt ersetzen, ohne die gesamte HTML-Datei zu durchsuchen. Jane kann es auch selbst von Hand ändern und die Vorschau aktualisieren. Vollständiges Template siehe starter-components/tweaks-block.html.
📊 Harte Maßstäbe (unverhandelbar)
| Träger | Minimale Schriftgröße | Minimales Hit-Target |
|---|---|---|
| 1920×1080 Folie | 24px | — |
| Druckdokument | 12pt | — |
| Handy-Mockup | 14px | 44px |
| Desktop-Web Fließtext | 16px | — |
🔧 PAI-seitige Zusatz-Skills (zur Laufzeit kombinieren)
Dieser Skill löst nur das "Design-Urteilsvermögen". Für die tatsächliche Umsetzung kombinieren mit:
| Anforderung | Was verwenden |
|---|---|
| Visuelle Richtungsreferenz (50 Stile / 21 Paletten) | ui-ux-pro-max |
| Frontend-Struktur / Komponenten-Code-Qualität | frontend-design:frontend-design |
| Dev-Server starten + Browser-Validierung | webapp-testing / Browser MCP |
| HTML → PPTX | pptx / nano-ppt-generator |
| Illustrationen / Icon-Placeholder tatsächlich erstellen | nano-image-generator-skill / Art |
| Folien-HTML-Struktur | ppt / html-ppt-designer |
📎 Anhänge (Erweiterung v1.1.0)
📚 Regel-Dokumente (bei Bedarf szenenbasiert laden)
| Datei | Wann lesen |
|---|---|
ai-slop-avoid.md | Vor jedem Design durchgehen — 25 Anti-Patterns + Alternativen |
question-templates.md | Zu Beginn der Aufgabe, wenn Fragen an Jane aufgelistet werden müssen |
typography-system.md | Bei Entscheidung über Schriftgröße/-stärke/-höhe/-kombination |
color-system.md | Bei Farbwahl, WCAG-Kontrastprüfung, oklch-Anpassung |
spacing-rhythm.md | Bei Entscheidung über Abstände/Rundungen/Schatten/Ausrichtung |
design-heuristics.md | Bei Layout-Fehlern, wenn "nicht klar ist, warum es sich falsch anfühlt" — Gestalt/Fitts/Hick-Referenz |
🧩 Starter-Komponenten (Gerüst zum Ein-Klick-Kopieren)
| Datei | Verwendung |
|---|---|
starter-components/deck-stage.html | Folien-Bühne (1920×1080 + Tastaturnavigation + adaptive Skalierung) |
starter-components/design-canvas.html | Mehrere Varianten nebeneinander (Standard/Fortgeschritten/Avantgarde) |
starter-components/tweaks-block.html | Tweaks-Echtzeitanpassungsvorlage + postMessage-Protokoll |
starter-components/ios-frame.html | iPhone 16 Pro Geräterahmen + Statusleiste + Home-Indikator |
starter-components/browser-window.html | Browserfenster (Safari/macOS-Stil + Tab-Leiste) |
starter-components/animations.html | Timeline-Animation-Engine (Stage + Sprite + 50 Zeilen Kern) |
🧭 Entscheidungsbaum: Welche Datei zuerst lesen?
Designaufgabe erhalten
↓
Pflichtlektüre: SKILL.md (diese Datei) drei harte Regeln
↓
┌─────────────────────────────────┐
│ Aufgabentyp → entsprechende │
│ Unterdatei lesen │
├─────────────────────────────────┤
│ Vor dem Schreiben von Code → ai-slop-avoid │
│ Jane fragen notwendig → question-templates │
│ Schriftart festlegen → typography-system │
│ Farbwahl → color-system │
│ Abstände/Rundungen festlegen → spacing-rhythm │
│ PC-Webseite erstellen → browser-window │
│ App/Handy erstellen → ios-frame │
│ PPT/Deck erstellen → deck-stage │
│ Mehrere Varianten zeigen → design-canvas │
│ Interaktive Animationen → animations │
│ Echtzeit-Anpassungen → tweaks-block │
│ Gefühl stimmt nicht, aber → design-heuristics │
│ unklar warum │
└─────────────────────────────────┘
💬 An mein zukünftiges Ich
90 % der Designfehler kommen nicht von mangelndem ästhetischen Gespür, sondern von nicht genau genug nachgefragt + zu wenig Kontext + nur eine Lösung angeboten. Behandle diesen Skill als Checkliste und geh jeden Schritt durch. Verwechsle nicht "schnelle Ergebnisse" mit "gutem Design".