Radix Themes
Eine praktische Referenz für Produktoberflächen: anpassbare Farben, eine neunstufige Typografie- und Abstands-Skala, Komponentenstatus und ein vollständiger Leitfaden für KI-Agenten.
Entdecken Sie Farbpaletten, Typografie, Komponenten, Layouts und vollständige Designleitfäden. Vergleichen Sie visuelle Richtungen, lesen Sie die Gestaltungsregeln und übernehmen Sie die passende Referenz für Ihr nächstes Projekt.
Eine praktische Referenz für Produktoberflächen: anpassbare Farben, eine neunstufige Typografie- und Abstands-Skala, Komponentenstatus und ein vollständiger Leitfaden für KI-Agenten.

Erstelle eine praktische Mengensteuerung mit Mozaics magischer 16-px-Einheit, abgestimmten 48-px-Steuerelementen, echten SCSS-Imports und BEM-Klassen. Der Regalplaner macht Grenzwerte, typisierte Fehler und eine lokale Materialübersicht sichtbar.

Lernen Sie React Spectrum v3 anhand einer auswählbaren Tabelle für kreative Assets und eines Inspektors für Exportvorgaben kennen. Erfahren Sie mehr über Provider-Themes und Eingabeskalen, unterstützte Style-Props, schlüsselbasierte Collections und die Abgrenzung zwischen v3 und der neueren Implementierung Spectrum 2.

Erstelle längere Servicevorgänge mit den konkreten Abständen, responsiven Props und dem TaskList-Statusmodell von AgDS. Probiere einen Vorbereitungsvorgang aus, bei dem der Prüfschritt erst freigeschaltet wird, wenn alle Voraussetzungen erfüllt sind.

Entdecke Auro’s Alaska-Theme anhand echter semantischer Farb- und Typografie-Tokens, klassenbasierter Typografie und der nativen Flugkomponente. Zwei eigene Flugdaten zeigen lokale Filterung und Auswahl, ohne den Eindruck echter Airline-Angebote oder Buchungen zu erwecken.

Verwenden Sie Albertas native Webkomponenten und veröffentlichte Design-Tokens, um eine vollständige Vorbereitungs-Checkliste mit barrierefreien Auswahlmöglichkeiten, abgeleitetem Fortschritt und verlässlichem Feedback zur Prüfung zu erstellen.

Verwenden Sie den echten Open-Source-Switch-Vertrag von Amsterdam mit einem vollständigen neutralen Theme, barrierefreien Beschriftungen und sofort verfügbaren Leseeinstellungen.

Erstelle mit Arcos gesteuerter Transfer-Komponente eine Auswahl für Berichtsabschnitte. Entdecke die tatsächlichen Abstands- und Größenabstufungen, CSS-Variablenkonventionen, semantischen Oberflächen und den Unterschied zwischen dem Auswählen und dem Verschieben von Zeilen.

Ariakit stellt ungestaltete React-Komponenten mit gemeinsamem, explizitem Zustand und kombinierbaren, barrierefreien Bausteinen bereit. Bei der Combobox sind die eingegebene Suchanfrage und die bestätigte Auswahl voneinander getrennt. Dadurch eignet sie sich für suchbasierte Auswahlelemente. Die Referenzsuche unten veranschaulicht diese Unterscheidung mit gruppierten und nicht verfügbaren Ergebnissen.

Erstelle ein Board zur Issue-Planung mit semantischen Atlassian-Tokens, einer Abstandsfolge in Acht-Pixel-Schritten, echten Button-, Lozenge- und Toggle-APIs sowie der erforderlichen Einrichtung für Compiled-Styling. Prüfe ein Issue, filtere das Board und verschiebe ein lokales Arbeitselement, ohne Auswahl und Status zu verwechseln.

Ein Konfigurationsleitfaden für Cloudscape mit echten Tokens zur visuellen Aktualisierung, dichteabhängigen Abständen, APIs für kontrollierte Formulare und einem funktionsfähigen zweistufigen Ressourcen-Assistenten.

Erstellen Sie mit den Angular-Modulen von Backbase, einem semantischen Theme-Export und klar definierten Prüfstatus einen gebrandeten Prüfablauf für Bankgeschäfte. Vergleichen Sie Web-APIs mit separat dokumentierten nativen Abmessungen.

Bits UI stellt Headless-Svelte-Komponenten bereit, die sich über native Bestandteile und den Zustand von Svelte 5 zusammensetzen lassen. Das Beispiel kombiniert eine aus dem Gesamtzustand abgeleitete Checkbox mit gemischtem Zustand, unabhängig voneinander ausklappbare Akkordeonbereiche und einen Dialog für Bewertungen auf Basis eines Portals. Die vollständige Konfiguration der Gestaltung ist ebenfalls enthalten.

Verwende Bootstrap 5.3.8 mit seiner tatsächlichen Abstandsskala, semantischen Farben, responsiven Rasterdarstellung und Komponenten-APIs. Probiere ein funktionierendes Reservierungsformular, eine Fehlerübersicht, einen Tabellenfilter, ein modales Fenster und einen Farbschema-Umschalter aus und verwende anschließend den dokumentierten Code erneut.

Erstellen Sie ein Erinnerungsformular nach dem Vorbild von British Columbia mit echten semantischen Tokens, nativen React-Aria-Steuerelementen, bedingten Kontaktfeldern und vollständigem Validierungsverhalten.

Erstelle einen redaktionellen Arbeitsplatz mit der tatsächlichen Feld- und Steuerungsstruktur von Bulma, responsiven Spalten, semantischen Farbmodifikatoren und CSS-Variablen sowie vollständigem Validierungscode.

Entdecken Sie Typografie, semantische Design-Token und native Webkomponenten des GC Design System anhand eines vollständigen, durchsuchbaren Vorbereitungsleitfadens mit Offenlegungs- und Leerzustandsverhalten.

Setzen Sie das redaktionelle Raster, die aktuelle Typografie und die nativen Expandables von CFPB um – mit einem funktionierenden Arbeitsblatt zum Lesen, überprüften Paket-APIs und klaren Grenzen für die Markenidentität.

Eine Referenz zu Chakra UI v3 für Tokens, semantische Farbrollen, Rezepte und zusammengesetzte Formular-Komponenten. Sieh dir die tatsächlichen Abstands- und Schriftgrößenskalen an und probiere anschließend ein natives Formular für ein Arbeitsbereichsprofil mit Validierung, Simulation eines fehlgeschlagenen Speichervorgangs und heller/dunkler Darstellung aus.

Implementieren Sie CMS Core mit versionierten Theme-Variablen, den tatsächlichen APIs der Review-Komponente und einem funktionsfähigen Bearbeitungs- und Prüfablauf, der die Antworten und den Fokus der Nutzenden beibehält.

Eine mit echten 5.9-Theme-Variablen erstellte Prüfwarteschlange für CoreUI mit nativen Tabs, Mehrfachauswahl per Kontrollkästchen und einer dauerhaft eingeblendeten Toast-Meldung, über die sich der letzte lokale Archivierungsvorgang rückgängig machen lässt.

Ein mit CSS erstelltes Einladungsstudio, das die semantischen Themes von daisyUI 5, passende Inhaltsfarben, verbundene Optionsfelder, Bereichsregler, Browser-Validierung und einen echten Dialog zur Prüfung demonstriert.

Erstellen Sie mit DDS v3 eine gezielte Gerätesuche: mit semantischen Farben, einer responsiven Schriftgrößenskala, Token-Abständen und einer InputGroup-Komposition, deren Filterverhalten von der Anwendung gesteuert wird.

