Leitfaden für KI

Hauptanweisung für die KI

Handle als UI-Designer und Theme-Entwickler für CubicLauncher. Erstelle ein funktionsfähiges V2-Theme auf Grundlage des Bildes und des gewünschten Stils. Liefere das Paket und eine kurze Beschreibung. Beschränke dich nicht darauf zu erklären, wie es geht, wenn du die Dateien erzeugen kannst.

Prüfe zuerst die offizielle Dokumentation und, falls es Widersprüche gibt, gleiche die Beispiele mit dem Code der Zielversion ab. Erfinde keine TOML-Felder, CSS-Variablen, Selektoren oder Icon-Namen. Bewahre die Funktionen des Launchers: Instanzauswahl, Ausklappen der Sidebar, Steuerelemente, Menüs und Navigation.

Analysiere die Referenz, um eine eigene visuelle Identität aufzubauen. Das Bild soll die Palette, den Kontrast, die Formen und einige Icon-Details beeinflussen. Vermeide es, dasselbe generische Design nur durch einen anderen Wallpaper zu verwenden.

Für diesen Stil gelten – sofern der Nutzer nichts anderes verlangt – folgende Vorgaben:

• Minimalistisches Design mit sichtbaren Hintergründen und lesbarem Text.
• Kein Blur und keine unscharfen Glaseffekte.
• Ein kleiner Satz eigener Icons, hauptsächlich für die Sidebar.
• Dezente Animationen bei Interaktion, ohne fortlaufende dekorative Effekte.
• Original-Logos von Minecraft, Loadern und Anbietern bleiben erhalten.
• Lokale Ressourcen und ein kleines Paket, ohne dass beim Anwenden Downloads nötig sind.

Quellen, die du konsultieren solltest

• Offizieller Theme-Leitfaden
• V2-Leser und -Konvertierung
• Import, Laden und Validierung von Ressourcen
• Basis-Variablen für die Darstellung
• Anwendung des Themes im Frontend
• Icon-Registry
• Icon-Renderer

Wenn du Zugriff auf das Repository hast, sieh dir auch src/styles/shared/layout.css, src/styles/shared/perf.css und die Komponenten an, die du anpassen möchtest. Halte die eingesehene Version bzw. den Commit fest. Behaupte keine Kompatibilität mit Versionen, die du nicht überprüft hast.

Referenz in visuelle Entscheidungen übersetzen

Bevor du CSS schreibst, lege fest:

Beispiel einer künstlerischen Richtung: Für eine Klassenzimmer-Szene im Abendlicht nutzt du Kakao für Panels, pudriges Rosa für Akzente und Elfenbein für Texte. Ein Brillenmotiv kann in Vorschau oder Suche auftauchen, während die übrigen Icons erkennbar bleiben.

Übernimm diese Palette nicht automatisch für ein anderes Bild. Verdecke die Figur nicht mit einem übermäßig dunklen Overlay. Bewahre das Seitenverhältnis des Bildes und entferne nicht seine Signatur.

Dateien des Pakets

Nimm diese Dateien in einen einzigen Theme-Ordner auf:

Verwende relative Pfade mit /, einfache Namen und exakt dieselbe Groß-/Kleinschreibung wie die Dateien. Füge keine Pfade deines Computers oder Verweise auf Ressourcen ein, die du nicht mitlieferst.

Wichtiger Fehler: umhüllende TOML-Tabellen

Im eingesehenen Leser wird Meta.toml direkt als ThemeMeta interpretiert und Definition.toml als ThemeDef. Daher gilt:

• Meta.toml trägt name, author usw. auf der obersten Ebene, ohne [meta].
• Definition.toml trägt [colors], [background] usw. ohne Präfix theme..

Einige Beispiele der Dokumentation zeigen [meta] und [theme.colors]. Übernimm sie nicht ohne Prüfung des Lesers: Sie können missing field name verursachen oder dazu führen, dass Definitionen ignoriert werden und der Standardstil erscheint. Die umhüllenden Strukturen, die in Tests mit einem vollständigen Objekt verwendet werden, bedeuten nicht, dass die getrennten Dateien sie tragen müssen.

Beispiel für Meta.toml

name = "Mein Theme"
author = "DeinAlias"
version = "1.0.0"
description = "Eine kurze Beschreibung der visuellen Identität."
injects_css = true

Verwende einen kurzen Namen. Wenn die Zielversion Grenzen vorgibt, prüfe sie im Validator; behandle eine Längenempfehlung nicht als universelle Grenze.

Variablen und Präfixe

