Design Systems mit Storybook, Figma und KI
In zwei Tagen baust du einen funktionierenden Workflow aus Figma, Storybook und KI-Agenten — verbunden über das Model Context Protocol, framework-agnostisch für Angular, React und Vue.
Lernziele
Was du lernst
- Figma, Storybook und KI-Agenten über das Model Context Protocol (MCP) verbinden.
- Stories so beschreiben, dass KI-Agenten sie verstehen.
- Design-Tokens aus Figma sauber in Code übergeben.
- Prompts für reviewbaren Code formulieren.
- Barrierefreiheit direkt im Workflow verankern.
- Den Workflow für Angular, React und Vue anwenden.
Trainer
Wer dich begleitet
Dominik Cortese Pieper
Frontend Architekt & Software Engineer · Conciso
Dominik Cortese Pieper ist Software Engineer mit einem ungewöhnlich klaren Blick für die Schnittstelle zwischen Design und Entwicklung. Er ist Nx Champion, Maintainer des Open-Source-Projekts Nxext, Co-Organisator von Angular Ruhr und Organisator von Storybook Germany. Mit seinem Projekt Atelier hat er einen eigenen Werkzeugkasten gebaut, der Figma, Storybook und Claude über MCP verbindet — die Grundlage dieses Trainings.
Termine
Nächste Durchführungen
Der nächste offene Termin steht fest. Gern führen wir das Training auch als Inhouse-Termin für euer Team durch.
-
26.–27. November 2026
Workgarden @ Conciso, Dortmund · Präsenz · 2 Tage
Freie Plätze Termin buchen
Inhalte & Voraussetzungen
Worum es geht
Design Systems versprechen Konsistenz, Tempo und ein gemeinsames Vokabular zwischen Design und Entwicklung. In der Praxis scheitern sie oft an der Übersetzung: Figma-Frames sehen im Code anders aus, Stories werden nicht gepflegt, KI-Tools erzeugen plausibel klingenden, aber spec-fremden Code. Genau diese Lücke schließt dieses Training.
An zwei Tagen baust du mit Dominik Cortese Pieper einen funktionierenden Workflow aus Figma, Storybook und KI-Agenten, verbunden über das Model Context Protocol. Du lernst, wie du Komponenten so beschreibst, dass ein Agent sie versteht, wie du Storybook-Stories als Quelle der Wahrheit etablierst und wie du Design-Tokens aus Figma so übergibst, dass der erzeugte Code reviewbar bleibt. Wie barrierefrei deine Komponenten am Ende sind, entscheidet sich dort, wo Stories und Prompts formuliert werden — das Training zeigt dir, wie du diese Stelle gezielt nutzt.
Das Training arbeitet framework-agnostisch: Angular, React und Vue laufen parallel. Der Fokus liegt auf der Praxis — Setup, Repository, MCP-Konfiguration, eigene Stories, eigene Prompts. Du gehst mit einem Vorgehen nach Hause, das sich direkt im eigenen Projekt anwenden lässt.
Für wen das Training ist
Frontend-Entwickler:innen, Design-System-Verantwortliche und technische Leads.
Passt das zu euch? Zum Termin