Radix Themes-Designsystem.

Visuelles Theme und Atmosphäre des Radix Themes-Designsystems

Eine Arbeitsoberfläche, keine Moodboard-Sammlung

Radix Themes ist eine nützliche Referenz für Produkte, in denen Menschen lesen, Entscheidungen treffen, Informationen eingeben und zu unerledigter Arbeit zurückkehren. Der visuelle Charakter entsteht durch sorgfältig abgestimmte Abstände, zurückhaltende Oberflächen, eine klare typografische Hierarchie und wiederkehrende Komponentenstatus. Nutzen Sie diesen Leitfaden, um einen Projektarbeitsbereich, einen Kontobereich, einen Einstellungsbildschirm oder einen Datenprüfungsablauf zu erstellen. Ziel ist ein stimmiger Arbeitsbildschirm mit echten Inhalten, keine Sammlung attraktiver Komponenten ohne konkrete Aufgabe.

Den richtigen Ausgangspunkt wählen

Beginnen Sie bei einer React-Anwendung mit dem tatsächlichen Radix Themes-Paket und verwenden Sie dessen Komponenten, bevor Sie eigene Alternativen entwickeln. Für ein visuelles Konzept in einem anderen Stack dienen diese Prinzipien als Referenz; beschreiben Sie das Ergebnis als vom System inspiriert. Radix Themes und Radix Primitives sind unterschiedliche Ausgangspunkte: Dieser Leitfaden behandelt die gestylte Themes-Bibliothek. Ein OpenDesign-Leitfaden macht aus einem beliebigen HTML-Mockup keine native Radix-Implementierung.

An einer konkreten Aufgabe ausrichten

1. Wählen Sie für den ersten Bildschirm eine primäre Aktion, etwa ein Projekt zu erstellen oder Kontoeinstellungen zu speichern.
2. Stellen Sie die für die Entscheidung nötigen Informationen vor der Aktion bereit.
3. Halten Sie Navigation, Objektmetadaten, bearbeitbare Felder und Rückmeldungen visuell klar voneinander getrennt.
4. Gestalten Sie mit realistischen langen Titeln, unterschiedlichen Statuswerten und einem leeren Zustand.
5. Ein Bildschirm, der nur mit drei kurzen Platzhalterbeschriftungen funktioniert, bietet noch kein brauchbares System.

Tonalität und Inhalte

Verwenden Sie kurze, aussagekräftige Beschriftungen, konkrete Verben und direkte Erklärungen. Eine Schaltfläche sollte beschreiben, was als Nächstes geschieht: Änderungen speichern, Mitglied einladen oder Projekt erstellen. Verwenden Sie eine Überschrift für das Thema eines Abschnitts und vermeiden Sie Marketing-Slogans für jedes kleine Bedienelement. Erklären Sie bei einer fehlgeschlagenen Aktion, was die Person korrigieren kann, und bewahren Sie ihre Arbeit. Dies sind redaktionelle Empfehlungen OpenDesign zur Anwendung der Referenz, keine zusätzlichen APIs von Radix.

Radix Themes Farbpalette und Rollen des Designsystems

Markenfarbe und Bedeutung unterscheiden

Theme verwenden, statt Ansichten fest zu codieren

Die offizielle Theme-Konfiguration stellt accentColor und grayColorbereit. Legen Sie sie auf der obersten Ebene fest, damit alle Komponenten dieselben Vorgaben verwenden. Beziehen Sie sich in eigenen Komponenten auf die CSS-Variablen des aktuellen Themes, statt eine Farbe aus einem Screenshot zu übernehmen. Die folgende Token-Referenz enthält eine kompakte, praktische Auswahl. Ein Token bezeichnet eine Rolle innerhalb eines konfigurierten Themes. Es garantiert nicht, dass derselbe Hexadezimalwert im hellen und dunklen Modus sowie bei jeder Akzentfarbe erhalten bleibt.

Hierarchie von Oberflächen und Rahmen

