UI-Designs (Themes)

Jedes Theme ist ein Ordner in themes/. Ein Theme enthält Farbtokens, gemeinsame Klassen, einen Satz Akzentfarben und eine Beispielseite. Jedes Theme verwendet dieselben Token-Namen. Ein Theme zu wechseln bedeutet, die CSS-Dateien auszutauschen, nicht das HTML zu bearbeiten.

Ordnernamen und Dateinamen sind auf Vietnamesisch (das Kit wurde in Vietnam erstellt). Die README enthält ein Glossar.

Wann verwenden

Erstellen eines Mockups oder einer neuen Seite oder App-Bildschirms.
Der Benutzer sendet einen Screenshot, einen Produktnamen oder eine URL und möchte dieses Aussehen. Siehe them-theme.md.
Der Benutzer sagt „use theme X“, „switch the accent to Y“, „dark mode“.

Der Stil des Besitzers

Lesen Sie phong-cach-owner.md, bevor Sie ein neues Theme zeichnen oder erstellen. Kurz gesagt: ein helles, kompaktes SaaS-Dashboard mit vielen Zahlen und einer Akzentfarbe, Blau oder Lila. Die Quelle ist eine Reihe von Apps, die der Besitzer als Referenzen gespeichert hat.

Themes

Theme	Aussehen	Status
clickup-radar	ClickUp-ähnliche Seitenleiste, Karten der Szenariobibliothek, hell und kompakt, lila Akzent	Genehmigt 2026-11-03
saas-sang	Stil des Besitzers: helles SaaS, große Zahlen, blauer Akzent, eine Beispielseite pro Thema	Genehmigt 2026-11-04

themes/_mau ist eine leere Vorlage für neue Themes. Verwenden Sie sie nicht zum Zeichnen.

Welches Projekt welches Theme verwendet

Lesen Sie du-an.md in diesem Ordner, falls vorhanden. Es ist eine private Datei des Besitzers (gitignored), die seine Projekte einem Theme, einem Thema und einem Akzent zuordnet und seine Kopierkonventionen (UI-Sprache, Anrede des Benutzers) enthält. Befolgen Sie sie, ohne erneut zu fragen.

Kein du-an.md: Kopieren Sie du-an.example.md in du-an.md, sobald der Besitzer ein Theme für ein Projekt festlegt, und füllen Sie es aus. Wenn der Besitzer ein Theme für ein Projekt festlegt, aktualisieren Sie sofort du-an.md.

Themen und Beispielseiten (Theme saas-sang)

Wählen Sie für eine neue Seite das nächstgelegene Thema, kopieren Sie dessen Beispielseite und entfernen Sie dann, was Sie nicht benötigen.

Thema	Beispielseite	Standardakzent	Geeignet für
Berichte, Analysen	`themes/saas-sang/chu-de/bao-cao.html`	blau (`xanh-duong`)	Dashboards, KPIs, Traffic- und Produktanalysen
Aufgaben	`themes/saas-sang/chu-de/cong-viec.html`	lila (`tim`)	Aufgabenboards, Tickets, Projektverfolgung
Vertrieb	`themes/saas-sang/chu-de/ban-hang.html`	indigo (`cham`)	Shop-Admin, Bestellungen, Zahlungen, Lager
Nachrichten, Lesen	`themes/saas-sang/chu-de/tin-tuc.html`	blau (`xanh-duong`)	Newsletter, Blogs, kuratierte Feeds
Landing Page	`themes/saas-sang/chu-de/landing.html`	indigo (`cham`)	Produkt- und Marketingseiten
Anmelden, Registrieren	`themes/saas-sang/chu-de/dang-ky.html`	indigo (`cham`)	Authentifizierungsbildschirme jeder App

