Claude Design Tutorial: From Blank Page to Finished Layout
How to brief an AI properly so the design it produces is something you'd actually ship — plus the prompts I use every week.
About this build
Design is where most self-built websites fall down — not because people lack taste, but because nobody ever told them the rules.
This one is less about clicking and more about deciding. By the end you'll have a design system you can apply to any project, and a way of using AI that sharpens your judgement instead of replacing it.
What you'll be able to do afterwards
- Build a colour palette that works before you've seen it on a page
- Pair two typefaces without guessing
- Use a spacing scale so sections feel deliberate instead of arranged
- Get useful design critique out of an AI assistant
- Recognise why a layout feels cheap, and name the fix
Before you start
- Any page builder — the principles carry across all of them
- An eye you're willing to have corrected
ClaudeElementorGoogle FontsCoolors
Steal the constraint, not the design
When you find a site you admire, don't copy the layout. Count the colours, count the type sizes, measure the gaps. Almost always you'll find fewer of each than you expected. That restraint is the thing doing the work.
Chapters
- 0:00
Why your site looks off
Three specific reasons, all fixable.
- 9:15
Colour
Building a palette from one brand colour.
- 28:00
Type
Choosing and pairing, with the shortcuts that always work.
- 46:30
Spacing
The scale, and why consistency beats correctness.
- 1:04:00
Hierarchy
Making the eye go where you want it to go.
- 1:18:45
AI as a critic
Prompts that get real feedback instead of flattery.
- 1:33:20
Rebuilding a bad page
Applying all of it to a real example.
Terms explained in the Knowledge Base
Watch next
The Friday email
One email a week. The thing I'd tell you over coffee.
What changed in WordPress and AI that week, what I'd actually use, and what I'd ignore. Written by me, not summarised by a tool.
- New tutorials the moment they're published
- Honest verdicts on tools — including the ones I dropped
- No sequences, no upsells, one click to leave
Free, forever, no signup
Pick a starting point. Have something real by tonight.
Every tutorial is free, complete, and built in real time — including the bits that break. Start where you are, not where a course thinks you should be.