Quickly validate ideas before actual implementation. Even without a designer, research UI/UX trends to create high-quality prototypes, designed for easy conversion to Next.js components later.

1. Screen Mockups: Implement UI with HTML/CSS
2. Interactions: Implement behavior with basic JavaScript
3. Data Simulation: Simulate API responses with JSON files
4. Feature Validation: Test user flows

```

mockup/

├── pages/ # HTML pages

│ ├── index.html

│ ├── login.html

│ └── ...

├── styles/ # CSS

│ └── main.css

├── scripts/ # JavaScript

│ └── app.js

└── data/ # JSON mock data

├── users.json

└── products.json

docs/02-design/

└── mockup-spec.md # Mockup specification

```

• Plan: What screens/features to mock up
• Design: Screen structure, interaction design
• Do: Implement HTML/CSS/JS
• Check: Verify feature behavior
• Act: Apply feedback and proceed to Phase 4

| Level | Application Method |

|-------|-------------------|

| Starter | This stage may be the final deliverable |

| Dynamic | For validation before next stages |

| Enterprise | For quick PoC |

```

"Working prototype over perfect code"

• Pure HTML/CSS/JS without frameworks
• JSON files instead of APIs for data simulation
• Fast feedback loops
• Structure considering Next.js componentization

```

---

Creating Trendy UI Without a Designer

#### 1. Trend Research Sources

| Source | Purpose | URL |

|--------|---------|-----|

| Dribbble | UI design trends, color palettes | dribbble.com |

| Behance | Real project case studies | behance.net |

| Awwwards | Latest web trends from award winners | awwwards.com |

| Mobbin | Mobile app UI patterns | mobbin.com |

| Godly | Landing page references | godly.website |

| Land-book | Landing page gallery | land-book.com |

#### 2. 2025-2026 UI/UX Trends

```

🎨 Visual Trends

├── Bento Grid Layout

├── Glassmorphism

├── Gradient Mesh

├── 3D Elements (minimal 3D elements)

└── Micro-interactions

📱 UX Trends

├── Dark Mode First

├── Skeleton Loading

├── Progressive Disclosure

├── Thumb-friendly Mobile Design

└── Accessibility (WCAG 2.1)

🔤 Typography

├── Variable Fonts

├── Large Hero Text

└── Mixed Font Weights

```

#### 3. Quick UI Implementation Tools

| Tool | Purpose |

|------|---------|

| v0.dev | AI-based UI generation (shadcn/ui compatible) |

| Tailwind UI | High-quality component templates |

| Heroicons | Icons |

| Lucide | Icons (React compatible) |

| Coolors | Color palette generation |

| Realtime Colors | Real-time color preview |

#### 4. Pre-Mockup Checklist

```markdown

• [ ] Analyzed 3+ similar services
• [ ] Decided color palette (Primary, Secondary, Accent)
• [ ] Selected typography (Heading, Body)
• [ ] Chose layout pattern (Grid, Bento, etc.)
• [ ] Collected reference design screenshots

```

---

Mockup → Component Transition Strategy

Considering component separation from the mockup stage makes Next.js transition easier.

#### 1. Design HTML Structure in Component Units

```html

```

#### 2. Separate CSS by Component

```

mockup/

├── styles/

│ ├── base/

│ │ ├── reset.css

│ │ └── variables.css # CSS variables (design tokens)

│ ├── components/

│ │ ├── button.css

│ │ ├── card.css

│ │ ├── header.css

│ │ └── hero.css

│ └── pages/

│ └── home.css

```

#### 3. Create Component Mapping Document

```markdown

| Mockup File | Next.js Component | Props |

|-------------|------------------|-------|

| components/button.html | components/ui/Button.tsx | variant, size, disabled |

| components/card.html | components/ui/Card.tsx | title, description, image |

| components/header.html | components/layout/Header.tsx | user, navigation |

```

#### 4. Design Data Structure as Props

```javascript

// mockup/data/hero.json

{

"title": "Innovative Service",

"description": "We provide better experiences",

"cta": {

"label": "Get Started",

"href": "/signup"

},

"image": "/hero-image.png"

}

// → When transitioning to Next.js

// components/Hero.tsx

interface HeroProps {

title: string;

description: string;

cta: {

label: string;

href: string;

};

image: string;

}

```

Next.js Transition Example

Mockup (HTML):

```html

```

Next.js Component:

```tsx

// components/FeatureCard.tsx

interface FeatureCardProps {

icon: string;

title: string;

description: string;

}

export function FeatureCard({ icon, title, description }: FeatureCardProps) {

return (

);

}

```

---

```javascript

// scripts/app.js

async function loadProducts() {

const response = await fetch('./data/products.json');

const products = await response.json();

renderProducts(products);

}

```

JSON Structure → Use as API Schema

```json

// mockup/data/products.json

// This structure becomes the basis for Phase 4 API design

{

"data": [

{

"id": 1,

"name": "Product Name",

"price": 10000,

"image": "/products/1.jpg"

}

],

"pagination": {

"page": 1,

"limit": 10,

"total": 50

}

}

```

---

• [ ] UI Research

- [ ] Collected reference designs (minimum 3)

- [ ] Decided color palette

- [ ] Selected fonts

• [ ] Mockup Implementation

- [ ] HTML separated by component units

- [ ] Design tokens defined with CSS variables

- [ ] Data simulated with JSON

• [ ] Next.js Transition Preparation

- [ ] Component mapping document created

- [ ] Props interfaces defined

- [ ] Verified reusable structure

---

See templates/pipeline/phase-3-mockup.template.md

Phase 4: API Design/Implementation → Mockup is validated, now implement actual backend