azena design
Du weißt, welches KI-Tool wofür steht, kannst einen Design-Prompt so schreiben, dass gutes UI entsteht, und weißt, wie du KI-generierten Code sauber in dein Projekt übernimmst — von der Idee bis zur live URL in einem klaren Workflow.
Was du danach kannst
- Den modernen KI-Design-Toolstack kennen und das richtige Tool für den jeweiligen Schritt wählen
- Präzise Design-Prompts mit Stil, Referenz und Constraints schreiben statt vager Anweisungen
- KI-generierten UI-Code (v0 / Lovable / Claude Artifacts) sauber in React + Tailwind übernehmen
- Design-Tokens und Markenvorgaben an die KI weitergeben, um konsistentes statt generisches UI zu erzeugen
- Den vollständigen Workflow von Idee bis Deploy (Assets, Responsiveness, Hosting) beherrschen
Das Curriculum
18 Lektionen · Schritt für Schritt
- 01
Die KI-Design-Toolchain im Überblick
9′Welches Tool wofür — und wie sie im Workflow zusammenspielen.
- 02
Vom Prompt zum ersten Entwurf
10′Gute Design-Prompts schreiben, Stil mitgeben, schnell iterieren statt perfekt starten.
- 03
Vom Mockup zu echtem Code
11′KI-generierten UI-Code sauber in React + Tailwind übernehmen — was behalten, was wegwerfen, mit jedem Coding-Agenten.
- 04
Design-Tokens an die KI geben
10′Damit Ergebnisse konsistent und markentreu werden statt generisch.
- 05
Verfeinern, Assets & Deploy — der komplette Workflow
11′Polish, Bilder und Icons mit KI, Responsiveness, live stellen — alles zusammen.
- 06
Visuelle Hierarchie & Gestalt — das Auge führen
12′Die Wahrnehmungsgesetze, mit denen du Layout beurteilst — und einer KI sagst, was zusammengehört.
- 07
Farbe & Farbsysteme — vom Bauchgefühl zum System
12′60-30-10, HSL-Denken und Kontrast — wie aus Farben eine markentreue Palette wird.
- 08
Typografie im Detail — die unsichtbare 90 %
12′Skala, Pairing, Zeilenlänge und Rhythmus — der größte Hebel bei kleinstem Aufwand.
- 09
Layout, Raster & Komposition — Ordnung, die man spürt
11′Rastersysteme, das 8-Punkt-Spacing und Ausrichtung — das unsichtbare Skelett guter UIs.
- 10
UX & Usability — nicht nur schön, sondern nutzbar
12′Affordances, Feedback und die Usability-Heuristiken, an denen du jede UI misst.
- 11
Barrierefreiheit — Design für wirklich alle
11′WCAG/POUR, Kontrast, Tastatur & Fokus — Zugänglichkeit ist Qualität, nicht Kür.
- 12
Von Inspiration zu eigener Richtung — referenzieren ohne zu kopieren
11′Moodboards und Referenzen als Sprungbrett nutzen, mit KI eine eigene Stilrichtung finden statt zu klonen.
- 13
Komponenten & Design-Systeme mit KI bauen
12′Wiederverwendbare Bausteine statt Einzelseiten — wie du mit KI ein konsistentes System statt loser Screens erzeugst.
- 14
Responsive Design mit KI-Tools — ein Entwurf für alle Bildschirme
11′Mobile-first denken, Breakpoints bewusst setzen und der KI sagen, wie ein Layout über Bildschirmgrößen mitwächst.
- 15
Motion & Animation — Bewegung, die führt statt ablenkt
11′Gute UI-Bewegung lenkt Aufmerksamkeit, gibt Feedback und zeigt Beziehungen — alles andere ist Dekoration. Mit Dauer, Easing und prefers-reduced-motion dirigierst du sie.
- 16
Die drei stillen Zustände — leer, lädt, Fehler
11′Die meisten gestalten nur den vollen „Idealzustand". Aber leerer, ladender und Fehler-Zustand treten in den verletzlichsten Momenten auf — und entscheiden über Vertrauen. KI baut sie nur, wenn du sie mitbestellst.
- 17
Microcopy & UX-Writing — Worte sind Teil des Designs
11′Button-Labels, Feld-Beschriftungen, Leerzustands- und Fehlertexte tragen den Nutzer durch jede Aufgabe. Sie sind Interface, nicht Beiwerk — und mit Verben, einfacher Sprache und Kürze dirigierst du sie.
- 18
Theorie trifft Workflow — und Design für Nicht-Designer
11′Warum die Design-Theorie deinen KI-Workflow überhaupt erst gut macht — auch ohne Design-Studium.
Was du baust
Echte Artefakte, keine Theorie
Dieselbe Idee in zwei Tools — Vergleich
Ergebnis: Screenshots oder Code-Snippets beider Ergebnisse (v0 + Claude) mit deiner schriftlichen Einschätzung: Welches ist besser und warum?
KI-Mockup in sauberen Tailwind-Code überführen
Ergebnis: Repo-Link oder Code-Snippet des fertig aufgeräumten Codes: shadcn-Elemente genutzt, CSS-Variablen statt Hex, Komponenten unter 60 Zeilen. Kurze Erklärung, was du am KI-Output geändert hast.
Markenkonformes UI mit Token-Prompt
Ergebnis: Zwei Screenshots: einmal mit Token-Prompt (wie oben), einmal mit einem vagen Prompt ohne Tokens ('Baue einen modernen Hero'). Beschreibe in 2-3 Sätzen den Qualitätsunterschied.
Capstone: Produkt-Landingpage von Null bis Live
Ergebnis: Live-URL + ein kurzes Design-Rationale (je Sektion: welches Prinzip, warum) + Lighthouse-Score-Screenshot.
Der agentische Design-Workflow
Von der Idee zum deploybaren UI — welches KI-Tool wann. Stand 2026.
- 01
Idee → Mockup
v0 · Figma Make
- 02
Design-System
Figma Dev-Mode MCP · DESIGN.md
- 03
Echter Code
Claude Code · Cursor
- 04
Komponenten + Marke
shadcn/ui · AGENTS.md
- 05
Deploy
Vercel
KI ist stark in Logik, schwach in Geschmack. Ohne Marken-Kontext fällt sie auf den statistischen Durchschnitt aller gut designten UIs zurück — Inter überall, Lila-zu-Blau-Verlauf, gleichmäßig gerundete Karten.
Der Fix: gib dem Agenten ein maschinenlesbares Design-System (Tokens + Prosa, wann man was sparsam einsetzt), referenziere es aus AGENTS.md, und verbiete die Slop-Defaults aktiv. Distinktion kommt aus Beschränkung und Textur — nicht aus mehr Effekten.
DESIGN.md (Google, Open Source)
Maschinenlesbare Tokens + Prosa, warum sie so sind. Claude Code, Cursor & Copilot lesen sie — eine Quelle der Wahrheit statt Farben pro Prompt neu zu erfinden.
Figma „Check designs“
QA-Tool, das dein Design gegen dein Design-System prüft: Token-Abweichungen, Komponenten-Drift und Accessibility-Probleme werden markiert.
shadcn/ui CLI v4 + MCP
Registry & Presets über MCP: der Agent erbt deine Komponenten-Patterns und baut damit — statt Primitives jedes Mal neu von Hand.
Diesen Workflow Schritt für Schritt am eigenen Projekt anwenden — mit Nova als Mentor, bis es live ist.
Track startenBelege & Quellen
Jede Aussage ist belegt — echte, geprüfte Quellen statt Behauptungen.
Reinschnuppern
Gratis-VorschauGO vs. NO-GO — ein echtes Beispiel aus dem Track.
Wie der Track läuft
Mit Nova als Mentor
Dein KI-Mentor erklärt jedes Konzept, gibt dir fertige Claude-Code-Prompts und hilft bei jeder Frage.
Interaktives Bau-Duell
Kein Erklären, kein Durchklicken: du baust hier echt mit einem Prompt, Nova bewertet dein Ergebnis live — und erst ab der Bestmarke verdienst du dein Siegel.
In deinem Tempo
Rund 195 Minuten Kerninhalt — plus deine eigenen Projekte. Jederzeit pausierbar.
Fehler, die du vermeidest
- KI-Output 1:1 übernehmen ohne Aufräumen — inline styles, hartcodierte Farben und Monolith-Komponenten werden zur Wartungshölle.
- Zu vage promoten ('mach es modern') — ohne Tokens und Stil-Referenz liefert die KI beliebige Ergebnisse.
- Beim ersten Entwurf zu viel Zeit verschwenden statt schnell zu iterieren — erster Prompt grob, Iteration schnell.
- Alle Icons mit Bildmodellen generieren statt kuratierte SVG-Libraries zu nutzen — inkonsistente Größen und Stile sind die Folge.
- Hero-Images ohne Optimierung einsetzen — ein 3MB PNG vernichtet die Ladezeit; immer WebP + Kompression.
Bereit für azena design?
250 Token · 18 Lektionen · von der KI geprüft.