AgentSkillsCN

phase-3-mockup

运用 UI/UX 趋势打造原型的技能。 在实施前设计 HTML/CSS/JS 原型。 当用户希望在编码前验证 UI/UX 时，请主动使用此技能。 触发条件：原型、样机、线框图、UI 设计、 목업、프로토타입、와이어프레임、UI 디자인、 モックアップ、プロトタイプ、ワイヤーフレーム、UIデザイン、 原型、线框图、UI 设计、 maqueta、prototipo、 maquette、prototype、 Mockup、Prototyp、 mockup、prototipo、 请勿用于：生产环境的代码或 API 开发

SKILL.md
--- frontmatter
name: phase-3-mockup
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

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:

code
┌─────────────────────────────────┐
│ [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:

code
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)