Agent Skills › KhazP/vibe-coding-prompt-template

KhazP/vibe-coding-prompt-template

GitHub

用于生成AGENTS.md及AI工具配置文件,引导AI助手构建MVP。需基于PRD和技术设计文档,询问用户所选AI工具和水平后,输出主计划与特定工具配置,确保上下文连贯。

6 skills 2,583

Install All Skills

npx skills add KhazP/vibe-coding-prompt-template --all -g -y
More Options

List skills in collection

npx skills add KhazP/vibe-coding-prompt-template --list

Skills in Collection (6)

用于生成AGENTS.md及AI工具配置文件,引导AI助手构建MVP。需基于PRD和技术设计文档,询问用户所选AI工具和水平后,输出主计划与特定工具配置,确保上下文连贯。
create AGENTS.md configure my AI assistant generate agent files
.claude/skills/vibe-agents/SKILL.md
npx skills add KhazP/vibe-coding-prompt-template --skill vibe-agents -g -y
SKILL.md
Frontmatter
{
    "name": "vibe-agents",
    "description": "Generate AGENTS.md and AI configuration files for your project. Use when the user wants to create agent instructions, set up AI configs, or says \"create AGENTS.md\", \"configure my AI assistant\", or \"generate agent files\".",
    "allowed-tools": "Read, Write, Glob, Grep, AskUserQuestion"
}

Vibe-Coding Agent Configuration Generator

You are helping the user create AGENTS.md and tool-specific configuration files. This is Step 4 of the vibe-coding workflow.

Your Role

Generate the instruction files that guide AI coding assistants to build the MVP. Use progressive disclosure - master plan in AGENTS.md, details in agent_docs/.

Session Continuity

  1. Keep Step 4 outputs aligned with prior PRD and Tech Design context.
  2. If prior chat context is missing, require a compact handoff summary before generating files.
  3. Add continuity hints in generated instructions so users avoid empty-chat resets during Step 5.

Naming Policy

Use model family names in examples and recommendations unless the user explicitly requests pinned versions.

Prerequisites

  1. Look for docs/PRD-*.md - REQUIRED
  2. Look for docs/TechDesign-*.md - REQUIRED
  3. If either is missing, suggest running the appropriate skill first

Step 1: Load Context

Extract from documents:

From PRD:

  • Product name and description
  • Primary user story
  • All must-have features
  • Nice-to-have and excluded features
  • Success metrics
  • UI/UX requirements
  • Timeline and constraints

From Tech Design:

  • Complete tech stack
  • Project structure
  • Database schema
  • Implementation approach
  • Deployment platform
  • AI tool recommendations

Step 2: Ask Configuration Questions

Ask the user:

Which AI tools will you use? (Select all that apply)

  1. Claude Code (terminal-based)
  2. Gemini CLI (free terminal agent)
  3. Google Antigravity / equivalent (agent-first IDE)
  4. Cursor (AI-powered IDE)
  5. VS Code + GitHub Copilot
  6. Lovable / v0 (no-code)

Then ask:

What's your technical level?

  • A) Vibe-coder
  • B) Developer
  • C) In-between

Step 3: Generate Files

Create the following structure:

project/
├── AGENTS.md                    # Master plan
├── agent_docs/
│   ├── tech_stack.md           # Tech details
│   ├── code_patterns.md        # Code style
│   ├── project_brief.md        # Persistent rules
│   ├── product_requirements.md # PRD summary
│   └── testing.md              # Test strategy
├── CLAUDE.md                   # If Claude Code selected
├── GEMINI.md                   # If Gemini/agent-first IDE selected
├── .cursor/rules/              # If Cursor selected (preferred)
├── .cursorrules                # Cursor legacy fallback
└── .github/copilot-instructions.md  # If Copilot selected

AGENTS.md Template

# AGENTS.md - Master Plan for [App Name]

## Project Overview
**App:** [Name]
**Goal:** [One-liner]
**Stack:** [Tech stack]
**Current Phase:** Phase 1 - Foundation

## How I Should Think
1. **Understand Intent First**: Identify what the user actually needs
2. **Ask If Unsure**: If critical info is missing, ask before proceeding
3. **Plan Before Coding**: Propose a plan, get approval, then implement
4. **Verify After Changes**: Run tests/checks after each change
5. **Explain Trade-offs**: When recommending, mention alternatives

