AI không phải là công cụ tốt nhất để xây dựng một hệ thống thiết kế vững chắc từ đầu
Trước khi đi sâu vào các tip về cách tối ưu hóa design system Figma cho Claude Code, chúng ta nên sử dụng design system Figma thay vì tạo một system mới từ đầu bằng công cụ AI.
Đúng là AI có thể tạo ra các phong cách (styles) và thậm chí là các thành phần (components) cho một design system. Và đúng là kết quả đầu ra trông có vẻ ổn khi mới nhìn qua. Nhưng nó sẽ nhanh chóng tan rã khi bạn bắt đầu soi kỹ và xem xét những gì AI đã tạo ra.
Sự thật là: các design system mà các công cụ AI hiện đại tạo ra phục vụ một mục đích khác. chúng giúp bạn tạo mẫu (prototyping) nhanh chóng, chứ không phải các giải pháp cho sản xuất.
design system mà các công cụ AI tạo ra không phải là nền tảng vững chắc cho thiết kế của bạn, mà là một giải pháp tình thế để tạo mẫu nhanh.
Để minh họa cho quan điểm của mình, tôi sẽ dựa trên hai công cụ AI phổ biến để tạo mẫu: Google Stitch và Claude Design.
Hãy bắt đầu với Google Stitch. Khi bạn yêu cầu công cụ này tạo một thiết kế mới, việc tạo một “design system” sẽ là một trong những việc đầu tiên nó thực hiện. Nhìn thoáng qua, đây có vẻ là một nền tảng thực sự tốt. Bạn thậm chí có thể tùy chỉnh một số thuộc tính phong cách như màu sắc, font chữ, round và thấy các thay đổi được áp dụng theo thời gian thực.
Nhưng vấn đề là đây không phải là một design system. Nó giống như một style template được xây dựng sẵn mà bạn sử dụng để tạo thiết kế sau này. Và mẫu này rất hạn chế. Ngoài việc tùy chỉnh một vài thuộc tính, bạn không có quyền kiểm soát các phần nâng cao hơn, chẳng hạn như các thành phần (components).
Bây giờ, hãy thử một thử nghiệm khác với Claude Design. Yêu cầu nó xây dựng một design system và chỉ định các thuộc tính cơ bản của nó. Mặc dù hệ thống mà Claude Design tạo ra trông giống một DS (Design System) thực thụ hơn, nhưng quá trình tạo ra nó có một vài điểm yếu:
1. Tiêu tốn tài nguyên: Mất hơn 10 phút và 10% tài nguyên sử dụng hàng tuần để xây dựng hệ thống này, và đó là khá nhiều cho một hệ thống thiết kế đơn giản.
2. Khó tinh chỉnh: Nếu bạn muốn tinh chỉnh hệ thống này, nó sẽ không dễ dàng. Bạn có 3 lựa chọn và không lựa chọn nào thực sự tốt:
– Yêu cầu Claude Design thay đổi trực tiếp (tốn rất nhiều token).
– Xuất sang Claude Code (phải chuyển sang công cụ khác và có thể phải can thiệp vào mã code để sửa lỗi).
– Xuất sang Figma (không có tính năng xuất trực tiếp, phải xuất qua Claude Code rồi mới sang Figma, cực kỳ tốn tài nguyên và kết quả trong Figma thường bị lỗi định dạng, khoảng cách sai lệch).
Nếu bạn so sánh kết quả mà cả hai công cụ AI tạo ra với một design system cơ bản như Simple Design System từ Figma, bạn sẽ thấy rằng một design system thực thụ phức tạp hơn nhiều. Bạn có thể tiết kiệm rất nhiều thời gian (và token) nếu bạn tạo design system trong Figma và sau đó nạp nó vào các công cụ AI như Claude Code để chúng sử dụng tạo ra thiết kế UI.
Cách làm cho hệ thống thiết kế của bạn sẵn sàng cho AI
Tại thời điểm này, việc tạo design system trong Figma rồi sử dụng nó trong Claude Code sẽ hiệu quả hơn. Nhưng có một vài thay đổi quan trọng bạn cần đưa vào quy trình làm việc của mình để giúp AI hiểu rõ hơn về bối cảnh design system của bạn.
Quy trình truyền thống là: sao chép link Figma chứa DS, dán vào Claude Code và yêu cầu nó tạo thiết kế. Vấn đề là AI sẽ bị hổng kiến thức về hệ thống của bạn, dẫn đến kết quả không nhất quán.
Dưới đây là quy trình cải tiến mà tôi đề xuất:
1. Kiểm tra (Audit) design system của bạn
Claude Code sẽ coi file Figma là nguồn (source of truth). Mọi sai sót và mâu thuẫn trong hệ thống sẽ ảnh hưởng đến chất lượng thiết kế của AI. Trước khi gửi cho Claude Code, hãy dọn dẹp và sửa các lỗi như:
– Các giá trị được nhập thủ công (Hardcoded values).
– Các thành phần bị trùng lặp.
– Sử dụng thành phần sai cách trong các ví dụ.
2. Tài liệu hóa các style và component
Bạn càng cung cấp thông tin tốt, Claude Code càng xác định được các quy tắc sử dụng chính xác.
– Cách tiếp cận trực tiếp: Đưa tài liệu ngay vào file Figma (mô tả style, thuộc tính).
– Quy tắc “KHÔNG”: Hãy nêu rõ khi nào một style/component KHÔNG nên được sử dụng. Điều này đóng vai trò như rào chắn ngăn AI sử dụng sai.
3. Sử dụng các kỹ năng Figma của Claude Code
Figma có hai kỹ năng chuyên dụng để tối ưu quy trình:
– apply-design-system: Kết nối các thiết kế Figma hiện có với các thành phần DS đã xuất bản.
– audit-design-system: Kiểm tra độ lệch giữa thiết kế hệ thống trong Figma và kết quả mà Claude Code tạo ra.
4. Tạo tệp CLAUDE.md với các quy tắc và nguyên tắc nền tảng
CLAUDE.md là tệp quan trọng cung cấp bối cảnh cụ thể cho dự án. Tôi khuyên bạn nên đưa vào các quy tắc nền tảng như:
– Quy tắc sử dụng màu sắc (đặc biệt là màu thương hiệu).
– Hướng dẫn sử dụng thành phần (quy tắc cấp cao khi chọn component).
– Các mô thức tương tác (interaction patterns) mà sản phẩm sử dụng (ví dụ: tiết lộ thông tin dần dần – progressive disclosure).
5. Đồng bộ hóa các thay đổi và xác nhận kết quả
design system luôn tiến hóa. AI thường làm việc dựa trên “ảnh chụp nhanh” (snapshot) tại thời điểm nó quét hệ thống.
– Khuyến nghị: Đồng bộ hóa thay đổi một lần mỗi ngày để tiết kiệm token thay vì cập nhật liên tục.
– Bạn có thể tạo một AI Agent chuyên trách việc đồng bộ hóa (Design System Sync Agent) để tự động hóa việc kiểm tra sự thay đổi giữa Figma và mã nguồn, sau đó cập nhật tệp CLAUDE.md và các token thiết kế.
