Level Up Your Website's Aesthetics with Claude Design
Already built your custom website with Claude? Here is how to use Claude Design to give it a stunning, professional makeover without writing any CSS.
2026-05-30
Loading content...
Already built your custom website with Claude? Here is how to use Claude Design to give it a stunning, professional makeover without writing any CSS.
If you already shipped a site with my Claude + GitHub + Vercel guide, the boring part is probably done. Claude Design is where I go when the layout works but I'd be embarrassed to show it at a meetup.
Before you begin: This guide assumes you have already followed our previous tutorial: How to Build a Custom Website with Claude GitHub Vercel and Squarespace. You should have a working website codebase on your local machine and connected to GitHub.
Estimated Time: About 20 minutes
Your site is live. It might still look like a homework assignment. That's normal after the first pass.
Claude Design is a browser-only visual editor (not in the desktop app or Claude Code). Chat on the left, live canvas on the right. I use it when I know what I want the site to feel like but don't want to hand-roll CSS for three evenings.
Usage limits: Design mode burns tokens fast because the canvas keeps refreshing. Limits are tighter than normal chat, and you can hit the message cap sooner than you'd expect. I tweak with the sliders and inline edits before I burn another full prompt on "make the header 4px taller."
You can link the GitHub repo from the earlier guide instead of zipping files by hand. Claude pulls colors, type, and component structure from what's already there.
Pro-Tip: If your repository is huge, use a CLAUDE.md file in the root directory to point Claude toward the most relevant design files rather than having it scan everything!
Browse Awwwards or Dribbble and save two sites you'd actually want yours to resemble. Vague "make it modern" prompts get vague results.
Pay attention to:
Paste something like this into the chat and fill in the brackets:
"Redesign my homepage and blog layout. I want it to feel [insert vibe: e.g., premium, modern, glassmorphic, sleek, playful], not generic SaaS.
Use [Insert Website URL 1] and [Insert Website URL 2] as reference for layout and typography. Add subtle micro-animations on hover where it helps, not everywhere."
You'll see layouts appear on the canvas as it goes. The preview is interactive, with dummy copy and working nav, so you can click through more than one page before you export anything.
Most of my time here is tweaking, not prompting.
When the canvas matches what you want:
Vercel is already wired up from the first guide. From your project folder:
git add .
git commit -m "Redesign homepage and blog with Claude Design"
git push
Vercel rebuilds and deploys in a few minutes. Check the live URL on your phone before you announce the redesign.
You'll still want to click every link yourself. Design mode gets you 80% of the way without opening Figma, and the last 20% is the part worth your eyes.