Sign in
Go to vibely.sh and sign in with Google, SSO, or email.
Pick Web App
On the new-project screen, choose Web App. You’ll be building on Vite + React + Tailwind + TanStack, with Supabase wired in automatically when you ask for auth or a database.
Describe your app, concretely
Concreteness beats length. Three things to name:
- Who’s using it. “For solo consultants tracking client relationships.”
- The data model in one sentence. “Contacts, deals with stages, daily activity feed.”
- The feel in one or two adjectives or references. “Calm and professional, like Linear meets Notion.”
“A CRM for solo consultants — contacts, deals with three stages, daily activity feed. Supabase auth (email + Google). Calm and professional, like Linear meets Notion.”See Art of Prompting for the patterns that consistently land good first turns.
Answer the 3–4 clarifying questions
Before writing code, Vibely asks a short batch of follow-ups — usually about the niche, the primary user, the must-have flow, and the visual tone. One-line answers are fine; what matters is that the agent now builds for your exact use case instead of a generic CRM/dashboard/site.
Watch the preview appear
Within ~10 seconds the right pane opens a live preview at a
*.vibelyagent.com URL. The agent writes files into the live tree; the preview hot-reloads as each one lands.Iterate
Keep prompting. Small turns work better than big ones:
- “Add a kanban view to deals, draggable between stages.”
- “Make the sidebar collapse on mobile.”
- “When a deal moves to Won, post to Slack
#wins.”
Publish
Project menu → Publish. You’ll get a stable
<your-slug>.vibelyagent.com URL within seconds. Add a custom domain when you’re ready. See Publish for access controls, version history, and GitHub export.Tips for a strong first prompt
- Lead with the user. “For solo consultants” gives the agent something to design around. “A CRM” doesn’t.
- Name the data model up front. “Contacts, deals, activities” — naming entities prevents three rounds of schema rework.
- Mention auth early. Adding it after the fact requires migrating routes. Cheaper to ask for it from the start.
- Anchor the vibe with references. “Minimal like Linear, warm like Notion” lands far better than “clean and modern.”
What “good” looks like at the end of turn 1
After your first prompt, the agent should have produced:- A multi-page skeleton — home, auth flow, and at least one core screen
- Real components (not
<div>Coming soon</div>placeholders) - Working navigation between pages
- Tailwind tokens consistent across pages
- A Supabase schema if you mentioned data
lorem ipsum, prompt: “Replace all placeholder text with real content matching the brief.” A known failure mode; a retry usually fixes it.
Common follow-ups
| Goal | Prompt |
|---|---|
| Add a route | ”Add a /settings page with profile, billing, and team tabs.” |
| Add a feature behind auth | ”Gate the dashboard behind a logged-in check; redirect to /sign-in.” |
| Wire in Stripe | ”Add Stripe checkout for a Pro plan; use Supabase for user tier.” |
| Send transactional email | ”Send a welcome email via Resend when a user signs up.” |
| Connect a third-party tool | See Connectors |
Next
Iterate effectively
Make changes without breaking what’s working.
Publish
Custom domains, access controls, rollbacks, GitHub export.
What's in the box
The stack and starter setup every web app ships with.
Connectors
Wire third-party services with one prompt.