AI Prompts
AI website creation prompts.
Ready-to-use prompts for planning, building, styling and shipping a website — tap to copy, then fill in the blanks.
Tap Copy on any prompt, paste it into your AI assistant, and replace the [bracketed] parts with your own details.
Plan & structure
Sitemap & URL structure
Act as a web strategist. I'm building a [type of site] for [audience and goal]. Propose a clean sitemap: the pages I need, what belongs on each, the navigation, and a consistent URL structure I can grow into. Keep it lean and explain the reasoning.
Choose a stack
I want to build [describe the site] and I'm comfortable with [your skills]. Recommend a simple, appropriate stack (framework, styling, hosting) with the trade-offs, and why it suits a [static / small content / marketing] site.
Page blueprint
Give me a section-by-section blueprint for a [landing / about / pricing] page for [product], top to bottom. For each section note its purpose, the key content, and the call to action. Present it as a text wireframe I can hand to an AI builder.
Build the site
Full landing page scaffold
Build a complete, responsive landing page in [plain HTML + CSS / React + Tailwind] for [product]. Identity: [what it is]. Audience: [who]. Vibe: [design feel plus a reference site you like]. Sections: [hero with a primary CTA, feature grid, social proof, pricing, FAQ, footer]. Mobile-first, everything in one file, realistic placeholder content I can replace.
One section at a time
Add a [section, e.g. split-screen hero with the headline and CTA on the left and an image placeholder on the right / pricing table with three tiers and a highlighted 'most popular' card / FAQ accordion with five expandable questions] to the page. Match the existing style and keep it responsive.
A reusable component
Write a [component, e.g. sticky navbar with a mobile hamburger menu / testimonials carousel / contact form with validation] in [HTML/CSS/JS or React]. Accessible, keyboard-friendly, no external libraries, and commented so I can tweak it.
Turn a description into code
Here's a section I want: [describe it, or paste a screenshot]. Build it in [HTML + CSS / Tailwind], matching the layout, spacing and hierarchy, responsive down to mobile. Use only the content I give you.
Design & style
Palette & type
Suggest a cohesive color palette (with hex values) and a font pairing (a display and a body face from Google Fonts) for a [type of site] that should feel [adjectives, e.g. clean, premium and trustworthy like Stripe]. Output the palette as CSS custom properties.
Set a design direction
Restyle this page to feel [vibe, e.g. dark mode with glassmorphism and a single neon accent / editorial and minimal with lots of white space]. Give me the specific CSS or Tailwind changes and keep the layout intact: [paste code or describe].
Make it responsive
Make this layout work well on mobile without breaking the desktop version. Tell me the breakpoints and what changes at each: [paste your HTML/CSS].
Copy, SEO & improve
Hero & CTA copy
Write three options for a hero headline and subheadline for [product], aimed at [audience]. Each should lead with the benefit, be specific, and avoid generic phrases like 'take it to the next level'. Add a matching CTA button label for each.
SEO meta & schema
Write an SEO title tag (under 60 characters), a meta description (under 155 characters), and appropriate JSON-LD structured data for a [page type] about [topic]. Explain each briefly.
Analyze & improve a page
Analyze this page and explain how to improve it for [goal, e.g. conversions / clarity / accessibility]. Look at layout, hierarchy, copy and semantic HTML, and give me specific, prioritized changes: [paste code, or a description of the page].
Debug the layout
This isn't rendering the way I expect: [describe the problem, e.g. the footer overlaps content / the grid won't align on mobile]. Here's the code: [paste it]. Explain the cause and give the fix.
From a sentence to a shippable page
The prompts that produce agency-quality sites rather than generic AI templates all share the same ingredients: identity (what it is and who it's for), a tech stack, a vibe (a design feel, ideally anchored to a reference site you like), and the exact sections you need. The other habit that matters is building in layers — generate the scaffold first, then refine the hero, proof and CTA in separate prompts, rather than one-shotting the whole thing. These work in chat assistants and in AI builders and coding tools like v0, Cursor and Lovable. To sharpen any prompt, see the prompt engineering prompts; for general dev help, the coding prompts.
FAQ
Why do my AI-built sites look generic?
Usually the prompt is too vague. Name the audience, the value proposition, a design vibe (ideally a reference site you like), and the exact sections. 'Build me a website' produces stock templates; a specific brief produces something close to publishable.
Should I build the whole site in one prompt?
No — build in layers. Generate the page scaffold first, then refine one section at a time (hero, social proof, pricing, CTA). Iterating on smaller pieces gives you far more control than a single mega-prompt.