20.6 · Design system trên Claude — upload, audit, publish, reuse

Mở đầu: 75 trang Figma trong 5 phút audit

Tôi upload Figma file 75 pages của UI Collective. Đợi 5 phút, Claude generate full design system dashboard.

5 phút thay vì... bạn biết design system mất bao lâu xây tay. 2-6 tháng cho một brand serious. Audit thì không bao giờ end — luôn có drift mới phát hiện.

Nhưng câu chuyện không dừng ở 5 phút.

Khi Kirk review dashboard:

• Color palette: Đúng ~95%
• Typography: Display "displays" generated mà nguồn không có (chỉ có "h-tags" + "hero")
• Font: Không recognize đúng custom fonts (mặc dù Kirk đã upload font files)
• Border radius: Thừa 1-2 size không có trong Figma source
• Components: Pull subset chứ không full library

Kirk's verdict: "Great first start, nhưng output không-design-system tốt hơn output có-design-system."

Đây là paradox quan trọng: Claude generate đẹp hơn khi không có guardrails. Đưa design system vào — nó phải reconcile creative output với constraint → output nhạt hơn, drift xảy ra.

Vậy có nên dùng design system trong Claude Design?

Có, nhưng phải hiểu khi nào. Bài này dạy bạn cách upload đúng, audit đúng, và quyết định trade-off.

Cơ chế design system trong Claude Design

                        BẠN UPLOAD
                           │
                           ▼
       ┌─────────────────────────────────────┐
       │                                     │
       │  Figma file (.fig)                  │
       │  + Optional: font files (.ttf/.otf) │
       │  + Optional: brand blurb (text)     │
       │  + Optional: existing landing URL   │
       │                                     │
       └─────────────────┬───────────────────┘
                         │
                         ▼
              ┌──────────────────────┐
              │  CLAUDE AUDIT        │  ~5-15 phút
              │  - Parse Figma file  │  Token: cao
              │  - Extract: colors,  │
              │    typo, components, │
              │    spacing, radius   │
              │  - Build README      │
              └──────────┬───────────┘
                         │
                         ▼
              ┌──────────────────────┐
              │  DASHBOARD section   │
              │  ─────────────────   │
              │  Color palette ──────│──▶ ✅ Looks good / ⚠️ Needs work
              │  Typography ─────────│──▶ ✅ / ⚠️
              │  Components ─────────│──▶ ✅ / ⚠️
              │  Spacing ────────────│──▶ ✅ / ⚠️
              │  Border radius ──────│──▶ ✅ / ⚠️
              │  ...                 │
              └──────────┬───────────┘
                         │
                         ▼
              ┌──────────────────────┐
              │  PUBLISH design system│
              │  → Available trong   │
              │    "Design Systems"  │
              │    nav, apply mọi    │
              │    project           │
              └──────────────────────┘

3 đặc điểm quan trọng:

• Audit = generate, không phải import. Claude đọc Figma rồi tự build representation. → drift inevitable.
• Section-by-section approval. Bạn không phải approve toàn hệ thống một lần. Approve color, comment fix typography, approve components.
• Publish = persistent. Sau publish, design system available cho mọi project trong workspace. Không cần upload lại.

Trade-off: Có vs không có design system

Đây là paradox Kirk phát hiện. Hiểu rõ trước khi quyết định upload.

Paradox: Claude không-guardrails generate creative hơn. Có guardrails (design system) generate conservative hơn vì phải fit constraint.

Khi nào DÙNG design system

✅ Multi-prototype project — bạn sẽ làm 5+ prototype cùng brand. Token đầu tư audit trả về.

✅ Agency reuse — 1 client = 1 design system, apply cho cả mockup deck, landing, app screens.

✅ In-house product team — đã có Figma library production, muốn extend vào AI workflow.

✅ Brand-critical project — pitch khách hoặc launch, consistency quan trọng hơn novelty.

Khi nào KHÔNG dùng design system

❌ Exploration phase — đang brainstorm ý tưởng, chưa biết direction. Guardrails giết creativity.

❌ One-off prototype — chỉ làm 1 mockup pitch. Audit overhead không trả về.

❌ Token budget tight — Pro plan, audit + fixes có thể ăn 30-40% monthly budget.