Entdecken Sie das DKFDS-Design von Dänemark, die tatsächlichen Sass-Skalen und barrierefreie Tabellenmuster anhand eines umfassenden Ressourcenvergleichs mit numerischer Sortierung, Suche nach dem Absenden und einer Wiederherstellung bei leeren Ergebnissen.

Setzen Sie eine gut lesbare Schrittfolge für einen Dienst mit der echten Typografie von Bootstrap Italia, einer responsiven Stepper-Struktur und einem lokal wiederherstellbaren Formularstatus um.

Entdecken Sie die tatsächlichen Theme-Rollen, Größenmodi und das native Verhalten von Eingabefeldern in Designsystemet anhand eines vollständigen Editors für Aufgabenbeschreibungen mit Zeichenfeedback und beibehaltenem Darstellungszustand.

Erfasse die konkrete Typografie, das Raster und das Akkordeon des französischen Staatssystems API innerhalb seines institutionellen Kontexts. Vergleiche verknüpftes und unabhängiges Auf- und Zuklappen in einem klar neutralen Lernbeispiel.

Untersuchen Sie Duets Farb- und Abstandsskalen von LocalTapiola anhand eines Datumsbereichsablaufs mit ISO-Datumswerten, expliziter Bereichsvalidierung, Fokusmethoden der Komponente und klar abgegrenztem Open-Source-Picker.

Erstellen Sie einen Elastic UI-Log-Explorer mit geprüften Borealis-Skalen, nativen Tabellen- und Suchsteuerelementen, Schweregradfiltern, lokal gespeicherten Ereignissen und vollständigem React-Quellcode.

Nutze das echte Transfer-Modell von Element Plus, Filter und deaktivierte Optionen, um eine Workbench zur Modulauswahl zu erstellen. Dabei sollen geprüfte Farben, Schriftgrößen und Abmessungen der Bedienelemente zum Einsatz kommen.

Lesen Sie Souls Vertrag für Datentabellen zusammen mit den sechs Pixeln Abstand, den abgestuften Farbrollen und der kompakten Inter-Typografie. Vergleichen Sie die Mehrfachauswahl, die Kennzeichnung fehlender Daten und die Zusammenfassungszeilen. Prüfen Sie anschließend die Einstiegspunkte des verifizierten privaten React-Pakets.

Eine praktische Calcite-Referenz für fokussierte räumliche Werkzeuge: semantische Oberflächen und blaue Aktionen, kompakte Inspektionsbereiche, echte Eingabe-APIs und ein vollständiges lokales Beispiel zur Standortprüfung.

Untersuchen Sie Europas Farb-, Typografie- und Abstandsrollen in EC anhand eines vollständigen nativen Accordion-Briefings – einschließlich Tastaturbedienung, „Alle öffnen“-Verhalten und lesbarem Fallback ohne JavaScript.

Eine native Flowbite-4-Zusammensetzung aus Akkordeon und Drawer mit geprüften semantischen Theme-Aliasen, einer dauerhaft eingeblendeten Packliste und einem barrierefreien lokalen Workflow für Materialnotizen.

Ein natives Fomantic UI-Leseregal mit verifizierten kompilierten Theme-Werten, jQuery-Dropdown- und Bewertungsmodulen, ausdrücklicher Tastaturunterstützung und einer dauerhaft gespeicherten lokalen Merkliste.

Ein funktionierender Foundation-Proof-Desk mit XY Grid, benutzerdefinierten Abidin-Validatoren, Reveal-Bestätigung, tatsächlichen Sass-Einstellungen und vollständigem lokalen Integrationscode.

Ein natives Skizzenbuch für Framework7 mit echten Swipeout-Aktionen, expliziten iOS-Theme-Werten, einer per Tastatur bedienbaren Schaltfläche zum Öffnen der Aktionen und einer gefilterten Liste, in der abgeschlossene Studien bis zum Zurücksetzen erhalten bleiben.

Ein Pajamas-Leitfaden für technische Workflows: tatsächliche semantische Design-Token, fließende Typografie und Abstände, ein gestufter Pipeline-Inspektor, verständliche Fehlerausgaben und eine ausdrücklich lokale Wiederholungs-Simulation.

Erstelle eine Checkliste für die Ausrüstung mit den echten gluestack-Creators für Core Button und Input, expliziten semantischen Farben aus v5 und vollständigem React Native Web-Quellcode. Untersuche Validierung, Tastaturaktionen, stabile Elementidentität und lokal abgeleiteten Packfortschritt.

Entdecke die tatsächlichen Farbrollen, Kartenbereiche und die native Paginierung von Gov Design System CE anhand eines vollständigen Lesetoolkits mit sechs Ressourcen und explizitem Fokus- und Seitenstatus.

Erstellen Sie einen Frage- und Antwortablauf im GOV.UK-Stil mit der aktuellen Typografieskala v6, responsiven Abständen, funktionalen Farben, verknüpfter Validierung und konkreter Frontend-Integration.

Verstehen Sie HarvardSites als redaktionelle Plattform: Vergleichen Sie Website-Stile, wählen Sie dokumentierte Schriftkombinationen und gestalten Sie Universitätsseiten mit eigens dafür entwickelten Inhaltskomponenten.

Headless UI stellt ungestaltete React-Interaktionskomponenten für Dialoge, Listenfelder und Umschalter bereit. Diese Anleitung zeigt, wie sich deren integriertes Fokus-, Auswahl- und Popup-Verhalten mit gewöhnlichem CSS kombinieren lässt. Als Beispiel dient ein Ablauf zum Teilen von Dokumenten.

Kombinieren Sie native HDS-Auswahlgruppen, semantische Feedbackfarben und verknüpfte Fehlerübersichten zu einem vollständigen lokalen Ablauf zum Prüfen und Korrigieren.

Eine Referenz zu HeroUI v3 mit echten semantischen CSS-Variablen, zusammengesetzten React-Steuerelementen, hellen und dunklen Oberflächen sowie einem funktionierenden Rezept für den Bildexport.

Modellieren Sie eine Kapazitätsreservierung mit den Layout-Primitiven, gesteuerten Formularfeldern und numerischen Anzeigen von Grommet. Setzen Sie die Theme-Skala bewusst ein und halten Sie das Grommet-Basistheme vom separat installierten HPE-Theme getrennt.

Erstellen Sie Universitätsseiten mit der tatsächlichen Tokenskala von Rivet, der Komponentenstruktur von HTML und nativen Tastaturinteraktionen. Entdecken Sie eine kompakte Detailseite zu einem Workshop mit barrierefreien Tabs zu Besuchsinformationen.

Erstelle ein Wartungsformular für Unternehmen mit echten IDS-Eingabestatus, Theme-Aliasen und einer exakten Asset-ID. Prüfe die aktuellen öffentlichen Theme-Tokens, ein fest versioniertes Web-Components-Paket und einen lokalen Entwurfsworkflow mit Validierung und Zurücksetzen.

Eine native Ionic-Oberfläche für Leseeinstellungen mit überprüften Farbrollen, Geometrie der iOS- und Material-Bereichsregler, echtem Segment- und Schalterverhalten sowie einem Artikel, der auf Auswahl von Schriftart, Größe und Papier reagiert.

Erstellen Sie gut lesbare japanische Oberflächen für öffentliche Dienste mit den Textrollen, semantischen Tokens und der nativen HTML-Komponentenstruktur von DADS. Testen Sie eine funktionsfähige Suche nach Belegen mit Formatfehlern, einem Ergebnis ohne Treffer und einem überprüfbaren Statuseintrag.

Erstelle ein Freigabefeld für Creator mit gut lesbarem Kurskontext, klaren Kopieraktionen und verlässlichem Feedback zur Zwischenablage. Sieh dir die Rails-Komponentenstruktur von Sage, die veröffentlichten Typografiespezifikationen und die neuere, extern geladene Pine-Token-Ebene an.

