phase-3-mockup

name	phase-3-mockup
context	fork
background	false
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 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

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

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