Don't Lose the Magic: Build and Deploy Your Website with Claude Code, GitHub, and Netlify
A few people have told me the same story lately: they designed a website with Claude that was genuinely good and on-brand, then handed the code to a developer to push live, or rebuilt the whole thing in Squarespace or Wix to get it "properly hosted." Either way, they lost it. The thing that made it good — just asking Claude to change something — is gone.
In this video I show the workflow that keeps that capability alive, permanently, for free: Figma design tokens pulled straight into Claude via the Figma MCP connector, a full landing page built in Claude Code using meta-prompting, then pushed to GitHub and deployed on Netlify with your own domain. No developer, no page builder, no handoff.
Download the free CLAUDE.md starter template: https://shop.jarrydhennequin.com/l/lv...
Timestamps:
0:00 The handoff mistake (and what it actually costs you)
0:31 Why handing off trades a 5-minute chat for a slow, expensive one
1:24 Claude Cowork vs Claude Code — which one to use here
1:46 The brand system: design tokens and Atomic Design (Bayside Physio)
3:14 Giving Claude full context via the Figma MCP connector
4:16 Meta-prompting: using Claude to write the Claude Code brief
5:23 The build session inside Claude Code
7:01 What you actually get: the local file structure
7:59 Buying a domain and finding the DNS settings
8:46 Pushing to GitHub and deploying on Netlify
9:29 Automating GoDaddy, GitHub, and Netlify through Claude
9:57 Going live: subdomain, CNAME record, confirmed live
11:35 Live edit: one sentence to Claude, deployed in minutes
12:27 Wrap-up
Resources:
→ Free CLAUDE.md starter template: https://shop.jarrydhennequin.com/l/lv...
→ Cliniko MCP Connector ($249 AUD — direct Cliniko API access for allied health): https://shop.jarrydhennequin.com/l/nl...
Tools used in this video:
→ Claude Code: https://claude.ai/code
→ Claude (free): https://claude.ai
→ Figma: https://figma.com
→ GitHub: https://github.com
→ Netlify: https://netlify.com
Note: The demo uses Bayside Physio, a fictional practice. All data and content shown is synthetic. No real patient information. Not clinical or regulatory advice.
#ClaudeAI #ClaudeCode #DesigningAndBuildingWithAI