0 to 1 in 12 Hours
Building a production full-stack website from an empty directory using Claude Code as a technical partner. A real-world study of what happens when deep product expertise meets AI that can actually build.
How do you go from an idea you had two years ago, to a production site in twelve hours... Without writing the code yourself?
For two years, The Unspoken Balance lived entirely in my head. A podcast and wellness platform exploring where ancient wisdom meets the texture of modern life. I had the brand voice, the content pillars, a Figma file, and sixty pages of handwritten notes from a meditation retreat in Denver. What I did not have was the one thing standing between the idea and its existence: a technical partner who could move at the speed of my thinking.
I have spent 15 some years in consulting, specifically product, design, and change. I have been a strategist, experience designer, program manager, product manager, change manager, experience architect, service designer, UX designer, content strategist, business analyst, QA tester... and I can read code well enough to make minor edits. But building a production application from an empty directory? That was my gap, I needed to be reliant of a Tech Lead for this.
Before a single line of code was written, I gave the AI a creative brief. Most people skip this step. Brand voice: observer, editorial, pragmatic, strategic, direct. A color system of five accents, each with a defined emotional purpose. Typography hierarchy. A banned word list. No "hustle," no "grind," no "guru." Content pillars mapped. Audience defined. Brand Brief, Brand heuristic documents and historical data.
Forty-five minutes of preparation and alignment, saved hours of "that doesn't feel right" later. If you wouldn't start a project professionally by saying "just make something nice," don't start with AI that way either.
Human Responsibilities Across Twelve Hours
The AI did not design this site. I designed this site. The AI built what I directed, architected, and the difference between a mediocre result and a meaningful one lived entirely in the specificity of my direction and the attention to detail.
Creative Direction
Every aesthetic decision. Typography scale, color rationale, spacing rhythm, the way content breathes on the page. Defined and held by me. AI proposed. I edited.
Brand Voice & Content
Wrote a 1,500-word diary entry from scratch. Rewrote AI-generated copy until it matched my voice. Killed every em-dash that did not feel like me.
Information Architecture
Mapped the site flow, defined the component hierarchy, decided which pages existed and which were cut. Twelve hours forces ruthless prioritization.
Design System Authoring
Eleven-page design system in Figma covering colors, typography, spacing, icons, buttons, forms, cards, navigation, modals, illustrations, and animations. The source of truth the AI executed against.
Technical Direction
Chose the stack. Approved architectural decisions. Made the call to replace the Supabase SDK with custom fetch when the bundle bloated. Configured Google Analytics and Search Console setup along with Cookie Banner + Privacy + Terms. Utilized Resend for branded email communications.
Quality Control
Setup a reusable sanitation checklist to protect private and PII data. Fifty-plus micro-corrections across the session. AI cannot catch what only you can see. The human brings taste, identity, and the stubborn insistence that something is not done until it feels true.
What Shipped
www.theunspokenbalance.com
Five pages, 15+ custom components, mobile-first responsive design, parallax scrolling, interactive drawing pad, breathwork animated interactions, frequency tone player, CMS blog.
View Live Deliverable →
Atomic Design System - 11 Pages
Colors with emotional rationale, typography scale, spacing grid, iconography, buttons, form states, cards, navigation, modals, illustrations, animations. All composed with variables and autolayout.
View Live Deliverable →Interactive Features Built
Six interactive features that turn a landing page into a quiet, embodied experience. Every one designed, spec'd, and validated by hand.
Doodle & Draw
A floating gold FAB opens a full drawing panel anywhere on the site. Save your thoughts, not just read someone else's.
Breathwork Orb
An animated pulsating orb on the Practice page. Four techniques, each with its own rhythm. Tap to begin. The orb breathes with you.
Frequency Tone Player
Six Solfeggio frequencies, generated live in the browser. No external libraries, no audio files. Web Audio API from scratch.
Anchor Tabbed Nav
A sticky pill bar at the top of each page. Active section pill shifts as you scroll. Horizontal scroll on mobile for long nav lists.
Privacy + Terms
Full dedicated pages, not footer PDFs. Same editorial voice. Plain language wherever legal allowed. Back-to-home nav on both.
Cookie Consent Banner
Fixed bottom banner with dark ink background. GA4 Consent Mode integrated so tracking only fires after explicit acceptance.
Mobile wasn't an afterthought. It was the north star.
Mobile-first does not mean "designed on a phone first." It means every architectural decision, every interaction, every piece of copy gets validated on a real device before it is called done. UAT happened continuously, not at the end.
Testing Approach
- ✓Real device testing (iPhone + Android), not just Chrome DevTools
- ✓Touch target validation, every interactive element ≥44pt
- ✓Thumb-reach analysis for primary CTAs
- ✓Content hierarchy validation at 375px wide
- ✓Gesture testing (pinch, swipe, long-press)
- ✓Network throttling on 3G simulation
- ✓User Acceptance Testing + Interviews
Key Mobile-First Decisions
- ✓Modals become full-page slide-up sheets below 640px
- ✓Navigation collapses to hamburger with right-side panel
- ✓Horizontal scroll interaction on Achored Tabs for mobile
- ✓Hero CTAs for Diary and Practice visibile on Mobile Landing page
- ✓Diary carousel uses native snap-scroll, not custom lib
- ✓Frequency tone player orb sized for thumb, not cursor
- ✓Cross-page nav: Home, Practice, Diary always visible
What Was Caught on Device
- ✓First time users bypassed key CTAs for Diary and Practice prior to fix
- ✓Doodle & Draw feature misunderstood due to pencil icon, fixed post UAT with a notebook icon
- ✓Hero background video drained battery on iOS
- ✓Subscribe modal buttons too close on small screens
- ✓Diary carousel dots illegible in bright sunlight therefore visibility contrast increased
- ✓Practice page scroll conflicted with audio controls
AI Does Not Eliminate Complexity
I want to talk about failure, because the narrative around AI tends to erase it. AI does not eliminate complexity. It compresses the time between encountering a problem and resolving it.
Supabase SDK crashed the site
At 190 kilobytes, it doubled the bundle size. We diagnosed it together, ripped it out, and replaced it with twenty lines of custom fetch. Problem solved, but only because we made a pragmatic call.
Pages only loaded on refresh
A stale closure combined with an IntersectionObserver bug meant scroll-reveal animations were silently failing on navigation. Debugging was methodical, patient, and necessary.
Netlify credits exhausted
300 free build credits burned through eight-plus deploys. We hit the wall, switched to Vercel in five minutes, and kept moving. Know your tools. Have a backup.
Logo had white pixel bleed
Showing on the cream background. A Python PIL script stripped them out. Not every problem is architectural. Some are just annoying, and you still have to fix them.
The Craft Is in the Iteration
Actual prompts from the build session. Each one shaped the final result. The AI executed. The human caught what only a human could see.
"Privacy and secrets are crucial, create a reusable and scale sanitation review process and begin 1st pass."
"Users are missing the practice and diary features on mobile as its buried under the mobile hamburger nav, let's replace 1 CTA on Homepage Hero for mobile only to contain 2 stacked CTAs: Diary and Practice."
"Review brand voice document and add to QA step for all content through content-ops skill."
"Lower the left and right margins on the page the drawing pad is cutoff and also apply viewport height to the create drawing component."
Visual Work Log
A transparent record of what happened across twelve hours of human-directed, AI-executed work. Every hour had a purpose.
Creative brief delivered
Brand voice, color rationale, typography, banned words, content pillars, audience. The operating system for every decision that followed.
Site structure scaffolded
React + Vite + Tailwind configured. Routes defined. Shell components stubbed. Design tokens wired to Tailwind config.
Ugly. Incomplete. But live.
Shipped to Netlify before anything felt 'ready.' The feedback loop between 'exists on the internet' and 'here is what is wrong' is where all the quality comes from.
First real-device audit
Opened the live URL on iPhone. Found six immediate issues: text scale, tap targets, modal behavior, nav collapse, carousel performance, keyboard obscuring inputs.
Full visual pass
Fifty plus micro-corrections queued and executed. Typography tightened. Spacing rhythm fixed. Modal rebuilt as slide-up sheet on mobile.
Supabase SDK doubled the bundle
190KB library crashed the site on initial load. React would not mount. Blank white screen. Diagnosed together in minutes.
Custom fetch, 20 lines
Replaced the SDK entirely. Twenty lines of typed fetch calls. Bundle cut in half. Site loads clean.
End-to-end working
Supabase subscribe integration live. Email collection with bot protection. Rate limiting wired up. GA4 analytics firing with Consent Mode.
Content integration begins
Copy from Figma pulled into components. Type hierarchy locked. Brand voice pass across every surface.
Diary + walking meditation photos
1,500-word Denver diary entry. 60 handwritten notes become League Script cards. 6 AM walking photos become swipeable carousel.
Production device testing
Full pass on iPhone and Pixel. Every page. Every interaction. Every CTA. Fixed eight final issues before the last deploy.
theunspokenbalance.com is live
Netlify credits exhausted. Pivoted to Vercel in five minutes. DNS cutover. Cookie consent confirmed. Site live. Two years of waiting ended.
A Walkthrough
The live site, end to end. Hero, whispers, practice, episodes, diary. Every page. Every animation. Every interaction.
Measurable Impact
Two years of preparation. Twelve hours of collaboration.
React 19, TypeScript, Tailwind v4, Supabase.
Complete design language covering every touchpoint.
AI replaced friction. Taste remained mine.
Five Takeaways
Phase zero is everything
Forty-five minutes defining the brief saved hours of rework.
AI replaced friction, not taste
Every strategic and creative decision was mine.
The craft is in the iteration
Fifty-plus micro-corrections made the difference.
Know your tools
Best tool for each job, not one tool for everything.
Ship something
Version one is not the final version. But it exists.
Speed wasn't the point. Partnership was.
I spent two years looking for the right technical partner for this idea. I found one in a terminal window. That is a personal truth about what happens when deep domain expertise meets a tool that closes the gap between what you can envisionand what you can build.
