phase-3-mockup
Skill for creating mockups with UI/UX trends. Designs HTML/CSS/JS prototypes before implementation. Use proactively when user wants to validate UI/UX before coding. Triggers: mockup, prototype, wireframe, UI design, 목업, 프로토타입, 와이어프레임, モックアップ, プロトタイプ, 原型, 线框图, maqueta, prototipo, maquette, prototype, Mockup, Prototyp, mockup, prototipo Do NOT use for: production code, API development
来源信息
- 仓库
- ww-w-ai/bkit-gemini
- 最近来源活动
- 2026年3月11日 04:41
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 66
- 分支
- 16
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- phase-3-mockup
- classification
- C
- description
- Skill for creating mockups with UI/UX trends. Designs HTML/CSS/JS prototypes before implementation. Use proactively when user wants to validate UI/UX before coding. Triggers: mockup, prototype, wireframe, UI design, 목업, 프로토타입, 와이어프레임, モックアップ, プロトタイプ, 原型, 线框图, maqueta, prototipo, maquette, prototype, Mockup, Prototyp, mockup, prototipo Do NOT use for: production code, API development
- user-invocable
- true
- argument-hint
- allowed-tools
- ["read_file","write_file","replace","glob","grep_search","google_web_search"]
- imports
- []
- agents
- {}
- context
- session
- memory
- project
- pdca-phase
- design
# 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:
```html
<!-- 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)
在 GitHub 查看