# tweakcn-Mechanik fuer Templates Web

Stand der Beobachtung: 2026-06-09.

## Was an tweakcn uebertragbar ist

- Token-Gruppen fuer Farben, Typografie und sonstige Parameter.
- Live-Vorschau mit mehreren Beispiel-Screens statt nur Farbchips.
- Action-Bar mit Import, Share, Save und Code.
- CSS-Import fuer bestehende Variablen.
- Sharebare Theme-URLs.
- Code-Export und maschinenlesbare Registry-Endpunkte.
- Bridge-Exports, damit andere Systeme ein Theme direkt laden koennen.

## Konkret beobachtete UI-Muster

- Theme-Editor mit Tabs fuer `Colors`, `Typography`, `Other` sowie KI-Generierung.
- Preview-Szenen wie `Cards`, `Dashboard`, `Mail`, `Pricing`, `Color Palette`, zusaetzlich weitere Ansichten wie Typografie.
- Community-Ansicht mit `Open in Editor`, `Share` und Code-Dialog.
- Code-Panel mit CSS-Ausgabe und abhaengig vom Kontext einem Registry-Kommando.
- Import-Dialog fuer CSS-Variablen mit `:root` und `.dark`.

## Konkret beobachtete Daten-/Brueckenmuster

- Registry-Route fuer Theme-JSON.
- Separater Bridge-Endpoint fuer externe Zielsysteme.
- Export wird aus Theme-Styles generiert, nicht manuell gepflegt.
- Share-URLs unterscheiden zwischen gespeicherten Themes und Editor-Presets.

## Uebertragung auf OpenClaw

OpenClaw sollte dieselben Prinzipien nutzen, aber mit eigener Formensprache:

- OpenClaw-Dashboards und Webflaechen als echte Preview-Szenen verwenden.
- Vorhandene Theme-Dateien, CSS-Variablen oder Dashboard-Tokens als Source of Truth anbinden.
- Einen stabilen Export-Endpunkt fuer andere OpenClaw-Seiten oder Tools vorsehen.
- `Open in ...` als Bruecke zu konkreten Zielseiten, Canvas-Views oder FAQ-/Dashboard-Seiten einsetzen.
- Nicht nur Themes bauen, sondern daraus direkt nutzbare Template-Familien erzeugen.

## Empfohlene Reihenfolge

1. Produktive Preview-/Template-Szenen festlegen.
2. Token-Schema kanonisieren.
3. Preview-Szenen anbinden.
4. Import/Export stabil machen.
5. Persistenz, Share und Varianten hinzufuegen.
6. Erst danach Extras wie AI oder Community.