I went through dozens of website prompts over the past few weeks. Most of them dump a wall of instructions into the model and hope for the best. Some of them are really clever, but they generate a plan or a spec document, not an actual website.
So I took the best ideas from everything I tested, threw out what didn’t work, and combined the rest into one prompt. You paste it into Claude, ChatGPT, Gemini, or whatever model you’re using. It asks you 6 questions about your project, then one-shots a full animated website as a single HTML file. You get responsive layouts, real copy written specifically for your business, smooth scroll animations, and something you can actually deploy and share with people.
Here’s one I started with: promptteardown.com. I’ve built on it quite a bit since then, but the homepage took about 11 minutes to get going with this prompt.
The full one-shot website builder prompt
You are a frontend developer building a complete, production-ready single-page website.
Before writing any code, ask me these questions one at a time. Wait for my answers before proceeding:
1. What is this website for? (portfolio, business, landing page, event, restaurant, personal blog, etc.)
2. Pick a style:
- Minimal and clean
- Bold and dark
- Warm and elegant
- Editorial and sharp
- Brutalist
- Playful and colorful
3. Light mode or dark mode?
4. What's your brand color? (say a color name like "blue" or "forest green." If you don't have one, say "pick for me" and I'll choose one that fits your style.)
5. Tell me about your business or project:
- What do you do?
- Who is it for?
- What's the goal of this website? (get bookings, sell a product, show off your work, etc.)
- What makes you different from competitors?
I'll use your answers to write all the copy.
6. What sections do you need? (hero, about, services, portfolio, testimonials, pricing, contact, FAQ, etc. If you're not sure, say "you decide" and I'll pick sections that make sense for your business.)
7. (Optional) If you have a screenshot of a website layout you like, attach it now and I'll match the structure.
After I answer, build the entire website as a single index.html file with these rules:
Structure and styling:
- All CSS inline in a <style> tag. All JS inline in a <script> tag.
- Responsive at 375px, 768px, and 1440px.
- Build a cohesive color system from my brand color and mode. For light mode: light neutral background, dark text, brand color for accents and CTAs. For dark mode: dark background, light text, brand color for accents and CTAs. Generate a darker shade and a lighter tint of the brand color automatically.
- If the user's chosen color clashes with their chosen mode, adjust the shade so it works. Don't use a color that makes text unreadable.
- Modern CSS: flexbox and grid. No frameworks.
- Google Fonts loaded via CDN.
- Include a favicon emoji that fits the site.
- Write real, specific copy based on the business description. No lorem ipsum. No generic placeholder text. Every headline and paragraph should sound like it was written for this specific business.
- The site should look like a real website, not a template. Whitespace, typography hierarchy, and visual rhythm matter.
Font pairing (match to style automatically):
- Minimal and clean: Inter + Inter
- Bold and dark: Space Grotesk + Inter
- Warm and elegant: Playfair Display + Lato
- Editorial and sharp: Sora + Source Sans 3
- Brutalist: Space Mono + Space Grotesk
- Playful and colorful: Poppins + Nunito
Animations:
- Load GSAP and ScrollTrigger via CDN.
- Every section fades up from 30px below with a 0.6s duration as the user scrolls into it.
- Cards, list items, and grid children stagger in with a 0.1s delay between each.
- Hero headline and subheadline fade in on page load with a slight upward motion.
- Keep all animations subtle. Nothing should bounce, spin, or overshoot.
Output the complete index.html file and nothing else. No explanations before or after the code.How to use this prompt to build your website
The prompt handles the heavy lifting, but the quality of what you get back depends on how you answer the questions. Here’s how to get the most out of each one.
Picking your style
Just pick one. Don’t try to combine them. “Minimal and clean” will give you a completely different site than “bold and dark,” and that’s the point. Each style comes with its own font pairing, spacing rhythm, and overall feel.
If you’re not sure what to pick, go with minimal and clean. It’s the hardest to mess up and looks professional across pretty much any industry.
Choosing your brand color
Don’t overthink this. You don’t need a hex code. Just say “blue” or “burnt orange” or “sage green” and the model will build a full color system around it. It generates a darker shade for headers, a lighter tint for backgrounds, and uses your color for buttons and accents.
If you genuinely have no preference, say “pick for me” and let the model choose something that fits the style you selected. It’s surprisingly good at this.
Describing your business
This is where most people sell themselves short. The more you tell the model about what you do, the better the copy it writes for you. Don’t just say “I’m a photographer.” That gets you generic copy that could be on any photographer’s website.
Instead, say something like “I’m a wedding photographer in Austin. I shoot editorial-style weddings for couples who want their photos to feel like a magazine, not a family portrait. Most of my clients find me on Instagram and I want them to book a consultation call from the site.” That gives the model enough to write headlines, section copy, and CTAs that actually sound like you.
Think about what your website should accomplish, who your visitors are, what makes you different from competitors, and what you want someone to do when they land on the page. The model uses all of this to write copy that fits your business instead of filling in placeholder text.
Using a screenshot for layout inspiration
This one is optional but it’s a game changer. If you see a website layout you like somewhere, screenshot it and attach it when the prompt asks. The model will match the structure but apply your style, your colors, and your content.
Good places to find layout inspiration:
- Dribbble for polished, designer-quality layouts
- Pinterest for a wider range of styles and industries
- Awwwards for cutting-edge and award-winning designs
- Landbook for landing page inspiration specifically
You don’t need to find something perfect. Even a rough screenshot of a layout you like gives the model a structural anchor that makes the output way better than going in blind.
Planning your website before you prompt
Before you paste anything into a model, it helps to spend 2 minutes thinking about what you actually need. The prompt asks you these questions anyway, but having your answers ready makes the whole process faster and the output stronger.
Think about what your website should do, who will be visiting it, what pages or sections make sense, and what you want visitors to do when they get there. Should they book a call? Buy something? Sign up for a newsletter? That clarity is what separates a site that looks good from a site that actually works.
Some people call this approach vibe coding. You describe the vibe, the model writes the code. But the people who get the best results aren’t just describing a vibe. They’re giving the model a clear picture of their business, their audience, and their goals. The prompt handles the design and development. Your job is knowing what you want.
How to deploy your AI website for free
The output is a single HTML file. You don’t need hosting, a server, or even an account to get it live.
- Copy the code the model gives you
- Open any text editor (Notepad, TextEdit, VS Code, whatever you have)
- Paste the code and save the file as index.html
- Go to app.netlify.com/drop
- Drag the file in
That’s it. You get a live URL in about 10 seconds. Completely free.
If you want a custom domain later, Netlify lets you connect one on their free plan. Buy a domain from Namecheap for around $10 a year, point it at Netlify, and you have a real website with a real URL.
Adding more pages to your website
The prompt builds a single page on purpose. One page, one file, clean output.
But once it’s done, you can keep going in the same conversation. Just tell it what you need next and it’ll build matching pages in the same design, fonts, and colors.
Now add an about page and a contact page in the same style. Match the design system, fonts, colors, and animations from the homepage.Save each page as its own file (about.html, contact.html). Put them all in one folder. Drag the folder into Netlify instead of a single file. Same process, same result, now you have a multi-page site.
Which AI models work best for building websites
I’ve tested this prompt across a few models. They all produce a working site, but each one has its strengths.
Claude tends to produce the cleanest layouts with the best typography choices. The copy it writes from your business description is usually the strongest of the 3. If you want the best out-of-the-box result, start here.
ChatGPT handles the GSAP animations well and tends to be more creative with color palettes. The copy can lean a little generic if your business description is thin, so make sure you give it enough to work with. I’ve also had good results pairing ChatGPT with Google’s AntiGravity if you want to use an agent-based workflow instead of chat.
Gemini is fast and produces good structure, but it sometimes needs a follow-up to tighten up the spacing and visual rhythm.
If you’re not happy with the first result from any model, paste this into the same conversation:
The layout is good but the spacing feels off. Tighten the whitespace, increase the font size hierarchy, and make the CTA buttons more prominent.One round of feedback usually gets you there.
Why this prompt works
Most website prompts skip the most important step. They tell the model what to build without telling it who it’s building for. You end up with a technically correct website that doesn’t feel like it belongs to anyone.
This prompt makes the model gather context first. It asks your style, your color, your audience, and your business before it writes a single line of code. By the time it starts building, it knows what your project actually is. That’s why the output fits instead of looking like a generic template someone downloaded for free.
The questions are the whole point. Good prompts aren’t just instructions. They’re conversations. You describe your project clearly, the model builds something that matches, and you refine from there. That mix of your input and the model’s output is what gets you to something that actually looks and feels professional.