Schreibe kein -- in die TOML-Schlüssel. Der Launcher fügt die Präfixe hinzu:

[background] konfiguriert das Bild; es erzeugt über diesen Mechanismus keine Variablen. Vermeide es, dieselbe Variable aus mehreren Abschnitten zu definieren: zum Beispiel kollidieren [colors] bg-card und [backgrounds] card.

Die Maps für Farben, Text, Rahmen, Layout, Schatten und andere Werte erwarten Strings. Die Werte von [backdrop] sind Zahlen, zum Beispiel modal = 0.0, nicht modal = "0px".

Basis für Definition.toml

Diese Basis zeigt die korrekte Struktur. Passe die Werte an und erweitere die Zustände mit den Variablen der Zielversion. Du musst die Datei background.jpeg liefern.

[background]
reference_path = "background.jpeg"
image_blur = 0.0
image_opacity = 0.85

[colors]
bg-main = "#201b1b"
bg-sidebar = "#282122"
bg-sidebar-gradient = "linear-gradient(180deg, #302627, #231f20)"
bg-card = "rgba(40,33,34,0.94)"
bg-input = "#251f20"
bg-item-active = "#463236"
bg-overlay = "rgba(18,14,15,0.72)"
bg-surface = "#33292b"
accent = "#e6b1a8"
accent-rgb = "230, 177, 168"
accent-hover = "#f2c5b9"
accent-text = "#2b2021"
accent-primary = "#e6b1a8"
surface-rgb = "230, 177, 168"
surface-hover = "rgba(230,177,168,0.12)"
surface-active = "rgba(230,177,168,0.18)"
surface-selected = "#3d2d31"
surface-card = "rgba(40,33,34,0.94)"
surface-input = "#2c2425"
surface-dropdown = "#302628"
scrollbar-track = "transparent"
scrollbar-thumb = "#76575a"
scrollbar-thumb-hover = "#c4928c"

[text]
primary = "#f7e9df"
secondary = "#d5bdb5"
muted = "#b99f9b"
tertiary = "#b99f9b"

[borders]
color = "#594246"
radius = "12px"
radius-sm = "7px"

[layout]
sidebar-width = "248px"
font-size-base = "14px"

[backdrop]
modal = 0.0
dropdown = 0.0
panel = 0.0
overlay = 0.0
float = 0.0
viewer = 0.0

[others]
border = "#594246"
icon-filter = "none"

Vervollständige auch die Farben für Benachrichtigungen, Fehler, Warnungen und Ausführungszustände, wo nötig. Opfere ihre Bedeutung nicht, nur um einen einzigen Akzent zu verwenden.

Scharfer Hintergrund und lesbare Oberflächen

image_blur = 0.0 entfernt den für das Bild konfigurierten Weichzeichner, aber nicht unbedingt den, den eine Komponente selbst anwendet. Im eingesehenen Code gibt es einen festen backdrop-filter: blur(12px) in der Instanz-Kopfzeile.

Wenn der Nutzer null Blur im gesamten Theme verlangt, ist dieser Block bewusst global:

*, *::before, *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html .background-overlay {
  filter: none !important;
  background-position: 64% center;
}

Der Selektor des Hintergrunds entfernt außerdem die brightness()-Abdunklung des eingesehenen Basisstils. Passe die Deckkraft an und füge bei Bedarf einen lokal begrenzten statischen Verlauf hinzu, um die Lesbarkeit zu erhalten. Der Wert 64% ist ein Beispiel: Wähle die Position passend zur Komposition.

Wende filter: none nicht auf alle Elemente an: Du könntest unbeabsichtigt die Behandlung von Icons oder anderen Zuständen verändern. Verwende für schwebende Panels ausreichend opake Oberflächen; das Entfernen des Blurs darf Menüs und Texte nicht unleserlich machen.

Eigene Icons, die tatsächlich angewendet werden

Prüfe den Bezeichner in registry.ts und in der Komponente, die ihn verwendet. Nimm nicht an, dass alle Schaltflächen der Sidebar eine Gruppe sidebar nutzen.

In dieser Durchsicht geprüfte Bezeichner:

Eine Komponente, die ihr SVG direkt importiert, reagiert möglicherweise nicht auf die Icon-Registry. Versprich keinen Ersatz, ohne dies zu prüfen.

Beispiel, das du nur dann zu Definition.toml hinzufügst, wenn du diese Ressourcen mitlieferst:

[icons]
preview = "icons/preview.svg"

[icons.nav]
create = "icons/create.svg"
settings = "icons/settings.svg"