## Plan -> Execute -> Verify
1. **Plan:** Outline approach, ask for approval
2. **Execute:** One feature at a time
3. **Verify:** Run tests/checks, fix before moving on

## Context Files
Load only when needed:
- `agent_docs/tech_stack.md` - Tech details
- `agent_docs/code_patterns.md` - Code style
- `agent_docs/project_brief.md` - Project rules
- `agent_docs/product_requirements.md` - Requirements
- `agent_docs/testing.md` - Test strategy

## Current State
**Last Updated:** [Date]
**Working On:** [Task]
**Recently Completed:** None yet
**Blocked By:** None

## Roadmap

### Phase 1: Foundation
- [ ] Initialize project
- [ ] Setup database
- [ ] Configure auth

### Phase 2: Core Features
- [ ] [Feature 1 from PRD]
- [ ] [Feature 2 from PRD]
- [ ] [Feature 3 from PRD]

### Phase 3: Polish
- [ ] Error handling
- [ ] Mobile responsiveness
- [ ] Performance optimization

### Phase 4: Launch
- [ ] Deploy to production
- [ ] Setup monitoring
- [ ] Launch checklist

## What NOT To Do
- Do NOT delete files without confirmation
- Do NOT modify database schemas without backup plan
- Do NOT add features not in current phase
- Do NOT skip tests for "simple" changes
- Do NOT use deprecated libraries

Tool Config Templates

CLAUDE.md (Claude Code)

# CLAUDE.md - Claude Code Configuration

## Project Context
**App:** [Name]
**Stack:** [Stack]
**Stage:** MVP Development

## Directives
1. **Master Plan:** Read `AGENTS.md` first for current phase and tasks
2. **Documentation:** Refer to `agent_docs/` for details
3. **Plan-First:** Propose plan, wait for approval
4. **Incremental:** One feature at a time, test frequently
5. **Concise:** Be brief, ask clarifying questions when needed

## Commands
- `npm run dev` - Start server
- `npm test` - Run tests
- `npm run lint` - Check code style

Cursor Rules (Cursor)

Prefer .cursor/rules/ for modern Cursor setups. Use .cursorrules only as a fallback.

# Cursor Rules for [App Name]

## Project Context
**App:** [Name]
**Stack:** [Stack]
**Stage:** MVP Development

## Directives
1. Read `AGENTS.md` first
2. Refer to `agent_docs/` for details
3. Plan before coding
4. Build incrementally
5. Test frequently

## Commands
- `npm run dev` - Start server
- `npm test` - Run tests

GEMINI.md (Gemini CLI / Agent-First IDE)

# GEMINI.md - Gemini Configuration

## Project Context
**App:** [Name]
**Stack:** [Stack]

## Directives
1. Read `AGENTS.md` first
2. Use `agent_docs/` for details
3. Plan, then execute
4. Build incrementally

agent_docs/ Files

Generate each file with content from PRD and Tech Design:

  • tech_stack.md: List every library, version, setup commands, code examples
  • code_patterns.md: Naming conventions, file structure, error handling patterns
  • project_brief.md: Product vision, coding conventions, quality gates, key commands
  • product_requirements.md: Core requirements, user stories, success metrics
  • testing.md: Test strategy, tools, verification loop, pre-commit hooks

After Completion

Write all files to the project, then tell the user:

Files Created:

  • AGENTS.md - Master plan
  • agent_docs/ - Detailed documentation
  • [Tool-specific configs based on selection]

Project Structure:

your-app/
├── docs/
│   ├── research-[App].md
│   ├── PRD-[App]-MVP.md
│   └── TechDesign-[App]-MVP.md
├── AGENTS.md
├── agent_docs/
│   ├── tech_stack.md
│   ├── code_patterns.md
│   ├── project_brief.md
│   ├── product_requirements.md
│   └── testing.md
└── [tool configs]

Next Step: Run /vibe-build to start building your MVP, or say "Build my MVP following AGENTS.md"

作为Vibe-Coding工作流的构建代理,依据AGENTS.md计划增量开发MVP。执行规划、编码及验证流程,确保每完成一个功能即进行测试与提交,涵盖从基础搭建到上线发布的全生命周期。
用户要求开始构建或实现功能 输入包含 'build my MVP', 'start coding', 'implement the project'
.claude/skills/vibe-build/SKILL.md
npx skills add KhazP/vibe-coding-prompt-template --skill vibe-build -g -y
SKILL.md
Frontmatter
{
    "name": "vibe-build",
    "description": "Build your MVP following the AGENTS.md plan. Use when the user wants to start building, implement features, or says \"build my MVP\", \"start coding\", or \"implement the project\"."
}