Indexseite: themes/saas-sang/vi-du.html.
chu-de/chung.js ist nur für die Beispielseiten. Es liest ?mode= und ?accent=, zeichnet Symbole aus <i data-i>, und fügt unten rechts eine Giao diện (Erscheinungsbild)-Schaltfläche hinzu: Hell/Dunkel/System, 8 Akzente, Sprache und einen Link zu bang-chon.html. Die Auswahl wird in localStorage saas-sang-xem gespeichert. Wenn Sie eine Seite in ein echtes Projekt kopieren, entfernen Sie chung.js: Fügen Sie die SVGs inline ein oder verwenden Sie Lucide, und bauen Sie den eigenen Theme-Umschalter des Projekts auf Basis von tokens.css.
saas-sang hat zusätzliche Tokens (--chart --chart-2 --grid --acc2 --acc2-soft --deep* --scrim), siehe die Theme-README.
Neue Klassen (KPI, Diagramme, gruppierte Tabellen, Dialoge, Nachrichten, Landing, Anmeldung) befinden sich in themes/saas-sang/components.md.

Sprache

UI-Kopien folgen der Sprache des Projekts (festgelegt in du-an.md). Ohne Einstellung verwenden Sie die Sprache, in der der Benutzer schreibt.
Beispielseiten sind auf Vietnamesisch verfasst. themes/i18n.js mit dem Wörterbuch themes/i18n-en.js übersetzt sie im Browser ins Englische.
Welche Sprache angezeigt wird: zuerst ?lang=en|vi, dann localStorage ui-lang, dann die Browsersprache (vi* ergibt Vietnamesisch, alles andere Englisch).
Umschalter: die Zeile „Ngôn ngữ / Language“ im Giao diện-Panel auf saas-sang-Seiten und die Schaltflächen VI | EN in der oberen Leiste von bang-chon.html, die ?lang= an die Vorschau übergeben.
Es übersetzt Text, placeholder, title, aria-label und den Seitentitel und achtet auf später hinzugefügte Inhalte.
Neuer oder geänderter vietnamesischer Text auf einer Beispielseite: Fügen Sie die genaue Zeichenfolge und ihre englische Übersetzung zu themes/i18n-en.js hinzu, öffnen Sie dann die Seite mit ?lang=en und prüfen Sie, ob kein Vietnamesisch mehr vorhanden ist.
i18n ist nur für die Demo. Ein echtes Projekt kopiert i18n.js nicht; schreiben Sie die Kopie in seiner eigenen Sprache.

Auswählen eines Themes

Das Projekt ist in du-an.md: Verwenden Sie dieses Theme und diesen Akzent. Fragen Sie nicht erneut.
Der Benutzer hat in der Nachricht ein Theme oder einen Akzent genannt: Führen Sie dies aus.
Keines von beidem: Stellen Sie eine kurze Frage im Chat, mit jeder Option in der Frage, in der Sprache des Benutzers. Beispiel:

Dieses Projekt hat noch kein Theme. Verwenden Sie clickup-radar (hell, kompakt, lila Akzent), saas-sang (Ihr Stil, blauer Akzent), oder möchten Sie einen Screenshot eines anderen Aussehens senden? clickup-radar-Akzente: lila, blau, himmelblau, blaugrün, grün, orange, pink, anthrazit. saas-sang-Akzente: blau, lila, indigo, himmelblau, blaugrün, grün, orange, anthrazit.
Der Benutzer möchte Farben auswählen und anpassen: Öffnen Sie das Palette-Board (unten).

Palette-Board

themes/bang-chon.html. Eine Palette ist jede Farbe einer Website, nicht die Farben einer Karte.