Beginnen Sie mit einem zurückhaltenden Seitenhintergrund. Geben Sie Karten und bearbeitbaren Bereichen nur dann eine eigene Oberfläche, wenn sie zusammengehörige Aufgaben bündeln. Verwenden Sie Trennlinien für Zeilen, die zur selben Liste gehören. Vermeiden Sie es, jedes Element gleichzeitig mit Rahmen, Schatten, getöntem Hintergrund und Badge zu versehen. Auf einer Einstellungsseite ist ein einzelner Bereich mit unterteilten Zeilen meist übersichtlicher als sechs schwebende Karten. Machen Sie die Hierarchie auch bei geringem Kontrast erkennbar, ohne wichtige Texte blass erscheinen zu lassen.

Helle und dunkle Darstellung

Verwenden Sie für native Komponenten die offizielle Einstellung für die Darstellung und prüfen Sie beide Darstellungen mit denselben Inhalten. Leiten Sie einen dunklen Bildschirm nicht durch blindes Umkehren der Farben oder Wiederverwenden von Schatten aus dem hellen Modus ab. Prüfen Sie Overlays, inaktive Felder, Trennlinien, ausgewählte Zeilen und Texte auf Akzentflächen einzeln. Die interaktive Untersuchung auf dieser Seite zeigt eine kleine Auswahl an Theme-Einstellungen. Für die vollständige Bibliothek und ihr natives Verhalten ist der offizielle Playground maßgeblich.

Kontrast und zusätzliche Erkennungsmerkmale

Prüfen Sie nach jeder Änderung an Akzent- oder Oberflächenfarben die endgültigen Kombinationen aus Vorder- und Hintergrundfarbe. Kombinieren Sie bei Statusangaben wie Ausstehend, Abgeschlossen und Fehlgeschlagen Farbe mit Text. Kennzeichnen Sie ausgewählte Optionen zusätzlich mit einem Häkchen oder einem anderen sichtbaren Merkmal. Gehen Sie nicht davon aus, dass eine barrierefreie Komponentenbibliothek jede Kombination aus Inhalt und Theme barrierefrei macht: Beschriftungen, Verschachtelungen, eigene CSS und die Informationsreihenfolge wirken sich weiterhin darauf aus, ob der gesamte Bildschirm nutzbar ist.

Radix Themes Typografische Regeln des Designsystems

Eine durchdachte Lesehierarchie

Geben Sie dem Bildschirm einen klaren Titel und unterscheiden Sie anschließend Überschriften, Fließtext, Feldbeschriftungen und ergänzende Metadaten. Verwenden Sie so wenige Schriftgrößen wie möglich, um diese Beziehungen zu verdeutlichen. Auf umfangreichen Produktbildschirmen sind gut lesbare Beschriftungen wichtiger als übergroße Schautypografie. Platzieren Sie erklärende Absätze nahe bei den Bedienelementen, auf die sie sich beziehen, und lassen Sie Beschriftungen sichtbar, nachdem ein Eingabefeld ausgefüllt wurde. Platzhaltertext ist ein Hinweis, kein Ersatz für eine Feldbeschriftung.

Schriftgrößenskala und Schriftschnitt

Radix dokumentiert eine Typografieskala mit neun Stufen, die jeweils Schriftgröße, Zeilenhöhe und Laufweite kombinieren. Die Referenztabelle auf dieser Seite übernimmt diese Werte für die Grundskala. Wählen Sie eine Stufe als vollständige Kombination, statt eine unpassende Zeilenhöhe damit zu kombinieren. Verwenden Sie für Fließtext den normalen Schriftschnitt und für Überschriften oder ausgewählte Beschriftungen einen kräftigeren. Wird alles fett gesetzt, verschwindet die Hierarchie; ist jeder ergänzende Text zu hell, wird der Bildschirm schwer lesbar.

Schriftwahl und Ersatzschriften

Radix Themes verwendet standardmäßig einen Systemschriftstapel. Behalten Sie diesen bei, wenn Portabilität wichtiger ist als eine bestimmte Markenschrift, oder konfigurieren Sie über den dokumentierten Anpassungsmechanismus eine lizenzierte Schrift. Die umgebende Website OpenDesign verwendet Albert Sans; daraus folgt nicht, dass Albert Sans die offizielle Radix-Schrift ist. Testen Sie für mehrsprachige Anwendungen repräsentative chinesische, japanische und koreanische Texte sowie lange Beschriftungen in europäischen Sprachen mit den tatsächlich verwendeten Ersatzschriften.

