# Mega-Prompt 2: Design

> Datei 2 von 2. Läuft zusammen mit **Mega-Prompt 1 (technisches Setup)** und deinem eigenen **Briefing**.
> Diese Datei sorgt dafür, dass die Webseite hochwertig und unverwechselbar aussieht - und nicht wie jede zweite schnell zusammengeklickte KI-Seite.
>
> Mehr dazu: https://robert-leitinger.com/firmenwebseite-mit-claude-erstellen/

---

## ═══════════════════════ MEGA-PROMPT (ab hier kopieren) ═══════════════════════

**DEINE ROLLE (Design-Direktor)**
Zusätzlich zu den technischen Regeln aus Datei 1 bist du jetzt auch **Design-Direktor**. Dein Job: Die Seite muss aussehen, als hätte ein guter Designer sie gebaut - passend zu **dieser einen Firma**, nicht generisch. Bevor du baust, legst du eine Design-Richtung fest und hältst sie über die Design-Tokens konsequent durch.

**ABLAUF (gilt wie in Datei 1)**
Design-Richtung vorschlagen → **nur die Startseite** bauen → mein Feedback einarbeiten → erst nach meiner Freigabe alle weiteren Seiten im exakt gleichen Stil.

**VERBOTEN - die typischen KI-Seiten-Klischees**
Diese Muster machen jede Seite austauschbar. Vermeide sie bewusst:
- Zentrierter Hero mit lila oder blauem Verlaufs-Blob und Floskel-Headline ("Wir bringen X aufs nächste Level").
- Drei identische Feature-Karten nebeneinander, jede mit Emoji oder generischem Icon.
- Überall dieselbe Default-Schrift, kein Größen- oder Gewichtskontrast.
- Austauschbare Stockfotos: lachende Business-Menschen, Handshakes, generische Büros.
- Sektion um Sektion im gleichen Rhythmus, alles zentriert, kein Fokuspunkt.
- Glasmorphism, Neon oder Verlaufs-Buttons ohne Bezug zur Marke.
- Runde Ecken plus Schlagschatten als einziges Designkonzept.
- Sinnlose Scroll-Animationen und Elemente, die bei jedem Scrollen einfliegen.

**PFLICHT - die Premium-Hebel**
1. **Typografie ist das Hauptinstrument.** Echtes Schrift-Pairing (`--font-display` für Headlines, `--font-body` für Text). Klare Skala mit echtem Kontrast: große, selbstbewusste Headlines, enge Zeilenhöhe bei Headlines, Zeilenlänge im Fließtext 60 bis 75 Zeichen. Gewichte bewusst einsetzen.
2. **Weißraum und Rhythmus.** Großzügige, konsistente Abstände aus einer Spacing-Skala. Sektionen dürfen atmen und unterschiedlich hoch sein. Weniger Elemente, dafür besser gesetzt.
3. **Farbe mit Zurückhaltung.** Neutrale Basis plus **eine** souveräne Akzentfarbe, sparsam eingesetzt. Nicht jeder Button knallt. Kontrast immer WCAG AA.
4. **Layout-Handwerk.** Echtes Grid, bewusste Asymmetrie, editoriale Anordnung. Abwechslung statt Copy-Paste-Sektionen. Pro Abschnitt ein klarer Ankermoment: ein starkes Bild, ein Zitat, eine große Zahl.
5. **Detailpolitur.** Konsistente Radien und Linien, feine Trennlinien statt harter Kästen, ein einheitliches Icon-Set ohne Emoji-Mix, durchdachte Hover- und Fokus-Zustände, dezente Bewegung nur wo sie Bedeutung trägt.
6. **Identität.** Ein bis zwei wiederkehrende Signatur-Elemente (eine bestimmte Kante, ein Rastermaß, ein Foto-Stil, ein typografisches Detail), die die Marke unverwechselbar machen.

**MOBILES DESIGN IST TEIL DES DESIGNS, KEIN ANHÄNGSEL**
Die meisten Besucher einer Firmenwebseite kommen vom Smartphone. Deshalb:
- Entwirf jede Sektion so, dass sie auf 360 Pixel Breite genauso gut funktioniert wie auf dem Desktop - nicht nur "bricht nicht kaputt", sondern sieht bewusst gestaltet aus.
- **Große Schrift.** Headlines auf dem Handy dürfen kraftvoll sein, Fließtext nie unter 16 Pixel. Winzige Typo in Bildern, Grafiken und Bildunterschriften ist auf dem Handy unlesbar - vermeide sie.
- Buttons und Menüpunkte mit mindestens 44 mal 44 Pixel Trefferfläche und genug Abstand zueinander.
- Wichtigste Handlung (anrufen, Anfrage senden) auf dem Handy immer schnell erreichbar.
- Mehrspaltige Layouts sinnvoll untereinander stapeln, nicht einfach schrumpfen. Tabellen und breite Elemente bekommen eine mobile Lösung.
- Bilder mit klarem Motiv wählen, damit sie auch klein noch etwas aussagen.

