✕
Day 1

Design & Build

Today you'll design a real website — just by talking to Claude. No code, no jargon. By the end you'll have a site you're proud of, built as a Claude Artifact.

Today's plan

From blank page to a site you love

  • Start with a plan — who's it for, what's it say?
  • Learn the 5 design principles
  • Build it by chatting with Claude
  • Get the type & color right
  • Add images
  • Make it look great on a phone
Step 1

Start with a plan

Five minutes of thinking saves an hour of fiddling. Decide:

🎯
Purpose
What is this page for? What should a visitor do or learn?
👥
Audience
Who's it for? Write for that one person.
🗺️
Sitemap
What sections, in what order? A rough sketch is plenty.
🖼️
Inspiration
Have a few sites you like? Pull up those screenshots — show Claude "something like this."
Step 2

The 5 design principles

Keep these in mind — and ask Claude to check your page against them.

🔭
1. Hierarchy
Make the most important thing the most obvious.
🌗
2. Contrast
Make text easy to read and key things stand out.
📏
3. Alignment & spacing
Line things up and give them room to breathe.
🧩
4. Consistency
Reuse the same fonts, colors, and styles throughout.
✂️
5. Simplicity
Less is more — remove anything that doesn't help.
Step 3

Build it by chatting with Claude

Open claude.ai and describe what you want. Claude builds a live, interactive preview called an Artifact — right there in the chat.

  • Start simple: "Build me a one-page site for ___"
  • Change one thing at a time: "Make the header bigger and add a contact section"
  • Keep going — every message refines the same page
Working with AI

Show, don't just tell

📸
Screenshot feedback
Paste a screenshot and point at what's off: "This button is hard to see — make it stand out."
🧐
Ask AI to critique
"Review this against the 5 design principles and suggest three improvements." Then apply the ones you like.
Step 4

Type & color

🔤
Typography
Pick one or two fonts. Big, clear headings; comfortable body text; keep lines from running too wide. Ask Claude to "suggest a clean font pairing."
🎨
Color
A small palette: one main color, one accent, plus neutrals. Ask Claude for "a calm, modern color palette" and keep it consistent.
Step 5

Adding images

  • Source: free stock (Unsplash, Pexels) or ask Claude to generate one
  • Format: photos → JPG/WebP; logos & icons → SVG; keep files small so pages stay fast
  • Alt text: describe each image in a few words — for screen readers and search
Step 6

Make it shine on a phone

Most visitors are on their phones. Ask Claude to "make this responsive and check it on mobile," then preview at a narrow width. Tap targets big, text readable, nothing cut off.

Your turn

Build your site as a Claude Artifact. Keep it simple, lean on the 5 principles, and iterate until you love it. Tomorrow we take it live. 🚀

1 / 1