00:00:00Warum ist der Design-zu-Code-Handoff beim Bauen mit KI immer noch so problematisch?
00:00:04Man sollte meinen, dass es mittlerweile einen sauberen Weg gäbe, etwas zu entwerfen,
00:00:06es zu ändern und den Code automatisch aktualisieren zu lassen.
00:00:08Aber jedes Tool, das unser Team getestet hat, kann entweder Design oder Code. Nie beides.
00:00:13Stitch und Bolt basieren auf Prompt-to-Code. Es gibt kein Design-Canvas, zu dem man zurückkehren kann.
00:00:17Das Figma-MCP ist schreibgeschützt; die KI kann Designs daraus ziehen, aber nicht darin gestalten.
00:00:22Und wenn man einen Coding-Agenten direkt nutzt, bedeutet jede Designänderung ein neues Prompting von Grund auf.
00:00:26Als Pencil.dev an Zugkraft gewann und behauptete, eine bidirektionale Brücke zwischen
00:00:31Design und Code zu sein, weckte das unsere Aufmerksamkeit. Aber als wir tatsächlich damit bauten,
00:00:35war die Brücke nicht so nahtlos wie erwartet. Was als einfacher Test begann, führte dazu,
00:00:40dass unser Team viel tiefer gehen musste als geplant, um diesen Workflow zum Laufen zu bringen.
00:00:44Sicherlich haben Sie schon von Pencil.dev gehört,
00:00:47dem neuen KI-Design-Tool, das in letzter Zeit bei Designern sehr beliebt geworden ist.
00:00:51Es ist im Grunde eine Brücke zwischen spezialisierten Design-Tools
00:00:56und KI-Entwicklungswerkzeugen, die auf die Implementierung dieser Designmuster zugeschnitten sind.
00:01:00Es lässt sich mit allen gängigen agentischen IDEs verbinden und bietet viele Funktionen,
00:01:04die den Design-zu-Code-Workflow glätten, wie Komponentengenerierung,
00:01:08Unterstützung von UI-Bibliotheken und automatische CSS-Klassen-Erstellung.
00:01:11Für Figma-Nutzer dürfte sich die Benutzeroberfläche sehr vertraut anfühlen.
00:01:15Es ist derzeit kostenlos und unser Team hat es zum Testen heruntergeladen.
00:01:18Wir haben uns die Desktop-App geholt, die Optionen bot, alle unsere installierten
00:01:23KI-Plattformen zu verknüpfen. Wir haben Claude Code gewählt, da dies unser
00:01:27primäres Tool war. Pencil.dev nutzt im Hintergrund KI-Plattformen wie
00:01:32Claude Code und Codex. Sobald die Desktop-App installiert war,
00:01:36wurde das MCP automatisch für Pencil.dev konfiguriert und alle Tools erschienen sofort in Claude Code.
00:01:41Nach der Einrichtung waren alle OpenAI- und Anthropic-Modelle im Chat verfügbar.
00:01:46Wir entschieden uns für Opus 4.6. Dieses Tool hat mächtige Design-Funktionen.
00:01:51Es speichert Design-Dateien als .pen-Dateien im Projektordner,
00:01:56ein JSON-basiertes Format, das man auch mit Git tracken kann. Aber das Feature,
00:02:01das es wirklich abhebt, ist die bidirektionale Brücke zwischen
00:02:06dem Coding-Agenten und dem Design in der App. Doch der Sync war nicht ganz so, wie wir dachten.
00:02:10Wir nahmen an, dass Claude oder ein Agent Design und Code automatisch synchronisiert,
00:02:16aber das war nicht der Fall. Wir mussten den Sync manuell anstoßen,
00:02:21da das Design nicht automatisch in Code umgesetzt wird. Dabei analysierte es das Design Schritt für Schritt
00:02:26und implementierte es in der HTML-Datei. Es entsprach zwar exakt dem Design auf dem Canvas,
00:02:32aber das bei jeder kleinen Änderung manuell zu tun, war uns zu viel Aufwand.
00:02:37Unser Team arbeitete an einer Landingpage für ein Creative Direction Studio,
00:02:41die wir bereits mit Pencil.dev und Claude Code entworfen hatten. Soweit wir sehen konnten,
00:02:46war es eine solide Website, die unsere kreative Vision genau so wiedergab, wie wir es wollten.
00:02:51Wir implementierten das Design einmal mit Claude in unser Next.js-Projekt,
00:02:56aber viele Elemente gefielen uns noch nicht und mussten angepasst werden.
00:03:01Wir mussten ständig Dinge ändern, konnten aber nicht jedes Mal Claude bitten,
00:03:06das Projekt neu zu synchronisieren, da das eine repetitive Aufgabe ist. Also
00:03:10haben wir ein Skript erstellt, um dieses Problem zu lösen. Es nutzt JavaScript-Bibliotheken,
00:03:15die Dateien auf Änderungen überwachen. Es gab auch Sperrfristen (Cooldowns),
00:03:20um zu verhindern, dass Claude unnötig oft gefeuert wird und Tokens verschwendet. Der Zweck
00:03:25des Skripts ist es, die .pen-Datei zu überwachen: Sobald sich das Design ändert,
00:03:29wird das Claude-CLI mit einem Prompt gestartet, um das Projekt zu aktualisieren.
00:03:34Durch den Cooldown entsteht eine Pause zwischen den Speicherungen, damit nicht jede
00:03:39kleine Änderung sofort gesendet wird. Zur Nutzung führen wir einfach “npm run sync” aus,
00:03:44woraufhin der Worker sofort beginnt, die .pen-Datei mit unserem Design zu überwachen.
00:03:49Wenn wir nun bei laufendem Skript etwas ändern und die Speichern-Tastenkombination drücken,
00:03:54wird das Claude-CLI automatisch getriggert und die Änderung in das Projekt übertragen,
00:03:59ohne dass wir es explizit befehlen müssen. Vorab ist jedoch ein Schritt nötig:
00:04:04Man muss alle erforderlichen Berechtigungen für die Bearbeitung vorkonfigurieren,
00:04:10wie Lese-/Schreibzugriff und MCP-Tool-Aufrufe in der settings.json im .claude-Ordner.
00:04:15Andernfalls bleibt Claude unbegrenzt in der Berechtigungsabfrage hängen.
00:04:20Ohne diese kann Claude keine Änderungen vornehmen oder die Implementierung korrekt abschließen.
00:04:24Mit dem Skript wurde es viel einfacher, da wir den Sync nicht mehr manuell prompten mussten.
00:04:29Jede Iteration wurde vom Skript überwacht und automatisch zur Implementierung an Claude gesendet.
00:04:34Dieses Skript sowie der Quellcode der App sind in AI Labs Pro verfügbar.
00:04:39Das ist unsere neue Community, in der man fertige Templates erhält,
00:04:43die man direkt in seine Projekte einbauen kann – für dieses und alle vorherigen Videos.
00:04:48Wenn Ihnen unsere Arbeit gefällt, ist dies der beste Weg, uns zu unterstützen. Link in der Beschreibung.
00:04:52Eine Stärke von Claude Code ist das Multi-Agenten-System, das Aufgaben parallelisiert.
00:04:57Wir dachten uns: Warum versuchen wir das Multi-Agenten-Setup nicht mit Pencil.dev?
00:05:02Da es ohnehin als MCP verbunden ist, ließen wir mehrere Agenten an der Next-Implementierung
00:05:07arbeiten, wobei jeder gleichzeitig einen anderen Aspekt der App übernahm. Mit Claude Code
00:05:12war das einfach, da es auf alle Dokumente wie PRDs oder UI-Guides als Kontext zugreifen kann.
00:05:18Wir wollten auch die restlichen Seiten der Website implementieren, nicht nur die Landingpage.
00:05:23Wir wiesen die Agenten explizit an, jeweils einen anderen Teil der App zu übernehmen,
00:05:28den wir bauen wollten. Wir starteten mit der Exploration und riefen die MCP-Tools auf.
00:05:33Da wir fünf Seiten hatten, startete Claude fünf Agenten für jeweils eine dedizierte Seite.
00:05:39Nach kurzer Zeit war die erste Version des App-Designs fertig. Es generierte
00:05:44alle benötigten Seiten und stellte sicher, dass das Design zur Landingpage passte,
00:05:48inklusive Schriftarten und Styling. Danach drückten wir Strg+S zum Speichern,
00:05:54und das Skript implementierte das Design automatisch in der App, um den Prozess zu beschleunigen.
00:05:58Obwohl die Website schon gut aussah, fehlte ihr noch das gewisse Etwas.
00:06:03Es gab keine Bewegung, und wir brauchten Scroll-Animationen, um den Blick zu führen.
00:06:08Dafür nutzten wir GSAP, unsere bevorzugte Bibliothek für robuste JavaScript-Animationen,
00:06:14da sie komplexe Animationen einfach umsetzbar macht. Wir verwendeten dafür
00:06:19einen sehr detaillierten Prompt in XML. Wir haben XML gewählt, da Claude-Modelle
00:06:26darauf optimiert sind, strukturierte XML-Prompts leichter zu verarbeiten. Der Prompt
00:06:31enthielt Aufgabendetails, Abhängigkeiten und wichtige Hinweise für jedes Element
00:06:36und legte genau fest, wie jeder Abschnitt reagieren soll – alles in entsprechenden Tags.
00:06:41Als wir diesen Prompt an Claude Code gaben, wurden Komponenten mit GSAP-Motion
00:06:46hinzugefügt und GSAP selbst installiert. Nachdem die Implementierung fertig war,
00:06:51prüften wir die Website. Mit den Animationen wirkte sie viel lebendiger und interaktiver.
00:06:56Das gesamte Nutzererlebnis war ein völlig anderes als bei der vorherigen, statischen Version.
00:07:00Dieser Prompt ist ebenfalls in unserer Community AI Labs Pro verfügbar,
00:07:04wo Sie ihn für Ihre eigenen Projekte herunterladen können. Wenn Ihnen
00:07:09unser Content gefällt, drücken Sie bitte den Hype-Button; das hilft uns sehr.
00:07:14Zusätzlich zu den GSAP-Effekten haben wir noch eine Ebene mit Lenis hinzugefügt.
00:07:19Lenis ist eine Open-Source-Bibliothek für Smooth Scrolling und sehr beliebt,
00:07:25um Webseiten immersiver zu gestalten. Sie fragen sich vielleicht: Warum noch eine Bibliothek,
00:07:30wenn wir schon GSAP-Scroll-Animationen haben? Aber Lenis und GSAP
00:07:35ergänzen sich hervorragend. GSAP steuert, was beim Scrollen passiert,
00:07:39und Lenis steuert das Look-and-Feel des Scrollvorgangs an sich.
00:07:44Ohne Lenis springt der Scrollvorgang; mit Lenis fließt die Seite sanft dahin,
00:07:49sodass sich die GSAP-Animationen natürlicher anfühlen. Wir erstellten wieder
00:07:54einen detaillierten XML-Prompt, genau wie bei GSAP. Der Lenis-Prompt
00:07:59konzentrierte sich auf die Verbesserung der bereits vorhandenen Scroll-Animationen.
00:08:04Er listete Abhängigkeiten, Anweisungen und Beschreibungen der Elemente auf,
00:08:09wie die Animationen zu platzieren sind und wie sie funktionieren sollen. Wir gaben
00:08:13diesen Prompt an Claude Code weiter, das daraufhin Änderungen im gesamten Repo vornahm.
00:08:18Nach der Implementierung war die Website deutlich verbessert. Die größte Änderung
00:08:23war das weichere Scrollen, was die Navigation viel immersiver machte.
00:08:28Als die Website mit allen Features fertig war, mussten wir sie nur noch
00:08:32auf UX-Standards prüfen. Dafür haben wir mit dem Skill Creator
00:08:38einen Skill namens “UX Audit” erstellt. Dieser zielt darauf ab, die Qualität der UI-Elemente
00:08:44zu prüfen und sicherzustellen, dass alles den gängigen UX-Standards entspricht.
00:08:49Er bestand aus Phasen wie Kontextsammlung, Analyse einer 9-Punkte-Checkliste
00:08:54und einer Berichtsphase mit Bewertung. Er enthielt zudem Referenzen zur Checkliste
00:08:59sowie Python-Skripte, um UX-Probleme programmgesteuert zu finden,
00:09:04die dem menschlichen Auge vielleicht entgehen würden.
00:09:08Der Audit-Skill fand zwei kritische sowie mehrere mittlere und kleinere Probleme.
00:09:14Kritisch war vor allem der Farbkontrast. Die Website erhielt zunächst nur ein “C”.
00:09:19Nachdem alle notwendigen Änderungen definiert waren, ließen wir sie implementieren.
00:09:24Nach den Anpassungen sah die Website zwar nicht grundlegend anders aus, aber
00:09:29die Usability verbesserte sich enorm und sie war nun auch WCAG-konform.
00:09:34Ein erneuter Audit verbesserte das Ranking von C auf B, da alle Hauptprobleme
00:09:40gelöst waren und nur noch Kleinigkeiten offen blieben.
00:09:45Das bringt uns zum Ende dieses Videos. Wenn Sie den Kanal unterstützen
00:09:50und uns helfen wollen, solche Videos zu machen, nutzen Sie gerne den Super Thanks Button.
00:09:55Vielen Dank fürs Zuschauen und bis zum nächsten Mal!