Claude Design: Vom Scribble zur Landingpage in Minuten

# Prompt: Abverkaufs-Dashboard für die Sauerteig-Bäckerei „Wehmut & Co."

Ausgangs-Prompt, mit dem im KI-Kompass-Use-Case das voll funktionsfähige Dashboard erzeugt wurde. Nutze diesen Text als Blaupause: Rolle anpassen, Markenwelt austauschen, KPI-Katalog ersetzen — und du hast dein eigenes operatives Cockpit (Filial-Reporting, Vertriebs-Pipeline, Projekt-Dashboard).

> **Verwendung:** Diesen Prompt in einem Chat mit einem Frontend-fähigen LLM (Claude, GPT, o. ä.) als einzige Nachricht einreichen. Dauer-Iterationen sind explizit erwünscht — der Prompt ist als Brief, nicht als Einzelauftrag formuliert.

---

## 1 · Rolle & Auftrag

Du bist Senior Frontend-Engineer und Informationsdesigner mit zehn Jahren Erfahrung in Retail-Analytics und einem Faible für redaktionelle Designsprache. Du baust **ein einziges, voll funktionsfähiges HTML-Artefakt** (React oder Vanilla HTML/JS/CSS in einer Datei, Tailwind CSS oder Inline-Styles erlaubt) — ein Abverkaufs-Dashboard für die fiktive Hamburger Sauerteig-Bäckerei **Wehmut & Co.** („Bread that weeps with joy", Krustenstraße 14, est. 2019).

Das Dashboard wird morgens vor 7 Uhr von der Inhaberin geöffnet, während der Ofen auf Temperatur kommt. Sie muss in **unter 20 Sekunden** drei Fragen beantworten können: *Wie lief gestern? Was backe ich heute? Wo blutet Marge?* Alle Feinheiten liegen eine Interaktionsebene tiefer.

---

## 2 · Design-Sprache (nicht verhandelbar)

Das Dashboard übernimmt die Markenwelt der bestehenden Landingpage. Stimmung: *redaktionell, warm, leicht melancholisch-ironisch, mit einem Hauch Schmidt'scher Gelassenheit.*

### Farbpalette

| Token | Hex | Verwendung |
|---|---|---|
| `--cream` | `#F5EDE0` | Haupt-Hintergrund |
| `--cream-deep` | `#EDE2D0` | sekundärer Hintergrund, Cards |
| `--espresso` | `#2B1F17` | Primärtext, dunkle Sektionen |
| `--espresso-soft` | `#4A3A2E` | Sekundärtext |
| `--crust` | `#C97B2B` | Akzent / CTA, „Welling"-Hue |
| `--crust-deep` | `#A55A15` | Akzent-Hover, Warnung |
| `--tear` | `#7BA6C9` | Info, Blautöne für Tränen-Elemente |
| `--sage` | `#8AA67F` | Positive Delta, grüne Ampel |
| `--rye` | `#6B4A2B` | Dritter Akzent, Kategoriefarbe |

Akzent-Hue ist per Slider im „Tweaks"-Panel dynamisch (siehe §7).

### Typografie

- **Headline-Serif** für Hero-KPIs und Sektionstitel (z. B. `Fraunces`, `Cormorant Garamond`, `PP Editorial New` — was verfügbar ist). Gewicht 400–500, niemals fett-gedruckt. Cursive-Variante für Schlüsselwörter (`*weeps*`, `*cries*`) als semantische Auszeichnung.
- **Sans-Serif** für Labels, Zahlen in Tabellen, Tooltips (`Inter`, `Söhne`, System-Stack fallback).
- **Monospace** (`JetBrains Mono` o. ä.) für Rohdaten und Deltas in KPI-Cards.

### Tonalität der Texte

Alle Microcopy-Texte sind redaktionell, nicht korporativ. Nie „Dashboard-Deutsch". Beispiele:

- ❌ „Umsatz (Heute, in €)" → ✅ „Was heute in die Kasse geweint wurde"
- ❌ „Retourenquote 12 %" → ✅ „12 % der Laibe kehrten ungetröstet zurück"
- ❌ „Sales decreased by 8 % vs. last week" → ✅ „8 % stiller als letzte Woche. Grund vermutlich: das Wetter."

Die „Mood Meter"-Logik (Stoic → Misty → Welling → Weeping → Sobbing → Inconsolable) **muss als Gimmick** an mindestens zwei Stellen im Dashboard auftauchen — siehe §6.

---

## 3 · Layout & Informationsarchitektur

Drei-Ebenen-Struktur nach dem Prinzip *Glance → Scan → Dive*:

```
┌────────────────────────────────────────────────────────────────┐
│  HEADER: Wehmut & Co. · Datum · Zeitraum-Toggle · Export       │
├────────────────────────────────────────────────────────────────┤
│  EBENE 1: HERO-KPIs (4 Cards, oben links dominant)             │
│  Umsatz heute · Laibe verkauft · Restbestand · Ø Bon           │
├────────────────────────────────────────────────────────────────┤
│  EBENE 2: TAGESVERLAUF + SORTIMENT                             │
│  [Line Chart 2/3]              [Top-Seller Bars 1/3]           │
├────────────────────────────────────────────────────────────────┤
│  EBENE 3: WASTE / FORECAST / MOOD                              │
│  [Waste Heatmap] [Forecast Morgen] [Mood of the Day]           │
├────────────────────────────────────────────────────────────────┤
│  EBENE 4: TABELLE „Alle Backwaren" (progressive disclosure)    │
├────────────────────────────────────────────────────────────────┤
│  FOOTER: Filter-Chips, Datenstand, dezente Signatur            │
└────────────────────────────────────────────────────────────────┘
```

**Blickführung:** F-Pattern. Top-left trägt die teuerste Information, top-right trägt Kontext (Vorjahr, Benchmark). Whitespace zwischen Sektionen ist Teil des Designs, nicht Verschwendung.

Das dunkle „Tweaks"-Panel der Landingpage bleibt als schwebendes Element unten rechts erhalten — im Dashboard kontrolliert es: **Accent Hue**, **Zeitraum** (Heute · 7 Tage · 30 Tage · Saison · YTD), **Filiale** (sobald > 1), **Dark Mode Toggle**.

---

## 4 · KPI-Katalog (fachlich)

Alle Werte werden gegen drei Referenzen gezeigt: *Vortag, Vorwoche (gleicher Wochentag), Vorjahresmonat*. Deltas immer in Prozent **und** absolut, immer mit Richtungssemantik (grün/rot ist nicht genug — kleine Pfeile und Tear-Symbol für negative Entwicklung).

### 4.1 Ebene-1-KPIs (Hero Cards, oben)

| KPI | Formel | Benchmark / Ampel |
|---|---|---|
| **Tagesumsatz netto** | Σ Verkäufe – MwSt. | Tagesziel € 1.850 (konfigurierbar) |
| **Verkaufte Laibe** | Count Stück Sauerteig-Kategorie | Tagesziel 210 |
| **Waste-Risk** | (Produziert – Verkauft bis 16 h) / Produziert | Rot > 15 %, Gelb 10–15 %, Grün < 10 % |
| **Ø Bon (AOV)** | Umsatz / # Transaktionen | Benchmark € 12,40 |

### 4.2 Ebene-2-KPIs (im Chart oder Tooltip)

- **Stundenumsatz** (06:00–19:00) mit eingezeichnetem Peak
- **Top-10 Produkte** nach Stückzahl und Marge (toggle)
- **Sortiments-Mix** (Sauerteig / Süß / Feingebäck / Getränke) — max. 4 Segmente, sonst Bars
- **Kundenfrequenz** pro Stunde (Bons/h)

### 4.3 Ebene-3-KPIs (operativ / strategisch)

- **Waste-Quote** der letzten 14 Tage als Heatmap (Produkt × Wochentag)
- **Bruttomarge %** pro Produktkategorie (Benchmark-Korridor 50–65 %, Referenzlinie einzeichnen)
- **Stammkundenanteil** (Bons mit Kundenkarte / Gesamtbons)
- **Retourenquote** Pre-Order / Abo
- **Forecast morgen** (Backmenge je Sorte) basierend auf: Wochentag, Wetter-API-Platzhalter, Vorjahreswert, Pre-Orders

### 4.4 Ebene-4-KPIs (Tabelle, scrollbar)

Zeilen = alle SKUs. Spalten: Produkt, Kategorie, Preis, Stück heute, Umsatz heute, Marge %, Δ 7 T, Waste heute, Status-Pill.

---

## 5 · Visualisierungs-Patterns (Chart-Matching)

Strikte Regel: **ein Chart = eine Frage**. Chart-Typ folgt der Frage, nicht der Optik.

| Frage der Nutzerin | Chart-Typ | Begründung |
|---|---|---|
| „Wie hoch ist X gerade?" | KPI-Card mit Delta und Sparkline | Sofortige Erfassung |
| „Wie verläuft X über den Tag?" | Line Chart mit Area-Fill | Kontinuität über Zeit |
| „Welches Produkt verkauft wie viel?" | Horizontale Bar Chart, sortiert | Vergleich diskreter Kategorien |
| „Wie verteilt sich der Mix?" | Bar (nicht Donut!) — außer max. 4 Segmente | Anti-Pattern Pie vermeiden |
| „Wo liegen Waste-Muster?" | Heatmap (Tag × Produkt) | Zwei kategoriale Dimensionen |
| „Wie entwickelt sich Marge pro Kategorie?" | Small Multiples (4× Mini-Line) | Trend-Vergleich bei gleicher Skala |
| „Korrelieren Frequenz und Bon?" | Scatter Plot mit Trendlinie | Zusammenhang zweier Metriken |
| „Wie war gestern vs. Vorjahr?" | Slope Chart oder Bullet Chart | Zwei-Punkt-Vergleich + Ziel |

**Verboten:** 3D-Effekte, Dual-Axis-Charts, Pie Charts mit > 4 Segmenten, Farbe als einzige Informationsdimension (Barrierefreiheit!), Donuts mit Zentrum-Zahl, die schon als KPI-Card existiert (Redundanz).

**Pflicht:** Jeder Chart hat (a) aussagekräftigen Titel als Frage formuliert, (b) Y-Achsen-Einheit, (c) Tooltip mit vollständigem Kontext, (d) leeren Zustand mit Microcopy, (e) Loading-Skeleton in Cream-Tönen.

---

## 6 · Das „Mood of the Day"-Widget (Branding-Hook)

Zentrales spielerisches Element. Eine Card zeigt jeden Tag:

- Eine Illustration / SVG eines weinenden Brotes mit variabler „Intensität" (1–5, analog Mood Meter der Landingpage)
- Headline: *„Heute fühlt sich Ihr Sortiment: **Welling**"*
- Berechnung der Intensität: Composite Score aus Waste-Risk (× 0,4), Δ-Umsatz-Vorwoche (× 0,3), Retouren (× 0,3)
- Sub-Text: redaktionell, z. B. *„Der Roggen-Walnuss hält sich tapfer. Der Dinkel hat eine Phase. Vielleicht weniger davon morgen."*
- Darunter: kleiner Slider zum „Händischen Nachjustieren" (rein dekorativ, referenziert das Tweaks-Panel der Landingpage als Easter Egg)

Zweiter Mood-Hook: **Bestseller des Tages** wird als *„Today's Sobbing Sourdough"* gelabelt, mit Mini-SVG des passenden Intensitäts-Brotes.

---

## 7 · Interaktivität (Pflicht-Features)

1. **Zeitraum-Toggle** im Header: *Heute · Gestern · 7 T · 30 T · Saison · YTD · Benutzerdefiniert*. Alle Widgets reagieren.
2. **Filiale-Dropdown** (Mock: „Krustenstraße 14", „Speicherstadt", „Eppendorf"). Aggregiert oder einzeln.
3. **Kategorie-Filter-Chips** (Sauerteig / Süß / Feingebäck / Getränke / Abo). Multi-Select.
4. **Drill-Down** auf Bar-Chart-Klick → öffnet Modal / Drawer mit Produkt-Detail (Verlauf 30 T, Marge, Waste-Historie).
5. **Hover-Cross-Highlighting:** Hover auf Linie im Stundenchart highlighted gleiche Stunde in Heatmap.
6. **Export-Button** oben rechts (CSV + PNG-Stub, Logik kann Mock sein).
7. **Dark Mode Toggle** im Tweaks-Panel (espresso-basiert, Cream wird zu tiefem Espresso mit Creme-Akzenten).
8. **Tastatur-Navigation:** `T` = Heute, `W` = Woche, `M` = Monat, `/` = Suche in Produkttabelle.
9. **Print-Stylesheet** für A4-Quer (einseitiger Tages-Report).

---

## 8 · Mock-Datensatz (realistisch, plausibel)

Generiere einen deterministischen Mock-Datensatz direkt im Code (kein externer API-Call). **30 Tage Rückblick**, **Stundenaggregate** pro Verkaufstag, **15 SKUs** über 4 Kategorien:

**Sauerteig-Kategorie** (Kernsortiment, Preis € 5,80–8,90): Roggen-Walnuss (Hero-Produkt), Dinkel-Oliven, Weizen-Classic, Emmer-Honig, Buchweizen-Schwarzbrot

**Süßes** (Preis € 3,20–5,50): Zimtschnecke, Cardamom-Bulle, Nussecke

**Feingebäck** (Preis € 1,40–3,80): Croissant Butter, Laugenstange, Quarkbrötchen

**Getränke** (Preis € 2,80–4,20): Filterkaffee, Cappuccino, Chai Latte, Matcha

Saisonale Muster: Wochenend-Peak am Samstag (2,5 ×), Minimum Dienstag, Frühstücks-Rush 8–10 h, Nachmittags-Tal 14–16 h, kleiner zweiter Peak 17 h. Durchschnittlicher Tagesumsatz € 1.400–2.200, schwankend mit Wetter-Flag (sonnig + 15 %, Regen – 12 %).

Baue drei narrative Anomalien ein, die das Dashboard sichtbar machen muss:
1. Dinkel-Oliven hat seit 5 Tagen überhöhte Waste-Quote (18–22 %) — **Handlungsdruck**
2. Cardamom-Bulle ist vorgestern ausverkauft um 11:00 — **Nachfrage-Signal**
3. Samstag vor zwei Wochen Ausreißer-Hoch wegen Event (tagged im Tooltip) — **Normalisierung**

---

## 9 · Technische Vorgaben

- **Single-File-HTML**: Alles in einer `.html`-Datei. Kein Build-Step. CDN-Links für React / Tailwind erlaubt.
- **Responsiv**: Desktop-first (1440 px), aber ab 1024 px brauchbar. Auf Mobile (375 px) stackt alles vertikal, KPI-Cards bleiben oben.
- **Performance**: First Paint < 500 ms im Mock. Keine schweren Libraries außer Charting (Recharts, Chart.js oder D3 sind ok; bevorzugt Recharts wegen Lesbarkeit).
- **Accessibility**: WCAG AA Farbkontraste, `aria-label` auf allen Chart-Containern, Tastatur-Bedienbarkeit, `prefers-reduced-motion` respektieren.
- **Keine Console-Errors**, keine Browser-Storage-APIs (kein `localStorage` / `sessionStorage`). State in React `useState`.
- **Kommentare im Code** nur wo es ein „Warum" gibt, nicht „Was".

---

## 10 · Qualitätskriterien (Abnahmekriterien)

Das Artefakt ist abgenommen, wenn:

- [ ] Alle 4 Hero-KPIs in < 3 s erfassbar sind
- [ ] Mindestens 7 unterschiedliche Visualisierungs-Patterns eingesetzt werden (KPI-Card, Sparkline, Line, Bar, Heatmap, Small Multiples, Tabelle)
- [ ] Zeitraum-Toggle verändert sichtbar alle Widgets (nicht nur Zahlen flickern)
- [ ] Mindestens eine echte Drill-Down-Interaktion funktioniert
- [ ] Das „Mood of the Day"-Widget ist vorhanden, inkl. SVG-Brot-Illustration (kein externes Asset — inline SVG)
- [ ] Alle 3 narrativen Anomalien (§ 8) sind im UI sichtbar und erklärt
- [ ] Microcopy ist durchgehend redaktionell (§ 2), keine einzige Corporate-Floskel
- [ ] Dark Mode funktioniert und bleibt lesbar
- [ ] Print-View ergibt eine seriöse A4-Quer-Seite
- [ ] Kein einziger verbotener Chart-Typ (§ 5) ist eingesetzt
- [ ] Das Ergebnis fühlt sich eher wie die Printausgabe eines Feinschmecker-Magazins mit Datenbeilage an, nicht wie ein Salesforce-Export

---

## 11 · Explizite Nicht-Ziele

- Keine echten Login-/Auth-Flows
- Kein Backend — alles Mock
- Keine „AI-Insights" mit Fake-Chat — das Dashboard erklärt sich durch Design
- Keine Gamification-Badges
- Keine Cookie-Banner, keine GDPR-Dummies
- Keine Disney-/Pixar-Stil-Illustrationen — die weinenden Brote bleiben in der Tonalität der Referenzbilder (handgezeichnet, warm, leicht ironisch)

---

## 12 · Lieferformat

Eine Datei, drei Dinge im Chat dazu:
1. Die `.html`-Datei als Download
2. Drei Screenshots (Desktop, Mobile, Dark Mode) — wenn die Umgebung das erlaubt, sonst Live-Render
3. Ein kurzer redaktioneller Absatz (max. 120 Wörter) im Wehmut-Ton, der das Dashboard vorstellt, als wäre es selbst ein Brot. Keine Feature-Liste. Kein „Dies ermöglicht Ihnen …".

**Wenn etwas unklar ist: nicht nachfragen, sondern begründet entscheiden und die Entscheidung in einer `/* DESIGN NOTES */`-Sektion am Ende der Datei dokumentieren.** Zeit ist knapp, der Ofen ist heiß.

---

*Ende des Prompts. Alles darüber hinaus ist Beifang.*