---
name: "templates-web"
description: "Tweakcn-artige Web-Templates fuer OpenClaw mit Fokus auf maximalen User-Output und schnelle Wiederverwendung."
---

# Templates Web

Nutze diese Skill, wenn der User einen visuellen Template- oder Theme-Editor nach dem Muster von tweakcn in OpenClaw, einem Dashboard, einer internen Website oder einer Web-Komponente haben will.

Die Kernidee ist nicht "schöner konfigurieren", sondern "mehr Output pro Minute":

- schneller von Idee zu benutzbarer Oberfläche
- Varianten ohne Neubauen erzeugen
- bestehende Styles importieren statt neu malen
- Ergebnisse direkt teilen, veröffentlichen oder in andere UIs schieben
- aus einem Editor gleich mehrere wiederverwendbare Templates gewinnen

## Output-First-Regel

Wenn du zwischen schöner Technik und mehr Nutzwert wählen musst, priorisiere Nutzwert.

In dieser Reihenfolge optimieren:

1. Wiederverwendbarkeit
2. Geschwindigkeit
3. Sichtbarer Output
4. Export-/Share-Fähigkeit
5. visuelle Perfektion

Das Ziel ist, dass der User nach kurzer Zeit mehrere verwendbare Web-Templates, Theme-Varianten oder Dashboard-Screens in der Hand hat, nicht nur einen Editor.

## Zielbild

Übernimm nicht blind die komplette tweakcn-Oberfläche. Übernimm den Mechanismus:

1. Links oder oben: editierbare Design-Tokens.
2. Rechts oder unten: echte Live-Vorschau mit mehreren Preview-Szenen.
3. Persistenz: Import, Save, Share, Code/Export.
4. Brücken: stabile URL oder JSON/CSS-Endpunkte, damit andere Tools dieselbe Vorlage laden können.
5. Template-Ausbeute: aus einem Theme direkt mehrere nutzbare Zielansichten ableiten.

Wenn Zeit oder Scope knapp ist, liefere zuerst das kleinste brauchbare Paket:

- Token-Editor
- Live-Preview
- Import/Export
- sharebare Zustands-URL oder gespeicherte Vorlage
- mindestens 3 produktive Preview-Szenen, die realen Nutzen haben

## Mechanik, die von tweakcn übernommen werden soll

Das übertragbare Muster ist:

- Token-basierte Bearbeitung statt freiem Herumdoktern an Einzelkomponenten.
- Mehrere Token-Gruppen, typischerweise Farben, Typografie und sonstige Designparameter.
- Sofortige Vorschau auf echten UI-Beispielen statt nur auf einem Farbfeld.
- Import vorhandener CSS-Variablen, damit bestehende Systeme nicht neu von vorne gebaut werden müssen.
- Export in mindestens zwei Formen: menschenlesbarer Code und maschinenlesbares Austauschformat.
- Share-/Save-Mechanik mit stabiler URL.
- "Open in ..."-Brücke zu einem Zielsystem, das dieselben Tokens als Quelle akzeptiert.
- Ein Theme erzeugt nicht nur einen Screen, sondern mehrere brauchbare Template-Ausgaben.

## Vorgehen

### 1. Zielsystem zuerst verstehen

Vor Implementierung kurz prüfen:

- Welche OpenClaw-Fläche ist gemeint: Dashboard, Website, eingebettete Tool-Seite, FAQ, Canvas oder anderes?
- Gibt es bereits CSS-Variablen, Theme-Tokens oder ein bestehendes Design-System?
- Wird nur ein Theme-Editor gebraucht oder ein allgemeiner Template-Editor mit Layout-Varianten?
- Soll die Vorschau im selben UI laufen oder auf echte Zielseiten gespiegelt werden?
- Welcher Output zählt wirklich: Landingpage, Dashboard, FAQ-Seite, Admin-Screen, Kartenansicht, Formular, Angebotsseite?

Wenn bereits ein Design-System existiert, erweitere es. Nichts Doppeltes aufbauen.

### 2. Zuerst die produktiven Templates festlegen

Bevor du Controls baust, definiere die 3 bis 5 Screens, die am meisten Nutzwert liefern.

