Designtokens
Ersetzen Sie verstreute Farben und Abstände durch benannte Designtokens.
:root { --focus-ring: #2458b8; }
button:focus-visible, a:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 4px;
}- Modelle
- Richten Sie einen OpenAI-kompatiblen oder Anthropic-Endpunkt mit Basis-URL und gegebenenfalls API-Schlüssel ein. Testen Sie die Verbindung. Ein lokaler Modellserver muss laufen; entfernte Werkzeuge können Daten separat übertragen.
- Projekt
- Prüfen Sie dunkles Design und Tastaturfokus, damit ein Kontrastproblem nicht verdeckt wird.
- Vor dem Anwenden prüfen
- Vergleichen Sie das tatsächliche Verhalten mit dem erwarteten Ergebnis. Klären Sie fehlgeschlagene Prüfungen vor weiteren Änderungen.
:root { --focus-ring: #2458b8; }
button:focus-visible, a:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 4px;
}Überführen Sie eine Designentscheidung in funktionierenden Oberflächencode
Designrückmeldungen werden umsetzbar, wenn sie neben dem Aussehen eine Interaktion benennen. Mith DesignLab ist eine Programmierumgebung für Windows, um solche Rückmeldungen in prüfbare Änderungen Ihres Oberflächenprojekts zu überführen. Beschreiben Sie das Element, sein umgebendes Layout und was beim Erreichen des Elements geschehen soll. Das Gespräch kann dann die Stile und das Verhalten behandeln, die dieses Erlebnis erzeugen.
Der hier gezeigte Fokusrahmen-Token ist ein mögliches Projektbeispiel. Sie könnten den Assistenten prüfen lassen, welche Schaltflächen und Links ihn verwenden, und um eine gezielte Anpassung mit Erklärung der betroffenen Selektoren bitten. Prüfen Sie das tatsächliche CSS, bevor Sie die gerenderte Oberfläche per Tastaturnavigation kontrollieren. Ein Farbwert im Beispiel beweist nicht, dass jeder Hintergrund, jede Komponente oder Interaktion barrierefrei ist; eine automatische Designzertifizierung wird nicht impliziert.
Verbinden Sie Ihr gewähltes Modell über einen unterstützten OpenAI-kompatiblen oder Anthropic-Endpunkt, erforderlichenfalls mit Zugangsdaten. Optionen für KI ohne Zensur beziehen sich auf dort verfügbare Modelle; Einschränkungen, Werkzeuge und Kontextkapazität hängen vom Modell und Server ab. Führen Sie nach der Prüfung von Änderungsvorschlägen die relevanten Projektprüfungen aus und untersuchen Sie betroffene Zustände im Browser. Knüpfen Sie die visuelle Abnahme an die Oberfläche, die Menschen tatsächlich benutzen.
Mit Designrückmeldungen arbeiten
Welche Rückmeldung hilft mehr als die Bitte um ein besseres Aussehen?
Benennen Sie Komponente, Zustand und beobachtbares Problem. Erklären Sie beispielsweise, dass der Tastaturfokus vor einem bestimmten Bereich verschwindet. Fügen Sie relevante Stile und ein Zielverhalten hinzu, damit der Änderungsvorschlag ein konkretes Abnahmekriterium erhält.
Bestätigt das Fokusrahmen-Beispiel Barrierefreiheit?
Nein. Es veranschaulicht CSS, das Sie prüfen oder anpassen könnten. Prüfen Sie das gerenderte Ergebnis im Zusammenhang mit umgebenden Farben, Tastaturverhalten und Projektanforderungen. Ein Token belegt nicht die Barrierefreiheit einer ganzen Oberfläche oder eines Komponentensystems.
Wie sollte ich eine Änderung an einem gemeinsam genutzten Stil-Token prüfen?
Ermitteln Sie die nutzenden Komponenten und prüfen Sie deren betroffene Zustände. Testen Sie mehr als die ursprünglich genannte Komponente. Gemeinsame Stile können sonst unabhängige Ansichten ändern, selbst wenn die bearbeitete Datei klein ist.
Können private Designdateien auf einer lokalen Modellverbindung bleiben?
Ein lokales Modell benötigt einen separat laufenden Server und bestimmt nur das Ziel dieses Endpunkts. Andere Werkzeuge können Daten anderswohin senden. Prüfen Sie diese Verbindungen und teilen Sie nur den Designkontext, der die gewünschte Codeänderung erklärt.
Mith DesignLab · Aktualisiert 2026-10-25