Was macht design-md-flow?
Portabler DESIGN.md-Workflow-Skill für agentengesteuertes Frontend-Design
Überblick
Harzva/design-md-flow ist ein portabler Skill für KI-Agenten, der einen strukturierten Workflow für Frontend-Design-Aufgaben bereitstellt. Er basiert auf einer zentralen DESIGN.md-Datei, die Designentscheidungen, Komponentenstrukturen, visuelle Richtlinien und Interaktionsmuster dokumentiert.
Funktionsweise
- Initialisierung: Der Agent liest die
DESIGN.md-Datei, um die Designanforderungen und -konventionen zu verstehen. - Analyse: Er identifiziert die zu erstellenden oder zu modifizierenden UI-Komponenten basierend auf den dokumentierten Anforderungen.
- Ausführung: Der Agent erstellt oder aktualisiert die angegebenen Komponenten unter Einhaltung der Designrichtlinien.
- Validierung: Nach der Implementierung überprüft der Agent die Konsistenz mit der
DESIGN.mdund nimmt bei Bedarf Anpassungen vor.
Unterstützte Plattformen
- Claude Code (Anthropic)
- Cursor
- Codex (GitHub Copilot)
Verwendung
# In einem Projekt mit einer DESIGN.md:
- Platziere eine DESIGN.md im Stammverzeichnis des Projekts.
- Definiere Designprinzipien, Komponentenstruktur und visuelle Richtlinien.
- Der Agent folgt dem Workflow, um UI-Elemente konsistent zu implementieren.
Beispiel einer DESIGN.md
# Designrichtlinien für MyApp
## Grundprinzipien
- Minimalistisch und zugänglich
- Konsistente Farbpalette (primär: #4A90D9)
- Abstandssystem: 4px Raster
## Komponenten
- **Button**: Primär, Sekundär, Tertiär
- **Card**: Mit Schatten, abgerundeten Ecken und optionalem Header
Warum dieser Skill?
Er reduziert manuelle Anweisungen, stellt konsistente Ergebnisse sicher und ermöglicht eine enge Zusammenarbeit zwischen Agent und Entwickler über eine gemeinsame Design-Datei.