Skip to content
⌘K
On this page
Tutorial 2 Tage · je ~7–8 h

2-Tages-Schulung

KI-gestützter Design-to-Code-Workflow für Entwickler mit solider Frontend-Basis. Jeder Teilnehmer wählt sein eigenes Framework (Angular / React / Vue) — am Ende steht eine selbst designte und implementierte Komponente in Figma, Storybook und Code.

Zielgruppe

  • Entwickler mit Frontend-Basis (Angular, React oder Vue)
  • Wenig Erfahrung mit Figma, Storybook, MCP oder AI-Codegen
  • Sprache: Deutsch
  • Eigenes Framework wählbar — Code ist zweitrangig

Hauptlernziel

  • Die vier Pillars verstehen: Figma · Storybook · MCP · Claude Code
  • End-to-End Design-to-Code-Workflow beherrschen
  • Komponente von Figma-Spec bis Production-Code prompten
  • A11y- und Dark-Mode-Loop sicher anwenden
Tag 1

Werkzeuge verstehen & Workflow end-to-end

Tagesziel: Jeder Teilnehmer hat ein laufendes Setup, kennt alle vier Pillars (Figma · Storybook · MCP · Claude Code) und hat einmal end-to-end eine existierende Atelier-Komponente per Prompt verändert.

  1. 00
    09:00–09:30 · 30 min Vortrag + Live-Demo

    Kickoff

    • Warum component-driven? Warum AI?
    • Live-Demo: in 5 min eine Atelier-Komponente per Prompt cross-framework abändern
    • Was lernen Teilnehmer in 2 Tagen, was nicht
  2. 01
    09:30–10:45 · 75 min Hands-on · High-Risk Block High-Risk

    Setup-Verifikation & Preflight

    • Pre-Workshop-Setup ist Pflicht-Hausaufgabe — Block prüft nur, installiert nicht von Null
    • Node 22 LTS aktiv, npm-Version aus package.json#packageManager
    • Repo geklont, Claude Code CLI eingeloggt mit eigenem API-Key, Figma-Account-Token gesetzt
    • npm run preflight lokal grün
    • MCP-Konfig in .claude/settings.json gemeinsam lesen und verstehen
  3. 02
    11:00–12:15 · 75 min Geführte Tour

    Figma für Entwickler

    • Wie Designer denken — Atelier-File öffnen
    • Variables / Tokens: Primitives → Semantic → Component
    • Component-Sets, Variants, Component Properties, Auto Layout
    • Modes (light/dark), Inventory- vs Components-Page
  4. 03
    13:15–14:30 · 75 min Hands-on Vergleich

    Storybook als API-Wahrheit

    • Was ist Storybook, was sind Stories, Prop-Tables
    • Hosted Storybooks öffnen — selbe Komponente (Button) in Angular/React/Vue vergleichen
    • libs/spec als Quelle der Wahrheit — Parität spürbar machen
    • Storybook 10.4: Agentic Setup, experimentalReactComponentMeta, Change Review Sidebar, Subcomponent-Docs
  5. 04
    14:45–16:00 · 75 min Hands-on Demo

    MCP & Claude Code Grundlagen

    • Was ist MCP? Welche Server sind aktiv (storybook-{angular,react,vue}, nx-mcp, figma-console, uianatomy)?
    • Storybook 10.4 Toolset-Modell: docs / dev / test — hosted vs. lokale Surface
    • Toolset-Gating zeigen — wann test für Read-Only-Agents deaktivieren
    • Live-Übung: Claude per Prompt nach Button-Props fragen, Token-Werte ausgeben, Preview im Chat
    • Negativ-Demo: dieselbe Frage im Browser-Chat ohne MCP → Halluzination. Mit MCP → korrekte Antwort
    • Skills-Konzept (figma-workspace-architect, atelier-design) vorstellen
  6. 05
    16:10–17:15 · 65 min Hands-on, alle synchron

    Geführter End-to-End-Walkthrough

    • Das offizielle /tutorial: Figma → MCP → Token-genauer Code in 5 Schritten
    • Teilnehmer prompten Claude im gewählten Framework, ändern existierende Komponente (z.B. neuer Button-Tone)
    • Wichtig: nicht selbst tippen, sondern prompten
  7. 06
    17:15–17:30 · 15 min Diskussion

    Wrap-up Tag 1

    • Was war überraschend? Wo hat AI sauber funktioniert, wo nicht?
    • Vorschau Tag 2 + optionale Hausaufgabe: kleine Komponente skizzieren (Toast / Tag-Chip / Stat-Card / Badge)

Lieferergebnis pro Teilnehmer

  • Laufendes Atelier-Workspace mit grünem preflight
  • Mindestens ein erfolgreicher Prompt-zu-Code-Roundtrip
  • Verständnis: Figma = Quelle, Storybook = Spec, MCP = Verbindung, Claude = Ausführung
