Habits that get better results from Claude, a plain-language vocabulary for the parts of a page, and a playground of design ideas — each demo started as one sentence.
Six habits that get better results
Small adjustments to how you brief Claude — most of these take one extra sentence.
Name the part you mean — hero, banner, footer, card — instead of "the top" or "that section." See the vocabulary below.
Paste a screenshot or sample image with Ctrl+V. Claude matches a look far better from a picture than from a description.
Point at the exact file and section — "change the hero headline in index.html" — instead of "fix the site."
"Mock this up as a standalone HTML file first." See an idea on its own before it touches your real project.
"Plan this before you build it" confirms Claude is interpreting the ask correctly before anything changes.
"How would you build this?" shows the approach in words, so you can picture the result before committing to it.
Website vocabulary
Here's what each one actually looks like.
The big headline and short sentence everyone sees first.
| Term | Meaning |
|---|---|
| Header | Strip across the top of every page — logo left, menu right. |
| Navigation (Nav) | The links in the header: Home, About, Contact. |
| Hero | Big section below the header — headline, a line of text, usually a button. |
| Banner | Thin strip calling out one thing, e.g. "Sale ends Friday." |
| Card | Self-contained box with an icon/image plus text, usually repeated in a row. |
| Footer | Strip across the bottom — links, contact info, copyright. |
| Call-to-action (CTA) | The button meant to make someone act — "Sign Up," "Get Started." |
| Form | Fields someone fills in and submits. |
| Sidebar | Narrow side column, often nav or extra info. |
| Modal / pop-up | Small window on top of the page. |
| Logo | Brand mark, almost always top-left of the header. |
| Favicon | Tiny icon in the browser tab. |
Not an API demo — a possibility demo
Nine tiny interactive demos. Each one started as a single sentence to Claude.
Mouse light-painting — the original Light Lab trick, still here.
move your mouse inside the box
A draggable, zoomable map with clickable pins.
drag to pan · click a pin
A light sweep gliding across a headline, pure CSS.
Make it shine.
hover to speed it up
A still scene that reacts like light is hitting it.
move your mouse across it
A string of bulbs that twinkle, brighter near your cursor.
move your mouse along the string
A ticking chart line, like a tiny stock dashboard.
updates on its own
Click anywhere and a shower of sparks explodes outward.
click inside the box
A grid of colored glass, randomized with every click.
click to regenerate
Not just visuals — Claude can build interactive state too.
drag a chip to reorder (desktop)
Every demo here — the map, the lights, the shimmer, all nine — started as one sentence to Claude: describe what you want, let Plan mode write the approach, Build mode make it, then check the result. None of it touches a server. That's the same habit the Working with Claude section walks through.