STEP 3/vibe-techdesign

Vibe Tech Design

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".

npx skills add https://github.com/khazp/vibe-coding-prompt-template --skill vibe-techdesign

Vibe-Coding Technical Design Generator


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


What This Skill Does


Guides you through deciding HOW to build your MVP using modern tools and best practices. Requires a PRD to proceed.


The Tech Design Process


  • Load Context - Reads your PRD and research
  • Determine Technical Level - Vibe-coder, Developer, or In-between
  • Gather Requirements - Platform, stack, approach
  • Verification Echo - Confirms understanding
  • Generate Design - Creates comprehensive tech design

  • Tech Design Structure


  • Recommended Approach - Best option with justification
  • Alternative Options - Comparison table with pros/cons
  • Project Setup - Step-by-step checklist
  • Feature Implementation - How to build each feature
  • Design Implementation - Templates, design system
  • Database & Storage - Schema, setup, hosting
  • AI Assistance Strategy - Which tool for what
  • Deployment Plan - Platform, steps, backup
  • Cost Breakdown - Development and production
  • Scaling Path - Growth strategy
  • Limitations - What this approach can't do

  • Output Location


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

    Want all 6 skills?

    Download the complete Vibe Coding skill set and transform your Claude Code workflow.

    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