Ich habe ein Layout in Figma gestaltet. Kann Claude es bauen?

Ich habe in Figma eine Website für eine fiktive Natursteinmarke designt. Dann habe ich Claude das Design gegeben, um zu sehen, wie gut AI ein individuelles Design in eine echte Website umsetzen kann. Das Layout hat ein asymmetrisches Grid, unterschiedliche Bildgrößen, eine Marquee über die volle Breite, große Serif Typografie, bewussten Weißraum und GSAP Animationen.

Kein Figma MCP. Keine Plugins. Nur das Design, die Assets und ein detaillierter Master Prompt.

Ich bewerte das Ergebnis Bereich für Bereich und zeige, was Claude im ersten Versuch richtig macht, wo es hakt und wie ich die restlichen Punkte behebe.

In diesem Video:

• Mein Figma Design und die visuelle Richtung
• Der Master Prompt, den ich verwendet habe
• Das erste Ergebnis von Claude
• Scorecard: was im ersten Versuch funktioniert hat
• Die Animationen nachbessern

Kostenlose Code Dateien, ohne Anmeldung findest du unter Downloads.

Kann AI ein Design bauen, das sie nicht selbst erstellt hat?

Die meisten AI Website Tools funktionieren andersherum. Du beschreibst eine Idee und die AI entscheidet, wie die Seite aussehen soll. Für Designer ist genau das der uninteressanteste Teil, den man abgeben kann. Das Design, der Rhythmus der Bilder und die Idee hinter jeder Animation sind genau die Entscheidungen, die du selbst treffen willst.

Deshalb stellt dieser Test eine andere Frage: Kannst du eine individuelle Website in Figma designen, jede visuelle Entscheidung selbst treffen und Claude dann genau dieses Design in eine echte animierte Website umsetzen lassen? Kein Figma MCP, kein Plugin, kein bezahlter Figma Plan. Claude bekommt nur einen Screenshot des Layouts, die Fonts, die Bilder und einen gut strukturierten Master Prompt.

Das Designkonzept für SOLUM

Das Testprojekt ist SOLUM, eine fiktive Marke, die mit Naturstein arbeitet und Küchenarbeitsplatten, Tische und Interior Elemente herstellt. Die visuelle Richtung begann mit einem kleinen Moodboard in Figma, das größtenteils aus Pinterest Recherche entstanden ist. Eine Idee stach heraus: Stein fast wie eine Skulptur zu zeigen, statt nur fertige Produkte.

Für die Typografie reichen zwei kostenlose Fonts von Fontshare. Satoshi ist die klare Sans Serif für Interface und Fließtext, Lora die Serif für die großen editorialen Headlines.

Zwei ruhigere Layoutrichtungen standen ebenfalls zur Auswahl, und beide würden für Kunden funktionieren. Für diesen Test wirkten sie aber zu normal. Die finale Version hat asymmetrische Layouts, Bilder in unterschiedlichen Größen und vertikalen Positionen, eine Marquee über die volle Breite, übergroße Typografie und viel Weißraum. Kurz gesagt: eine schwierigere Aufgabe für Claude.

Grid und Bildrhythmus

Das Desktop Design basiert auf einem 12 Spalten Grid mit 80 Pixel Rand und 24 Pixel Gutter. Das zahlt sich später aus, denn du kannst präzise Korrekturen geben wie „starte bei Spalte sechs und gehe über fünf Spalten“ statt „schieb es ein bisschen nach links“.

Die Bilder wurden zuerst als größere Auswahl generiert und dann von Hand angeordnet. Statt sechs Produktfotos nebeneinander mischt die Abfolge Nahaufnahmen, weitere Einstellungen, Rohmaterialien und Menschen. Dieser Rhythmus ist immer noch eine sehr menschliche Entscheidung, bei der Geschmack und Erfahrung zählen.

Den Projektordner vorbereiten

Das Setup ist einfach. Ein Projektordner auf dem Desktop enthält:

• Einen Ordner mit den Fontfamilien von Satoshi und Lora
• Einen Bilderordner mit einem Unterordner namens slider-images, nummeriert von eins bis acht
• Einen zweiten Bilderordner für die drei Bilder in der Sektion darunter
• Einen kompletten Desktop Export des Figma Layouts als wichtigste visuelle Referenz
• Einen zweiten Screenshot mit eingeblendetem Figma Grid für die Spaltenausrichtung

Der Slider Ordner enthält zwei Bilder mehr, als das Figma Layout zeigt. Das ist Absicht, um zu sehen, wie Claude mit zusätzlichen Assets umgeht.

Wechsle in Claude von Chat zu Code, starte ein neues Projekt und wähle diesen Ordner aus. Claude kann jetzt direkt mit deinen lokalen Dateien arbeiten.

So ist der Master Prompt aufgebaut

Da Claude keinen Zugriff auf deine Figma Ebenen hat, entscheidet die Qualität der Anweisungen über das Ergebnis. Der Master Prompt ist in klare Abschnitte unterteilt.

Ziel

