Initial commit: ayathedesigner Design-Analyse

05-claude-design-regeln.md

@@ -0,0 +1,134 @@
+# 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 |