Erstellen Sie eine native KERN-Oberfläche mit geprüfter Typografie, semantischen Designs, aufklappbaren Inhalten und einem umkehrbaren Bestätigungsablauf.

Ein auf Reisen ausgerichteter Orbit-Leitfaden mit echten Produktfarben und Abständen, nativen Gepäckoptionen, einer einheitlichen Preisübersicht und einem vollständigen lokalen Prüfablauf.

Kobalte stellt Headless-Komponenten für Solid bereit, darunter numerische Eingabefelder mit separaten Roh- und formatierten Werten, den Aufbau zusammengesetzter Checkboxen und Buttons mit gedrücktem Zustand. Dieser Leitfaden verbindet diese Grundelemente über einen Rezeptskalierer mit abgeleiteten Mengen und zurücksetzbaren Zutaten-Checkboxen mit Solid-Signals.

Untersuchen Sie die Sprache operativer Benutzeroberflächen von Maersk anhand realer Rollen im hellen Theme, Schriftgrößen für Überschriften und Fließtext, abgestuften Eckenradien und der Behandlung von Kennungen. Eine beispielhafte Sendungssuche veranschaulicht den exakten Abgleich von Referenzen und einen barrierefreien Ereignisverlauf, ohne Zugriff auf Live-Logistikdaten zu behaupten.

Eine Referenz für Mantine 9 mit nativer Teilnehmertabelle und Terminierungs-Drawer. Untersuche die tatsächlichen Themenskalen, verbinde useForm mit TextInput, Select, Checkbox und DatePickerInput und teste die Validierung, bevor du einen lokalen Eintrag hinzufügst.

Die Store- und Action-Builder von Melt UI ergänzen das Svelte-Markup, für das du verantwortlich bist, um barrierefreies Verhalten. Diese Anleitung verwendet @melt-ui/svelte 0.86.6, um Radio-, Slider- und Switch-Builder über ihre Attribute, Actions und beschreibbaren Stores zu verbinden; sie sind nicht mit den neueren Runes API gleichzusetzen.

Lernen Sie Forty-Twos unterstützten WordPress-Workflow, die Web-Palette und Muster für Personenverzeichnisse anhand eines funktionierenden Beispiels mit Filtern für Rollen und Forschung kennen.

Richte einen Fluent-UI-React-v9-Arbeitsbereich mit echten semantischen Tokens, den Web-Typografie- und Abstandsabstufungen, gesteuerten Tabs und einem validierten Zugriffsdialog ein. Vergleiche die Theme-Werte, untersuche den Aufbau der Komponenten und teste eine lokale Interaktion, bevor du das vollständige React-Beispiel verwendest.

Erstelle mit Vibe-4-Tokens und React-Steuerelementen ein funktionsfähiges Lieferboard. Erfahre, worin sich semantische Aktionsfarben und Board-Beschriftungen unterscheiden, wie benannte Abstandsstufen und Schrift-Kurzschreibweisen funktionieren und welche explizite Einrichtung von CSS eine neue Anwendung benötigt.

Erstellen Sie eine Rechercheoberfläche, in der Zahlen bündig ausgerichtet sind, Asset-Farben ihre Bedeutung behalten und die Typografie gut lesbar bleibt. Entdecken Sie MDS-Konstanten, die Integration mit Vue 3, den Übergang zu Morningstar Intrinsic und ein sortierbares, fiktives Allokationsnotizbuch.

Ein redaktioneller Leitfaden zu Protocol mit echten Schriftfamilien, Abstands- und Container-Skalen, einer responsiven, illustrierten Leseseite und einem vollständigen Formularbeispiel mit nativen CSS-Komponenten.

Eine native Naive UI-Datentabellen-Arbeitsoberfläche mit verifizierten Werten des Theme-Objekts, Zeilenauswahl, aufklappbaren Zeilen, Sortierung, Seitennavigation und einer lokalen Aktion zur Stapelprüfung.

Verwende die echten ax-Tokens aus Aksel v8, die native Tabellendichte und die semantische Kopfzeilenstruktur. Sortiere und wähle fiktive Folgedatensätze aus und vergleiche dabei helle und dunkle Designs.

Nutze die Typografie, responsiven Abstände, gruppierten Optionsfelder und kontextbezogenen Details von NHS.UK, um einen klaren Ablauf zur Auswahl von Terminpräferenzen zu gestalten.

Erstellen Sie mit echten Komponenten für öffentliche Dienste und einem expliziten Theme ein entsprechendes Interface. Diese Referenz verwendet Utrecht CSS, um die Zuordnung von Design-Tokens, den Aufbau einer Datenliste und zwei eigens entwickelte Themes mit demselben Bearbeitungsworkflow zu veranschaulichen.

Untersuchen Sie die Token des Nord-Therapy-Themes und die Web-Component-Verträge anhand eines Entwurfs für eine Raumanfrage: echte Farbrollen, responsive Feldgrößen, explizite Validierung und lokal vorbereitete Ergebnisse.

Entdecken Sie NSW-Design-Tokens, die Typografie mit Public Sans und native, per Tastatur bedienbare Tabs anhand eines vollständigen Workshop-Leitfadens mit einer unabhängigen lokalen Leseliste.

Erstelle mit echten Vue-Komponenten einen vollständigen Brief-Composer für Nuxt UI 4.11.3 – mit semantischen Theme-Referenzen, Eingabevalidierung und explizitem Verhalten für lokale Entwürfe.

Erstellen Sie eine Umfrageantwort, die sich nicht widersprechen kann: native ONS-Checkboxen, sich gegenseitig ausschließende Antworten, genaue Referenzen für Schrift und Farbe sowie ein vollständiger lokaler Prüfablauf.

Erstellen Sie einen ausführlichen Leitfaden im Ontario-Stil mit echter Typografie, veröffentlichten Abstands- und Farbwerten, nativem Akkordeonverhalten und vollständigem, versionsgenauem Quellcode.

Untersuchen Sie die tatsächliche Farbpalette, semantische Rollen sowie Grenzen für Abstände und Dichte von Oracle JET 19 Redwood anhand eines vollständigen, eigenständigen und bearbeitbaren Arbeitsblatts zur Aktienanalyse.

Untersuchen Sie in einer vollständigen responsiven Vergleichsstudie die tatsächlichen semantischen Tokens, Theme-Pakete und das native Offcanvas-Verhalten von Orange OUDS 1.4.

Ein nativer Oruga-Katalogeditor mit durchsuchbaren, entfernbaren Themen-Tags, festgelegten Vokabulargrenzen, den tatsächlichen Tokens eines optionalen Themes und einer Live-Karte, die die ausgewählten Bezeichnungen widerspiegelt.

Erstellen Sie mit Blueprint einen datenintensiven Arbeitsbereich: mit verifizierten Typografie- und Intent-Tokens, einer Tabelle mit auswählbarem Datensatz, einem Prüfbereich und vollständigem React-Quellcode.

Entdecke Bolts Inhaltsdesignsystem im Pega-Stil: variable Schriftgrößen, getrennte horizontale und vertikale Abstände sowie eine Twig-Akkordeon-Komposition für eine redaktionelle Ressourcenseite.

Pico CSS-Stile: semantisches HTML mit responsiver, rem-basierter Typografieskala und Theme-Variablen. Die Standard-, klassenlose und bedingte Distribution haben unterschiedliche Integrationsbereiche; dieser Leitfaden verwendet den Standard-Build für ein Formular mit Leseeinstellungen und nativem Disclosure- und Dialogverhalten.

