Wie ich Claude mit Pencil.dev in ein Design-Tool verwandelt habe

Der Sprecher stellt Pencil als ein neuartiges Design-Tool vor, das KI-Prompts in direkt bearbeitbare Oberflächen verwandelt. Er vergleicht die Funktionalität mit etablierten Programmen wie Figma und Sketch, wobei Pencil durch seine KI-Integration hervorsticht. Das Tool unterstützt essenzielle Design-Elemente wie CSS-Variablen, UI-Kits und Komponenten. Da KI im Design oft noch ungenaue Ergebnisse liefert, dient Pencil als Brücke, um Entwürfe vor der Codierung manuell zu verfeinern. Dies ist besonders wichtig, um Kundenfreigaben einzuholen, ohne Zeit in fehlerhaften Code zu investieren.

In diesem Abschnitt wird die praktische Anwendung von Pencil als agentenbasiertes Tool in der IDE demonstriert. Der Nutzer verwendet Claude Code im Terminal und verbindet sich über einen MCP-Server direkt mit der Pencil-App. Durch einen spezifischen Prompt wird ein Dashboard für eine Rover-Management-Plattform unter Verwendung des Lunaris UI-Kits generiert. Man kann im Video beobachten, wie die Navigationsleisten und Layoutstrukturen in Echtzeit auf der Leinwand entstehen. Diese Methode nutzt die volle Power von KI-Skills und Terminal-Workflows, um Design-Prozesse massiv zu beschleunigen.

Nach der Generierung zeigt der Sprecher, wie einfach das Design manuell angepasst werden kann, beispielsweise durch die Korrektur von Abständen oder Paddings. Ein großer Vorteil von Pencil ist die Flexibilität bei der Wahl der UI-Kits, wobei Bibliotheken wie Shadcn, Nitro oder Halo zur Verfügung stehen. Mit wenigen Klicks lassen sich globale Änderungen wie der Wechsel in den Dark Mode oder die Anpassung der Primärfarben durchführen. Diese Interaktivität sorgt dafür, dass der Nutzer die volle Kontrolle behält, anstatt nur ein statisches Bild von einer KI zu erhalten. Alles fühlt sich dabei für Figma-Nutzer sehr vertraut und intuitiv an.

Der Prozess wird anhand eines zweiten Beispiels vertieft, bei dem eine Website für eine französische Bäckerei im Boho-Stil erstellt wird. Der Sprecher nutzt Claude, um nicht nur das Layout, sondern auch passende Bilder von Unsplash und spezifische Texte generieren zu lassen. Trotz kleinerer Rückfragen der KI entsteht ein beeindruckendes, mehrseitiges Design, das professionell wirkt und kaum als KI-generiert erkennbar ist. Es wird betont, dass Fehler im Design kein Problem darstellen, da jedes Element durch Doppelklick sofort editiert werden kann. Dieser Workflow demonstriert die Effizienz der Kombination aus menschlicher Kuration und KI-Kreativität.

Ein entscheidender Schritt ist die Umwandlung des fertigen Designs in eine tatsächlich funktionierende Website mittels Claude Code. Das Ergebnis ist eine nahezu identische Web-Umsetzung inklusive komplexer Menüs, Trennlinien und strukturierter Inhaltsbereiche. Technisch basiert Pencil auf reinen JSON-Dateien, was die Kommunikation mit KI-Agenten extrem vereinfacht. Diese Struktur erlaubt es, Designs problemlos mit echten Datenbanken zu verknüpfen oder bestehende Figma-Dateien zu importieren. Der Sprecher beschreibt das Gefühl, einem Design beim Entstehen zuzusehen, als regelrecht magisch.

Abschließend reflektiert der Sprecher über die aktuelle Phase des Tools, das derzeit noch komplett kostenlos und Venture-finanziert ist. Er verschweigt dabei nicht die vorhandenen Schwächen, wie gelegentliche Hänger im Chat-Interface oder langsame Ladezeiten bei bestimmten Aktionen. Dennoch überwiegen die Vorteile, insbesondere die einfache Einrichtung im Vergleich zu Konkurrenzprodukten von Sketch oder Figma. Zukünftige Updates sollen den Import eigener UI-Kits wie Tailwind Plus ermöglichen. Der Beitrag endet mit einer Empfehlung, das Tool jetzt auszuprobieren, solange es noch ohne Kosten zugänglich ist.