--- title: "Eine Website in unter drei Stunden: Claude Code, Pencil und fünf Phasen" date: 2026-03-18 author: "Damjan Savić" canonical: https://damjan-savic.com/de/wissen/full-website-with-claude-code language: de keywords: "Claude Code, Prompting, Next.js, Tailwind CSS, Designsystem, Web-Performance" video: https://www.youtube.com/watch?v=3JL0cdHMsHY --- # Eine Website in unter drei Stunden: Claude Code, Pencil und fünf Phasen **Kurz gesagt** — Fünf Seiten, ein Designsystem, Lighthouse 95 bis 100 — in unter drei Stunden, in fünf Phasen: Designsystem, Komponenten, Code, Deploy und Messung, SEO-Audit. Die Reihenfolge ist der Inhalt, denn jede Phase erzeugt das Material, auf das sich die nächste beruft. Der teuerste Fehler war einer, den nur ein Screenshot gefunden hat. --- 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 | Werkzeug | Rolle | | --- | --- | | Claude Code | Der Agent. Läuft im VS-Code-Terminal, braucht ein Claude-Pro- oder -Max-Abo. | | pencil.dev | VS-Code-Erweiterung für den visuellen Entwurf. Claude schreibt direkt in die `.pen`-Datei. | | Pinterest, 21st.dev | Referenzmaterial für Designsystem und Komponenten. | | Next.js, TypeScript, Tailwind | Der Stack. Alles quelloffen. | 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](/de/wissen/brand-identity-in-one-conversation): 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. ```text 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. ```text 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: ```text 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. ![Diagramm · Terminal links, Pencil-Datei rechts — derselbe Auftrag, zweimal berichtet](/media/website/article/figures/full-website-with-claude-code-channels.avif) 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: ```text 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: ```text 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: ```text 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. ![Diagramm · max-w-2xl und max-w-4xl: erwartet gegen tatsächlich aufgelöst](/media/website/article/figures/full-website-with-claude-code-maxwidth.avif) 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: ```text 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. ```text 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: | Kategorie | Mobil | Desktop | | --- | --- | --- | | Performance | 95 | 99 | | Barrierefreiheit | 100 | 100 | | Best Practices | 100 | 100 | | SEO | 100 | 100 | 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: ```text 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. ## Kapitel der Aufnahme - [0:47 — Werkzeuge und Ablauf](https://youtu.be/3JL0cdHMsHY?t=47) - [1:36 — Phase 1: Designsystem](https://youtu.be/3JL0cdHMsHY?t=96) - [4:45 — Phase 2: Komponenten](https://youtu.be/3JL0cdHMsHY?t=285) - [12:39 — Phase 3: Code](https://youtu.be/3JL0cdHMsHY?t=759) - [15:53 — Playwright und der Tailwind-Fehler](https://youtu.be/3JL0cdHMsHY?t=953) - [19:53 — Phase 4: Deploy und Lighthouse](https://youtu.be/3JL0cdHMsHY?t=1193) - [23:53 — Phase 5: SEO-Audit](https://youtu.be/3JL0cdHMsHY?t=1433) ## Häufige Fragen ### Warum braucht das Designsystem eine eigene Phase vor dem Code? Weil fünf Seiten sonst einzeln funktionieren und zusammen nicht. Farben, Typografie-Skala, Abstände und Radien entstehen vor der ersten Zeile Code, und die fertige Startseite wird danach zur Referenz für alle weiteren Seiten. „Erstelle die Features-Seite auf Basis des Startseiten-Designs" ist der Prompt, der den Rest trägt. ### Was war der Tailwind-4-Fehler, und warum hat ihn niemand beim Lesen gefunden? max-w-4xl löste zu 96 Pixeln auf statt zu 896, max-w-2xl zu 48. In Tailwind 4 greifen die max-w-Utilities mit Zahlen auf die Abstandsskala zu, nicht mehr auf die alten, an Breakpoints orientierten Größen. Der Code war syntaktisch einwandfrei und die Klassennamen korrekt — gefunden hat es erst Playwright, über sieben Screenshots. ### Was ersetzt dieser Ablauf nicht? Die Entscheidung, was die Seite sagen soll. Claude hat die Referenz umgesetzt, die ich ausgewählt habe, und die Auswahl ist der Teil, der bleibt. Einzuplanen ist außerdem: Bei einem Ablauf über drei Stunden laufen die Token für GitHub und Vercel mitten in der Arbeit ab. Das ist der Normalfall, nicht der Randfall. --- Eine Website in unter drei Stunden: Claude Code, Pencil und fünf Phasen — https://damjan-savic.com/de/wissen/full-website-with-claude-code KI-generierter Inhalt: https://damjan-savic.com/de/ki-transparenz © 2026 Damjan Savić. https://damjan-savic.com