Design system cho Claude Design: 6 bước thực hành

Bạn đã hiểu vì sao giao diện AI thường trở nên đại trà, nhưng bắt đầu xây design system từ đâu? Đây là phần 2 của series về Claude Design. Nếu chưa đọc phần mở đầu, bạn nên xem trước cách tránh giao diện AI đại trà bằng design system để hiểu bối cảnh và các nguyên tắc nền tảng.

Bài này đi thẳng vào thực hành: 6 bước xây design system cho Claude Design, các code block mẫu có thể tái sử dụng, những lỗi thường gặp và bài học đáng mượn từ Google Stitch DESIGN.md.

Bước 1: Xác định visual vocabulary trước khi prompt

Trước khi yêu cầu AI dựng màn hình, hãy dành khoảng 20 phút ghi rõ các quy tắc thị giác bằng văn bản. Design system cho Claude Design cần biến cảm giác mơ hồ thành giá trị cụ thể, có vai trò và có giới hạn.

Typography: Chỉ định chính xác font và scale

Đừng chỉ viết “dùng serif font”. Hãy ghi tên font, scale, line-height và weight:

Primary typeface: Instrument Serif (Google Fonts)
UI typeface: DM Sans
Monospace: Fira Code

Heading scale: 48px / 36px / 28px / 22px / 18px
Body: 16px, line-height 1.6
Small: 13px, line-height 1.5

Font weights: 400 (body), 500 (labels), 600 (headings)
No bold (700) anywhere except marketing hero text

Color palette: Gắn màu với vai trò

Claude sẽ ít tự ý thêm màu nếu mỗi token có mục đích rõ ràng:

--color-bg: #F5F0E8        /* warm off-white, main background */
--color-surface: #FFFDF8   /* card/panel surface */
--color-text: #1A1714      /* near-black, main copy */
--color-text-muted: #6B6560
--color-primary: #B84A2F   /* terracotta red, CTAs and links */
--color-primary-hover: #9A3A22
--color-border: #E0D9D0
--color-error: #C0392B

Thêm negative constraints nếu cần: không dùng xanh dương hoặc tím, không dùng nền trắng tinh và không đặt chữ xám trên nền xám.

Spacing, shape và shadow: Ghi cả điều được dùng lẫn điều cấm

Base unit: 4px
Common spacings: 4, 8, 12, 16, 24, 32, 48, 64

Border radius: 4px for buttons and inputs, 8px for cards, 0px for panels
No rounded-full / pill shapes
Borders: 1px solid, never 2px+

Shadows: single light shadow only, no multi-layer
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08)
  No elevation shadows or dramatic depth effects

Component và personality: Định nghĩa cảm giác tổng thể

Buttons: flat, no gradient, 4px radius, 14px uppercase tracking-wide label
Inputs: white fill, 1px border, focus ring in primary color
Tables: zebra striping in surface color, no outer border
Navigation: left sidebar, no icons, text-only links at 14px

Visual personality: editorial, warm, considered, slightly formal
Anti-examples: corporate SaaS, Stripe-lookalike, "startup modern", glassmorphism, dark mode default
References: Stripe Press, A24 website, Notion editorial pages

Bước 2: Định dạng design system để Claude sử dụng

Bạn có thể đặt toàn bộ context ở đầu prompt hoặc duy trì file riêng để tái sử dụng giữa các session. Với một task ngắn, inline prompt là đủ. Với dự án nhiều màn hình, file design-system.md giúp đội ngũ tránh mô tả lại từ đầu.

Option A: Inline prompt prefix

## Design System

[paste your design system here]

---

## Task

Build a three-panel dashboard layout for a content calendar tool.
The left panel shows a list of scheduled posts. The center panel
shows the selected post editor. The right panel shows publish
settings and status.

Follow the design system above exactly. Do not introduce any
colors, fonts, or border treatments not listed.

Dòng cuối rất quan trọng: nếu không chặn rõ, AI có thể bổ sung font, màu hoặc border treatment theo mặc định khi gặp trường hợp tài liệu chưa đề cập.

Option B: Project-level system context

Với dự án dài hơn, hãy lưu file trong repository và nạp lại ở đầu mỗi cuộc hội thoại. Đừng giả định session mới tự nhớ toàn bộ quyết định cũ. Tư duy này cũng phù hợp với luồng chuyển thiết kế thành code, nơi tài liệu trung gian giúp designer và developer thống nhất cách hiểu.

Bước 3: Test một component trước khi dựng trang

Trước khi yêu cầu dựng toàn bộ website, hãy test design system trên một component riêng lẻ. Đây là cách rẻ nhất để phát hiện tài liệu còn thiếu chi tiết.

Using the design system above, build a single primary CTA button
in three states: default, hover, and disabled.

Khi nhận kết quả, kiểm tra bốn điểm:

• AI có dùng đúng mã hex hay không?
• Border radius có đúng token không?
• AI có tự thêm gradient hoặc shadow ngoài quy tắc không?
• Font có đúng tên và weight không?

Nếu có sai lệch, hãy sửa tài liệu trước rồi test lại. Đừng dựng thêm mười màn hình trên nền component chưa ổn định.

Bước 4: Khóa layout trước khi thêm nhiều component

Giao diện AI thường trở nên đại trà từ cấp layout, không chỉ từ button hay card. Một CTA màu đất nung đặt trong hero SaaS quen thuộc vẫn tạo cảm giác giống hàng chục landing page khác.

Hãy nói rõ những layout pattern không được dùng:

This site does not use:
- Full-width hero sections with centered text
- Icon-grid "feature sections"
- Testimonial carousels
- Footer with three-column link lists

Instead, use editorial-style layout: long-form column, pull quotes,
inline figures. Think magazine, not SaaS marketing page.

