Ich Habe eine Komplette App in 2 Stunden Gebaut — Ohne Figma
Zwei Stunden. So lange brauchte ich, um von einem leeren Terminal zu einer voll interaktiven App mit Mikro-Animationen, Hover-States und einem kompletten Design-System zu kommen — alles ohne Figma auch nur einmal zu öffnen.
Und dann habe ich das Ganze zurück nach Figma gepusht als bearbeitbare Ebenen.
Ich weiß, dass dieser Satz wahrscheinlich etwas in deinem Gehirn gebrochen hat, wenn du Designer bist. Bei mir auch. Der Workflow, den wir alle verinnerlicht haben — in Figma designen, an Dev übergeben, drei Wochen warten, etwas zurückbekommen das nichts mit dem Mockup zu tun hat — wurde gerade komplett auf den Kopf gestellt. Erst bauen, dann nach Figma synchronisieren. Code-First Design. Und bevor du mir sagst, dass das ein Developer-Workflow ist, der sich als Design-Tool ausgibt, lass mich dir zeigen, was ich tatsächlich gebaut habe, denn der Output würde jeden Design Lead täuschen und denken lassen, er käme aus einer Figma-Datei eines Senior Product Designers.
Das Geheimnis ist Claude Codes Figma MCP-Integration kombiniert mit einem Workflow, den die meisten Designer noch nicht entdeckt haben. Ich habe eine Woche damit verbracht, drei spezifische Use Cases zu testen — Design-System-Übersetzung, Rapid Prototyping von Screenshots und vollständige Landing-Page-Konvertierung — und die Ergebnisse ließen mich überdenken, was "Designer" im Jahr 2026 überhaupt bedeutet.
Aber hier ist der Haken, den niemand in den Tutorials erwähnt: Die Umgebung falsch einzurichten wird deine Credits in einer Stunde verbrennen. Ich habe das auf die teure Art gelernt, und ich erspare dir denselben Fehler.
Das Setup, das die Meisten Designer Falsch Machen
Hier ist die Sache mit Claude Code, die Designer beim ersten Mal verwirrt. Sie hören "Claude", öffnen claude.ai, wählen Opus 4.6 aus dem Modell-Dropdown und beginnen nach Code zu prompten. Dreißig Minuten später sind ihre Credits aufgebraucht und sie haben eine halb fertige HTML-Datei, mit der sie nichts anfangen können.
So funktioniert das nicht. Überhaupt nicht.
Claude Code läuft innerhalb einer Umgebung — denk daran wie einen Arbeitsbereich, der deine Dateien organisiert, deine KI-Agenten verwaltet und dir einen ordentlichen Entwicklungskontext gibt. Das Tool funktioniert am besten, wenn es mit einem Editor wie Cursor gekoppelt ist, obwohl du es auch über Googles AntiGravity oder ähnliche Plattformen ausführen kannst. Ich benutze Cursor, weil sich die Dateiverwaltung natürlich anfühlt, wenn man jemals VS Code benutzt hat.
Die Umgebung ist wichtig, weil Claude Code deine Projektstruktur sehen muss. Es muss wissen, wo dein CSS liegt, wo deine HTML-Dateien sind, welche Assets du importiert hast. Wenn du einfach mit Claude in einem Browserfenster chattest, generiert es isolierte Code-Schnipsel ohne Projektbewusstsein. Wenn du es innerhalb einer ordentlichen Umgebung ausführst, generiert es Code, der in deine tatsächliche Dateistruktur passt, echte Pfade referenziert und auf dem aufbaut, was bereits existiert.
Das Einrichten hat mich beim ersten Mal etwa 15 Minuten gekostet. Jetzt kann ich ein neues Projekt in unter 3 Minuten aufsetzen. Hier ist der Prozess:
Schritt 1: Das richtige Abonnement holen. Claude Code bietet gestaffelte Pläne. Der "Pro"-Plan funktioniert für Experimente und Lernen. Wenn du echte Projektarbeit machst — besonders mit mehreren Agenten, die gleichzeitig laufen — gibt dir der "Max"-Plan unbegrenzte Credits und parallele Agenten-Unterstützung. Für Designer, die das Wasser testen, ist Pro in Ordnung. Sobald du süchtig bist (und das wirst du), upgrade.
Schritt 2: Installiere Claude Code als Erweiterung in Cursor. Dies verbindet die KI direkt mit deinem Projektarbeitsbereich. Jeder Prompt, den du schreibst, hat vollen Kontext deiner Dateien.
Schritt 3: Starte lokal. Erstelle deinen Projektordner, initialisiere ihn und arbeite zuerst lokal. GitHub-Integration kommt später, wenn du hosten oder teilen willst. Verkompliziere den Start nicht.
Dieser letzte Punkt ist wichtiger, als du denkst. Ich habe drei Designer-Freunde beobachtet, die versuchten, Claude Code einzurichten, indem sie zuerst ein GitHub-Repo erstellten, Deployment-Pipelines konfigurierten, CI/CD aufbauten — alles bevor sie eine einzige Codezeile geschrieben hatten. Sie folgten Developer-Tutorials, nicht Designer-Workflows. Starte lokal. Bring deinen ersten Build auf deinem Rechner zum Laufen. Das Cloud-Zeug kann warten.
Jetzt die Figma-Synchronisation — das ist der Teil, der alles für Design-Workflows ändert, und das Einrichten ist einfacher, als du erwarten würdest.
Claude Code mit Figma Verbinden (Der Teil, der Alles Ändert)
Die Synchronisation von Claude Code mit Figma erfordert einen persönlichen Zugangstoken. Hier ist genau, wie du einen generierst:
- Öffne Figma, gehe zu deinen Kontoeinstellungen
- Navigiere zum Abschnitt "Personal Access Tokens"
- Generiere einen neuen Token mit vollen Berechtigungen — Lesen, Schreiben, alles
- Setze das Ablaufdatum auf 90 Tage (das Maximum)
- Kopiere den Token sofort — Figma zeigt ihn nur einmal
Zurück in Claude Code, führe den Authentifizierungsbefehl mit deinem Token aus. Einmal verbunden, hast du eine Zwei-Wege-Brücke zwischen deiner Code-Umgebung und Figma. Designs fließen in beide Richtungen.
Warum ist das wichtig? Weil der traditionelle Workflow einbahnig ist. Design geht an Dev. Dev interpretiert es. Sachen gehen verloren. Mit Claude Codes Figma-Integration kannst du:
- Design-Specs direkt aus Figma in deine Code-Prompts ziehen
- Generierten HTML/CSS zurück nach Figma pushen als bearbeitbare Vektorebenen
- Beide Umgebungen synchron halten, während du iterierst
Ich werde ehrlich sein — als ich zum ersten Mal "Code zurück nach Figma pushen" hörte, nahm ich an, es würde einen schlampigen gerasterten Screenshot erstellen. Nein. Die HTML-zu-Design-Pipeline konvertiert deinen Code-Output in tatsächliche Figma-Ebenen. Bearbeitbarer Text. Größenänderbare Frames. Ordentliches Auto-Layout. Es ist nicht jedes Mal pixel-perfekt, aber nah genug, um in beide Richtungen weiter zu iterieren.
Dieser bidirektionale Fluss schaltet etwas frei, das ich nicht erwartet hatte: die Möglichkeit, im Code zu prototypen (wo Interaktionen tatsächlich funktionieren) und dann in Figma zu verfeinern (wo visueller Feinschliff schneller geht). Das Beste aus beiden Welten. Aber ich greife vor — lass mich dir die drei Use Cases zeigen, wo dieses Setup wirklich glänzt.
Use Case 1: Ein Design-System in Produktionscode Übersetzen
Das war mein erstes Experiment, und es hat mich vom gesamten Workflow überzeugt.
Ich hatte ein bestehendes Design-System in Figma — Typografieskala, Farbpalette, Schattendefinitionen, Button-Varianten, Spacing-Tokens. Die Art von Fundament, das jedes Produktteam baut und dann Schwierigkeiten hat, in Code zu übersetzen, der tatsächlich übereinstimmt. Ich war an Projekten beteiligt, bei denen die Design-System Figma-Datei und die CSS-Implementierung innerhalb von zwei Wochen auseinanderdrifteten. Das passiert, weil die manuelle Pflege beider mühsam und fehleranfällig ist.
Hier ist, was ich getan habe: Ich öffnete die Design-System-Datei in Figmas Dev Mode, wählte die Seiten mit meinen Kern-Tokens aus und kopierte die Komponentenreferenzen. Dann tauchte ich in Claude Code mit einem spezifischen Prompt ein, der beschrieb, was ich wollte — eine komplette CSS-Implementierung des Design-Systems mit ordentlichen Custom Properties, responsiver Typografie und Komponentenklassen.
Claude Code generierte die CSS- und HTML-Dateien in etwa 4 Minuten.
Die Typografie stimmte. Die Farben waren exakte Hex-Werte, die aus den Figma-Specs gezogen wurden. Die Button-Varianten hatten das richtige Padding, Border-Radius und State-Styles. Ich öffnete das generierte HTML in Live Server (eine einfache Browser-Preview-Erweiterung) und verglich es Seite an Seite mit der Figma-Datei.
Es war nicht perfekt — die Schattenwerte brauchten leichte Anpassung, und eines der Font-Weights defaultete auf 500 statt 600. Aber das waren 30-Sekunden-Fixes. Die strukturelle Genauigkeit war etwas, wofür ein Developer einen ganzen Tag brauchen würde, um es von Grund auf zu bauen, vorausgesetzt, er interpretiert die Figma-Specs korrekt.
Pro-Tipp: Beim Übersetzen von Design-Systemen füttere Claude Code eine Kategorie nach der anderen. Kippe nicht dein gesamtes System in einen einzigen Prompt. Mache zuerst Typografie, dann Farben, dann Schatten, dann Komponenten. Der Output ist genauer, wenn jeder Prompt einen fokussierten Bereich hat.
Die echte Belohnung kam zwei Wochen später, als ein Kunde Änderungen am primären Button-Style anforderte. Ich aktualisierte es in Claude Code, das CSS propagierte über jede Seite, die diese Komponente nutzte, und ich pushte das aktualisierte Design zurück nach Figma für Stakeholder-Review. Eine Änderung, beide Umgebungen aktualisiert. Keine "Welche Datei ist die Wahrheitsquelle?"-Verwirrung.
Das allein würde die Setup-Zeit rechtfertigen. Aber der zweite Use Case ist, wo ich am meisten Spaß hatte.
Use Case 2: Rapid Prototyping von Screenshots
Stell dir das vor. Du scrollst durch Dribbble, oder browsst die Seite eines Wettbewerbers, oder schaust dir einen Screenshot an, den ein Kunde dir geschickt hat mit der Notiz "so etwas in der Art." Normalerweise würdest du Figma öffnen, das Layout von Grund auf nachbauen, die Abstände approximieren, die Typografieskala raten. Eine Stunde später hast du ein statisches Mockup.
Mit Claude Code nahm ich einen Screenshot eines Designs, das mir gefiel — ein SaaS-Dashboard mit einer Sidebar-Navigation, Metrikkarten und einer Datentabelle — zog ihn in meinen Claude Code-Prompt und beschrieb, was ich wollte: "Erstelle eine einzelne HTML-Datei mit eingebettetem CSS, die dieses Layout nachbildet. Füge Hover-Animationen auf den Karten und ein sanftes Sidebar-Toggle hinzu."
Neunzig Sekunden später hatte ich einen funktionierenden Prototyp in meinem Browser.
Kein Mockup. Kein Wireframe. Eine funktionierende, interaktive Seite mit Hover-States, die tatsächlich auf meinen Cursor reagierten, eine Sidebar, die mit einem sanften CSS-Übergang einklappte, und Metrikkarten, die beim Resize des Fensters richtig skalierten.
War es produktionsreif? Nein. Die Daten waren Platzhalter, die responsiven Breakpoints brauchten Arbeit, und einige Abstände waren leicht daneben. Aber als Ausgangspunkt für Erkundung — um zu testen, ob eine Layout-Richtung sich richtig anfühlt, bevor man Stunden in High-Fidelity-Design investiert — ist es unerreicht.
Ich habe begonnen, diesen Workflow für Kunden-Discovery-Calls zu verwenden. Statt statischer Moodboards zeige ich interaktive Prototypen, die ich in den 20 Minuten vor dem Meeting gebaut habe. Kunden können durchklicken, den Browser resizen, sehen wie sich Dinge bewegen. Das Feedback ist dramatisch besser, weil sie auf etwas reagieren, das sich echt anfühlt.
Der Geschwindigkeitsvorteil ist kaum zu übertreiben. Eine Layout-Erkundung, die mich in Figma 2-3 Stunden kostete, dauert jetzt 5-10 Minuten in Claude Code. Ich kann vier verschiedene Ansätze in der Zeit generieren, die ich früher für einen brauchte. Und die, die nicht funktionieren? Ich lösche die Datei und mache weiter. Keine emotionale Bindung an ein sorgfältig gestaltetes Figma-Frame.
Pro-Tipp: Für Screenshot-basiertes Prototyping bleibe bei einzelnen HTML-Dateien mit eingebettetem CSS. Bitte Claude Code nicht, ein Framework oder eine Komponentenarchitektur für schnelle Erkundungen aufzusetzen. Je einfacher die Dateistruktur, desto schneller die Iteration.
Hier wird es allerdings interessant — denn der dritte Use Case ist, wo ich auf die größten Herausforderungen stieß.
Use Case 3: Eine Komplette Landing Page von Figma zu Code Konvertieren
Das war der ambitionierte Test. Ich hatte eine komplette Landing Page in Figma designt — Hero-Sektion, Feature-Grid, Testimonials, Preistabelle, Footer. Benutzerdefinierte Illustrationen, Gradient-Hintergründe, die volle Produktion.
Ich nahm den Figma-Link und promptete Claude Code, das komplette Design in HTML und CSS zu konvertieren.
Der erste Output war... gemischt. Die Struktur stimmte — jede Sektion existierte, der Layout-Fluss entsprach dem Design, die Typografie saß. Aber die benutzerdefinierten Illustrationen ließen sich nicht übertragen (erwartet — KI kann keine Vektorkunst aus einer Link-Referenz nachbilden), und einige der Gradient-Winkel waren daneben.
Hier ist, was ich lernte und was das Projekt rettete: Schicke nicht die gesamte Seite auf einmal. Teile sie in Sektionen auf.
Ich startete den Prozess neu, indem ich Claude Code zuerst den Hero-Sektions-Link schickte. Der Output war deutlich genauer — der Gradient stimmte, die Headline-Typografie war korrekt, der CTA-Button hatte das richtige Padding und Border-Radius. Ich genehmigte es, schickte dann die Features-Sektion, dann Testimonials, und baute die Seite inkrementell auf.
Sektion für Sektion kam die Landing Page in etwa 45 Minuten zusammen. Jeder Prompt war fokussiert, und Claude Code konnte seine volle Aufmerksamkeit darauf verwenden, eine Sektion richtig hinzubekommen, statt eine ganze Seite zu approximieren.
Die benutzerdefinierten Illustrationen waren die einzige echte Lücke. Ich habe die am Ende aus Figma als SVGs exportiert und manuell in den Projektordner gelegt. Claude Code referenzierte sie dann korrekt in nachfolgenden Prompts. Nicht voll automatisiert, aber ein kleiner manueller Schritt in einem ansonsten optimierten Prozess.
Für den letzten Feinschliff nutzte ich iterative Prompts: "Füge einen Dark-Mode-Toggle hinzu, der sanft übergeht" (2 Minuten), "Lass die Preiskarten beim Scrollen hinein-animieren" (90 Sekunden), "Füge eine mobile Navigationsschublade hinzu" (3 Minuten). Jede Ergänzung landete sauber, weil Claude Code die bestehende Code-Struktur verstand.
Das fertige Produkt — eine voll responsive, animierte Landing Page mit Dark Mode — hätte mich 2-3 Tage zum Handcoden oder 4-5 Stunden Hin-und-Her mit einem Developer gekostet. Gesamtzeit vom Figma-Design zum funktionierenden Code: etwa 2 Stunden inklusive des Fehlstarts.
Klartext: Was Dieses Tool Noch Nicht Kann
Ich habe ein ziemlich rosiges Bild gemalt, und das liegt daran, dass die Ergebnisse mich wirklich beeindruckt haben. Aber ich würde lügen, wenn ich sagte, der Workflow wäre makellos, und du verdienst es, die Einschränkungen zu kennen, bevor du Zeit in die Einrichtung investierst.
Claude Code generiert Frontend-Code. HTML, CSS, JavaScript für Interaktionen und Animationen. Wenn dein Projekt ein Backend braucht — Benutzerauthentifizierung, Datenbankverbindungen, serverseitige Logik — betrittst du Developer-Territorium. Das Tool generiert keine API-Endpoints oder Datenbankschemata aus einer Figma-Datei. Für Marketing-Sites und interaktive Prototypen ist das egal. Für Produkt-Apps brauchst du immer noch Backend-Unterstützung.
Benutzerdefinierte Illustrationen sind ein manueller Schritt. Wie erwähnt muss komplexe Vektorkunst separat aus Figma exportiert werden. Claude Code kann Bilddateien in deinem Projekt referenzieren, aber es kann keine handgezeichneten Illustrationen aus einer Design-Spec nachbilden. Erwarte, Assets manuell zu handhaben.
Die Figma-zu-Code-Genauigkeit hängt von der Design-Organisation ab. Wenn deine Figma-Datei ordentliches Auto-Layout, benannte Ebenen und Komponentenstrukturen verwendet, ist Claude Codes Output bemerkenswert originalgetreu. Wenn deine Figma-Datei ein Durcheinander aus absolut positionierten Frames mit "Frame 247"-Namen ist... spiegelt der Output dieses Chaos wider. Gute Design-Hygiene in Figma führt zu besserem Code-Output. Genau wie bei menschlichen Developern, ehrlich gesagt.
Iteration ist erforderlich. Ich habe nie einen perfekten Output beim ersten Prompt bekommen, bei allem über einfache Komponenten hinaus. Der Workflow ist: generieren, Vorschau ansehen, Lücken identifizieren, nach Fixes prompten, wiederholen. Normalerweise 2-3 Runden. Das ist immer noch dramatisch schneller als traditionelles Handcoden, aber erwarte keine Magie beim ersten Versuch.
Credit-Verbrauch variiert stark. Einfache Komponentengenerierung belastet dein Budget kaum. Vollständige Landing-Page-Konvertierung mit iterativer Verfeinerung kann 20-30% der täglichen Zuweisung eines Pro-Plans verbrauchen. Wenn du das professionell machst, budgetiere für den Max-Plan und erspare dir die Angst, Credits mitten im Projekt schwinden zu sehen.
Eine Vorhersage, die ich machen werde: Innerhalb der nächsten sechs Monate wird die Figma-zu-Code-Genauigkeit signifikant verbessern, da diese Modelle besser darin werden, räumliche Beziehungen und Design-Tokens zu verstehen. Die Lücke zwischen "generiert" und "handgefertigt" ist bereits kleiner, als die meisten annehmen. Sie schließt sich schnell.
Was Designer Tatsächlich Messen Sollten
Nach einer Woche Nutzung dieses Workflows für Kundenprojekte und persönliche Experimente sehen die Zahlen so aus.
Design-System-Übersetzung: 15-20 Minuten für ein komplettes Token-System (Typografie, Farben, Schatten, Buttons). Manuelles Äquivalent: 4-6 Stunden.
Rapid Prototyping von Screenshots: 5-10 Minuten pro Layout-Erkundung. Manuelles Äquivalent: 2-3 Stunden pro Mockup.
Vollständige Landing-Page-Konvertierung: 1,5-2,5 Stunden inklusive Iteration. Manuelles Äquivalent: 2-3 Tage Designer-Developer-Zusammenarbeit.
Figma-Sync-Roundtrips: Ich habe Code 8 Mal in der Woche zurück nach Figma gepusht. 6 davon produzierten saubere, bearbeitbare Ebenen, mit denen mein Team direkt arbeiten konnte. 2 brauchten kleine manuelle Nacharbeit in Figma. Das ist eine 75%-Clean-Sync-Rate, was ehrlich gesagt meine Erwartungen übertraf.
Kundenfeedback-Durchlaufzeit: Das ist die Metrik, die mir am wichtigsten ist. Am selben Tag generierte interaktive Prototypen bedeuteten, dass Kunden Feedback im ersten Meeting geben konnten, statt auf eine zweite Review-Runde zu warten. Zwei Projekte gingen in einer einzigen Session von Discovery zu genehmigter Richtung. Das ist mir mit statischen Mockups noch nie passiert.
Die schnellen Gewinne sind offensichtlich — Geschwindigkeit, Kosten, Iterationsgeschwindigkeit. Der langfristige Gewinn ist subtiler, aber wichtiger: Designer, die interaktive Prototypen und produktionsreife Frontends bauen können, haben eine fundamental andere Position in der Branche. Du wartest nicht mehr darauf, dass jemand anders deine Vision zum Leben erweckt. Du baust sie selbst und beweist, dass sie funktioniert, bevor jemand über Machbarkeit diskutieren kann.
Der Workflow, der Tatsächlich Funktioniert
Nachdem ich jede Kombination getestet habe, die mir einfiel, ist hier der Workflow, auf den ich mich für Design-Projekte festgelegt habe:
Für Erkundung und Konzeptarbeit: Starte in Claude Code. Generiere schnelle Prototypen von Screenshots oder verbalen Beschreibungen. Fass Figma nicht an, bis du eine Richtung gefunden hast, die sich richtig anfühlt. Das ist kontraintuitiv für Designer, die auf Figma-First-Workflows trainiert sind, aber die Geschwindigkeit code-basierter Erkundung ändert die Rechnung.
Für Produktions-Design-Systeme: Baue in Claude Code, synchronisiere nach Figma für Team-Review. Aktualisiere in beiden Umgebungen nach Bedarf. Die bidirektionale Synchronisation sorgt dafür, dass keine veraltet.
Für Landing Pages und Marketing-Sites: Designe Schlüsselsektionen in Figma für Stakeholder-Genehmigung, konvertiere dann Sektion für Sektion in Claude Code zu Code. Füge Interaktionen und Animationen im Code hinzu (wo sie tatsächlich funktionieren), pushe dann finale Builds zurück nach Figma für Dokumentation.
Für Kundenpräsentationen: Zeige immer die interaktive Version. Statische Mockups unterschätzen deine Arbeit. Eine 5-Minuten Claude Code Session vor einem Meeting kann ein flaches Design in einen klickbaren Prototyp verwandeln, der Deals abschließt.
Der gemeinsame Faden durch all das: Claude Code ersetzt Figma nicht. Es gibt Figma einen produktionstauglichen Partner. Design und Code hören auf, separate Phasen eines Projekts zu sein und werden zu zwei Ansichten derselben Sache.
Wenn mir jemand vor einem Jahr gesagt hätte, dass ich Designern empfehlen würde, Terminal-Befehle zu lernen, hätte ich gelacht. Aber das Terminal, das ich benutze, verlangt nicht von mir, JavaScript von Grund auf zu schreiben. Es fragt mich, was ich bauen möchte, und baut es, während ich kreative Entscheidungen treffe.
Das ist kein Developer-Workflow mit Designer-Maske. Das ist, was Design-Tools schon immer hätten sein sollen.
🤝 Lass Uns Zusammenarbeiten
Du möchtest KI-Systeme bauen, Workflows automatisieren oder deine technische Infrastruktur skalieren? Ich helfe gerne.
- 🔗 Fiverr (Maßanfertigungen & Integrationen): fiverr.com/s/EgxYmWD
- 🌐 Portfolio: mejba.me
- 🏢 Ramlit Limited (Enterprise-Lösungen): ramlit.com
- 🎨 ColorPark (Design & Branding): colorpark.io
- 🛡 xCyberSecurity (Sicherheitsdienste): xcybersecurity.io
