Claude cho Design: Design Handoff cho Developer

Một trong những điểm ma sát lớn nhất trong quy trình phát triển sản phẩm là khoảng cách giữa designer và developer. "Tôi nghĩ mình đã rõ ràng trong Figma" — nhưng developer vẫn implement sai spacing, thiếu error state, bỏ qua animation. Claude giúp bạn tạo handoff spec chi tiết, không để sót, từ layout đến edge cases.

Vì sao Handoff thường thất bại?

Qua quan sát các team product tại Việt Nam, handoff thất bại vì:

• Thiếu spec rõ ràng: Figma đẹp nhưng developer đoán spacing, đoán behavior
• Bỏ qua states: Chỉ có "happy path", thiếu loading, error, empty, disabled
• Không có edge cases: Text dài, số lượng lớn, mất kết nối, data không có
• Thiếu animation spec: "Smooth transition" — smooth bao nhiêu? Easing gì?
• Không có accessibility notes: Developer không biết ARIA roles, focus order

Handoff Spec Template với Claude

Prompt cơ bản để generate full handoff spec:

Bạn là technical design lead với kinh nghiệm handoff cho React + React Native team.
Tạo handoff spec hoàn chỉnh cho component/screen sau.

Feature: Product Card Component
Platform: Web (React) + Mobile (React Native)
Design system: Đang dùng Tailwind CSS (web) và NativeWind (mobile)

Mô tả visual:
- Card kích thước: 160x240px (mobile), 200x300px (desktop)
- Ảnh sản phẩm: top 60% card, aspect ratio 1:1.2
- Badge "Sale" góc trên trái: màu đỏ #E53E3E, text trắng, border-radius 4px
- Tên sản phẩm: 2 dòng max, font 14px medium, màu #1A202C
- Giá sale: 16px bold màu đỏ, giá gốc 13px gạch ngang màu xám
- Rating: 5 ngôi sao (solid/outline), số đánh giá trong ngoặc
- Nút "Thêm vào giỏ": full-width, height 36px, rounded, màu brand #0066CC

Interactions:
- Tap/click card → navigate to product detail
- Tap "Thêm vào giỏ" → add to cart (không navigate)
- Long press (mobile) → quick view modal

Hãy tạo handoff spec đầy đủ bao gồm: layout, tokens, states, responsive, edge cases, animations, accessibility.

Output mẫu — Handoff Spec hoàn chỉnh

## Handoff Spec: Product Card Component

### Overview
Card hiển thị thông tin tóm tắt sản phẩm trong grid/list. Hỗ trợ cả web và mobile,
với primary action là navigate to detail, secondary action là add to cart.

---

### Layout

**Mobile (React Native):**
- Container: width 160px (trong grid 2 cột, margin 8px)
- Border-radius: 12px
- Shadow: elevation 2 (Android) / shadowOffset 0,2 shadowRadius 4 (iOS)
- Background: #FFFFFF

**Desktop (Web/Tailwind):**
- Container: w-[200px] trong grid, sm:w-full
- Dùng rounded-xl shadow-sm

---

### Design Tokens Used

| Token | Value | Tailwind Class | Dùng cho |
|-------|-------|----------------|----------|
| color-brand | #0066CC | bg-blue-600 | CTA button |
| color-danger | #E53E3E | bg-red-500 | Sale badge, sale price |
| color-text-primary | #1A202C | text-gray-900 | Product name |
| color-text-muted | #718096 | text-gray-500 | Original price, review count |
| spacing-sm | 8px | p-2 | Card inner padding |
| spacing-xs | 4px | gap-1 | Between elements |
| radius-md | 8px | rounded-lg | CTA button |
| radius-lg | 12px | rounded-xl | Card container |

---

### Components

| Component | Variant | Props | Ghi chú |
|-----------|---------|-------|---------|
| ProductCard | default, compact | productId, showBadge, onAddToCart | Compact dùng trong related products |
| Badge | sale, new, hot | text, color | Absolute position top-left |
| StarRating | readonly | rating (0-5), reviewCount | Hiển thị 1 decimal (4.5) |
| PriceDisplay | with-sale, no-sale | originalPrice, salePrice, currency | currency default: "đ" |
| Button | primary | onPress, loading, disabled | CTA "Thêm vào giỏ" |

