Generating Your First Pages with an AI Builder

This is the lesson where your website goes from a document to something you can see and click. You will take the build brief and prompt from the previous lessons and use an AI builder to generate your first real pages. We will use Lovable as the worked example because it is chat-driven and free to start, then point out how the same steps look in Framer and v0. By the end you will have a live preview of your home page in a browser.

What You'll Learn

• How to start a project in an AI builder, step by step
• How to generate your first pages from your build brief
• How the same workflow maps to Framer and v0
• How to save your work and understand what the AI produced

Before You Start

Have three things ready:

1. Your build brief from Lesson 2 (goal, sitemap, copy, brand kit).
2. Your first prompt from Lesson 3 (the build prompt pattern).
3. A free account on your chosen builder. Signing up is usually just an email or a Google login.

A note on free tiers, as of mid-2026: Lovable's free plan gives roughly five build credits per day, v0 provides about five dollars of monthly credits, and Bolt offers around one million tokens per month. These change often, so glance at the tool's pricing page first. The practical takeaway is the same either way: come prepared so you generate a good site in few attempts.

Step by Step in Lovable

Step 1: Create a new project. After you sign in at the Lovable dashboard, you will see a prompt box, often the main thing on the screen. This is where you describe what to build.

Step 2: Paste your build prompt. Drop in the full build prompt you wrote in Lesson 3, the one with your business description, pages, home-page sections with real copy, and style guardrails. Submit it.

Step 3: Watch it build. The AI thinks for a moment, then generates your site and shows a live preview on the right side of the screen. You will see your headline, your sections, and your colors take shape. This first result is a starting point, not the finished product, that is expected.

Step 4: Click through the preview. Interact with it like a visitor. Scroll the home page, click the navigation, resize the window to see how it behaves. Note what is close and what needs work, but do not fix anything yet; just observe.

Step 5: Generate the other pages. Ask for each additional page from your sitemap, one at a time:

Add an About page using this copy: \{paste your About copy\}.
Keep the same header, colors, and fonts as the home page.
Link to it from the navigation bar.

Repeat for Services/Products and Contact. Adding pages one at a time keeps the AI consistent and keeps each change easy to review.

Step 6: Save your work. Lovable saves your project automatically as you go, and most builders also let you connect the project to GitHub so a copy of the underlying code lives in your own account. You do not need to understand the code, but having it backed up is reassuring and useful later.

The Same Idea in Framer and v0

The tool changes; the workflow does not.

In Framer, you start a project, let the AI generate a first draft from a short description, and then do most of your editing by clicking elements and changing them in a panel, closer to a design tool than a chat. In v0, you prompt for a page or component, get an unusually polished UI, and refine it either by chatting or in a visual "Design Mode." If you chose one of these, follow its on-screen prompt box the same way: brief in, page out, refine.

Understanding What You Got

When the AI builds your site, it is generating real front-end code (usually React) behind the scenes. You will never have to write it, but a little awareness helps:

The preview you are looking at is the same site that will eventually be public, it is just running privately for now. Nothing you do in the builder is visible to the world until you deploy it, which you will do in Module 3. That means you can experiment freely: there is no way to embarrass yourself, and you can always revert.

If you are curious what the AI wrote, most builders have a code view. Peeking is optional. Understanding the structure of your pages, a header, a hero section, content sections, and a footer, matters far more than reading any code.

Troubleshooting Your First Build

• It looks generic. Your prompt was probably too thin. Re-run with more specific copy and a concrete style reference (see Lesson 3).
• It invented content. Delete any price, statistic, or testimonial you did not supply, then add your guardrail line and regenerate that section.
• It ignored a section. Ask again for just that one section rather than rebuilding the page.
• You ran low on credits. Stop, note what still needs doing, and continue after your daily credits reset, or switch tools. This is exactly why the build brief matters.

You now have a living, clickable draft of your website. It is rough in places, and that is fine. The next lesson is all about turning this first draft into something polished, adjusting layout, colors, spacing, and structure until it looks intentional.

Key Takeaways

• Come to the builder with your brief, your prompt, and a free account ready.
• In Lovable: create a project, paste your build prompt, watch it generate, then add each page one at a time.
• The workflow is identical across tools, only the editing surface (chat vs. click-and-drag) changes.
• Your preview is private until you deploy, so experiment freely and revert anytime.
• Focus on structure, not code: header, hero, content sections, footer.