3. Build Your First Site

What We'll Be Building

In this section, we'll use what we've learned so far to build a simple, functional website.

We'll use Bolt.new along with the static site generator 11ty.

Find Your "Why"

Before we dive in, take a moment to figure out why you're building your site. This gives your project direction and purpose.

Example "Whys"

  • A portfolio for a developer
  • A blog for a writer
  • A store for a business
  • A community around a shared interest

My Vibe Philosophy

AI makes it easy to build big, complex projects—but that's not always the best use of your time (or its power).

Instead, use it to get your ideas online fast, so you can learn, iterate, and grow.

Some Tips:

  • Focus on what you want your audience to see.
  • Deliver value fast.
  • Let your personality shine.
  • Start small and intentional.
  • Launch fast. Learn from feedback.

Start a Bolt.new Project

Time to build! We'll use prompts to generate our site using AI.

Why Bolt.new?

You might've seen platforms like:

  • Loveable
  • Base44
  • FireStudio
  • V0

Most of them output React + Next.js. That's cool, but not always beginner-friendly or flexible.

With Bolt.new, you can choose your stack. In our case: 11ty + Tailwind CSS.

Start Your Project

  • Go to Bolt.new
  • Click "Get Started"
  • Sign in with Google, GitHub, or email
  • Then enter this prompt:
a blog with 11ty and Tailwind CSS

đź’ˇ Customize the prompt: "for my portfolio", "for a business", etc.

Hit Enter. Let the AI do its thing.

Project Structure

Explore the Bolt.new interface. Review your files. Try to get familiar with what was generated.

Prompting for Design

Now let's prompt Bolt to style the homepage. Try being specific and creative:

  • "Modern, clean, professional look"
  • "Add dark/light mode toggle"
  • "Use a bold, neon color scheme"
  • "Hero section with image and call-to-action button"
  • "Footer with copyright and social icons"

Export to Cursor

Happy with your design? Let's move it to Cursor for development.

Why Export?

Cursor gives you a full local development experience—AI inside your IDE.

How to Export

  • Click "Export" in the Bolt UI
  • Download your project
  • Import the project into Cursor
  • Open the terminal
  • Run npm install or pnpm install
  • Run npm run dev
  • Open the browser and view your site!

Tips for Success

1. Be Specific

The more clear and detailed your prompts, the better the output.

2. Provide Examples

If you want a hero section like Stripe's, say so!

3. Be Patient

AI won't always get it right the first time. That's normal.

4. Be Creative

Use AI as a playground. Experiment. Try weird ideas!

5. Use Cursor's Search

The search bar in Cursor is your secret weapon—don't sleep on it.

Go to Section 4 →