Claude cho Design: Xây dựng Design System

Xâ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. Claude có thể tăng tốc đáng kể 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.

3 chế độ làm việc với Design System

Claude hỗ trợ 3 tasks cốt lõi:

1. Audit: Kiểm tra naming consistency, token coverage, component completeness
2. Document: Viết documentation cho component: variants, states, props, accessibility
3. Extend: Thiết kế component/pattern mới phù hợp với hệ thống

Chế độ 1: Audit Design System

Trước khi biết mình cần làm gì, phải biết mình đang ở đâu:

Tôi cần audit design system của công ty. Đây là danh sách components và tokens hiện tại.

COMPONENTS (50 components):
Buttons: btn-primary, button-secondary, btn_ghost, ButtonDanger, btn-link
Inputs: TextInput, input-search, SearchBar, text-field, InputPassword
Cards: Card, CardProduct, card-article, ProfileCard, card-stat
Modals: Modal, ModalConfirm, dialog, AlertModal, BottomSheet
Navigation: Navbar, nav-sidebar, Breadcrumb, TabBar, tab-navigation
Typography: Heading, SubHeading, body-text, caption, label-text, paragraph
Icons: dùng react-icons, không có wrapper component

DESIGN TOKENS (từ tokens.json):
Colors:
  primary: #0066CC
  primaryDark: #004F9E
  primary_light: #E8F0FE
  blue500: #3B82F6
  blue-600: #2563EB
  danger: #E53E3E
  error: #DC2626
  red500: #EF4444

Spacing:
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32, xxl: 48
  space-1: 4, space-2: 8, space-3: 12, space-4: 16, space-5: 20

Typography:
  fontSizeSmall: 12, fontSize-sm: 13, fontSizeMD: 14, fontSize-base: 16

Hãy audit và cho tôi:
1. Naming inconsistencies (convention: camelCase vs kebab-case vs PascalCase)
2. Token duplication và conflicts
3. Component gaps (thiếu states/variants gì?)
4. Điểm số tổng thể và top 5 priority fixes

Output mẫu — Audit Report

## Design System Audit
**Components reviewed:** 50 | **Issues found:** 23 | **Score: 42/100**

---

### Naming Inconsistencies — CRITICAL

#### Components (cần standardize ngay)
| Pattern sai | Ví dụ | Nên là |
|-------------|-------|--------|
| Kebab-case | btn-primary, card-article | Không dùng |
| Snake_case | btn_ghost | Không dùng |
| PascalCase | CardProduct, AlertModal | Giữ lại — adopt làm standard |
| camelCase mixed | navbar vs Navbar | Chọn 1 |

**Quyết định cần đưa ra:** Adopt PascalCase cho components. 17/50 components cần rename.