Zahlen, Code und Zeilenumbrüche

Richten Sie Zahlenspalten einheitlich aus, damit sich Werte vertikal vergleichen lassen. Verwenden Sie eine Monospace-Darstellung für Code, Kennungen und Tokens, wenn die Zeichengrenzen wichtig sind. Lassen Sie Titel und Beschreibungen natürlich umbrechen. Schneiden Sie wichtige Anweisungen nicht ab, nur um eine einheitliche Kartenhöhe zu bewahren. Für Zeichenfolgen, die tatsächlich nicht umbrechen, etwa eine ID, bieten Sie einen kontrollierten Zeilenumbruch oder eine Kopierfunktion an. Stellen Sie auf Mobilgeräten die vollständige Bedeutung auch dann bereit, wenn sich das Layout ändert.

Die Inhaltslänge ist Teil des Designs

Teste einen langen Projektnamen, eine zweizeilige Mitgliederrolle und eine übersetzte Aktion, bevor du eine Komponente als wiederverwendbar einstufst. Lass Schaltflächen nach Möglichkeit mit ihrem Inhalt wachsen, statt jeder eine feste Breite zu geben. Halte Fließtext auf einer angenehm lesbaren Zeilenlänge. Verwende Listen oder Tabellen, wenn Nutzer parallele Fakten vergleichen müssen. Teile erklärende Texte nicht in viele winzige Schmuckkarten auf, nur damit die Seite stärker gestaltet wirkt.

Radix Themes Designsystem: Gestaltung und Zustände von Komponenten

Schaltflächen und Aktionshierarchie

Bestimme innerhalb einer Aktionsgruppe die wichtigste Entscheidung und hebe sie am stärksten hervor. Sekundäre Aktionen sollten leicht zu finden sein, ohne gleich stark mit ihr zu konkurrieren. Trenne destruktive Aktionen von gewöhnlichen Bestätigungen. Verhindere während der Übermittlung doppelte Vorgänge und zeige den Fortschritt sichtbar an. Zeige nach Abschluss das tatsächliche Ergebnis. Wenn der Grund für eine deaktivierte Schaltfläche nicht aus dem Formular hervorgeht, sollte er verständlich in der Nähe stehen.

Eingaben und Formulare

• Platziere über oder neben jedem Eingabefeld eine dauerhaft sichtbare Beschriftung.
• Platziere Hilfetext neben dem zugehörigen Feld und ordne Validierungsmeldungen direkt diesem Feld zu, statt nur ein allgemeines Banner anzuzeigen.
• Erhalte eingegebene Werte, wenn die Validierung fehlschlägt.
• Fasse zusammengehörige Felder unter einer aussagekräftigen Abschnittsüberschrift zusammen.
• Verwende den passenden Eingabetyp und Autocomplete-Wert, damit Browser und assistive Technologien beim Ausfüllen helfen können.

Karten, Listen und Tabellen

Verwende eine Karte für ein eigenständiges Objekt mit aussagekräftiger Zusammenfassung und Aktion. Verwende eine Liste für eine Reihe ähnlicher Datensätze und eine Tabelle, wenn Nutzer Attribute verschiedener Datensätze vergleichen müssen. Zeige tatsächliche Felder wie Verantwortliche, Aktualisierungszeit und Status statt dekorativer Diagrammfragmente. Eine Karte sollte nicht so anklickbar sein, dass sie mit darin enthaltenen Links oder Schaltflächen konkurriert. Lege ein klares Linkziel fest und erhalte das gewohnte Tastaturverhalten.

Navigation und Auswahl

Halte die globale Navigation von Seitentabs und lokalen Filtern getrennt. Das aktive Ziel muss erkennbar bleiben, ohne sich allein auf die Akzentfarbe zu stützen. Verwende Links für die Navigation und Schaltflächen für Änderungen auf der aktuellen Seite. Wenn du ein Tab-Muster implementierst, berücksichtige auch die Tastaturbedienung. Verwende andernfalls eine klar beschriftete Gruppe gewöhnlicher Schaltflächen. Gestalte keine Reihe optisch interaktiver Spans, die sich tatsächlich nicht bedienen lassen.