Das Ziel erklärt, was du baust und wie es sich anfühlen soll: eine hochwertige Natursteinwebsite, die editorial, minimal und raffiniert wirkt. Der Screenshot zeigt, wie die Seite aussieht. Das Ziel erklärt, warum.

Designreferenz

Das ist die wichtigste Regel. Bild eins wird als Source of Truth für Komposition, Proportionen, Abstände, Typografie, Bildplatzierung und Weißraum definiert. Ein Satz macht den Unterschied: Wenn in den schriftlichen Anweisungen etwas fehlt oder der Referenz widerspricht, gewinnt das Referenzbild. Dein Prompt wird nie jedes Detail beschreiben, also soll Claude auf das Design schauen, statt eine neue Lösung zu erfinden.

Designsystem

Hier gibst du Claude, was ein Screenshot nicht zeigen kann. Die Seite nutzt zwei Farben, ein dunkles Braun #270F05 für Text und ein warmes Off White #F2EBE3 für den Hintergrund. Jeder Textstil bekommt exakte Werte, zum Beispiel Lora Regular mit 115 Pixeln für die große Headline und Satoshi Medium mit 22 Pixeln und 70 % Deckkraft für den Fließtext. Ohne diesen Deckkraftwert würde Claude vermutlich einfach eine hellere Farbe abgreifen, und so ist das Design nicht aufgebaut.

Der Prompt verlangt außerdem rem als Haupteinheit und clamp() für fließende Skalierung, statt feste Pixelwerte aus Figma zu übernehmen.

Animationen

Die Animationen werden schon im ersten Prompt beschrieben, weil einige davon die Seitenstruktur beeinflussen. Jedes Bild erscheint mit einer kleinen Bewegung nach oben und einem Fade. Zusammengehörige Bilder bekommen einen kurzen Stagger. Die Hero Marquee bewegt sich langsam nach links, wird beim Scrollen schneller, ändert nie die Richtung und gleitet nach dem Scrollen sanft zurück auf ihre Grundgeschwindigkeit. Große Headlines erscheinen Zeile für Zeile mit einem Stagger von 50 Millisekunden.

Das Ergebnis nach 12 Minuten

Claude war nach etwa 12 Minuten fertig. Von Hand hätte das rund zwei Stunden gedauert.

Claude hat einen eigenen Assets Ordner angelegt, alle Bilder in mehreren Größen in WebP umgewandelt und die Originale behalten. Der Stack ist genau das, was der Prompt verlangt hat: eine HTML Datei, eine CSS Datei, eine JavaScript Datei und GSAP.

Ein paar Dinge brauchten Feinschliff. Der Page Fade und der Bild Stagger waren zu langsam, der Hero Button erschien erst nach dem Scrollen, und die Marquee wurde beim Hochscrollen zu schnell. Der Container hatte außerdem keine maximale Breite und passte deshalb nicht zum Figma Artboard. Nach einer Max Width von 1728 Pixeln mit margin: 0 auto brach die Headline in fünf Zeilen um, genau wie in Figma.

Die Scorecard

Claude hat alle neun Bereiche des Tests bestanden:

• Layout und Asymmetrie entsprechen dem Design
• Die Bildreihe behält unterschiedliche Größen und Positionen
• Die Typografie nutzt die richtigen Fonts und speichert die 70 % Deckkraft in einer CSS Variable
• Alle acht Slider Bilder sind in der Marquee, nicht nur die sechs aus dem Layout
• Die Marquee läuft in die richtige Richtung und wird beim Scrollen schneller
• Headlines erscheinen Zeile für Zeile
• Tablet und Mobile funktionieren gut, obwohl es kein mobiles Design gibt, und auf dem Tablet reduziert sich die Marquee sogar auf drei Bilder
• Der Code nutzt saubere Klassennamen, CSS Variablen, rem und clamp()
• prefers-reduced-motion ersetzt die Marquee Bewegung durch einen sanften Fade, und es gibt einen Skip Link für Tastaturnutzer

Bestanden heißt aber nicht fertig. Ein Feedback Prompt hat den Container, das Timing beim Laden, die Reihenfolge der Reveals und die Marquee Geschwindigkeit auf kleineren Bildschirmen korrigiert. Danach saßen alle Animationen.

Was das für echte Kundenprojekte bedeutet

Das war eine einzelne Seite in einem kontrollierten Setup mit fertigem Design, Bildern, Fonts und einer klaren Richtung. Eine echte Kundenwebsite braucht viel mehr: mehrere Seiten, CMS Inhalte, Formulare, Hosting, SEO, Datenschutz und Bearbeitung durch Kunden. Genau da übernimmt eine Plattform wie Webflow weiterhin die schwere Arbeit.

Spannend ist nicht, Design durch AI zu ersetzen. Spannend ist, die kreativen Entscheidungen zu behalten und AI dort einzusetzen, wo sie die Umsetzung schneller oder besser macht. Der nächste Test geht noch einen Schritt weiter, mit einer individuellen Scroll Animation für die Stein Sektion.