Design + Code = Perfect Match – Ist dein UI-Entwicklungsworkflow AI-ready?

Um was gehts?
Wir haben ein Design und eine Codebase – aber sie sprechen nicht dieselbe Sprache. Die Komponenten sind im Design anders aufgebaut, haben andere Properties und Design-Tokens als im Code. Also müssen Umwege gegangen und Kompromisse getroffen werden. Am Ende hat unser Produkt oft nicht mehr viel mit dem Design gemein.

Aber es geht auch anders: wenn die Design-Komponenten und die Code-Komponenten gleich aufgebaut sind, Tokens automatisiert synchronisiert werden und Code-Schnipsel auch im Design-Tool hinterlegt werden, beschleunigt sich die Umsetzung neuer Screens erheblich. Gleichzeitig steigt die Qualität von AI-generiertem Code, weil die AI-Agenten jetzt Design und Code einander zuordnen können.

In diesem Vortrag berichten wir von unseren Erfahrungen mit dem Mapping von Design und Code. An einem Praxis-Beispiel zeigen wir, wie React-Komponenten über die Figma API und Figma Code Connect mit dem Design verknüpft werden können. Mittels eines MCP-Servers binden wir unseren AI-Agenten an und lassen ihn für uns das Interface bauen. Schlussendlich betrachten wir die Auswirkungen, die diese enge Verknüpfung auf den Entwicklungsprozess und die Zusammenarbeit im Team hat.

Agenda

18:45 – 19:15 Uhr: Get together & Pizza
19:15 – ca. 20:15 Uhr: Vortrag
20:15 – 22:00: Austausch & Drinks

So findet ihr uns

Das Backyard Loft befindet sich auf der Richard-Wagner-Str. 31, im Hinterhof. Folgt einfach dem Schild.

ÖPNV: Die nächsten Bahnhaltestellen sind Rudolfplatz und Moltkestraße. Vom Hauptbahnhof gelangt ihr mit der Linie 5 über die Haltestelle Friesenplatz oder über Linie 16, 18 über Haltestelle Neumarkt zu uns.

Anfahrt mit dem Auto: „Richard-Wagner-Str. 31, 50674 Köln”.
Parken könnt ihr am besten in der Tiefgarage am Rudolfplatz (Steigenberger Hotel), Habsburgerring 9, 50674 Köln.