Master Prompt: Build Complete Web App

This is the prompt that builds your complete web app.

Web apps require more detail than websites in the prompt because behaviour is more complex than appearance. The more precisely you describe what happens at each step, the more accurately Claude builds it.

Use the planning document from the previous lesson to fill this in.

Before you send

Make sure you have created a new folder such as my-calculator-app or my-quiz-app, opened that folder in Claude Code, placed your CLAUDE.md with design rules inside the folder, and completed your planning document from the previous lesson.

The master build prompt

Copy this entire template. Replace every line in square brackets with your real content.

Build me a complete web app. Follow all design rules in @CLAUDE.md.

WHAT THIS APP IS:

[One sentence: what does this app do and who is it for?]

[One sentence: what specific problem does it solve?]

APP TYPE: [Calculator / Quiz / Tracker / Generator]

INPUTS (every field the user fills in):

- [FIELD NAME]: [TYPE — number/text/dropdown/radio/checkbox] — [ANY RULES e.g. must be positive, range 1-100]
- [FIELD NAME]: [TYPE] — [RULES]
- [FIELD NAME]: [TYPE] — [RULES]
[ADD ALL FIELDS]

OUTPUT (what the app produces):

- [RESULT NAME]: [FORMAT — currency/percentage/number/label/text]
- [RESULT NAME]: [FORMAT]
[ADD ALL RESULTS]

APP BEHAVIOR (describe every step):

Step 1 — Initial state:

When the user opens the app, they see: [DESCRIBE WHAT IS VISIBLE]

What is not visible yet: [RESULTS SECTION IS HIDDEN until calculation is triggered]

Step 2 — User fills in inputs:

[Describe any real-time behavior — does anything update as they type or only on button click?]

Step 3 — Main action on button click:

When the user clicks "[YOUR BUTTON TEXT]", the app:

• Checks that all required fields are filled in
• If any field is empty: show error message "[YOUR ERROR TEXT]" and do not proceed
• If all fields are filled: run this calculation:

[DESCRIBE THE CALCULATION IN PLAIN ENGLISH — for example: "Divide the Annual Income

by the Working Weeks to get weekly income. Divide weekly income by Hours Per Week to

get hourly rate. Add 30% overhead to get the recommended rate."]

Step 4 — Displaying results:

After calculation, the results section [APPEARS / SCROLLS INTO VIEW / UPDATES IN PLACE]:
- Show [RESULT 1 NAME]: [FORMAT — e.g. "$1,234.00" or "72 out of 100" or "Growth Ready"]
- Show [RESULT 2 NAME]: [FORMAT]

[If quiz: show a description paragraph based on the score range]

[If multiple result categories: define each category and what triggers it]

Step 5 — After results:

User can:

• RESET by clicking a Clear or Reset button to return to the empty state
• RECALCULATE by changing inputs and clicking the button again
• SHARE optionally by copying the result to clipboard

RESULT CATEGORIES (only for quiz and assessment apps):

Score 0 to [X]: Label "[NAME]" — Description: "[2 to 3 sentences]"
Score [X+1] to [Y]: Label "[NAME]" — Description: "[2 to 3 sentences]"
Score [Y+1] to [MAX]: Label "[NAME]" — Description: "[2 to 3 sentences]"
DATA STORAGE:
[YES — save [WHAT DATA] to localStorage so it persists when the user refreshes]

[NO — no persistence needed, fresh state on every load]

ERROR HANDLING:

• Empty required fields: show inline error message below the empty field
• [INVALID INPUT e.g. negative number]: show message "[SPECIFIC ERROR TEXT]"
• [DIVISION BY ZERO if applicable]: show message "Please enter a value greater than

zero for [FIELD NAME]"

• All error messages: clear automatically when the user starts correcting the field

DESIGN:

Follow all rules in @CLAUDE.md

Background: [HEX], Text: [HEX], Accent: [HEX]
Heading font: [FONT] from Google Fonts
Body font: [FONT] from Google Fonts

App container: max 640px wide and centred — clean and focused

Input fields: clearly labelled above each field and full width within container

Results section: visually distinct from the form using a background colour shift or border

CTA button: large, full width, accent colour, unmissable

TECHNICAL:

Files: index.html, style.css, and app.js

ALL JavaScript in app.js with none inside the HTML file

ALL CSS in style.css with no inline styles

Mobile responsive: full usability at 375px width

Use input type="number" for all numeric fields

Number formatting: use toLocaleString() for any currency output

Google Fonts loaded via link tag in the head

No external JavaScript libraries

SELF-REVIEW BEFORE REPORTING COMPLETE:

• Fill in all fields with valid data and click the button — does the correct result appear?
• Leave one field empty and click the button — does the error message appear?
• Enter an invalid value such as a negative number — does it handle it correctly?
• Check the result on a mobile screen width — is it readable and usable?
• Refresh the page — does localStorage data persist if applicable?
• Click Reset or Clear — does everything return to the empty state?

After sending: what to watch for

Claude will create three files: index.html, style.css, and app.js.

When it finishes, open index.html in your browser and test four things. Fill in real values and click the main button to confirm the correct result appears. Check your calculation manually to confirm the math is correct. Try submitting with an empty field to confirm the error message appears. Look at it on mobile by narrowing the browser window.

Fixing the most common issues

If the calculation result is wrong:

The calculation is producing an incorrect result.

Here is the correct formula: [EXPLAIN IN PLAIN ENGLISH]
Example: if I enter [INPUT VALUES] the result should be [CORRECT ANSWER].

Fix the calculation logic in app.js only. Do not change anything else.

If there is no error message on empty submission:

• When I click the button with an empty field the app proceeds instead of
• showing an error. Add validation before running the calculation.
• Check every required field is non-empty and contains a valid positive number.
• Show an inline error message below any field that fails validation.

If the results section is always visible when it should start hidden:

• The results section should be hidden when the page first loads.
• It should only appear after the user clicks the calculate button and a valid result exists.
• Use CSS to hide it initially and JavaScript to reveal it after calculation completes.

If the button does not look prominent enough:

• The main CTA button needs to be more visually prominent.
• Make it full width within the form container, use a larger font size, apply the

accent colour [HEX], and add generous padding.

It should be the most visually dominant element on the entire page.

Your action right now

Fill in the master prompt with your app's specific details from your planning document. Send it. Let Claude build. Open the result in the browser and test the core calculation or quiz flow first.

The following lessons go deeper on specific app types and on debugging, but having your first build in the browser puts you in the best position to learn from what is actually in front of you.