Vibe Coding,
Pro Context.

This kit is a free tool built to let you explore the world of vibe coding for the first time with the pro standards needed for a cleaner, more successful project.

The secret to a "clean" project isn't just a good prompt. It's providing the professional structure that real engineering teams use. By merging your vision with these templates, you give the AI the guardrails it needs to build something production-ready.

Free & Open Source
Prompt Ready
Higher Success Rate

What is Vibe Coding?

It's the process of building software where you focus on the intent, feel, and logic, while letting AI agents handle the syntax. This kit ensures your "vibe" is backed by solid requirements.

Why this Kit?

Most AI projects fail when they get too complex. This kit provides a centralized "Source of Truth" that keeps the AI aligned as your project grows.

Interview First

Understand the problem deeply before touching tools or templates.

Document Intent

PRD, Design Brief, Tech Spec โ€” give the AI something to build against.

Instrument Early

Define your north star metric before writing the first feature.

Sharing is Caring

This kit distills over 15 years of product development experience. Each step maps directly to work I've done on real products with real stakes.

The interview process mirrors how I gather context before writing a single line of spec. The PRD captures the "what" and "why" that prevents scope creep six weeks in. The Design Brief sets visual direction early so no one is guessing what "clean and modern" means when the first screen goes up. The Tech Spec gives the AI the constraints it needs to build something that actually scales. And the last step ensures exactly what we're demonstrating for an iteration of a product.

The gives you an idea of what you get. The comes from hard-won experience: the things that get skipped when teams move fast and surface at the worst possible moment. Instrumenting for success isn't an afterthought here. It's baked in from the start.

Enjoy,

Kim

Step 0: Initialize Your Project

Before you touch any AI tool, run this script to scaffold your project folder. It creates the folder structure and blank planning files the AI will read later.

1

Download the script

Save init.sh into the folder where you want your project to live.

2

Open Terminal in that folder

Right-click the folder in Finder and select "New Terminal at Folder".

3

Run the script

Paste bash init.sh into Terminal and press Enter.

4

You're ready

Your folder now has the structure the AI expects. Continue to Step 1 below.

Terminal

bash init.sh

Creates:

assets/   app/   components/   lib/   hooks/

PRD.md   DESIGN_BRIEF.md   TECH_SPEC.md

LAUNCH_CHECKLIST.md

Download init.sh

Step 1: Run the AI Interview

Copy the Master Context and paste it into any AI chat (Claude, Gemini, ChatGPT). The AI will interview you section by section and generate your planning docs automatically. You don't fill out the templates manually โ€” that's the point.

1

Copy the Master Context

Click the button below. It bundles the interview guide and all four templates into one prompt.

2

Start a new AI chat and paste it

The AI will immediately begin the interview. Answer each section in your own words.

3

Save the generated docs

Once the interview is done, the AI outputs your PRD, Design Brief, and Tech Spec. Paste each into the corresponding .md file in your project folder.

What gets bundled

  • โ†’ Interview Guide (9 sections)
  • โ†’ PRD structure
  • โ†’ Design Brief structure
  • โ†’ Tech Spec structure

Step 2: Hand Off to Your Coding Agent

Once your planning docs are saved into your project folder, open your coding agent (Claude Code, Cursor, etc.) inside that same folder. Then trigger the handoff.

1

Co-locate your files

Your PRD.md, DESIGN_BRIEF.md, and TECH_SPEC.md must live in the same folder as your code.

2

Open your coding agent in that folder

The agent reads your project folder on startup. This is how it "understands" your intent without you repeating yourself.

3

Paste the Handoff Prompt

This tells the agent to read your docs, confirm understanding, and suggest where to start building.

4

Start with Feature #1

Recommend beginning with Authentication or basic project structure before anything else.

Handoff Prompt

Tells the coding agent to read your planning docs, confirm understanding, scaffold the folder structure, and propose Feature #1.

These are the output templates the AI uses during the interview. You don't fill these in โ€” they're bundled into the Master Context so the AI knows exactly what to generate. Review them here to understand what you'll receive.

Interview Guide

The AI works through these four sections with you, one at a time.

Section 1: The Spark

  • What's the idea in one sentence?
  • Where did this idea come from?
  • Who is doing this badly right now?

Section 2: The Problem

  • Describe the person who has this problem.
  • What's their workaround today?
  • What's the cost of NOT solving this?

Section 3: The Solution

  • What's the "Core Action"?
  • What does success look like in 5 minutes?

Section 4: Users & Market

  • Who is your primary user? Be specific โ€” not "everyone" or "small businesses."
  • Where do these users currently hang out online?
  • Who are your top 2โ€“3 competitors? What do they do well? What badly?
  • Why would someone choose your app over existing options?
  • Free, paid, or freemium? Why?

Section 5: Features

  • List every feature you want โ€” brain dump, don't filter yet.
  • If you could only launch with 3 features, what would they be?
  • What features are you tempted to build but don't need at launch?
  • What's the first thing a new user should see or do when they open the app?
  • What's the most technically complex feature? Is it truly MVP?

Section 6: Design & Feel

  • Name 2โ€“3 apps you love using and what you love about them visually.
  • Name an app whose design you hate and why.
  • Describe the feel of your app in 3 adjectives. (e.g. "calm, focused, minimal")
  • Do you have a brand color in mind? If not, what colors feel right?
  • Light mode, dark mode, or both?
  • Do you have a logo, font, or any brand assets yet?
  • Do you have a Figma file or any wireframes / sketches?

Section 7: Technical Constraints

  • Have you built a mobile app before? What was your experience?
  • Is there a tech stack you're comfortable with or want to use?
  • Do you have a budget for cloud infrastructure?
  • Does this app need to work offline?
  • Does this app handle any sensitive data? (Health, finance, location, minors)
  • Will you need to integrate with any external services?
  • Is there a deadline or launch date driving this?

