Web UI Codegen – Premium UI Code Generator

Generiere UI-Code, der aussieht wie ein Dribbble-Top-Shot oder ein Behance-Feature-Projekt – nicht wie generischer KI-Output. Das Ziel ist es, Code zu produzieren, der von der Arbeit eines Senior Product Designers in Top-Studios nicht zu unterscheiden ist.

Kernproblem, das dieses Skill löst

KI-generierte UI ist typischerweise „technisch korrekt, aber seelenlos“:

Flache, leblose Layouts ohne visuelle Emotion
Mechanisches Raster ohne Rhythmus oder Atemraum
Generische Farben, die keine Atmosphäre schaffen
Keine Tiefe, kein Licht, keine Dimension
Text, der einfach „da sitzt“, ohne Aufmerksamkeit zu erregen

Dieses Skill verwandelt die Ausgabe in designorientierte visuelle Erlebnisse.

Wann es verwendet werden soll

Dieses Skill MUSS immer dann verwendet werden, wenn:

Eine beliebige Webseite, App oder Landing Page erstellt wird
UI-Komponenten erstellt werden, die Nachbearbeitung benötigen
Der Benutzer schöne, moderne Design-Outputs erwartet
Jede HTML/CSS/JS-, React- oder Vue-Aufgabe mit visuellen Qualitätserwartungen ansteht

DAS DESIGN SYSTEM

1. Hintergrund: Diffused Gradient Atmosphere

NIEMALS einfache Volltonfarben verwenden. Hintergründe müssen Atmosphäre und Emotion schaffen.

Technik – Geschichtete Diffused Gradients:

/* Hintergrundebene 1: Basis-Gradient */
body {
  background: #0a0a0f;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 119, 198, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(255, 107, 107, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(78, 205, 196, 0.06) 0%, transparent 50%);
}

/* Helles-Theme-Version: */
body.light {
  background: #f8f6f4;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(167, 139, 250, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 90% 60%, rgba(251, 191, 146, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(147, 197, 253, 0.08) 0%, transparent 40%);
}

Regeln:

2–4 radial-gradient-Ebenen mit unterschiedlichen Positionen und Farben verwenden
Deckkraft NIEDRIG halten (0.06–0.15 auf dunkel, 0.08–0.15 auf hell)
Farben sollten komplementär oder analog sein – NICHT zufällig
Gradienten außermittig und an den Kanten platzieren für ein natürliches Gefühl
ellipse-Form verwenden, nicht circle – organischer

Farbstimmung-Paletten für Hintergründe:

Ruhig/Tech: Lila-Blau + Teal (rgba(120,119,198) + rgba(78,205,196))
Warm/Kreativ: Orange-Pink + Gold (rgba(255,107,107) + rgba(255,193,68))
Frisch/Natur: Grün + Blau (rgba(52,211,153) + rgba(96,165,250))
Premium/Luxus: Tiefes Lila + Rose (rgba(139,92,246) + rgba(244,114,182))
Neutral/Corporate: Schieferblau + Silber (rgba(100,116,139) + rgba(148,163,184))

2. Typografie: Kinematografische Hierarchie

Der #1 Unterschied zwischen Amateur- und Profi-UI: extremer typografischer Kontrast.

/* Hero-Überschrift – beherrscht den Bildschirm */
.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

/* Abschnittsüberschrift – verankert den Inhalt */
.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Unterüberschrift / Kartentitel */
.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Fließtext – bewusst leicht */
.body-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 540px; /* Lesemaß */
}

/* Kleines Label / Tag */
.label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

Regeln:

Größenverhältnis Titel zu Text: mindestens 3:1 (z. B. 48px Titel / 16px Text)
Hero-Text: IMMER clamp() für fließende Skalierung verwenden
Buchstabenabstand: NEGATIV bei Überschriften (-0.02 bis -0.04em), POSITIV bei Labels (+0.03 bis +0.06em)
Zeilenhöhe: 1.0–1.1 für Überschriften, 1.5–1.6 für Fließtext
Maximal 2–3 Schriftgrößen pro Bildschirm, nicht mehr
Gewichtskontrast: 700 Überschriften / 400 Fließtext – niemals 500 für alles verwenden

3. Layout: Atmen & Bento

Die Atem-Regel: 60 % des Bildschirms sollten LEERER RAUM sein. Inhalt ist kostbar – umgebe ihn mit Luft.

Abstandsskala:

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-section: clamp(80px, 12vw, 160px);
}

Bento-Grid (für Funktionsabschnitte, Dashboards):

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

