Vibe Coding · Case Study

How I Built
This Site

A UX designer with no coding background built and deployed a portfolio site in days — using AI as a development partner. Here's exactly how it happened, what broke, and what I learned.

Claude Pro Claude Code HTML · CSS GitHub Netlify Cloudflare labunknown.ca

The Process — Step by Step

01

The Starting Point

I wanted a portfolio. I didn't want to code one.

As a designer navigating the AI era, I wanted to reposition — not just what I make, but how I make it. Building this portfolio through vibe coding felt like the right first move: prove the process by living it. I'd seen vibe coding — using AI to generate code through conversation — and decided to try it. I signed up for Claude Pro and opened a terminal for the first time.

The first version Claude generated was functional but generic. The design felt like every other portfolio I'd seen. That wasn't good enough.

💡 Key insight: AI generates what you describe. Vague prompts produce generic results. The more specific your direction — visual references, brand language, tone — the better the output.
02

Design Direction

Framer template as a reference. Secret lab as a concept.

Instead of describing the design in words, I found a Framer template I loved and gave Claude the URL. Within one prompt, the aesthetic shifted completely — clean, clinical, white-on-white with sharp typography.

The concept: Lab Unknown — a secret research lab where UX problems get diagnosed and solved. Case studies became "classified files." The domain labunknown.ca was available. Done.

💡 Key insight: Show, don't tell. A visual reference is worth 1,000 words of design description. AI reads URLs. Use that.
03

Content Strategy

Case studies built from live sites — with AI doing the research.

For each case study, I gave Claude a live URL of a site I'd worked on during my agency years. Claude analyzed the current state, compared it to what I described about the original, and built a before/after case study with a clear narrative.

I then layered in my actual observations — the real decisions, the politics, the constraints — to make it authentic. AI gave me the structure. I gave it the truth.

💡 Key insight: AI is excellent at structure and scaffolding. The human layer — your real perspective, your actual decisions — is what makes a case study worth reading.
04

Deployment

From local files to live site — with a few wrong turns.

The site was built as pure HTML/CSS — no framework, no build tools. Deployment started with a simple drag-and-drop to Netlify Drop. The site was live in under a minute.

Then I tried to connect GitHub for auto-deployment. This is where things got interesting. Git had no identity configured. The branch was master not main. Netlify kept failing with "Build image no longer supported." Each error had a fix. None of them required understanding code deeply — just reading the error message and asking the right question.

git config --global user.email "your@email.com"
git config --global user.name "Your Name"
git push -u origin master
💡 Key insight: Errors are just information. Copy the message, ask what it means, follow the fix. You don't need to understand everything — you need to understand enough to move forward.
05

Domain & DNS

labunknown.ca — bought, configured, and live.

Domain purchased through Cloudflare Registrar — chosen specifically because it sells domains at cost with no markup on renewals. Added a CNAME record pointing to Netlify's load balancer, set proxy status to DNS only, and the site resolved within 30 minutes.

Type: CNAME
Name: @
Target: apex-loadbalancer.netlify.com
Proxy: DNS only
💡 Key insight: DNS looks intimidating. It's just a lookup table that says "when someone types this URL, send them here." That's it.
06

Ongoing

Iterating. Adding. Documenting.

The site is a living document. More case studies are being added. A social media content page was built with a scrolling marquee — hover to pause, images shift from desaturated to full color. Insights and longer-form thinking are now published on Substack, with an auto-feed pulling directly into the About page.

And this page itself — the one you're reading — is part of the process. Documenting how it was built is as important as building it.

What I Actually Learned

01

Vibe coding is a design skill

The quality of output is directly proportional to the quality of direction. Knowing what you want — and how to describe it — is the same skill as writing a good design brief. Designers already have this.

02

You don't need to understand code to ship

I still can't write CSS from scratch. But I can read it, modify it, debug it with AI help, and deploy it. That's enough to own your own digital presence without depending on a developer.

03

The process is the content

Documenting this journey — every error, every decision, every tool — is itself a portfolio piece. It demonstrates systems thinking, problem-solving, and the ability to learn in public. That's what employers actually want to see.

🔬

A note on transparency: This site was built entirely through conversation with Claude (Anthropic's AI). No prior coding experience was required. All design decisions, content direction, and strategic choices were made by me. The AI handled implementation. This is what "AI-assisted design" looks like in practice — not replacing the designer, but removing the barrier between idea and execution.