AzuTear
135 lines
4.4 KiB
Markdown
135 lines
4.4 KiB
Markdown
# 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 |
|