How to Build a Website with AI in 5 Minutes

Building a website used to mean days of setup, coding, and deployment. In 2026, you can go from idea to live URL in under five minutes using AI. This guide walks you through the entire process using Frascati, from writing your first prompt to sharing a published link.

What You'll Build

By the end of this tutorial, you will have a complete, responsive landing page with a hero section, feature cards, a pricing table, customer testimonials, and a footer. It will look professional on desktop and mobile, and it will be live on the internet with a shareable URL.

Step 1: Create Your Account (30 Seconds)

Go to frascati.app and click "Get Started Free." You can sign up with GitHub, Google, or email. No credit card is required — the free plan gives you 100 credits per month, which is more than enough for this tutorial.

Once signed in, you land on your dashboard. This is where all your projects live. Click the "New Project" button to get started.

Step 2: Choose a Starting Point (15 Seconds)

You can start from a blank canvas or pick one of 8 templates. Templates give you a head start with pre-built structure that you can customize through the chat. For this tutorial, we will start from scratch to show the full AI generation experience. Click "Start from scratch" or just type in the chat.

Step 3: Write Your First Prompt (30 Seconds)

The quality of your output depends heavily on the quality of your prompt. Here is a good first prompt:

“Create a landing page for a productivity app called "FocusFlow." Include a hero section with a bold headline and a CTA button, 4 feature cards with icons, a pricing section with Free, Pro ($12/mo), and Team ($29/mo) tiers, 3 customer testimonials, and a footer with links. Use a dark theme with purple accents.”

Notice how this prompt includes: the product name, the sections you want, specific details like pricing tiers, a design direction (dark theme, purple accents), and the number of items in each section. The more specific you are, the better the result.

Tips for Better Prompts

• Be specific about sections: "hero, features, pricing, testimonials, footer" instead of "a nice landing page"
• Include real content where possible: actual product names, pricing, feature descriptions
• Specify the visual style: color scheme, dark/light, modern/minimal/playful
• Mention quantities: "4 feature cards," "3 pricing tiers," "5 testimonials"
• If you have a reference, describe it: "similar layout to Stripe's homepage"

Step 4: Watch the AI Build (60–90 Seconds)

After you send your prompt, the AI starts generating code immediately. The right panel shows a live preview that updates in real time as code is written. You will see the hero section appear first, then features, then pricing, and so on. The code is visible in the editor tab if you want to follow along.

The generated code uses React with Tailwind CSS, following modern best practices. It includes responsive breakpoints, semantic HTML, hover states, and proper spacing. The result is not a wireframe — it is a production-quality page.

Step 5: Iterate and Refine (60–120 Seconds)

Here is where the conversational model shines. You do not need to get everything right in the first prompt. Just tell the AI what to change:

• "Make the hero headline bigger and add a subtitle"
• "Change the feature icons to use chart, zap, shield, and clock"
• "Add a gradient background to the pricing section"
• "Make the testimonials into a horizontal carousel"
• "Add a 'Back to Top' button in the footer"

Each change takes 10–30 seconds. The AI understands context, so it modifies the existing code rather than regenerating everything. After 3–4 iterations, you will have a page that looks exactly the way you want.

Step 6: Publish (10 Seconds)

Click the "Publish" button in the top bar. Choose a slug (the URL path for your page), and your site goes live instantly at frascati.app/p/your-slug. You get a shareable link that works on any device. That is it — from zero to live website in under five minutes.

You can also share a view-only link of your project using the "Share Link" button, which is useful for getting feedback from collaborators before publishing.

What Else Can You Build?

Landing pages are just the beginning. Here are some other things people build with Frascati:

• Portfolio websites for designers, developers, and photographers
• Restaurant sites with menus, locations, and reservation prompts
• Blog layouts with article cards and reading views
• SaaS marketing pages with feature comparisons and pricing tables
• Event pages with schedules, speaker bios, and registration CTAs
• Agency websites with case studies and team sections
• Personal sites and resumes

For more inspiration, check out our template gallery or read our guide on building a portfolio with AI.

Common Questions