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.
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.
Download the script
Save init.sh into the folder where you want your project to live.
Open Terminal in that folder
Right-click the folder in Finder and select "New Terminal at Folder".
Run the script
Paste bash init.sh into Terminal and press Enter.
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
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.
Copy the Master Context
Click the button below. It bundles the interview guide and all four templates into one prompt.
Start a new AI chat and paste it
The AI will immediately begin the interview. Answer each section in your own words.
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.
Co-locate your files
Your PRD.md, DESIGN_BRIEF.md, and TECH_SPEC.md must live in the same folder as your code.
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.
Paste the Handoff Prompt
This tells the agent to read your docs, confirm understanding, and suggest where to start building.
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.
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.
- What does the app do? (1 sentence)
- Who is it for? (1 sentence)
- What's the core action โ the single thing users do most?
- List your 3 MVP features.
- Name 2 apps that inspired the design.
- Primary color or palette?
- Light mode, dark mode, or both?
- Any hard technical constraints or integrations needed?
- What does success look like at 90 days?
- 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
User Flows
Phase 2: Technical Quality
Performance
Error Handling
Data & Storage
Phase 3: Security
Phase 4: Design & UX
Visual Polish
Platform Feel
Accessibility
Phase 5: Content & Copy
Phase 6: App Store Preparation
Assets
Metadata
App Store Connect (iOS)
Google Play (Android)
Phase 7: Analytics & Monitoring
Minimum events to track at launch
Phase 8: Beta Testing
Phase 9: Launch Day
T-7 days
T-1 day
Launch day
Post-launch (Week 1)
Phase 10: Post-Launch Health Check
Provide Feedback
How can we make this kit better? Your feedback helps the community.