/* Feature-Karte überspannt 2 Spalten */
.bento-item-wide { grid-column: span 2; }
/* Hero-Karte überspannt 2 Spalten + 2 Reihen */
.bento-item-hero { grid-column: span 2; grid-row: span 2; }
/* Hohe Karte */
.bento-item-tall { grid-row: span 2; }

Regeln:

Vertikaler Abstand der Abschnitte: 80–160px (--space-section verwenden)
Maximale Inhaltsbreite: 1120px (nicht 1200 – etwas enger wirkt durchdachter)
Seitlicher Abstand der Seite: 48–80px Desktop, 20–24px Mobil
Karteninnenabstand: 32–48px (großzügig, nicht gequetscht)
Zwischen Überschrift und Fließtext: 16–24px
Zwischen Kartenabschnitten: 16–20px Abstand
Hero-Abschnitt: Inhalt vertikal zentriert, mindestens 80vh Höhe
NIEMALS die gesamte Breite füllen – großzügige Ränder lassen

4. Karten & Oberflächen: Glas mit Seele

/* === Dunkles-Theme-Glaskarte === */
.card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Oberkanten-Lichtreflexion */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 50%, transparent);
}

/* Hover: Anheben + Leuchten */
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* === Helles-Theme-Glaskarte === */
.card-light {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.card-light:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

Regeln:

Border-radius: 20–32px für Karten (GROSS – das ist der moderne Look)
Border: immer rgba, niemals Volltonfarben – max. 0.06–0.1 Deckkraft
Immer eine Oberkanten-Hervorhebung hinzufügen (::before linear-gradient-Trick)
Hover muss translateY (Anheben) UND verstärkten Schatten beinhalten
Helle Karten verwenden inset-Schatten für inneren Glanz
Karteninnenabstand: mindestens 32px, niemals weniger

5. Buttons: Pille + Emotion

/* Primärer CTA – Pille mit Präsenz */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
}

.btn-primary:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* Geist / Sekundär – dezente Umriss-Pille */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid rgba(var(--text-rgb), 0.15);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: rgba(var(--text-rgb), 0.05);
  border-color: rgba(var(--text-rgb), 0.3);
}

Regeln:

ALLE Buttons verwenden border-radius: 50px (Pillenform)
Primärer Button: Volltonfüllung + passender Schatten-Glanz
Sekundärer Button: transparent/Geist mit dünnem Rand
Innenabstand: 14–16px vertikal, 28–36px horizontal (großzügig)
Hover: IMMER translateY + Scale-Boost + verstärkter Glanz
Aktiv: scale(0.97) mit schnellem Übergang (100ms)
Niemals eckige / leicht abgerundete Buttons – immer volle Pillenform

6. Icons: Nur SVG – NIEMALS Emojis

ABSOLUTE REGEL: Niemals Emojis (🎬🎮💼🎵) als UI-Icons verwenden. Das ist das #1 Zeichen von KI-generiertem Amateur-Code.

Option A: Lucide Icons via CDN (BEVORZUGT)

Lucide ist die modernste, leichteste, quelloffene Icon-Bibliothek (1000+ Icons).

<!-- Zum <head> hinzufügen -->
<script src="https://unpkg.com/lucide@latest"></script>

<!-- Im HTML mit data-lucide-Attribut verwenden -->
<i data-lucide="music" class="icon"></i>
<i data-lucide="play" class="icon"></i>
<i data-lucide="search" class="icon"></i>
<i data-lucide="heart" class="icon"></i>

<!-- Am Ende des Body initialisieren -->
<script>lucide.createIcons();</script>

/* Icons mit CSS stylen */
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.75;
}

Häufige Icon-Namen: home, search, settings, user, heart, play, pause, skip-forward, skip-back, volume-2, music, headphones, mic, star, bookmark, share-2, download, arrow-left, arrow-right, chevron-down, plus, x, check, bell, mail, calendar, clock, globe, camera, image, film, book-open, briefcase, code, terminal, zap, trending-up, bar-chart-2, pie-chart, layers, grid, list, filter, edit-3, trash-2, eye, eye-off, lock, unlock, sun, moon, menu, more-horizontal, more-vertical, external-link, link, send, message-circle, phone, map-pin

Option B: Inline-SVG (wenn CDN nicht verfügbar)

Minimale SVG-Pfade direkt schreiben. Icons einfach halten (einzelner Pfad, 24x24 viewBox):

<!-- Play-Icon -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <polygon points="5 3 19 12 5 21 5 3"/>
</svg>

<!-- Search-Icon -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>

<!-- Home-Icon -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
</svg>

Icon-Styling-Regeln:

Größe: 18–24px für Standard, 16px für kompakt, 28–32px für Feature-Icons
Strichstärke: 1.5–2 (dünner = eleganter)
Farbe: currentColor verwenden, damit Icons die Textfarbe erben
Icon-Container: in ein abgerundetes Div mit dezentem Hintergrund einwickeln, um sie hervorzuheben

/* Icon-Container – gibt Icons ein „Zuhause“ */
.icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

7. Farb-Token

:root {
  /* Dunkles Theme (Standard) */
  --bg: #0a0a0f;
  --text-primary: #f0f0f3;
  --text-secondary: #8b8b99;
  --text-muted: #4a4a58;
  --accent: #6366f1;        /* Indigo – pro Projekt ändern */
  --accent-rgb: 99, 102, 241;
  --accent-glow: rgba(99, 102, 241, 0.3);
  --surface: rgba(255, 255, 255, 0.03);
  --surface-border: rgba(255, 255, 255, 0.06);
  --text-rgb: 240, 240, 243;
}

/* Helles Theme */
:root.light {
  --bg: #f8f6f4;
  --text-primary: #1a1a2e;
  --text-secondary: #6b6b80;
  --text-muted: #a0a0b0;
  --accent: #6366f1;
  --accent-rgb: 99, 102, 241;
  --surface: rgba(255, 255, 255, 0.6);
  --surface-border: rgba(255, 255, 255, 0.7);
  --text-rgb: 26, 26, 46;
}

Akzentfarb-Optionen (EINE pro Projekt auswählen):

Indigo: #6366f1 – Tech, KI, SaaS
Blau: #3b82f6 – Vertrauen, Corporate, Finanzen
Violett: #8b5cf6 – Kreativ, Premium
Rose: #f43f5e – Mutig, Energie, Social
Bernstein: #f59e0b – Warm, Krypto, Fintech
Smaragd: #10b981 – Gesundheit, Natur, Wachstum
Cyan: #06b6d4 – Frisch, Modern, Reisen

8. Mikrointeraktionen & Bewegung

/* Übergangs-Presets */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

/* Karten-Hover – nach oben schweben */
.card { transition: all 0.4s var(--ease-out-expo); }
.card:hover { transform: translateY(-4px); }

/* Button-Hover – Bounce-Skalierung */
.btn { transition: all 0.25s var(--ease-bounce); }
.btn:hover { transform: translateY(-2px) scale(1.03); }

/* Dezente Eingangsanimation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: fadeUp 0.6s var(--ease-out-expo) forwards;
}

Regeln:

Karten: 0.4s ease-out-expo, translateY(-4px) bei Hover
Buttons: 0.25s Bounce, translateY(-2px) + scale(1.03)
Eingabefelder: 0.2s smooth, Border-Farbwechsel + dezenter Glanz
NIEMALS transition: all 0.3s ease verwenden – das ist das KI-Verrat
Aktiv/Gedrückt: scale(0.97), Dauer 0.1s
Seitenladevorgang: gestaffelte fadeUp-Animation (0.1s Verzögerung pro Element)

9. Visuelle Tiefenelemente

Füge diese hinzu, um das „designte“ Gefühl zu erzeugen:

/* Schwebende Gradienten-Kugel (dekorativ) */
.orb {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Rausch-Textur-Overlay (dezent) */
.noise-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,...");
  pointer-events: none;
  z-index: 9999;
}

Regeln:

Orbs: 200–500px Durchmesser, unscharf 40–80px, mit niedriger Deckkraft (0.1–0.2)
Platzierung: außermittig, hinter dem Inhalt (z-index: 0)
Rausch-Überlagerung: 0.015–0.03 Deckkraft – fast unsichtbar, aber spürbar
Farbakzente: Orbs sollten die Akzentfarbe des Projekts verwenden
NIEMALS Animationen auf Orbs anwenden – sie sollten statisch und ruhig sein

BEISPIELHAFTE SEITENSTRUKTUR

<!-- Hero-Abschnitt -->
<section class="hero">
  <div class="hero-content animate-in">
    <span class="label">Vorgestelltes Projekt</span>
    <h1 class="hero-title">Gestalte die Zukunft</h1>
    <p class="body-text">Ein aufregendes neues Erlebnis erwartet dich.</p>
    <div class="hero-actions">
      <button class="btn-primary">
        <i data-lucide="zap"></i>
        Loslegen
      </button>
      <button class="btn-ghost">
        <i data-lucide="play"></i>
        Demo ansehen
      </button>
    </div>
  </div>
  <div class="orb" style="top:-10%;right:-5%;background:radial-gradient(circle, rgba(99,102,241,0.15), transparent 70%)"></div>
