Visual Workflow Pipeline

Vibe Workflow
Diagram

This page is the visual map of the process: a stage-by-stage diagram showing how research, PRDs, technical design, agent setup, and export hand off into one another.

Workflow DiagramStage HandoffsAI Planning Pipeline

Interactive Pipeline Diagram

Use the diagram to understand the handoffs, then jump to the matching resource for any stage

Workflow Phases

The pipeline organized by development phase

Discovery

Validate your idea with AI-powered market research

1. Research

Definition

Create comprehensive product and technical specifications

2. PRD
3. Tech Design

Configuration

Generate AI agent configurations for your coding tools

4. Agent Config

Delivery

Download your complete project kit

5. Export

Why Use a Structured Pipeline?

Faster Development

Complete your planning phase in under 30 minutes instead of days

Better AI Context

Each stage builds context that makes AI coding assistants more effective

Consistent Output

Standardized artifacts work across Cursor, Windsurf, Copilot, and more

Stage Documentation

Detailed inputs, outputs, and integrations for each stage

01
Stage 01

Deep Research

AI-powered market research using Google Search Grounding. Validates your idea against real-time market data.

Inputs
  • App idea description
  • Target audience
  • Problem statement
Outputs
  • Market analysis
  • Competitor insights
  • Risk assessment
  • Feasibility report
Works with
Gemini APIOpenAI APIClaude API
Go to Deep Research
02
Stage 02

PRD Generation

Generate comprehensive PRDs tailored to your experience level and project scope.

Inputs
  • Research insights
  • User persona
  • Feature requirements
Outputs
  • PRD document
  • User stories
  • Acceptance criteria
  • Success metrics
Works with
Gemini APIOpenAI APIClaude API
Go to PRD Generation
03
Stage 03

Technical Design

Create detailed technical specs including database schemas, API endpoints, and component architecture.

Inputs
  • PRD document
  • Tech preferences
  • Deployment target
Outputs
  • Tech spec
  • Database schema
  • API design
  • Component tree
Works with
Gemini APIOpenAI APIClaude API
Go to Technical Design
04
Stage 04

Agent Configuration

Generate the 'Universal Brain' (AGENTS.md) and tool-specific configurations for AI coding assistants.

Inputs
  • All previous artifacts
  • Tool preferences
  • Coding standards
Outputs
  • AGENTS.md
  • .cursorrules
  • Windsurf config
  • Claude settings
Works with
CursorWindsurfCopilotClineAider
Go to Agent Configuration
05
Stage 05

Export & Deploy

Download your complete project kit with all artifacts bundled and ready for your AI coding assistant.

Inputs
  • All generated artifacts
  • Export preferences
Outputs
  • ZIP bundle
  • Setup instructions
  • IDE configs
  • README.md
Works with
VS CodeCursor IDETerminal
Go to Export & Deploy

Automation Tool Integrations

Configs generated for all major AI coding tools

Cursor

AI-first code editor with deep context understanding

.cursorrules

Windsurf

Next-gen IDE with autonomous AI agents

windsurf.config.js

GitHub Copilot

AI pair programmer from GitHub

.github/copilot.md

Cline

Autonomous coding agent for VS Code

.clinerules

Aider

AI pair programming in your terminal

.aider.conf.yml

Claude Code

Anthropic's AI assistant with code expertise

CLAUDE.md

Pipeline Best Practices

Sequential Processing

Each stage builds on the previous. Complete steps in order for best results.

Iterative Refinement

You can go back and regenerate any stage. Changes cascade to dependent stages.

Context Accumulation

The more detail you provide in earlier stages, the better your final output.

Tool Agnostic

AGENTS.md works across all AI coding tools. Use whichever IDE you prefer.

Related Resources

Prompt Templates

Use the prompt templates when you want the raw research, PRD, tech design, and agent instructions outside the app.

Browse the templates →

Coding Workflow Guide

Read the long-form explanation when you want the educational reasoning behind the diagram, not just the stage map.

Read the workflow article →

Ready to Map the Pipeline?

Review the stages first, then jump into the matching templates, skills, and guides for each handoff.

Cookie Preferences

We use analytics to understand how our app is used and improve your experience. Your API keys and project data are always stored locally and never shared. Privacy Policy