Menüs, Dialoge und Overlays

Verwende beim Implementieren eines React-Produkts für komplexes Verhalten die native Komponente der Bibliothek. Ein Dialog benötigt einen Titel, eine eindeutige Möglichkeit zum Schließen, eine angemessene Fokusverwaltung und die Rückkehr zum auslösenden Steuerelement. Erstelle kein Modal aus einer absolut positionierten Karte, der diese Funktionen fehlen. Beschränke den Dialog auf eine einzige Entscheidung. Längere Bearbeitungsabläufe gehören oft auf eine eigene Seite, statt in ein immer überladeneres Overlay.

Lade-, Leer-, Fehler- und Erfolgszustände

• Gestalte jeden Zustand anhand derselben realen Aufgabe.
• Eine leere Projektliste sollte erklären, wie das erste Projekt erstellt wird.
• Ein Ladezustand sollte genügend Struktur beibehalten, um störende Layoutsprünge zu vermeiden.
• Ein Fehler sollte eine sinnvolle nächste Aktion anbieten und bereits abgeschlossene Arbeit nicht verwerfen.
• Eine Erfolgsmeldung sollte benennen, was geändert wurde.
• Die statischen Beispieldarstellungen auf dieser Seite veranschaulichen das Erscheinungsbild. Sie belegen nicht, dass diese Zustände in der Produktion funktionieren.

Radix Themes Designsystem: Layout, Abstände und Informationsdichte

Eine gemeinsame Abstands-Skala verwenden

Die dokumentierte Abstands-Skala umfasst neun Grundstufen: 4, 8, 12, 16, 24, 32, 40, 48 und 64 Pixel. Verwende kleine Stufen innerhalb eng zusammengehöriger Steuerelemente und größere Abstände zwischen unabhängigen Abschnitten. Stelle eine klare visuelle Beziehung zwischen einer Überschrift und ihrem Inhalt her. Verteile Leerraum nicht gleichmäßig, nur um den Bildschirm zu füllen: Nähe sollte vermitteln, welche Informationen zusammengehören.

Die Informationsdichte richtet sich nach der Aufgabe

Ein Ressourcenverzeichnis benötigt genügend sichtbare Einträge zum Vergleichen. Ein Konfigurationsformular braucht Platz für Beschriftungen, Hilfetexte und Fehlermeldungen. Eine Leseseite benötigt eine gleichmäßige Zeilenlänge und eine sichtbare Gliederung. Wähle die Informationsdichte passend zur Aufgabe, statt überall dieselbe Kartengröße zu verwenden. Radix bietet außerdem eine Skalierungseinstellung, die zusammengehörige Abmessungen gemeinsam anpasst. Prüfe Lesbarkeit und Bedienelemente, bevor du eine kompakte Skalierung als Standard für das Produkt festlegst.

Raster- und Containerverhalten

Beginne mit einem Seitencontainer und definiere anschließend den Hauptinhalt sowie mögliche ergänzende Bereiche. Halte lange Texte auch bei einer breiten Arbeitsfläche in einer gut lesbaren Spalte. Verschiebe ergänzende Inhalte bei schmaleren Ansichten unter den Hauptinhalt oder wandle einen langen Zusatzbereich in eine barrierefrei bedienbare lokale Navigation um. Achte auf die Reihenfolge im Quelltext, damit der mobile Ablauf und die Tastaturreihenfolge auch ohne die Platzierung im Desktop-Raster sinnvoll sind.

Zeilen statt verschachtelter Karten

Platziere in einer kompakten Token-Referenz Name, Wert und Verwendung in einer Zeile, die sich schnell überblicken lässt. Fasse in einem Katalog Titel, Kategorie, Beschreibung und Ziel zusammen. Wiederholte verschachtelte Boxen erzeugen visuelles Rauschen und nehmen dem Inhalt Platz weg. Bevorzuge eine dünne Trennlinie zwischen zusammengehörigen Zeilen. Verwende einen umschlossenen Bereich nur bei einem tatsächlichen Kontextwechsel, etwa einer Live-Vorschau oder einem Codebeispiel.

