chore(rebar): Pier_T_rebar 작업 폴더 초기 구성 및 외부 의존 파일 통합
- Code\rebar_pipeline, review_pipeline, pier-program을 정션에서 실제 폴더로 전환 - Code\rhino_mcp 및 CLAUDE_rhino배경.md 추가, .mcp.json은 PYTHONPATH로 새 위치 사용 - pier-program 내부 .git 제거(이력은 backup\pier-program_20261028.bundle에 보관) - worktree 가이드 반영(CLAUDE.local.md, HANDOFF.md) - D:\Rhino-MCP 경로 참조를 새 위치로 치환 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ahnyongjooandClaude Sonnet 5.5 committed
commit
964a841de1
3978 files changed
+58013356
No files matched your search
@@ -0,0 +1,336 @@
|
||||
---
|
||||
name: phase-3-mockup
|
||||
classification: capability
|
||||
classification-reason: Highly likely to be subsumed by model's native capabilities
|
||||
deprecation-risk: high
|
||||
description: |
|
||||
Create UI/UX mockups and HTML/CSS/JS prototypes without a designer.
|
||||
Triggers: mockup, prototype, wireframe, UI design, 목업, 프로토타입.
|
||||
agents:
|
||||
default: hmcmkit:pipeline-guide
|
||||
frontend: hmcmkit: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 | 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
|
||||
## 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
|
||||
|
||||
```html
|
||||
<!-- ❌ Bad: Monolithic HTML -->
|
||||
<div class="page">
|
||||
<header>...</header>
|
||||
<main>
|
||||
<div class="hero">...</div>
|
||||
<div class="features">...</div>
|
||||
</main>
|
||||
<footer>...</footer>
|
||||
</div>
|
||||
|
||||
<!-- ✅ Good: Separated by component units -->
|
||||
<!-- components/Header.html -->
|
||||
<header data-component="Header">
|
||||
<nav data-component="Navigation">...</nav>
|
||||
</header>
|
||||
|
||||
<!-- components/Hero.html -->
|
||||
<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
|
||||
|
||||
```markdown
|
||||
## 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
|
||||
|
||||
```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
|
||||
<!-- mockup/components/feature-card.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**:
|
||||
```tsx
|
||||
// components/FeatureCard.tsx
|
||||
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
|
||||
|
||||
```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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Deliverables Checklist
|
||||
|
||||
- [ ] **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
|
||||
|
||||
---
|
||||
|
||||
## Template
|
||||
|
||||
See `templates/pipeline/phase-3-mockup.template.md`
|
||||
|
||||
## Next Phase
|
||||
|
||||
Phase 4: API Design/Implementation → Mockup is validated, now implement actual backend
|
||||
Reference in new issue
Block a user