Field Guide
Build a Website With AI Assistance
Use AI to move faster without handing over your judgment.
A practical website-building flow for shaping the idea, prompting for structure and components, reviewing AI output, and checking the work before it ships.
Steps from the workbench
Name the job of the website
Start with the visitor, the action they should take, and the proof they need to trust the page. Keep the first version narrow.
What to check
You can describe the site in one sentence without listing every future feature.
Ask AI for structure before code
Use AI to outline pages, sections, user flows, and states. Review the plan before asking for components.
What to check
The outline includes mobile behavior, empty states, error states, and the main call to action.
Generate small pieces
Prompt for one component, section, or route at a time. Smaller requests are easier to review and easier to replace.
What to check
You understand what each generated file does and why it belongs in the app.
Review the code like a collaborator
Check naming, data flow, accessibility, loading states, and whether the UI matches the project style.
What to check
Generated code does not introduce unused dependencies, secrets, duplicate logic, or confusing abstractions.
Verify before polishing
Run the app locally, resize the browser, click through the flow, and fix obvious problems before spending time on decoration.
What to check
The core experience works on mobile and desktop before visual polish begins.
Prompts to adapt
Shape the first version
Act as a product-minded web developer. Help me define the first version of a website for [audience] who need [outcome]. Give me the pages, sections, key actions, and what to leave out.
Review generated code
Review this component for accessibility, responsive behavior, unnecessary complexity, and places where the generated code may be fragile. Give fixes before refactors.