#### Tokens — Duplicates và Conflicts
| Vấn đề | Tokens | Impact |
|--------|--------|--------|
| 3 màu "primary" khác nhau | primary (#0066CC), blue500 (#3B82F6), blue-600 (#2563EB) | High — developer dùng màu sai |
| 2 màu "danger/error" | danger (#E53E3E), error (#DC2626), red500 (#EF4444) | High — inconsistent UI |
| 2 spacing scales song song | xs/sm/md/lg và space-1/space-2... | Medium — waste, confusion |

**Khuyến nghị:** Giữ semantic names (primary, danger, spacing-sm). Xóa utility names (blue500, space-1).

---

### Token Coverage
| Danh mục | Đã define | Hardcoded values tìm thấy |
|----------|-----------|--------------------------|
| Colors | 12 | ~47 instances hex hardcoded |
| Spacing | 10 | ~83 instances arbitrary px values |
| Typography | 8 | ~34 instances custom font-size |
| Border radius | 0 | ~28 instances hardcoded |
| Shadow | 0 | ~15 instances hardcoded |

**Đ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.

---

### Component Completeness
| Component | States | Variants | Documentation | Score |
|-----------|--------|----------|---------------|-------|
| Button | Partial (missing loading) | Partial (missing icon-only) | None | 4/10 |
| Input | Missing (error, success) | Missing (textarea) | None | 3/10 |
| Modal | OK | Missing (fullscreen mobile) | Partial | 6/10 |
| Card | Missing (skeleton) | OK | None | 4/10 |

---

### Top 5 Priority Fixes

1. **Standardize naming convention** — Adopt PascalCase, rename 17 components + create migration guide. Unblock team consistency ngay lập tức.

2. **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.

3. **Add border-radius và shadow tokens** — 43 hardcoded instances cần migrate. Tạo 4 border-radius levels và 4 elevation levels.

4. **Add missing states cho Button và Input** — Button loading state và Input error/success state là must-have cho production quality.

5. **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ó.

Chế độ 2: Document một Component

Viết documentation đầy đủ cho Button component trong design system của chúng tôi.

Context:
- Design system name: Viet UI
- Framework: React + TypeScript
- Styling: Tailwind CSS
- Target users: Frontend developers, designers

Thông tin component:
- Tên: Button
- Variants: primary, secondary, ghost, danger, link
- Sizes: sm (32px), md (40px), lg (48px)
- States: default, hover, active, disabled, loading
- Có thể có icon trái hoặc phải
- Full-width option

Hãy viết documentation theo format:
1. Mô tả + khi nào dùng
2. Variants table
3. Props/API
4. States
5. Do's and Don'ts
6. Accessibility
7. Code example (React + Tailwind)

Output mẫu — Component Documentation

## Component: Button

### Mô tả
Button 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.
Không dùng Button cho navigation — dùng Link hoặc anchor tag thay thế.

---

### Variants

| Variant | Khi nào dùng | Visual |
|---------|-------------|--------|
| Primary | Action chính, CTA quan trọng nhất trên màn hình | Filled background brand color |
| Secondary | Action phụ, bổ sung cho primary | Outlined, brand color border |
| Ghost | Action thứ cấp, ít quan trọng | Text only, no border |
| Danger | Destructive actions (xóa, hủy không reversible) | Red filled |
| Link | Navigation hoặc action thứ cấp nhẹ | Text với underline on hover |

**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.

---

### Props

| Prop | Type | Default | Mô tả |
|------|------|---------|-------|
| variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'link' | 'primary' | Kiểu hiển thị |
| size | 'sm' | 'md' | 'lg' | 'md' | Kích thước |
| disabled | boolean | false | Vô hiệu hóa interaction |
| loading | boolean | false | Hiển thị spinner, auto-disable |
| fullWidth | boolean | false | Chiếm toàn bộ width container |
| leftIcon | ReactNode | undefined | Icon bên trái label |
| rightIcon | ReactNode | undefined | Icon bên phải label |
| onClick | () => void | — | Handler khi click |
| type | 'button' | 'submit' | 'reset' | 'button' | HTML button type |

---

### States

| State | Visual | Behavior |
|-------|--------|----------|
| Default | Đầy đủ màu sắc | Clickable |
| Hover | Darken 8% background | Cursor pointer |
| Active/Pressed | Darken 15%, scale 0.98 | — |
| Disabled | Opacity 0.4 | Cursor not-allowed, không fire onClick |
| Loading | Spinner thay label, disabled | aria-busy="true", không fire onClick |

---

### Do's and Don'ts

| Nên làm | Không nên làm |
|---------|--------------|
| 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" |
| Dùng Danger variant cho destructive actions | Dùng Primary button màu đỏ tự tay |
| Một Primary button mỗi khu vực | Nhiều Primary buttons cạnh nhau |
| Loading state khi async action | Disable button sau click mà không có loading |
| Đủ min-width 80px dù label ngắn | Button quá nhỏ, chỉ vừa text |

---

### Accessibility

- role: button (mặc định của HTML button element)
- Keyboard: Enter và Space để activate
- Screen reader: Đọc label + state ("Lưu thay đổi, loading" khi loading)
- Khi loading: aria-busy="true", aria-label="Đang xử lý..."
- Khi disabled: aria-disabled="true"
- Min touch target: 44x44px — size "sm" (32px) cần padding bổ sung

---

### Code Example

Button.tsx:
<Button variant="primary" size="md" onClick={handleSave}>
  Lưu thay đổi
</Button>

<Button variant="primary" loading={isSubmitting} onClick={handleSubmit}>
  Tạo tài khoản
</Button>

<Button variant="danger" leftIcon={<TrashIcon />} onClick={handleDelete}>
  Xóa sản phẩm
</Button>

Chế độ 3: Extend — Thiết kế Component Mới

Tôi cần thiết kế một component mới cho design system Viet UI: Empty State.

Context:
- Hiện tại chúng tôi không có empty state component — mỗi team tự design khác nhau
- 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

Yêu cầu:
- Fit với visual style hiện tại (clean, minimal, friendly)
- Reusable với text và icon tùy chỉnh
- Có CTA button option
- Responsive

Hãy:
1. Phân tích existing patterns liên quan
2. Propose component API
3. Xác định variants cần thiết
4. Spec visual design
5. Liệt kê accessibility requirements
6. Flag open questions cần team quyết định

Output mẫu — New Component Proposal

## New Component: EmptyState

### Vấn đề
Không có empty state component → 7 loại empty state khác nhau trong codebase.
User experience không nhất quán khi gặp empty state.

### Existing Patterns Liên quan
| Component | Điểm chung | Chưa đủ vì |
|-----------|-----------|------------|
| Alert | Có icon + text | Layout vertical, không có illustration area |
| Card | Container wrapper | Không có pattern nội dung |
| Modal | Centered content | Không dùng inline |

---

### Proposed API

| Prop | Type | Default | Mô tả |
|------|------|---------|-------|
| illustration | ReactNode | string | undefined | SVG/image trên cùng |
| title | string | required | Tiêu đề ngắn gọn |
| description | string | undefined | Mô tả thêm (optional) |
| action | ButtonProps | undefined | Primary CTA |
| secondaryAction | ButtonProps | undefined | Secondary link/button |
| size | 'sm' | 'md' | 'lg' | 'md' | Ảnh hưởng illustration size |

---

### Variants

| Variant | Khi dùng | Có illustration? |
|---------|---------|-----------------|
| Default | Danh sách trống chưa có data | Có |
| Search | Kết quả tìm kiếm 0 item | Có (magnifier) |
| Error | Lỗi load data | Có (error icon) |
| Minimal | Trong component nhỏ (sidebar, dropdown) | Không |

---

### Visual Spec

- Container: centered text, padding 32px vertical
- Illustration: max-width 160px (md), tự scale
- Title: font-heading-sm (18px, semibold), color-text-primary
- Description: font-body-md (14px), color-text-muted, max-width 320px
- Gap giữa illustration và title: spacing-md (16px)
- Gap giữa title và description: spacing-xs (4px)
- Gap giữa text và action: spacing-lg (24px)

---

### Accessibility

- role="status" trên container (thông báo state change)
- Illustration là decorative: aria-hidden="true"
- Title dùng heading level phù hợp với context (không hardcode h2)

---

### Open Questions

1. Chúng ta có tạo illustration library riêng không, hay dùng emoji/icon thay thế?
2. Empty state có cần i18n cho text mặc định không?
3. Dark mode illustration cần separate asset không?

Xây dựng Token System từ đầu

Giúp tôi thiết kế token system cho startup fintech Việt Nam.
Brand: Chuyên nghiệp nhưng gần gũi, màu chủ đạo xanh navy
Platform: Web + iOS + Android
Framework: React (web), React Native (mobile)
Tools: Figma, Style Dictionary cho token generation

Tôi cần token system bao gồm:
1. Color tokens (brand, semantic, neutral)
2. Typography scale (phù hợp tiếng Việt có diacritics)
3. Spacing scale
4. Border radius
5. Shadow/Elevation
6. Motion (duration, easing)

Format output: JSON compatible với Style Dictionary,
với naming convention phù hợp để generate sang CSS variables, iOS Swift, và Android XML.

Maintain và Evolve Design System

Design system không phải dự án một lần — cần maintenance liên tục:

Chúng tôi sắp release design system v2.0 với breaking changes:
- Đổi spacing scale (8px base thay vì 4px base)
- Rename color tokens (blue-500 → primary-500)
- Button component API thay đổi (size prop: "small"→"sm", "medium"→"md")

Hãy giúp tôi tạo:
1. Migration guide cho developers
2. Codemod script (JavaScript) để auto-migrate common patterns
3. Deprecation warnings cần add vào v1.x
4. Communication plan cho team (thứ tự announce, timeline)

Bước tiếp theo

Design 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 bộ sưu tập Ứng dụng Claude cho Design.

Bài viết liên quan

• Claude cho Design: Accessibility Review tự động
• Claude cho Design: User Research từ A đến Z
• Claude cho Design: Đánh giá thiết kế chuyên sâu
• Claude cho Engineering: Quản lý Tech Debt
• Claude cho Marketing: Thiết kế chuỗi email marketing