# Claude Design-Regeln (basierend auf ayathedesigner-Analyse)

Wenn Bao ein neues Design anfordert, wende ich diese Regeln an.

---

## REGEL 1: Frage zuerst nach dem Markencharakter

Bevor ich eine Farbe oder ein Layout wähle, bestimme ich (oder frage):

- **Premium / Tech / Fintech?** → Dark Mode, Violett/Blau-Töne, Neon-Akzent
- **Marketing / Growth / Startup?** → Warm, Gold/Beige, schwebende Karten, Social Proof prominent
- **Portfolio / Agentur / Editorial?** → Schwarz-Weiß oder Off-White, Typografie dominiert
- **Bold / Challenger-Brand?** → Schwarz + eine einzige Neon-Farbe (Grün, Orange, Blau)

**Niemals**: Pastellig, überladen, viele gleichwertige Farben.

---

## REGEL 2: Monochrome + 1 Akzent

Jedes Design bekommt:
- Einen **neutralen Grundton** (Schwarz, Weiß, Creme, Dunkelblau)
- Genau **einen Akzentton** (die Signalfarbe für CTAs, Highlights, aktive States)
- Optional: Ein **Gradient** als Premium-Signal (holographisch, nie flach)

Kein Design braucht mehr als 3 Farben. Wenn es mehr sind, reduzieren.

---

## REGEL 3: Headline-First Hierarchie

Jede Seite / jeder Screen startet mit einer großen, mutigen Headline. Format:

```
[Kurze Verheißung, max. 5 Wörter, Bold]
[1-2 Zeilen erklärender Subtext, deutlich kleiner]
[CTA Button] [Sekundärer Link]
```

Die Headline muss eine **Verheißung** sein, keine Beschreibung:
- ❌ "Unser Password Manager"
- ✅ "Your Passwords, Safely Secured"
- ❌ "Finanzmanagement App"
- ✅ "Make Your Finances Move"

---

## REGEL 4: Floating Elements für Tiefe

Jedes Design bekommt mindestens eine "schwebende Ebene":
- Device-Mockups (iPhone, Browser) die über dem Hintergrund positioniert sind
- UI-Cards die aus der Oberfläche herausragen
- Statistik-Widgets die wie Post-its am Interface hängen

Dies erzeugt Räumlichkeit und macht das Design lebendig statt flach.

---

## REGEL 5: CTA immer Primär + Sekundär

```
[Ausgefüllter Button in Akzentfarbe] [Ghost-Button oder Text-Link]
```

- Primärer CTA: immer abgerundet, immer mit Pfeil-Icon (→ oder ↗)
- Sekundärer CTA: "See our work", "Learn more", oder Ghost-Outline
- Niemals mehr als 2 CTAs auf einer Sektion

---

## REGEL 6: App-Designs immer als Multi-Screen Flow

Wenn ich eine App zeige, immer 2–3 Screens in Reihenfolge:
1. **Onboarding / Splash** (Markenidentität, erster Eindruck)
2. **Haupt-Dashboard** (Kernfunktion, wichtigste Daten)
3. **Detail-View** (tiefere Funktion, z.B. Transaktion, Profil, Einstellungen)

Screens im iPhone-Mockup mit Dynamic Island, leicht gestaffelt auf einem Gradient-Hintergrund.

---

## REGEL 7: Daten sind Design-Elemente

Wenn ein Design Zahlen enthält:
- Die Hauptzahl wird **groß und prominent** dargestellt
- Trend-Indikatoren (↑ +7.45%) immer farbkodiert (Grün = positiv, Rot = negativ)
- Liniendiagramme mit einem einzigen Highlight-Tooltip-Punkt
- Fortschrittsbalken in der Akzentfarbe

---

## REGEL 8: Extrem groß oder winzig – nie mittelmäßig

Verzichte auf "mittlere" Schriftgrößen:
- **Sehr groß** (48px+): Headlines, Zahlenwerte
- **Mittelgroß** (16–20px): Buttons, Labels, Nav-Items
- **Klein** (12–14px): Body-Text, Caption, Helper-Text

Wenn ich zwischen zwei Größen schwanke: die größere nehmen.

---

## REGEL 9: Social Proof in jede Marketing-Seite

Jede Landingpage bekommt direkt nach der Hero-Section:
- Einen numerischen Beweis: "Trusted by X users", "X% reduction in..."
- Eine Logo-Bar mit Kundenlogos
- Optional: Ein Testimonial mit Foto, Name, Titel

---

## REGEL 10: Keine beliebigen Dekorationen

Alle Designelemente müssen einen Grund haben:
- Schmetterlinge (Convix) = Transformation als Markenmetapher
- Neon-Gradient (Beyond Finance) = Energie, Dynamik, Premium
- Handschrift-Annotierungen (BrandLyft) = Menschlichkeit, Kreativität
- Großer Hintergrundtext (Swapify) = Markenname als Textur

**Niemals** dekorieren um zu dekorieren.

---

## Schnell-Referenz: Wenn Bao sagt...

| Bao sagt | Ich denke sofort |
|---|---|
| "Mach eine App für Finanzen" | Dark Mode, Violett-Gradient, Multi-Screen Flow, Zahlen groß |
| "Mach eine Landing Page" | Welcher Charakter? → Farbe wählen → Hero mit Floating Mockup |
| "Mach etwas Modernes" | Schwarz + 1 Neon-Farbe, große Headline, minimaler Rest |
| "Mach etwas Warmem" | Creme/Beige, handgeschriebene Annotierungen, organische Formen |
| "Mach ein Portfolio" | Schwarz-Weiß oder Weiß, Editorial-Grid, Typografie dominant |
| "Mach eine SaaS-Website" | Dark oder Hell je nach Zielgruppe, Dashboard-Mockup als Hero |