Layout: Paletten auf der linken Seite, eine verkleinerte Website-Vorschau auf der rechten Seite. Themes mit Themenseiten (saas-sang, das trang und macDinh in THEMES deklariert) zeigen die Vorschau für den gewählten Zweck; andere Themes zeigen vi-du.html. Die obere Leiste enthält den Theme-Auswähler, Hell/Dunkel, VI | EN, Bearbeitungen zurücksetzen und Palette kopieren.
Vorschläge nach Zweck: Zwei Reihen von Schaltflächen oben, „Wofür ist die Seite?“ (Vertrieb, Aufgaben, Berichte, Landing Page, Nachrichten) und „Wie soll sie aussehen?“ (minimal, professionell, warm, hell, gewagt, elegant). Wählen Sie sie aus, und die 3 besten Paletten werden mit einer einzeiligen Begründung nach oben verschoben; die erste wird angewendet, wenn keine Farbe bearbeitet wurde. Klicken Sie erneut auf eine Schaltfläche, um sie zu deaktivieren. Vorschläge stammen aus der Regel-Tabelle GOI_Y auf der Seite (Zweck-Übereinstimmung 2 Punkte, Stil-Übereinstimmung 1 Punkt); die Seite ruft keine KI auf. Um einen Zweck oder Stil hinzuzufügen, bearbeiten Sie MUC, KIEU und GOI_Y.
Auswählen: Jede Palette zeigt ihre 5 Hauptfarben und Hex-Codes an. Klicken Sie auf eine, und die gesamte Website ändert sich. Das Auswählen einer anderen Palette verwirft Ihre Bearbeitungen.
Aktuelle Palette bearbeiten: Klicken Sie auf ein Farbfeld im Streifen oder öffnen Sie „Alle Farben der Site“, um sie nach Gruppe (Hintergründe, Text und Rahmen, Akzent, Status, Beschriftungen) mit der Farbauswahl oder einem Hex-Code zu bearbeiten. Die Seite wird sofort aktualisiert. Jedes Farbfeld zeigt ein Kontrastverhältnis an, rot, wenn es unter 4.5 liegt. Bearbeitete Farben erhalten eine Schaltfläche „Zurücksetzen“.
Hell und Dunkel werden getrennt bearbeitet.
Palette kopieren: Gibt die hellen und dunklen CSS plus einen Satz zum Einfügen in Claude aus. Wenn Sie es erhalten, befolgen Sie them-theme.md, Abschnitt „From the palette board“.

Jede Palette im PHOI-Array speichert nur 4 Basisfarben (Seite, Karte, Text, Akzent) für Hell und Dunkel. Die Funktion tinh() leitet die anderen Hintergründe, Text, Rahmen und Akzentschattierungen ab. Status- und Beschriftungsfarben bleiben wie im Theme. Ein neues Theme muss dem THEMES-Array auf dieser Seite hinzugefügt werden. Die Auswahl des Benutzers wird im Browser gespeichert (Schlüssel phoi-mau).

Vorschau

Stellen Sie den themes-Ordner mit einem beliebigen statischen Server bereit:

python -m http.server 8766 -d themes

Palette-Board: http://localhost:8766/bang-chon.html
Ein Theme: http://localhost:8766/<theme>/vi-du.html?mode=dark&accent=cam
Eine Themenseite: http://localhost:8766/saas-sang/chu-de/<topic>.html?mode=dark&lang=en

Live-Demo: https://huydp93.github.io/ui-theme-skill/themes/bang-chon.html

Gemeinsame Token-Namen

Ein neues Theme muss alle diese definieren, hell und dunkel. Die vollständig kommentierte Liste finden Sie in themes/_mau/tokens.css.

Gruppe	Tokens
Hintergrund, Text	`--bg --side --surface --sunk --hover --line --line-strong --fg --fg2 --fg3`
Akzent	`--acc --acc-hover --acc-fg --acc-soft --acc-line --ink --ink-fg`
Status	`--ok --bad --err-fg --err-bg --code-bg --code-fg`
Schatten	`--shadow --shadow-pop`
Typ-Beschriftungen	`--k-tip --k-tool --k-trend --k-opp --k-news --k-fg`
Status-Pillen	`--s-new --s-watch --s-sent --s-seen` und eine `-bg`-Version von jedem
Radius	`--r-card --r-btn --r-btn-sm --r-badge --r-pill`
Höhe	`--h-btn --h-btn-sm --h-field`
Layout	`--w-side --h-top --w-page`
Schriftart	`--font-sans --font-mono --icon-stroke`

Gemeinsame Klassen (.card, .btn, .nav...) befinden sich in der components.md jedes Themes.

Anwenden eines Themes

