Eine Website in unter drei Stunden: Claude Code, Pencil und fünf Phasen

Eine Website mit fünf Seiten kostet klassisch zwischen 3.500 und 8.000 Euro und dauert drei bis vier Wochen. Nicht weil das Bauen so lange dauert, sondern weil zwischen Design und Code eine Übergabe liegt, und jede Feedbackrunde drei bis fünf Tage kostet. Die Alternative war bisher ein Template — dann sieht die Seite aus wie alle anderen.

Dieses Video zeigt einen dritten Weg: Claude Code im integrierten Terminal von VS Code, dazu pencil.dev für den visuellen Teil. Kein Figma, kein Baukasten. Der Text darunter ist derselbe Ablauf zum Nachlesen, mit den Prompts im Klartext und mit den Stellen, an denen es nicht funktioniert hat.

Werkzeuge

Der Ablauf hat fünf Phasen: Designsystem, Komponenten, Code, Deploy und Messung, SEO-Audit. Die Reihenfolge ist der eigentliche Inhalt — jede Phase erzeugt das Material, auf das sich die nächste beruft.

Phase 1 · Designsystem

Bevor eine Zeile Code entsteht, braucht die Seite eine visuelle Sprache: Farben, Typografie, Abstände, Radien. Wer das überspringt, bekommt fünf Seiten, die einzeln funktionieren und zusammen nicht.

Der Weg dahin: auf Pinterest nach website design system suchen, zwei oder drei Referenzen speichern, in einen Ordner design-system-reference/ im Projekt legen. Dann eine Datei design-system.pen anlegen und Claude Code im Terminal starten.

Sieh dir dieses Designsystem als Referenz an: design-system-reference/system-01.png

Erstelle daraus ein vollständiges Designsystem mit Farbpalette, Typografie-
Skala, Abstandssystem und Border-Radius-Tokens. Modern, klar, zurückhaltend.
Nutze die Pencil-Erweiterung dafür.

Claude liest die .pen-Datei, versteht das Format und legt das System an: Primärfarben, Sekundärfarben, Neutrale, Überschriften H1 bis H6, Fließtext, Beschriftungen, Abstände von 4 bis 128 Pixeln. Dazwischen macht es Screenshots der eigenen Arbeit und prüft sie gegen das, was es bauen sollte.

Dauer: etwa fünfzehn Minuten.

Phase 2 · Komponenten

Für die Komponenten ist 21st.dev die Referenz: einige hundert von der Community gebaute Bausteine, sortiert nach Kategorie. Hero-Sektionen, Preistabellen, Call-to-Action-Blöcke. Man sucht sich einen Hero aus, der passt, und übernimmt dessen Beschreibung in den Prompt.

Entwirf diese Komponenten in Pencil, auf Basis unseres Designsystems:

- Hero-Sektion mit Headline, Subline und zwei CTAs
- Features-Grid mit Icons
- Testimonial-Sektion
- Blog-Card-Layout
- Kontaktformular
- Navigationsleiste
- Footer

Noch kein Code. Nur die Entwürfe in der Pencil-Datei.

Sieben Komponenten, alle mit denselben Tokens. Danach der zweite Schritt: alles zu einer Startseite zusammensetzen. Und dann der Schritt, der den Rest trägt — die Startseite wird zur Referenz für alle weiteren Seiten:

Erstelle die Features-Seite auf Basis des Startseiten-Designs.

Anschließend dieselbe Anweisung für Lösung, Preise und Über-uns. Claude legt sogar Platzhalterbilder in die Entwürfe, damit man sieht, wie ein Block mit Bild wirkt.

Dauer: etwa zwanzig Minuten.

Zwei Rückkanäle

Das ist der Teil, den ich an diesem Aufbau am nützlichsten finde. Es gibt zwei Ebenen, auf denen man mitliest:

• Text. Das Terminal-Log sagt, welche Datei gerade bearbeitet wird und warum.
• Bild. Die Pencil-Datei zeigt live, was entsteht. Wenn Claude einen Screenshot einer Sektion macht, läuft eine Abtastanimation über genau diese Sektion.

Bei einem Auftrag, der zwanzig Minuten am Stück läuft, ist der Unterschied zwischen „ich warte" und „ich sehe zu" erheblich.

Eine praktische Warnung dazu: Wenn du in der Pencil-Datei selbst etwas verschiebst, erscheint ein kleiner Punkt am Tab. Dann Strg + S. Ohne das ist die Datei beim nächsten Öffnen leer.

Phase 3 · Code

Jetzt erst das Projekt:

Erstelle ein neues Next.js-Projekt mit TypeScript und Tailwind 4.
Lege die Ordnerstruktur für fünf Seiten an: Startseite, Features,
Lösung, Preise, Über uns.

Danach die eigentliche Übersetzung:

Baue auf Basis des Designsystems und der Komponenten aus Pencil alle
fünf Seiten aus. Nutze Platzhalterbilder von Unsplash. Alles
vollständig responsiv. Folge den Komponentenentwürfen genau.

Claude macht Screenshots jeder Unterseite aus der Pencil-Datei, zerlegt die Arbeit und verteilt sie auf fünf parallele Agenten — einer pro Seite. Die Tokens aus der .pen-Datei landen als Tailwind-4-Theme-Variablen in globals.css, sodass im Markup Klassen wie bg-lilac oder text-secondary stehen.

Der erste Blick auf localhost:3000 war dann allerdings nicht der erhoffte.

