# The VibecodersPH Starter Pack: How We Build Apps With AI

> Our opinionated workflow for going from zero to a deployed app with Next.js, Tailwind, Supabase, Vercel, and AI coding tools.

- Author: Jayson Cunanan
- Published: 2025-12-04 (updated 2026-09-28)
- Category: AI Engineering
- Tags: AI Tools, Next.js, Workflow, Beginner Guide, Claude, Copilot
- Canonical URL: https://www.vibecoders.ph/blog/vibecoders-starter-pack
- Publisher: Vibe Coders PH (https://www.vibecoders.ph)

> **Short answer:** VibecodersPH's starter pack is Next.js (TypeScript) + Tailwind CSS + Supabase + Vercel + GitHub, driven with Claude Code, Codex, GitHub Copilot, and Google's Antigravity IDE for redesign. Your first project is a personal website, not a startup: write a one-page `spec.md`, build with AI agents, then deploy to Vercel.

At VibecodersPH, we help people go from "I want to build something" to "my app is live on the internet" as fast as possible.

The problem: there are many frameworks, editors, and AI tools you could use. That is exactly why most beginners get stuck. They drown in options before writing a single line of meaningful code. This starter pack is our opinionated way of cutting through the noise.

## Who is this for?

This guide is for you if:

- You want to build real web apps, not just watch tutorials.
- You want AI tools to write code with you, not instead of you.
- You like the idea of a community using the same stack.
- You're curious about Next.js, Tailwind, Supabase, Vercel, and GitHub.

## What's the core philosophy?

1. **Ship something small and real as fast as possible.** Your first "win" is a full stack app that is live. Not perfect, but real.
2. **Use AI aggressively, but stay in control.** Agents write a lot of the code, but you still own the architecture, the naming, the constraints, and the tradeoffs.
3. **Standardize the stack.** If everyone uses the same core stack, it's easier to help each other, bounties are easier to scope, and code is easier to reuse.
4. **Avoid tool addiction.** Explore later. For now, stick to the default tools and stack in this guide.

## What stack does VibecodersPH use?

| Layer | Tools |
| --- | --- |
| Frontend & backend | Next.js (TypeScript) |
| Styling | Tailwind CSS, shadcn/ui (optional) |
| Database & auth | Supabase (Postgres, auth, storage, edge functions) |
| Deployment & collaboration | Vercel (hosting), GitHub (version control) |

This combination is popular, well documented, and friendly to AI coding agents, so tools like Claude and Copilot generally understand the stack well.

## Which AI tools do we actually use, and for what?

We split tools by what they're best at.

**Claude Code (CLI).** Great at understanding your whole project, planning architecture, and generating multiple files at once. Use it when you're starting a new feature, need a spec document, or want a refactor plan.

**Codex.** OpenAI's coding agent, great at scaffolding new modules and generating boilerplate once the structure is already clear.

**GitHub Copilot in VS Code.** Great at inline edits, small refactors, and completing patterns while you type.

**Google Antigravity, for redesign.** After the app works, we bring it into [Antigravity](https://antigravity.google/), Google's agent-first IDE built on Gemini models. It's good at redesigning the UI, improving layout and UX, cleaning up folder structure, and making the app look like a real product.

Our typical flow: build the core features with Claude Code, Codex, and Copilot, mixed and matched as needed. Once everything is functional, open the project in Antigravity and ask it to redesign colors, spacing, components, and responsive layout. We use the more expensive reasoning models when architecture matters, and lean on Antigravity when experimenting with design and CSS.

## What should my first project be?

Your day-one mission: build and deploy your own personal website.

It's small and achievable, it's personally meaningful, and it forces you to set up Next.js, learn Tailwind, create a GitHub repo, and deploy to Vercel. At minimum, include a home page with your name and a short intro, an "About Me" section, a "Projects" section (even if it's just ideas for now), and a contact link or social links.

## How do I write a spec.md an AI agent can build from?

We keep a `spec.md` file in the root of every project, for humans and AI assistants alike.

```
# SPEC: Personal Website

## 1. Goal
Build a simple personal website that introduces who I am,
shows my projects, and makes it easy to contact me.

## 2. Pages
- / (Home): short intro, links to About and Projects
- /about: longer bio, skills, interests, background
- /projects: list of projects or ideas, each with a title,
  short description, and link if live

## 3. Tech Stack
- Next.js (TypeScript)
- Tailwind CSS
- Deployed on Vercel

## 4. Non-Goals
- No complex backend for version 1
- No blog system yet
- No fancy animations required

## 5. Stretch Ideas (optional)
- Dark mode
- Simple contact form
- Timeline of learning journey
```

Then prompt your agent with something like: "Read spec.md and create the minimal Next.js project that implements this spec. Use Tailwind, and structure the components cleanly." Claude Code, Codex, and Copilot can all work from this.

## What's the end-to-end build workflow?

1. **Core logic and structure.** Create a new Next.js TypeScript app, add Tailwind, write `spec.md`, then use Claude Code to read it and design the folder structure. Use Codex for new endpoints and helper modules, and Copilot to fill in repetitive code. Result: your app runs locally with working routes and basic features.
2. **Make sure everything works.** Run `npm run dev` or `pnpm dev`, click through every page, and debug with your agents. Don't spend time on design yet.
3. **Redesign in Antigravity.** Open the project in Antigravity and ask it to redesign the entire UI while keeping the logic the same. Iterate until the layout, typography, and components feel consistent.
4. **Deploy to Vercel.** Push your code to GitHub, go to [vercel.com](https://vercel.com), click "Add New Project," import your repository, let Vercel auto-detect the Next.js framework, add environment variables if needed, and click "Deploy." Every push to your main branch rebuilds and redeploys automatically.

After your personal website, the natural next steps are dashboards, small tools backed by Supabase, simple automations, and community bounties. That's the foundation we're building inside VibecodersPH.

## Frequently asked questions

### Do I need to know how to code before starting?

No, but you should be willing to read what the AI generates and ask it to explain anything you don't understand. The goal is building with AI, not letting it replace your judgment entirely.

### Why Next.js and not something else?

It's well documented, widely used, and AI coding tools tend to generate correct, idiomatic code for it because there's so much of it in their training data. That makes debugging with an agent faster.

### Do I have to use Supabase for every project?

No. Supabase is our default for Postgres, auth, and storage because it gets you a working backend fast. Swap it out once you have a specific reason to.

### What if I don't have access to Claude Code or Antigravity?

Any capable AI coding assistant can follow the same spec.md-driven workflow. The tools we list are what our community standardizes on, not a hard requirement.

### How long should my first project take?

Days, not months. The point of the personal website project is to get a real, deployed app fast, then iterate.

## Sources

- [Next.js documentation](https://nextjs.org/docs), Vercel.
- [Tailwind CSS documentation](https://tailwindcss.com/docs), Tailwind Labs.
- [Supabase documentation](https://supabase.com/docs), Supabase.
- [Vercel deployment documentation](https://vercel.com/docs/deployments), Vercel.
- [Introducing Google Antigravity](https://antigravity.google/blog/introducing-google-antigravity), Google Antigravity Blog.
- [GitHub Copilot documentation](https://docs.github.com/en/copilot), GitHub.

Inside our Discord, we use a shorter, onboarding-message version of this guide. This post is the long form for people (and AI agents) who want the full picture. [Join our Discord](https://discord.gg/HgKuev28wg) or see our [projects](/projects).