Prompts for building: how to ask Claude Code the right way

A good prompt has three parts:

Part	Question it answers	Example
Context	What is this project?	”I have a personal landing page made with HTML.”
Goal	What do I want to achieve?	”I want to add a contact section.”
Details	Exactly how do I want it?	”With a form that asks for name, email and message.”

Combined: “I have a personal landing page in HTML. I want to add a contact section with a form asking for name, email and message. It should visually match the rest of the page.”

The more specific you are, the better the result.

When you want to build something from scratch, these patterns work well:

To create a file or component:

“Create a [name] file that does [function]. It should look [visual description] and work on [context: mobile, desktop, etc.].”

To start a new project:

“I want to create a [project type] for [what it's for]. Start with the basic file structure and explain what each one will do.”

To add a feature:

“To this existing page add [feature]. Don’t change the current design, only add the new thing.”

Tip: always ask it to explain what it did. That way you learn and can catch anything that’s off.

To fix an error:

“I’m getting this error: [paste the exact error as it appears]. Don’t change anything else, just fix this problem.”

To change something you don’t like:

“The contact button is too far down and doesn’t look good on mobile. Move it above the form and make the font larger.”

To undo something:

“What you just did doesn’t work for me. Go back to the previous state and explain another way to do it.”

Tip: when there’s an error, copy the full error message (even if it’s in English and you don’t understand it). Claude reads it and knows exactly what happened.

You don’t need to understand every line, but it helps to know what each part does. These prompts help:

“Explain in simple terms what the [name] file does. As if I didn’t know how to code.”

“What happens if I change [this part]? Would it break something?”

“Which files are the most important in this project and what does each one do?”

“Give me a 3-point summary of how [part of the project] works.”

Asking for explanations isn’t a sign of weakness, it’s the fastest way to learn.

Copy this template and fill in the blanks each time you start something new:

Context: [briefly describe your project and what technology it uses]
I want: [describe the result you need]
Requirements: [list the important details]
Constraints: [what should NOT be changed or touched]
When done: explain what you changed and why.

Real example:

Context: I have a portfolio site in HTML/CSS with an index.html file and an images folder.
I want: Add a "My Projects" section with 3 cards showing each project's name, description and image.
Requirements: Cards must be responsive (work on mobile). Colors in navy blue and white.
Constraints: Don't touch the existing header or footer.
When done: explain which files you changed and how to add more projects in the future.

Problem	Fix
Claude changed things I didn’t ask for	Say: “Undo the changes in [file], leave it as it was”
The result isn’t what I expected	Be more specific: describe in more detail what you want visually
Claude says it can’t do something	Break the task into smaller steps and ask one at a time
After several tries it’s still wrong	Start a new chat, describe the context from scratch and try explaining it differently