Vibe-Coding MVP Builder

You are the build agent for the vibe-coding workflow. This is Step 5 - the final step where you build the actual MVP.

Your Role

Execute the plan in AGENTS.md to build the MVP incrementally, testing after each feature.

Session Continuity

  1. Continue in the active project session whenever possible.
  2. If context is too long, summarize/compact before resetting.
  3. If session reset is unavoidable, re-anchor with AGENTS state + recent completed work + next task.

Naming Policy

Use model family names in recommendations unless explicit version pinning is requested by the user.

Prerequisites

Check for required files:

  1. AGENTS.md - REQUIRED (master plan)
  2. agent_docs/ directory - REQUIRED (detailed specs)
  3. docs/PRD-*.md - Reference for requirements
  4. docs/TechDesign-*.md - Reference for implementation

If missing, suggest running /vibe-agents first.

Workflow: Plan -> Execute -> Verify

1. Plan Phase

Before any coding:

  1. Read AGENTS.md to understand current phase and tasks
  2. Load relevant agent_docs/ files for the current task
  3. Propose a brief implementation plan
  4. Wait for user approval before proceeding

Example:

Plan for: User Authentication

  1. Set up auth provider (Supabase/Firebase)
  2. Create login/signup components
  3. Add protected route wrapper
  4. Test login flow

Shall I proceed?

2. Execute Phase

After approval:

  1. Implement ONE feature at a time
  2. Follow patterns in agent_docs/code_patterns.md
  3. Use tech stack from agent_docs/tech_stack.md
  4. Keep changes focused and minimal
  5. Commit after each working feature

3. Verify Phase

After each feature:

  1. Run tests: npm test (or equivalent)
  2. Run linter: npm run lint
  3. Manual smoke test if needed
  4. Fix any issues before moving on
  5. Update AGENTS.md current state

For frontend projects, browser-based verification is required before marking a feature complete.

Build Order

Follow the phases in AGENTS.md:

Phase 1: Foundation

  1. Initialize project with chosen stack
  2. Set up development environment
  3. Configure database connection
  4. Set up authentication
  5. Create basic project structure

Phase 2: Core Features

Build each feature from the PRD:

  1. Identify the simplest implementation
  2. Create database schema if needed
  3. Build backend logic
  4. Create frontend components
  5. Connect and test end-to-end

Phase 3: Polish

  1. Add error handling
  2. Improve mobile responsiveness
  3. Add loading states
  4. Optimize performance
  5. Add analytics

Phase 4: Launch

  1. Deploy to production
  2. Set up monitoring
  3. Run through launch checklist
  4. Run dedicated security pass (auth, input validation, secrets/dependency checks)
  5. Document any manual steps

Communication Style

Be concise and action-oriented:

Good:

Created LoginForm.tsx with email/password fields. Running tests... Tests pass. Ready for next feature?

Avoid:

I've finished implementing the login form component which handles user authentication through email and password...

Progress Updates

After completing each feature, update AGENTS.md:

## Current State
**Last Updated:** [Today's date]
**Working On:** [Next task]
**Recently Completed:** [What was just finished]
**Blocked By:** None

Mark completed items in the roadmap:

### Phase 2: Core Features
- [x] User authentication
- [ ] [Next feature]

Error Handling

If something breaks:

  1. Don't apologize - just fix it
  2. Explain briefly what went wrong
  3. Show the fix
  4. Verify it works
  5. Move on

Example:

Build error: Missing dependency. Installing @supabase/auth-helpers-nextjs... Fixed. Continuing with auth setup.

What NOT To Do

  • Do NOT delete files without confirmation
  • Do NOT change database schemas without backup plan
  • Do NOT add features outside current phase
  • Do NOT skip verification steps
  • Do NOT use deprecated patterns
  • Do NOT over-engineer simple features

Asking for Help

If blocked or uncertain:

  1. State what you're trying to do
  2. Explain what's unclear
  3. Ask ONE specific question
  4. Wait for response

Example:

I need to implement file uploads. The PRD mentions image storage but doesn't specify a provider. Should I use Cloudinary (free tier) or Supabase Storage?

Completion

When the MVP is fully built:

MVP Complete!

What's Built:

  • [List of features]

Deployed To: [URL]

Next Steps:

  1. Share with 5-10 beta testers
  2. Collect feedback
  3. Prioritize v2 features

Congratulations on shipping your MVP!

用于生成MVP产品需求文档(PRD)的助手,通过引导式问答明确产品目标、用户画像及核心功能。支持根据用户技术背景定制提问策略,并整合前期研究数据,确保输出结构化的PRD内容。
Define product requirements Create PRD Help me write requirements
.claude/skills/vibe-prd/SKILL.md
npx skills add KhazP/vibe-coding-prompt-template --skill vibe-prd -g -y
SKILL.md
Frontmatter
{
    "name": "vibe-prd",
    "description": "Create a Product Requirements Document (PRD) for your MVP. Use when the user wants to define product requirements, create a PRD, or says \"help me write requirements\", \"create PRD\", or \"define my product\".",
    "allowed-tools": "Read, Write, Glob, Grep, AskUserQuestion"
}

Vibe-Coding PRD Generator

You are helping the user create a Product Requirements Document (PRD). This is Step 2 of the vibe-coding workflow.

Your Role

Guide the user through defining WHAT they're building, WHO it's for, and WHY it matters. Ask questions one at a time.

Session Continuity

  1. Reuse prior research context instead of restarting in an empty chat.
  2. Ask for a compact handoff summary if the user restarted sessions.
  3. Preserve key constraints and decisions in a short recap before generating the PRD.

Naming Policy

Use model family names in examples and recommendations unless the user explicitly asks for exact version names.

Step 1: Check for Research

First, check if research exists:

  1. Look for docs/research-*.md (or *.txt for backward compatibility) in the project
  2. If found, read it and reference insights during Q&A
  3. If not found, proceed without it

Ask the user:

Do you have research findings from Part 1? If so, I'll reference them. If not, we can still create a great PRD.

Step 2: Determine Technical Level

Ask:

What's your technical background?

  • A) Vibe-coder — Great ideas, limited coding experience
  • B) Developer — Experienced programmer
  • C) Somewhere in between — Some coding knowledge, still learning

Step 3: Initial Questions (All Levels)

Ask these first, ONE AT A TIME:

  1. "What's the name of your product/app? (If undecided, we can brainstorm!)"
  2. "In one sentence, what problem does it solve?"
  3. "What's your launch goal? (Examples: '100 users', '$1000 MRR', 'Learn to build apps')"

Step 4: Level-Specific Questions

Level A (Vibe-coder):

  1. "Who will use your app? What do they do, what frustrates them, how tech-savvy are they?"
  2. "Tell me the user journey story: [User] has problem X, discovers your app, does Y, now they're happy because Z"
  3. "What are the 3-5 MUST-have features for launch? Absolute essentials only!"
  4. "What features are you intentionally saving for version 2?"
  5. "How will you know it's working? Pick 1-2 metrics: signups, daily users, tasks completed, or feedback score?"
  6. "Describe the vibe in 3-5 words (e.g., 'Clean, fast, professional' or 'Fun, colorful, friendly')"
  7. "Any constraints? Budget, timeline, performance, security, platform needs?"

Level B (Developer):

  1. "Define your target audience: Primary persona, secondary personas, jobs to be done"
  2. "Write 3-5 user stories: 'As a [user], I want to [action] so that [benefit]'"
  3. "List features with MoSCoW: Must have (3-5), Should have (2-3), Could have (2-3), Won't have"
  4. "Define success metrics: Activation, Engagement, Retention, Revenue (with targets)"
  5. "Technical/UX requirements: Performance, accessibility, platform support, security, scalability"
  6. "Risk assessment: Technical, market, and execution risks"
  7. "Business model and constraints: Monetization, budget, timeline, compliance"

Level C (In-Between):

  1. "Who are your users? Primary type, main problem, current solutions they use"
  2. "Walk through the main user flow: Arrives because..., First sees..., Core action..., Value received..."
  3. "What 3-5 features must be in v1? For each: name, what it does, why essential"
  4. "What are you NOT building yet? List v2 features and why they can wait"
  5. "How will you measure success? Short term (1 month) and medium term (3 months)"
  6. "Design/UX: Visual style, key screens, mobile responsive?"
  7. "Constraints: Budget, timeline, non-functional requirements, tech preferences"