Wichtige Inhalte sichtbar halten

Kürze einen ausführlichen Leitfaden nicht zu knappen Zusammenfassungen, nur damit die Seite kürzer wird. Biete ein Inhaltsverzeichnis und aussagekräftige Zwischenüberschriften, damit Leser direkt zu den für sie relevanten Abschnitten springen können. Wenn ein Filter oder Akkordeon die Sichtbarkeit verändert, sollten der Leerzustand und der ausgewählte Zustand klar erkennbar sein. Vermeide eine unabhängig scrollende Liste innerhalb der Seite, es sei denn, sie löst ein konkretes Interaktionsproblem. Bei einer langen Ressourcensammlung ist normales Seitenscrollen meist einfacher.

Radix Themes Radix-Designsystem: Eckenradius, Tiefe und Bewegung

Der Eckenradius ist eine Frage der Beziehungen

Radix bietet benannte Eckenradius-Einstellungen und ein vom Kontext abhängiges Verhalten der Komponenten. Wähle eine Einstellung auf Theme-Ebene, statt jedem Element denselben beliebigen Eckenradius zuzuweisen. Ein Button, eine Checkbox und ein großes Panel erfüllen unterschiedliche strukturelle Rollen. Sorge dafür, dass ihre Formen zusammenpassen, ohne diese Rollen zu verwischen. Wenn deine eigene Komponente ein Eckenradius-Token verwendet, teste sie neben einem nativen Button und Eingabefeld, bevor du entscheidest, ob sie zum selben System gehört.

Erhebung macht Ebenen verständlich

Nutze Tiefe, um ein Overlay von der darunterliegenden Seite oder ein interaktives Panel von einer zurückhaltenden Fläche abzuheben. Radix bietet eine Schatten-Skala mit sechs Stufen. Behandle den Schattenindex nicht wie eine Rangliste dafür, welche Karten am dekorativsten sind. Bei einem dicht bestückten Katalog reichen oft Rahmen. Prüfe Schatten in beiden Darstellungsmodi: Eine Unschärfe, die im hellen Modus funktioniert, kann auf einer dunklen Oberfläche verschwinden oder einen Lichthof erzeugen, der eine falsche Tiefe vermittelt.

Bewegung sollte Veränderungen verdeutlichen

Verwende kurze Übergänge, um Auswahl, Öffnen, Fortschritt oder den Wechsel zwischen verwandten Zuständen zu verdeutlichen. Verzögere Inhalte nicht durch eine Eingangsanimation. Vermeide dauerhafte Hintergrundbewegungen auf einer arbeitsorientierten Oberfläche. Berücksichtige die Einstellung für reduzierte Bewegung und stelle sicher, dass der Endzustand auch ohne Übergänge gut lesbar bleibt. Zeitangaben in einer benutzerdefinierten Implementierung sind Entscheidungen der jeweiligen Anwendung. Dieser Leitfaden erfindet kein offizielles Radix-Dauer-Token, wenn keines bestätigt wurde.

Interaktion ohne Dekoration

Ein Hover-Effekt sollte verdeutlichen, dass ein Element bedient werden kann. Ein Fokuszustand sollte sich klar von angrenzenden Oberflächen abheben. Verschiebe beim Hover keine ganze, dicht gefüllte Zeile so stark, dass sich die Informationen beim Lesen verschieben. Auf Touchscreens müssen wichtige Aktionen auch ohne Hover verfügbar sein. Der Effekt ist gelungen, wenn er Nutzern hilft, das Steuerelement zu verstehen – nicht, wenn er die Animation selbst in den Mittelpunkt stellt.

Radix Themes Empfehlungen und Fallstricke für Radix-Designsysteme

Empfehlung: Erstelle einen vollständigen Bildschirm

