Aug 2026
UI/UX-Wissensdatenbank für KI-Agenten
Designleitfaden, Build-Playbook und Regelprotokoll, die Coding-Agenten vor dem Bau einer Oberfläche lesen
- KI
- Wissensdatenbank
- Dauer
- 1 Monat
- Rolle
- Owner und Autorschaft, mit Claude Code als Co-Autor
Überblick
Eine strukturierte Design-Wissensdatenbank, die Claude Code oder jeder andere Coding-Agent beim Bau von Websites, Dashboards und Apps liest. Sie enthält einen Designleitfaden mit 21 Kapiteln auf Basis der UI/UX-Videos von Kole Jain, ein Build-Playbook mit sechs Checkpoints, ein Protokoll festgelegter Regeln und geprüfte Ressourcen für den Bau.
Tools
- Claude Code
- Markdown
- Next.js
- Tailwind CSS
- shadcn/ui
Warum von Agenten gebaute Oberflächen generisch wirken
KI-Coding-Agenten liefern solide, aber generische Oberflächen: Ein vager Prompt bekommt den statistischen Durchschnitt, das Modell sieht nie sein eigenes Rendering, und ohne Designsystem driften Werte von Seite zu Seite ab. Designratschläge aus Videos sind verstreut, manchmal widersprüchlich und manchmal veraltet für einen echten Build mit Next.js und Tailwind 4.
Was sie enthält
Den Kern bildet ein Leitfaden mit 21 Kapiteln, destilliert aus rund 50 UI/UX-Videos von Kole Jain, mit konkreten Werten für Typografie, Farbe, Layout, Abstände, Komponenten, Dashboards, Mobile, Formulare, Tabellen, Checkout, Animation und Anti-Patterns. Daneben steht eine Synthese aus 201 Videos darüber, warum KI-gebaute Frontends scheitern und was sie repariert, ausgewertet von 10 parallelen Opus-Agenten. Ressourcenkataloge listen rund 76 shadcn-Repositories mit ihren Lizenzen und 18 Foto- und Video-APIs mit einem Lizenz-Spickzettel.
Wie ein Agent sie nutzt
Das Build-Playbook führt ein Projekt durch die Phasen 0 bis 8 mit sechs Gates: freigegebene Referenzen vor dem Code, eine Designdatei vor dem Scaffolding, echte Texte und Assets, Hero-Varianten, Screenshot-Prüfungen auf Desktop und Mobilgeräten sowie ein Anti-Pattern-Audit mit Build und Lint. Ein Entscheidungsprotokoll klärt 14 Konflikte zwischen Quellen, etwa beim Timing von Animationen und bei Lucide als Standard-Icon-Set. Eine Routing-Datei schickt jede Art von Aufgabe nur zu den Dateien, die sie braucht.