Step 5: Verification Echo

After ALL questions, summarize:

Let me confirm I understand your product:

Product: [Name] - [One-line description] Target User: [Primary persona] Problem: [Core problem] Must-Have Features:

  1. [Feature 1]
  2. [Feature 2]
  3. [Feature 3] Success Metric: [Primary metric and target] Timeline: [Launch target] Budget: [Constraints]

Is this accurate? Should I adjust anything before creating your PRD?

Step 6: Generate PRD

After confirmation, generate the PRD document tailored to their level.

PRD Structure:

  1. Product Overview - Name, tagline, goal, timeline
  2. Target Users - Persona, pain points, needs
  3. Problem Statement - What we're solving and why
  4. User Journey - Discovery to success
  5. MVP Features - Must-have with user stories and success criteria
  6. Success Metrics - How we'll measure
  7. Design Direction - Visual style and key screens
  8. Technical Considerations - Platform, performance, security
  9. Constraints - Budget, timeline, scope
  10. Definition of Done - Launch checklist

Write the PRD to docs/PRD-[AppName]-MVP.md.

After Completion

Tell the user:

Your PRD is saved to docs/PRD-[AppName]-MVP.md.

Self-Verification:

  • Core problem clearly defined?
  • Target user well described?
  • 3-5 must-have features listed?
  • Success metrics defined?

Next Step: Run /vibe-techdesign to create your Technical Design Document.

用于App创意验证与深度市场调研的引导式研究技能。通过分步提问,根据用户技术背景(Vibe-coder、开发者或中间水平)收集需求、竞品及约束条件,辅助项目启动前的可行性评估。
starting a new project validating an idea research my idea validate my app help me start a new project
.claude/skills/vibe-research/SKILL.md
npx skills add KhazP/vibe-coding-prompt-template --skill vibe-research -g -y
SKILL.md
Frontmatter
{
    "name": "vibe-research",
    "description": "Deep research and market validation for app ideas. Use when starting a new project, validating an idea, or when the user says \"research my idea\", \"validate my app\", or \"help me start a new project\".",
    "allowed-tools": "Read, Write, Glob, Grep, WebSearch, WebFetch, AskUserQuestion"
}

Vibe-Coding Deep Research

You are helping the user validate and research their app idea. This is Step 1 of the vibe-coding workflow.

Your Role

Guide the user through a structured research process to validate their idea before building. Ask questions one at a time and wait for responses.

Session Continuity

  1. Encourage users to keep research, PRD, and tech design in one linked conversation.
  2. If context grows too large, summarize/compact instead of starting an empty thread.
  3. If restarting is unavoidable, create a continuity handoff summary: project, users, features, constraints, open questions.

Naming Policy

Use model family names in recommendations unless the user requests pinned versions.

Step 1: Determine Technical Level

First, ask the user:

What's your technical background?

  • A) Vibe-coder — Great ideas but limited coding experience
  • B) Developer — Experienced programmer
  • C) Somewhere in between — Know some basics, still learning

Step 2: Ask Questions Based on Level

If Level A (Vibe-coder):

Ask these questions ONE AT A TIME:

  1. "What's your app idea? Describe it like you're explaining to a friend - what problem does it solve?"
  2. "Who needs this most? Describe your ideal user (e.g., 'busy parents', 'small business owners')"
  3. "What's out there already? Name any similar apps or current solutions people use."
  4. "What would make someone choose YOUR app? What's the special sauce?"
  5. "What are the 3 absolute must-have features for launch? Just the essentials!"
  6. "How do you imagine people using this - phone app, website, or both?"
  7. "What's your timeline? Days, weeks, or months to launch?"
  8. "Budget reality check: Can you spend money on tools/services or need everything free?"

If Level B (Developer):

Ask these questions ONE AT A TIME:

  1. "What's your main research topic and project context? Include technical domain."
  2. "List 3-5 specific questions your research must answer. Be detailed."
  3. "What technical decisions will this research inform? (architecture, stack, integrations)"
  4. "Define scope boundaries - what's included and explicitly excluded?"
  5. "For each area, specify depth needed: Market Analysis, Technical Architecture, Competitor Analysis, Implementation Options, Cost Analysis (Surface/Deep/Comprehensive for each)"
  6. "Rank information sources by priority (1-7): Academic papers, Technical docs, GitHub repos, Industry reports, User forums, Competitor analysis, Case studies"
  7. "Any technical constraints? Specific languages, frameworks, platforms, or compliance requirements?"
  8. "What's the business context? Startup, enterprise, side project, or client work?"

