AI Guides › Step-by-step guides
By Nigel Guy · 7 min read
The usual mistake is to paste a screenshot of an app you like into an AI coding tool, type "build this", and watch it produce something that looks right for ten minutes. Then you find it guessed what half the buttons do, stored nothing anywhere sensible, and there is no record of which version worked. The "app in 60 seconds" claim you may have seen is theatre: the typing takes a minute, the plan, the deploy and the checks do not.
The rule: get a written plan you have approved before any code exists, and make the AI save a working version to GitHub after every step.
The five steps below take you from a screenshot to a live app on your own domain with a Stripe Payment Link. Each tool is named, and so is where it lets you down.
| You need | What it is for | Cost at time of writing |
|---|---|---|
| A screenshot or mock-up of the app | The brief | Free |
| Claude Code (on a Claude Pro or Max plan) | Plans and writes the code | Pro is listed at US$20 a month billed monthly on Claude's pricing page; the UK checkout shows the £ price with VAT. Check it before you subscribe |
| A GitHub account | Keeps every working version | Free plan is enough |
| A Vercel account | Hosts the live app | Hobby is free but for personal, non-commercial use only. Pro is listed at US$20 per developer seat a month |
| A domain name | Your own address | Varies by extension and registrar; check the renewal price as well as the first-year price |
| A Stripe account | Takes the payment | No monthly fee; UK standard cards are 1.5% + 20p per transaction at time of writing (EEA and international cards cost more) |
If the app will take money, you are in commercial territory, and Vercel's Hobby terms rule that out. Budget for Pro, or use a host whose free tier allows commercial use.
git init, then claude.Shift+Tab until the status bar shows ⏸ plan mode on. (You can also start with claude --permission-mode plan.) In plan mode Claude reads and proposes but does not edit files until you approve.Ctrl+V (Alt+V on Windows and WSL), or type its file path.This is the prompt that does most of the planning. Paste it after the screenshot. Fill in the square brackets: who the app is for, what one thing it must do, how you will charge, and anything to keep out.
You are a senior product engineer helping a non-specialist turn a screenshot
into a small, working web app. Do not write any code yet.
Context:
- Attached: a screenshot of the app I want.
- Who it is for: [WHO_USES_IT]
- The one job it must do on day one: [CORE_JOB]
- How I plan to charge: [PAYMENT_MODEL, e.g. "one-off £9 via a Stripe Payment Link" or "free for now"]
- Out of scope / must not include: [EXCLUSIONS]
Produce a build plan in this order:
1. Purpose: one short paragraph on what the app does, based only on what the
screenshot shows plus my notes above.
2. Screens: a numbered list of pages in the order a user meets them, with one
line each on what happens there.
3. Data: what must be stored, as a short list of tables or objects with their
key fields. Plain English, not a full schema.
4. Version 1 versus later: two lists. Version 1 is the smallest set that does
the core job end to end. Everything else goes in "later".
5. Payments: where the payment link sits, and what the app does (or cannot do)
once someone has paid.
6. Unknowns: every element in the screenshot whose purpose you cannot tell.
List them as questions for me. Do not fill them in with assumptions.
7. Build sequence: numbered steps, each small enough to test on its own.
Rules:
- If any square-bracket item above is empty or unclear, ask me before planning.
- Prefer one simple, common stack and name it with a one-line reason.
- Keep secrets (API keys) out of the code and out of the repository.
Before you reply, check: does every screen trace back to the screenshot or my
notes, is version 1 genuinely the minimum, and have you listed rather than
guessed every unknown?
When I approve the plan, build it one step at a time. After each step, run it,
tell me how to check it, and commit a working version to Git with a clear
message before starting the next step.
Answer every question in the Unknowns list. Cut anything from version 1 you would not miss on launch day. Only then approve the plan.
main) go live; other branches get preview URLs.www version too. Accept it.www. Use the exact values on your project's Domains page, not ones copied from a tutorial.If your domain already handles email, change only the A and CNAME records. Moving the whole domain to Vercel's nameservers without copying your MX records first is how people lose their email.
www.main.sk_ (Stripe's secret key prefix) before you call it done.