OilOil UI/UX Guide
Skill Verifiziert AktivFühren Sie eine strukturierte UI/UX-Beratung durch, um (a) ein projektspezifisches Designsystem zu entwerfen und `design-spec.md` auszugeben, (b) eine bestehende Benutzeroberfläche mit priorisierten Korrekturen zu überprüfen oder (c) kompakte Do/Don't-Regeln für eine Oberfläche auszugeben. Löst aus, wenn der Benutzer ein Designsystem oder Designtoken definieren/erstellen/verfeinern möchte, eine Designspezifikation anfordert, eine vollständige UI-Überprüfung eines Bildschirms/Mockups/PR anfordert oder Designregeln für einen Oberflächentyp wünscht. Löst NICHT aus für enge Einzelfragen ("Ist diese Farbe OK?", "Sollte dieser Button größer sein?") – beantworten Sie diese direkt, ohne den Beratungsablauf zu starten.
Zur Bereitstellung einer strukturierten, kollaborativen UI/UX-Beratung, die Benutzern hilft, Designsysteme zu erstellen oder zu verfeinern und umsetzbare Rückmeldungen zu ihren Benutzeroberflächen zu erhalten.
Funktionen
- Strukturierte UI/UX-Beratung
- Co-Design von Designsystemen
- UI-Überprüfung mit priorisierten Korrekturen
- Generierung von Designregeln
- Code-Analyse zur Extraktion von Designtoken
- Interaktiver interviewbasierter Workflow
Anwendungsfälle
- Definition eines projektspezifischen Designsystems
- Überprüfung einer bestehenden Benutzeroberfläche auf priorisierte Korrekturen
- Generierung kompakter Do/Don't-Regeln für einen Oberflächentyp
- Verfeinerung von Designtoken oder visueller Sprache
- Fachkundige Anleitung zu UI/UX-Best Practices
Nicht-Ziele
- Beantwortung enger, einmaliger Designfragen direkt
- Aufzwingen einer einzelnen ästhetischen Präferenz ohne Benutzereingabe
- Ersetzen bestehender Designentscheidungen des Benutzers ohne Beratung
- Auslösen für Anfragen, die sich nicht auf UI/UX-Designsysteme oder -überprüfungen beziehen
Praktiken
- Entwicklung von Designsystemen
- UI/UX-Überprüfung
- Designberatung
- Nutzerzentriertes Design
Installation
npx skills add oil-oil/oiloil-ui-ux-guideFührt das Vercel skills CLI (skills.sh) via npx aus — benötigt Node.js lokal und mindestens einen installierten skills-kompatiblen Agent (Claude Code, Cursor, Codex, …). Setzt voraus, dass das Repo dem agentskills.io-Format folgt.
Qualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Ui Ux Pro Max
100UI/UX design intelligence with searchable style, palette, typography, and chart databases. Use when designing UI components, choosing colors/fonts, reviewing code for UX issues, building landing pages, or implementing responsive layouts.
A11y Audit
100Accessibility audit covering WCAG 2.2, contrast, focus, keyboard, screen reader, touch targets
UI UX Pro Max Brand Skill
99Markenstimme, visuelle Identität, Messaging-Frameworks, Asset-Management, Markenkonsistenz. Aktivieren für markenbezogene Inhalte, Tonalität, Marketing-Assets, Markeneinhaltung, Stilrichtlinien.
Theme Builder
96Build light/dark theme from scratch or improve existing. Complete surface, text, and interactive color system
Figma Generate Library
100Erstellen oder aktualisieren Sie ein professionelles Designsystem in Figma aus einer Codebasis. Verwenden Sie dies, wenn der Benutzer Variablen/Tokens erstellen, Komponentenbibliotheken erstellen, Theming (helle/dunkle Modi) einrichten, Foundations dokumentieren oder Lücken zwischen Code und Figma abgleichen möchte. Diese Fähigkeit lehrt WAS gebaut werden soll und in WELCHER REIHENFOLGE — sie ergänzt die `figma-use`-Fähigkeit, die lehrt WIE die Plugin-API aufgerufen wird. Beide Fähigkeiten sollten zusammen geladen werden.
Refactor Plan
100Prioritized redesign action plan covering quick wins, medium effort, major rework