📚 Bổ trợ Tutorial là phần thực hành bổ trợ cho bài học chính.
← Quay lại Tutorial Hub
🎨 Designer intermediate v1.0 Cập nhật: 2026-03-06

Agent hỗ trợ Wireframe Iteration

Sử dụng AI Agent để iterate wireframe: từ low-fi sketch → structured wireframe → handoff-ready specs.

1

Vấn đề

Wireframe iteration loop tốn nhiều thời gian: sketch → feedback → redesign → re-review. Designer cần tool hỗ trợ generate alternatives nhanh, critique từng version, và produce handoff notes tự động.

2

Kết quả mong đợi

Wireframe qua 3 rounds iteration với AI assistance: Round 1 (structure), Round 2 (states & interactions), Round 3 (handoff specs). Thời gian iteration giảm 50% so với manual.

3

Yêu cầu trước khi bắt đầu

  • ☐ Figma / FigJam account
  • ☐ PRD hoàn chỉnh với user stories
  • ☐ Design system / component library có sẵn
  • ☐ AI tool hỗ trợ image + code generation
4

Prompt Pack

System Prompt

You are a Product Designer who creates structured wireframes. You think in terms of: information hierarchy, user tasks, component patterns, and responsive breakpoints. You output wireframe specs in structured format ready for Figma implementation.

Task Prompt

Help me wireframe this feature:

[PASTE USER STORY OR FEATURE DESCRIPTION]

Context:
- Platform: [Web/Mobile/Both]
- Design system: [Material/Custom/etc.]
- Key user task: [What user wants to accomplish]

Provide:
1. Screen list with layout structure (header, content zones, footer)
2. Content hierarchy for each screen
3. Component suggestions from design system
4. Responsive breakpoints (mobile, tablet, desktop)
5. Key interactions and transitions

Guardrails

- Start with content structure, not visual design
- Prioritize user task completion over aesthetics
- Every screen must support keyboard navigation
- Consider: what happens if content is longer/shorter than expected?
- Do NOT suggest specific colors or typography — that's UI design phase
✓ Đã copy!
5

Workflow từng bước

1

Round 1: Structure

Gửi feature description. Agent sẽ suggest screen structure và content hierarchy.

2

Build in Figma

Dựa trên agent output, build low-fi wireframe trong Figma.

3

Round 2: States & Interactions

Describe wireframe cho agent, ask về missing states và interaction patterns.

4

Iterate wireframe

Update wireframe với states: empty, loading, error. Add interaction annotations.

5

Round 3: Handoff

Ask agent generate handoff specs: spacing, component props, responsive rules.

6

Demo Input / Output

📥 Input

Feature: User profile page. User can view/edit personal info, see activity history, manage notification settings. Platform: Mobile app.
→

📤 Output

## Wireframe Spec: User Profile

### Screen 1: Profile Overview
```
┌─────────────────────┐
│ ← Back    Edit Btn  │
├─────────────────────┤
│    [Avatar 80px]    │
│    Display Name     │
│    @username        │
├─────────────────────┤
│ ▸ Personal Info     │
│ ▸ Activity History  │
│ ▸ Notifications     │
│ ▸ Privacy Settings  │
├─────────────────────┤
│   Sign Out (Red)    │
└─────────────────────┘
```

**Content Hierarchy:**
1. Avatar + Name (identity context)
2. Menu items (grouped by category)
3. Destructive actions (bottom, red)

**Component Mapping:**
- `Avatar` (size: lg, 80px)
- `ListItem` (icon, label, chevron)
- `Button` (variant: destructive)
7

Failure Cases & Cách Fix

⚠️ Wireframe spec thiếu responsive rules
💡 Thêm: 'Provide layout rules for: mobile (375px), tablet (768px), desktop (1200px).'
⚠️ Component suggestions không match design system
💡 Paste design system component list vào context.
⚠️ Missing accessibility considerations
💡 Thêm: 'For each interactive element, specify: role, label, keyboard shortcut.'
8

Production Checklist

  • ☐ Mọi screens có ở cả mobile + desktop layout
  • ☐ Tất cả interactive elements có states (default, hover, active, disabled, focus)
  • ☐ Content truncation rules defined cho text dài
  • ☐ Spacing sử dụng design system tokens
  • ☐ Handoff notes có component names + props
  • ☐ Accessibility notes included
  • ☐ Wireframe review passed với PM + Dev
✓ Đã copy!
9

Metrics theo dõi hiệu quả

Metric Target Cách đo
Iteration time < 2 giờ / 3 rounds Track time per round
Handoff quality < 5 clarification questions from dev Count dev questions during implementation
State completeness 100% screens have all 5 states Cross-check state matrix
10

Supporting Skill: Wireframe

🔬 Chuyên sâu
### Wireframe cho Designer (mức chuyên sâu)

Đây là tutorial trọng tâm wireframe — Designer cần master các kỹ năng:

#### 1. Content-First Wireframing
- Bắt đầu từ real content, không dùng lorem ipsum
- Define content hierarchy trước layout
- Xác định max/min content lengths

#### 2. Component Tokenization
- Map wireframe elements → design system components
- Xác định props cần expose: size, variant, state
- Ghi chú spacing tokens (sp-2, sp-4, sp-8)

#### 3. Responsive Strategy
```
Mobile (375px): Stack vertical, full-width cards
Tablet (768px): 2-column grid, sidebar collapse
Desktop (1200px): 3-column grid, persistent sidebar
```

#### 4. Interaction Specifications
- **Micro-interactions**: Button press feedback, input focus glow
- **Transitions**: Page slide, modal fade, drawer push
- **Gestures**: Swipe, long press, pinch-to-zoom

#### 5. Handoff Documentation Template
```
Component: [Name]
Variant: [Default/Active/Disabled]
Spacing: [top: sp-4, bottom: sp-8]
Breakpoints: [mobile: stack | desktop: inline]
Accessibility: [role=button, aria-label='...']
```

> Advanced prompts:
> - 'Create a responsive wireframe spec with component token mapping'
> - 'Generate handoff documentation for this wireframe'
> - 'Compare two wireframe approaches for this user task and recommend the better option'