AI-guided website creation

Using a mega prompt to architect and build the first draft of professional-grade, high-fidelity web pages and websites.

Learning Goals

At the end of this Tutorial, you will be able to:

  • Organise a web project using a clear folder and file structure suitable for AI-assisted development
  • Use a structured mega prompt to guide an AI in planning and generating a first draft of a website
  • Define a website’s audience, purpose, content needs, and conversion goal before generating code
  • Choose an appropriate AI service and workspace for an AI-guided web-development task
  • Evaluate AI-generated output for semantic HTML, asset organisation, responsive typography, and accessibility basics
  • Refine AI-generated code and content so the final result better matches the project brief

Introduction

This Tutorial introduces a general-purpose mega prompt intended to guide an AI to generate high-quality websites, whether single-page or multi-page. As required, you can further refine the output from this prompt.

Folders and files

Before continuing, create a high-level folder named 📁 ai-web-dev and, inside it, a subfolder named /prompts.

Download the following markdown file into your /ai-web-dev/prompts subfolder.

mega-prompt.md

Open this file in VS Code.

Inside the mega-prompt.md file

Let's look at the five sections of this mega prompt markdown file.

1: Role & Philosophy

Like all good prompts, this begins by assigning a role or persona to the AI service. In this case, you want the AI to work with you as a Lead Creative Technologist.

2: The Visual System

Here you set out the visual design approach and standards you want the AI to follow. You also provide instructions to avoid the 'Generic AI Look.'

3: Project Discovery

The AI will prompt you to answer a series of questions about your web project. This guides the AI's decisions and makes it more likely the output will align with your goals.

4: Content & Technical Strategy

You will be asked to respond to further questions about your web project's text and imagery. Also, you will be asked to decide whether you want to use 'vanilla' JavaScript or the ReactJS framework.

If required, you can specify a database here.

5: Project Execution Requirements

This section covers some general topics, such as folder and file structure, semantic HTML tags, TailwindCSS, and variable Google Fonts.

The mega prompt workflow

Follow the steps below:

  1. In your 📁 ai-web-dev folder, create a subfolder project-name for each project. Inside this folder, create assets/css, assets/img and assets/js subfolders.
  2. Inside your project-name folder, create a Git repository.
  3. Open your preferred AI service, run the mega prompt, and copy the generated files to your project-folder and its subfolders.   Ensure your main page is named index.html
  4. In your project-folder, commit the files and push to GitHub.
  5. Open Vercel, create a new project, and import your repository. Vercel will auto-detect TailwindCSS v4 and suggest the Build settings.   With every future update you commit and push to GitHub, Vercel will automatically update (This may take up to 10 seconds.)

About AI services

Before pasting the mega prompt into the free-tier of your chosen AI service, follow these guidelines for best results:

  • Google Gemini: Choose New chat to prevent 'context drift.' ALso, click Canvas on the Tools option under the chat window.   If you choose a "Coffee Shop" brief, for example, Gemini will search the live web for current 2026 design trends for cafes and incorporate them into the layout automatically.   Use the Generate Image integration to create assets for your site.
  • ChatGPT: Once the mega prompt is active, ChatGPT will trigger Canvas, a dedicated editor window. Use the Code View toggle to see the HTML/Tailwind structure.   ChatGPT Canvas now has a Vibe Check button that automatically reviews the code against the visual system rules you provided in the prompt.
  • Claude: Click your Profile icon (bottom left). Then, Capabilities and Enable Artifacts.   Paste the mega prompt into the main chat. As you answer the prompt's questions, Claude will open an Artifact side panel with HTML, CSS, and JS in separate, manageable tabs.

Client case studies

To help you get started with using the mega prompt, here are some use cases. Experiment with different AI services for different cases, and compare the results.