Bevorzugt:

- Dashboard-Startseite
- Formular-/Dialog-Flow
- Landing-/Angebotsseite
- Karten-/Listenansicht
- Detailseite oder Einstellungen

Regel:

- Preview-Szenen sind keine Deko.
- Jede Preview sollte als echter Template-Output weiterverwendbar sein.

### 3. Token-Schema definieren

Lege zuerst ein kanonisches Token-Modell fest. Standardfelder:

- Farben: `background`, `foreground`, `primary`, `primary-foreground`, `secondary`, `accent`, `muted`, `destructive`, `border`, `input`, `ring`
- Optional: `card`, `popover`, `sidebar-*`, `chart-*`
- Typografie: `font-sans`, `font-serif`, `font-mono`, `letter-spacing`
- Form: `radius`
- Raum: `spacing`
- Tiefe: `shadow-*`
- Modi: `light` und `dark`

Regel:

- Ein zentrales Objekt ist die Source of Truth.
- Alle Controls schreiben nur in diese Struktur.
- Preview, Export und Persistenz lesen nur aus dieser Struktur.

## 4. Editor-UI bauen

Empfohlene Struktur:

- Action-Bar mit `Import`, `Share`, `Save`, `Code`
- Token-Panel mit Tabs wie `Colors`, `Typography`, `Other`
- Preview-Panel mit umschaltbaren Vorschau-Szenen
- optional `Templates`-Tab, wenn mehrere Layout-Familien existieren

Wichtige UX-Regeln:

- Änderungen sofort anwenden.
- Light/Dark ohne Kontextverlust umschalten.
- Reset auf Preset oder letzten gespeicherten Stand ermöglichen.
- Unsaved-Changes erkennbar machen.
- mit einem Klick von Preview zu nutzbarem Template-Code springen

## 5. Preview nicht als Deko behandeln

Die Vorschau muss repräsentativ sein. Mindestens 3 Szenen anbieten:

- Karten/Widgets
- Formular/Dialog oder Mail/Settings
- Dashboard/Tabelle oder Pricing/Landing-Section

Besser als generische Platzhalter sind echte OpenClaw-Komponenten oder echte Zielseiten-Fragmente.

Wenn möglich:

- Vollbildmodus
- Inspector-Modus, der bei Hover die betroffene Komponente oder Token-Gruppe sichtbar macht
- Preview-Auswahl über Tabs oder Pills
- direkter Sprung `Open in ...` in das Zielsystem

## 6. Import übernehmen

Importiere vorhandene Themes bevorzugt über CSS-Variablen.

Minimalanforderung:

- `:root { --token: ... }`
- `.dark { --token: ... }`

Import-Workflow:

1. Rohtext entgegennehmen.
2. Auf Variable-Definitionen prüfen.
3. Light- und Dark-Werte parsen.
4. In das interne Token-Schema mappen.
5. Preview sofort aktualisieren.

Wenn das Zielsystem schon Theme-JSON nutzt, zusätzlich JSON-Import anbieten.

## 7. Export sauber trennen

Mindestens drei Output-Wege anstreben:

- Code-Export für Menschen:
  - CSS-Variablen
  - bei Bedarf zusätzliche Konfig-Dateien oder Layout-Snippets
- Registry-/JSON-Export für Tools:
  - stabiler Endpoint
  - maschinenlesbares Format
  - CORS-fähig, wenn externe Verbraucher zugreifen sollen
- Template-Export für direkte Nutzung:
  - HTML-/TSX-/Komponenten-Snippets
  - gespeicherte Template-Ansichten
  - referenzierbare Presets

Regel:

- Der Export darf nie eine zweite Wahrheit sein.
- Er wird immer aus dem zentralen Token-Objekt generiert.
- Alles, was der User in der Preview sieht, muss in irgendeiner Form nutzbar exportierbar sein.

## 8. Share- und Bridge-Mechanik bauen

Das ist der eigentliche tweakcn-Hebel.

Empfehlung für OpenClaw:

- Eine sharebare URL für gespeicherte Vorlagen
- Eine Editor-URL für Presets oder Entwürfe
- Eine Maschinen-URL für JSON/CSS-Export
- Optional eine `Open in ...`-Brücke zu einem anderen OpenClaw-UI, Canvas oder externen Ziel
- Optional eine `Duplicate as template`-Funktion für schnelle Varianten

Faustregel:

- URL ist Quelle für Wiederherstellung.
- Export-Endpoint ist Quelle für Automatisierung.
- Preview-Ziel lädt immer über stabile IDs statt über kopierten Inline-Code.

## 9. Persistenz

Wenn der Scope über einen Throwaway-Prototyp hinausgeht:

- Gespeicherte Vorlagen mit ID
- Entwürfe vs veröffentlichte Vorlagen unterscheiden
- Presets und usergespeicherte Templates getrennt halten
- Template-Familien oder Kategorien zulassen, wenn dadurch Wiederverwendung steigt
- Community-/Katalog-Ansicht nur dann bauen, wenn der User sie wirklich will

## 10. Output-Maximierung im Alltag

Wenn du diese Skill praktisch anwendest, liefere standardmäßig mehr als nur den Editor:

- mindestens ein brauchbares Default-Preset
- mindestens drei produktive Preview-Szenen
- einen Importpfad für vorhandene Styles
- einen Share- oder Save-Pfad
- einen Code-/JSON-Export
- nach Möglichkeit 1 bis 3 sofort nutzbare Template-Varianten

Beispiele für gute Ausbeute:

- ein Theme plus Dashboard-, Landingpage- und Formular-Variante
- ein Dashboard-Template plus helle und dunkle Version
- ein Grundlayout plus Presets fuer `neutral`, `bold`, `compact`

## 11. Validierung

Vor "fertig" immer prüfen:

- Ändert ein Token sichtbar die Vorschau?
- Funktioniert Light und Dark?
- Importiert ein realistischer CSS-Block korrekt?
- Erzeugt Export reproduzierbare Ergebnisse?
- Lädt die Share-URL den gleichen Stand?
- Funktioniert die Bridge im Zielsystem wirklich?
- Mobil und Desktop beide benutzbar?
- Entsteht realer Output oder nur Editor-Infrastruktur?

## Minimaler Bauplan für OpenClaw

Wenn der User schnell Resultate will, so bauen:

1. Kanonische Theme-Token als JSON oder TS-Modul anlegen.
2. 3 bis 5 produktive Ziel-Templates festlegen.
3. Controls für Farben, Schrift, Radius, Spacing bauen.
4. Preview mit echten OpenClaw-Szenen anbinden.
5. CSS-Import hinzufügen.
6. Code-Panel für CSS, JSON und Template-Snippets hinzufügen.
7. Sharebare URL oder gespeicherte Template-ID einführen.
8. Mindestens ein Default-Preset und mehrere Varianten mitliefern.
9. Erst danach zusätzliche Extras wie AI-Generierung, Community, Figma oder externe Bridges ergänzen.

## Was nicht getan werden soll

- Keine rein kosmetische Oberfläche ohne stabile Token-Quelle.
- Keine Exportfunktion, die andere Werte ausgibt als die Preview zeigt.
- Keine Preview mit nur einem einzelnen Button als Scheinsicherheit.
- Keine zweite Theme-Logik neben einem bestehenden Design-System aufbauen.
- Keine harte tweakcn-Kopie, wenn OpenClaw bereits andere Navigations- oder Speicherlogik hat.
- Keine Editor-Arbeit ohne brauchbare Vorlagen als Ergebnis.

## Wann diese Skill besonders passt

Diese Skill passt bei Wünschen wie:

- "Bau mir einen visuellen Theme-Editor"
- "Ich will tweakcn für meine OpenClaw-Seiten"
- "Mach eine live editierbare Template-Vorschau"
- "Importiere bestehende CSS-Variablen und generiere daraus Themes"
- "Ich will Share/Save/Code für meine Web-Templates"
- "Ich will aus einem Editor direkt mehrere verwendbare Seitenvarianten"

## Referenzen laden bei Bedarf

Wenn Details zur tweakcn-Mechanik gebraucht werden, lies:

- `references/tweakcn-mechanism.md`