</section>

<!-- Features-Bento-Grid -->
<section>
  <div class="section-header animate-in">
    <h2 class="section-title">Leistungsstarke Funktionen</h2>
    <p class="body-text">Entwickelt für Entwickler mit hohen Ansprüchen.</p>
  </div>
  <div class="bento-grid">
    <div class="card bento-item-hero animate-in">
      <div class="icon-box"><i data-lucide="layers"></i></div>
      <h3 class="card-title">Nahtlose Integration</h3>
      <p class="body-text">Verbinde dich mit deinem bestehenden Workflow.</p>
    </div>
    <div class="card bento-item-wide animate-in">
      <div class="icon-box"><i data-lucide="zap"></i></div>
      <h3 class="card-title">Blitzschnelle Leistung</h3>
      <p class="body-text">Optimiert für Geschwindigkeit und Effizienz.</p>
    </div>
    <div class="card animate-in">
      <div class="icon-box"><i data-lucide="lock"></i></div>
      <h3 class="card-title">Sicher & zuverlässig</h3>
      <p class="body-text">Deine Daten sind jederzeit geschützt.</p>
    </div>
    <!-- Weitere Karten... -->
  </div>
</section>

DESIGN-SPEZIFIKATIONSUMFANG

Jeder generierte Code sollte eine Design-Spezifikations-Kommentardatei beinhalten (entweder als spec.json oder als CSS-Kommentare):

{
  "designSystem": {
    "name": "Mein Premium-UI-Kit",
    "createdBy": "MLiang0920/mliang-ui-design-skill",
    "theme": "dark",
    "version": "1.0.0",
    "tokens": {
      "colors": {
        "bg": "#0a0a0f",
        "text-primary": "#f0f0f3",
        "text-secondary": "#8b8b99",
        "accent": "#6366f1"
      },
      "typography": {
        "headings": "Inter, system-ui, sans-serif",
        "body": "Inter, system-ui, sans-serif",
        "scale": ["0.75rem", "1rem", "1.1rem", "1.75rem", "2.5rem", "4.5rem"]
      },
      "spacing": {
        "base": "16px",
        "scale": ["4px", "8px", "16px", "24px", "40px", "64px", "96px", "128px"]
      },
      "borderRadius": {
        "card": "24px",
        "button": "50px",
        "iconBox": "12px"
      },
      "animations": {
        "cardHover": "translateY(-4px) 0.4s ease-out-expo",
        "buttonHover": "translateY(-2px) scale(1.03) 0.25s bounce"
      }
    }
  },
  "seite": {
    "abschnitte": ["Hero", "Features", "Testimonials", "FAQ", "Footer"],
    "layout": "Bento-Grid + zentrierter Inhalt",
    "visuelleTiefe": ["Hintergrund-Gradienten", "Glaskarten", "schwebende Orbs", "Rausch-Überlagerung"]
  }
}

ZUSAMMENFASSUNG DER REGELN

Icons: Niemals Emojis – immer Lucide + SVG
Hintergründe: Immmer diffuse Radial-Gradienten, niemals Vollton
Typografie: Extrem kontrastreich, clamp()-Skalierung, negativer Buchstabenabstand bei Überschriften
Layout: Bento-Grid + viel Leerraum (60 % leer)
Karten: Glas-Effekt, 24px border-radius, Oberkanten-Licht, Hover-Lift
Buttons: Pillenform (50px), Bounce bei Hover, sofortiges Active-Scaling
Farben: CSS-Token mit hellen/dunklen Themes, eine Akzentfarbe pro Projekt
Animationen: Kubische Bezier-Übergänge (niemals „ease“), gestaffelte fadeUp-Eingänge

MLiang0920/mliang-ui-design-skill

Was ist mliang-ui-design-skill?

In Ihrer bevorzugten KI fragen

Dokumentation

Web UI Codegen – Premium UI Code Generator

Kernproblem, das dieses Skill löst

Wann es verwendet werden soll

DAS DESIGN SYSTEM

1. Hintergrund: Diffused Gradient Atmosphere

2. Typografie: Kinematografische Hierarchie

3. Layout: Atmen & Bento

4. Karten & Oberflächen: Glas mit Seele

5. Buttons: Pille + Emotion

6. Icons: Nur SVG – NIEMALS Emojis

7. Farb-Token

8. Mikrointeraktionen & Bewegung

9. Visuelle Tiefenelemente

BEISPIELHAFTE SEITENSTRUKTUR

DESIGN-SPEZIFIKATIONSUMFANG

ZUSAMMENFASSUNG DER REGELN

Verwandte Skills

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me