{"product_id":"claude-cho-design-xay-dựng-design-system","title":"Claude cho Design: Xây dựng Design System","description":"\n\u003cp\u003eXây dựng design system là một trong những đầu tư có ROI cao nhất trong product development — nhưng cũng tốn thời gian nhất nếu làm không có hệ thống. \u003cstrong\u003eClaude có thể tăng tốc đáng kể\u003c\/strong\u003e cả ba giai đoạn: audit hệ thống hiện tại, document components, và thiết kế patterns mới phù hợp với hệ thống.\u003c\/p\u003e\n\n\u003ch2\u003e3 chế độ làm việc với Design System\u003c\/h2\u003e\n\n\u003cp\u003eClaude hỗ trợ 3 tasks cốt lõi:\u003c\/p\u003e\n\n\u003col\u003e\n  \u003cli\u003e\n\u003cstrong\u003eAudit:\u003c\/strong\u003e Kiểm tra naming consistency, token coverage, component completeness\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eDocument:\u003c\/strong\u003e Viết documentation cho component: variants, states, props, accessibility\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eExtend:\u003c\/strong\u003e Thiết kế component\/pattern mới phù hợp với hệ thống\u003c\/li\u003e\n\u003c\/ol\u003e\n\n\u003ch2\u003eChế độ 1: Audit Design System\u003c\/h2\u003e\n\n\u003cp\u003eTrước khi biết mình cần làm gì, phải biết mình đang ở đâu:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eTôi cần audit design system của công ty. Đây là danh sách components và tokens hiện tại.\n\nCOMPONENTS (50 components):\nButtons: btn-primary, button-secondary, btn_ghost, ButtonDanger, btn-link\nInputs: TextInput, input-search, SearchBar, text-field, InputPassword\nCards: Card, CardProduct, card-article, ProfileCard, card-stat\nModals: Modal, ModalConfirm, dialog, AlertModal, BottomSheet\nNavigation: Navbar, nav-sidebar, Breadcrumb, TabBar, tab-navigation\nTypography: Heading, SubHeading, body-text, caption, label-text, paragraph\nIcons: dùng react-icons, không có wrapper component\n\nDESIGN TOKENS (từ tokens.json):\nColors:\n  primary: #0066CC\n  primaryDark: #004F9E\n  primary_light: #E8F0FE\n  blue500: #3B82F6\n  blue-600: #2563EB\n  danger: #E53E3E\n  error: #DC2626\n  red500: #EF4444\n\nSpacing:\n  xs: 4, sm: 8, md: 16, lg: 24, xl: 32, xxl: 48\n  space-1: 4, space-2: 8, space-3: 12, space-4: 16, space-5: 20\n\nTypography:\n  fontSizeSmall: 12, fontSize-sm: 13, fontSizeMD: 14, fontSize-base: 16\n\nHãy audit và cho tôi:\n1. Naming inconsistencies (convention: camelCase vs kebab-case vs PascalCase)\n2. Token duplication và conflicts\n3. Component gaps (thiếu states\/variants gì?)\n4. Điểm số tổng thể và top 5 priority fixes\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch3\u003eOutput mẫu — Audit Report\u003c\/h3\u003e\n\n\u003cpre\u003e\u003ccode\u003e## Design System Audit\n**Components reviewed:** 50 | **Issues found:** 23 | **Score: 42\/100**\n\n---\n\n### Naming Inconsistencies — CRITICAL\n\n#### Components (cần standardize ngay)\n| Pattern sai | Ví dụ | Nên là |\n|-------------|-------|--------|\n| Kebab-case | btn-primary, card-article | Không dùng |\n| Snake_case | btn_ghost | Không dùng |\n| PascalCase | CardProduct, AlertModal | Giữ lại — adopt làm standard |\n| camelCase mixed | navbar vs Navbar | Chọn 1 |\n\n**Quyết định cần đưa ra:** Adopt PascalCase cho components. 17\/50 components cần rename.\n\n#### Tokens — Duplicates và Conflicts\n| Vấn đề | Tokens | Impact |\n|--------|--------|--------|\n| 3 màu \"primary\" khác nhau | primary (#0066CC), blue500 (#3B82F6), blue-600 (#2563EB) | High — developer dùng màu sai |\n| 2 màu \"danger\/error\" | danger (#E53E3E), error (#DC2626), red500 (#EF4444) | High — inconsistent UI |\n| 2 spacing scales song song | xs\/sm\/md\/lg và space-1\/space-2... | Medium — waste, confusion |\n\n**Khuyến nghị:** Giữ semantic names (primary, danger, spacing-sm). Xóa utility names (blue500, space-1).\n\n---\n\n### Token Coverage\n| Danh mục | Đã define | Hardcoded values tìm thấy |\n|----------|-----------|--------------------------|\n| Colors | 12 | ~47 instances hex hardcoded |\n| Spacing | 10 | ~83 instances arbitrary px values |\n| Typography | 8 | ~34 instances custom font-size |\n| Border radius | 0 | ~28 instances hardcoded |\n| Shadow | 0 | ~15 instances hardcoded |\n\n**Điểm yếu lớn nhất:** Không có token cho border-radius và shadow — hai thuộc tính visual quan trọng.\n\n---\n\n### Component Completeness\n| Component | States | Variants | Documentation | Score |\n|-----------|--------|----------|---------------|-------|\n| Button | Partial (missing loading) | Partial (missing icon-only) | None | 4\/10 |\n| Input | Missing (error, success) | Missing (textarea) | None | 3\/10 |\n| Modal | OK | Missing (fullscreen mobile) | Partial | 6\/10 |\n| Card | Missing (skeleton) | OK | None | 4\/10 |\n\n---\n\n### Top 5 Priority Fixes\n\n1. **Standardize naming convention** — Adopt PascalCase, rename 17 components + create migration guide. Unblock team consistency ngay lập tức.\n\n2. **Resolve color token conflicts** — Merge 3 \"primary\" variants, 3 \"danger\/error\" variants. Update tất cả usage. Ngăn UI inconsistency tiếp tục lan rộng.\n\n3. **Add border-radius và shadow tokens** — 43 hardcoded instances cần migrate. Tạo 4 border-radius levels và 4 elevation levels.\n\n4. **Add missing states cho Button và Input** — Button loading state và Input error\/success state là must-have cho production quality.\n\n5. **Start documentation** — Bắt đầu với Button và Input — 2 components được dùng nhiều nhất. Không cần perfect, cần có.\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eChế độ 2: Document một Component\u003c\/h2\u003e\n\n\u003cpre\u003e\u003ccode\u003eViết documentation đầy đủ cho Button component trong design system của chúng tôi.\n\nContext:\n- Design system name: Viet UI\n- Framework: React + TypeScript\n- Styling: Tailwind CSS\n- Target users: Frontend developers, designers\n\nThông tin component:\n- Tên: Button\n- Variants: primary, secondary, ghost, danger, link\n- Sizes: sm (32px), md (40px), lg (48px)\n- States: default, hover, active, disabled, loading\n- Có thể có icon trái hoặc phải\n- Full-width option\n\nHãy viết documentation theo format:\n1. Mô tả + khi nào dùng\n2. Variants table\n3. Props\/API\n4. States\n5. Do's and Don'ts\n6. Accessibility\n7. Code example (React + Tailwind)\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch3\u003eOutput mẫu — Component Documentation\u003c\/h3\u003e\n\n\u003cpre\u003e\u003ccode\u003e## Component: Button\n\n### Mô tả\nButton trigger một action hoặc event. Dùng khi user cần thực hiện một thao tác rõ ràng.\nKhông dùng Button cho navigation — dùng Link hoặc anchor tag thay thế.\n\n---\n\n### Variants\n\n| Variant | Khi nào dùng | Visual |\n|---------|-------------|--------|\n| Primary | Action chính, CTA quan trọng nhất trên màn hình | Filled background brand color |\n| Secondary | Action phụ, bổ sung cho primary | Outlined, brand color border |\n| Ghost | Action thứ cấp, ít quan trọng | Text only, no border |\n| Danger | Destructive actions (xóa, hủy không reversible) | Red filled |\n| Link | Navigation hoặc action thứ cấp nhẹ | Text với underline on hover |\n\n**Quy tắc quan trọng:** Không đặt 2 Primary buttons cạnh nhau. Mỗi khu vực UI chỉ có 1 primary action.\n\n---\n\n### Props\n\n| Prop | Type | Default | Mô tả |\n|------|------|---------|-------|\n| variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'link' | 'primary' | Kiểu hiển thị |\n| size | 'sm' | 'md' | 'lg' | 'md' | Kích thước |\n| disabled | boolean | false | Vô hiệu hóa interaction |\n| loading | boolean | false | Hiển thị spinner, auto-disable |\n| fullWidth | boolean | false | Chiếm toàn bộ width container |\n| leftIcon | ReactNode | undefined | Icon bên trái label |\n| rightIcon | ReactNode | undefined | Icon bên phải label |\n| onClick | () =\u0026gt; void | — | Handler khi click |\n| type | 'button' | 'submit' | 'reset' | 'button' | HTML button type |\n\n---\n\n### States\n\n| State | Visual | Behavior |\n|-------|--------|----------|\n| Default | Đầy đủ màu sắc | Clickable |\n| Hover | Darken 8% background | Cursor pointer |\n| Active\/Pressed | Darken 15%, scale 0.98 | — |\n| Disabled | Opacity 0.4 | Cursor not-allowed, không fire onClick |\n| Loading | Spinner thay label, disabled | aria-busy=\"true\", không fire onClick |\n\n---\n\n### Do's and Don'ts\n\n| Nên làm | Không nên làm |\n|---------|--------------|\n| Label bắt đầu bằng động từ: \"Lưu thay đổi\", \"Tạo tài khoản\" | Label mơ hồ: \"OK\", \"Tiếp tục\", \"Submit\" |\n| Dùng Danger variant cho destructive actions | Dùng Primary button màu đỏ tự tay |\n| Một Primary button mỗi khu vực | Nhiều Primary buttons cạnh nhau |\n| Loading state khi async action | Disable button sau click mà không có loading |\n| Đủ min-width 80px dù label ngắn | Button quá nhỏ, chỉ vừa text |\n\n---\n\n### Accessibility\n\n- role: button (mặc định của HTML button element)\n- Keyboard: Enter và Space để activate\n- Screen reader: Đọc label + state (\"Lưu thay đổi, loading\" khi loading)\n- Khi loading: aria-busy=\"true\", aria-label=\"Đang xử lý...\"\n- Khi disabled: aria-disabled=\"true\"\n- Min touch target: 44x44px — size \"sm\" (32px) cần padding bổ sung\n\n---\n\n### Code Example\n\nButton.tsx:\n\u0026lt;Button variant=\"primary\" size=\"md\" onClick={handleSave}\u0026gt;\n  Lưu thay đổi\n\u0026lt;\/Button\u0026gt;\n\n\u0026lt;Button variant=\"primary\" loading={isSubmitting} onClick={handleSubmit}\u0026gt;\n  Tạo tài khoản\n\u0026lt;\/Button\u0026gt;\n\n\u0026lt;Button variant=\"danger\" leftIcon={\u0026lt;TrashIcon \/\u0026gt;} onClick={handleDelete}\u0026gt;\n  Xóa sản phẩm\n\u0026lt;\/Button\u0026gt;\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eChế độ 3: Extend — Thiết kế Component Mới\u003c\/h2\u003e\n\n\u003cpre\u003e\u003ccode\u003eTôi cần thiết kế một component mới cho design system Viet UI: Empty State.\n\nContext:\n- Hiện tại chúng tôi không có empty state component — mỗi team tự design khác nhau\n- Cần dùng ở: danh sách đơn hàng trống, kết quả tìm kiếm không có, notification rỗng, dashboard mới chưa có data, giỏ hàng trống\n\nYêu cầu:\n- Fit với visual style hiện tại (clean, minimal, friendly)\n- Reusable với text và icon tùy chỉnh\n- Có CTA button option\n- Responsive\n\nHãy:\n1. Phân tích existing patterns liên quan\n2. Propose component API\n3. Xác định variants cần thiết\n4. Spec visual design\n5. Liệt kê accessibility requirements\n6. Flag open questions cần team quyết định\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch3\u003eOutput mẫu — New Component Proposal\u003c\/h3\u003e\n\n\u003cpre\u003e\u003ccode\u003e## New Component: EmptyState\n\n### Vấn đề\nKhông có empty state component → 7 loại empty state khác nhau trong codebase.\nUser experience không nhất quán khi gặp empty state.\n\n### Existing Patterns Liên quan\n| Component | Điểm chung | Chưa đủ vì |\n|-----------|-----------|------------|\n| Alert | Có icon + text | Layout vertical, không có illustration area |\n| Card | Container wrapper | Không có pattern nội dung |\n| Modal | Centered content | Không dùng inline |\n\n---\n\n### Proposed API\n\n| Prop | Type | Default | Mô tả |\n|------|------|---------|-------|\n| illustration | ReactNode | string | undefined | SVG\/image trên cùng |\n| title | string | required | Tiêu đề ngắn gọn |\n| description | string | undefined | Mô tả thêm (optional) |\n| action | ButtonProps | undefined | Primary CTA |\n| secondaryAction | ButtonProps | undefined | Secondary link\/button |\n| size | 'sm' | 'md' | 'lg' | 'md' | Ảnh hưởng illustration size |\n\n---\n\n### Variants\n\n| Variant | Khi dùng | Có illustration? |\n|---------|---------|-----------------|\n| Default | Danh sách trống chưa có data | Có |\n| Search | Kết quả tìm kiếm 0 item | Có (magnifier) |\n| Error | Lỗi load data | Có (error icon) |\n| Minimal | Trong component nhỏ (sidebar, dropdown) | Không |\n\n---\n\n### Visual Spec\n\n- Container: centered text, padding 32px vertical\n- Illustration: max-width 160px (md), tự scale\n- Title: font-heading-sm (18px, semibold), color-text-primary\n- Description: font-body-md (14px), color-text-muted, max-width 320px\n- Gap giữa illustration và title: spacing-md (16px)\n- Gap giữa title và description: spacing-xs (4px)\n- Gap giữa text và action: spacing-lg (24px)\n\n---\n\n### Accessibility\n\n- role=\"status\" trên container (thông báo state change)\n- Illustration là decorative: aria-hidden=\"true\"\n- Title dùng heading level phù hợp với context (không hardcode h2)\n\n---\n\n### Open Questions\n\n1. Chúng ta có tạo illustration library riêng không, hay dùng emoji\/icon thay thế?\n2. Empty state có cần i18n cho text mặc định không?\n3. Dark mode illustration cần separate asset không?\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eXây dựng Token System từ đầu\u003c\/h2\u003e\n\n\u003cpre\u003e\u003ccode\u003eGiúp tôi thiết kế token system cho startup fintech Việt Nam.\nBrand: Chuyên nghiệp nhưng gần gũi, màu chủ đạo xanh navy\nPlatform: Web + iOS + Android\nFramework: React (web), React Native (mobile)\nTools: Figma, Style Dictionary cho token generation\n\nTôi cần token system bao gồm:\n1. Color tokens (brand, semantic, neutral)\n2. Typography scale (phù hợp tiếng Việt có diacritics)\n3. Spacing scale\n4. Border radius\n5. Shadow\/Elevation\n6. Motion (duration, easing)\n\nFormat output: JSON compatible với Style Dictionary,\nvới naming convention phù hợp để generate sang CSS variables, iOS Swift, và Android XML.\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eMaintain và Evolve Design System\u003c\/h2\u003e\n\n\u003cp\u003eDesign system không phải dự án một lần — cần maintenance liên tục:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003eChúng tôi sắp release design system v2.0 với breaking changes:\n- Đổi spacing scale (8px base thay vì 4px base)\n- Rename color tokens (blue-500 → primary-500)\n- Button component API thay đổi (size prop: \"small\"→\"sm\", \"medium\"→\"md\")\n\nHãy giúp tôi tạo:\n1. Migration guide cho developers\n2. Codemod script (JavaScript) để auto-migrate common patterns\n3. Deprecation warnings cần add vào v1.x\n4. Communication plan cho team (thứ tự announce, timeline)\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eBước tiếp theo\u003c\/h2\u003e\n\n\u003cp\u003eDesign system tốt là nền tảng cho toàn bộ product. Khi đã có system vững, bước tiếp theo là tối ưu hóa quy trình research và synthesis để design decision luôn có data backing. Khám phá thêm tại \u003ca href=\"\/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=\"\/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=\"\/products\/claude-cho-design-user-research-t%E1%BB%AB-a-d%E1%BA%BFn-z\"\u003eClaude cho Design: User Research từ A đến Z\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/products\/claude-cho-design-danh-gia-thi%E1%BA%BFt-k%E1%BA%BF-chuyen-sau\"\u003eClaude cho Design: Đánh giá thiết kế chuyên sâu\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/products\/claude-cho-engineering-qu%E1%BA%A3n-ly-tech-debt\"\u003eClaude cho Engineering: Quản lý Tech Debt\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/products\/claude-cho-marketing-thi%E1%BA%BFt-k%E1%BA%BF-chu%E1%BB%97i-email-marketing\"\u003eClaude cho Marketing: Thiết kế chuỗi email marketing\u003c\/a\u003e\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"Minh Tuấn","offers":[{"title":"Default Title","offer_id":47722092167380,"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-xay-d_ng-design-system_ba9e96e7-282d-41ff-a6b5-e725b03ca466.jpg?v=1774521983","url":"https:\/\/claude.vn\/products\/claude-cho-design-xay-d%e1%bb%b1ng-design-system","provider":"CLAUDE.VN","version":"1.0","type":"link"}