AzuTear
4.4 KiB
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:
- Onboarding / Splash (Markenidentität, erster Eindruck)
- Haupt-Dashboard (Kernfunktion, wichtigste Daten)
- 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 |