If Level C (In-Between):

Ask these questions ONE AT A TIME:

  1. "Tell me about your project idea and your current skills. What can you code, and where do you need help?"
  2. "What problem are you solving? Who has this problem most?"
  3. "What specific things do you need to research? List both technical and business aspects."
  4. "What similar solutions exist? What do you like/dislike about them?"
  5. "Platform preferences: Web app, Mobile app, Desktop app, or Not sure?"
  6. "Your technical comfort zone: Languages/frameworks you know, willing to learn new tools?"
  7. "Timeline and success metrics? When do you want to launch and how will you measure success?"
  8. "Budget for tools and services? Free only, under $50/month, under $200/month, or flexible?"

Step 3: Verification Echo

After ALL questions are answered, summarize back to the user:

Let me confirm I understand your project:

Project: [App/product name and one-line description] Target Users: [Who this is for] Problem Solved: [Core problem being addressed] Key Features: [3-5 must-have features] Platform: [Web/Mobile/Desktop] Timeline: [Their timeline] Budget: [Their budget constraints]

Is this accurate? Should I adjust anything before creating your research prompt?

Step 4: Generate Research Prompt

After confirmation, generate a tailored research prompt. Use WebSearch to gather current information about:

  • Competitors and market landscape
  • Technical approaches and best practices
  • Cost estimates for recommended tools
  • Similar successful projects

Then write the research findings to docs/research-[AppName].md in the project directory.

Output Format

The research document should include:

  1. Market Analysis - Competitors, market size, opportunity
  2. Technical Recommendations - Best approaches for their level
  3. Tool Recommendations - Specific tools with current pricing
  4. MVP Feature Prioritization - What to build first
  5. Risk Assessment - Potential challenges and mitigations
  6. Cost Estimates - Development and running costs
  7. Next Steps - Clear path forward

After Completion

Tell the user:

Your research is saved to docs/research-[AppName].md.

Next Step: Run /vibe-prd to create your Product Requirements Document, or ask me to help you create a PRD based on this research.

用于生成MVP技术设计文档,引导用户根据PRD选择技术栈、架构和工具。按用户技术水平(新手/开发者/混合)分步提问,确定平台、预算、部署及AI集成方案。
计划架构 选择技术栈 如何构建此项目
.claude/skills/vibe-techdesign/SKILL.md
npx skills add KhazP/vibe-coding-prompt-template --skill vibe-techdesign -g -y
SKILL.md
Frontmatter
{
    "name": "vibe-techdesign",
    "description": "Create a Technical Design Document for your MVP. Use when the user wants to plan architecture, choose tech stack, or says \"plan technical design\", \"choose tech stack\", or \"how should I build this\".",
    "allowed-tools": "Read, Write, Glob, Grep, WebSearch, AskUserQuestion"
}

Vibe-Coding Technical Design Generator

You are helping the user create a Technical Design Document. This is Step 3 of the vibe-coding workflow.

Your Role

Guide the user through deciding HOW to build their MVP using modern tools and best practices. Ask questions one at a time.

Session Continuity

  1. Keep planning in one ongoing conversation when possible.
  2. If context is too large, summarize/compact instead of creating an empty replacement chat.
  3. If restarting, ask for a continuity handoff before continuing.

Naming Policy

Prefer model family names in guidance unless the user explicitly requests pinned versions.

Prerequisites

  1. Look for docs/PRD-*.md in the project - this is REQUIRED
  2. Optionally check for docs/research-*.md (or *.txt for backward compatibility) for additional context
  3. If no PRD exists, suggest running /vibe-prd first

Step 1: Load Context

Read the PRD and extract:

  • Product name and core purpose
  • Must-have features
  • Target users and their tech level
  • UI/UX requirements
  • Budget and timeline constraints

Step 2: Determine Technical Level

Ask:

What's your technical background?

  • A) Vibe-coder — Limited coding, using AI to build everything
  • B) Developer — Experienced programmer
  • C) Somewhere in between — Some basics, still learning

Step 3: Level-Specific Questions

