{"product_id":"claude-cho-design-design-handoff-cho-developer","title":"Claude cho Design: Design Handoff cho Developer","description":"\n\u003cp\u003eMộ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. \u003cstrong\u003eClaude giúp bạn tạo handoff spec chi tiết, không để sót\u003c\/strong\u003e, từ layout đến edge cases.\u003c\/p\u003e\n\n\u003ch2\u003eVì sao Handoff thường thất bại?\u003c\/h2\u003e\n\n\u003cp\u003eQua quan sát các team product tại Việt Nam, handoff thất bại vì:\u003c\/p\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eThiếu spec rõ ràng:\u003c\/strong\u003e Figma đẹp nhưng developer đoán spacing, đoán behavior\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eBỏ qua states:\u003c\/strong\u003e Chỉ có \"happy path\", thiếu loading, error, empty, disabled\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eKhông có edge cases:\u003c\/strong\u003e Text dài, số lượng lớn, mất kết nối, data không có\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eThiếu animation spec:\u003c\/strong\u003e \"Smooth transition\" — smooth bao nhiêu? Easing gì?\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eKhông có accessibility notes:\u003c\/strong\u003e Developer không biết ARIA roles, focus order\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch2\u003eHandoff Spec Template với Claude\u003c\/h2\u003e\n\n\u003cp\u003ePrompt cơ bản để generate full handoff spec:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eBạn là technical design lead với kinh nghiệm handoff cho React + React Native team.\nTạo handoff spec hoàn chỉnh cho component\/screen sau.\n\nFeature: Product Card Component\nPlatform: Web (React) + Mobile (React Native)\nDesign system: Đang dùng Tailwind CSS (web) và NativeWind (mobile)\n\nMô tả visual:\n- Card kích thước: 160x240px (mobile), 200x300px (desktop)\n- Ảnh sản phẩm: top 60% card, aspect ratio 1:1.2\n- Badge \"Sale\" góc trên trái: màu đỏ #E53E3E, text trắng, border-radius 4px\n- Tên sản phẩm: 2 dòng max, font 14px medium, màu #1A202C\n- Giá sale: 16px bold màu đỏ, giá gốc 13px gạch ngang màu xám\n- Rating: 5 ngôi sao (solid\/outline), số đánh giá trong ngoặc\n- Nút \"Thêm vào giỏ\": full-width, height 36px, rounded, màu brand #0066CC\n\nInteractions:\n- Tap\/click card → navigate to product detail\n- Tap \"Thêm vào giỏ\" → add to cart (không navigate)\n- Long press (mobile) → quick view modal\n\nHãy tạo handoff spec đầy đủ bao gồm: layout, tokens, states, responsive, edge cases, animations, accessibility.\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch3\u003eOutput mẫu — Handoff Spec hoàn chỉnh\u003c\/h3\u003e\n\n\u003cpre\u003e\u003ccode\u003e## Handoff Spec: Product Card Component\n\n### Overview\nCard hiển thị thông tin tóm tắt sản phẩm trong grid\/list. Hỗ trợ cả web và mobile,\nvới primary action là navigate to detail, secondary action là add to cart.\n\n---\n\n### Layout\n\n**Mobile (React Native):**\n- Container: width 160px (trong grid 2 cột, margin 8px)\n- Border-radius: 12px\n- Shadow: elevation 2 (Android) \/ shadowOffset 0,2 shadowRadius 4 (iOS)\n- Background: #FFFFFF\n\n**Desktop (Web\/Tailwind):**\n- Container: w-[200px] trong grid, sm:w-full\n- Dùng rounded-xl shadow-sm\n\n---\n\n### Design Tokens Used\n\n| Token | Value | Tailwind Class | Dùng cho |\n|-------|-------|----------------|----------|\n| color-brand | #0066CC | bg-blue-600 | CTA button |\n| color-danger | #E53E3E | bg-red-500 | Sale badge, sale price |\n| color-text-primary | #1A202C | text-gray-900 | Product name |\n| color-text-muted | #718096 | text-gray-500 | Original price, review count |\n| spacing-sm | 8px | p-2 | Card inner padding |\n| spacing-xs | 4px | gap-1 | Between elements |\n| radius-md | 8px | rounded-lg | CTA button |\n| radius-lg | 12px | rounded-xl | Card container |\n\n---\n\n### Components\n\n| Component | Variant | Props | Ghi chú |\n|-----------|---------|-------|---------|\n| ProductCard | default, compact | productId, showBadge, onAddToCart | Compact dùng trong related products |\n| Badge | sale, new, hot | text, color | Absolute position top-left |\n| StarRating | readonly | rating (0-5), reviewCount | Hiển thị 1 decimal (4.5) |\n| PriceDisplay | with-sale, no-sale | originalPrice, salePrice, currency | currency default: \"đ\" |\n| Button | primary | onPress, loading, disabled | CTA \"Thêm vào giỏ\" |\n\n---\n\n### States và Interactions\n\n| Element | State | Visual | Behavior |\n|---------|-------|--------|----------|\n| Card container | Default | Shadow elevation 2 | — |\n| Card container | Pressed\/Hover | Scale 0.98, shadow reduced | Navigate to product detail |\n| Card container | Loading skeleton | Gray shimmer trên toàn card | Hiển thị khi data đang fetch |\n| \"Thêm vào giỏ\" | Default | bg-brand, text trắng | — |\n| \"Thêm vào giỏ\" | Hover (web) | bg-brand-dark (darken 10%) | — |\n| \"Thêm vào giỏ\" | Pressed | Scale 0.97 | — |\n| \"Thêm vào giỏ\" | Loading | Spinner thay text, disabled | Trong khi gọi API add-to-cart |\n| \"Thêm vào giỏ\" | Success | Check icon 1.5s rồi về default | Feedback khi add thành công |\n| \"Thêm vào giỏ\" | Error | Shake animation, về default | API fail — không show error text trên button |\n| \"Thêm vào giỏ\" | Disabled | Opacity 0.4, không clickable | Hết hàng hoặc loading |\n| Sale badge | Present | bg-red-500, absolute top-2 left-2 | Hiện khi salePrice khác originalPrice |\n| Sale badge | Absent | Không render | Không để invisible, remove khỏi DOM |\n\n---\n\n### Responsive Behavior\n\n| Breakpoint | Thay đổi |\n|------------|---------|\n| Desktop (\u0026gt;= 1024px) | Width 200px, grid 4-5 cột |\n| Tablet (768-1023px) | Width auto, grid 3 cột |\n| Mobile (\u0026lt; 768px) | Width auto, grid 2 cột, margin 4px |\n\n---\n\n### Edge Cases\n\n- **Tên sản phẩm quá dài:** Clamp 2 dòng, ellipsis. Tooltip full name khi hover (web only).\n  Ví dụ: \"Áo thun cotton oversize unisex form rộng màu trắng basic size M L XL XXL...\"\n  → \"Áo thun cotton oversize unisex form rộng...\"\n\n- **Không có ảnh:** Hiển thị placeholder image (product-placeholder.png), không để broken img\n\n- **Giá = 0:** Không hiển thị \"0đ\" — hiển thị \"Liên hệ\"\n\n- **Rating = 0 (chưa có đánh giá):** Hiển thị 5 ngôi sao outline + \"Chưa có đánh giá\" thay vì \"(0)\"\n\n- **Out of stock:** Nút \"Hết hàng\" disabled opacity 0.4, card vẫn clickable để xem detail\n\n- **Flash sale đã kết thúc:** Ẩn badge Sale, hiển thị giá gốc — không giữ giá sale cũ\n\n- **Network slow\/offline:** Add to cart vẫn disable button, show toast \"Không có kết nối\"\n\n---\n\n### Animation \/ Motion\n\n| Element | Trigger | Animation | Duration | Easing |\n|---------|---------|-----------|----------|--------|\n| Card | Press in | Scale 0.98 | 80ms | ease-out |\n| Card | Press out | Scale 1.0 | 150ms | ease-in-out |\n| Skeleton | Load | Shimmer left-to-right | 1.5s loop | linear |\n| Add button success | API success | Check icon fade in + scale 1.2→1.0 | 300ms | ease-out |\n| Loading spinner | API pending | Rotate 360deg loop | 600ms | linear |\n\n---\n\n### Accessibility Notes\n\n**Web:**\n- Card container: role=\"article\", aria-label=\"Sản phẩm: [tên sản phẩm]\"\n- \"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ỏ\")\n- Sale badge: aria-label=\"Đang sale\" hoặc dùng visually-hidden text\n- Star rating: aria-label=\"Đánh giá [X] sao trên 5, [Y] lượt đánh giá\"\n- Loading state button: aria-busy=\"true\", aria-disabled=\"true\"\n\n**Focus order (Tab):** Card container → \"Thêm vào giỏ\" button\n\n**React Native:**\n- accessibilityRole=\"button\" cho card (navigate)\n- accessibilityLabel đầy đủ cho từng interactive element\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eHandoff cho Specific Screens\u003c\/h2\u003e\n\n\u003ch3\u003eForm Screens — Đặc biệt quan trọng\u003c\/h3\u003e\n\n\u003cpre\u003e\u003ccode\u003eTạo handoff spec cho form đăng ký tài khoản doanh nghiệp.\nPlatform: Web responsive\n\nForm gồm 12 trường chia 3 sections:\nSection 1 - Thông tin công ty: Tên công ty, MST, Địa chỉ, Website\nSection 2 - Người đại diện: Họ tên, Chức vụ, Email, SĐT\nSection 3 - Tài khoản: Email đăng nhập, Mật khẩu, Xác nhận MK, CAPTCHA\n\nValidation rules:\n- MST: 10 hoặc 13 số, check digit validation\n- Email: RFC 5322 format\n- Mật khẩu: min 8 chars, phải có uppercase, số, special char\n- Tên công ty: max 200 chars\n\nHãy spec đặc biệt kỹ phần:\n1. Validation messages — khi nào show, text nào, ở đâu\n2. Submit behavior — disabled khi nào, loading state, success\/error\n3. Multi-step vs single page trade-off recommendation\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch3\u003eData Tables — Thường bị under-spec\u003c\/h3\u003e\n\n\u003cpre\u003e\u003ccode\u003eTạo handoff spec cho bảng quản lý đơn hàng.\n10 columns, sortable, filterable, pagination.\n\nĐặc biệt cần spec:\n- Responsive behavior: columns nào ẩn ở mobile?\n- Empty states: chưa có đơn nào, filter không có kết quả, loading, error\n- Bulk actions: chọn nhiều, actions dropdown\n- Row interactions: hover, selected, expanded detail\n- Pagination: bao nhiêu items\/page, go-to-page input\n- Sort indicators: visual cho sorted column và direction\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eTạo Developer Q\u0026amp;A Preemptive\u003c\/h2\u003e\n\n\u003cp\u003eTrước khi developer hỏi, dùng Claude để anticipate câu hỏi:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eTôi vừa tạo handoff spec cho [feature]. Hãy đóng vai một React developer nhận spec này.\nLiệt kê 10 câu hỏi mà developer khả năng cao sẽ hỏi về:\n- Implementation details không rõ trong spec\n- Edge cases chưa được cover\n- Performance considerations\n- State management questions\n- API contract questions\n\nSpec: [paste spec vào đây]\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eHandoff Checklist trước khi Deliver\u003c\/h2\u003e\n\n\u003cpre\u003e\u003ccode\u003eReview handoff spec này và cho tôi biết còn thiếu gì.\nDùng checklist sau:\n\nVISUAL:\n- [ ] Exact dimensions (không chỉ % hoặc \"flexible\")\n- [ ] Color values với token names\n- [ ] Spacing values với token names\n- [ ] Typography: font, size, weight, line-height, letter-spacing\n- [ ] Border: width, color, radius\n\nSTATES:\n- [ ] Default\n- [ ] Hover \/ Press\n- [ ] Active \/ Selected\n- [ ] Disabled\n- [ ] Loading\n- [ ] Error\n- [ ] Empty\n- [ ] Success\n\nRESPONSIVE:\n- [ ] 3 breakpoints minimum\n- [ ] Behavior change mô tả rõ\n\nCONTENT:\n- [ ] Min content (1 char, no data)\n- [ ] Max content (long strings, 999+ items)\n- [ ] Missing data (null, undefined)\n- [ ] Truncation rules\n\nINTERACTION:\n- [ ] All clickable areas defined\n- [ ] Animation durations và easings\n- [ ] Gesture support (swipe, pinch) nếu applicable\n\nACCESSIBILITY:\n- [ ] ARIA roles cho interactive elements\n- [ ] Focus order\n- [ ] Screen reader text cho icons\n\nSpec cần review: [paste spec]\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eWorkflow thực tế cho team nhỏ\u003c\/h2\u003e\n\n\u003cp\u003eVới team 2-5 người không có dedicated technical writer:\u003c\/p\u003e\n\n\u003col\u003e\n  \u003cli\u003e\n\u003cstrong\u003eDesigner:\u003c\/strong\u003e Hoàn thiện Figma, add annotations cho những điểm quan trọng\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eClaude:\u003c\/strong\u003e Generate draft spec từ mô tả của designer\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eDesigner review:\u003c\/strong\u003e Kiểm tra spec, bổ sung context, sửa những điểm Claude miss\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eDeveloper preview:\u003c\/strong\u003e Developer đọc spec, raise câu hỏi qua comment\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eClaude:\u003c\/strong\u003e Giúp designer trả lời câu hỏi kỹ thuật từ developer\u003c\/li\u003e\n\u003c\/ol\u003e\n\n\u003cp\u003eQuy 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.\u003c\/p\u003e\n\n\u003ch2\u003eBước tiếp theo\u003c\/h2\u003e\n\n\u003cp\u003eHandoff 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 \u003ca href=\"\/en\/collections\/ung-dung\"\u003ebộ sưu tập Ứng dụng Claude cho Design\u003c\/a\u003e.\u003c\/p\u003e\n\n\n\u003chr\u003e\n\u003ch3\u003eBài viết liên quan\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-design-ux-copywriting-hi%E1%BB%87u-qu%E1%BA%A3\"\u003eClaude cho Design: UX Copywriting hiệu quả\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-design-xay-d%E1%BB%B1ng-design-system\"\u003eClaude cho Design: Xây dựng Design System\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-design-accessibility-review-t%E1%BB%B1-d%E1%BB%99ng\"\u003eClaude cho Design: Accessibility Review tự động\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-engineering-standup-va-bao-cao-ti%E1%BA%BFn-d%E1%BB%99\"\u003eClaude cho Engineering: Standup và báo cáo tiến độ\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-marketing-seo-audit-chuyen-sau\"\u003eClaude cho Marketing: SEO Audit chuyên sâu\u003c\/a\u003e\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"Minh Tuấn","offers":[{"title":"Default Title","offer_id":47722092134612,"sku":null,"price":0.0,"currency_code":"VND","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0821\/0264\/9044\/files\/claude-cho-design-design-handoff-cho-developer_c0425120-58ba-4e63-880c-03392dcdba48.jpg?v=1774521980","url":"https:\/\/claude.vn\/en\/products\/claude-cho-design-design-handoff-cho-developer","provider":"CLAUDE.VN","version":"1.0","type":"link"}