VibeStartCongratulations!
Your Next.js Website development environment is ready
Installed Tools
Project structure created on your computer
📁 ~/my-first-app/ ├── 📂 public/ ← Images, icons ├── 📂 src/ │ ├── 📂 app/ ← Pages (Next.js) │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── globals.css │ ├── 📂 domain/ ← Business logic │ │ ├── models/ │ │ └── services/ │ ├── 📂 ports/ ← Interface definitions │ └── 📂 adapters/ ← External integrations │ ├── api/ │ └── ui/ ├── 📄 CLAUDE.md ← AI architecture rules ├── 📄 next.config.ts ← Next.js config ├── 📄 tailwind.config.ts ← Style config ├── 📄 tsconfig.json ← TypeScript config └── 📄 package.json
Throw your first line at the AI
Claude Code or Cursor — either one works. It doesn't have to be perfect on the first try. Keep iterating in conversation.
Fill in the blanks
I want to build a ___ website. What it does: ___ Who it's for: ___ 3 must-have features to start with: 1. ___ 2. ___ 3. ___ Where should I start?
Here's what it could look like
I want to build a group event scheduling website. What it does: It's a pain when someone asks "when are you free?" in a group chat. I want a site where you share a link and everyone votes on which dates work for them. Who it's for: Young professionals in their 20s–30s. No sign-up required — just open the link and vote. 3 must-have features to start with: 1. Create an event with multiple date options and let participants check the ones that work 2. No sign-up — just enter a name and vote right away 3. A clear view of voting results at a glance Start by making a landing page to promote the site.
What to Say Next
After your first prompt, the AI will generate code. From there, just chat naturally with short requests.
Don't worry about saying the wrong thing. You can always say "Undo that and try again."
💡 After you deploy your site in the next step, you'll get a richer guide organized into 5 categories (text · color · new section · gradient · font).
Stuck on the Design?
Claude Design — Create a UI with AI first, then bring it straight into your project.
- 1Go to claude.ai/design and describe the screen you want, like "Create a login page"
- 2When you like it, open the Export menu, choose "Send to local coding agent", then click Copy command
- 3Paste it into a Claude Code terminal opened in your project folder — the design is applied automatically
- 4Using a different AI agent (Cursor, etc.)? Check "Download zip instead", extract the ZIP, and drop the files into ~/my-first-app/
Available only to Claude Pro, Max, Team, and Enterprise subscribers. It's in research preview with its own weekly limit — usage here doesn't count toward other Claude limits.
Ready to put your site on the real internet?
Push your code to GitHub and deploy with Vercel — you'll get a real URL you can share with friends. We'll walk you through it step by step.
Sign in with Google to automatically link the project you just created.