| name | phase-3-mockup |
| context | fork |
| classification | capability |
| classification-reason | Highly likely to be subsumed by model's native capabilities |
| deprecation-risk | high |
| effort | medium |
| description | Create UI/UX mockups and HTML/CSS/JS prototypes without a designer.
Triggers: mockup, prototype, wireframe, UI design, ๋ชฉ์
, ํ๋กํ ํ์
.
|
| agents | {"default":"bkit:pipeline-guide","frontend":"bkit:frontend-architect"} |
| allowed-tools | ["Read","Write","Edit","Glob","WebSearch"] |
| user-invocable | false |
| imports | ["${PLUGIN_ROOT}/templates/pipeline/phase-3-mockup.template.md"] |
| next-skill | phase-4-api |
| pdca-phase | design |
| task-template | [Phase-3] {feature} |
Phase 3: Mockup Development
Create trendy UI without a designer + Consider Next.js componentization
Purpose
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.
What to Do in This Phase
- Screen Mockups: Implement UI with HTML/CSS
- Interactions: Implement behavior with basic JavaScript
- Data Simulation: Simulate API responses with JSON files
- Feature Validation: Test user flows
Deliverables
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
PDCA Application
- 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-wise Application
| Level | Application Method |
|---|
| Starter | This stage may be the final deliverable |
| Dynamic | For validation before next stages |
| Enterprise | For quick PoC |
Core Principles
"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
UI/UX Trend Research Methods
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
## UI Research Checklist
- [ ] Analyzed 3+ similar services
- [ ] Decided color palette (Primary, Secondary, Accent)
- [ ] Selected typography (Heading, Body)
- [ ] Chose layout pattern (Grid, Bento, etc.)
- [ ] Collected reference design screenshots
Design for Next.js Componentization
Mockup โ Component Transition Strategy
Considering component separation from the mockup stage makes Next.js transition easier.
1. Design HTML Structure in Component Units
<div class="page">
<header>...</header>
<main>
<div class="hero">...</div>
<div class="features">...</div>
</main>
<footer>...</footer>
</div>
<header data-component="Header">
<nav data-component="Navigation">...</nav>
</header>
<section data-component="Hero">
<h1 data-slot="title">...</h1>
<p data-slot="description">...</p>
<button data-component="Button" data-variant="primary">...</button>
</section>
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
## Component Mapping (mockup โ Next.js)
| 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
{
"title": "Innovative Service",
"description": "We provide better experiences",
"cta": {
"label": "Get Started",
"href": "/signup"
},
"image": "/hero-image.png"
}
interface HeroProps {
title: string;
description: string;
cta: {
label: string;
href: string;
};
image: string;
}
Next.js Transition Example
Mockup (HTML):
<div class="feature-card" data-component="FeatureCard">
<div class="feature-card__icon">๐</div>
<h3 class="feature-card__title">Fast Speed</h3>
<p class="feature-card__description">We provide optimized performance.</p>
</div>
Next.js Component:
interface FeatureCardProps {
icon: string;
title: string;
description: string;
}
export function FeatureCard({ icon, title, description }: FeatureCardProps) {
return (
<div className="feature-card">
<div className="feature-card__icon">{icon}</div>
<h3 className="feature-card__title">{title}</h3>
<p className="feature-card__description">{description}</p>
</div>
);
}
JSON Data Simulation Example
async function loadProducts() {
const response = await fetch('./data/products.json');
const products = await response.json();
renderProducts(products);
}
JSON Structure โ Use as API Schema
{
"data": [
{
"id": 1,
"name": "Product Name",
"price": 10000,
"image": "/products/1.jpg"
}
],
"pagination": {
"page": 1,
"limit": 10,
"total": 50
}
}
Deliverables Checklist
Template
See templates/pipeline/phase-3-mockup.template.md
Next Phase
Phase 4: API Design/Implementation โ Mockup is validated, now implement actual backend