← Back to Crowdsite
Beginner’s guide

How to talk to Claude.

One rule does most of the work: build in phases. Asking for everything at once is how you get slow responses, confused results, and timeouts. Asking for one phase at a time is how you get clean code and a working site.

The big idea

Claude is great at small, focused tasks. Tell it “build me a complete weather app with login, a forecast, alerts, and dark mode” and it gets confused (and slow). Tell it “add a search bar at the top with a magnifying glass icon”, then once that works, ask for the next thing — and you’ll get exactly what you wanted, faster, every time.

The four phases

1

Phase 1: Layout

— What's on the page?

Start with the bones. What sections exist? What buttons, inputs, headings, images? No styling yet, no logic — just the structure.

example:“Add a title, a ZIP code input, four date pickers, and a chart area below.”
2

Phase 2: Look

— How does it look?

Now the styling. Colors, fonts, spacing, dark/light mode, animations. Tell Claude the vibe — clean, retro, neon, brutalist, kid-friendly.

example:“Make it dark theme, big bold title in a sans-serif, soft purple accents.”
3

Phase 3: Logic

— What does it do?

Wire up behavior. What happens when the user clicks, types, drags? What numbers get calculated? Now Claude focuses only on the JavaScript.

example:“When the user types a ZIP code and clicks Go, look up the latitude and draw a sun-arc curve for each of the four dates.”
4

Phase 4: Polish

— What makes it feel finished?

Final touches. Hover states, micro-animations, empty states, error messages, mobile fit, accessibility — the things that turn a draft into a real product.

example:“Fade the chart in when it loads. Show a friendly error if the ZIP code isn't found.”

Worked example: build a snake game

Open FreeVibeing and paste these prompts, one at a time, in order. After each prompt, wait for Claude’s response in the chat before sending the next one.

  1. Phase 1 · Layout
    “Make a black canvas that fills the screen. Put a green snake (4 segments) in the middle and a red apple at a random position.”
  2. Phase 2 · Look
    “Add a score in the top-left corner in a retro pixel font. Add a thin glowing border around the canvas.”
  3. Phase 3 · Logic
    “Make the snake move with arrow keys. When the snake's head hits the apple, the snake grows by one segment and the apple respawns somewhere new.”
  4. Phase 4 · Polish
    “When the snake hits a wall or itself, show a Game Over screen with the final score and a Restart button.”

Five rules that fix 80% of issues

One specific change per prompt

“Change the title color to blue” gets you what you want. “Make it look better” gets you whatever Claude feels like that day.

Be concrete, not abstract

Instead of “make it modern,” say “use a clean sans-serif, lots of whitespace, big buttons, soft shadows.” Claude can’t read your mind, but it can match a description.

If something breaks, tell Claude what broke

“The button doesn’t do anything when I click it” is way more useful than “fix it.” Claude needs to know the symptom.

Build forward, not backward

Don’t ask for ten things, see something you don’t like, and ask Claude to “undo and try again.” Just ask for the next change you want. The file-scoped engine means each ask only touches what it needs to.

Use @agents when you want a specialty

Type @designer or @data-viz in your prompt to bring in a specialist agent with focused instructions. Same engine, sharper aim.

Try Phase 1 right now.

Open the canvas and paste the snake-game Phase 1 prompt above. Watch Claude work in the chat. That’s the whole loop.

Open FreeVibeing →