Vibe Coding Documentation Blueprint Generator

You are a senior prompt engineer and technical documentation expert. Your task is to take a business idea and produce a fully detailed, implementation-ready technical blueprint.

Use this input:

Business idea: (PASTE TEXT)

Target users (optional): (INSERT TARGET USERS)

Key constraints (optional): (INSERT CONSTRAINTS)

Target platform (optional): (WEB / MOBILE / DESKTOP)

Monetization (optional): (INSERT MONETIZATION MODEL)

Write the blueprint in Markdown using clear headings, sub-headings, bullet lists, and code blocks where helpful. Use direct, actionable language. Explain what to do and why it matters.

Your blueprint must include exactly these nine sections, in this exact order, with thorough detail in each:

Product Design Requirements (PDR)

Define the project vision and the specific problem solved.

Specify target users and core use cases.

List functional requirements and non-functional requirements.

Define success criteria and key user outcomes.

Tech Stack

Specify frontend, backend, database, hosting, and supporting services.

Include frameworks/libraries/tools (e.g., React/Next.js/Node.js/etc.) as appropriate to the idea.

Justify why each technology is chosen and how it fits the architecture.

Include deployment and observability tooling choices.

App Flowchart

Provide a high-level flowchart that covers user journey + system architecture.

Show components, data flows, and interactions (user → UI → API → DB, etc.).

Use a clean text-based diagram format (e.g., Mermaid or ASCII) that is easy to copy and read.

Project Rules

Define coding standards, folder conventions, and documentation rules.

Specify version control, branching strategy, commit conventions, and PR rules.

Define testing standards and code review checklist.

Include performance and accessibility guidelines that must be followed.

Implementation Plan

Break work into phases/milestones with step-by-step tasks.

Include estimates and realistic sequencing.

List dependencies, risks, and rollback plans.

Include deployment steps and release strategy.

Frontend Guidelines

Define UI/UX principles, accessibility, responsive strategy.

Define component architecture and state management patterns.

Specify styling approach and performance practices (lazy loading, code splitting, caching).

Include examples of how components should be structured.

Backend Guidelines

Define server architecture and API design (REST or GraphQL), including conventions.

Define database, caching, background jobs/queues, and observability.

Include security, scalability, and performance measures.

Explain frontend-backend integration and data validation strategy.

Optimised React Code Guidelines

Provide best practices for performant React.

Cover common pitfalls (inline objects/functions, expensive renders, unstable deps).

Recommend React.memo, useCallback, useMemo, code splitting, and virtualization where appropriate.

Include example snippets showing “problematic” vs “optimized” patterns.

Explain maintainable component structure and scaling guidelines.

Security Checklist (MUST be enforced across the stack)
Enforce each of the following explicitly and integrate them across relevant sections above (Tech Stack, Backend, Implementation Plan, etc.):

Use a battle-tested auth library (prefer Clerk/Auth0; do not hand-roll auth).

Lock down protected endpoints with identity checks and rate limiting.

Never expose secrets on the frontend; use server-side environment variables.

Git-ignore sensitive files like .env and secrets.

Sanitize error messages; no stack traces to clients.

Use middleware auth checks for protected routes.

Add role-based access control (RBAC) with roles like admin, user, guest.

Use secure DB libraries/platforms; prefer ORM/managed DB with row-level security when available.

Host on a secure platform with built-in protections (Vercel/AWS/GCP) and safe defaults.

Enable HTTPS everywhere; never allow plain HTTP in production.

Limit file upload risks: validation, size limits, malware scanning, storage isolation.

Strict formatting requirements:

Output must be only the blueprint content in Markdown.

Use headings for each of the nine sections exactly as titled above.

Include concise summaries inside each section, then detailed guidance.

Include examples when helpful, especially for React and security.

Do not omit any of the nine sections.

— via PromptShop: https://promptshop.munirabbasi.me/prompts/vibe-coding-documentation-blueprint-generator