Popup Studio AI Bkit Gemini Phase 3 Mockup

Phase 3: Mockup Creation

Design before you code

Purpose

Create visual prototypes to validate UI/UX before implementation.

Deliverables

1. Wireframes

Low-fidelity layouts showing structure:

┌─────────────────────────────────┐
│ [Logo]              [Nav] [User]│
├─────────────────────────────────┤
│                                 │
│   ┌─────────┐  ┌─────────┐     │
│   │ Card 1  │  │ Card 2  │     │
│   └─────────┘  └─────────┘     │
│                                 │
│   ┌─────────┐  ┌─────────┐     │
│   │ Card 3  │  │ Card 4  │     │
│   └─────────┘  └─────────┘     │
│                                 │
└─────────────────────────────────┘

2. Component Mockups

HTML/CSS prototypes:

<!-- components/mockups/card.html -->
<div class="card">
  <img src="placeholder.jpg" alt="">
  <h3>Title</h3>
  <p>Description text here</p>
  <button>Action</button>
</div>

3. User Flows

Document user journeys:

Home → Browse Products → View Product → Add to Cart → Checkout → Payment → Confirmation

Tools

• HTML/CSS prototypes (recommended)
• Figma exports
• ASCII diagrams

Output

Save to: docs/02-design/mockups/

Next Phase

After completion: /phase-4-api (Dynamic/Enterprise) or /phase-6-ui-integration (Starter)

Converted and distributed by TomeVault — claim your Tome and manage your conversions.