Das wichtigste Design-Tool ist plötzlich das schlichteste: Der Berliner Produktdesigner Mariusz Cieśla skizziert seine Oberflächen nur noch grob in tldraw und lässt eine KI daraus fertige Komponenten bauen. Sein Argument trifft jede Agentur, die ihr Design-System im Code pflegt.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Ein modernes Design-Tool muss nicht mächtig sein, sondern nah an der Idee. Warum Cieśla das teure Hochglanz-Mockup abgeschrieben hat, liegt an einer Zutat, die viele Teams längst besitzen: einem Design-System im Code.
Das Wichtigste in Kürze
- tldraw dient als schlichter Skizzen-Canvas; die Funktion „Make Real“ erzeugt aus groben Entwürfen per KI echten Code.
- Der Ansatz funktioniert nur, sofern ein gepflegtes Design-System die Bausteine im Code bereits vorgibt.
- Für ein fertiges Produkt braucht tldraw eine kommerzielle Lizenz; Hobbyprojekte und eine 100-Tage-Testphase bleiben kostenlos.
- Ohne reifes System droht der Einheitsbrei aus generischen Komponenten, den viele Teams gerade fürchten.
Was kann das Design-Tool tldraw besser als Figma?
Figma gilt seit Jahren als Standard für Produktdesign, ausgelegt auf pixelgenaue und gemeinsam bearbeitete Entwürfe. tldraw setzt am anderen Ende an: ein Infinite-Canvas-Baukasten für React, dessen Quelltext offen einsehbar ist und der rund 49.600 Sterne auf GitHub gesammelt hat. Zwischen Gedanke und sichtbarem Ergebnis liegt fast keine Bedienung, weil das Werkzeug bewusst nur Rechtecke, Pfeile und Text kennt.
Genau dieser Verzicht wird zum Vorteil, sobald die visuellen Entscheidungen schon im Design-System stecken. Die Funktion „Make Real“ erzeugt aus der Skizze per Sprachmodell lauffähigen Code. Der Browser wird damit zur eigentlichen Wahrheitsquelle, nicht mehr die Design-Datei.
Wie verändert die KI den Design-Workflow?
Der Ablauf kehrt die gewohnte Reihenfolge um. Cieśla skizziert den Flow, ein KI-Agent überträgt die Formen in vorhandene Komponenten samt deren Verhalten, danach prüft er das Ergebnis direkt im Browser.[1] Den Auslöser für dieses Umdenken nennt er selbst seinen Xerox-Moment: ein Projekt von Jem Gold bei Airbnb, das schon früh Papierskizzen per Kamera in Oberflächen übersetzte.
Die Technik dahinter findet sich längst in großen Produkten. Der tldraw-Canvas steckt in Anwendungen von Google, Shopify und Autodesk, und Googles Oberflächen-Werkzeug Stitch baut auf derselben Grundlage. Aus der Spielerei „Make Real“ ist so ein Muster geworden, das die Grenze zwischen Entwurf und Umsetzung verschiebt.
Ohne ein gepflegtes Design-System im Code skizzieren Sie ins Leere, denn die KI setzt nur Bausteine zusammen, die schon existieren. tldraw spart den Hochglanz, nicht die Denkarbeit am System.
— Markus Seyfferth, Chefredakteur Dr. Web
Für welche Teams lohnt sich das schlanke Design-Tool?
Der Hebel liegt beim Design-System, nicht beim Zeichenwerkzeug. Inhouse-Teams und größere Agenturen mit fest im Code hinterlegten Komponenten sparen mit dem schlanken Ansatz echte Stunden. Freelancer ohne eigenes System bekommen dagegen genau den generischen Baustein-Look, über den die Branche beim immer gleichen grauen Icon klagt.
Beim Geld bleibt tldraw zweigeteilt. In der Entwicklung und für Hobbyprojekte fällt keine Gebühr an, dazu läuft eine Testphase über 100 Tage ohne Kreditkarte. Ein fertiges Produkt braucht dagegen eine kommerzielle Lizenz, deren Preis tldraw individuell verhandelt.[2]
Ein Punkt bleibt Handarbeit. Ob die erzeugten Komponenten die Barrierefreiheit nach BFSG und WCAG erfüllen, prüft am Ende der Mensch, nicht das Modell. Prüfen Sie am besten vor dem ersten Kundenprojekt, wie sauber Ihr Design-System die KI-Ausgabe abdeckt.
Quellen
[1] Mariusz Cieśla: „The Last Product Design Tool“
[2] tldraw: „Infinite Canvas SDK for React“
Mehr Newshunger?
- Drawesome: Zeichen-Toolbar für React, ganz ohne Zusatzbibliothek
- Dither it: Bilder im Browser dithern, ohne Upload und Konto
- field-sizing in CSS: Wie Formularfelder ohne JavaScript mitwachsen
- CSS-Scroll-Animationen 2026: Wie der Browser die Scroll-Bibliothek ersetzt
- ShaderPad: Shader-Effekte auf jeder Website mit nur 5,9 Kilobyte
