Building this portfolio 100% with Claude and VS Code

This is the website you are reading. I wanted a bilingual portfolio I could build and edit myself, so I made all of it with Claude in VS Code: the moodboard, the design system, the code and the deploy. No developer, no template.

ROLE

Designer & Builder

TIMELINE

1 week

TEAM

1 person + Claude

OUTCOME

Live

at hailedes36.com

The problem

Drag-and-drop site builders are fast, but they make it hard to hold a strict design system and awkward to run two languages. Coding it myself meant I, a designer rather than a developer, would have to ship code. The question: can a designer put a real website live if Claude writes the code and the designer makes the design calls?

Process

1. 1Research

   Browsed portfolios and product sites I liked and noted what each did well: layout, type rhythm, how they told a case study.
   Research
2. 2Idea

   Captured screenshots of the parts worth learning from and grouped them into a moodboard in Figma. That set the direction: white background, black text, exactly one magenta accent.
   Insight
3. 3Design and build

   Wrote DESIGN.md as the source of truth, then worked with Claude in VS Code to turn it into CSS tokens and build each page following a phased plan.
   Design
4. 4Ship

   Every finished phase is a commit to GitHub. Vercel builds and deploys automatically, with the domain pointed at hailedes36.com.
   Deploy

Solution

Write the rules first, let Claude write the code

Instead of restating requirements every session, I put every decision into two files: DESIGN.md for design (colour, type, spacing, motion) and AGENTS.md for code conventions. Claude reads both at the start of each session, so the tenth page sounds like the first.

Work in phases

The plan lives in plan/, and each phase is a complete, working slice: empty shell, design system, layout, content, then each page. One phase is finished before the next starts, so there is always a running version to review and fix.

Git and Vercel instead of a handoff

There is no developer handoff. The code lives on GitHub and Vercel rebuilds on every push, so even a one-line copy fix is live within minutes.

Results

Takeaways

• Clear rules beat clever prompts. A strict DESIGN.md got Claude right on the first try more often than any long instruction.
• The designer still makes the calls. Claude writes code fast, but deciding what to cut, what to keep and when it is done stays with me.
• Ship early, fix later. A real build on Vercel surfaces problems faster than polishing in Figma.