Prompting an AI is not about knowing how to code. It is about knowing how to explain. I like this four-part approach and it works well for me. As you use it more you will develop your own tricks. Pay attention to what is missing in the results you get, that is your signal to improve.
the four parts of a good prompt
-
The roleTell the AI what kind of expert to act as and give it a mood or visual reference. "You are a web designer helping me build my personal website. Make it feel like a sunny Sunday morning in the park, warm and joyful." The more specific the feeling, the more personality the result will have.
-
The contextWhat already exists? What tools are you using? Paste your PRD here so the AI has the full picture of what you are building before it starts.
-
The taskWhat do you want the AI to build? Start with the full structure using your PRD, then use follow-up prompts to refine section by section. The more specific you are about what you want to see, the closer the result will be to what you have in mind.
-
The constraintWhat should it not do? For example: no extra pages you did not ask for, no features outside what is in your PRD, no made-up text to fill in the spaces. Telling the AI what to avoid helps it make fewer assumptions and gives you more control over the output.
bad prompt vs good prompt
Your PRD as a starting point
Bad
"Build a website for a dog photographer."
Good
"You are a web designer helping me build a professional website for Marta, a dog photographer in Madrid. Make it feel like a sunny Sunday morning in the park, warm and joyful, the kind of place where dogs run free and people smile without knowing why. Here is what I want to build: [paste PRD — only what it does, who it is for, the problem it solves, what it includes, what it does not include]. Build the full structure of the site with all the sections. I want to see the whole thing first and then we will go section by section to refine the details."
MY PRD
WHAT IT DOES:
A professional website for Marta, a dog photographer in Madrid. Visitors can see her work, explore her packages, and book a session.
WHO IT IS FOR:
Dog owners in Madrid who want professional photos of their pets and are looking for a photographer they can trust.
THE PROBLEM IT SOLVES:
Marta has no online presence. Potential clients cannot find her, see her work, or book a session without going through her personally.
WHAT IT INCLUDES IN THE FIRST VERSION:
A home page with who she is and what she does. A public gallery with her best work. A services section with three packages: outdoor session, studio, and premium. A booking calendar. A contact form.
WHAT IT DOES NOT INCLUDE:
Client login area. Private galleries. Online payments. Blog. Multiple languages.
TECH STACK:
AI coding assistant, GitHub Pages for hosting.
EDGE CASES:
What if someone tries to book a date that is already taken? What if the gallery takes too long to load on a phone? What if someone submits the contact form without filling in their email?
see it in action
Here is what happened when I ran this prompt for Marta's website. You will see the first result and a couple of refinements.
Prompt 1 — full structure
"You are a web designer helping me build a professional website for Marta, a dog photographer in Madrid. Make it feel like a sunny Sunday morning in the park, warm and joyful, the kind of place where dogs run free and people smile without knowing why. Here is what I want to build: [PRD]. Build the full structure of the site with all the sections. I want to see the whole thing first and then we will go section by section to refine the details."
Prompt 2 — refining
Refinement 1"Replace the placeholder image in the hero section with this photo. Keep everything else exactly as it is." [attach photo]Refinement 2"Redesign the header so it is immediately clear this is a dog photography website."
five rules that save the most time
1
Always paste your PRD at the start
Before you ask the AI to build anything, paste your PRD. It gives the AI the context it needs to understand what you are trying to create and make better decisions along the way.
2
Start with the full picture, then refine
Give the AI your PRD and ask it to build the whole structure in one go. Once you have that, go section by section and improve. Maybe the overall layout looks great but you want the about section to show a timeline of your career. That is a new prompt, focused on that one detail. A strong first prompt, then smaller ones to shape the details. Once the AI has your full PRD and the first structure is built, your follow-up prompts can be much simpler. The AI already has the context. You can talk to it like someone who knows your project: "Redesign the header so it is immediately clear this is a dog photography website." No need to repeat the role or the brief.
3
When something looks wrong, debug it with the AI
When something looks wrong, the AI that built it can also help you fix it. This is called debugging. Describe what you expected to happen and what you are seeing instead. If you are not sure how to explain it, a screenshot works perfectly. You can also open the browser console for more detail: right-click anywhere on the page, select "Inspect", and click the "Console" tab. Share a screenshot of what you see there too. Think of it as sitting next to an expert who wants to help. The more you share, the faster you will get unstuck.
4
Ask for explanations when you do not understand something
You do not need to understand every line of code. But when something is unclear, asking "can you explain what this does?" helps you follow along and write better prompts for the next step.
5
If after many tries the AI still does not get it, start fresh
Sometimes, after going back and forth several times, you get the feeling the AI is just not understanding what you want. When that happens, close the conversation, open a new one, paste your PRD, and try describing what you need in a different way. A fresh start is often faster than continuing down a path that is not working.
Your task this week
SOP 02
Now write your own first prompt and use it.
Using your PRD from SOP 01, write a prompt with all four parts: role, context, task, constraint. Use your own project as the starting point. Then open your AI coding assistant (Claude, ChatGPT, or any other), paste it, and see what comes back. Remember you can be as creative as you want with the mood. For my own website I used "nights in Seoul" as the visual reference. You can already see the first version of your website. Is it not exciting what you just did on your own?
When done
A first version of your website, live in your browser. Ready to refine.