← Claude Code
Jack Roberts
Claude Code just Changed Website Design Forever
⏱ 26 min video · 3 min read4 Jun 2026Worth watching
TL;DR
Jack Roberts demonstrates how to use Claude Code to build professional client websites and a custom CMS (Content Management System) that lets clients edit content without breaking the site. The full stack uses Claude Code, GitHub, Vercel for free hosting, MongoDB for database storage, and OpenRouter for AI-powered editing.
Key points
1
Claude Code can build complete, visually unique websites in one shot by feeding it design inspiration screenshots or URLs from sites like Dribbble, plus a design blueprint extraction skill
2
99% of Claude-built websites are unusable for clients because there is no way for non-developers to edit them without risking breaking the code or requiring constant developer involvement
3
The CMS solution stores all site content in MongoDB Atlas, deploys via Vercel, and gives clients a password-protected editor URL where they can edit copy, images, SEO, and add pages without touching code
4
The architecture has two layers: a master dashboard (for the developer) managing all client sites, and individual password-protected editor links shared with each client, version-controlled with rollback capability
5
Free hosting is achieved by connecting Claude Code directly to GitHub (to store code) and Vercel (to deploy), both set up via CLI so Claude can create repos and publish sites autonomously
Actionable insights
→
Use Dribbble or real website screenshots as design references and feed them to Claude Code to avoid the generic Claude-generated look; a Firecrawl-powered design blueprint extractor skill improves output significantly
→
Connect Claude Code to a Krea API key to enable automatic AI image generation inside websites, producing custom graphics that match the design concept in a single prompt
→
Build the CMS with two Vercel deployments: one master admin dashboard for yourself and one password-protected client editor per site, all synced to MongoDB Atlas for version history and rollback
→
Use OpenRouter as the AI backbone for the CMS editing interface so the system can connect to any AI model for client-facing content suggestions and edits
→
Add an IP whitelist in MongoDB Atlas network access settings to control which users can interact with the database, keeping client sites secure without complex authentication systems
Notable quotes
“People say Jack, you can not call AI bro. I am afraid guys, I am ready for the uprising and it is not going to come up to me because we are technically bros.”
“99% of Claude websites are unusable because of one limitation.”
“Nothing leaves you, every action is logged. You can always reverse this back.”
Worth watching?
✅
Worth watching the full video?
Watch if you build or sell websites and want to see the full live workflow in action, including the CMS setup and MongoDB connection steps, as the visual demos are hard to replicate from the summary alone.
Saved you some time? The creator still deserves a like.
Want this for your own channels?
Add the channels you follow. Every new video summarised and in your inbox the moment it drops. From £4/month.
Try it free