Wie man in 2 Stunden eine Website mit Claude und Figma erstellt

Mit Claude kannst du an einem einzigen Nachmittag von einem Figma-Design zu einer live geschalteten Website gelangen – ohne Programmierkenntnisse erforderlich. Der Workflow ist einfach: Design in Figma, exportiere oder beschreibe das Design zu Claude, generiere den Code und stelle ihn auf Vercel oder Netlify bereit. Das Ganze kostet $0, wenn du die kostenlosen Tarife nutzt.

Leute posten „$5.000 Website in 2 Stunden"-Videos auf X, aber die meisten überspringen die eigentlichen Schritte. Dieser Leitfaden schließt diese Lücke. Jeder Prompt ist enthalten, jede Entscheidungsstelle ist erklärt, und die Kompromisse sind ehrlich.

Warum das Jetzt Funktioniert (und Vor einem Jahr Nicht)

Vor einem Jahr bedeutete das Umwandeln eines Designs in Code mit KI, einen Screenshot einzufügen und eine grobe Annäherung zu erhalten, die Stunden der Bereinigung benötigte. Heute bedeutet Claudes 1-Million-Token-Kontextfenster, dass du ihm ein ganzes Design-System – Farben, Typografie, Abstände, Komponentendetails – geben kannst und bereits beim ersten Durchgang produktionsreife Code erhältst, die deinem Design sehr nahekommen.

Der Schlüssel: Die Qualität dessen, was du erhältst, hängt fast ausschließlich davon ab, wie gut du das Design beschreibst. Vage Beschreibungen produzieren vage Websites. Spezifische, strukturierte Beschreibungen produzieren spezifische, polierte Websites.

Was du brauchst

Drei Tools, alle mit kostenlosen Tarifen:

Figma – für dein Design. Der kostenlose Tarif funktioniert gut. Wenn du kein Design hast, hole dir eine kostenlose Vorlage aus der Figma Community und passe sie an.

Claude – für die Code-Generierung. Der kostenlose Tarif gibt dir Sonnet, das dies gut bewältigt. Pro ($20/Monat) gibt dir Opus 4.7 für komplexere Websites.

Vercel oder Netlify – zur Bereitstellung. Beide haben kostenlose Tarife. Verbinde dein GitHub-Repository, pushe Code, und die Website geht online.

Schritt 1: Bereite dein Figma-Design vor

Bevor du Claude einbeziehst, organisiere deine Figma-Datei. Dieser Schritt bestimmt die Qualität von allem, was folgt.

Dein Design sollte klar definierte Seiten (Home, About, Contact usw.), konsistente Abstände und Ausrichtung, eine sichtbare Farbpalette (notiere die exakten Hex-Werte), identifizierte Schriftarten und responsive Breakpoints für Desktop und Mobile haben, wenn möglich.

Mache dir keine Sorgen um Pixelperfektionismus. Claude bewältigt Implementierungsdetails gut. Was zählt, ist, dass dein Design Struktur, Hierarchie und visuellen Stil klar vermittelt.

Profi-Tipp: Benenne deine Figma-Layer aussagekräftig. „Hero Section", „Feature Cards", „Pricing Table" sind viel nützlicher für dich beim Schreiben von Prompts als „Frame 247".

Schritt 2: Exportiere deine Design-Informationen

Claude kann eine Figma-Datei nicht direkt lesen, daher musst du dein Design in Informationen übersetzen, mit denen Claude arbeiten kann. Du hast drei Ansätze, von einfachsten bis genauesten:

Ansatz A: Screenshot + Beschreibung. Mache Vollseiten-Screenshots jeder Seite in deinem Design. Lade sie zusammen mit einer schriftlichen Beschreibung von Layout, Farben und Interaktionen zu Claude hoch. Dies ist der schnellste Ansatz und funktioniert überraschend gut.

Ansatz B: Figma Dev Mode Export. Wenn du einen bezahlten Figma-Plan hast, verwende Dev Mode, um CSS-Werte, Spacing-Token und Komponentenspezifikationen zu exportieren. Gib diese zusammen mit Screenshots an Claude für präzisere Ergebnisse.

Ansatz C: Geschriebene Design-Spezifikation. Schreibe eine detaillierte Beschreibung jedes Abschnitts – Header, Hero, Features, Testimonials, Footer – einschließlich Farben, Schriftarten, Größen und Layout. Dies dauert länger, gibt dir aber die meiste Kontrolle über die Ausgabe. Wenn du ohne Figma-Design buildest, ist dies dein Weg.

Schritt 3: Schreibe deinen Anfangs-Prompt

Hier machen die meisten Leute einen Fehler. Sie schreiben „baue mir eine Website, die so aussieht wie dieser Screenshot" und erhalten generische Ausgaben. Hier ist die Prompt-Struktur, die konsistent qualitativ hochwertige Ergebnisse liefert:

Je spezifischer du bist, was der Nutzer sieht, desto besser die Ausgabe. Beschreibe nicht den Code – beschreibe die Erfahrung. Wenn du Hilfe brauchst, deinen Prompt vor dem Senden zu schärfen, kann unser kostenloser Prompt-Optimierer dir helfen, ihn für bessere Ergebnisse zu strukturieren.

Schritt 4: Überprüfen und Iterieren

Claudes erste Ausgabe erfasst normalerweise 60–80 % deines Designs. Die restlichen 20–40 % kommen aus der Iteration. Dies ist der Schritt, wo die meisten „Vibe Coding"-Tutorials enden, aber hier passiert die echte Qualität.

