Communitygithub.com

siuserxiaowei/visual-taste-lab

VI-first UI/UX-Design-Language-Skill für Codex und Claude Code – KI macht zuerst ein visuelles Identitätsaudit, bevor Seiten geschrieben werden

Was ist visual-taste-lab?

Visual Taste Lab ist eine spezialisierte UI/UX-Design-Fertigkeit für KI-gestützte Coding-Tools wie Codex und Claude Code. Sie stellt sicher, dass der Entwicklungsprozess mit einer visuellen Identitätsprüfung beginnt, bevor eine einzige Codezeile geschrieben wird. Durch die Analyse von Markenvorgaben, Farbschemata, Typografie und Designsystemen erstellt der Skill einen konsistenten visuellen Rahmen, der die gesamte Benutzeroberfläche leitet. Dies verhindert spätere kostspielige visuelle Inkonsistenzen und stellt sicher, dass das Endprodukt mit der Markenidentität übereinstimmt. Der Skill unterstützt die Ausgabe von Design-Audit-Berichten und die automatische Generierung von UI-Komponenten auf der Grundlage von Branding-Richtlinien.

Funktioniert mit✓Claude Code✓Codex CLI~Cursor
npx skills add siuserxiaowei/visual-taste-lab

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht visual-taste-lab?

VI-first UI/UX-Design-Language-Skill für Codex und Claude Code – KI macht zuerst ein visuelles Identitätsaudit, bevor Seiten geschrieben werden

Überblick

Dieser Skill ermöglicht es KI-Agenten, eine visuelle Identitätsprüfung (Visual Identity Audit) durchzuführen, bevor sie Benutzeroberflächencode generieren. Er konzentriert sich auf die Konsistenz des Designs und die Markenkonformität.

Funktionen

  • Visuelles Identitätsaudit: Analysiert Markenrichtlinien, Logos, Farbschemata und Typografie.
  • Design-Prinzipien: Legt Kernprinzipien wie Abstände, Schriften, Farben und UI-Muster fest.
  • Code-Generierung: Generiert UI-Komponenten und Seiten mit dem etablierten visuellen Frameworks.
  • Unterstützte Plattformen: Entwickelt für Codex und Claude Code.

Verwendung

# Beispiel für die Verwendung mit Claude Code
claude 'Führe ein visuelles Identitätsaudit für diese Marke durch und generiere eine Landingpage'

Workflow

  1. Audit-Phase: Analysiere Markenvorgaben, bestehende Designs und Referenzmaterialien.
  2. Framework-Phase: Erstelle ein visuelles Design-Framework basierend auf dem Audit.
  3. Implementierungsphase: Generiere UI-Komponenten und Seiten mit dem Framework.

Konfiguration

Keine spezielle Konfiguration erforderlich. Der Skill arbeitet auf Basis der vom Benutzer bereitgestellten Markeninformationen.

Lizenz

MIT

Verwandte Skills