[icons.ui]
download = "icons/download.svg"
search = "icons/search.svg"

Zeichne einfache SVGs mit einheitlichem viewBox – zum Beispiel 0 0 24 24 – und lesbaren Strichen bei 14–20 px. Vermeide Skripte, entfernte Ressourcen und winzige Details.

Der eingesehene Renderer behandelt SVGs als Masken: Nur ihre Silhouette zählt, die Farbe liefert die Oberfläche. Erwarte nicht, dass ein mehrfarbiges SVG in diesen Steuerelementen mehrfarbig erscheint. Prüfe geerbte Filter, wenn Icons schwarz oder invertiert erscheinen; beschränke die Korrektur auf das betroffene Steuerelement.

Bewahre die Marken von Modrinth, CurseForge, Vanilla, Fabric, Forge, NeoForge und Quilt, außer es wird ausdrücklich verlangt. Ein eigenes Theme muss nicht alle Icons ersetzen.

Leichte Animationen

Bevorzuge Reaktion auf Hover, Klick oder Auswahl. Als Ausgangspunkt nutze 120–200 ms und Verschiebungen von 1–2 px.

• Animiere bevorzugt transform und opacity.
• Animiere nicht fortlaufend Blur, große Schatten, Hintergründe oder Layout-Dimensionen.
• Vermeide transition: all, Partikel, Parallax und unendliche dekorative Pulsierungen.
• Füge kein dauerhaftes will-change zu Listen oder vollständigen Panels hinzu.
• Bewahre die funktionalen Ladeanzeigen.
• Respektiere sowohl die Systemeinstellung als auch die Option des Launchers.

Beispiel auf Basis geprüfter Selektoren:

@keyframes theme-selection {
  from { opacity: .72; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-reduce-motion]) .sidebar .tools-btn .icon-svg {
    transition: transform 150ms ease-out;
  }

  html:not([data-reduce-motion]) .sidebar .tools-btn:hover .icon-svg {
    transform: translateY(-1px) rotate(-5deg);
  }

  html:not([data-reduce-motion]) .sidebar .tools-btn:active .icon-svg {
    transform: scale(.92);
  }

  html:not([data-reduce-motion]) .instance-item.active {
    animation: theme-selection 180ms ease-out 1;
  }
}

Dieser Block ist ein Teilbeispiel: Passe ebenso die Steuerelemente des kompakten Modus an, die tatsächlich existieren. Verschiebe nicht die Schaltfläche zum Ausklappen oder Einklappen und ändere nicht ihre Abmessungen oder Position, um Feedback zu geben. Animiere bei Bedarf ein inneres Icon.

Behaupte keine FPS-Verbesserung, ohne sie gemessen zu haben. Du darfst sagen, dass kostspielige Effekte vermieden wurden und die Animationen kurz sind, aber unterscheide diese Entscheidung von einem Performance-Nachweis.

Verhalten der Oberfläche schützen

Verwende Variablen für allgemeine Änderungen und spezifische Selektoren für Ausnahmen. Vermeide globale Regeln auf button, aside, img oder div, die Größen, Positionen oder Transformationen ändern.

Prüfe insbesondere:

• Sidebar ausgeklappt und kompakt, mit den Steuerelementen an ihrer ursprünglichen Position.
• Normale, ausgewählte, angeheftete und laufende Instanzen.
• Schaltflächen normal, Hover, gedrückt, deaktiviert und mit Tastaturfokus.
• Formulare, Menüs, Dialoge, Fehler, Downloads und Benachrichtigungen.
• Lesbarer Text auf den hellsten Bereichen des Wallpapers.

Erscheint die Auswahl als weißes Rechteck, prüfe --accent, --surface-selected, --surface-active und die Pseudo-Elemente der Komponente. Ändere die Oberfläche oder den konkreten Indikator; verstecke nicht undifferenziert die Pseudo-Elemente und entferne nicht den Auswahlzustand.

Ressourcen und Typografie

In der eingesehenen Implementierung unterstützt der Hintergrund bis zu 25 MiB und rasterisierte Icons bis zu 2 MiB. Das sind Grenzen, keine empfohlenen Größen. Ein einfaches SVG und ein gut komprimiertes Bild reichen meist aus.

Bewahre das Originalbild, wenn es bereits eine vernünftige Größe hat. Komprimiere es nicht mehrfach und verändere die Illustration nicht ohne Not. Stelle sicher, dass das tatsächliche Format zur Erweiterung passt.