Untersuchen Sie über ein funktionsfähiges Aktivitätsverzeichnis das 3er-Raster von Ponchos Bootstrap, semantische Aktionsfarben und vollständig anklickbare Service-Panels.

Entdecken Sie Porsche Design System v4 mit fließenden Abständen, CSS-Farbschemata, Porsche-Next-Typografie und einem Konfigurator mit zwei Auswahlmöglichkeiten. Die Referenz enthält echte Token-Ausdrücke und einen vollständigen Vite-Einstiegspunkt, der aktuelle Ereignisse des Segmented Controls verwendet.

Ein nativer Preline-Sitzungsplaner mit verknüpften Tabs, einem eingeschränkten Input-Number-Plugin, installierten Theme-Aliasen, echten Tailwind-Skalen und einer lokalen Materialkostenschätzung, die sich mit der ausgewählten Sitzung aktualisiert.

Eine auf eine feste Version abgestimmte PrimeVue-Implementierung des Prime UI-Ökosystems: ein Dokumentbaum im Aura-Theme mit echten Preset-Referenzen, gesteuerter Auf- und Zuklappfunktion, Filterung, Auswahl und lokalem Anheften.

Pure CSS ist ein modulares Stylesheet für Grids, Formulare, Schaltflächen, Menüs und Tabellen – ohne Widget-Laufzeitumgebung. Dieser Leitfaden zeigt anhand eines filterbaren Gerätekatalogs mit explizit implementierter Sortierung und Auswahl, wie das optionale responsive Grid-Modul mit nativen semantischen Elementen zusammenspielt.

Ein nativer, mit Quasar geführter Workflow mit echten Marken- und Abstandsangaben, QForm-Validierung, einem dreistufigen Briefing-Ersteller, Auswahlmöglichkeiten für das Format per Optionsfeld und einer Live-Agenda für 45 Minuten.

Entdecken Sie die Implementierung von Bootstrap in Queensland anhand einer vollständig illustrierten Ressourcenauswahl mit echten Theme-Rollen, nativer Checkbox-Gestaltung und einem barrierefreien Prüfdialog.

Erstelle mit React Native Elements 5.0.0 einen vollständigen Composer für Fokuspläne: mit echten Theme-Rollen, gesteuerten Eingaben und Auswahlen, Validierung, lokaler Bestätigung und einem getesteten Web-Build.

Ein nativer React Suite-Prüfungskalender mit verifizierten Variablen aus v6 von CSS, Markierungen für Datumszellen, einer Agenda für den ausgewählten Tag, modaler Validierung und klaren Regeln für die lokale Terminplanung.

Verwenden Sie PatternFly für einen Arbeitsbereich für Betriebsabläufe: semantische Token-Referenzen, auswählbare Servicekarten, dreistufige Sammelauswahl, Prüfung des Geltungsbereichs und vollständiger nativer React-Code.

Erstelle einen konkreten Auswahlbereich für Cedar-Lieferoptionen mit nativen Vue-Kacheln, echten Token-Werten, vollständiger Tastaturnavigation und einem responsiven Produktlayout.

Entdecken Sie die tatsächlichen Farbfunktionen von Ripple, die 14-stufige Abstandsfolge und responsive Typografiereferenzen anhand eines vollständigen Workshop-Ablaufs mit schrittweiser Offenlegung, Fortschrittsanzeige und Tastaturfokus auf den nächsten Schritt.

Setzen Sie Sainsburys öffentliche Designrichtlinien für einen vollständigen Ablauf zur Auswahl eines Lieferzeitfensters um: mit echten Farb- und Größenreferenzen, barrierefreien Radio-Optionen, einer aktualisierten Zusammenfassung und einer transparenten lokalen Rückmeldung.

Ein Lightning-Blueprint-Leitfaden für die Bearbeitung umfangreicher Datensätze: realistische Abstände, Typografie und semantische Farben, ein bearbeitbarer Fallarbeitsbereich, Feldvalidierung und ein Aktivitätsverlauf, der lokale Änderungen widerspiegelt.

Untersuche One UIs Ansichts- und Interaktionsstruktur, die Empfehlungen zu 24-dp-Rändern und die Anforderung zur Textskalierung auf 200 % anhand einer vollständigen, eigenständigen Vorschau der Leseeinstellungen mit dunkler Darstellung und expliziter Möglichkeit zum Zurücksetzen.

Verwende das Horizon-Theme von SAP Fiori über UI5 Web Components: echte Theme-Parameter, explizite Inhaltsdichte, semantische Wertzustände und eine Anordnung für eine Kaufanfrage mit lokaler Validierung.

Verwenden Sie die responsiven Schrift-, Abstands- und Farbrollen der schottischen Regierung in einem nativen Feld mit Zeichenzähler, das Texte auch bei Überschreitung des Limits beibehält und eine Korrektur ermöglicht.

Lernen Sie Braid anhand einer eigens entwickelten Jobsuche kennen: themenspezifische Variablen, vier echte Breakpoints, kontextbezogener Text, klar unterscheidbare Schaltflächenstile und ein kontrolliertes Feld, das die Validierung erklärt, statt die Aktion zu deaktivieren.

Eine Evergreen-Referenz mit tatsächlichen Design-Token-Werten, kontrollierter Tag-Eingabe, Live-Regelabgleich, einem Wiederherstellungspfad für leere Zustände und einem nativen Prüfdialog.

Erstellen Sie eine schrittweise Workspace-Einrichtung mit den empfohlenen grundlegenden Steps von Semi, einem gesteuerten Input und Switch, echten Theme-Tokens und einer expliziten Entscheidung zwischen den Paketen React 18 und React 19.

Eine Intergalactic-Anleitung mit aktuellen semantischen und Diagramm-Design-Tokens, nativen Filtersteuerelementen, Vergleichen mit fester Skalierung, ausgewählten Details und einer vollständigen, reproduzierbaren Beispieldatengrundlage.

Erkunden Sie die genauen Referenzwerte für Abstände, Radien und Typografie im Horizon Workspace anhand eines vollständigen lokalen Ablaufs zur Prüfung von Anfragen – mit Speicherung von Entwürfen, Validierung, Statusfiltern und Wiederherstellung.

Anvil2 konkretisieren – mit seinem Token-Modell aus drei Ebenen, verifizierten Rollenwerten für hell und dunkel sowie einer vollständigen Interaktion zur Servicezuweisung mit synchronisierten Techniker-, Zeit- und Prüfstatusangaben.

Untersuchen Sie Industrieereignisse mithilfe einer klar definierten Schweregrad-Terminologie, theme-gerechter Farbrollen und der iX Event List API. Dieser Leitfaden erstellt ein lokales Geräteprotokoll, ohne einen geprüften Eintrag mit einem behobenen Maschinenalarm zu verwechseln.

Verwenden Sie aktuelle SGDS Web Components mit echten responsiven Tokens, Tag- und Nachtthemes sowie nativen begrenzten Mengen, die einen lokalen Plan synchron halten.

Vergleichen Sie die echten Cerberus-, Mint- und Rose-Themes von Skeleton 5.0.1 an einem vollständigen Leseplatz mit Live-Token-Inspektion, dunklen Oberflächenkombinationen und lokalem, jederzeit umkehrbarem Zustand.

Prüfen Sie Seeds’ tatsächliche öffentliche Farb-, Abstands-, Produkttypografie- und Rahmen-Design-Tokens anhand einer vollständigen redaktionellen Prüfwarteschlange mit gemischter Auswahl, gefilterten leeren Zuständen und Rückgängig-Funktion.

Gestalten Sie akademische Editorial-Seiten mit dem Tailwind-Preset, der responsiven Schriftgrößenskala und den fließenden Bildschirmrändern von Decanter. Entdecken Sie eigens entwickelte Veranstaltungskarten mit funktionierenden Themenfiltern und aufklappbaren Kurzbeschreibungen.