Tag 2

Eigene Komponente bauen (Figma → Storybook → Code)

Tagesziel: Jeder Teilnehmer hat eine selbst gestaltete Komponente durchgängig produziert: Figma-Spec mit Variants & Tokens, generierte Story, generierter Code im gewählten Framework, A11y-Check bestanden, Dark Mode funktioniert.

  1. 00
    09:00–09:30 · 30 min Vortrag

    Recap & Brief

    • Tag-1-Recap
    • Komponenten-Brief vorstellen — Anatomie, Axes, States, A11y-Anforderungen
    • uianatomy MCP als Hilfsmittel zeigen
  2. 01
    09:30–11:00 · 90 min Hands-on

    Design in Figma

    • Pflicht-Vorabschritt: Atelier-File in eigene Drafts duplizieren — niemals im Original-File mutieren
    • ~45 min manuelles Design im Figma-UI (Layout, Variants, Token-Zuweisung)
    • ~45 min MCP-Strukturierung (Component Properties, A11y-Audits)
    • Eigenes Component-Set: Variants, Properties, korrekte Tokens (--ui-*), Dark-Mode-Variante
    • Skills als Co-Pilot: figma-workspace-architect (Architektur), atelier-design (Brand-Konsistenz)
  3. 02
    11:15–12:30 · 75 min Prompt-Übung

    Spec & Story per Prompt

    • API in Worten beschreiben → von Claude eine Spec (im Stil von libs/spec/src/index.ts) und Story generieren lassen
    • LLM-optimierte API-Regeln: predictable naming, literal unions, composition über config, keine versteckten Defaults
    • Iterieren bis Prop-Table passt
    • React-Teilnehmer: nx storybook react parallel + get-storybook-story-instructions (Pflicht vor jedem *.stories.* Edit)
    • Angular/Vue: plan/big-picture.md direkt zur Hand, ggf. React-Story als Vorlage holen
  4. 03
    13:30–15:00 · 90 min Prompt-Übung

    Codegen im Wunsch-Framework

    • Fokus: Prompts schreiben, Output bewerten, korrigieren — nicht selbst tippen
    • Token-Treue erzwingen: Golden-Prompts verlangen --ui-* Custom Properties
    • plan/big-picture.md (API-Regeln) + plan/design-principles.md (Surface/Motion/Dark Mode) im Prompt-Kontext
    • Test-Loop React: dev + test Toolset über localhost:6006/mcp (preview-stories, run-story-tests mit a11y)
    • Test-Loop Angular/Vue: nx test <lib> --watch + parallel laufende Storybook im Browser
    • AI-gestütztes Debugging: Fehlermeldungen per Copy-Paste an Claude zurückgeben statt selbst debuggen
  5. 04
    15:15–16:30 · 75 min Hands-on

    A11y + Dark Mode + States

    • Dreischritt-A11y-Check: (1) figma_audit_component_accessibility, (2) Storybook A11y-Panel (axe-core), (3) Keyboard-Walkthrough
    • Befunde von Claude beheben lassen
    • ARIA-Anforderungen, Fokus-Ring via Tokens, Hover/Active/Disabled-States
    • Dark-Mode-Toggle via Storybook backgrounds-/theme-Addon — Token-Override-Drift sichtbar machen
  6. 05
    16:40–17:30 · 50 min Präsentation + Diskussion

    Show & Tell + Best Practices

    • Jeder Teilnehmer zeigt 3–5 min seine Komponente
    • Trainer-Synthese: Prompt-Patterns die geklappt haben, Anti-Patterns, wann Claude scheitert, wie mit Drift umgehen
    • Ausblick: produktiver Einsatz im eigenen Repo, eigene CLAUDE.md, eigene Skills

Lieferergebnis pro Teilnehmer

  • Eigene Komponente im Atelier-Figma-File (Component-Set mit Variants + Properties + Dark-Mode)
  • Generierte Spec + Story im eigenen Workspace
  • Funktionierende Implementierung im gewählten Framework
  • A11y-Audit bestanden

Erfolgs-Verifizierung

End-to-End-Check am Ende von Tag 2 pro Teilnehmer:

  1. Komponente liegt als Component-Set im Atelier-Figma-File (auf einer Schulungs-Page)
  2. npm run preflight weiter grün
  3. nx serve <workshop-fw> zeigt Komponente in einer kleinen Demo-Page
  4. Test-Loop grün: React → run-story-tests MCP-Call passes; Angular/Vue → nx test <lib> + Story sichtbar im laufenden Storybook
  5. figma_audit_component_accessibility ohne kritische Findings und Storybook A11y-Tab ohne axe-core-Findings
  6. Dark Mode wird durch Token-Override korrekt umgeschaltet
Edit this page on GitHub