Step 4 — Das Design
Designer-Agent macht das Visuelle. Stil von bestehenden Spielen kopieren — keinen neuen erfinden.
Das Visuelle.
Designer-Agent erfindet keinen neuen Stil. Er liest bestehende Spiele, kopiert Farben, Fonts, Spacing und wendet sie auf das neue Spiel an.
So sehen alle Spiele wie aus dem gleichen Studio aus.
Studio-Design-Tokens
Jedes Spiel teilt dieselben atomaren Tokens. Keine Abweichung.
Farben: #00ffff (Cyan, Haupt) #ff4466 (Pink, Akzent) #ffcc33 (Gold, Erfolg) #34d399 (Grün, OK) #0a0a0f (dunkler BG)
Fonts: Space Grotesk Inter
Buttons: Scharfe Ecken, 2px Border Spacing: 8 / 16 / 24 / 48px Anim: ease-out, 200ms
✓ Gleiche Tokens, alle Spiele ✓ Spieler erkennen in 1 Sek.
/tokens
Gleiche Tokens, alle Spiele.
4 Spiele teilen Farben, Fonts, Rhythmus. Absichtlich — wer eines spielt, erkennt die anderen sofort.
Erste Anweisung an Designer: "Diese Tokens benutzen, kein Vorschlag."
Die 7 Pflichtzustände
Jedes Screen-Mockup muss alle 7 möglichen Spielerzustände enthalten. Damit Design-Lücken früh sichtbar werden.
- idle — Default
- loading — Spinner
- error — Verbindung weg
- empty — keine Daten
- success — Aktion bestätigt
- disabled — Button gesperrt
- focus — Tastatur-Nav
✓ Alle 7 → Code möglich ✗ Fehlt eines → zurück zum Designer
/states
Nicht alle 7 = nicht fertig.
Die meisten "kümmern wir uns später drum"-Bugs sind vergessene empty/error-States. Reviewer fängt sie vor dem Code.
Häufige Fallen
✗ Neue Farben statt Tokens erfinden
✗ 7 States überspringen, weil "offensichtlich"
✗ Idee statt Mockup einreichen
✗ Figma nutzen, wenn HTML reicht