🚀 Universal Design-Prompt für Apps & Webseiten

📋 Kopierbarer Design-Prompt

<button onclick="copyPrompt()" style="position: absolute; right: 10px; top: 10px; background: #c02a48; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer;">Copy</button>

[Design-System "CyberCore"]
**Farbpalette:**
- Primär: #c02a48 (Akzentrot)
- Dunkelmodus: #212121 (Hintergrund), #ffffff (Text)
- Hellmodus: #ffffff (Hintergrund), #212121 (Text)
- Highlight: #ff4757 (Alarmrot)

**Key Components:**
1. **Container:**
   - Max-width: 1200px
   - Glas-Effekt: backdrop-filter: blur(10px)
   - Schatten: box-shadow: 0 8px 32px rgba(0,0,0,0.18)
   - Border: 1px solid rgba(192,42,72,0.3)

2. **Navigation:**
   - Vertikale Sidebar (Desktop) / Hamburger-Menu (Mobile)
   - Hover-Animation: transform: translateX(5px)
   - Aktiver Tab: Border-left: 4px solid #c02a48

3. **Typografie:**
   - Headlines: 'Space Mono', monospace
   - Body: 'Roboto Flex', sans-serif
   - Code-Blöcke: 'Fira Code', monospace

4. **Spezial-Effekte:**
   - Pulsierende Status-Indikatoren
   - Radar-Scan-Animation für Ladezustände
   - Neon-Glow für aktive Elemente

5. **Responsive Rules:**
   - Breakpoints: 768px & 480px
   - Fluid Typography: clamp()-Funktion
   - Grid-Layout mit auto-fit

**Implementierungs-Tipps:**
- Verwende CSS Custom Properties für Theme-Switching
- Nutze prefers-reduced-motion für Animationen
- Halte Kontrastverhältnis ≥ 4.5:1
- Für Web-Apps: Füge Service Worker für Offline-Funktion hinzu

🎯 Anwendungsbeispiele

📱 Für Mobile Apps

// Android (Jetpack Compose)
val CyberRed = Color(0xFFC02A48)
Surface(
    color = Color(0xFF212121),
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    Text("Hello CyberCore!", color = CyberRed)
}

🖥 Für Webseiten

/* CSS-Variablen */
:root {
  --cyber-primary: #c02a48;
  --cyber-bg: #212121;
  --cyber-glow: 0 0 15px rgba(192,42,72,0.5);
}

.btn-cyber {
  background: var(--cyber-primary);
  border: 1px solid transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cyber:hover {
  box-shadow: var(--cyber-glow);
}

🔧 Anpassungs-Guide

  1. Farben ändern: Ersetze die HEX-Werte in der :root-Deklaration
  2. Layout anpassen: Modifiziere die Grid-Container mit grid-template-areas
  3. Animationen: Passe @keyframes-Dauer und easing-Funktionen an
  4. Branding: Füge Custom Fonts über @font-face-Regeln hinzu