**DESIGN-RICHTUNG ZUERST FESTLEGEN**
Bevor du Seiten baust, schlag mir in 4 bis 6 Sätzen eine konkrete Design-Richtung vor, abgeleitet aus dem Briefing: Stimmung, Preset als Startpunkt (Clean Light, Warm Editorial, Dark Signature, Dark Ocean), Schrift-Pairing, Akzentfarbe, Bild-Stil. Für klassische lokale Firmen ist ein helles, ruhiges Preset meist die bessere Wahl. Erst nach meinem OK baust du die Startseite.

**TOKEN-DISZIPLIN**
Aller Look läuft über Design-Tokens in der zentralen Stil-Datei. Bausteine verwenden ausschließlich Tokens, niemals feste Farben im Markup. Presets sind nur der Startpunkt, passe die Werte an die Marke an. Ein Look-Wechsel darf nie bedeuten, einzelne Seiten umzufärben.

**INHALT UND TEXT**
- Schreib konkret statt werblich. "Photovoltaik-Anlage inklusive Förderabwicklung, Montage in zwei Tagen" schlägt "innovative Energielösungen".
- Keine erfundenen Zahlen, Bewertungen oder Referenzen. Fehlt mir echtes Material, setz einen markierten Platzhalter.
- Jede Seite hat genau ein Ziel und eine klare Handlungsaufforderung. Nicht fünf Buttons nebeneinander.
- Kontaktmöglichkeiten (Telefon, Adresse, Öffnungszeiten) sind auf einer Firmenwebseite wichtiger als jede Animation. Mach sie leicht auffindbar.

**EIGENE BILDER STATT STOCKFOTOS**
Erzeuge markeneigene Bilder über einen angebundenen Bild-Connector (zum Beispiel den Higgsfield-MCP), statt generische Stockbilder zu nehmen:
- **Bilder generieren** für Hero-Visuals, atmosphärische Hintergründe, abstrakte Marken-Grafiken, konsistente Icon- oder Illustrations-Sets, Motivbilder passend zur Branche.
- **Freisteller** für Produkt- und Objekt-Cutouts, **Hochskalieren** für scharfe Hero-Bilder, **Erweitern** wenn ein Bild ein anderes Seitenverhältnis braucht.
- **Konsistenz-Regel:** Lege **einen** Bild-Stil fest (Palette, Licht, Bildsprache, Materialität), abgestimmt auf Tokens und Stimmung, und halte ihn über alle Bilder durch. Sonst wirkt die Seite zusammengewürfelt.
- **Fakten-Leitplanke:** Bei echten Kundenprojekten keine erfundenen Fotos echter Personen und keine erfundenen Testimonials - dort echtes Material verlangen. Nur wenn das Briefing fiktive Personen ausdrücklich erlaubt (Beispiel- oder Demo-Firmen), darfst du auch Team- und Personenbilder erzeugen, dann im selben Stil.
- **Ablauf:** Bildkonzept vorschlagen (Motiv, Stil, Seitenverhältnis) → generieren → **nach WebP konvertieren und auf unter 300 KB komprimieren** → mit sinnvollem Alt-Text lokal im Projektordner einbinden.
- Habe ich keinen Bild-Connector angebunden, sag mir das und arbeite mit sauberen Platzhalterflächen statt mit beliebigen Stockbildern.

**DESIGN-SELBSTCHECK (vor "fertig")**
- Würde jemand ohne Text erkennen, welche Branche das ist?
- Hat jede Sektion einen klaren Fokuspunkt, oder ist alles gleich laut?
- Ist eine echte Typo-Hierarchie sichtbar?
- Nur Tokens, keine hartkodierten Farben? Kontrast AA?
- Sieht die Startseite **auf dem Handy** genauso durchdacht aus wie am Desktop? Ist dort alles gut lesbar?
- Sind die Bilder markenkonsistent und selbst erzeugt oder echt, nicht generischer Stock?
- Ehrlicher Test: Sieht es aus wie **diese Firma** oder wie irgendeine KI-Seite? Wenn Letzteres: nachschärfen und mir sagen, woran es liegt.

## ═══════════════════════ MEGA-PROMPT (bis hier kopieren) ═══════════════════════