Der Tailwind-Fehler

Hero-Sektion und mehrere andere Blöcke waren im Layout zerschossen. An dieser Stelle bekommt Claude Playwright:

Behebe die Styling-Probleme, beginne mit der Startseite. Nutze Playwright,
um Screenshots der gesamten Website zu machen, und behebe damit die Fehler.

Claude installiert Playwright, schreibt ein Skript, das alle Seiten aufnimmt, macht sieben Screenshots — und findet Folgendes:

max-w-4xl löst zu 96 Pixeln auf statt zu den erwarteten 896. max-w-2xl löst zu 48 Pixeln auf.

Das ist eine Eigenheit von Tailwind 4: Die max-w-*-Utilities mit Zahlen greifen auf die Abstandsskala zu, nicht mehr auf die alten, an Breakpoints orientierten Größen. max-w-4xl ist dort calc(var(--spacing) * 4xl) und damit winzig. Die Behebung waren explizite Pixel- beziehungsweise Rem-Werte in allen betroffenen Dateien.

Dieser Fehler ist der interessanteste Moment im ganzen Video, und zwar aus zwei Gründen. Erstens hätte ich ihn beim Lesen des Codes nicht gefunden — der Code war syntaktisch einwandfrei und die Klassennamen waren korrekt. Zweitens hat ihn auch Claude nicht durch Lesen gefunden, sondern erst, nachdem es sich das Ergebnis im Browser ansehen konnte. Ein Agent ohne Blick auf das Gerenderte ist ein Agent, der Code schreibt und nicht weiß, was er anrichtet.

Danach kam noch eine Runde für die Bewegung:

Verbessere die UI und UX: Hover-Animationen, Idle-Animationen, und was
sonst noch sinnvoll erscheint.

Phase 4 · Deploy

Um die Seite von außen messen zu können, muss sie erreichbar sein. Dafür braucht es ein GitHub-Repository und ein Vercel-Projekt — und beides kann Claude selbst anlegen, wenn es Zugangstoken bekommt.

• GitHub: Settings → Developer Settings → Personal Access Token (classic)
• Vercel: Profil → Settings → Tokens

Ein Hinweis, der wichtiger ist als er klingt: Diese Token sind vollwertige Zugänge zu deinem Konto. Ich habe beide direkt nach der Aufnahme zurückgezogen. Wer sie in ein Terminal-Log oder in eine Aufnahme gibt, sollte das ohne Ausnahme genauso machen.

Erstelle ein GitHub-Repository für dieses Projekt, deploye es über Vercel
und prüfe mit dem Link die Performance über PageSpeed Insights oder
Lighthouse.

PageSpeed Insights lief nicht durch, Claude ist selbstständig auf Lighthouse gewechselt. Ergebnis:

Die 100 bei Barrierefreiheit war nicht der erste Messwert. Lighthouse hatte ein Kontrastverhältnis und eine Überschriftenreihenfolge bemängelt, beides wurde behoben und neu deployt.

Phase 5 · SEO-Audit

Der letzte Schritt ist der, den man am ehesten weglässt und am wenigsten sollte:

Führe einen vollständigen SEO-Audit der Website durch und analysiere die
fünf stärksten Wettbewerber in derselben Nische.

Claude verteilt auch das auf mehrere Agenten — einer recherchiert die Wettbewerber, ein anderer sucht nach SEO-Praktiken für die Nische. Mit Strg + O kann man sich ansehen, woran die einzelnen Agenten gerade arbeiten.

Umgesetzt wurden: seitenspezifische Metadaten, sitemap.xml, robots.txt, strukturierte Daten, kanonische URLs, Open-Graph- und Twitter-Karten, Robots-Meta-Tags. Dazu fünfzehn kaputte interne Links, die vorher niemandem aufgefallen waren.

Der nützlichste Teil war die Wettbewerbsanalyse: eine Liste von Suchbegriffen, für die vergleichbare Anbieter ranken und dieses Projekt nicht. Das ist keine Automatisierung, das ist Recherche — aber es ist Recherche, die sonst gar nicht stattgefunden hätte.

Was nicht lief

Zwei Dinge, und beide gehören in eine ehrliche Zusammenfassung:

Der Push zu GitHub schlug beim zweiten Durchlauf fehl, weil das Token abgelaufen war. Danach war auch das Vercel-Token abgelaufen. Beide mussten neu erzeugt und nachgereicht werden. Bei einem Ablauf, der über drei Stunden läuft, ist das kein Randfall, sondern der Normalfall — kurzlebige Token laufen mitten in der Arbeit ab.

Und der Ablauf ersetzt keine Entscheidung darüber, was die Seite eigentlich sagen soll. Claude hat die Referenz umgesetzt, die ich ausgewählt habe. Die Auswahl ist der Teil, der bleibt.

Fazit

Der Ablauf ist wiederverwendbar, und das ist der eigentliche Punkt. Designsystem, Komponenten, Code, Messung, SEO — in dieser Reihenfolge, mit dem Ergebnis jeder Phase als Eingabe der nächsten. Eine professionelle Website ist damit keine Frage des Budgets mehr, sondern eine Frage davon, ob man den Ablauf kennt.

Was sie weiterhin ist: eine Frage davon, ob jemand hinsieht. Der Tailwind-Fehler wäre ohne Screenshots durchgerutscht, und die fünfzehn kaputten Links hätte ohne Audit niemand bemerkt.