↖ Alle KI-Skills

KI-Skill / Gestalten und umsetzen

GUI gestalten

Entwirft zugängliche Weboberflächen aus Aufgabe, Inhalt und visueller Richtung.

Leitlinien

Wahrnehmbar, bedienbar, verständlich und robust bilden die vier Prüfprinzipien.

W3C WCAG 2.2 ↗

Theme-Variablen machen visuelle Entscheidungen im Projekt wiederverwendbar.

Tailwind CSS / Theme variables ↗

Browsertests prüfen sichtbares Nutzerverhalten statt interne Implementierungsdetails.

Playwright Best Practices ↗

So setzt der Skill diese Leitlinien um

Der Skill leitet Struktur, Inhalte und visuelle Sprache aus Zielgruppe und Hauptaufgabe ab und prüft die Oberfläche breit, schmal, per Tastatur und auf Accessibility.

  • Sind Hauptaufgabe und wichtigste Aktion ohne Erklärung erkennbar?
  • Wirkt die Oberfläche eigenständig und passt sie zu Inhalt und Zielgruppe?
  • Funktionieren schmale und breite Ansichten sowie sichtbarer Fokus und Tastaturbedienung?
  • Sind Kontrast, reduzierte Bewegung und relevante Accessibility-Aspekte geprüft?

Dokumentation und Übergabe

Visuelle Richtung, geprüfte Ansichten und bekannte Einschränkungen werden im GUI-Briefing und im Task-Dokument festgehalten.

Wie bei jedem Skill referenziert der zugehörige Commit das Task-Dokument.