---

### States và Interactions

| Element | State | Visual | Behavior |
|---------|-------|--------|----------|
| Card container | Default | Shadow elevation 2 | — |
| Card container | Pressed/Hover | Scale 0.98, shadow reduced | Navigate to product detail |
| Card container | Loading skeleton | Gray shimmer trên toàn card | Hiển thị khi data đang fetch |
| "Thêm vào giỏ" | Default | bg-brand, text trắng | — |
| "Thêm vào giỏ" | Hover (web) | bg-brand-dark (darken 10%) | — |
| "Thêm vào giỏ" | Pressed | Scale 0.97 | — |
| "Thêm vào giỏ" | Loading | Spinner thay text, disabled | Trong khi gọi API add-to-cart |
| "Thêm vào giỏ" | Success | Check icon 1.5s rồi về default | Feedback khi add thành công |
| "Thêm vào giỏ" | Error | Shake animation, về default | API fail — không show error text trên button |
| "Thêm vào giỏ" | Disabled | Opacity 0.4, không clickable | Hết hàng hoặc loading |
| Sale badge | Present | bg-red-500, absolute top-2 left-2 | Hiện khi salePrice khác originalPrice |
| Sale badge | Absent | Không render | Không để invisible, remove khỏi DOM |

---

### Responsive Behavior

| Breakpoint | Thay đổi |
|------------|---------|
| Desktop (>= 1024px) | Width 200px, grid 4-5 cột |
| Tablet (768-1023px) | Width auto, grid 3 cột |
| Mobile (< 768px) | Width auto, grid 2 cột, margin 4px |

---

### Edge Cases

- **Tên sản phẩm quá dài:** Clamp 2 dòng, ellipsis. Tooltip full name khi hover (web only).
  Ví dụ: "Áo thun cotton oversize unisex form rộng màu trắng basic size M L XL XXL..."
  → "Áo thun cotton oversize unisex form rộng..."

- **Không có ảnh:** Hiển thị placeholder image (product-placeholder.png), không để broken img

- **Giá = 0:** Không hiển thị "0đ" — hiển thị "Liên hệ"

- **Rating = 0 (chưa có đánh giá):** Hiển thị 5 ngôi sao outline + "Chưa có đánh giá" thay vì "(0)"

- **Out of stock:** Nút "Hết hàng" disabled opacity 0.4, card vẫn clickable để xem detail

- **Flash sale đã kết thúc:** Ẩn badge Sale, hiển thị giá gốc — không giữ giá sale cũ

- **Network slow/offline:** Add to cart vẫn disable button, show toast "Không có kết nối"

---

### Animation / Motion

| Element | Trigger | Animation | Duration | Easing |
|---------|---------|-----------|----------|--------|
| Card | Press in | Scale 0.98 | 80ms | ease-out |
| Card | Press out | Scale 1.0 | 150ms | ease-in-out |
| Skeleton | Load | Shimmer left-to-right | 1.5s loop | linear |
| Add button success | API success | Check icon fade in + scale 1.2→1.0 | 300ms | ease-out |
| Loading spinner | API pending | Rotate 360deg loop | 600ms | linear |

---

### Accessibility Notes

**Web:**
- Card container: role="article", aria-label="Sản phẩm: [tên sản phẩm]"
- "Thêm vào giỏ" button: aria-label="Thêm [tên sản phẩm] vào giỏ hàng" (không chỉ "Thêm vào giỏ")
- Sale badge: aria-label="Đang sale" hoặc dùng visually-hidden text
- Star rating: aria-label="Đánh giá [X] sao trên 5, [Y] lượt đánh giá"
- Loading state button: aria-busy="true", aria-disabled="true"

**Focus order (Tab):** Card container → "Thêm vào giỏ" button

**React Native:**
- accessibilityRole="button" cho card (navigate)
- accessibilityLabel đầy đủ cho từng interactive element

Handoff cho Specific Screens

Form Screens — Đặc biệt quan trọng

Tạo handoff spec cho form đăng ký tài khoản doanh nghiệp.
Platform: Web responsive