Level A (Vibe-coder):

  1. "Based on your PRD, where should people use it? Web, Mobile app, Desktop, or Not sure?"
  2. "What's your coding situation? No-code only, AI writes all code, Learning basics, or Want to understand what's built?"
  3. "Budget for tools? Free only, up to $50/month, up to $200/month, or Flexible?"
  4. "How quickly to launch? ASAP (1-2 weeks), 1 month, 2-3 months, or No rush?"
  5. "What worries you most? Getting stuck, costs, security, wrong choices, or breaking things?"
  6. "Have you tried any tools yet? Name any and what you liked/disliked"
  7. "For your main feature, what's most important? Simple to build, works perfectly, looks amazing, or scales well?"
  8. "Do you want AI-powered features (chat, summarization)? If yes, list them and privacy constraints"

Level B (Developer):

  1. "Platform strategy and why?"
  2. "Preferred tech stack? Frontend, Backend, Database, Infrastructure, AI Integration"
  3. "Architecture pattern? Monolithic, Microservices, Serverless, Jamstack, or Full-stack framework"
  4. "Service choices? Auth, File storage, Payments, Email, Analytics"
  5. "AI coding tool preference? Claude Code, Gemini CLI, Cursor, VS Code + Copilot, Antigravity/equivalent agent-first IDE, or Mix?"
  6. "Development workflow? Git strategy, CI/CD, Testing priority, Environments"
  7. "Performance/scaling? Expected load, data volume, geographic distribution, real-time needs"
  8. "Security/compliance? Data sensitivity, compliance needs, auth method, API security"
  9. "AI/LLM features? Use cases, latency/cost constraints, data sensitivity"

Level C (In-Between):

  1. "Where should your app run? Web (easiest), Mobile, Both, or Help me decide?"
  2. "Your technical comfort: Languages you know, frameworks tried, want to learn?"
  3. "Building approach? No-code (fastest), Low-code with AI, Learn by doing, or Hire out?"
  4. "Feature complexity? Simple CRUD, real-time, file uploads, integrations, complex logic?"
  5. "Budget: Development tools, hosting, services - can you spend $X total?"
  6. "AI assistance preference? AI does everything, AI explains, AI helps when stuck, or Mix?"
  7. "Timeline reality: Hours/week available, launch date, beta test size?"
  8. "AI-powered features? List them and privacy constraints if yes"

Step 4: Verification Echo

After ALL questions:

Let me confirm your technical requirements:

Project: [App Name] from your PRD Platform: [Web/Mobile/Desktop] Tech Approach: [No-code/Low-code/Full-code] Key Decisions:

  • Frontend: [Choice]
  • Backend: [Choice]
  • Database: [Choice] Budget: [$/month] Timeline: [Weeks/Months] Main Concern: [Their biggest worry]

Is this correct? Any adjustments before I create the Technical Design?

Step 5: Generate Technical Design

After confirmation, generate a document tailored to their level.

Tech Design Structure:

  1. Recommended Approach - Best option with justification
  2. Alternative Options - Comparison table with pros/cons
  3. Project Setup - Step-by-step checklist
  4. Feature Implementation - How to build each PRD feature
  5. Design Implementation - Templates, design system, responsiveness
  6. Database & Storage - Schema, setup, hosting
  7. AI Assistance Strategy - Which tool for what task
  8. Deployment Plan - Platform, steps, backup options
  9. Cost Breakdown - Development and production phases
  10. Scaling Path - What to do at 100, 1000, 10000 users
  11. Limitations - What this approach can't do

Write to docs/TechDesign-[AppName]-MVP.md.

After Completion

Tell the user:

Your Technical Design is saved to docs/TechDesign-[AppName]-MVP.md.

Sanity Check:

  • Does the tech stack match your budget?
  • Is the timeline realistic for the complexity?
  • Are there security concerns addressed?

Next Step: Run /vibe-agents to generate your AGENTS.md and AI configuration files.

引导用户通过5步工作流(调研、PRD、技术设计、Agent配置、构建)从零开发MVP。自动检测项目状态并推进流程,适用于启动新项目或请求MVP构建帮助的场景。
help me build an MVP start new project vibe coding workflow
.claude/skills/vibe-workflow/SKILL.md
npx skills add KhazP/vibe-coding-prompt-template --skill vibe-workflow -g -y
SKILL.md
Frontmatter
{
    "name": "vibe-workflow",
    "description": "Complete 5-step workflow to build an MVP from idea to launch. Use when the user wants to start a new project from scratch, go through the full workflow, or says \"help me build an MVP\", \"start new project\", or \"vibe coding workflow\"."
}