Erstelle einen Bildschirm mit der tatsächlichen Navigation, aussagekräftigen Inhalten, der primären Aktion und mindestens einem Sonderzustand. Prüfe den Bildschirm, bevor du Dutzende wiederverwendbare Komponenten daraus ableitest. Halte bewusste Entscheidungen fest, etwa Akzentfarbe, Informationsdichte, Schriftgrößen und Formulierungen für Leerzustände. So erhält ein Coding-Agent klare Vorgaben, und Abweichungen lassen sich bei späteren Iterationen leichter erkennen.

Empfehlung: Sorge für Konsistenz zwischen nativen und benutzerdefinierten Elementen

Verwende bevorzugt die vorhandenen Komponenten der Bibliothek für Verhaltensweisen, die sie bereits unterstützt. Nutze Theme-Variablen in benutzerdefinierten Wrappers und prüfe diese in beiden Darstellungsmodi. Bewahre Beschriftungen und Semantik HTML beim Gestalten. Wenn das Projekt bereits ein Designsystem hat, vergleiche es mit dieser Referenz, bevor du es ersetzt. Eine zweite, unkontrollierte Theme-Ebene kann mehr Inkonsistenzen schaffen, als sie beseitigt.

Vermeiden: Eine Marke nur durch den Austausch von Farben nachbilden

Allein durch das Ändern der Akzentfarbe entsteht keine stimmige Oberfläche. Abstände, Typografie, Inhaltshierarchie, Interaktionsmuster und Entscheidungen zum responsiven Verhalten tragen wesentlich zur visuellen Identität bei. Behaupte nicht, es gebe eine offizielle Integration, nur weil ein Mockup der Bibliothek ähnelt. Übernimm keine Marken, proprietären Assets oder geschäftlichen Aussagen eines anderen Produkts in die Oberfläche eines neuen Produkts.

Vermeiden: Bedeutung für einen aufgeräumteren Screenshot opfern

Radix Themes Responsives Verhalten und Barrierefreiheit im Radix-Designsystem

Passe zuerst die Struktur an, bevor du alles verkleinerst

Wenn der Bildschirm schmaler wird, reduziere die Spaltenzahl, verkürze den Weg zur Hauptaktion und ordne sekundäre Informationen in den normalen Lesefluss ein. Skaliere ein Desktop-Dashboard nicht einfach als Bild herunter und bezeichne es als mobiles Layout. Stelle dieselben Inhalte weiterhin bereit, indem du Zeilen umbrechen lässt, Elemente stapelst oder eine geeignete Tabellenansicht verwendest. Bewahre aussagekräftige Linktexte, damit ein Ziel auch ohne die umgebende Desktop-Karte verständlich ist.

Dokumentierte Breakpoints gezielt einsetzen

Die offiziellen Namen der Breakpoints lauten initial, xs, sm, md, lg und xl. Ihre Mindestbreiten betragen 0, 520, 768, 1024, 1280 und 1640 Pixel. Betrachte sie als verfügbare Werkzeuge, nicht als verpflichtende Layoutänderungen bei jedem Schritt. Füge einen Breakpoint hinzu, wenn die Inhalte eine andere Anordnung erfordern. Teste auch eine Breite zwischen benannten Breakpoints, um neben dem Breakpoint selbst fragile Zwischenlayouts zu finden.

Tastatur und Fokus

• Alle wichtigen Aktionen müssen sich per Tastatur ausführen lassen.
• Gestalte den sichtbaren Fokuszustand klar unterscheidbar vom Hover-Zustand und stelle sicher, dass er auch sichtbar bleibt, wenn ein Container seine Inhalte beschneidet.
• Vermeide positive tabindex-Werte, die Steuerelemente unvorhersehbar neu anordnen.
• Wenn ein Filter die Ergebnisse verändert, belasse den Fokus auf dem Steuerelement und gib eine knappe Ergebnisanzahl aus.
• Gib den Fokus nach dem Schließen eines Modals an eine sinnvolle Stelle zurück, statt die Person an den Anfang des Dokuments zu versetzen.

Beschriftungen, Interaktionsflächen und Hilfstexte