Laden Sie immer in dieser Reihenfolge: Schriftart → tokens.css → components.css → mau-nhan.css. Der Schriftart-Link befindet sich oben in der tokens.css jedes Themes.

a) Canvas .dc.html

Fügen Sie tokens.css, components.css und mau-nhan.css in <helmet><style> ein. Ein Canvas kann keine externen Dateien laden.
Fügen Sie den Google Fonts <link> zu <helmet> hinzu.
Wickeln Sie das Board in <div class="t {{mode}}" data-accent="{{accent}}">. Eine dark-Eigenschaft in DCLogic setzt mode auf dark oder leer. Lassen Sie data-accent weg, um den Standardakzent zu verwenden.
Die .t-Klasse setzt die hellen Farben darin zurück, sodass das Board seiner Eigenschaft folgt, selbst wenn der Canvas selbst dunkel ist.

b) Einfaches HTML oder Artifact

Kopieren Sie das CSS in einen <style>-Tag (ein Artifact muss CSS innerhalb der Seite behalten) oder verwenden Sie <link>, wenn die Seite neben dem Theme-Ordner liegt.
Verwenden Sie :root; kein .t-Wrapper ist erforderlich. Setzen Sie data-theme="light|dark" und data-accent="..." auf <html>. Ohne data-theme folgt es dem System.
Layout: Beginnen Sie mit der vi-du.html des Themes (oder einer saas-sang-Themenseite) und entfernen Sie, was Sie nicht benötigen.

c) React + Tailwind

Kopieren Sie tokens.css, components.css, mau-nhan.css in das Projekt und importieren Sie sie einmal in der Root-CSS-Datei.

Ordnen Sie Tailwind-Farben Tokens zu; kopieren Sie keine Hex-Codes:

Tailwind v4, in der Root-CSS:

@theme inline {
  --color-bg: var(--bg); --color-surface: var(--surface); --color-line: var(--line);
  --color-fg: var(--fg); --color-fg2: var(--fg2); --color-fg3: var(--fg3);
  --color-acc: var(--acc); --color-acc-soft: var(--acc-soft);
  --radius-card: var(--r-card); --font-sans: var(--font-sans); --font-mono: var(--font-mono);
}

Tailwind v3, in tailwind.config:

theme: { extend: {
  colors: { bg: 'var(--bg)', surface: 'var(--surface)', line: 'var(--line)', fg: 'var(--fg)',
            fg2: 'var(--fg2)', fg3: 'var(--fg3)', acc: 'var(--acc)', 'acc-soft': 'var(--acc-soft)' },
  borderRadius: { card: 'var(--r-card)' },
  fontFamily: { sans: 'var(--font-sans)', mono: 'var(--font-mono)' }
} }

Fügen Sie die gemeinsamen Klassen in @layer components ein, damit Tailwind-Klassen sie weiterhin überschreiben können.
Ein Hell/Dunkel- oder Akzent-Umschalter muss nur data-theme und data-accent auf document.documentElement setzen.

Regeln

Symbole sind Strich-SVGs, stroke-width von --icon-stroke. Keine Emojis als Symbole.
Zahlen, Zeiten und Code verwenden .mono.
Keine Hex-Codes in Seiten. Benötigen Sie eine neue Farbe? Fügen Sie dem Theme einen Token hinzu.
Rot ist nur für Fehler (--bad). Machen Sie Rot niemals zu einem Akzent.
Helle Akzente müssen dunkel genug sein, damit weißer Schaltflächentext einen Kontrast von 4,5 erreicht.
Mockup-Daten sind Beispieldaten. Verwenden Sie niemals echte Daten oder lesen Sie sie aus .env oder einer Datenbank.
Befolgen Sie die Kopierkonventionen in du-an.md (Sprache, Anrede des Benutzers).
Überprüfen Sie sowohl Hell als auch Dunkel, bevor Sie es dem Benutzer zeigen.

Hinzufügen eines Themes

Siehe them-theme.md.

huydp93/theme-giao-dien

Was ist theme-giao-dien?

In Ihrer bevorzugten KI fragen

Dokumentation