Theme Factory

Sag das, um den Skill zu aktivieren

---
name: theme-factory
description: Erstellt komplette Design-Themes mit Farbskalen, Typografie und Komponenten-Tokens aus Brand-Farben oder Stilvorgaben.
---

Baut aus wenigen Vorgaben (Brand-Farben, Zielgruppe, Stimmung) ein vollständiges, sofort nutzbares Design-Token-System.

## Wann dieser Skill aktiviert wird
- Der Nutzer nennt Brand-Farben oder ein CI und will daraus Tokens generieren.
- Ein neues Theme für Landingpage, App oder Sub-Branding, etwa ein dunkles SaaS-Theme für Entwickler.
- Ein bestehendes Theme braucht Dark-Mode oder eine Kontrast-Revision.

## Workflow
1. Inputs klären: Primärfarbe(n), Zielgruppe, Stimmung, Hell/Dunkel oder beides. Fehlt etwas, 2 bis 3 gezielte Fragen stellen statt raten.
2. Primärfarbe zu einer 10-stufigen Skala ausbauen (50 bis 900), idealerweise in OKLCH: Helligkeit gleichmäßig staffeln, Sättigung an den Enden reduzieren, Hue konstant.
3. Neutrale Skala definieren: nie reines Grau, sondern Grautöne mit kleinem Anteil der Primär-Hue.
4. Statusfarben ableiten (success, warning, danger, info); keine zwei davon dürfen verwechselbar nah beieinander liegen.
5. Tokens in drei Ebenen benennen: Primitive (blue-500), semantisch (color-action-primary), Komponente (button-bg).
6. Typografie festlegen: maximal 2 Schriftfamilien, Skala mit fester Ratio (z.B. 1.25), Zeilenhöhen 1.5 bis 1.6 für Fließtext, 1.1 bis 1.3 für Headlines.
7. Spacing, Radius und Schatten auf Basis 4px oder 8px definieren; Schatten leicht Richtung Primär-Hue tönen statt reines Schwarz.
8. Jede Text/Hintergrund-Kombination gegen WCAG AA prüfen (4.5:1 Fließtext, 3:1 große Texte und UI) und Verstöße korrigieren.
9. Dark-Mode nicht invertieren: eigene Surface-Stufen, Akzentfarben entsättigen, Kontraste neu prüfen.

## Output-Format
- Token-Set als CSS Custom Properties (:root plus [data-theme="dark"]), optional als JSON im W3C-Design-Token-Format.
- Kurze Begründung der Kernentscheidungen (Hue-Wahl, Skala, Schriften) in 5 bis 8 Sätzen.
- HTML-Vorschau mit Buttons, Card, Formular und Text-Hierarchie zur direkten Beurteilung.

## Qualitätsregeln
- Jede Farbskala hat 10 Stufen; Stufe 500 ist die Hauptfarbe, nicht zwingend die rohe Brand-Farbe.
- Alle Text/Hintergrund-Paare erfüllen WCAG AA, belegt mit konkreten Kontrastwerten im Output.
- Komponenten-Tokens referenzieren nur semantische Tokens, nie Hex-Werte oder Primitives direkt.
- Fokus-Zustände bekommen eigene Tokens (focus-ring); nie outline: none ohne Ersatz.
- Dark-Mode-Werte werden eigenständig gesetzt, nicht aus dem Light-Theme gespiegelt.
- Namensschema durchgehend kebab-case, keine Mischformen.

Kompakte, eigenständige Fassung von Collective Brain. Die ausführliche Original-Version findest du in der Quelle ↗.

Skill teilen