Section 8: Metrics & Success

  • How will you know in 90 days if this was worth building?
  • What's your North Star Metric โ€” the single number that goes up when it's working?
  • What's your MVP success criteria? (e.g. "10 people use it daily for 2 weeks")
  • What would make you kill this project? (Know your exit criteria upfront.)

Section 9: Open Questions & Risks

  • What's the riskiest assumption you're making?
  • What's the one thing you're most worried about technically?
  • What's the one thing you're most worried about from a market/user perspective?
  • Is there anything you specifically want the AI to flag or warn you about as you build?

Quick Interview (5-Minute Version)

Use this when you have a rough idea and want to move fast. Answer all 10 and the AI fills in the rest with reasonable defaults.

  1. What does the app do? (1 sentence)
  2. Who is it for? (1 sentence)
  3. What's the core action โ€” the single thing users do most?
  4. List your 3 MVP features.
  5. Name 2 apps that inspired the design.
  6. Primary color or palette?
  7. Light mode, dark mode, or both?
  8. Any hard technical constraints or integrations needed?
  9. What does success look like at 90 days?
  10. What's the one risk you're most worried about?

PRD

Documenting the "What" and "Why".

1. Overview: Pitch, problem, vision.

2. Metrics: North Star Metric + KPIs.

3. MVP: Feature stories and priorities.

4. Flows: Onboarding and Core Action paths.

Design Brief

Visual and interaction direction for the AI to follow when building the UI.

Direction

Vibe, References, Palette, Typography.

Patterns

Navigation, Component radius, Inputs.

Tech Spec

The engineering blueprint. Defines stack, schema, and infrastructure so the AI doesn't guess.

1. Architecture: Frontend, Backend, Integrations.

2. Database: Schema, RLS policies.

3. Infrastructure: Session management, CI/CD.

Pre-Launch Checklist

Phase 1: Development Completeness

Core Features

All MVP features from PRD are implemented
All Must-Have user stories pass acceptance criteria
No known critical bugs or crashes
Edge cases handled: empty states, errors, no internet

User Flows

Onboarding flow complete and tested
Core action flow complete and tested on real device
New user can reach core value within 5 minutes

Phase 2: Technical Quality

Performance

App launches in under 3 seconds on a mid-range device
No memory leaks
Lists scroll smoothly at 60fps
App works on slow 3G connection

Error Handling

All API calls have error handling
User-facing error messages are helpful, not raw errors
App recovers gracefully from network loss
App handles auth token expiry without crashing

Data & Storage

No sensitive data stored insecurely
Data persists correctly across app restarts
Database migrations tested on fresh install

Phase 3: Security

All API keys are in environment variables, not in code
No secrets committed to git
Row-level security (RLS) enabled on all database tables
RLS tested โ€” users cannot access other users' data
File uploads validated server-side (type, size, content)
HTTPS enforced for all API calls
No sensitive data logged to console in production

Phase 4: Design & UX

Visual Polish

All screens match Design Brief
No placeholder text, dummy data, or "TODO" strings in UI
Icons consistent (same library, size, weight)
Color contrast meets WCAG AA (4.5:1 for text)

Platform Feel

Loading states in place for all async operations
Empty states designed and in place (not blank screens)
Keyboard handling tested โ€” inputs not hidden by keyboard

Accessibility

All interactive elements have accessibility labels
Touch targets are minimum 44ร—44pt
Screen reader tested

Phase 5: Content & Copy

No lorem ipsum or placeholder text
App name consistent everywhere
Onboarding copy is clear and compelling
Error messages are human-readable
Empty state copy tells user what to do next
Privacy policy written and linked in-app
Terms of service written and linked in-app

Phase 6: App Store Preparation

Assets

App icon: 1024ร—1024px, no transparency, no rounded corners
All screenshot sizes prepared (iPhone 6.9", 6.7", 6.5", 5.5")
Android screenshots: 1080ร—1920 minimum

Metadata

App name written (30 chars max for App Store)
Description written (4000 chars max โ€” first 3 lines appear above fold)
Keywords entered (100 chars, comma-separated)
Age rating questionnaire completed
Privacy policy URL provided

App Store Connect (iOS)

Bundle ID registered
Certificates and provisioning profiles configured
TestFlight beta completed (minimum 5 external testers)

Google Play (Android)

Internal testing track released
Content rating questionnaire completed
Data safety form completed

Phase 7: Analytics & Monitoring

Analytics SDK integrated (PostHog / Mixpanel / etc.)
Error tracking integrated (Sentry)
Dashboard created for North Star Metric

Minimum events to track at launch

app_opened
onboarding_completed
user_signed_up
user_logged_in
[core_action]_completed
error_occurred (with error type)

Phase 8: Beta Testing

Minimum 5 real users tested the full onboarding flow
All critical feedback addressed or triaged
Crash-free rate above 99% in TestFlight

Phase 9: Launch Day

T-7 days

Submit to App Store review
Prepare launch announcement copy

T-1 day

Verify all store listings are correct
Confirm analytics and error tracking are live

Launch day

Monitor crash-free rate in real time
Post announcement

Post-launch (Week 1)

Review first-week analytics against success criteria
Respond to all early App Store reviews
Triage and prioritize bug reports

Phase 10: Post-Launch Health Check

North Star Metric trending in the right direction
Retention: % of users returning after day 1, 7, 30
User interviews scheduled with early adopters
Backlog reprioritized based on real usage data

Provide Feedback

How can we make this kit better? Your feedback helps the community.