❌ Design system Figma quá complex — 100+ components, multiple page templates → token khổng lồ, drift cao.

Workflow upload Figma — chi tiết

Bước 1: Chuẩn bị Figma file

Trước khi upload, clean Figma:

• Bỏ page template lớn không cần (page mockup full-page tốn token nặng)
• Giữ component library + style guide page (cái Claude cần audit)
• Loại bỏ rogue fonts — bất kỳ text không trong system → fix hoặc xoá
• Đảm bảo color styles + text styles được publish

Bước 2: Vào Claude Design → Create design system

Có 2 đường vào:

Đường A

Click "Set up design system" banner ở project mới (không phải lúc nào cũng hiện).

Đường B

Vào Design Systems → + New design system.

Bước 3: Điền form

Form upload có 4 phần:

┌────────────────────────────────────────────┐
│  ① Company name (required)                 │
│  Ví dụ: "VajraPro" / "UI Collective"       │
├────────────────────────────────────────────┤
│  ② Blurb (optional)                        │
│  Brand description, audience, philosophy   │
│  → Claude dùng để hỏi questions tốt hơn    │
├────────────────────────────────────────────┤
│  ③ Upload Figma file (required cho audit)  │
│  - Choose pages: all 75 / select subset    │
│  - Upload font files (optional)            │
├────────────────────────────────────────────┤
│  ④ Other notes (optional)                  │
│  Ví dụ: "Buttons phải pill shape, never    │
│  rounded square"                           │
└────────────────────────────────────────────┘

Kirk's experience về phần ②: "Tôi đã thử với và không có blurb. Khác biệt không lớn vì Claude vẫn hỏi questions khi prompt về sau."

Khuyến nghị:

• Blurb: 2-3 câu súc tích — domain + audience + 1 design philosophy chính.
• Page selection: chỉ chọn pages có component library + style guide, không page mockup full.
• Font files: upload nếu custom fonts. Nếu Google Fonts → có thể skip.
• Other notes: dùng cho constraint critical ("buttons không bao giờ X", "color X chỉ dùng cho success state").

Bước 4: Generate (5-15 phút)

Hit Generate. Claude:

1. Audits Figma file (parse component, styles, color, text styles)
2. Builds README (markdown documentation)
3. Generates color system (light + dark mode)
4. Generates typography scale
5. Lists components found

Bạn thấy spinner. Đừng switch tab — chờ.

Bước 5: Dashboard review section-by-section

Sau audit, dashboard hiện ra. Layout:

┌────────────────────────────────────────────────┐
│  [Brand name] Design System                    │
├────────────────────────────────────────────────┤
│  📋 README (auto-generated)                    │
├────────────────────────────────────────────────┤
│  🎨 Color palette                              │
│   Primary, Secondary, Accent, Neutral          │
│   Light mode + Dark mode                       │
│   [Looks good] [Needs work]                    │
├────────────────────────────────────────────────┤
│  🔤 Typography                                 │
│   Display, Body, Hierarchy scale               │
│   [Looks good] [Needs work]                    │
├────────────────────────────────────────────────┤
│  🧩 Components                                 │
│   Button, Card, Input, Switch, ...             │
│   [Looks good] [Needs work]                    │
├────────────────────────────────────────────────┤
│  📐 Spacing                                    │
│   Scale: 4, 8, 12, 16, 24, 32, 48              │
│   [Looks good] [Needs work]                    │
├────────────────────────────────────────────────┤
│  🔲 Border radius                              │
│   Scale: 4, 8, 16                              │
│   [Looks good] [Needs work]                    │
└────────────────────────────────────────────────┘

Quy tắc review:

1. Bắt đầu từ trên xuống — không skip
2. Compare với Figma source — mở Figma side-by-side
3. Approve cái đúng. Reject + feedback specific cái sai
4. Fix 1 section trước khi review next — tránh cascade error

Drift issues phổ biến — Cách fix

Drift #1: Typography hierarchy mismatch

Triệu chứng: Claude generate "displays" trong khi Figma có "h-tags" + "hero". Sizes wrong (Figma có 16, 20 — Claude generate 14, 18).

Fix:

• Click Needs work ở Typography
• Comment: "Type scale doesn't match source. Source has h1, h2, h3, body, caption + 1 hero. Don't add 'displays' category. Use exact sizes: [list từ Figma]."
• Re-generate Typography section (~2-3 phút)