Geben Sie Symbolaktionen ohne Beschriftung einen barrierefreien Namen, der die Aktion und nicht die Form des Symbols beschreibt. Sorgen Sie für ausreichend große Touch-Ziele, auch wenn das sichtbare Symbol klein ist. Halten Sie dekorative Symbole aus dem Accessibility Tree heraus. Machen Sie Aktualisierungen wie gespeicherte Änderungen oder die Anzahl der Suchergebnisse bekannt, ohne wiederholt auf nicht zusammenhängende Inhalte hinzuweisen. Wenn ein Zustand sowohl Symbol als auch Text verwendet, vermeiden Sie, dass Screenreader dieselbe Aussage doppelt vorlesen.

Mit echten Inhalten prüfen

• Prüfen Sie die Ansicht auf einem Desktop, einem Tablet und einem schmalen Smartphone.
• Berücksichtigen Sie längere Texte, ein fehlendes Bild, eine leere Liste und eine lange, ununterbrochene Kennung.
• Testen Sie die Seite mit reduzierter Bewegung und per Tastaturnavigation.
• Prüfen Sie beide Darstellungsmodi nach jeder größeren Farbänderung.
• Automatisierte Prüfungen können strukturelle Probleme aufdecken. Ob Hierarchie, Inhaltsdichte und visueller Gesamteindruck den Anforderungen des Produkts entsprechen, können sie jedoch nicht beurteilen.

Radix Themes-Designsystem: Leitfaden und Implementierung für KI-Agenten

Projektkontext vorbereiten

1. Beschreiben Sie dem KI-Agenten, was entwickelt wird, wer es verwendet, welche Aktion im Mittelpunkt steht und welche vorhandenen Dateien das aktuelle Design festlegen.
2. Fügen Sie diesen Leitfaden als Referenz hinzu, statt den KI-Agenten aufzufordern, einen nicht näher bezeichneten Screenshot nachzuahmen.
3. Wenn Sie React verwenden, geben Sie an, dass native Radix Themes-Komponenten bevorzugt werden sollen.
4. Bei einem anderen Technologie-Stack bitten Sie um eine ausdrücklich gekennzeichnete Interpretation und prüfen Sie, welchen zusätzlichen Interaktionsaufwand sie erfordert.

Einen vollständigen ersten Entwurf anfordern

Bitten Sie um einen funktionierenden Bildschirm mit echten Inhalten und einer kleinen Auswahl an Zuständen. Geben Sie die Navigation, Felder, Objektmetadaten und das erwartete Ergebnis der primären Aktion an. Berücksichtigen Sie in der Anfrage Tastaturfokus, einen leeren Zustand, Validierung und ein schmales Layout. Benennen Sie Vorgaben, die erhalten bleiben müssen, etwa eine vorhandene Kopfzeile, einen Vertrag für Produktionsdaten oder einen zuvor freigegebenen Inhaltsblock.

In einer Reihenfolge prüfen, die echte Probleme aufdeckt

1. Prüfen Sie zuerst, ob der Bildschirm die vorgesehene Aufgabe unterstützt.
2. Vergleichen Sie anschließend Informationshierarchie, Abstände, Typografie und Farben mit der gewählten Referenz.
3. Testen Sie zum Schluss die interaktiven Zustände und responsiven Layouts.
4. Akzeptieren Sie eine visuelle Änderung nicht allein deshalb, weil die Seite kompiliert oder ein Screenshot aufgeräumt aussieht.
5. Prüfen Sie, ob längere Inhalte, Fehler und wiederholte Aktionen nach den visuellen Anpassungen weiterhin funktionieren.

Mit klar festgehaltenen Entscheidungen erweitern

Halten Sie nach Fertigstellung des ersten Bildschirms die Theme-Konfiguration, Typografierollen, Abstände und wiederkehrenden Komponenten fest. Bitten Sie den KI-Agenten, diese Entscheidungen auf den nächsten Bildschirm anzuwenden, ohne bereits freigegebene Inhalte stillschweigend umzuschreiben. Benötigt ein neuer Bildschirm ein anderes Muster, dokumentieren Sie den Grund und prüfen Sie den vorherigen Bildschirm auf Konsistenz. Bauen Sie auf überprüftem Verhalten auf, statt eine große Sammlung oberflächlich ähnlicher Seiten zu generieren.

Geltungsbereich und Grenzen der Quellen