HomeCasa Prompts

Design-Tokens und Komponentenspezifikationen

Definieren Sie Design-System-Tokens (primitiv, semantisch und komponentenbezogen) und spezifizieren Sie Komponenten mit Zuständen, Varianten und Barrierefreiheit. Entwickelt für ChatGPT, Claude und Gemini. Er enthält 5 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.

Experte · Text · Redaktionelle Prüfung ausstehend

Entwickelt für:

Prompt

Handle als Design-System-Designer mit Erfahrung darin, Tokens von Figma in Code zu überführen.

Produkt: {{product}}.
Plattformen: {{platforms}}.
Vorhandene Markenidentität: {{brand}}.
Prioritäre Komponenten: {{components}}.
Ziel für die Barrierefreiheit: {{a11y_level}}.

Liefere in dieser Reihenfolge:
1. Eine dreistufige Token-Architektur (primitiv → semantisch → Komponente) und eine Namenskonvention, mit Beispielen.
2. Primitive Tokens: eine Farbskala (9–10 Stufen pro Farbton, aus der Marke abgeleitet), Typografie (modulare Skala mit Größen, Zeilenhöhen und Schriftgewichten), Abstände (Basis 4 oder 8), Radien, Schatten, Deckkraftwerte und Animationsdauern.
3. Semantische Tokens für helles und dunkles Theme (Hintergrund, Fläche, Text, Rahmen, Aktion sowie die Zustände Erfolg, Warnung, Fehler und Information) und prüfe den Kontrast jedes Text-Hintergrund-Paars.
4. Einen Export im W3C-Design-Tokens-Format (JSON) und das entsprechende Pendant als CSS Custom Properties.
5. Für jede prioritäre Komponente ein Spezifikationsblatt mit: Aufbau, Varianten, Größen, Zuständen (Ruhe, Hover, Fokus, Aktiv, Deaktiviert, Laden, Fehler), verwendeten Tokens, Tastaturverhalten, ARIA-Attributen und Dont's.
6. Regeln zur Governance: wann ein neues Token angelegt wird, wie man es als veraltet markiert und wie man versioniert.

Vorgaben:
- Erfinde keine Markenfarben: Wenn ich keine habe, schlage eine vorläufige Palette vor, die mit [VORLÄUFIG] markiert ist.
- Nenne die berechneten Kontrastverhältnisse; falls eines durchfällt, schlage eine Alternative vor.
- Frage mich nach allem, was fehlt, bevor du die semantischen Tokens definierst.

So verwenden Sie ihn

  1. Listen Sie die vorhandenen Markenfarben und Schriften auf (möglichst mit Hex-Werten).
  2. Wählen Sie zum Start einige prioritäre Komponenten: Button, Textfeld, Karte und Modal.
  3. Importieren Sie das JSON in Tokens Studio für Figma oder Style Dictionary, um Code zu erzeugen.
  4. Prüfen Sie die Kontrastverhältnisse mit einem externen Werkzeug, bevor Sie die Palette freigeben.

Anwendungsbeispiel

Produkt: Banking-App für Freiberufler · Plattformen: Web und Mobile · Marke: Blau #1E40AF und die Schrift Inter · Komponenten: Button, Eingabefeld, Karte, Modal.

Beispielergebnis

1. Token-Architektur

EbeneBeispielVerwendung
Primitivcolor.blue.800 = #1E40AFRohwert, nie direkt in Komponenten
Semantischcolor.action.primary = {color.blue.800}Absicht, wechselt je Theme
Komponentebutton.primary.bg = {color.action.primary}Nur von einer Komponente genutzt

Konvention: kategorie.eigenschaft.variante.zustand, z. B. color.text.on-action.disabled.

3. Kontrast (helles Theme)

Text/HintergrundVerhältnisWCAG 2.2 AA
Weiß auf Blau #1E40AF8,72:1✅
Weiß auf Koralle #F973622,74:1❌
#111827 auf Koralle #F973626,47:1✅

Vorschlag: Koralle nur als Hintergrund mit dunklem Text verwenden oder für Text auf Weiß eine abgedunkelte Koralle nutzen (5,62:1 mit #B4412F, [VORLÄUFIG]).

4. Export

{
  "color": {
    "blue": { "800": { "$type": "color", "$value": "#1E40AF" } },
    "action": { "primary": { "$type": "color", "$value": "{color.blue.800}" } }
  }
}
:root { --color-blue-800: #1E40AF; --color-action-primary: var(--color-blue-800); }

5. Button — Zustände

Ruhe, Hover, Fokus (sichtbarer 2-px-Ring), aktiv, deaktiviert, lädt (aria-busy="true"), Fehler …

Wichtige Fakten

Kategorie
UI/UX-Design · Designsysteme
Ausgabetyp
Text
Niveau
Experte
Entwickelt für
ChatGPT, Claude und Gemini
Verifiziert in
Redaktionelle Prüfung ausstehend
Variablen
Produkt, Plattformen, Markenidentität, Prioritäre Komponenten und Ziel für die Barrierefreiheit
Sprache
Deutsch
Preis
Kostenlos, ohne Anmeldung
Aktualisiert
07.11.2026

Häufig gestellte Fragen

Wozu brauche ich semantische Tokens, wenn ich schon primitive habe?

Primitive beschreiben Werte („Blau 600“), semantische Tokens beschreiben den Zweck („Farbe der primären Aktion“). Diese Ebene erlaubt es, Themes zu wechseln oder ein Rebranding durchzuführen, ohne jede Komponente anzufassen.

Welches Token-Format sollte ich verwenden?

Das Format der W3C Design Tokens Community Group ist der sich etablierende Standard, und Werkzeuge wie Tokens Studio und Style Dictionary können daraus CSS-, iOS- oder Android-Code erzeugen.

Wofür ist dieser Prompt gedacht?

Definieren Sie Design-System-Tokens (primitiv, semantisch und komponentenbezogen) und spezifizieren Sie Komponenten mit Zuständen, Varianten und Barrierefreiheit.

Mit welchen KI-Tools funktioniert er?

Er ist für ChatGPT, Claude und Gemini entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.

Wie passe ich den Prompt an?

Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (Produkt, Plattformen, Markenidentität, Prioritäre Komponenten und Ziel für die Barrierefreiheit). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.

Brauche ich Erfahrung, um ihn zu verwenden?

Er ist für Experten: Er richtet sich an Personen mit Erfahrung im Thema, die das Ergebnis beurteilen und anpassen können.

Ist dieser Prompt kostenlos?

Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.

Kann ich der KI-Ausgabe vertrauen?

Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.

Ähnliche Prompts