AI UI Screenshot Generator for Portfolios

Generate AI prompts to create realistic UI mockups for portfolio case studies and presentations.

**Project Context:**
- Project type: SaaS analytics dashboard
- Industry: Fintech — transaction monitoring and reporting
- Device: Desktop web application (MacBook Pro frame)
- Design style: Modern minimal with data-dense layouts, subtle shadows, clean typography
- Key screens needed: Dashboard, transaction detail, settings, onboarding wizard, mobile responsive

**Generate Prompts for Each Screen:**

**1. Hero/Dashboard Screen:**
```
Realistic UI screenshot of a SaaS analytics dashboard Desktop web application (MacBook Pro frame) application, Modern minimal with data-dense layouts, subtle shadows, clean typography design, showing a dashboard with data cards, charts, and navigation sidebar, Navy (#1E293B), electric blue (#3B82F6), emerald (#10B981), white background color scheme, high fidelity mockup, professional UI design, sharp and crisp, realistic device frame, 4K quality
```

**2. Detail/Content Screen:**
```
[Prompt for an inner page showing detailed content, forms, or data tables]
```

**3. Mobile Responsive View:**
```
[Prompt for mobile version of the same app, showing responsive adaptation]
```

**4. Dark Mode Variant:**
```
[Prompt for the same screen in dark mode with proper contrast and accessibility]
```

**5. Empty/Onboarding State:**
```
[Prompt for the first-time user experience with onboarding guidance]
```

**6. Notification center with alert categories and action items:**
```
[Custom screen prompt]
```

**Device Framing Options:**
Generate each screen in these contexts:
- **Clean screenshot** — no device frame, just the UI
- **Device mockup** — inside a realistic Desktop web application (MacBook Pro frame) frame
- **Lifestyle context** — device on a desk, in hand, in meeting context
- **Multi-device** — responsive showcase across laptop, tablet, mobile

**Portfolio Presentation Layouts:**
Design prompts for case study presentations:

**Layout A — Hero Shot:**
```
[Single large mockup with dramatic angle and shadow]
```

**Layout B — Feature Grid:**
```
[Multiple screens arranged in a grid showing feature variety]
```

**Layout C — Flow Sequence:**
```
[3-5 screens showing a user journey from start to completion]
```

**Consistency Rules:**
- Use the SAME Navy (#1E293B), electric blue (#3B82F6), emerald (#10B981), white background across all screens
- Maintain consistent typography sizing and spacing
- Navigation elements should match across all views
- Data should look realistic (not lorem ipsum or obvious fakes)
- All charts should use the same chart library visual style (e.g., Recharts or Chart.js look)

**Post-Processing Guide:**
1. Generate base UI screenshots
2. Enhance in Figma: add real text, fix alignment, ensure pixel-perfection
3. Apply device frames using Rotato or Figma with device frame plugin
4. Add subtle shadows and background for presentation context
5. Export at 2x resolution for retina displays

**What to Avoid:**
- Blurry or low-resolution UI elements
- Unrealistic data (round numbers everywhere, perfect metrics)
- Text that's too small to read in the mockup
- Inconsistent UI patterns between screens
- Overly generic "lorem ipsum" looking content