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
| # | Step | Notes |
|---|---|---|
| 1 | Create your account | Email code or GitHub |
| 2 | Start a new project | From the dashboard |
| 3 | Describe what you want | Your first prompt |
| 4 | Enhance the prompt | Optional, recommended |
| 5 | Generate | 1–3 minutes |
| 6 | Learn the workspace | Preview, chat, files |
| 7 | Refine by chatting | One change at a time |
| 8 | Go back in time | Restore any version |
| 9 | Export the code | ZIP or GitHub |
| 10 | Deploy | Publish to a live URL |
| 11 | Add a custom domain | Use 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.devShare 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
| Plan | For | Roughly |
|---|---|---|
| Free | Learning and small projects | A daily allowance of messages, a handful of projects, standard models |
| Pro | Regular building and client work | A large monthly message allowance, more projects, faster models |
| Max | Heavy use | The 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
continueor Retry. - Generation stopped early — reply
continuein 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
- Read Effective AI Communication for prompt technique
- Browse Using SitePilot for deploy, direct edit, and version history
- Check the FAQ for common questions
Happy building!