azena craft
Du entwickelst ein geschultes Designauge und baust Oberflächen, die teuer und durchdacht aussehen statt nach AI-Slop — mit klarer Hierarchie, großzügigem Spacing, disziplinierter Typografie, einem Token-System und gezielten Claude-Prompts.
Was du danach kannst
- Gutes von mittelmäßigem UI an konkreten Prinzipien unterscheiden (GO/NO-GO)
- Hierarchie, Spacing, Kontrast und Typografie bewusst einsetzen
- Ein einfaches Design-Token-System (Farben, Spacing, Radius) aufsetzen
- Microinteractions & Motion dezent und sinnvoll einsetzen
- Claude Code mit präzisen Design-Vorgaben zu hochwertigen Oberflächen steuern
Das Curriculum
19 Lektionen · Schritt für Schritt
- 01
Das Designauge — GO vs. NO-GO sehen lernen
9′Den Unterschied zwischen amateurhaft und durchdacht auf einen Blick erkennen.
- 02
White-Space & Rhythmus — warum teure UIs atmen
10′Großzügiges Spacing und konsequentes Alignment trennen Profi von Amateur.
- 03
Kontrast, Farbe & eine klare Aktion
11′Lesbarkeit sichern, Fokus lenken, eine einzige primäre Aktion pro Ansicht.
- 04
Typografie & Design-Tokens — das System dahinter
11′Eine Schriftfamilie, eine Skala, ein Token-Set — Konsistenz, die sich selbst durchsetzt.
- 05
Polish & Motion — und deinen KI-Agenten präzise steuern
10′Dezente Microinteractions, der letzte Schliff, und präzise Prompts, die mit jedem KI-Agenten hochwertiges UI liefern.
- 06
Motion & Microinteractions — Bewegung mit Bedeutung
11′Gute Animation lenkt Aufmerksamkeit und erklärt Veränderung — sie ist nie Dekoration.
- 07
Responsive & Mobile-First — ein Layout für alle Geräte
11′Nicht mehrere Seiten, sondern ein flexibles Layout — und du beginnst beim kleinsten Screen.
- 08
Design-Systeme & Komponenten — einmal bauen, überall nutzen
11′Von Einzel-Screens zu wiederverwendbaren Bausteinen — Konsistenz, die mitwächst.
- 09
Layout-Grundlagen — Grid & Flexbox denken
11′Zwei Layout-Werkzeuge, eine Denkweise: Ausrichtung, Verteilung und Rhythmus statt zufälliger Stapel.
- 10
Formulare & Inputs — die schwierigste UI gut machen
12′Labels, Validierung und Fehlerzustände, die helfen statt frustrieren — die Königsdisziplin der UI.
- 11
Accessibility (a11y) — für alle nutzbar bauen
12′Kontrast, Fokus, Tastatur und Screenreader: Zugänglichkeit ist Handwerk, kein Sonderfall.
- 12
Zustände designen — nicht nur den Happy Path
11′Empty, Loading, Error, Success: die Zustände, die im Design-Mockup fehlen und die App echt machen.
- 13
Komponenten-Anatomie & States — hover, focus, active, disabled
11′Eine Komponente ist nicht ein Bild, sondern ein Satz Zustände — konsistent gestaltet wirkt sie lebendig.
- 14
Dark Mode & Theming — ein System, mehrere Erscheinungen
11′Hell, dunkel und mehr aus einem einzigen Token-Set — wenn die Grundlage stimmt, ist Theming Minutensache.
- 15
Daten-schwere UIs — Tabellen, Listen & Dashboards lesbar machen
12′Dichte, Ausrichtung und sichtbare Sortier-/Filter-Affordanzen verwandeln eine Datenwand in etwas, das man auf einen Blick liest.
- 16
Navigation & Informationsarchitektur — wo bin ich, wo kann ich hin?
11′Menüs, Hierarchie und mobile Navigation, die dem Nutzer jederzeit zeigen, wo er steht und wie er weiterkommt.
- 17
Wahrgenommene Performance — Skeletons & optimistische UI
11′Schnell sein ist gut, sich schnell anfühlen ist genauso wichtig — Skeletons, optimistische Updates und sofortiges Feedback gewinnen das Gefühl.
- 18
KI-Antworten im UI — Streaming, Stopp und die Zustände einer denkenden Maschine
10′Eine KI-Antwort braucht Sekunden, nicht Millisekunden. Streaming, ein Stopp-Knopf und vier klare Zustände machen aus dem Warten ein gutes Gefühl.
- 19
Performance — schnell ist ein Feature
11′Schöne UIs, die langsam laden, verlieren Nutzer — die Core Web Vitals zeigen, woran es liegt.
Was du baust
Echte Artefakte, keine Theorie
Vorher/Nachher: eine Card redesignen
Ergebnis: Ein Screenshot oder eine Live-URL mit beiden Card-Varianten nebeneinander + 2-3 Sätze, welche Prinzipien die GO-Version stark machen.
Ein Mini-Token-System aufsetzen
Ergebnis: Repo-Link oder Code-Snippet mit dem Token-Set + Button/Card, die nur Tokens nutzen, und einem funktionierenden Hell/Dunkel-Switch.
Landingpage-Hero im Premium-Stil
Ergebnis: Live-URL oder Screenshot des Heros + 2-3 Sätze, welche Prinzipien aus dem Track du eingesetzt hast.
Capstone: Premium-UI mit Design-System, Motion & grünen Web Vitals
Ergebnis: Live-URL + Lighthouse-Report (Vitals grün) + kurze Begründung je angewandtem Prinzip + dein Token-Set.
Anatomie eines teuren Interfaces
Warum manche UIs teuer aussehen — und KI-Slop nicht. Die fünf Entscheidungen, die den Unterschied machen.
Tiefe Arbeit, ohne Lärm
Ein Modus, eine Aufgabe. Alles andere tritt zurück, bis du fertig bist.
- 1
Eine Akzentfarbe — sparsam
Genau ein Akzent, gezielt auf die wichtigste Aktion. Slop nutzt drei Verläufe; Craft nutzt einen Akzent auf ruhigem Grund.
- 2
Großzügiges, konsistentes Spacing
Ein einziges Raster (z. B. 4/8 px). Der Weißraum arbeitet — nicht jedes Pixel muss gefüllt sein.
- 3
Eine Typo-Skala, klare Hierarchie
Wenige Stufen aus einer Skala statt fünf zufälliger Größen. Das Auge findet sofort die Reihenfolge.
- 4
Kontrast & Ruhe
Starker Kontrast nur dort, wo es zählt; der Rest tritt zurück. Ruhe liest sich als Wertigkeit.
- 5
Textur statt Effekte
Subtile Tiefe (Korn, feine Kanten) statt Glow- und Schatten-Spam. Distinktion kommt aus Beschränkung.
„AI slop“ wurde 2025 zum Wort des Jahres (Macquarie Dictionary) — generische KI-Optik ist ein benannter Makel geworden. Wer teuer aussehen will, baut dagegen: Beschränkung, Hierarchie, Textur. Die modernen Mittel dafür sind 2026 Standard:
Perzeptiv gleichmäßig — saubere Verläufe & vorhersehbarer Kontrast. Baseline (seit Nov 2025).
Eine Datei, stufenlose Achsen (Gewicht, optische Größe) — Typo-Präzision ohne 6 Font-Dateien.
Fließende Typo & Komponenten, die auf ihren Container reagieren. Beide Baseline (2025).
Gleichmäßige Zeilen in Überschriften — reine Politur, die das Auge als „durchdacht“ liest.
Hinweis: text-wrap: pretty ist progressive Enhancement (noch nicht in Firefox) — Fallback bricht nichts.
Dein Designauge an echten Beispielen schulen — mit Nova als Mentor, bis dein UI teuer aussieht.
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 206 Minuten Kerninhalt — plus deine eigenen Projekte. Jederzeit pausierbar.
Fehler, die du vermeidest
- Alles gleich groß/fett — fehlende Hierarchie ist der häufigste und teuerste Fehler.
- Zu enges Spacing (p-2 überall); im Zweifel Padding verdoppeln.
- Helles Grau auf Weiß als Body-Text — scheitert an WCAG AA, ermüdet die Augen.
- Mehrere Akzentfarben gleichzeitig — der Blickfang verpufft.
- Mehrere Fonts/Zufallsgrößen statt einer Familie mit klarer Skala.
- Vage Claude-Prompts ('mach es schön') statt Stil + Tokens + Referenz + Verhalten.
Bereit für azena craft?
250 Token · 19 Lektionen · von der KI geprüft.