Wenn keine eigene Schrift verlangt wird, kannst du die des Launchers behalten. Wenn du eine einbindest, prüfe ihre Lizenz, nimm die Datei und erforderliche Hinweise auf und prüfe spanische Zeichen. Deklariere nur Dateien, die tatsächlich existieren:

[[fonts]]
family = "MeineSchrift"
src = "fonts/MeineSchrift-Regular.woff2"
format = "woff2"
weight = "400"
style = "normal"

Die Variable font-family aus [others] muss denselben Namen und einen Fallback verwenden. Deklariere keine Schriftschnitte, die du nicht mitgeliefert hast oder die die variable Schrift nicht abdeckt.

Validierung vor der Abgabe

Statische Prüfung

1. Analysiere beide TOML mit einem echten Parser, zum Beispiel tomllib aus Python 3.11 oder höher.
2. Prüfe, dass name auf oberster Ebene steht und dass die visuellen Abschnitte ebenfalls keine theme-Umhüllung haben.
3. Verifiziere, dass alle Pfade zu Bildern, Icons und Schriften innerhalb des Ordners existieren.
4. Prüfe SVGs mit einem XML-Parser und Bilder mit einem Decoder.
5. Suche nach Kollisionen zwischen Variablen und nach Icon-Namen, die nicht existieren.
6. Validiere die CSS-Syntax; Klammern zu zählen ersetzt keinen Parser oder Browser.
7. Prüfe den Inhalt der ZIP und ihre Integrität.

Prüfung im Launcher

Importiere das Paket und teste die Zustände aus Abschnitt IX. Prüfe wenn möglich auch ein kleines Fenster, etwa 1366 × 768, und ein großes. Aktiviere die Bewegungsreduzierung, um zu prüfen, dass deine Effekte deaktiviert werden.

Ein HTML-Mockup kann helfen, Farben zu prüfen, beweist aber nicht, dass das Theme innerhalb von Tauri funktioniert. Wenn du es nicht ausführen kannst, sage es in der Abgabe klar: „Statisch validiert; visuelle Prüfung im Launcher steht aus.“

Erfinde keine Screenshots oder Testberichte.

Verpackung und Abgabe

Erstelle eine ZIP mit einer einzigen Theme-Definition. Für diesen Ablauf wird die ZIP mit der Erweiterung .cbth abgegeben; prüfe die vom Importeur der Zielversion akzeptierten Erweiterungen. Der offizielle Leitfaden dokumentiert auch die Verteilung als .zip.

Beispiel für eine reproduzierbare Verpackung, ausgeführt neben dem Ordner MiTema:

from pathlib import Path
from zipfile import ZipFile, ZIP_DEFLATED

root = Path("MiTema")
assert (root / "Meta.toml").is_file()
assert (root / "Definition.toml").is_file()

with ZipFile("MiTema.cbth", "w", ZIP_DEFLATED) as archive:
    for path in sorted(root.rglob("*")):
        if path.is_file():
            archive.write(path, path.relative_to(root.parent))

with ZipFile("MiTema.cbth") as archive:
    assert archive.testzip() is None

Füge weder das Repository des Launchers noch Caches, Abhängigkeiten oder temporäre Dateien ein. Halte theme.md kurz: visuelle Identität, Installation, Credits und reale Einschränkungen. Wenn du dasselbe Theme aktualisierst, bewahre seine Identität und erhöhe die Version; prüfe, wie der Launcher Duplikate behandelt.

Die endgültige Antwort soll die Datei, eine kurze Zusammenfassung der Änderungen und den Umfang der Tests enthalten. Veröffentliche nichts und öffne keinen Pull Request, es sei denn, der Nutzer verlangt es.

Prompt für die KI

Erstelle ein vollständiges V2-Theme für CubicLauncher nach dem beigefügten Leitfaden und der offiziellen Dokumentation. Nutze das beigefügte Bild als Hintergrund und passe das Design an [Anime, Figur oder Ästhetik] an. Ich möchte ein minimalistisches, stimmiges und erkennbares Ergebnis: ohne Blur, mit guter Lesbarkeit, einigen eigenen SVG-Icons für die Sidebar und kurzen, optimierten Animationen. Bewahre die Logos der Loader und Anbieter. Prüfe das tatsächliche TOML-Schema, die Icon-Bezeichner und die Pfade aller Ressourcen. Liefere das importierfähige Paket und ein kurzes theme.md. Gib an, was du geprüft hast und was aussteht; behaupte nicht, den Launcher getestet zu haben, wenn du ihn nicht ausgeführt hast.