Form gồm 12 trường chia 3 sections:
Section 1 - Thông tin công ty: Tên công ty, MST, Địa chỉ, Website
Section 2 - Người đại diện: Họ tên, Chức vụ, Email, SĐT
Section 3 - Tài khoản: Email đăng nhập, Mật khẩu, Xác nhận MK, CAPTCHA

Validation rules:
- MST: 10 hoặc 13 số, check digit validation
- Email: RFC 5322 format
- Mật khẩu: min 8 chars, phải có uppercase, số, special char
- Tên công ty: max 200 chars

Hãy spec đặc biệt kỹ phần:
1. Validation messages — khi nào show, text nào, ở đâu
2. Submit behavior — disabled khi nào, loading state, success/error
3. Multi-step vs single page trade-off recommendation

Data Tables — Thường bị under-spec

Tạo handoff spec cho bảng quản lý đơn hàng.
10 columns, sortable, filterable, pagination.

Đặc biệt cần spec:
- Responsive behavior: columns nào ẩn ở mobile?
- Empty states: chưa có đơn nào, filter không có kết quả, loading, error
- Bulk actions: chọn nhiều, actions dropdown
- Row interactions: hover, selected, expanded detail
- Pagination: bao nhiêu items/page, go-to-page input
- Sort indicators: visual cho sorted column và direction

Tạo Developer Q&A Preemptive

Trước khi developer hỏi, dùng Claude để anticipate câu hỏi:

Tôi vừa tạo handoff spec cho [feature]. Hãy đóng vai một React developer nhận spec này.
Liệt kê 10 câu hỏi mà developer khả năng cao sẽ hỏi về:
- Implementation details không rõ trong spec
- Edge cases chưa được cover
- Performance considerations
- State management questions
- API contract questions

Spec: [paste spec vào đây]

Handoff Checklist trước khi Deliver

Review handoff spec này và cho tôi biết còn thiếu gì.
Dùng checklist sau:

VISUAL:
- [ ] Exact dimensions (không chỉ % hoặc "flexible")
- [ ] Color values với token names
- [ ] Spacing values với token names
- [ ] Typography: font, size, weight, line-height, letter-spacing
- [ ] Border: width, color, radius

STATES:
- [ ] Default
- [ ] Hover / Press
- [ ] Active / Selected
- [ ] Disabled
- [ ] Loading
- [ ] Error
- [ ] Empty
- [ ] Success

RESPONSIVE:
- [ ] 3 breakpoints minimum
- [ ] Behavior change mô tả rõ

CONTENT:
- [ ] Min content (1 char, no data)
- [ ] Max content (long strings, 999+ items)
- [ ] Missing data (null, undefined)
- [ ] Truncation rules

INTERACTION:
- [ ] All clickable areas defined
- [ ] Animation durations và easings
- [ ] Gesture support (swipe, pinch) nếu applicable

ACCESSIBILITY:
- [ ] ARIA roles cho interactive elements
- [ ] Focus order
- [ ] Screen reader text cho icons

Spec cần review: [paste spec]

Workflow thực tế cho team nhỏ

Với team 2-5 người không có dedicated technical writer:

1. Designer: Hoàn thiện Figma, add annotations cho những điểm quan trọng
2. Claude: Generate draft spec từ mô tả của designer
3. Designer review: Kiểm tra spec, bổ sung context, sửa những điểm Claude miss
4. Developer preview: Developer đọc spec, raise câu hỏi qua comment
5. Claude: Giúp designer trả lời câu hỏi kỹ thuật từ developer

Quy trình này giảm khoảng 60-70% thời gian back-and-forth giữa designer và developer trong sprint đầu tiên implement.

Bước tiếp theo

Handoff tốt là kết quả của cả một quy trình — từ design critique đến accessibility check đến documentation đầy đủ. Khám phá toàn bộ workflow tại bộ sưu tập Ứng dụng Claude cho Design.

Bài viết liên quan

• Claude cho Design: UX Copywriting hiệu quả
• Claude cho Design: Xây dựng Design System
• Claude cho Design: Accessibility Review tự động
• Claude cho Engineering: Standup và báo cáo tiến độ
• Claude cho Marketing: SEO Audit chuyên sâu