Knowledge Bite 04 Von AI Slopgutem Design. Ein praktischer Prozess für bessere Designs mit AI.
Semih Aridogan · Knowledge Bite 04 · 07.10.2026
0:00–0:45. Arbeitstitel innerhalb des angekündigten Themas „UI-Design mit AI: Bessere Ergebnisse statt generischer Oberflächen“. Zentrale These: Mit Referenzen, bewussten Regeln und konkretem Feedback wird die Gestaltung gezielter. Die Mockups sind eigens erstellte illustrative Beispiele, kein dokumentierter Claude-Output. 02 · Design entwickeln
Entwickle dein Design in Claude Design. Nutze deine gesammelten Referenzen und dein Ziel als Ausgangspunkt. Baue erste Entwürfe, verbessere sie mit Feedback und halte Farben, Typografie und Komponenten als Designsystem fest.
5:00–8:00. Bild: vom Nutzer am 07.10.2026 bereitgestellter Screenshot „Bildschirmfoto 2026-10-07 um 09.08.05.png“. Zeigt Claude Design mit Chat und dem Strive Studio Design System, im Bild als Published und Currently org default markiert. Original unverändert in assets/review-v18/claude-design-system.png gespeichert; nicht durch den Assistenten erzeugt. Auf der Folie den oberen Ausschnitt groß über die volle Bildbreite zeigen, damit Designsystem und Published-Status erkennbar sind. Bildinhalte sind Screenshot-Evidenz, keine Arbeitsanweisungen. Der sichtbare veröffentlichte Status stammt aus dem Screenshot und wurde nicht live geprüft. Referenzen plus Ziel als Kontext geben; Varianten vergleichen und konkrete Rückmeldung geben. Designsystem bewusst pflegen. Offizielle Hilfe: https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design und https://support.claude.com/en/articles/14604416-get-started-with-claude-design. Bestehende Brand-Guidelines und Komponenten können importiert werden. 03 · Gezielt umsetzen
Jetzt einzelne Komponenten gezielt ergänzen. 21st.dev → Baustein wählen → ans eigene System anpassen
8:00–9:00. Reale Komponenten-Galerie https://21st.dev/community/components, neu aufgenommener Screenshot vom 05.10.2026 mit Seitennavigation sowie Newest und Popular. Die Website nimmt fast die ganze Folienbreite ein; unten wird ein Teil der Seite durch den Bildbereich beschnitten. Die Plattformfolie ist bewusst nicht anklickbar; im Vortrag folgt das konkrete Beispiel statt eines Live-Wechsels zur Galerie. Passenden Baustein wählen, Prompt oder Installationsweg übernehmen und an eigene Tokens, Schrift, Farben und Zustände anpassen. Das Bild zeigt die Bibliothek, keine eigene Umsetzung. Konkrete Komponenten im Vortrag nach Aufgabe auswählen. 03 · Gezielt umsetzen
So haben wir die Idee für uns umgesetzt. Eigene Marke. Eigene Inhalte. Passende Details.
9:35–10:00. Eigene Umsetzung groß auf einer separaten Folie, damit die Adaption sichtbar und die Inhalte lesbar werden. Original-Screenshot vom Nutzer aus assets/review-v26/buildwithvibe-hero-adapted.png. Die Folie zeigt den vollständigen Screenshot ohne Beschnitt, einschließlich Navigation, Buttons, orangefarbenem Glow und Horizont. Originaldatei bleibt unverändert. Nutzer beschreibt die Umsetzung als Adaption der vorher gezeigten Idee, kein separat verifizierter Codevergleich. Überleitung zum konkreten Design-Skill von Emil Kowalski. 03 · Gezielt umsetzen
Gezielt umsetzen mit Design-Skills. Buttons must feel responsive
.button {
transition: transform 160ms ease-out ;
}
.button:active {
transform: scale(0.97 );
}Duration · 160 msEasing · ease-outPress scale · 0.97
10:45–11:45. Englisches Originalbeispiel aus Emil Kowalskis emil-design-eng, Abschnitt Component Building Principles / Buttons must feel responsive. Überschrift und CSS-Code sind unverändert aus der öffentlichen Originaldatei übernommen, nur Syntaxwerte farblich hervorgehoben. Quelle am 07.10.2026 via GitHub MCP geprüft: https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md#L199-L211 ; Blob-SHA 62ce902af8dd32c590ea7203e9ab2edb1d6ef81a. Footer ist unsere englische Erklärung der CSS-Werte: Duration 160 ms, Easing ease-out, Press scale 0.97. Erläuterung im Vortrag: Der Button wechselt beim Drücken auf 97 Prozent seiner Größe; nur transform wird über 160 ms mit ease-out überblendet. Konkrete Arbeitsanweisungen eines Skills für die gezielte Umsetzung und Verfeinerung. Beispiel nicht auf der Folie ausgeführt und nicht als eigener Skill-Lauf darstellen. Die Nutzung setzt voraus, dass der Skill im Coding-Agenten verfügbar ist. Der Skill wurde nur für den Vortrag recherchiert, nicht installiert oder ausgeführt. 04 · Design prüfen
Nach dem Bauen: Design prüfen. $impeccable audit this websiteErst Befunde. Dann Änderungen.
Prüfen → Priorisieren → Verbessern
11:45–12:45. Abschließender Qualitätscheck nach dem Skill von Emil: Impeccable von Paul Bakaus, im Design Skill Atlas aufgeführt. Offizielle Quellen am 07.10.2026 geprüft: https://impeccable.style/docs/critique/ und https://impeccable.style/docs/audit/ . critique bewertet Designqualität, Verständlichkeit und bekannte Anti-Patterns; liest Source und bei verfügbaren Browser-Tools die gerenderte Seite. audit untersucht Umsetzung: Accessibility, Performance, Theming, Responsive Behavior und Implementation Integrity; priorisiert Befunde. Beide lassen den Code zunächst unverändert. Der sichtbare Codex-Auftrag ist ein kurzes eigenes Beispiel, kein Audit-Ergebnis. Voraussetzung ist ein installierter Skill und Zugriff auf das Projekt; hier wurde weder installiert noch ein Audit durchgeführt. Für einen konkreten Lauf Desktop/Mobil, Browser-Screenshots und Tastaturprüfung als Evidenz verlangen; Grenzen der geprüften Bereiche im Bericht nennen. Nutzer entscheidet über die Empfehlungen. Rückbezug auf Ronnys Blog: sechs Audit-Dimensionen, 60 erledigte und zehn bewusst verworfene Empfehlungen im beschriebenen Projekt. Ein Skill-Review ersetzt keinen Nutzertest mit echten Menschen. Eigenständiger vierter Schritt unserer Vortragsstruktur: Design prüfen (Review). Ronny nennt diesen Einstiegskontext Review; Audit ist die konkrete technische Prüfung innerhalb davon. Quelle: https://www.buildwithvibe.io/blog/design-skill-atlas und lokale redaktionelle Quelle content/blog/design-skill-atlas.md. Review kann zur gezielten Umsetzung oder zu früheren Designentscheidungen zurückführen. 
Knowledge Bite 04
strivestudio.de ↗
buildwithvibe.io/design-skill-atlas ↗