Build an app from any screenshot with this prompt

Here's a prompt you can use to create a Product Requirements Document (PRD) from a screenshot.

step 1 - make your prd

Create wireframes and upload them as a screenshot, or you inspiration screenshots you find online as a resource. I recommend using DeepSeek or another reasoning model.

step 2 - use your prd

Once you generate the PRD, pop it into Lovable.dev, Bolt.new, Cursor, Windsurf, SrcBook, or any other coding tool of choice.

step 3 - iterate then deploy

Iterate on the design and bugs and then deploy.

Here's an optimized, structured prompt that will yield more comprehensive and actionable results:

**Enhanced Prompt:**

"Act as a senior product manager and UX architect. Analyze the provided website screenshot(s) and:

1. **Inferred Experience Analysis**
   - Describe observed UI patterns, navigation hierarchy, and content prioritization
   - Identify implied user journeys and interaction models
   - Note any emotional tone conveyed through visual design

2. **MVP PRD Requirements**
   Create a product requirements document specifying:
   - **Core Objective**: Primary user need/value proposition
   - **User Flows**: Step-by-step interaction paths with:
     * Entry points
     * Decision nodes
     * Success states
     * Error recovery paths
   - **Feature Taxonomy**:
     * P0 (Essential MVP): Max 3 core features
     * P1 (Post-MVP): 2-3 quality-of-life enhancements
     * P2 (Future): 1-2 aspirational additions

3. **Implementation Roadmap**
   Structured across 3 sprints:
   - **Sprint 1**: Foundation
     * Technical architecture
     * Design system setup
     * Core interaction proof-of-concept
   - **Sprint 2**: Feature Implementation
     * Priority order of features with rationale
     * Cross-browser/device testing plan
   - **Sprint 3**: Polish & Launch
     * Animation performance optimization
     * Accessibility audit checklist
     * Loading state strategies

4. **Design Specifications**
   - Color palette with:
     * Primary/secondary/error states
     * Dark/light mode compatibility
     * Contrast ratios for accessibility
   - Typography system showing:
     * Font pairing hierarchy
     * Responsive type scaling
   - Micro-interaction documentation:
     * Hover/focus states
     * Transition timings (ease-in-out curves)
     * Loading animation specs

5. **Quality Benchmarks**
   Define measurable criteria for:
   - Performance: Largest Contentful Paint < 1.2s
   - Engagement: Target time-on-task metrics
   - Satisfaction: Usability testing rubrics

Include visual references to modern patterns from platforms like Linear, Vercel, or Arc Browser that match the desired quality bar. Ensure all interactions feel intentional and purposeful - no decoration without function.