Drift #2: Font recognition fail

Triệu chứng: Claude báo "missing brand fonts, using substitute". Output dùng Inter (default) thay vì custom font đã upload.

Fix:

• Trong dashboard, scroll xuống "Fonts" section
• Click "Re-upload fonts" (nếu có button)
• Hoặc comment: "Custom fonts uploaded: [Font A], [Font B]. Use these as primary, not Inter substitute."

Drift #3: Color hex codes drift

Triệu chứng: Figma có #FF6B35, Claude generate #FF7B45 (gần nhưng không exact).

Fix:

• Click Needs work ở Color palette
• Comment: "Exact hex codes from source: primary #FF6B35, accent #00D9A3, neutrals #1A1F3A / #5C6678 / #E8EBF2. Don't approximate."
• Re-generate

Drift #4: Border radius extras

Triệu chứng: Figma có 4 radius (4, 8, 16, full). Claude generate 6 radius (4, 6, 8, 12, 16, full).

Fix:

• Click Needs work ở Border radius
• Comment: "Restrict radius scale to exactly: 4, 8, 16, full. No intermediate values."

Drift #5: Components subset only

Triệu chứng: Figma có 30 components. Claude generate 12.

Đây thường KHÔNG phải bug — Claude pick 12 components phổ biến dùng nhất. Đầy đủ 30 components tốn token nhiều, value thấp (nhiều variant rare).

Fix nếu cần:

• Comment với specific components missing: "Missing essential components: [Avatar group], [Tab bar], [Date picker]. Add these."
• Don't comment "pull all 30 components" — Claude khó reason about completeness.

Drift #6: Color không strictly follow design system rules

Triệu chứng: Brand có rule "green chỉ dùng cho success state". Claude apply green cho buttons, accents tùy ý.

Đây là Kirk's biggest complaint — drift cấp rule, không phải cấp value.

Fix:

• Trong "Other notes" lúc setup, list rules explicit:
• · "Color X only for [purpose]"
• · "Primary buttons must be [color], never [color]"
• Sau audit, nếu vẫn drift, comment specific: "In dashboard, primary buttons should be #1A1A1A (dark gray, almost black), not #00D9A3 (green). Green reserved for success indicators only."

Ví dụ thực chiến: Audit + fix UI Collective design system

Tình huống

Bạn là Kirk @UI Collective. Bạn upload UI Collective design system Figma (75 pages, internal academy product).

Bước 1: Setup

Form điền:

• Company: UI Collective
• Blurb: "UI Collective Academy — design education platform. Audience: senior designers + design leads. Philosophy: minimal, professional, education-grade clarity."
• Figma: all 75 pages attached
• Fonts: uploaded brand custom font (Suisse Int'l Mono + Sohne)
• Other notes: "Buttons primary là dark gray, không bao giờ green. Green chỉ dùng cho success states."

Hit Generate. Đợi ~12 phút.

Bước 2: Dashboard hiện

✅ README — generated, accurate
🎨 Color palette — light + dark mode
   Primary, Secondary, 3 Accents, 5 Neutrals
   ⚠️ Banner: "Missing brand fonts, using substitute"
🔤 Typography — Display, Body, 7 levels hierarchy
🧩 Components — 18 components extracted
📐 Spacing — 8 levels scale
🔲 Border radius — 6 sizes

Bước 3: Review từng section

Color palette:

• Open Figma → compare
• Hex: matches 5/6 colors
• Drift: 1 neutral hex slightly off (#7A7B82 vs source #7A7C84)
• Decision: comment fix → 30s

Typography:

• Banner missing brand fonts → fix qua re-upload font
• Generated "Displays" — Figma không có. Có "h-tags" + "Hero".
• Sizes: line-heights wrong on h2 (32 generated vs 36 source)
• Decision: Needs work + comment → ~2 phút

Comment: "Typography hierarchy doesn't match. Use exact source:
- Hero: 64/72 Display font weight 700
- h1: 48/56 Display weight 600
- h2: 32/36 Display weight 500
- h3: 24/32 Display weight 500
- body: 16/24 Body regular
- caption: 12/18 Body regular

Remove 'Displays' category — not in source.
Custom fonts uploaded: Suisse Int'l Mono (Display), Sohne (Body).
Don't substitute Inter."

Re-generate Typography. ~3 phút. Output v2: ✅ matches.

Components:

• 18 generated, 30 trong Figma
• Missing: Avatar group, Tab bar, Date picker (3 essential)
• Có: Button, Card, Input, Switch, Modal, Toast, ...
• Decision: comment add 3 missing → ~2 phút

Spacing & Border radius:

• Spacing: matches 8 levels
• Radius: 6 generated, source 4 (4, 8, 16, full). Drift: thừa 6, 12.
• Decision: Needs work + comment "restrict to 4, 8, 16, full" → 30s
• Re-generate ~1 phút

Bước 4: Apply rules check

Trong "Other notes" có rule "primary buttons dark gray, không green".

Test: tạo prototype thử nhỏ (~3 phút) — "build me a card with primary CTA button".

• Output button: #00D9A3 (green)
• Drift cấp rule không tự fix qua re-generate Components

Fix: Mở README design system → comment ngay đầu README:

RULE CRITICAL: Primary buttons must use color #1A1A1A (dark gray, near black). Color green #00D9A3 reserved for success states ONLY (toast, badges, indicators). Never as button background.

Re-test prototype → button đúng dark gray.

Bước 5: Publish

Tất cả section ✅. Click Publish design system.

Design system "UI Collective" giờ available trong Design Systems nav. Mỗi project mới có thể chọn apply.

Kết quả

• Total time: 32 phút (audit 12 + review/fix 15 + test 5)
• Token tốn: ~20% Pro plan (audit nặng + 4 round comment fix)
• Quality post-fix: 8/10 (vẫn không 10 — drift cấp rule có thể tái diễn)
• Reusability: mọi prototype future trong project = inherit, token thấp

🎯 Ghi nhớ: Audit + fix design system front-loaded cost — đầu tư 20-30% Pro plan 1 lần. Sau đó mọi prototype trong workspace inherit free. Trade-off worth it nếu sẽ làm 5+ prototype.

Ví dụ theo ngành / Case studies

In-house product designer — extend Figma library vào AI workflow

Pain: "Figma library production của team mình 6 tháng xây. Designer mới onboard học 1 tuần. Giờ team muốn dùng Claude Design — phải quay lại config từ đầu cho mỗi prototype?"

Workflow:

• Upload Figma library → Claude Design audit → fix drift 1-2 round
• Publish design system "Internal Product"
• Onboard team: prototype mới chỉ cần "use Internal Product design system"
• Designer mới onboard Claude Design = 1 ngày thay vì 1 tuần

Kết quả: Team adoption Claude Design tăng 3x. Brand consistency cross-prototype 9/10.

Agency design lead — multi-client design system

Pain: "Mình work với 5 client cùng lúc, mỗi client có brand. Trong Figma mình quản lý 5 file. Trong Claude Design — phải retype mỗi lần?"

Workflow:

• Upload từng client Figma → Claude Design design system riêng
• Workspace có 5 design system: "Client A", "Client B", ..., "Client E"
• Mỗi prototype mới: chọn client design system → apply

Kết quả: Quản lý 5 brand parallel. Mỗi client switching < 30 giây. Token cost 1 lần upload, tiết kiệm sau dài hạn.

Founder — sau brand synthesis từ Bài 5

Pain: "Mình synthesis brand từ zero (Bài 5). Giờ muốn formalize thành design system production-grade?"

Workflow:

• Output synthesis từ Bài 5 → paste vào blurb section của Claude Design "Create design system"
• KHÔNG upload Figma (chưa có)
• Để Claude tự generate design system từ brand language synthesis
• Audit dashboard → review color/typography/components → publish

Kết quả: Design system production-ready từ scratch trong 60 phút (synthesis 30 + design system 30). Total cost: $20 sub.

Brand designer freelance — pitch package cho client

Pain: "Client request 'design system documentation' kèm brand identity. Figma + Notion + PDF docs = 2 tuần."

Workflow:

• Synthesis brand → push vào Claude Design design system
• Auto-generate README → export markdown → polish trong Notion
• Auto-generate color/typography scale → screenshot → paste PDF
• Total deliverable: 1 ngày thay vì 2 tuần

Kết quả: Pitch package quality cao, freelance margin tăng. Client thấy "professional design system docs" mà không tốn 2 tuần.

Prompt template — Comment để fix drift

Template DS-1: Fix typography hierarchy

Typography hierarchy doesn't match source. Use exactly:
- [Level 1]: [size]/[line-height] [font name] weight [N]
- [Level 2]: [size]/[line-height] [font name] weight [N]
- [Level 3]: ...

Remove [unwanted category, ví dụ: "Displays"]. Don't substitute fonts —
use uploaded brand fonts: [list].

Template DS-2: Fix color palette

Color palette has drift. Exact hex codes from source:
- Primary: #[hex]
- Secondary: #[hex]
- Accent: #[hex]
- Neutrals: #[hex], #[hex], #[hex], #[hex]
- Semantic (success/warning/error): #[hex], #[hex], #[hex]

Don't approximate. Don't add intermediate shades.

Template DS-3: Restrict spacing/radius scale

[Spacing | Border radius] has extras. Restrict to exactly:
- [list of values]

Don't add intermediate values [list extras to remove].

Template DS-4: Add missing components

Missing essential components from library:
- [Component 1]: [brief use case]
- [Component 2]: [brief use case]
- [Component 3]: [brief use case]

Add these. Variants needed: [default, hover, active, disabled].

Template DS-5: Define rule (cho README)

RULE: [Color/Component/Pattern] [must / must not] be used [context].

Example:
- Primary buttons must use [color X], never [color Y]
- Success color [hex] reserved for indicators only (toast, badge),
  never button backgrounds
- Border radius [value] for cards, [value] for buttons, [value] full
  for avatar/pills

Template DS-6: Re-upload font fix

Custom fonts uploaded but not recognized:
- Display: [Font name] ([weights uploaded])
- Body: [Font name] ([weights])

Don't fall back to Inter. Use uploaded files. If file format issue,
fonts are also available on [Google Fonts / Adobe Fonts] with names:
[list canonical names].

Anti-patterns — Sai lầm thường gặp

Upload toàn bộ Figma file 200+ pages

Bạn excited, upload everything.

Tại sao sai: Token cost khổng lồ (audit 30+ phút), drift tăng do Claude phải reason qua nhiều page mockup không relevant.

Cách đúng:

• Trim Figma trước upload — chỉ giữ component library + style guide page
• Page mockup riêng → upload separate khi cần (specific prototype)
• 75 pages OK (Kirk's case), 200+ trade-off cao

Approve toàn bộ section mà chưa compare Figma source

Lười, click "Looks good" hết.

Tại sao sai: Drift accumulate. Output downstream không match brand. Phát hiện sau khi đã làm 5 prototype = tốn token re-do.

Cách đúng:

• Mở Figma source side-by-side với dashboard
• Spot check 3-5 random component / color / size
• Approve chỉ sau verify

Reject toàn bộ section không cụ thể feedback

Click "Needs work" rồi gõ "not right, fix".

Tại sao sai: Claude không biết fix gì → guess → có thể fix sai. 1-2 round wasted.

Cách đúng:

• Feedback specific với reference Figma
• Template: "Source has [X]. Generated has [Y]. Fix to match source: [Z exact value]"
• Mỗi round comment 1 issue cụ thể

Dùng design system cho exploration phase

Bạn đang brainstorm direction, mà gắn design system → output conservative.

Tại sao sai: Guardrails giết creativity. Brand chưa solid → design system bóp Claude vào local optimum (không phải global).

Cách đúng:

• Exploration: không design system. Generate freely. Pick direction.
• Production: design system on. Apply to chosen direction.
• Don't mix 2 phase.

Không export README markdown

Audit xong, README có sẵn trong Claude Design — bạn không export.

Tại sao sai: Single point of failure. Claude Design crash / xoá design system / migration → lost docs.

Cách đúng:

• Sau audit, export README → markdown file
• Lưu Notion / GitHub repo / shared drive
• Là source-of-truth cho hand-off dev và onboard team

Re-upload Figma mỗi khi update

Mỗi update minor Figma (thêm 1 component) → re-upload toàn bộ → re-audit từ đầu.

Tại sao sai: Re-audit là full token cost. Drift có thể introduce lại.

Cách đúng:

• Update minor → comment specific: "Add new component [X] với variants [list]"
• Update major (>20% change) → mới re-upload
• Maintain "last upload: [date]" log để track

Mẹo nâng cao

Mẹo 1: "Strict mode" trong README

Sau publish design system, edit README thêm dòng:

STRICT MODE: Mọi output phải dùng exact values trong design system. Approximation không acceptable. Nếu Claude unsure về 1 value, ask before generate.

Cải thiện adherence ~15-20%. Đặc biệt hữu ích khi project brand-critical.

Mẹo 2: "Rule sheet" ngắn gọn cho non-designer team

Trong README, thêm section "Rules for non-designer contributors":

Quick rules

✅ ALWAYS:

• Primary buttons: dark gray
• Success indicators: green (toast, badge only)
• Spacing: scale 4-32, no intermediate
• Border radius: 4 (small), 8 (default), 16 (large), full (avatar/pill)

❌ NEVER:

• Green buttons (use dark gray)
• Yellow text (accessibility)
• Mix 3+ accent colors trên 1 screen
• Custom font outside uploaded brand fonts

PM, marketer, dev đọc 30 giây hiểu — apply consistent.

### Mẹo 3: Multi-system workflow trong agency

Maintain 1 workspace per client, nhưng dùng "*template design system*" cho startup mới:

- "*Generic SaaS B2B*" — fallback brand cho client chưa có brand
- "*Generic E-commerce*" — fallback cho retail client
- "*Generic Content/Media*" — cho publication client

Khi client onboard, copy template → customize blurb + colors → 30 phút có design system v0. Client có brand sau → upload → upgrade design system.

### Mẹo 4: A/B test 2 design system cho cùng prototype

Khi không chắc giữa 2 brand direction:

- Tạo 2 design system "Direction A", "Direction B"
- Apply same prototype với mỗi design system
- Compare side-by-side
- Pick winner → invest production

Cost: 2x token cho 1 prototype. Reward: data-driven brand decision.

### Mẹo 5: Versioning design system

Khi update major design system, **không overwrite** — duplicate:

- "*UI Collective v1*" (current production)
- "*UI Collective v2*" (in-progress redesign)

Apply v1 cho production prototype, v2 cho exploration. Migrate dần. Avoid breaking prototype existing.

---

Áp dụng ngay

Bài tập 1: Upload + audit 1 design system (~45 phút)

Bước 1 — Chọn source (5 phút):

Lựa 1 trong 3:

• Figma file design system bạn đang dùng (work / personal)
• Output brand synthesis từ Bài 5 (paste vào blurb, không upload Figma)
• Free design system online (ví dụ: Material Design Figma kit)

Bước 2 — Upload + setup (5 phút):

Bước 3 — Wait audit (10-15 phút):

Thời gian thực tế: ___ phút. Token tiêu (% monthly): ___%.

Bước 4 — Review section-by-section (15 phút):

Bước 5 — Test prototype với design system (5 phút):

Tạo 1 prototype nhỏ (1-screen) "build me a card with [your brand] design system". Note:

• Brand consistency vs design system: ___/10
• Token tiêu: ___%

Bước 6 — Publish + reflect:

• Total time: ___ phút
• Worth investment? Y/N
• Project sắp tới sẽ làm bao nhiêu prototype tận dụng design system này?

Bài tập 2 (advanced): Compare with vs without (~30 phút)

Tạo cùng 1 prototype với 2 setting:

Setting A: Không design system, prompt từ scratch. Setting B: Design system bạn vừa publish ở Bài tập 1.

Reflection:

• Setting nào "đẹp hơn" first draft?
• Setting nào "brand-tighter"?
• Setting nào hợp use case của bạn?

Tóm tắt bài học

Tài liệu tham khảo

• Kirk @UI Collective — Claude Design: The Complete Guide — phần upload UI Collective design system 75 pages, drift analysis
• Figma — Design system best practices
• Material Design Figma Kit — free design system để test upload
• Atomic Design — Brad Frost (sách classic về design system structure)

Câu hỏi để giữ tinh thần đúng: design system của bạn đang serve brand consistency hay đang giết creativity? Cả 2 đều có thể true. Designer giỏi biết khi nào on khi nào off design system. Tool không tự biết — bạn biết.