Build It Step by Step
One website, five prompts. Watch a vague idea grow into a polished, phone-friendly page, and learn how to check each version before you ask for the next one.
In this chapter you will
- Follow five real prompts and see the exact website each one produced
- Review every version like a pro: look, test on a phone, click everything
- Write small change requests with WHERE + WHAT + HOW
- Learn what makes a page accessible (usable by everyone) and polished
The story: one evening, one website
Your student club is hosting a welcome evening for new Erasmus students in two weeks. You need a simple website: when, where, what happens, and a button to say “I’m coming!”.
You have one afternoon and no coding experience. So you open DigiBot, our AI assistant, and start typing.
Below, the site grows in five rounds. Each round is one prompt, then a quick review. The review is the secret: it tells you what to ask for next.
- Plan
- Prompt
- Review
- Fix
- Iterate
- Publish
Highlighted: the focus of this chapter. Planning and prompting were chapters 3 and 4. Publishing comes in chapter 7.
Real files, honest noteThe five versions below are real, working web pages. We made them for this guide to show a typical path. If you send the same prompts, your AI will give different results, because AI answers are never exactly the same twice. That is normal.
The walkthrough: five prompts, five versions
Pick a step. For each one, read the prompt, read DigiBot’s reply, then review the result in the preview: switch to Phone and click the buttons inside the page. View code shows the real HTML.
Keyboard: on the step buttons, use ← → to move between steps.
Open each version directly:
Before and after: v1 vs v5
Same event, same AI. The only difference: a clear brief, and four rounds of review and focused changes. Scroll inside both pages.
| Check | v1 · first try | v5 · final |
|---|---|---|
| Real details | No: date and place say “TBA” | Yes: date, time, place, schedule, FAQ |
| Structure | No: one wall of text | Yes: clear sections and a navigation bar |
| On a phone | No: you scroll sideways | Yes: one tidy column |
| Buttons work | No: “Click here” does nothing | Yes: countdown, FAQ, RSVP, back to top |
| Accessible | No: never checked | Yes: contrast, keyboard, screen readers, reduced motion |
| Your effort | 1 prompt | 5 prompts + a few minutes of checking each time |
What we learned
Iterate
The first version is a draft, not the result. Plan for four to six rounds.
Be specific
Goal, audience, real content, style, limits. The more you say, the less the AI has to guess.
Check on a phone
After every change, look at a narrow screen: make your browser window small, or open the page on your phone.
Test the buttons
Click every button and link. AI code can look right and still not work. You are the tester.
Polish accessibility
Contrast, keyboard, alt text (a short description of an image for people who can’t see it), less motion. Ask for it by name: AI often skips it.
One change at a time
Small prompts with WHERE + WHAT + HOW are easier for the AI, and easier for you to check and undo.
Your review checklist (after every prompt)
Use this list every time DigiBot gives you a new version. Your ticks are saved in this browser only.
Check yourself
1. Your first version looks generic and has no real details. What is the best next step?
2. Version 2 looked great on a laptop. What did the review find?
3. Which change request is the best?
Replay this in DigiBot StudioDigiBot Studio has a demo mode that plays these same five steps, one prompt at a time, inside the real tool. It uses the saved versions, so it works even when the AI is busy.
Your turn: build your own
Pick your own idea: an event, a club, a hobby or a portfolio. Start with a brief. Then do at least two rounds of review and one focused change request each time.
Tip: get your own free Mistral key: a personal code that connects DigiBot Studio to your own free AI account. Then you have your own monthly credit and your own limits, so nobody runs out because of someone else, and you can keep building at home.