Überprüfe die Ausgabe, indem du drei Dinge checkst: Stimmt das Layout mit deinem Design überein? Fühlen sich Farben und Typografie richtig an? Sieht es auf dem Mobilgerät gut aus?

Dann iteriere mit spezifischem Feedback. Sag nicht „mache es besser". Sag:

• "Die Hero Section braucht mehr vertikales Padding – füge 120px oben und unten hinzu"
• "Die Feature Cards sollten auf Desktop ein 3-spaltiges Grid sein, auf Mobile eine einzelne Spalte"
• "Der CTA-Button sollte einen Hover-Effekt haben – dunkle den Hintergrund um 10 % ab und skaliere leicht hoch"
• "Die Footer-Links sollten in 4 Spalten angeordnet sein: Product, Company, Resources, Legal"

Jede Feedback-Runde sollte sich mit 3–5 spezifischen Problemen befassen. Drei Runden bringen dich normalerweise auf 95 % deines Designs.

Schritt 5: Füge echte Inhalte und Bilder hinzu

Ersetze Platzhaltertexte mit deinen echten Inhalten. Ersetze Platzhalter-Bild-Divs mit echten Bildern. Wenn du Hilfe beim Schreiben von Website-Copy brauchst, ist Claude ausgezeichnet darin – gib ihm deine Brand-Beschreibung und frage nach Homepage-Copy, die deinen Ton passt.

Für Bilder verwende kostenlose Stock-Inhalte von Unsplash oder Pexels oder generiere benutzerdefinierte Bilder mit einem KI-Bildwerkzeug. Werfe die Bilddateien in deinen Projektordner /public und aktualisiere die src-Attribute.

Schritt 6: Stelle mit einem Klick bereit

Wenn du Next.js verwendet hast (empfohlen), dauert die Bereitstellung auf Vercel 60 Sekunden:

1. Pushe deinen Code in ein GitHub-Repository
2. Gehe zu vercel.com und melde dich mit GitHub an
3. Klicke „Import Project" und wähle dein Repository
4. Vercel erkennt Next.js automatisch und konfiguriert alles
5. Klicke „Deploy"

Deine Website ist live mit einer .vercel.app URL. Verbinde eine benutzerdefinierte Domain in Verc Einstellungen, falls du eine hast.

Netlify funktioniert fast identisch – importiere von GitHub, Framework wird automatisch erkannt, stelle bereit. Beide Plattformen handhaben SSL, CDN und kontinuierliche Bereitstellung automatisch. Jedes Mal, wenn du zu GitHub pushest, aktualisiert sich deine Website.

Nicht sicher, welche Bereitstellungsplattform du verwenden solltest? Wir haben einen vollständigen Vergleich geschrieben: Wohin stellst du nach dem Vibe Coding bereit?

Häufige Fehler, die Leute stolpern lassen

1. Claude einen Screenshot ohne schriftlichen Kontext geben. Screenshots helfen, aber Claude braucht schriftliche Beschreibungen von Farben, Schriftarten, Abstände und Layout, um genauen Code zu produzieren. Der Screenshot ist eine Referenz – der Text ist die Anweisung.

2. Versuchen, alles in einem Prompt zu bauen. Eine 6-seitige Website mit Animationen, Formularen und einem CMS ist zu viel für einen Durchgang. Baue Seite für Seite, Abschnitt für Abschnitt. Starte mit der Homepage, mache sie richtig, dann gehe zur nächsten Seite.

3. Mobile Responsiveness auslassen. Wenn du Mobile nicht in deinem Prompt erwähnst, wird Claude ein nur für Desktop bestimmtes Layout bauen. Füge immer „mobile responsive" zu deinen technischen Anforderungen hinzu und teste die Ausgabe bei 375px Breite.

4. Interaktionen nicht testen. Klicke auf jeden Button, fülle jedes Formular aus, scrolle jede Seite. Von KI generierter Code sieht oft richtig aus, hat aber kaputte Links, nicht funktionierende Formulare oder fehlende Hover-States. Teste vor der Bereitstellung.

5. Perfektionismus vor der Bereitstellung. Stelle bei 90 % bereit und iteriere. Deine erste Bereitstellung muss nicht perfekt sein – sie muss online gehen. Du kannst Aktualisierungen in Sekunden pushen.

Für Kunden buildest? Lese unseren Leitfaden über 5 Sicherheitsfehler, die jeder Vibe Coder macht bevor du ablieferst.

Fazit

Der Figma-zu-Claude-zu-Bereitstellungs-Workflow ist die schnellste Möglichkeit, ein Design in eine funktionierende Website umzuwandeln, ohne selbst Code zu schreiben. Die Qualität hängt von der Spezifität deiner Prompts ab, nicht von Programmierfähigkeiten. Drei Iterationsrunden bringen dich normalerweise vom ersten Entwurf zur produktionsreifen Version.

Starte mit einem einfachen Projekt – einem Portfolio oder einer Landing Page – und arbeite den kompletten Zyklus einmal durch. Das zweite Mal wird halb so lange dauern, weil du genau wissen wirst, wie du deine Prompts strukturierst.

Nicht sicher, welches KI-Tool am besten für deinen Workflow geeignet ist? Mache unser 60-Sekunden-Model-Picker-Quiz oder siehe den vollständigen State of AI Models Vergleich.

Offenlegung: Einige Links in diesem Artikel sind Affiliate-Links. Wir empfehlen nur Tools, die wir persönlich getestet und regelmäßig verwendet haben. Siehe unsere vollständige Offenlegungsrichtlinie.