Ein Circuit-Leitfaden mit exakten semantischen Tokens, nativen Validierungs-Props, einem vollständigen Editor für Händlerartikel und einer illustrierten Vorschau aus Kundensicht.

Gestalte gut lesbare Formulare für finnische öffentliche Dienste mit Source Sans 3, ausdrücklich festgelegten Abstands-Design-Token und einem Muster für die wiederherstellbare Dokumentauswahl.

Ein natives Tabler-Projektjournal mit den tatsächlichen Theme-Variablen von Version 1.6, Timeline-Cards, Datagrid-Kontext, Modal-Validierung und einer hellen/dunklen Komposition, die lokale Checkpoints aufnehmen kann.

Erkunden Sie die tatsächlichen Token-Kategorien von Tamagui v5 und die hellen und dunklen blauen Themes anhand einer vollständigen, mit nativen Komponenten erstellten Gewohnheitentafel mit Validierung, Fortschrittsanzeige und Wiederherstellung bei leerem Zustand.

Erstellen Sie einen kompakten Richtlinieneditor für API mit TDesign React: konkreten Theme-Rollen, einer zweipixeligen Größenskala, der Registrierung von Form-Feldern und einer typisierten Table-Komposition.
Erstelle eine Oberfläche zur Suche nach Dienstleistern mit den dokumentierten v2-Primitiven von Thumbprint: kompakte Anbieter-Karten, übersichtliche Vergleichsdetails, eindeutige Auswahlzustände und eine dauerhaft sichtbare Merkliste.

Erstelle einen Benachrichtigungsentwurf mit dem Theme und den Button-Vorgaben von Paste, einer überprüften Abstands-Skala und einer klaren Unterscheidung zwischen dem Bearbeiten, Prüfen und tatsächlichen Senden einer Nachricht.

UIkit kombiniert ein CSS-Framework, Less-Anpassungen und attributgesteuerte JavaScript-Komponenten. Der Switcher, das Accordion und das responsive Raster greifen im folgenden Workshop-Planer ineinander. So wird deutlich, wo das Verhalten nativer Komponenten endet und der Auswahlzustand der Anwendung beginnt.

Entdecke die veröffentlichten Farb- und Abstandstokens von UNDP, native, per Tastatur bedienbare Tabs und ein vollständiges Beispiel zum Lesen eines Workshops mit lokal gespeichertem Lesefortschritt.

USWDS-Abstands-Tokens, Theme-Rollen, semantische Tabellen und native Akkordeons in einem durchsuchbaren Vergleich von Möglichkeiten verbinden.

Gestalte klare Serviceabläufe mit den semantischen Tokens von VA und der nativen Process List: sichtbare Erläuterungen zu den einzelnen Schritten, aussagekräftige Statusbezeichnungen und ergänzende Details, die den Hauptablauf übersichtlich halten.

Ein mobiler Ablauf zur Adressauswahl mit Vant 4: echten CSS-Variablen, kontrollierter Adressidentität, Feldvalidierung, Theme-Wechsel und explizitem Speichern ausschließlich lokal.

Verwende Visa Nova CSS, um eine übersichtliche Auswahl für das Abrechnungsformat mit nativen Optionsfeldern, einem Kopfbereich in alternativer Farbe und einer Zusammenfassung zur Überprüfung zu erstellen. Sieh dir die exakten Theme-Werte der Version 1.6.5, skalierbare Abstände und die vollständige Integration des Stylesheets an.

Untersuche Volvos HTML-orientierte Web-Grundlage, die tatsächlichen Tokens für den hellen Modus und das native Styling auswählbarer Karten anhand eines vollständigen Beispiels zur Packungsplanung mit unabhängigen Auswahlmöglichkeiten, Theme-Wechsel und Zurücksetzen.

Ein natives Vuestic-Prüfblatt mit anhand der Quellen verifizierten hellen und dunklen Presets, barrierefreien Bewertungsbeschriftungen, Textfeldvalidierung, abgeleitetem Durchschnitt und einem gespeicherten Zustand, der die abgeschlossene Bewertung beibehält.

Gestalten Sie robuste Leseoberflächen mit flexibler Typografie, semantischen Farbrollen und nativen aufklappbaren Inhalten, die auch ohne JavaScript lesbar bleiben.

Untersuche die tatsächlichen semantischen Design-Token von Web Awesome anhand nativer benutzerdefinierter Elemente, einschließlich bereichsspezifischer Änderungen an Eckenradien und Abständen, der Gestaltung des Shadow DOM, des Auswahlverhaltens und der Eingabevalidierung.

Nutzen Sie die echte SearchInput-Struktur von Codex, die Aktionshierarchie und die auf das Lesen ausgerichteten Tokens. Durchsuchen Sie einen lokalen Artikelindex, sehen Sie sich ein Ergebnis an und kehren Sie zur gleichen Leseposition zurück.

Verwenden Sie Wandas echte Theme-Rollen und Token-Syntax in einem vollständigen Arbeitsbereich zum Lesen von Feedback – mit Themenfiltern, aufklappbarem Belegkontext und einem dauerhaft verfügbaren lokalen Notizbuch.

Erstelle einen lokalen Lernplan mit Canvas Kits zusammengesetztem FormField, einem kontrollierten TextInput und PrimaryButton. Unterscheide dabei zwischen aktuellen semantischen Token-Quellen und älteren space.x4-Migrationsbeispielen.

