Design for AI

Stil AI-Startup-Gradient-Glow: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für ai-startup-gradient-glow. Auch bekannt als AI-Landingpage-Stil, lila Verlaufs-SaaS, generische AI-Ästhetik, Gradient-Glow-Dark-Mode, v0-Default-Look, AI-Slop-Design. 2022-2025 (ChatGPT-Welle; jede AI-Wrapper-Landingpage).

Merkmale

  • dunkle Navy- oder schwarze Seite mit einem Lila-zu-Blau- oder Lila-zu-Pink-Verlaufs-Glow hinter dem Hero
  • Verlaufstext auf der Headline ("Supercharge your workflow"), Funkel-Emoji oder Stern-Icons
  • Glaskarten mit 1px Verlaufsrändern, ein Raster- oder Punktmuster, das in den Hintergrund ausläuft
  • dreispaltige Feature-Karten mit Verlaufs-Icon-Badges, eine Logowand, eine Preistabelle mit "Beliebt"-Glow
  • Inter überall, 48-64px Headline, "Get started for free"-Pillen-Button mit Verlauf
  • schwebende Kugeln, unscharfe Kleckse, dezent animiertes Raster, ein Fake-Produkt-Screenshot mit Glow
  • das ist, was jedes AI-Tool erzeugt, wenn kein Stil angegeben ist

Palette

#0a0a1a Seite, #ffffff Text, #a1a1aa gedämpft, #7c3aed Violett, #3b82f6 Blau, #ec4899 Pink, rgba(255,255,255,0.05) Glas

Schrift

Geist (immer), Überschriften 700 bei 56-64px mit -0.02em, verlaufsgefüllt; Fließtext 400 bei 18px; Buttons 600 bei 16px in Pillen

Do

  • erkenne ihn: hat die Seite einen lila Glow, Verlaufs-Headline-Text, drei Glaskarten und ein Funkel-Icon, ist es dieser Stil
  • um ihn zu vermeiden, ändere mindestens drei dieser Punkte: die Schrift (nutze eine Serif oder eine Grotesk mit Charakter), den Hintergrund (hell, warm oder echte Farbe), den Verlauf (lösch ihn), das Kartenraster (nutze eine Liste, eine Tabelle oder Prosa), den Akzent (eine flache Farbe)
  • wenn ein Kunde darauf besteht, erde ihn wenigstens: echte Screenshots, echte Zahlen, ein Glow, ein Verlauf, keine Funkeln

Don't

  • liefere ihn nicht als Default aus; er signalisiert "kein Designer, keine Entscheidungen" an jeden, der zehn AI-Landingpages gesehen hat
  • nutze Verlaufstext auf nicht mehr als einem Wort; es schadet der Lesbarkeit und altert sofort
  • setze keine Funkel- oder Stern-Icons neben "AI"; das Wort sagt es schon

Bekannt dafür: tausende AI-Wrapper-Landingpages 2023-2025, Default-Ausgaben von v0 und Lovable, die meisten "Launch your SaaS"-Templates

CSS-Seed
:root {
  --bg: #0a0a1a;
   --fg: #ffffff;
   --muted: #a1a1aa;
   --accent: #7c3aed;
   --accent2: #3b82f6;
   --glass: rgba(255,255,255,0.05);
   --radius: 16px;
   --glow: 0 0 80px rgba(124,58,237,0.4);
   --font: 'Geist',sans-serif
}
Prompt

Baue die Seite im AI-Startup-Gradient-Glow-Stil, aber bewusst und zurückhaltend (das ist der Default-Look, den die meisten AI-Tools erzeugen; nutze ihn nur, wenn das Briefing es verlangt). Hintergrund #0a0a1a mit einem einzelnen radialen Glow hinter dem Hero (rgba(124,58,237,0.35), 70vw, blur(120px)) und einem 32px Punktraster bei 4 % Weiß, das unterhalb des Folds ausläuft. Text #ffffff, gedämpft #a1a1aa. Schrift Geist: h1 700 bei 60px mit -0.02em, Verlaufstext (linear-gradient(90deg, #7c3aed, #3b82f6)) nur auf einem Wort; Fließtext 400 bei 18px. Primärbutton: Pille, Verlauf #7c3aed nach #3b82f6, weißer Text, 48px hoch; sekundär: 1px rgba(255,255,255,0.15) Outline. Karten: rgba(255,255,255,0.05) Füllung, 1px rgba(255,255,255,0.1) Rand, Radius 16px, keine Verlaufsränder, keine Funkeln. Ein echter Produkt-Screenshot mit 1px Rand und demselben violetten Glow bei 20 %. Preise: drei Spalten, die mittlere mit violettem Rand, kein Glow. Motion: 400ms Fade-up beim Scrollen. Limit: ein Glow, ein Verlauf, null Emoji.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im AI-Startup-Gradient-Glow-Stil, aber bewusst und zurückhaltend (das ist der Default-Look, den die meisten AI-Tools erzeugen; nutze ihn nur, wenn das Briefing es verlangt). Hintergrund #0a0a1a mit einem einzelnen radialen Glow hinter dem Hero (rgba(124,58,237,0.35), 70vw, blur(120px)) und einem 32px Punktraster bei 4 % Weiß, das unterhalb des Folds ausläuft. Text #ffffff, gedämpft #a1a1aa. Schrift Geist: h1 700 bei 60px mit -0.02em, Verlaufstext (linear-gradient(90deg, #7c3aed, #3b82f6)) nur auf einem Wort; Fließtext 400 bei 18px. Primärbutton: Pille, Verlauf #7c3aed nach #3b82f6, weißer Text, 48px hoch; sekundär: 1px rgba(255,255,255,0.15) Outline. Karten: rgba(255,255,255,0.05) Füllung, 1px rgba(255,255,255,0.1) Rand, Radius 16px, keine Verlaufsränder, keine Funkeln. Ein echter Produkt-Screenshot mit 1px Rand und demselben violetten Glow bei 20 %. Preise: drei Spalten, die mittlere mit violettem Rand, kein Glow. Motion: 400ms Fade-up beim Scrollen. Limit: ein Glow, ein Verlauf, null Emoji.

## Tokens
:root { --bg:#0a0a1a; --fg:#ffffff; --muted:#a1a1aa; --accent:#7c3aed; --accent2:#3b82f6; --glass:rgba(255,255,255,0.05); --radius:16px; --glow:0 0 80px rgba(124,58,237,0.4); --font:'Geist',sans-serif }

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.