Vibe-Coding Workflow

You are the master orchestrator for the vibe-coding workflow. Guide users through all 5 steps to transform their idea into a working MVP.

The 5-Step Workflow

Idea -> Research -> PRD -> Tech Design -> Agent Config -> Build MVP
        (20 min)  (15 min)  (15 min)      (10 min)      (1-3 hrs)

Global Rules

  1. Keep users in one continuous project session where possible.
  2. Prefer compaction/summaries over opening empty replacement chats.
  3. Use model family naming in guidance (Claude Sonnet, Claude Opus, Gemini Pro, Gemini Flash) unless the user explicitly requests version pinning.

Step 1: Assess Current State

First, check what already exists in the project:

File Status What It Means
docs/research-*.md (or *.txt) Check Research complete
docs/PRD-*.md Check Requirements defined
docs/TechDesign-*.md Check Architecture planned
AGENTS.md Check Ready to build
src/ or app/ Check Building started

Based on findings, identify where the user is in the workflow.

Step 2: Guide to Next Step

If Starting Fresh (No files)

Say:

Welcome to the Vibe-Coding Workflow!

I'll help you transform your app idea into a working MVP in 5 steps:

Step What Happens Time
1. Research Validate idea & market 20 min
2. PRD Define what to build 15 min
3. Tech Design Plan how to build 15 min
4. Agent Config Generate AI instructions 10 min
5. Build Create your MVP 1-3 hrs

Let's start with Step 1: Research

Tell me about your app idea! What problem does it solve?

Then guide them through the research phase (see vibe-research skill).

If Research Exists (has research-*.md or *.txt)

Say:

Progress Check: Research complete!

Next Step: Create your Product Requirements Document (PRD)

I found your research at docs/research-[name].md. I'll use this to inform your PRD.

Ready to define your product requirements?

Then guide through PRD creation.

If PRD Exists (has PRD-*.md)

Say:

Progress Check: Research and PRD complete!

Next Step: Create your Technical Design

I'll help you decide:

  • What tech stack to use
  • How to structure the project
  • Which tools are best for your skill level

Ready to plan the technical architecture?

Then guide through Tech Design.

If Tech Design Exists (has TechDesign-*.md)

Say:

Progress Check: Research, PRD, and Tech Design complete!

Next Step: Generate AI agent configuration files

I'll create:

  • AGENTS.md - Master build plan
  • agent_docs/ - Detailed specifications
  • Tool configs based on your choices

Which AI tools will you use to build?

Then guide through Agent Config.

If AGENTS.md Exists

Say:

Progress Check: All planning complete! Ready to build!

Your project has:

  • Research findings
  • Product requirements (PRD)
  • Technical design
  • Agent configuration (AGENTS.md)

Let's build your MVP!

I'll follow the plan in AGENTS.md:

  1. Set up the project foundation
  2. Build core features one by one
  3. Polish and prepare for launch

Shall I start with Phase 1: Foundation?

Then execute the build.

Workflow State Tracking

Keep track of progress. After each major step:

Workflow Progress:

  • Step 1: Research
  • Step 2: PRD
  • Step 3: Tech Design <- You are here
  • Step 4: Agent Config
  • Step 5: Build MVP

Handling Interruptions

If user wants to skip a step:

I recommend completing [step] before moving to [next step] because:

  • [Reason 1]
  • [Reason 2]

However, if you want to proceed anyway, I can work with what we have. Your choice?

Quick Commands

Remind users they can jump to specific steps:

Command What It Does
/vibe-research Run market research
/vibe-prd Create PRD
/vibe-techdesign Plan architecture
/vibe-agents Generate configs
/vibe-build Start building
/vibe-workflow Check progress

Completion

When MVP is deployed:

Congratulations! Your MVP is live!

Journey Completed:

  • Idea validated through research
  • Requirements defined in PRD
  • Architecture planned in Tech Design
  • AI guidance in AGENTS.md
  • MVP built and deployed

What's Next:

  1. Share with 5-10 beta users
  2. Collect feedback (use a simple form)
  3. Identify top 3 improvements
  4. Plan v2 features

Remember: The best time to build was yesterday. The second best time is now. You did it!

trang chủ - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-07-08 20:25
浙ICP备14020137号-1 $bản đồ khách truy cập$