Initial commit: ayathedesigner Design-Analyse

01-ueberblick.md

@@ -0,0 +1,63 @@
+# ayathedesigner – Überblick & Designidentität
+
+**Quelle:** TikTok @ayathedesigner | Instagram @ayathedesignerr  
+**Disziplin:** UI/UX Design, Web Design (Freelance)  
+**Branding-Logo:** „aa." – minimalistisch, Kleinbuchstaben, roter Punkt
+
+---
+
+## Wer ist Aya?
+
+Aya ist eine Freelance UI/UX Designerin, die sich auf Website- und App-Design spezialisiert hat. Sie ist auf TikTok mit ~8.700 Followern und 72.000 Likes aktiv und zeigt zwei Inhaltstypen:
+
+1. **Ihre eigene Arbeit** – echte Freelance-Projekte für Kunden (Websites, Web-Apps)
+2. **Design-Inspiration** – kuratierte App- und Website-Designs als Slideshow-Posts
+
+Ihr persönliches Branding ist durchgängig minimalistisch: Das „aa." Logo (weiß auf schwarz, Punkt in Rot/Orange als einziger Akzent) spiegelt ihre Designphilosophie direkt wider.
+
+---
+
+## Designspektrum
+
+Aya deckt zwei klar unterschiedliche Ästhetiken ab:
+
+### 1. Dark / Premium Aesthetic (App & Fintech)
+Dominiert ihre Inspirations-Posts und Präsentationen. Typisch für moderne SaaS- und Fintech-Apps:
+- Schwarze, tiefpurpurne oder dunkelgraue Hintergründe
+- Neon-Akzente (Grün, Blau, Violett)
+- Leuchtende Farbverläufe (Orange-Blau, Blau-Violett)
+- Hoher Kontrast, maximale visuelle Wirkung
+
+### 2. Clean / Minimal Aesthetic (Web & Portfolio)
+Dominiert ihre eigenen Freelance-Websites:
+- Weiße oder cremefarbene Hintergründe
+- Viel Weißraum
+- Warme erdige Töne (Gold, Beige, Olivgrün)
+- Editoriales Schwarz-Weiß für anspruchsvolle Marken
+
+---
+
+## Analysierte Projekte
+
+| Projekt | Typ | Ästhetik |
+|---|---|---|
+| Digitwist | Website Hero | Dunkel, blau-schwarz, vertikal gestreift |
+| Convix Software | Website Hero | Hell, Himmelblau, Schmetterlinge |
+| BrandLyft | Website Hero | Creme, handgezeichnete Annotierungen |
+| Swapify | Website + App | Lila-blau Gradient |
+| Cloud Lab | Blog-Website | Weiß, minimal, Grid |
+| Kate.m Portfolio | Designer-Portfolio | Hell, Collage-Karten |
+| Rapeto | Growth Marketing | Gold/Beige, schwebende Karten |
+| Ockham | Agentur-Website | Schwarz, Editorial |
+| Proton Pass | App (Inspiration) | Dunkel, monochrom |
+| Task-App | App (Inspiration) | Dunkel-Blau, blauer Akzent |
+| Wallet App (purple) | App (Inspiration) | Lila-Schwarz |
+| Beyond Finance | App (Inspiration) | Dunkel-Violett, Neon-Gradient |
+| Finance App (green) | App (Inspiration) | Schwarz + Neongrün (#CCFF00) |
+| Finance App (spanish) | App (Inspiration) | Schwarz + Goldgelb |
+
+---
+
+## Kernaussage ihrer Designphilosophie
+
+Aya versteht Design als **Kombination aus Stimmung und Funktion**. Sie wählt die Ästhetik immer passend zur Markenidentität des Kunden – Premium/Tech bekommt Dark Mode, warmes Wachstum bekommt Gold-Beige, editorielle Marken bekommen Schwarz-Weiß. Dabei setzt sie **immer auf starke visuelle Hierarchie**, klare CTAs und emotionale Wirkung durch Farbwahl und Typografie.

02-farbpalette.md

@@ -0,0 +1,93 @@
+# ayathedesigner – Farbpalette & Farbanwendung
+
+---
+
+## Primäre Farbwelten
+
+Aya arbeitet mit vier distinkten Farbwelten, die sie je nach Kundenprofil einsetzt:
+
+---
+
+### Welt 1: Dark Premium (Fintech / SaaS / App)
+
+Die häufigste Ästhetik in ihren Posts. Basis ist immer ein sehr dunkler Hintergrund.
+
+| Rolle | Farbe | Beschreibung |
+|---|---|---|
+| Hintergrund | `#0A0A0F` – `#12102A` | Fast-Schwarz bis Tief-Dunkelblau |
+| Primär-Akzent | `#6B4EFF` – `#8B5CF6` | Violett / Electric Purple |
+| Sekundär-Akzent | `#3B82F6` | Blau |
+| Gradient-Akzent | Orange → Pink → Blau | Holographic / Neon-Gradient |
+| Text hell | `#FFFFFF` | Reines Weiß für Headlines |
+| Text gedimmt | `#9CA3AF` | Grau für Body-Text |
+| CTA | `#7C3AED` oder weiß auf dunkel | Button-Farbe |
+
+**Beispiele beobachtet:**
+- Beyond Finance App: Dunkel-Violett (#1A0533) + Neon-Gradient (orange-pink-blau, holographisch)
+- Proton Pass App: Reines Schwarz (#000000) + Weiß, keine Akzentfarbe außer Grau
+- Task-Management-App: Dunkel-Blau (#0D1B3E) + helles Blau als Akzent
+
+---
+
+### Welt 2: Neon Contrast (Bold Finance)
+
+Extrem hoher Kontrast durch eine einzige, fast schreiende Akzentfarbe auf fast-schwarzem Grund.
+
+| Rolle | Farbe | Beschreibung |
+|---|---|---|
+| Hintergrund | `#0F0F0F` – `#111111` | Tief-Schwarz |
+| Neon-Akzent | `#CCFF00` – `#D4FF00` | Neongrün / Acid Green |
+| Text | `#FFFFFF` | Weiß |
+| CTA-Button | `#CCFF00` mit schwarzem Text | Hoher Kontrast |
+
+**Beispiel beobachtet:**
+- Finance App "Find way to manage your finance": Schwarz + Acid Green für Balken, Karte, Button, Statistik-Highlights
+
+---
+
+### Welt 3: Warm / Organic (Marketing / Portfolio / Editorial)
+
+Für Kunden, die Wärme und Vertrauen kommunizieren wollen.
+
+| Rolle | Farbe | Beschreibung |
+|---|---|---|
+| Hintergrund | `#FAFAF8` – `#FFF8F0` | Off-White / Creme |
+| Warm-Akzent 1 | `#D4A853` – `#F0C060` | Gold / Amber |
+| Warm-Akzent 2 | `#E87040` – `#F05020` | Orange-Rot (CTAs) |
+| Pflanzen/Natur | `#4A7C59` | Grün für organische Elemente |
+| Text dunkel | `#111111` – `#1A1A1A` | Fast-Schwarz für Headlines |
+| Text medium | `#6B7280` | Grau für Body |
+
+**Beispiele beobachtet:**
+- Rapeto (Growth Marketing): Gold-Beige Hintergrund, schwebende Karten
+- Convix Software: Himmelsblau + Schmetterlinge + weiße UI-Elemente
+- BrandLyft: Creme (#FFF5F0) + Orange-Rot CTA + handgezeichnete Annotierungen
+
+---
+
+### Welt 4: Editorial Monochrom (Agentur / High-End)
+
+Reduziert auf Schwarz & Weiß, maximale Typografie-Dominanz.
+
+| Rolle | Farbe |
+|---|---|
+| Hintergrund | `#FFFFFF` oder `#0A0A0A` |
+| Text / Elemente | `#000000` oder `#FFFFFF` |
+| Akzent | Maximal 1 Farbe, sehr sparsam |
+
+**Beispiel beobachtet:**
+- Ockham Agentur-Website: Schwarz-Weiß, editorial, PROJECTS grid
+
+---
+
+## Farbprinzipien
+
+1. **Monochrome + 1 Akzent**: Fast alle Designs laufen auf einem neutralen Grund (schwarz, weiß, creme) mit exakt EINEM Akzentton. Nie mehr als zwei aktive Farben.
+
+2. **Akzent = Funktion**: Die Akzentfarbe sitzt immer auf dem CTA-Button, dem wichtigsten Datenwert oder dem Headline-Highlight. Farbe als Wegweiser.
+
+3. **Gradient = Premium**: Sobald ein Farbverlauf erscheint, ist er holographisch (mehrere Spektralfarben) – das positioniert die Marke sofort im Premium-Segment.
+
+4. **Hintergrundfarbe = Markencharakter**: Weiß = vertrauenswürdig/sauber, Schwarz = premium/tech, Gold = Wachstum/warm, Dunkel-Violett = mysteriös/fintech.
+
+5. **Keine Pastellfarben**: Aya meidet pastellige, verwässerte Töne. Ihre Farben sind entweder sehr gesättigt/neon oder komplett entsättigt (grau, weiß, schwarz).

03-typografie-und-layout.md

@@ -0,0 +1,149 @@
+# ayathedesigner – Typografie & Layout-Muster
+
+---
+
+## Typografie
+
+### Headline-Stil
+
+Aya verwendet fast ausschließlich **große, mutige Display-Typografie** für Headlines. Die Schrift macht oft 40–70% der Hero-Section aus.
+
+**Beobachtete Charakteristika:**
+- Gewicht: Bold bis ExtraBold (700–900)
+- Größe: Extrem groß, oft über den Bildschirm hinausgehend (z.B. "Swapify" als Background-Text)
+- Mischung: Mitunter kombiniert sie Regular Italic mit Bold in einem Satz für Kontrast  
+  → Beispiel: *"Shaping **Agencies** of tomorrow"* (Italic + Bold gemischt)
+- Schriften wirken wie: Inter, Plus Jakarta Sans, Space Grotesk, Neue Montreal oder ähnliche moderne Grotesken
+
+**Headline-Formate die sie bevorzugt:**
+```
+Kurze, schlagkräftige Aussagen:
+"Build Faster"
+"Make Your Finances Move"
+"Engage Audiences with Stunning Videos"
+"Your Passwords, Safely Secured"
+```
+
+Immer aktiv formuliert, immer eine Verheißung. Nie beschreibend.
+
+---
+
+### Body Text
+
+- Klein und unauffällig – dient als Kontrast zur großen Headline
+- Maximal 2–3 Zeilen
+- Hellgrau auf dunklem Grund, Dunkelgrau auf hellem Grund
+- Line-Height großzügig, gute Lesbarkeit
+
+---
+
+### Typografische Sonderelemente
+
+**Handgeschriebene Annotierungen (nur bei Warm/Marketing-Designs):**
+- "Elevate your brand" mit geschwungenem Pfeil
+- "It's free" mit Pfeil zum CTA
+- Wirken wie Post-its oder Notizen eines Designers
+- Humanisieren das Design, brechen die Perfektion auf
+
+**Background-Typografie:**
+- Sehr großer, leicht transparenter Text als Textur-Element im Hintergrund
+- Beispiel: "Swapify" nimmt die gesamte untere Bildhälfte ein
+- Erzeugt Tiefe ohne zusätzliche grafische Elemente
+
+**Badge/Pill-Labels:**
+- "Convix Software" als kleines Label über der Headline
+- "Join over 100,000 happy creators" als Pill
+- Kleine, abgerundete Kapseln mit 1px Border oder gedimmtem Hintergrund
+
+---
+
+## Layout-Muster
+
+### Muster 1: Hero + Floating Cards
+
+Das häufigste Layout in ihren Freelance-Websites.
+
+```
+[NAV BAR mit Logo links, Links zentriert, CTA Button rechts]
+
+[Großer, visuell starker Hero-Bereich]
+  - Headline (sehr groß, zentriert oder linksbündig)
+  - Subtext (2–3 Zeilen)
+  - CTA Button (primär) + Secondary Link
+  
+[Schwebende UI-Karten / Mockups als visuelle Elemente]
+  → Ragen in die Hero-Section hinein
+  → Zeigen das Produkt "in action"
+  
+[Social Proof Bar: Logo-Kette der Kunden]
+
+[Features / Vorteile Section]
+```
+
+**Beispiele:** Rapeto, Convix, BrandLyft, Digitwist
+
+---
+
+### Muster 2: Multi-Screen App-Präsentation
+
+Für App-Designs: immer 2–3 Screens nebeneinander, leicht angewinkelt oder gestaffelt.
+
+```
+[Screen 1: Splash/Onboarding] [Screen 2: Haupt-Dashboard] [Screen 3: Detail-View]
+```
+
+Die Screens sind:
+- Im realistischen iPhone-Mockup (Dynamic Island sichtbar)
+- Leicht in der Perspektive gedreht oder gestaffelt
+- Auf gradient oder einfarbigem Hintergrund "schwebend"
+
+**Reihenfolge der Screens** zeigt immer die User Journey:
+Einstieg → Hauptfunktion → Tiefere Funktion
+
+---
+
+### Muster 3: Editorial Grid (Portfolio/Agentur)
+
+```
+[Übergroßer Seiten-Titel: "PROJECTS"]
+[Grid aus Bild + Projekttitel + Jahr]
+[Horizontale Trennlinien]
+["LET'S TALK" als Footer-CTA]
+```
+
+Sehr magazine-artig, inspiriert von Print-Design. Keine Dekorationen, nur Inhalt.
+
+---
+
+### Muster 4: Dashboard-Layout (App intern)
+
+Für Finanz- und Produktivitäts-Apps immer:
+
+```
+[Begrüßung + User-Name]          [Benachrichtigungs-Icon]
+[Statistik-Highlight / Kontostand]
+[Quick-Action-Reihe: Icons + Labels]
+[Listenabschnitt: "Transaktionen" / "Tasks"]
+  [Karte: Item + Beschreibung + Preis]
+  [Karte: Item + Beschreibung + Preis]
+[Bottom Navigation Bar: 5 Icons]
+```
+
+---
+
+## Spacing & Abstände
+
+- **Großzügige Padding**: Viel Luft um alle Elemente. Kein gequetschtes Layout.
+- **Weißraum als Designelement**: Besonders in Portfolio-Sites, wo leerer Raum Eleganz signalisiert
+- **Card-Abstände**: Einheitliche Gaps zwischen Cards (ca. 16–24px Equivalent)
+- **Section-Trennung**: Klare vertikale Trennung zwischen Sektionen, oft durch Farbwechsel statt Linien
+
+---
+
+## Navigation-Design
+
+Aya-typische Navbars:
+- **Hell**: Logo links | Links zentriert (4–5 Items) | CTA Button rechts (ausgefüllt, abgerundet)
+- **Dunkel**: Logo links (oft mit Icon) | Links | Ghost-Button + Filled Button
+- Navbar ist immer **sehr flach und clean** – keine Schatten, keine dicken Borders
+- CTA-Button in der Navbar hat immer die Akzentfarbe des jeweiligen Designs

04-designprinzipien.md

@@ -0,0 +1,129 @@
+# ayathedesigner – Designprinzipien & Denkmuster
+
+---
+
+## 1. Stimmung vor Funktion – aber Funktion durch Stimmung
+
+Aya wählt niemals beliebig eine Ästhetik. Jede Farbwelt hat eine emotionale Aussage:
+
+| Stimmung | Ästhetik | Für wen |
+|---|---|---|
+| Premium / Tech-Trust | Dark + Violett + Neon | Fintech, Crypto, SaaS |
+| Wachstum / Energie | Gold-Beige + schwebende Karten | Marketing, Growth, Agency |
+| Freiheit / Kreativität | Hell + Schmetterlinge / Natur | Software-Marken die menschlich wirken wollen |
+| Autorität / Expertise | Editorial Schwarz-Weiß | Agenturen, Portfolio-Designer |
+| Frisch / Bold | Schwarz + Neongrün | Challenger-Brands, moderne Finanz-Apps |
+
+**Prinzip:** Das Design kommuniziert die Brand-Persönlichkeit bevor der Nutzer einen einzigen Text liest.
+
+---
+
+## 2. Hierarchie durch Größenkontrast
+
+Aya erzeugt visuelle Führung durch extreme Größenunterschiede:
+
+- **Headline**: Sehr groß (dominiert den Viewport)
+- **Subtext**: Sehr klein (3–4x kleiner als Headline)
+- **Button**: Mittelgroß, aber durch Farbe prominent
+- **Labels / Badges**: Winzig, aber funktional
+
+Es gibt nie "mittlere" Elemente. Alles ist entweder sehr groß oder sehr klein. Das zwingt das Auge auf einen klaren Pfad.
+
+---
+
+## 3. Das CTA-Gesetz
+
+In jedem Design gibt es exakt einen **primären CTA** und maximal einen **sekundären CTA**. Immer:
+
+```
+[Primär: Ausgefüllter Button] [Sekundär: Text-Link oder Ghost-Button]
+```
+
+Der primäre CTA ist immer:
+- In der Akzentfarbe oder kontrastreich
+- Mit abgerundeten Ecken (border-radius: 8–50px)
+- Manchmal mit einem Pfeil-Icon (→ oder ↗)
+
+**Beispiele:**
+- "Book A Free Call →" (Digitwist)
+- "Get Started →" (Convix)  
+- "Install Now ↗" (Swapify)
+- "Get started" + Google/Apple Signin (Beyond Finance)
+
+---
+
+## 4. Floating Elements als Tiefenebene
+
+Fast alle ihre Designs haben eine "schwebende Ebene" – Elemente die vor dem Hintergrund schweben und einen 3D-Effekt erzeugen:
+
+- **Website-Designs**: UI-Screenshots oder Device-Mockups schweben über dem Hintergrund
+- **App-Designs**: Die Phones stehen leicht angewinkelt, werfen subtile Schatten
+- **Cards**: Finanzkarten (Visa/Mastercard) schweben in 3/4-Perspektive
+- **Statistik-Widgets**: Kleine Data-Cards fliegen aus der Hauptoberfläche heraus
+
+Dieses Element schafft räumliche Tiefe und macht statische 2D-Designs lebendig.
+
+---
+
+## 5. Social Proof ist Pflicht
+
+Jede Marketing-Website von ihr hat Social Proof:
+- Logo-Bar: "Trusted by 17,000+ founders" + Logos
+- Stat-Widgets: "+29.33%" als floating Card
+- Testimonial-Karte mit Foto und echtem Namen
+- "Join 100,000+ happy creators" als Pill-Badge
+
+Das ist kein Nice-to-have – es ist in jedem Projekt vorhanden.
+
+---
+
+## 6. Konsistente Iconografie
+
+In App-Designs:
+- **Bottom Navigation**: immer 4–5 Icon-Buttons, das aktive leicht hervorgehoben
+- **Quick-Action-Icons**: Quadratisch, abgerundet, mit Label darunter (Transfer, Send, Pay, More)
+- **Status-Indikatoren**: Progress-Bars, kleine Badges mit Zahl
+- Icons wirken alle aus einem einheitlichen Set (Outline-Style auf dunklem Grund, Filled auf hellem)
+
+---
+
+## 7. Daten als Design-Element
+
+Besonders in Finanz-Apps macht Aya Zahlen zur Hauptattraktion:
+
+- Große Konto-Summen dominieren die Karte: "$ 12,692.00" als größtes Element
+- Prozentzahlen als Highlight: "+7.45%", "-3,382 (33%)"
+- Liniendiagramme mit einem Highlight-Punkt (Tooltip)
+- Balkendiagramme mit der Akzentfarbe gefüllt
+
+Daten sind keine Information, sie sind das Design.
+
+---
+
+## 8. Produktivitäts-Denken in der UX-Struktur
+
+In den Designs die sie bevorzugt und empfiehlt, zieht sich ein roter Faden:
+
+- **Personalisierte Begrüßung**: "Good morning, [Name]!" oder "Hi, [Name]"
+- **Today's Focus**: Was steht heute an? (Tasks, Goals, Aktivität)
+- **Quick Actions**: Die häufigsten Aktionen immer in der ersten Bildschirmhälfte
+- **Progress Visualization**: Fortschritt ist immer sichtbar (Balken, Kreise, %)
+
+Das zeigt ein tiefes Verständnis für App-Flows und tatsächliche Nutzungsszenarien.
+
+---
+
+## 9. Kontext-bewusstes Design-Storytelling
+
+Aya zeigt ihre Designs nie isoliert. Auf TikTok immer mit:
+- Einem persönlichen Foto von sich (Spiegel-Selfie, Lifestyle) als Cover
+- "Dm me for collaborations" als CTA-Text auf dem Thumbnail
+- Hashtags: #websitedesigner #uiuxdesigner #websitedevelopment #designer
+
+Sie vermarktet sich selbst als Design-Persönlichkeit, nicht nur als Dienstleisterin. Ihre Strategie: Ich bin die Brand, das Design ist das Produkt.
+
+---
+
+## 10. Adaptivität: Ein Designer, viele Sprachen
+
+Aya zeigt Designs in verschiedenen Sprachen (Englisch, Spanisch), was auf internationale Kunden hindeutet. Das zeigt Weltoffenheit und Anpassungsfähigkeit – sie denkt in Nutzerbedürfnissen, nicht in einer einzigen Marktsprache.

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 |