Client / Brand Primary Mission Target Demographic Positioning & Vibe Pattern Success Metric (SDA)
Vanguard Timepieces
"Precision you can feel."		 [A] Sell Products (Limited-run mechanical watches) Luxury collectors, 30–55, value "buy-it-for-life" engineering. [2] High-Ticket
Cold, Architectural, Staid, Minimal.		 Complete the "Add to Cart" and Stripe checkout flow.
Serene Architecture
"Space transformed."		 [B] Sell Services (Interior architecture firm) New homeowners looking for minimalist, sustainable renovations. [2] High-Ticket
Warm, Human, Staid, Minimal.		 Book a paid 60-minute "Vision Consultation" via calendar.
The Copper Portafilter
"Perfectly poured."		 [A] & [B] Retail Sales & Community Hub Local commuters and "coffee nerds" prioritizing bean origin. [1] Entry Level
Warm, Human, Playful, Info-Rich.		 Click "Pre-order for Pickup" or find the "Directions".
The Irish Oak Project
"Root of Irish Heritage."		 [C] Convey Information (Conservation Archive) Students, environmentalists, and history enthusiasts. [2] High-Ticket (Authority)
Warm, Human, Staid, Spacious.		 Spend 5+ minutes on page reading "Ancient History" section.
The Kindred Cupboard
"Shop for a Story."		 [D] & [A] Support & Sales (Charity Shop) Conscious consumers, Gen Z vintage hunters, and local retirees. [1] Entry Level
Warm, Human, Playful, Info-Rich.		 Click "Find our Shop" or "Donate Your Goods".

Performing a technical audit

Once the AI generates your code, perform an audit to ensure it hasn't defaulted to "lazy" coding habits. Verify the following in the output:

  • The Nav Placement: The <nav> element must sit immediately inside the <body>, before the <header> begins.
  • Asset Paths: Images should point to assets/img/filename.png.
  • Fluid Type: Look for responsive type scaling in the TailwindCSS classes.
  • Semantic Flow: The page should be a logical stack: nav > header > main > footer.
  • For the 'vanilla' stack, check for aria-labels on the icon-only social links in the footer to support users relying on screen readers.
  • Check for mobile layout, real image paths, alt text, accessible contrast, working CTA, no lorem ipsum, and valid links.

Try it yourself

Choose one of the client case studies from this tutorial, or invent a small local business of your own.

Create a new project folder with the following structure:

project-name
├── index.html
├── assets/css
├── assets/img
└── assets/js

Next, open your preferred AI service and paste in the mega-prompt.md file.

Answer the AI’s project-discovery questions for your chosen client. Ask the AI to generate a first draft of a home page.

Copy the generated code into your project folder and open the page in your browser.

Then perform a technical audit of the output. Check for the following:

- clear heading hierarchy
- semantic HTML structure
- sensible folder paths for images, CSS, and JavaScript
- a visible primary call to action
- readable typography and good spacing
- accessible labels for icon-only links or buttons

Finally, revise at least three weak areas in the AI-generated output and save the improved version.

-----------

Create a one-page website for a fictional business or organisation of your choice.

Your page should include the following:

- a navigation bar
- a hero section with headline, supporting text, and primary call to action
- one section that builds trust (testimonials, credentials, or statistics)
- one section that explains the offer
- a footer with contact or social links

Use the mega prompt to generate the first draft.

Before accepting the result, inspect the output and ask:

- Does the design match the intended audience?
- Is the call to action obvious?
- Is the layout easy to scan?
- Does the page avoid the generic AI look?
- Is the HTML semantic and well structured?

Now return to the AI and ask it to improve one of the following:

- stronger visual hierarchy
- more persuasive copy
- better accessibility
- cleaner semantic HTML
- more distinctive brand tone

Compare the first and second versions, and decide which changes improved the page most.

Sample AI prompts

I want to build a one-page website for a local coffee shop. Ask me the most important project-discovery questions first, including audience, business goal, brand tone, and primary call to action. Do not generate any code until I answer.
Review the following AI-generated homepage code. Identify any weak hierarchy, vague calls to action, generic design choices, accessibility problems, or semantic HTML issues. Then suggest the five most important improvements in priority order.
Rewrite this homepage so it feels less like generic AI output and more like a polished brand site. Keep the structure simple and usable, but improve the typography, spacing, section flow, and copy so the design feels more distinctive and conversion-focused.