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.
Geprüftes Siegel
Zeig Nova ein UI, das du gebaut oder verbessert hast (oder eine Card aus der Aufgabe). Erkläre mit den Prinzipien aus diesem Track, WARUM die GO-Version besser ist als die NO-GO-Version — Hierarchie, Spacing, Kontrast, eine primäre Aktion, Typo/Tokens. Formuliere dann den präzisen Claude-Prompt, mit dem du so ein Ergebnis erzeugen würdest: welcher Stil, welche Tokens, welche Referenz, welches Hover-Verhalten?
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.