Negative constraints là phần dễ bị bỏ quên. Khi bạn chỉ mô tả điều muốn có, AI vẫn giữ quyền điền các khoảng trống bằng pattern mặc định. Khi nói rõ điều không được làm, phạm vi quyết định trở nên chặt chẽ hơn.

Bước 5: Iterate trong hệ thống, không đi vòng quanh nó

Mọi follow-up prompt nên tiếp tục tham chiếu design system cho Claude Design. Yêu cầu mơ hồ khiến AI quay lại lối thiết kế an toàn.

Prompt chưa tốt:

“Make the header look more premium.”

Từ “premium” không có tiêu chí kiểm tra. AI có thể tự thêm Inter, gradient hoặc shadow tinh tế.

Prompt tốt hơn:

“Make the header more visually distinct while staying within the design system. Consider using a larger type scale or a full-bleed colored bar using –color-primary.”

Bạn vẫn cho AI không gian lựa chọn, nhưng mọi lựa chọn phải nằm trong giới hạn. Khi làm prototype nhiều màn hình, nguyên tắc này giúp thiết kế giữ cùng một ngôn ngữ thị giác.

Bước 6: Duy trì một tài liệu design system duy nhất

File design system là source of truth của dự án và phải được cập nhật sau mỗi quyết định mới. Nếu đổi base radius từ 4px sang 8px, bạn nên sửa tài liệu và ghi changelog ngay thay vì chỉ nhắc trong một session.

# [Project Name] Design System

## Typography
...

## Color Palette
...

## Spacing & Shape
...

## Component Conventions
...

## Layout Rules
...

## Do Not Use
...

## Personality & Reference
...

## Changelog
- 2026-04-28: Changed base radius from 4px to 8px across all components
- 2026-04-22: Added --color-surface-2 for nested card backgrounds

Changelog giúp bạn hiểu vì sao output giữa các vòng khác nhau. Nó cũng hỗ trợ review code và phối hợp đội ngũ khi prototype đi qua nhiều session.

Có thể học gì từ Google Stitch DESIGN.md?

Google Stitch DESIGN.md đáng tham khảo vì nó biến design rules thành file markdown thân thiện với AI agent và có thể di chuyển giữa các công cụ. Google Labs cho biết Stitch cho phép export hoặc import quy tắc thiết kế giữa các project; draft specification của DESIGN.md cũng đã được open-source để dùng xuyên nền tảng.[1]

Theo Google Labs, thay vì chỉ đoán ý định, AI agent có thể hiểu một màu dùng để làm gì và kiểm tra lựa chọn dựa trên quy tắc accessibility WCAG.[1] Stitch cũng hỗ trợ trích xuất design system từ URL hoặc dùng DESIGN.md để trao đổi quy tắc với công cụ thiết kế và coding khác.[2]

Điểm nên mượn cho Claude Design:

• Tài liệu portable: file nằm cùng repository, không mắc kẹt trong một session chat.
• Token có ngữ nghĩa: ghi vai trò của màu, không chỉ ghi mã hex.
• Quy tắc kiểm tra được: thêm accessibility, component state và điều cấm.
• Import/export rõ ràng: dùng cùng một tài liệu cho AI design, code review và bàn giao.

Khác biệt là Stitch hỗ trợ tạo và cập nhật DESIGN.md trong workflow của công cụ, còn với Claude Design bạn chủ động viết tài liệu. Việc thủ công tốn thời gian ban đầu nhưng giúp kiểm soát constraint sát nhu cầu hơn.

Common mistakes: Những lỗi khiến output quay lại kiểu đại trà

Ngay cả khi đã có design system, một số lỗi vẫn khiến AI quay về lựa chọn mặc định. Bạn nên kiểm tra các điểm sau trước khi regenerate:

• Font quá chung chung: “clean sans-serif” thường khiến AI chọn Inter. Hãy ghi chính xác tên font.
• Mô tả màu thay vì mã hex: “warm red” có thể được diễn giải khác nhau qua từng vòng.
• Không ghi điều cấm: im lặng về shadow hoặc radius đồng nghĩa để AI tự chọn mặc định.
• Regenerate trước khi sửa tài liệu: output lệch brand là dấu hiệu tài liệu còn khoảng trống.
• Bỏ qua test component: lỗi nhỏ ở component sẽ lặp lại trên toàn bộ layout.

Mình khuyên bạn biến danh sách này thành checklist review. Khi output không đúng, hãy tìm quy tắc còn thiếu thay vì chỉ yêu cầu tạo lại. Cách làm này phù hợp với tư duy triển khai AI có kiểm soát trong quy trình AI agent tự động hóa doanh nghiệp.

Kết luận: Biến quyết định thiết kế thành tài liệu tái sử dụng

Design system cho Claude Design hiệu quả khi nó cụ thể, kiểm tra được và được duy trì như một artifact thật của dự án. Sáu bước trên giúp bạn đi từ visual vocabulary đến file source of truth mà không phụ thuộc vào prompt ngẫu hứng.

Hãy bắt đầu với font, palette và một CTA button. Khi component ổn, khóa layout, bổ sung negative constraints rồi ghi lại changelog. Nếu bạn cần quay lại phần nền tảng, xem phần 1: cách tránh giao diện AI đại trà với Claude Design.

Nguồn tham khảo

1. Google Labs: Stitch DESIGN.md format is now open-source
2. Google Labs: Introducing vibe design with Stitch
3. MindStudio: How to Avoid AI Slop When Using Claude Design
4. Design Tokens Community Group: Format Module
5. Tailwind CSS: Theme variables

Bạn đang dùng Claude Design cho landing page hay dashboard? Hãy thử bắt đầu bằng một CTA component và checklist ở trên nhé!