SitePilot logo

Quick Start

Go from a plain-language idea to a deployed web app with SitePilot, step by step

Quick Start

SitePilot turns a plain-language description into a working web app, lets you refine it by chatting, and publishes it to a real URL. This guide walks the whole path, step by step.

The short version

#StepNotes
1Create your accountEmail code or GitHub
2Start a new projectFrom the dashboard
3Describe what you wantYour first prompt
4Enhance the promptOptional, recommended
5Generate1–3 minutes
6Learn the workspacePreview, chat, files
7Refine by chattingOne change at a time
8Go back in timeRestore any version
9Export the codeZIP or GitHub
10DeployPublish to a live URL
11Add a custom domainUse your own address

Before you start

  • An email address, or a GitHub account.
  • A clear idea of what you want to build — a landing page, a portfolio, a small tool, a marketing site.
  • Nothing to install. SitePilot runs entirely in the browser.

SitePilot builds front-end web applications and static sites — React apps, landing pages, dashboards, content sites. It is not built for large backend systems or native mobile apps.


Part one — Get set up

1. Create your account

Open SitePilot and choose Sign in. You have two options:

  • Email — enter your address and SitePilot sends a six-digit code. Type it in to continue.
  • GitHub — authorize once and you are in. This also makes exporting to GitHub later a single click.

A quick "are you human" check runs in the background. New accounts start on the Free plan.

2. Start a new project

From the dashboard, select New Project. Each project is its own app with its own preview, its own history, and its own deploy URL. You can have several projects; your plan sets how many.

  • Dashboard — every project you have created, newest first
  • New Project — opens the prompt box to begin
  • Usage — how many messages and projects you have left this period

Part two — Build with AI

3. Describe what you want to build

In the prompt box, write what you want in plain language. Be concrete about purpose, the main sections or screens, and the look and feel. The more specific you are, the closer the first result lands.

A landing page for a local coffee roastery called North Bell.
Sections: a bold hero with a tagline and an "Order online" button,
a short story about the roastery, a grid of three signature roasts
with prices, and a footer with opening hours and an address.
Warm, minimal, lots of whitespace, deep red accent.

You can also attach an image — a screenshot, a sketch, a moodboard — and reference it in your prompt.

For a deeper look at writing prompts, see Effective AI Communication.

4. Enhance the prompt

Before generating, use Enhance Prompt. SitePilot expands your description into a fuller brief — spelling out layout, states, and copy it would otherwise have to guess. Read it over, edit anything that is off, then continue.

This step is optional. Skip it if your prompt is already detailed, or if you would rather shape the result through follow-up chat. The button may be turned off on some SitePilot instances.

5. Generate

Press Submit. SitePilot starts from a modern foundation — React, Vite, Tailwind CSS, and shadcn/ui components — and rewrites it to match your brief.

  • Live preview — the app builds in front of you as files are written
  • Logs — open these to watch each step, or to see what went wrong
  • Timing — most projects finish in one to three minutes

If generation stops partway, send continue in the chat, or use Retry. A blank preview usually just means the build has not finished — give it a moment and check the Logs.

6. Learn the workspace

Once the first version is ready you are in the SitePilot workspace. Four things to know:

  • Preview — your live app. Switch between desktop and mobile widths.
  • Chat — where you ask for changes. Every message is a build step.
  • Files & code — browse the full source; open any file to read it.
  • Element inspector — click a button, heading, or image in the preview to point the AI straight at it, so you do not have to describe where it is.

The model selector lets you pick which AI model handles your requests. The Free plan uses the standard models; paid plans unlock more capable ones.

7. Refine by chatting

Improve the app one request at a time. Describe the outcome you want, not the code.

Make the hero headline larger and left-aligned.

Change the roast cards to a 2-column layout on mobile.

Add a newsletter sign-up above the footer with an email field
and a "Subscribe" button.

Small, clear steps beat one giant instruction — they are faster, easier to review, and easy to undo if you do not like the result. Use the element inspector when a change is about one specific thing on the page.

8. Go back in time

Every generation and every edit is saved as a checkpoint. Open History to see the full list, preview any earlier version, and restore it if a change took the project in the wrong direction. Nothing is lost — you can move forward again from any point.

See Version History for details.


Part three — Ship it

9. Export the code

Your project is real source code, and it is yours to take.

  • Download ZIP — the complete project, ready to open in any editor or run locally.
  • Export to GitHub — SitePilot creates a repository in your GitHub account and pushes the code. Connect GitHub first if you signed in with email.

10. Deploy

Click Deploy. SitePilot builds the project and publishes it to a live address:

https://your-project.wewant360.dev

Share that link with anyone — it is a real, hosted site on a global network. Made more changes? Press Deploy again to push the update. The deploy panel shows status and the current live version.

11. Add a custom domain

To serve the site from your own address, open the project's Domain settings and enter your domain. SitePilot shows you one DNS record to add at your registrar. Once it verifies, your site is live on your domain with HTTPS handled automatically.


Plans

PlanForRoughly
FreeLearning and small projectsA daily allowance of messages, a handful of projects, standard models
ProRegular building and client workA large monthly message allowance, more projects, faster models
MaxHeavy useThe highest limits and full access to every feature

Exact message counts, project limits, and prices are on the in-app Pricing page and may change. Upgrade or cancel any time from Account → Billing.

Five habits that help

  • Be specific up front — name the sections, the tone, the colours, the audience. Vague prompts get generic pages.
  • One change per message — small steps generate faster, are easier to check, and simple to roll back.
  • Point, don't describe — use the element inspector to select the thing you mean instead of explaining where it is.
  • Ask for outcomes — "Make it feel calmer and more spacious" works better than naming CSS properties.
  • Restore, don't fight — if two or three tries drift off course, go back to a good checkpoint and take a different route.

If something goes wrong

  • Preview is blank — the build is probably still running. Wait, then open Logs. If it looks stuck, send continue or Retry.
  • Generation stopped early — reply continue in the chat, or use Retry to resume.
  • "You've reached your limit" — wait for the allowance to reset, or upgrade under Account → Billing.
  • Deploy failed — try Deploy again; check the deploy panel for the error. A fresh deploy usually clears transient issues.
  • A change made things worse — open History and restore the last version you were happy with.

Next steps

Happy building!