Claude Design & Claude Code: Direkte Verbindung per Design Sync
Seit dieser Woche sprechen Claude Design und Claude Code direkt miteinander — kein manueller Export, kein umständlicher Import-Umweg mehr. Filip zeigt live, wie das neue Design-Sync-Feature den Workflow verändert: Designsystem anlegen, in Claude Code referenzieren, iterieren und Erkenntnisse zurückschreiben. Warum das für alle, die Webprojekte mit Claude bauen, ein echter Einschnitt ist.
Was in einem Designsystem steckt — und warum es vorher im Dornröschenschlaf lag
Claude Design kann vollwertige Designsysteme verwalten: Schriften, erlaubte und verbotene Gestaltungselemente, Buttons in sämtlichen Varianten, Shapes, Animationen, komplette Komponentenvorlagen. Filip hat das Designsystem des Koerting Institute bereits seit Längerem dort gepflegt — und es trotzdem kaum genutzt. Der Grund: Es existierte zwar, ließ sich aber nur über einen umständlichen Export-Import-Umweg in Claude Code bringen. Das bremst jeden realen Workflow aus. Wer kennt das nicht — ein Tool, das theoretisch gut klingt, aber in der Praxis an einer einzigen Reibungsstelle scheitert.
Design Sync: Was das neue Feature konkret ändert
Seit dieser Woche ist das anders. Das neue Design-Sync-Feature erlaubt Claude Code, direkt auf ein bestehendes Claude-Design-Projekt zuzugreifen — ohne Export, ohne manuellen Transfer. Filip zeigt das live: Claude Code ruft den Design Sync auf, liest das Designsystem aus und listet auf, was es darin findet. Der erste Austausch bringt, wie gewohnt, viele Rückfragen — das kennt jeder, der regelmäßig mit Claude Code arbeitet. Entscheidend ist, dass die Verbindung jetzt stabil steht. Zwei Welten, die schon immer zusammengehört haben, können endlich direkt miteinander reden.
Der Loop läuft in beide Richtungen
Der eigentliche Mehrwert liegt nicht nur im Lesen, sondern im bidirektionalen Workflow. Filip beschreibt es konkret: Ein Projekt, das ursprünglich jemand anderes angelegt hat, landet im eigenen Claude-Code-Umfeld. Von dort lässt es sich weiterentwickeln — deployen, neue Funktionen einbauen, iterieren. Und was dabei gelernt wird, etwa dass Eckenradien angepasst werden sollten oder Buttons auf einer Seite besser auffindbar sein müssen, fließt per Prompt direkt zurück ins Designsystem. „Aktualisiere bitte mein Designsystem hinsichtlich der Punkte, die wir gerade besprochen haben" — das reicht als Anweisung.
Flexibler Einstieg: Mit oder ohne Designsystem starten
Claude Design zwingt niemanden, von Anfang an strukturiert zu arbeiten. Wer einen schnellen Entwurf braucht, kann das Designsystem einfach weglassen und erst später drüberlegen. Außerdem lassen sich mehrere Designsysteme parallel anlegen — sinnvoll für verschiedene Projekte oder unterschiedliche Marken. Das macht den Ansatz skalierbar: Ein Freelancer betreut fünf Kunden, jeder bekommt sein eigenes System. Eine Agentur trennt Marke A sauber von Marke B. Der Workflow passt sich an, nicht umgekehrt.
Fazit: Eine Lücke, die jetzt geschlossen ist
Was Filip in dieser Folge zeigt, ist kein großes Produktversprechen, sondern eine konkrete Lücke, die geschlossen wurde. Design und Code waren bei Claude schon länger als zusammengehörig gedacht — die direkte Verbindung fehlte aber. Wer Webprojekte mit Claude baut und bisher auf externe Tools oder manuelle Zwischenschritte angewiesen war, kann diesen Umweg ab sofort weglassen. Das spart nicht nur Zeit, es ändert auch, wie konsequent ein Designsystem im Projektalltag genutzt wird. Nicht in einem Jahr. Sondern jetzt.
Das nimmst du mit
- Claude Code greift seit dieser Woche per Design Sync direkt auf Designsysteme in Claude Design zu — kein manueller Export mehr nötig.
- Du kannst in Claude Design auch ohne Designsystem starten und es nachträglich über einen bestehenden Entwurf legen.
- Erkenntnisse aus dem Coding-Prozess — etwa zu Eckenradien oder Button-Platzierung — lassen sich per Prompt direkt zurück ins Designsystem schreiben.
- Mehrere Designsysteme parallel sind möglich, zum Beispiel für verschiedene Projekte oder unterschiedliche Marken.
- Der bidirektionale Loop zwischen Design und Code funktioniert jetzt stabil — zwei Welten, die zusammengehören, sind endlich direkt verbunden.
Kapitel
- 00:00 Designsysteme in Claude Design — was steckt drin?
- 00:57 Das Problem vorher: umständlicher Export-Import-Umweg
- 01:32 Design Sync: Claude Code greift direkt auf Claude Design zu
- 02:29 Vom Design in den Code — und zurück
- 03:14 Warum dieser Hand-off-Workflow jetzt erst richtig funktioniert
Noch mehr von den Koertings ...
Das KI-Café ... jede Woche Mittwoch (>350 Teilnehmer) von 16:30 bis 18:00 Uhr ... online via Zoom .. kostenlos und nicht umsonst
Jede Woche Mittwoch um 16:30 Uhr öffnet das KI-Café seine Online-Pforten ... wir lösen KI-Anwendungsfälle live auf der Bühne ... moderieren Expertenpanel zu speziellen Themen (bspw. KI im Recruiting ... KI in der Qualitätssicherung ... KI im Projektmanagement ... und vieles mehr) ... ordnen die neuen Entwicklungen in der KI-Welt ein und geben einen Ausblick ... und laden Experten ein für spezielle Themen ... und gehen auch mal in die Tiefe und durchdringen bestimmte Bereiche ganz konkret ... alles für dein Weiterkommen.
Melde dich kostenfrei an ... www.koerting-institute.com/ki-cafe/
Mit jedem Prompt ein WOW! ... für Selbstständige und Unternehmer
Ein klarer Leitfaden für Unternehmer, Selbstständige und Entscheider, die Künstliche Intelligenz nicht nur verstehen, sondern wirksam einsetzen wollen. Dieses Buch zeigt dir, wie du relevante KI-Anwendungsfälle erkennst und die KI als echten Sparringspartner nutzt, um diese Realität werden zu lassen. Praxisnah, mit echten Beispielen und vollständig umsetzungsorientiert.
Das Buch ist ein Geschenk, nur Versandkosten von 9,95 € fallen an. Perfekt für Anfänger und Fortgeschrittene, die mit KI ihr Potenzial ausschöpfen möchten.
Das Buch in deinen Briefkasten ... https://koerting-institute.com/shop/buch-mit-jedem-prompt-ein-wow/
Die KI-Lounge ... unsere Community für den Einstieg in die KI (>2800 Mitglieder)
Die KI-Lounge ist eine Community für alle, die mehr über generative KI erfahren und anwenden möchten. Mitglieder erhalten exklusive monatliche KI-Updates, Experten-Interviews, Vorträge des KI-Speaker-Slams, KI-Café-Aufzeichnungen und einen 3-stündigen ChatGPT-Kurs.
Tausche dich mit über 4.000 KI-Enthusiasten aus, stelle Fragen und starte durch.
Initiiert von Torsten & Birgit Koerting, bietet die KI-Lounge Orientierung und Inspiration für den Einstieg in die KI-Revolution.
Hier findet der Austausch statt ... www.koerting-institute.com/ki-lounge/
Starte mit uns in die 1:1 Zusammenarbeit
Wenn du direkt mit uns arbeiten und KI in deinem Business integrieren möchtest, buche dir einen Termin für ein persönliches Gespräch. Gemeinsam finden wir Antworten auf deine Fragen und finden heraus, wie wir dich unterstützen können. Klicke hier, um einen Termin zu buchen und deine Fragen zu klären.
Buche dir jetzt deinen Termin mit uns ... www.koerting-institute.com/termin/
Weitere Impulse im Netflix Stil ...
Wenn du auf der Suche nach weiteren spannenden Impulsen für deine Selbstständigkeit bist, dann gehe jetzt auf unsere Impulseseite und lass die zahlreichen spannenden Impulse auf dich wirken.
Inspiration pur ... www.koerting-institute.com/impulse/
Die Koertings auf die Ohren ...
Wenn dir diese Podcastfolge gefallen hat, dann höre dir jetzt noch
weitere informative und spannende Folgen an ...
über 500 Folgen findest du hier ... www.koerting-institute.com/podcast/
Wir freuen uns darauf, dich auf deinem Weg zu begleiten!
Das Transkript zum Nachlesen
Mit Float Design kann man, Achtung Trommelwirbel, Designsysteme herstellen und unser Designsystem hier vom Körting-Institut, das habe ich gerade hier heute erst aktualisiert, das gibt es schon lange und es hat so ein bisschen so ein Dornröschenschlaf gehabt, weil, jetzt komme ich wieder auf diese Features, die diese Woche raus kamen, ich konnte es nicht adressieren, es war zwar da, aber ich musste es umständlich exportieren, um es umständlich wieder in Cloud Code zu importieren und hier ist das Designsystem, das ist ein riesiges Designsystem, das habe ich erstellt, wir sind auch noch nicht fertig, da sind noch zu viele Emojis, aber hier ist alles drin, was uns beschreibt, was bei uns erlaubt ist, was nicht, welche und so weiter und so fort. Sogar Animationen können hier gezeigt werden, Buttons in sämtlichen Spezialvarianten, Shapes. So, ganz kurze Unterbrechung. Du kennst vielleicht noch nicht das KI-Café des Körting-Instituts, eines der führenden Formate im deutschsprachigen Raum. Mit über 400 Teilnehmern kommen wir jede Woche Mittwoch von 8.30 Uhr bis um 10 Uhr zusammen und lassen uns inspirieren. Wir geben neue Impulse mit dazu, wir haben spannende Anwendungsfälle, die wir live auf der Bühne lösen. Wir haben Experten mit am Start, die wir interviewen, die uns Einblicke hinter die Kulissen geben und vieles, vieles mehr und das in einer spannenden Community und du kannst kostenlos dabei sein. Melde dich gerne an unter www.körting-institut.com slash ki-café und wir sehen uns nächste Woche Mittwoch um 8.30 Uhr. Bis dann. Jungs, Vorlagen für Komponenten und so weiter und so fort. Das ist alles hier drin. Und das existiert jetzt und weil es eben existiert, kann ich, ich kann auch mehrere Designsysteme übrigens erstellen und ich kann, wenn ich hier im Cloud Design anfange zu designen, kann ich entweder mit Designsystem anfangen oder ich kann es weg Xen, dann fange ich einfach so an, einen Entwurf zu machen und kann später dann das Designsystem drüber jagen. Also ihr seht, es ist sehr variabel Cloud Design und wenn ich ein Designsystem habe, dann kann ich in Cloud Code wiederum sagen, ich habe ein Demo-Projekt gemacht, ich will zeigen, wie Cloud Code direkt unter so einem Cloud Design Projekt spricht, Design Sync und so weiter und so fort. Und dann habe ich hier mein Design, den Design Sync, das ist dieses Feature, was es erst seit dieser Woche gibt, hat dann Cloud Xen aufgerufen und ich habe dann angefangen, mir aufzählen zu lassen, was es eigentlich alles gibt. Sorry, wenn es jetzt hier nur trockener Code ist, aber das ist nun mal die Interaktion, durch die man durch muss, wenn man von Cloud Design aus, Entschuldigung, von Cloud Code aus zugreift, dann kommt erstmal wieder Fragen. Ihr kennt das, Interaktion mit Cloud Code. Das Wichtige ist, Cloud Code kann mit Cloud Design reden und zwar direkt. Seit dieser Woche geht es so richtig gut und dann kann man eben anfangen, hier zu arbeiten und dann kann man eben anfangen, hier eben auch zu runterscrollen. Und dann habe ich eben, das habe ich vorhin schon kurz gezeigt, jetzt ist eben dieses Projekt, was der Thorsten ursprünglich erstellt hat, das ist jetzt bei mir hier, bei mir in einem eigenen Projekt, in meinem Cloud Code Umfeld gelandet. Und jetzt könnte ich hier weitermachen, könnte es, keine Ahnung, auf dem Server deployen, Funktionen hinzubauen. Ich könnte es iterieren und manipulieren und könnte dann wiederum diese Erkenntnisse, die ich vielleicht jetzt in meinem Learning-Prozess mache, auch wieder zurückspielen zu Design, indem ich sage, hey Claude, aktualisiere bitte mein Design-System hinsichtlich der Punkte, die wir gerade besprochen haben, weil es jetzt gerade um Eckenradien oder um die Discoverability von Buttons auf einer Seite geht oder irgendwas ähnliches. Also ihr seht, worauf es mir ankommt, euch mitzuteilen, ist eben, dass diese Interaktion zwischen diesen beiden Welten, die zwar irgendwie schon zusammengehört haben, aber die auch doch komisch getrennt waren, dass die jetzt geht. Man kann miteinander reden, man kann von beiden Seiten prompten und durch diese internen Cloud Code, Cloud Desktop App, internen Möglichkeiten, die es jetzt gibt, ist es jetzt endlich möglich.