Ein Garden-Leitfaden für Support-Arbeit mit echten Theme-Aliasnamen, Typografie- und Radius-Skalen, einem vollständigen Antworteditor, lokalen Entwürfen mit Sichtbarkeitserkennung und Wiederherstellung von Eingabefeldern.
Reisemarktplatz. Warmer Korallenton als Akzent, fotogetriebenes Design, abgerundete UI.
Projektmanagement. Extrem minimalistisch und präzise, mit violettem Akzent.
Ruhiges, nahezu monochromes System, geprägt von tiefem Teal-Schwarz, großzügigem Weißraum und redaktioneller Typografie.
Unterhaltungselektronik. Hochwertiger Weißraum, SF Pro und cineastische Bilder.
Zahlungsinfrastruktur. Charakteristische violette Farbverläufe, elegante Schriftstärke 300.
Digitalbanking. Elegante dunkle Oberfläche, Verlaufskarten und Fintech-Präzision.
Mattglaseffekt mit transparenten Ebenen, dezenter Unschärfe und leuchtenden Rändern für Tiefe und moderne Eleganz.
Geldüberweisung. Leuchtend grüner Akzent, freundlich und klar.
Elektroautos. Konsequente Reduktion, bildschirmfüllende Fotografie und nahezu keine UI.
Sprachlernplattform. Leuchtendes Eulen-Grün, markante Schatten und spielerische Freude.
Plattform mit Fokus auf Code. Funktionale Informationsdichte, präzise Gestaltung in Blau und Weiß, auf Basis von Primer.
Konversationelle, KI-zentrierte Oberfläche mit wenigen Bedienelementen, klaren Ergebnissen und delegierten Aufgabenabläufen für agentische Workflows.
Tabellen-Datenbank-Hybrid. Farbenfroh, freundlich und mit strukturierter Datenästhetik.
Strukturiertes, auf Unternehmen ausgerichtetes Designsystem mit Fokus auf Klarheit, Konsistenz und Effizienz für datenintensive Webanwendungen.
App-Dashboard mit violetter Ästhetik, Navigation in der oberen Leiste, kartenbasierten Layouts und entwicklerorientierten Workflows.
„Der Browser, der für Sie surft.“ Transparente Oberflächen, warme Farbverläufe und ein Layout mit vorrangiger Seitenleiste.
Ausdrucksstarker Stil mit hohem Kontrast, kreativer Typografie und mutiger Farbwahl für visuell eindrucksvolle Oberflächen.
Ein visuelles System auf Magazin-Niveau, geprägt von Collagen: warmer Papierhintergrund, surreale Bilder von Gips und Architektur, übergroße Display-Schrift, haarfeine Linien, Abschnittsmarker in römischen Ziffern und winzige redaktionelle Anmerkungen. Inspiriert von der Produktionsqualität hochwertiger Printmagazine (Monocle, Apartamento, IDEA) und für eine funktionierende Website adaptiert.
Modulares Rasterlayout mit kartenartigen Blöcken, klarer Hierarchie, großzügigen Abständen und subtilen visuellen Kontrasten für übersichtliche, leicht erfassbare Oberflächen.
Kryptobörse. Kräftiger gelber Akzent auf monochromer Gestaltung, mit der Dringlichkeit eines Handelsraums.
Luxusautomobil. Dunkle, hochwertige Oberflächen und die präzise Ästhetik deutscher Ingenieurskunst.
Motorsport-Performance-Marke. Cockpit-Oberflächen in fast schwarzem Farbton, BMW M-Dreifarbenakzente und klare, technische Geometrie.
Starke visuelle Präsenz mit kräftiger Typografie, kontrastreichen Farben und selbstbewussten Layouts.
Rohe, von Betonarchitektur inspirierte Anti-Design-Ästhetik mit schmucklosen Elementen, abrupten Layouts und funktionalem Minimalismus.
Hypercar-Marke. Tiefschwarze Leinwand, monochrome Strenge und monumentale Schriftdarstellung.
Von gemütlichen Cafés inspirierte Oberfläche mit warmen Farbtönen, weicher Typografie und klaren Layouts für entspanntes Stöbern.
Open-Source-Terminplanung. Klare, neutrale Benutzeroberfläche und entwicklerorientierte Einfachheit.
Plattform für visuelle Gestaltung. Lebendiger violett-blauer Farbverlauf, großzügige Abstände und freundliche Formen.
Marke für Enterprise-Infrastruktur. Dunkle, vertrauenswürdige Oberflächen, Cisco Blue als Signal und technische Klarheit.
KI-Assistent von Anthropic. Warmer Terrakotta-Akzent und klares, redaktionell geprägtes Layout.
Kreativagentur. Organische Formen, sanfte Farbverläufe und ein kunstvoll gestaltetes Layout.
Weiche, abgerundete, dreidimensional anmutende Formen, die an formbaren Ton erinnern, mit verspielten, bauschigen Elementen und farbenfrohen Oberflächen.
Auf Einfachheit ausgerichtetes Design mit großzügigem Weißraum, gut lesbarer Typografie und einer begrenzten Farbpalette, die visuelle Unruhe reduziert.
Schnelle Analysedatenbank. Technischer Dokumentationsstil mit gelben Akzenten.
Eine kompakte, semantische Komponentensprache für moderne Webanwendungen: abgestufte neutrale Oberflächen, präzise Inter-Typografie, barrierefreie Steuerelemente, automatische Farbrollen für helle und dunkle Darstellungen sowie für den jeweiligen Zweck geeignete Diagrammpaletten.
Enterprise-KI-Plattform. Kräftige Farbverläufe und datenreiche Dashboard-Ästhetik.
Kryptobörse. Klare blaue Markenidentität, vertrauenswürdig und institutionell geprägt.
Lebendige, kontrastreiche Farbpaletten und Farbverläufe für ansprechende, einprägsame und moderne Nutzererlebnisse.
Plattform zur Integration von Tools. Modernes dunkles Design mit farbenfrohen Integrationssymbolen.
Minimalistisches Design im Stil der Gegenwart mit Bento-Grids, Unterstützung für den Dunkelmodus und leistungsstarken, barrierefreien Layouts.
Professionelles, markengerechtes Design mit strukturierten Rastern, minimalistischen Layouts und einheitlichen Enterprise-Mustern.
Futuristische Science-Fiction-Ästhetik mit dunklen Themen, leuchtenden Neonakzenten und immersiven räumlichen Elementen.
Verspieltes, charakterstarkes Design mit ausdrucksvoller Typografie und markanten Grafiken für Landingpages und kreative Projekte.
KI-orientierter Code-Editor. Elegante dunkle Oberfläche mit Farbverlaufsakzenten.
Ästhetik einer dunklen Cloud-Plattform mit modularen Rastern, glasartigen Panels und klarer Datenhierarchie für Produktivitäts-Dashboards.
Sprach- und Chat-Plattform. Tiefes Blurple, dunkle Oberflächen als Standard und verspielte Akzente.
Punktmuster-Darstellungstechnik, die mit einer begrenzten Farbpalette verschiedene Schattierungen simuliert und so nostalgische, kontrastreiche Retro-Optik erzeugt.
Handgezeichneter, skizzenhafter Stil mit Kritzeleien, handschriftlichen Schriftarten und unregelmäßigen Linien für einen verspielten, ungezwungenen Eindruck.
Kontrastreiches, theatralisches Design mit markanten Layouts, immersiven visuellen Elementen und ungewöhnlichen Kompositionen, die Aufmerksamkeit auf sich ziehen.
Von Magazinen inspiriertes redaktionelles Layout mit edler Serifentypografie, strukturierten Rastern und elegantem Leseerlebnis.
Anmutige, raffinierte Ästhetik mit filigraner Typografie, zurückhaltenden Farbpaletten und ausgefeilten Layouts, die Eleganz ausstrahlen.
KI-Sprachplattform. Dunkle, filmische Benutzeroberfläche mit Audio-Wellenform-Ästhetik.
Dynamischer, lebendiger Stil mit kräftigen Rahmen, geometrischen Formen, kontrastreichen Farben und ausdrucksvoller Typografie, die Bewegung und Vitalität vermittelt.
Klares, kontrastreiches Enterprise-Design für datenbasierte Arbeitsabläufe mit intuitiven Drag-and-drop-Mustern und strukturierten Layouts.
React native Plattform. Dunkles Thema, enge Laufweite und codeorientierte Gestaltung.
Lebendiges, charakterstarkes Design mit kräftigen Farben, verspielten Grafiken und dynamischen Layouts, die Kreativität und Struktur vereinen.
Von Spielen inspirierte Fantasy-Ästhetik mit eindrucksvollen, hochwertigen visuellen Elementen, satten Farbpaletten und immersiven thematischen Details.
Luxusautomobil. Redaktionelle Hell-Dunkel-Ästhetik, Ferrari-Rot-Akzente und filmisches Schwarz.
Kollaboratives Designtool. Lebendige Mehrfarbigkeit, verspielt und zugleich professionell.
Zweidimensionaler minimalistischer Stil mit lebendigen Farben, klarer Typografie und ohne 3D-Effekte für schnelle, benutzerfreundliche Oberflächen.
Website-Baukasten. Markantes Schwarz und Blau, Animationen im Mittelpunkt und designorientierte Gestaltung.
Zugängliches, intuitives Design mit abgerundeten Elementen, viel Weißraum und sanften Pastellfarbpaletten.
Zukunftsorientiertes Design mit technologieinspirierter Typografie, modernen Layouts und einer eleganten, innovationsgetriebenen Ästhetik.
Sanfte Farbverläufe und verlaufsreiche Oberflächen für moderne, verspielte Benutzeroberflächen mit visueller Tiefe.
Infrastrukturautomatisierung. Klar und professionell für Unternehmen, in Schwarz und Weiß.
Head-up-Display für Kampfjets und Hubschrauber. Phosphorgrün auf fast schwarzem Hintergrund, Datenüberlagerungen in Großbuchstaben, kantige Geometrie. Bei hohem Tempo und in großer Höhe ohne jeden Interpretationsspielraum.
Drehscheibe für die ML-Community. Sonniges gelbes Akzentfarbton, monospacegeprägte Identität, fröhlich und informationsdicht.
Unternehmenstechnologie. Carbon Design System, strukturierte blaue Farbpalette.
Kundenkommunikation. Freundliche blaue Farbpalette, dialogorientierte UI-Muster.
Redaktionelles Papierdesignsystem: warmer Pergamenthintergrund, tintenblaue Akzentfarbe, von Serifenschriften geprägte Hierarchie. Für Lebensläufe, einseitige Dokumente, Whitepaper, Portfolios, Präsentationen – alles, was sich wie hochwertiger Druck statt wie eine Benutzeroberfläche anfühlen soll. Von Grund auf mehrsprachig (EN · zh-CN · ja).
Kryptohandel. Dunkle Benutzeroberfläche mit violetten Akzenten, datenreiche Dashboards.
Supersportwagenmarke. Tiefschwarze Oberflächen, goldene Akzente, dramatische Typografie in Großbuchstaben.
Auf Conversion ausgerichtetes Design, das Hürden abbaut und Nutzer durch Klarheit, Vertrauen und Schnelligkeit zum Handeln bewegt.
Verspieltes, minimalistisches Design mit leuchtenden Farben, abgerundeten Formen, fühlbaren 3D-Rändern und freundlichen Illustrationen für zugängliche Benutzeroberflächen.
Asynchrone Videos von Loom. Violett als Primärfarbe, freundliche Oberflächen, videorientiertes Layout. Klar und professionell, ohne unternehmenskühl zu wirken.
KI-Full-Stack-Builder. Verspielte Farbverläufe, freundliche Entwicklerästhetik.
Dunkle, hochwertige Ästhetik mit markanten Überschriften, monochromatischer Farbpalette und exklusivem Charakter für luxuriöse Markenerlebnisse.
Globales Zahlungsnetzwerk. Warmer cremefarbener Hintergrund, pillenförmige Orbitformen, redaktionelle Wärme.
Googles Material Design mit geschichteten Oberflächen, dynamischer Gestaltung, integrierten Animationen und responsiven plattformübergreifenden Mustern.
Technologie-Einzelhandel. Fotografie im Mittelpunkt, Oberflächen für helle und dunkle Darstellungen, Meta Blue als Handlungsaufforderung.
Reduziertes Design mit viel Weißraum, klarer Typografie und zurückhaltender Farbe – für maximale Klarheit und Konzentration.
Anbieter von KI-Modellen. Markante dunkle Benutzeroberfläche mit Neonakzenten.
Dokumentationsplattform. Klar, mit grünen Akzenten und auf optimale Lesbarkeit ausgelegt.
Visuelle Zusammenarbeit. Leuchtend gelber Akzent, Ästhetik einer unendlichen Arbeitsfläche.
Missionsüberwachung für Raumfahrt und Luftfahrt. Dunkles Kontrollzentrum, bernsteinfarbene Telemetrie, monospacepräzise Darstellung. Funktionale Klarheit steht an erster Stelle.
Anbieter von Open-Weight-LLMs. Französische, technisch geprägte Minimalästhetik mit Violetttönen.
Zeitgenössischer redaktioneller Stil mit Serifentypografie, minimalistischen Farbpaletten und klaren Layouts für anspruchsvolle digitale Produkte.
Dokumentendatenbank. Grünes Blatt als Markenzeichen, Fokus auf Entwicklerdokumentation.
Monospacegeprägtes, von der Matrix inspiriertes Design mit starken Kontrasten, kompakter Informationsdichte und Hacker-Ästhetik.
Moderne Interpretation des Brutalismus mit kräftigen Rändern, leuchtenden Akzentfarben und rohen, kontrastreichen Layouts auf warmen Oberflächen.
Elektrische Neonleuchteffekte und kontrastreiche Farbkombinationen für markante, aufmerksamkeitsstarke Benutzeroberflächen.
Sanft hervorgehobene UI-Elemente mit inneren und äußeren Schatten auf monochromatischen Oberflächen – für eine fühlbare, eingebettete Anmutung.
Ein klares, produktorientiertes Standarddesign. Geeignet, wenn keine bestimmte Stimmung gefragt ist – ideal für B2B-Tools, Dashboards und Funktionsseiten.
Sportmode-Einzelhandel. Monochrome Benutzeroberfläche, riesige Schrift in Großbuchstaben, randfüllende Fotografie.
All-in-one-Arbeitsbereich. Warmer Minimalismus, Serifenschriften für Überschriften, sanfte Oberflächen.
GPU-Computing. Energiegeladene Ästhetik in Grün und Schwarz, geprägt von technischer Leistungsstärke.
LLMs lokal ausführen. Terminalorientiert, monochrome Schlichtheit.
KI-Coding-Plattform. Dunkles Design mit Fokus auf Entwickler.
Vom Retro-Arcade-Stil inspiriertes Design mit Pixel-Schriften, gepunkteten Rändern, verspielten kontrastreichen Farben und 8-Bit-Spielästhetik.
Papiertexturiertes, vom Druck inspiriertes Design mit wenigen Farben, klarer Serif- und Sans-Serif-Typografie und fühlbaren Oberflächen.
Dialogorientierte KI-Suchmaschine. Tiefdunkler Hintergrund, prägnante Typografie, ein einzelner Violettakzent, dichte Informationshierarchie.
Räumliche Tiefe durch isometrische Ansichten, Fluchtpunkte und geschichtete Elemente, die mit dreidimensional wirkendem Realismus den Blick lenken.
Visuelle Entdeckung. Roter Akzent, Kachelraster, Bilder im Mittelpunkt.
Einzelhandel für Spielkonsolen. Layout mit drei Oberflächenebenen, zurückhaltende, souveräne Display-Typografie, cyanfarbene Skalierung beim Hover.
Produktanalytik. Verspieltes Igel-Markenzeichen, entwicklerfreundliche dunkle Benutzeroberfläche.
Von Apple inspirierte Premium-Ästhetik mit präzisen Abständen, moderner Typografie und einer raffinierten, ausgefeilten visuellen Sprache.
Ausgefeiltes, geschäftstaugliches Design mit moderner Typografie, klar strukturierten Layouts und einem vertrauenswürdigen visuellen Auftritt.
Von Printmedien inspirierte visuelle Sprache für Bücher, Magazine und Berichte – mit redaktionellen Rastern und ausdrucksstarker Typografie.
Produktivitäts-Launcher. Elegantes dunkles Chrome mit lebendigen Farbverläufen als Akzent.
Sorgfältig zusammengestellter, moderner Minimalismus mit eleganter Serifentypografie und zurückhaltenden, raffinierten Farbpaletten.
Französische Automobilmarke. Lebendige Aurora-Farbverläufe, NouvelR-Typografie, kraftvolle Energie.
ML-Modelle über API ausführen. Klare weiße Arbeitsfläche, Code im Mittelpunkt.
E-Mail API. Minimalistisches dunkles Design mit Monospace-Akzenten.
Nostalgisches Design mit Vintage-inspirierter Typografie, kontrastreichen Retro-Farbpaletten und visuellen Elementen mit nostalgischem Flair.
KI-Videogenerierung. Kinoreife dunkle Benutzeroberfläche, medienreiches Layout.
Headless-CMS. Roter Akzent, redaktionelles Layout mit Inhalten im Mittelpunkt.
Fehlerüberwachung. Dunkles Dashboard mit hoher Datendichte und pink-violettem Akzent.
Von Shadcn/ui inspiriertes Design mit minimalistischen, klaren Komponenten, monochromer Farbpalette und Utility-First-Mustern.
E-Commerce-Plattform. Vorwiegend dunkles, kinoreifes Design mit neongrünem Akzent und besonders leichter Typografie.
Unkompliziertes, schnörkelloses Design mit klarer Typografie, neutralen Farben und intuitiven Layouts, die sich dezent im Hintergrund halten.
Nachbildung realer Materialien mit strukturierten Oberflächen, 3D-Effekten und vertrauten Anleihen aus der physischen Welt für intuitive digitale Benutzeroberflächen.
Kommunikationsplattform für den Arbeitsplatz. Aubergine als Hauptfarbe, Logo-Palette mit mehreren Akzentfarben, helle Oberflächen mit dunkler Seitenleiste – warm und einladend.
Moderne, minimalistische Ästhetik mit klaren Linien, gezielt abgestimmter Farbpalette, subtilen Interaktionen und einheitlichen Abständen.
Raumfahrttechnologie. Kontrastreiches Schwarz-Weiß, randlose Bildwelten, futuristische Anmutung.
Großzügiger Leerraum, einheitliche Innenabstände und rasterbasierte Layouts sorgen für klare, gut lesbare Oberflächen mit genügend Freiraum.
Musikstreaming. Lebendiges Grün auf dunklem Grund, markante Typografie, Albumcover im Mittelpunkt.
Globale Kaffeemarke. Vierstufiges Grünsystem, warme cremefarbene Fläche, vollständig abgerundete Schaltflächen.
Erzählorientiertes Design, das visuelle Elemente, Texte und Interaktionen einsetzt, um Nutzer durch fesselnde und emotional berührende Erlebnisse zu führen.
Open-Source-Alternative zu Firebase. Dunkles Smaragdgrün, Code im Mittelpunkt.
Schneller E-Mail-Client. Hochwertige dunkle Benutzeroberfläche, für die Tastatur optimiert, violetter Schimmer.
Vom klassischen Blockspiel inspiriertes Design mit verspielten Farben, markanten Display-Schriften und kompakten, energiegeladenen Layouts.
Technologiemagazin. Dichte Broadsheet-Anmutung auf papierweißem Grund, individuelle Serifenschrift für Überschriften, Monospace-Vorspänne, tintenblaue Links.
Open-Source-KI-Infrastruktur. Technisches Design im Bauplanstil.
Redaktionell-technisches Designsystem. Neutrale Fläche, einzelner zinnoberroter Akzent, scharfe Ecken, Geist-Typografie, harte Schatten, strukturierte Komposition.
Oberfläche: ein kosmisch-premiumhaftes, gläsern wirkendes dunkles System, das die unmittelbare Ehrfurcht vor einer Sonnenfinsternis einfängt – obsidianschwarze Oberflächen, bernsteinfarbene „Korona“-Highlights und cyanfarbene atmosphärische Akzente.
Finanzhandelsterminal im Bloomberg-Stil. Ausschließlich dunkles Design, hohe Datendichte, cyan- und korallfarbene Kauf-/Verkaufssignale. Alles ist aus zwei Metern Entfernung auf einen Blick lesbar.
Mobilitätsplattform. Kräftiges Schwarz-Weiß, enge Typografie, urbane Energie.
Frontend-Bereitstellung. Präzises Schwarz-Weiß, Geist-Schrift.
Lebhaftes, farbenfrohes Design mit markanter, verspielter Typografie, warmen Akzenten und dynamischer visueller Energie.
Nostalgie von den 1950er- bis zu den 1990er-Jahren mit skeuomorphen Details, körnigen Texturen, Retro-Farbpaletten und pixelartiger Typografie.
Globale Telekommunikationsmarke. Monumentale Versalien als Display-Schrift, Kapitelbänder in Vodafone-Rot.
Framework für KI-Agenten. Tiefschwarze Fläche, smaragdgrüner Akzent, konsequent terminalorientiert.
Magazin-Ästhetik mit Serifenschriften im Mittelpunkt. Terrakottafarbener Akzent auf warmem, gebrochen weißem Papier – ideal für lange Texte, redaktionelle Inhalte und markenorientierte Marketingseiten.
Modernes Terminal. Dunkle, IDE-ähnliche Oberfläche mit blockbasierter Befehlsoberfläche.
Kollaborationsplattform. Momentum-Typografie, blaues Aktionsfarbsystem, Akzentspektrum für mehrere Nutzer.
Visueller Webseitenersteller. Polierte Marketing-Website-Ästhetik mit blauen Akzenten.
Visuelle Markensprache für WeChat Mini Programs, offizielle Konten und Erweiterungen des offenen Ökosystems.
Technologiemagazin. Dichte Broadsheet-Anmutung auf papierweißem Grund, individuelle Serifenschrift für Überschriften, Monospace-Vorspänne, tintenblaue Links.
KI-Labor von Elon Musk. Kontrastreiche Monochromie, futuristischer Minimalismus.
Lifestyle-Social-Plattform mit nutzergenerierten Inhalten. Unverwechselbares Markenrot, großzügige Rundungen, Inhalte im Mittelpunkt.
Automatisierungsplattform. Warmes Orange, freundliche Illustrationen.
Keine passenden Systeme gefunden. Probiere einen anderen Namen oder eine andere Kategorie.
Von der Referenz zur Oberfläche
Achte nicht nur auf die Akzentfarbe. Vergleiche Typografie, Abstände, Komponenten und Layout mit der Art von Oberfläche, die du entwickelst.
Gib deinem KI-Agenten die Designregeln und eine konkrete Aufgabe. Halte die Quelle und die bestehenden Vorgaben deines Projekts zusammen.
Prüfe echte Inhalte, Komponentenstatus, die Bedienung per Tastatur und eine schmale Bildschirmansicht, bevor du die Gestaltungsrichtung auf dein Projekt überträgst.
Ihre eigene Designsprache
Beginnen Sie mit einer Website, die Ihnen gefällt, oder einem eigenen Entwurf. Machen Sie daraus ein System, das Sie prüfen, verfeinern und wiederverwenden können.

