---
title: "A full website in under three hours: Claude Code, Pencil and five phases"
date: 2026-03-18
author: "Damjan Savić"
canonical: https://damjan-savic.com/en/knowledge/full-website-with-claude-code
language: en
keywords: "Claude Code, Prompting, Next.js, Tailwind CSS, Design system, Web performance"
video: https://www.youtube.com/watch?v=3JL0cdHMsHY
---
# A full website in under three hours: Claude Code, Pencil and five phases

**In short** — Five pages, a design system, Lighthouse 95 to 100 — in under three hours, across five phases: design system, components, code, deploy and measure, SEO audit. The order is the content, because each phase produces the material the next one refers back to. The most expensive bug was one only a screenshot found.

---

A five-page website costs somewhere between 3,500 and 8,000 euros the traditional way, and takes three to four weeks. Not because the building takes that long, but because there is a handover between design and development, and every round of feedback costs three to five days. The alternative used to be a template — and then the site looks like everyone else's.

This video shows a third route: Claude Code in the VS Code integrated terminal, with pencil.dev for the visual half. No Figma, no page builder. The text below is the same workflow to read, with the prompts written out, and with the places where it did not work.

## The tools

| Tool | Role |
| --- | --- |
| Claude Code | The agent. Runs in the VS Code terminal, needs a Claude Pro or Max subscription. |
| pencil.dev | A VS Code extension for visual design. Claude writes straight into the `.pen` file. |
| Pinterest, 21st.dev | Reference material for the design system and the components. |
| Next.js, TypeScript, Tailwind | The stack. All open source. |

The workflow has five phases: design system, components, code, deploy and measure, SEO audit. The order is the actual content — each phase produces the material the next one refers back to.

## Phase 1 · Design system

Before a single line of code exists, the site needs [a visual language](/en/knowledge/brand-identity-in-one-conversation): colour, type, spacing, radii. Skip it and you get five pages that each work and do not work together.

The route there: search Pinterest for `website design system`, save two or three references, drop them into a `design-system-reference/` folder in the project. Then create a `design-system.pen` file and start Claude Code in the terminal.

```text
Look at this design system as a reference: design-system-reference/system-01.png

Build a complete design system from it, with a colour palette, a type scale,
a spacing system and border-radius tokens. Modern, clean, restrained.
Use the Pencil extension for it.
```

Claude reads the `.pen` file, understands the format, and lays the system out: primaries, secondaries, neutrals, headings H1 through H6, body copy, captions, spacing from 4 to 128 pixels. Along the way it screenshots its own work and checks it against what it was asked to build.

Time: about fifteen minutes.

## Phase 2 · Components

For the components, 21st.dev is the reference: a few hundred community-built blocks sorted by category. Hero sections, pricing tables, call-to-action blocks. You pick a hero that fits and carry its description into the prompt.

```text
Design these components in Pencil, based on our design system:

- Hero section with headline, subline and two CTAs
- Features grid with icons
- Testimonial section
- Blog card layout
- Contact form
- Navigation bar
- Footer

No code yet. Only the designs in the Pencil file.
```

Seven components, all on the same tokens. Then the second step: assemble them into a home page. And then the step that carries the rest — the home page becomes the reference for every other page:

```text
Create the features page based on the home page design.
```

Then the same instruction for solution, pricing and about. Claude even drops placeholder images into the designs, so you can see how a block with an image behaves.

Time: about twenty minutes.

### Two channels

This is the part of the setup I find most useful. There are two layers you can read along on:

- **Text.** The terminal log says which file is being edited and why.
- **Picture.** The Pencil file shows what is being made, live. When Claude screenshots a section, a scanning animation runs across that exact section.

On a job that runs twenty minutes without stopping, the difference between "I am waiting" and "I am watching" is considerable.

![Diagram · Terminal on the left, Pencil file on the right — one job, reported twice](/media/website/article/figures/full-website-with-claude-code-channels.avif)

One practical warning that goes with it: if you move something in the Pencil file yourself, a small dot appears on the tab. Then press `Ctrl + S`. Without it the file is empty the next time you open it.

## Phase 3 · Code

Only now the project:

```text
Create a new Next.js project with TypeScript and Tailwind 4.
Set up the folder structure for five pages: home, features, solution,
pricing, about.
```

Then the actual translation:

```text
Build out all five pages from the design system and the components in
Pencil. Use placeholder images from Unsplash. Fully responsive. Follow
the component designs exactly.
```

Claude screenshots every subpage from the Pencil file, splits the work, and hands it to five parallel agents — one per page. The tokens from the `.pen` file land in `globals.css` as Tailwind 4 theme variables, so the markup carries classes like `bg-lilac` or `text-secondary`.

The first look at `localhost:3000` was not the one I had hoped for.

## The Tailwind bug

The hero section and several other blocks were structurally broken. This is where Claude gets Playwright:

```text
Fix the styling problems, start with the home page. Use Playwright to take
screenshots of the whole site and fix the issues from those.
```

Claude installs Playwright, writes a script that captures every page, takes seven screenshots — and finds this:

> `max-w-4xl` is resolving to 96 pixels instead of the expected 896. `max-w-2xl` is resolving to 48 pixels.

