design-farmer – Skill für AI-Coding-Agenten, das Codebasen liest und in ein Design-System überführt

Analysiert Repositories, extrahiert bestehende Designmuster und entwickelt sie zu einem OKLCH-basierten Design-System mit Tokens, Komponenten, Tests und Dokumentation weiter.

Warum ist das nötig?

Wenn man mit AI-Agenten und Vibe Coding arbeitet, bricht die Design-Konsistenz meist als Erstes auseinander. Farben sind uneinheitlich, Abstände schwanken, und der Dark Mode wird vernachlässigt. Gibt man dem Agenten klare Design-Einschränkungen, entsteht eine deutlich konsistentere UI – aber das manuell zu erstellen, ist unverhältnismäßig aufwendig.

Design Farmer automatisiert diesen gesamten Prozess. Es liest die Codebasis, erfasst, was bereits vorhanden ist, und baut darauf ein produktionsreifes Design-System auf oder aktualisiert es. Es ist nicht nötig, Token-Dateien von Hand anzulegen oder Farbpaletten per Copy-and-paste zu übernehmen.

Hauptfunktionen

• Aufbereitung von OKLCH-basierten Design-Tokens
• Aufbau einer Token-Hierarchie aus primitiven und semantischen Tokens
• Aufbau barrierefreiheitsorientierter Basiskomponenten
• Erweiterung für dark theme
• Erstellung von DESIGN.md
• Validierung von Style Drift und fehlerhafter Token-Nutzung

Ziel ist es, einen wiederholbaren Design-Workflow zu schaffen, auf den der Agent auch bei späteren Arbeiten fortlaufend zurückgreifen kann.

Wenn man die von awesome-design-md bereitgestellte Datei DESIGN.md im Projekt ablegt, versteht das Tool das vom Nutzer gewünschte System und startet darauf aufbauend.