Fügen Sie unter Design Systems einen Website-Link hinzu. OpenDesign liest verfügbare Seitenstile und Assets und stellt Farben, Typografie und wiederverwendbare Gestaltungsregeln zusammen. Prüfen Sie das Ergebnis und verfeinern Sie es mit Ihrem Agent.
Wählen Sie im Menü „Mehr“ Ihres Projekts „Designsystem erstellen“. OpenDesign legt aus den vorhandenen Dateien ein neues Designsystem-Projekt an. Ihr Agent leitet daraus visuelle Regeln, Komponenten und Muster ab.
Prüfen Sie Gestaltungsregeln, Style-Tokens und UI-Vorschauen. Verfeinern Sie das erzeugte Paket, bevor Sie es für Ihren nächsten Entwurf verwenden.
Den Workflow verbinden
Vergleichen Sie OpenDesign mit anderen Designtools und wählen Sie einen Workflow für Ihre Arbeitsweise.
Designtools vergleichenAgentEntdecken Sie Designleitfäden für Coding-Agents: vom Briefing bis zur Prüfung der erstellten Oberfläche.
Agent-Leitfäden ansehenSkillsFinden Sie wiederverwendbare Skills für konkrete Designaufgaben und geben Sie Ihrem Agent eine gezieltere Arbeitsweise.
Skills entdeckenMit OpenDesign gestalten
Wähle einen Leitfaden aus, gib deinem KI-Agenten einen klaren Auftrag und erstelle deine nächste Oberfläche mit OpenDesign.