That is a Tailwind 4 behaviour: the numbered `max-w-*` utilities read from the spacing scale now, not from the old breakpoint-named sizes. `max-w-4xl` is `calc(var(--spacing) * 4xl)` there, which resolves to something tiny. The fix was explicit pixel or rem values across every affected file.

![Diagram · max-w-2xl and max-w-4xl: expected against what actually resolved](/media/website/article/figures/full-website-with-claude-code-maxwidth.avif)

This is the most interesting moment in the whole video, for two reasons. First, I would not have found it by reading the code — the code was syntactically fine and the class names were correct. Second, Claude did not find it by reading either. It found it after it could look at the result in a browser. An agent with no view of what it rendered is an agent writing code without knowing what the code does.

After that, one more pass for motion:

```text
Improve the UI and UX: hover animations, idle animations, and whatever
else seems appropriate.
```

## Phase 4 · Deploy

To measure the site from the outside, it has to be reachable. That needs a GitHub repository and a Vercel project — and Claude can create both itself, given access tokens.

- GitHub: Settings → Developer Settings → Personal Access Token (classic)
- Vercel: Profile → Settings → Tokens

One note that matters more than it sounds: those tokens are full access to your account. I revoked both immediately after recording. Anyone putting them into a terminal log or a screen capture should do exactly the same, without exception.

```text
Create a GitHub repository for this project, deploy it through Vercel, and
use the link to check performance with PageSpeed Insights or Lighthouse.
```

PageSpeed Insights did not go through, so Claude switched to Lighthouse on its own. The result:

| Category | Mobile | Desktop |
| --- | --- | --- |
| Performance | 95 | 99 |
| Accessibility | 100 | 100 |
| Best practices | 100 | 100 |
| SEO | 100 | 100 |

The 100 for accessibility was not the first reading. Lighthouse had flagged a contrast ratio and a heading order; both were fixed and redeployed.

## Phase 5 · SEO audit

The last step is the one most likely to be skipped and least deserving of it:

```text
Run a comprehensive SEO audit of the site and analyse the five strongest
competitors in the same niche.
```

Claude spreads this across several agents too — one researching the competitors, another searching for SEO practice in that niche. `Ctrl + O` shows what each agent is currently working on.

What was implemented: page-specific metadata, `sitemap.xml`, `robots.txt`, structured data, canonical URLs, Open Graph and Twitter cards, robots meta tags. Plus fifteen broken internal links nobody had noticed.

The most useful part was the competitor work: a list of search terms comparable products rank for and this project does not. That is not automation, that is research — but it is research that would otherwise not have happened at all.

## What did not work

Two things, and both belong in an honest summary.

The push to GitHub failed on the second run because the token had expired. Then the Vercel token had expired too. Both had to be reissued and handed over again. On a workflow that runs for three hours, that is not an edge case, it is the normal case — short-lived tokens expire in the middle of the work.

And the workflow does not replace deciding what the site should actually say. Claude implemented the reference I picked. Picking it is the part that stays.

## Takeaway

The workflow is reusable, and that is the actual point. Design system, components, code, measurement, SEO — in that order, with each phase's output as the next one's input. A professional website is no longer a question of budget. It is a question of whether you know the workflow.

What it still is: a question of whether somebody is looking. The Tailwind bug would have slipped through without screenshots, and nobody would have noticed the fifteen broken links without the audit.

## Chapters of the recording

- [0:47 — Tools and workflow](https://youtu.be/3JL0cdHMsHY?t=47)
- [1:36 — Phase 1: design system](https://youtu.be/3JL0cdHMsHY?t=96)
- [4:45 — Phase 2: components](https://youtu.be/3JL0cdHMsHY?t=285)
- [12:39 — Phase 3: code](https://youtu.be/3JL0cdHMsHY?t=759)
- [15:53 — Playwright and the Tailwind bug](https://youtu.be/3JL0cdHMsHY?t=953)
- [19:53 — Phase 4: deploy and Lighthouse](https://youtu.be/3JL0cdHMsHY?t=1193)
- [23:53 — Phase 5: SEO audit](https://youtu.be/3JL0cdHMsHY?t=1433)

## Common questions

### Why does the design system get a phase of its own before any code?

Because otherwise you get five pages that work individually and not together. Colours, type scale, spacing and radii exist before the first line of code, and the finished home page then becomes the reference for every other page. "Build the features page based on the home page design" is the prompt that carries the rest.

### What was the Tailwind 4 bug, and why did reading the code not find it?

max-w-4xl resolved to 96 pixels instead of 896, and max-w-2xl to 48. In Tailwind 4 the numeric max-w utilities read the spacing scale rather than the old breakpoint-derived sizes. The code was syntactically clean and the class names were correct — Playwright found it, across seven screenshots.

### What does this workflow not replace?

Deciding what the site should actually say. Claude implemented the reference I picked, and picking it is the part that stays. One thing to plan for as well: on a workflow that runs for three hours, the GitHub and Vercel tokens expire in the middle of the work. That is the normal case, not an edge case.

---

A full website in under three hours: Claude Code, Pencil and five phases — https://damjan-savic.com/en/knowledge/full-website-with-claude-code
AI-generated content: https://damjan-savic.com/en/ai-transparency
© 2026 Damjan Savić. https://damjan-savic.com