ChatGPT Prompts for Web Development: 12 Build Prompts

ChatGPT prompts for web development work best when you give the real stack, the real fields and the real endpoint before asking for code. The 12 prompts below cover planning, markup, styles, behavior, accessibility, performance and testing. Fill in each [variable] and read every line of code before it ships.

Review note: Treat generated code as a draft. Keep API keys and credentials in environment variables, validate input on the server as well as in the browser, escape output to prevent cross-site scripting, and have a person review and test the code, including a keyboard and screen reader check against WCAG, before it ships.

Never paste secrets or API keys into a prompt, and use placeholders for anything your backend has not built yet.

Plan the build

1. Build plan

For [page request] on a [stack] site, list the files to create or change and what each one does.

2. Scope check

Read this feature request [paste] and list what is in scope, what is out of scope and the questions I should ask before coding.

Write the markup and styles

3. Semantic HTML

Write semantic HTML for [page] with labels, landmarks and headings in order, using these fields [list].

4. Mobile-first CSS

Write mobile-first CSS for this markup [paste] with visible focus states and a reduced motion rule.

5. Layout fix

This layout breaks at [width] in [browser]. Here is the HTML and CSS [paste]. Find the cause and give the smallest fix.

Add behavior

6. Form validation

Write plain JavaScript to validate this form [paste] with clear error messages that move focus to the first invalid field.

7. Submit to an endpoint

Write the fetch call that posts this form as JSON to [endpoint], handles success and errors, and shows a status message.

8. Framework version

Rewrite this plain HTML and JavaScript [paste] as a [framework] component without adding new libraries.

Check quality

9. Accessibility pass

Review this page code [paste] for keyboard use, screen reader labels, contrast and error messages, and list fixes.

10. Performance pass

List what slows down this page [paste or describe] and the changes that would make it load faster on phones.

Test and ship

11. Test list

Write a manual and automated test list for [feature] covering empty input, edge values, keyboard use and failed requests.

12. Pull request summary

Write a short pull request description for these changes [paste diff summary] with what changed, how to test and open questions.

Use the full web development prompt

The flagship Web Development Prompt: Page Build Plan, Code and Checks runs every step from one brief: build plan, HTML, CSS, JavaScript, an accessibility pass, performance notes, a test list and open questions. Its example is a catering inquiry form for a family restaurant that posts to an existing endpoint.

Related prompts

If your site runs on React, use the React component builder prompt or the Next.js App Router feature scaffold prompt. For the server side, try the full stack REST API builder prompt, and when something breaks, use the ChatGPT prompt for debugging.

Find more in the Coding category, look through Browse, or post your own on Share.