AI-first Design: Wie Pencil und Claude Code unseren Designprozess verändert haben

Ich bin Designerin. Keine Entwicklerin. Und trotzdem hat sich mein Arbeitstag in den letzten sechs Monaten stärker verändert als in den zehn Jahren davor. Der Grund: Wir haben unseren gesamten Design-Workflow auf einen AI-first-Ansatz umgestellt – mit zwei Tools, die zusammen etwas ermöglichen, was vorher undenkbar war.

Jede Designerin kennt das Gefühl: Du investierst Tage in einen Entwurf, definierst jeden Abstand, jede Farbnuance, jede Interaktion – und dann kommt die Entwicklung und baut etwas, das „ungefähr so“ aussieht. Nicht aus Böswilligkeit, sondern weil die Übersetzung von visuellem Design in Code immer verlustbehaftet war.

Figma hat das verbessert. Dev Mode, Auto Layout, Design Tokens – alles Schritte in die richtige Richtung. Aber am Ende bleibt ein fundamentaler Bruch: Das Design lebt in der Cloud, der Code im Repository. Zwei Welten, zwei Sprachen, zwei Mental Models. Jede Änderung muss manuell übersetzt werden.

Pencil ist ein Design-Tool, das direkt in der IDE läuft – in VS Code oder Cursor. Auf den ersten Blick sieht es aus wie ein schlankes Figma: Vektor-Canvas, Auto-Layout, Komponenten-System. Aber es gibt einen entscheidenden Unterschied.

Design-Dateien werden als .pen-Dateien im Git-Repository gespeichert. Nicht in einer separaten Cloud. Nicht als Screenshot oder Export. Sondern als versionierte Datei, die sich branchen, mergen und differn lässt – genau wie Code. Für mich als Designerin war das zunächst ungewohnt. Für die Zusammenarbeit mit Entwickler:innen war es ein Gamechanger.

Der eigentliche Wow-Moment kommt durch die Kombination mit Claude Code. Pencil stellt über das Model Context Protocol (MCP) eine Brücke bereit: Claude Code kann den Canvas direkt lesen – Abstände, Farben, Typografie, Komponentenhierarchie. Nicht als Bilddatei, die interpretiert werden muss, sondern als strukturierte Daten.

In der Praxis heißt das: Ich gestalte eine Komponente in Pencil, benenne die Layer sinnvoll, füge Annotationen für Interaktionen und Responsive-Verhalten hinzu. Dann sage ich Claude Code: "Bau diese Komponente als React-Component mit CSS Modules." Und Claude liefert Code, der mein Design pixelgenau umsetzt – inklusive Hover-States, responsive Breakpoints und Accessibility-Attribute.

Für explorative Konzeptphasen nutzen wir weiterhin Figma – die Multiplayer-Features und das Plugin-Ökosystem sind unschlagbar für Teamarbeit. Für komponentenbasierte Arbeit starten wir direkt in Pencil. Figma-Designs lassen sich per Copy-Paste in Pencil übernehmen, Layer und Auto-Layout bleiben erhalten.

Der wichtigste Schritt – und der, den viele unterschätzen. Je besser die Layer benannt und annotiert sind, desto besser wird der generierte Code. „Container“ ist nutzlos. "ServiceCard_hover_expanded" ist Gold. Ich investiere 5 Minuten in Benennung und spare 2 Stunden Korrekturrunden.

Claude Code liest den Canvas über MCP-Tools wie get_canvas_context, get_selected_frames und get_style_guide. Es versteht nicht nur das visuelle Layout, sondern auch die Design-Tokens und die Komponentenhierarchie. Der Output ist Framework-spezifischer Code – bei uns React mit CSS Modules und unseren eigenen Design-Tokens.

Der generierte Code ist kein Prototyp – er ist Production-ready. Trotzdem reviewen wir jede Komponente: Stimmen die Abstände? Funktioniert die Animation? Ist die Accessibility korrekt? Anpassungen mache ich oft direkt im Pencil-Canvas, Claude Code aktualisiert den Code. Keine Spec-Dokumente, keine Jira-Tickets für Pixel-Korrekturen.

AI-first Design bedeutet nicht, dass Designer:innen überflüssig werden. Es bedeutet, dass die langweiligste Phase unserer Arbeit – die Übersetzung von Entwurf in Spezifikation in Code – wegfällt. Was bleibt, ist das, was KI nicht kann: kreative Entscheidungen treffen, Markenidentität verstehen, Nutzerbedürfnisse in visuelle Lösungen übersetzen.

Pencil und Claude Code sind keine Konkurrenz zu Figma. Sie sind die Brücke, die zwischen Design und Code gefehlt hat. Für uns bei Smart Commerce ist dieser Workflow inzwischen Standard – und ich kann mir nicht vorstellen, jemals wieder „normale“ Design-Specs zu schreiben.

Wenn Sie als Agentur oder Entwicklungsteam Ihren Design-to-Code-Workflow beschleunigen wollen, sprechen Sie uns an. Wir teilen unsere Erfahrungen gerne – inklusive der Stolpersteine, die wir auf dem Weg dorthin aus dem Weg geräumt haben.