LanceSkill - Hochwertiges UI/UX & Game Design

Leitfaden für hochwertiges UI/UX und Game Design (Premium UI/UX & Game Design)

Dieser Skill befähigt KI-Agenten, bei der Gestaltung von Webseiten, App-Oberflächen oder Spielen nicht mehr auf schlichte, eintönige "Ingenieurs-Ästhetik" zurückzugreifen, sondern professionelle Produkte mit modernem Look, feinen visuellen Ebenen und fließenden Interaktionen (Micro-interactions) zu erschaffen.

---

1. Visuelle Ästhetik und Design-System-Richtlinien (Design System & Aesthetics)

🎨 Ablehnung schlichter Farben (Color Palette)

• Keine reinen Farben: Verwende niemals #FF0000 (reines Rot), #00FF00 (reines Grün), #0000FF (reines Blau) oder #FFFF00 (reines Gelb).
• Ausgewählte Farbtöne (Semantic Colors):
  • Hintergrund und Text: Verwende tiefes Schiefergrau (Deep Slate, z. B. #0B0F19, #1E293B) oder extrem mattes Schwarz, kombiniert mit hohem Kontrast und weichem Cremeweiß (#F8FAFC).
  • Primärfarbe (Primary): Verwende Indigo (#6366F1), Aurora-Grün (#10B981), Violett (#8B5CF6) oder Rosenrot mit Farbverlauf.
  • Statusfarben: Fehler mit weichem Korallenrot (#EF4444), Erfolg mit Jadegrün (#34D399).

✍️ Moderne Typografie und Schrift-Hierarchie (Typography)

• Schriftarten einbinden: Lade moderne Schriftarten immer von Google Fonts, z. B.:
  • UI/Text: Inter oder Plus Jakarta Sans.
  • Überschriften/Zahlen: Outfit oder Cabinet Grotesk.
• Schriftstärke-Kontrast (Font Weights): Überschriften mit 700 oder 800, Unterüberschriften mit 500/600, Textkörper mit 400. Erreiche visuelle Hierarchie durch Schriftstärke statt nur durch Schriftgröße.

🔮 Räumliche Tiefe und Milchglaseffekt (Depth & Glassmorphism)

• Abgerundete Ecken: Buttons mit mindestens 8px bis 12px; Karten mit 16px bis 24px.
• Milchglas (Glassmorphism):

  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  

• Weiche Schatten (Box Shadows): Verwende mehrschichtige Mikroschatten, um einen Schwebeeffekt zu erzeugen; vermeide einzelne harte schwarze Schatten:

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03), 
              0 1px 3px rgba(0, 0, 0, 0.02);
  

---

2. Fließende Mikrointeraktionen und Animationen (Micro-interactions & Motion)

Die Finesse einer UI entsteht aus "Feedback und Bewegung". Eine Oberfläche ohne Übergangsanimationen wirkt hölzern.

✨ Button- und Interaktionskomponenten-Animationen (Button Interactions)

• Weiche Übergänge: Allen Hover-/Focus-/Active-Zuständen einen weichen Übergang hinzufügen:

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  

• Hover-Schwebe- und Leuchteffekte: Beim Überfahren mit der Maus schweben Karten leicht auf, der Schatten wird tiefer oder der Rand leuchtet auf.

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(99, 102, 241, 0.4);
  }
  

• Klick-Druck-Feedback (Press Feedbacks):

  .button:active {
    transform: scale(0.96);
  }
  

🌀 Lade- und Übergangsanimationen (Transitions & Loaders)

• Skelettbildschirme (Skeleton Screen): Für asynchron geladene Daten immer sanft flackernde Skelettbildschirme entwerfen, anstelle von harten "Loading..."-Texten.
• Feine SVG-Animationen: Falls ein Spinner benötigt wird, leichte, mittels CSS rotierte SVG-Icons mit Farbverlaufseffekten verwenden.

---

3. Spezielle Richtlinien für Spiele-UI/UX (Game UI/UX Guidelines)

⏱️ Spiel-Schleife und fließende Steuerung (Game Loop & Controls)

• Physik und Rendering trennen: Verwende requestAnimationFrame für das Rendering und verarbeite die Physik mit einem festen Zeitschritt.
• Steuerung glätten: Falls Sensordaten für ein Spiel verwendet werden, wende einen Low-Pass-Filter oder Interpolation an, um Komponentenrütteln zu vermeiden.

💥 Rückmeldungs-Juice (Game Juice & Tactile Feedback)

• Punkt-/Erfolgsrückmeldung:
  • Schrift vergrößern und hüpfen lassen (transform: scale(1.2) mit Bounce-Animation).
  • Partikel-Effekte versprühen.
  • Zahlen nach oben schweben und ausblenden.
• Schaden-/Fehler-Rückmeldung:
  • Bildschirmwackeln (Screen Shake).
  • Rotes Aufblitzen.
  • Karten-Schütteln (Shake animation).

📺 Interface-Konfiguration und HUD (Heads-Up Display)

• Vollflächiges, parallaxfreies und responsives Layout.
• Halbtransparente Abdunkelungsmaske; Popup-Menüs mittels Scale-up- oder Slide-in-Animationen einblenden.

---

4. Workflow und Implementierungsrichtlinien (Implementation Workflow)

1. Entwurf vor der Implementierung: Zeichne vor dem Schreiben von Code einen Layoutentwurf mit ASCII/Markdown.
2. Keine Platzhalter: Verwende keine Testdaten wie "Lorem Ipsum"; Symbole immer als SVG (z. B. Lucide icons) einbinden.
3. CSS-Variablen für zentrales Theme-Management.