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

Cơ chế design system trong Claude Design

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.

                        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           │
              └──────────────────────┘

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ướ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:

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ị:

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

Hit Generate. Claude:

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

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

Sau audit, dashboard hiện ra. Layout:

Quy tắc review:

• 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
• 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").
• Audits Figma file (parse component, styles, color, text styles)
• Builds README (markdown documentation)
• Generates color system (light + dark mode)
• Generates typography scale
• Lists components found
• Bắt đầu từ trên xuống — không skip
• Compare với Figma source — mở Figma side-by-side
• Approve cái đúng. Reject + feedback specific cái sai
• Fix 1 section trước khi review next — tránh cascade error

┌────────────────────────────────────────────────┐
│  [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]                    │
└────────────────────────────────────────────────┘

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:

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:

Drift #3: Color hex codes drift

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

Fix:

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:

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:

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:

• 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)
• 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."
• Click Needs work ở Color palette
• Comment: "Exact hex codes from source: primary #FF6B35, accent #00D9A3, neutrals #1A1F3A / #5C6678 / #E8EBF2. Don't approximate."
• Re-generate
• Click Needs work ở Border radius
• Comment: "Restrict radius scale to exactly: 4, 8, 16, full. No intermediate values."
• 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.
• 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:

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

Bước 2: Dashboard hiện

Bước 3: Review từng section

Color palette:

Typography:

• 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."
• Open Figma → compare
• Hex: ✅ matches 5/6 colors
• Drift: 1 neutral hex slightly off (#7A7B82 vs source #7A7C84)
• Decision: comment fix → 30s
• ⚠️ 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

✅ 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

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

Components:

Spacing & Border radius:

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

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

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ả

• 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: ✅ 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
• Output button: #00D9A3 (green) ❌
• Drift cấp rule không tự fix qua re-generate Components
• 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

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

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:

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:

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:

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:

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.

• 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
• 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
• 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
• 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

Prompt template — Comment để fix drift

Template DS-1: Fix typography hierarchy

Template DS-2: Fix color palette

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

Template DS-3: Restrict spacing/radius scale

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

Template DS-4: Add missing components

[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

Template DS-5: Define rule (cho README)

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)

Template DS-6: Re-upload font fix

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:

❌ 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:

❌ 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:

❌ 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:

❌ 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:

❌ 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:

• 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
• Mở Figma source side-by-side với dashboard
• Spot check 3-5 random component / color / size
• Approve chỉ sau verify
• 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ể
• Exploration: không design system. Generate freely. Pick direction.
• Production: design system on. Apply to chosen direction.
• Don't mix 2 phase.
• Sau audit, export README → markdown file
• Lưu Notion / GitHub repo / shared drive
• Là source-of-truth cho hand-off dev và onboard team
• 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:

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":

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:

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:

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:

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

• "Generic SaaS B2B" — fallback brand cho client chưa có brand
• "Generic E-commerce" — fallback cho retail client
• "Generic Content/Media" — cho publication client
• 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
• "UI Collective v1" (current production)
• "UI Collective v2" (in-progress redesign)

## 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

Á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:

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:

Bước 6 — Publish + reflect:

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:

• 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)
• Brand consistency vs design system: ___/10
• Token tiêu: ___%
• 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?
• 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

🎯 Design system trong Claude Design = upload + audit + section-review + publish — front-loaded investment, mọi prototype kế thừa.

🎯 Paradox của guardrails — Claude generate đẹp hơn khi không design system. Có design system → conservative. Trade-off: brand consistency vs creative output.

🎯 Decision rule: ≥3 prototype cùng brand → upload design system. <3 → skip. Pre-explore cho ý tưởng → đừng dùng design system.

🎯 6 drift phổ biến — typography hierarchy, font recognition, color hex, radius extras, components subset, rule violations. Mỗi drift có template fix specific.

🎯 Section-by-section review > approve all — verify với Figma source side-by-side. Specific feedback rẻ hơn re-generate.

🎯 Strict mode + Rule sheet — viết rules explicit trong README để non-designer contributor follow. Cải thiện adherence ~20%.

🎯 Export README markdown — single source of truth. Không phụ thuộc Claude Design.