Premium-SaaS-Websites

Premium SaaS Web

Diese Fertigkeit codiert, was die meistverkauften SaaS/AI/Agentur-Vorlagen teuer wirken lässt. Sie wurde destilliert, indem sechs Referenzseiten auf CSS-Ebene (OptimAI, Aigocy, Adon, Davies, Pastily, eine KI-Bildgenerator-Demo) inspiziert und die tatsächlich verwendeten Werte gemessen wurden. Die Rezepte sind die echten Techniken, keine Vermutungen.

Dateistruktur. Lade nur das, was die Aufgabe benötigt:

• directions/<name>/style.md: eine Datei pro visueller Richtung (Tokens, Schriftarten, Signatur-Elemente, Techniken, die nur diese Richtung verwendet). Lies nur die, die du auswählst.
• shared/*.md: Techniken, die jede Richtung verwendet, aufgeteilt nach Thema. Lies die für die Abschnitte, die du baust (Zuordnung in Schritt 3).

Die Kern-Einsicht: Premium = kontrolliertes Licht + Zurückhaltung + Bewegung

Günstige und hochwertige Seiten verwenden oft die gleichen Komponenten (Hero, Logos, Funktionen, Preise, FAQ, CTA). Der Unterschied liegt in vier Veredelungsebenen:

1. Licht — Oberflächen wirken beleuchtet, nicht ausgefüllt. Glühen werden aus unscharfen Formen geformt; Karten haben einen Glanz oben links; Buttons haben eine innere Hervorhebung und eine innere Unterkante; Ränder sind Haarstriche mit 6–20% Deckkraft. Echtes Licht fällt ab, daher ist nichts ein flacher Farbblock.
2. Zurückhaltung — eine Akzentfarbe, auf ≤5% der Seite verwendet. Texthierarchie entsteht durch Deckkraft einer Farbe (100 / 80 / 60 / 50%), nicht durch viele Grautöne. Maximal zwei Schriftarten (+ eine optionale Monospace für Beschriftungen). Null Dekoration ohne Bedeutung.
3. Typografie mit Spannung — Display-Texte sind groß und eng gespaced (Buchstabenabstand −2% bis −7%), Zeilenhöhe ≈ 1.0–1.2. Oft wird die Hälfte einer Überschrift abgedunkelt (opacity .5 oder ein hellerer Verlauf), sodass das Auge zuerst die starke Hälfte liest.
4. Bewegung mit Gewicht — Smooth Scroll (Lenis), Überschriften, die Wort für Wort aufsteigen, Text, der sich beim Scrollen füllt, Zähler, die rollen, Laufbänder, die nie stoppen, Karten, die sich stapeln. Alles ease-out (nichts lineares), nichts springt, und alles respektiert prefers-reduced-motion.

Wenn eine Ausgabe nur die Komponenten enthält, aber nicht diese vier Ebenen, wird sie wie ein kostenloses Bootstrap-Theme aussehen, egal wie viele Abschnitte sie hat.

Arbeitsablauf

1. Lies das Briefing, wähle EINE Richtung

Wähle eine Richtung aus dieser Tabelle aus, lies dann deren directions/<Ordner>/style.md (vollständiges Token-Set + ihre Signaturtechniken). Lies nicht die anderen Richtungen.

Richtung (Ordner)	Gefühl	Am besten geeignet für	Quelle
Ember Dark (ember-dark)	Tiefes Marine-Schwarz, skulptierter Orange/Rot- oder Blau-Glow, Regenbogenrand-CTA, Mono-Button-Beschriftungen	KI-Tools, Entwickler-Tools, SaaS-Apps	OptimAI
Tactile Light (tactile-light)	Zink/Off-White, glänzende skeuomorphe Buttons, Glanzkarten, ein heißer Akzent (Rot), gerahmter Hero mit 3D-Render	KI-Agenturen, B2B-SaaS, Beratungen	Aigocy
Editorial Mono (editorial-mono)	Reines #111 auf #F0F0F0, 140px Grotesk bei −7% Tracking, Haarstrich-Gitter, Scroll-Fill-Text, keine Schatten	Agenturen, Studios, Premium-Dienstleistungen	Adon
Noir Spotlight (noir-spotlight)	Schwarz, ein Neon-Akzent, riesiges Wort interagiert mit einem Foto, Shader/WebGL-Hintergrund, gestapelte Projektkarten	Persönliche Marken, Portfolios, kreative Technik	Davies
Warm Playful (warm-playful)	Warmes Off-White-Papier, fast schwarze Tinte, gedämpftes Grün→Gold, 28px weiße Karten, handschriftliche Notizen, Gerät ragt über den Rand, foto-hinterlegte Preisgestaltung	Desktop-/Menüleisten-Apps, Dienstprogramme, Indie- & Verbraucher-Tools, Software mit einmaligem Kauf	Pastily

Wenn der Benutzer keine Angabe gemacht hat und es sich um SaaS/AI handelt, verwende standardmäßig Ember Dark. Wechsle zu Warm Playful, wenn das Produkt ein natives/Desktop/Mobile-Dienstprogramm, ein Indie- oder Solo-Gründer-Tool ist oder das Briefing freundlich, zugänglich, gemütlich, "nicht unternehmerisch" sagt (auch wenn es nie "SaaS" sagt). Ember Dark würde eine 9-Dollar-Zwischenablage-App wie eine Unternehmensinfrastruktur wirken lassen. Das Mischen von Richtungen macht Seiten matschig. Ein Technik aus einer anderen Richtung zu übernehmen ist in Ordnung, solange die Palette und die Schriftart kohärent bleiben.

Teile dem Benutzer in einem Satz mit, welche Richtung du gewählt hast und warum, damit er frühzeitig umleiten kann. Behalte den Akzent der Richtung bei, es sei denn, die Marke hat eine eigene Farbe (der Benutzer nennt eine, oder das Produkt verwendet bereits eine); Stimmungswörter wie "gemütlich" oder "Abenddämmerung" sind keine Markenfarben. Für eine echte Markenfarbe siehe "Den Akzent austauschen" in directions/README.md.

2. Plane die Seite als Rhythmus, nicht als Liste

Premium-Seiten wechseln zwischen Dichte und Ton. Ein typischer SaaS-Homepage, die funktioniert:

1. Hero: Augenbrauen-Badge (eine Tablette wie "✦ KI-gesteuerte Agentur" oder eine echte Tatsache wie "v1.4 ist draußen"; ein Avatar-Stapel + Bewertung nur, wenn der Benutzer dir eine echte Bewertung gegeben hat), 2-zeilige Überschrift mit einer abgedunkelten Hälfte, 1–2-zeiliger Untertext bei 60% Deckkraft, primärer + sekundärer CTA, dann das Produkt selbst (Browser-gerahmter Mockup oder eine interaktive Eingabeaufforderungsbox), das durch einen Farbverlauf in den nächsten Abschnitt übergeht.
2. Logo-Streifen: Graustufenlogos, Endlos-Laufband, maskierte Kanten.
3. Bento-Funktionsraster: 5–7 Zellen ungleicher Größe, jede mit einer Mini-UI-Illustration in HTML/CSS (Workflow-Knoten, Chat-Blasen, Schalter, Diagramme, Farbchips), keine Stock-Icons.
4. Scroll-Fill-Aussage: ein großer Satz, der sich beim Scrollen von 30% auf 100% füllt. Die Füllung läuft streng Zeile für Zeile (ein bereinigter Timeline pro Block, Zeilen hintereinander), nie mehrere Zeilen auf einmal. Siehe shared/typography.md.
5. Zahlen: 3–4 Statistiken mit rollenden Zählern; eine riesige, verblasste Zahl als Dekoration.
6. So funktioniert's / Tabs oder Stapelkarten.
7. Testimonials: nur Zitate, die der Benutzer geliefert hat, Avatar + Name + Rolle, vielleicht ein vertikales Laufband von Karten. Wenn es keine gibt, lass den Abschnitt weg (oder tausche ihn gegen ein Vertrauens-/Datenschutz-Band oder eine kurze Notiz des Herstellers). Erfundene Bewertungen, Sterne und Benutzerzahlen sind gefälschte soziale Beweise: Sie täuschen Käufer und der Eigentümer könnte sie versehentlich ausliefern.
8. Preise: 3 Stufen, die mittlere angehoben mit dem Akzent-Rand/Glow, monatlicher/jährlicher Umschalter.
9. FAQ-Akkordeon.
10. Finaler CTA mit dem stärksten Glow auf der Seite, dann ein ruhiger Footer mit einem riesigen Wortmarke.

Wechsle zwischen dunklen/hellen (oder bg-1/bg-2) Abschnittshintergründen, um Rhythmus zu erzeugen. Der Abstand der Abschnitte ist großzügig: 120–176 px vertikal auf dem Desktop.

3. Baue mit den Rezepten

Die Rezepte sind kopierfertiges CSS/HTML/JS. Das style.md deiner Richtung enthält bereits deren Signaturtechniken (z. B. Regenbogenrand für Ember, taktile Buttons und Glanzkarten für Tactile). Für alles andere lies die gemeinsame Datei, die zu dem passt, was du baust:

Bauen...	Lesen
Hero-Licht, Glühen, Punkt-/Raster-/Rausch-Hintergründe, Haarstrich-Raster & Spaltenführungslinien	shared/light.md
Überschriften (enges Tracking, abgedunkelte Hälfte, metallischer Verlauf), Scroll-Fill-Aussage (zeilenweise GSAP, oder wortweise mit farbigen Schlüsselwörtern)	shared/typography.md
Produkt-Mockup im Hero (Browser-Fenster oder Desktop-App-Gerät mit OS-Chrom), Screenshot-Galerie, Bento-Raster mit Mini-UIs	shared/product-proof.md
Glas-Navigation, Abschnittserkennungs-Pill-Navigation, Augenbrauen-Badge & Avatar-Stapel, handschriftliche Anmerkungen, weiche weiße Karten, Karten-Spotlight, Laufbänder, Preise (3-Stufen, foto-hinterlegter Einzelpreis oder einfache Einzelpreiskarte), FAQ, Footer-Wortmarke	shared/components.md
Jede benannte Marke mit einem Symbol (Integrationen, Logo-Streifen, Orbit, "funktioniert mit")	shared/logos.md
GSAP + Lenis Boilerplate, Timing-/Easing-Tabelle, gsap.matchMedia() Reduced-Motion-Muster, Enthüllungen, Zähler, Stapelkarten, CSS-only Tonwechsel-Geschichtenstapel, angepinnte UI-Chip-Wand, angepinntes Scrollen, Hover, Fallstricke, natives CSS-Scroll-getriebenes Motion	shared/motion.md
Shader/WebGL-Hintergrund, Partikelfeld, Bloom (Three.js, mit CSS-Fallback und Mobile-Gate)	shared/webgl.md

Eine vollständige Landingpage benötigt normalerweise alle; ein einzelner Abschnitt oder eine kleine Bearbeitung benötigt nur seine Zeile. Alle GSAP-Plugins inkl. SplitText sind seit 3.13 kostenlos, lade sie von jsDelivr.

4. Technische Voreinstellungen

• Einzelseite HTML mit Tailwind CDN (oder dem bestehenden Stack des Projekts — folge ihm, falls vorhanden). Platziere Design-Tokens in CSS-Custom-Properties auf :root, sodass ein Palettenaustausch eine Bearbeitung ist.
• Schriftarten von Google Fonts. Bewährte Paarungen aus den Referenzen: Sora + Inter Tight + IBM Plex Mono (Ember), Urbanist (Tactile), eine Grotesk wie "Inter Tight"/"Schibsted Grotesk"/"Familjen Grotesk" + DM Sans (Editorial), Figtree/"Outfit" (Noir).
• Icons: Inline-SVG (Lucide-Stil 1.5px Strich). Niemals Emoji als Icons.
• Bilder: Falls Bildgenerierung verfügbar ist, generiere markengerechte 3D-Render / abstrakte Objekte; andernfalls baue Visuals mit CSS/SVG (Glühen, Mini-UIs, Punktgloben). Verwende https://images.unsplash.com/... Fotos nur für Personen/Porträts. Eine Seite ohne visuellen Anker im Hero wirkt unfertig.
• Echte Markenlogos, niemals Buchstaben-Platzhalter. Wann immer die Seite ein bestehendes Unternehmen, Produkt oder SaaS nennt (Integrationschips, Logo-Bögen/-Streifen, "funktioniert mit"-Bänder, Testimonials, Vergleichstabellen) und du ein Symbol daneben zeigst, verwende das tatsächliche Logo dieser Marke. Ein farbiges Quadrat mit dem Anfangsbuchstaben ("F" für Figma, "S" für Slack) wirkt wie eine billige Vorlage und bricht Vertrauen. Details und Quellen in shared/logos.md. Wenn kein echtes Logo beschafft werden kann, zeige den Namen als Klartext ohne Symbol; ein fake Icon ist schlimmer als keins.
• Mobil: Alles bricht bei <768px auf eine Spalte zusammen; Display-Texte skalieren mit clamp(); Glühen schrumpfen (große Unschärfen sind teuer auf Telefonen); deaktiviere Cursor-Effekte bei Touch.

5. Selbstüberprüfung vor der Übergabe

Öffne die Seite in einem Browser und mache Screenshots bei 1440px und 390px, wenn möglich. Überprüfe sie anhand dieser Liste. Das sind die Dinge, die "KI-generiert" von "Top-Seller" unterscheiden:

• Nur ein Akzentfarbton (plus Neutrale). Farbverläufe bleiben innerhalb dieser Farbtonfamilie, außer bei einem absichtlichen Regenbogenrand.
• Display-Überschrift hat negativen Buchstabenabstand und eine abgedunkelte Hälfte oder einen Farbverlauf.
• Fließtext/sekundärer Text verwendet Deckkraftstufen einer Farbe, und der Kontrast besteht immer noch (≥4,5:1 für Fließtext).
• Hero zeigt das Produkt (Mockup, Eingabeaufforderungsbox, UI), nicht nur Text über einem Farbverlauf.
• Mindestens eine skulptierte Lichtquelle pro dunklem Abschnitt; keine flachen Rechtecke aus reiner Farbe.
• Ränder sind Haarstriche (1px, 6–20% Alpha), Radien sind konsistent (wähle eine Skala: 8/12/20/28/999).
• Buttons haben Hover-Zustände, die das Licht ändern (Glow verengt sich, Glanz verschiebt sich, Pfeil rückt 2–4px nach), nicht nur die Farbe.
• Bewegung: Hero-Text-Enthüllung, Scroll-getriggerte Einblendungen mit Staffelung, mindestens ein bereinigter Effekt, Laufband. Alle deaktiviert unter prefers-reduced-motion (via gsap.matchMedia()), Dauern aus der Timing-Tabelle in shared/motion.md, nichts animiert width/height/top/left.
• Falls WebGL verwendet wird: CSS-Glow darunter als Fallback, DPR begrenzt, rendert nur sichtbar, übersprungen auf mobilen/geringleistungsfähigen Geräten, Text bleibt in HTML.
• Jede echte Marke, die auf der Seite genannt wird, hat ihr echtes Logo (oder kein Symbol). Keine Anfangsbuchstaben-Quadrate.
• Falls Warm Playful: Das Hero-Gerät ist ein realistisch aussehendes OS (Menüleiste, Dock, App-Menü) in HTML gebaut, ragt über eine Kante, und hat höchstens zwei Caveat-Notizen; Story-Karten kleben mit einem 16px top-Schritt und einem Tonwechsel pro Karte; Keyword-Farben erscheinen nur auf einzelnen Wörtern und bestehen den 4,5:1-Kontrast; der Akzent ist immer noch das Grün (es sei denn, der Benutzer hat eine Markenfarbe angegeben) und Gold erscheint nur am Ende des CTA-Verlaufs; Einmalzahlungspreise sind eine einzelne weiße Karte (foto-hinterlegt, falls du ein Foto hast, sonst schlicht), mit etwaiger kostenloser Testversion als Zeile darin.
• Kein Lorem Ipsum. Der Text ist produktspezifisch: konkrete Zahlen, realistisch klingende Funktionen.
• Keine erfundenen sozialen Beweise: keine erfundenen Bewertungen, Benutzerzahlen, Testimonials oder Presse-Logos. Produktdetails, die du annehmen musstest, sind zur Bestätigung durch den Benutzer aufgelistet.
• Nichts läuft horizontal bei 390px über.

Was zu vermeiden ist (die "Billig-Vorlagen"-Anzeichen)

• Buttons, die sich bei Hover bewegen. Harte Regel, keine Ausnahmen. Keine magnetischen/cursor-folgenden Buttons, kein translate/scale/rotate auf einem Button oder dessen Label/Symbol bei :hover, keine herausrutschenden Pfeile, kein Anheben bei Hover. Das Layout bleibt unter dem Cursor still, sodass das Klickziel nie ausweicht. Zeige Hover nur durch Farb-, Helligkeits-, Glow-, Rand- oder Schattenänderungen. (Karten dürfen sich noch heben; Buttons und als Buttons gestylte Links nicht.)
• Lila-zu-Blau-Verlauf auf allem; mehrere konkurrierende Akzentfarben.
• Schlagschatten wie 0 4px 6px rgba(0,0,0,.3) auf dunklen Hintergründen (Schatten sind auf Dunkel nicht lesbar; stattdessen Glühen und Ränder verwenden).
• Alles zentriert mit identischen Kartengittern aus 3 Icons + Titel + Text.
• Glassmorphismus ohne etwas hinter dem Glas, das unscharf gemacht werden kann.
• Gefälschte Markensymbole: ein farbiges abgerundetes Quadrat mit einem Buchstaben, der für Figma, Slack, GitHub usw. steht.
• Hüpfende/elastische Easings, Einblendungen, die >1s dauern, Animationen auf jedem Element gleichzeitig.
• Verlaufstext auf Fließtext; mehr als eine Verlaufstext-Phrase pro Viewport.
• Stock "AI-Gehirn"-Bildmaterial. Zeige stattdessen das Produkt oder einen abstrakten Render.
• Niedrigkontrast-Fließtext auf Dunkel: halte Fließtext bei mindestens ~70% Weiß, damit er trotz Glühen lesbar bleibt.