Design system với AI – câu chuyện về cách chúng ta build website trong kỉ nguyên AI.
Thế giới kỹ thuật số đang thay đổi nhanh chóng. Nếu trước đây, việc tạo ra một website là công việc song hành giữa designer và developer, thì giờ đây, AI đang dần chen chân vào vai trò như… một người dùng thực thụ của Design system. Với sự ra mắt của Figma Make và Claude (cùng MCP), chúng ta đang chứng kiến bước ngoặt mới: AI không chỉ là công cụ hỗ trợ, mà còn tham gia trực tiếp vào quy trình thiết kế và phát triển website – từ khâu thiết kế đến lập trình.
Bài viết này chỉ áp dụng cho trường hợp các website không có yêu cầu cao về hệ thống, tương tác và bảo mật thông tin, ví dụ: landing page, product site (marketing site), blog…)
Quy trình truyền thống
Trong nhiều năm, workflow chung gần như không thay đổi:
- Designer: nhận brief -> thiết kế UI -> đảm bảo thẩm mỹ, brand, UX và conversion.
- Frontend developer: nhận UI -> code lại 1:1 -> deploy
Quy trình này chuẩn nhưng mất thời gian, phụ thuộc nhiều vào cross-team, khó cho những trường hợp cần đẩy nhanh tiến độ. Bạn đã từng thấy trường hợp cần “1 landing page gấp trong 3h” chưa? Với quy trình cũ – gần như bất khả thi. Nhưng dùng Design system với AI, mọi thứ khả thi hơn khá nhiều.
Khi AI bước vào cuộc chơi
Nếu chỉ nói về các loại AI hỗ trợ, bạn có thể ngó qua bài viết này của TELOS để bật AI trong Figma. Còn trong bài viết này, chúng ta hướng đến một tầng cao hơn của việc sử dụng công cụ AI.
Khi AI đủ thông minh để hiểu Design System và đọc trực tiếp file thiết kế, workflow bắt đầu thay đổi rõ rệt. AI không chỉ hỗ trợ nữa mà thực sự tham gia vào quá trình tạo UI và code. Quy trình dùng Design system với AI mới khá phức tạp nhưng nhanh chóng:
Prompt → Figma Make (Designer review) → Claude generate code theo Design system và code style của team hiện có → Dev review & deploy.
Nhờ vậy, mọi thứ liền mạch hơn và tốc độ tăng lên đáng kể, trong khi con người tập trung vào những phần quan trọng hơn: tính logic, chất lượng và trải nghiệm.
Giờ đây, với Figma Make – công cụ AI được tích hợp ngay trong Figma – một cánh cửa mới đã mở ra. Người dùng chỉ cần viết prompt mô tả giao diện mong muốn, Figma Make sẽ tự động tạo ra bản UI hoàn chỉnh dựa trên bộ Design system có sẵn của team. Hãy xem video ví dụ về thao tác này tại đây
Ví dụ: Tạo một trang landing page cho sản phẩm thời trang, với hero section có hình người mẫu, CTA nổi bật và tone màu pastel theo brand hiện tại.
Chỉ với một prompt đơn giản, AI có thể generate ngay một layout đúng font, đúng màu, đúng spacing – đúng mọi quy tắc trong Design system. Điều này khiến AI không còn là công cụ tạo hình, mà thực sự đang sử dụng Design system như một junior designer ảo trong team.
Vậy designer làm gì khi AI đã “vẽ” xong UI?
AI tuy thông minh, nhưng vẫn chỉ hiểu Design system chứ chưa dùng được nó như con người.
Điều đó có nghĩa là:
- AI sẽ follow được theo style của bộ Design system, lấy đúng các thông số hiện có như font size, font weight, spacing, radius… nhưng không biết cách kéo thả component chuẩn từ Design system.
- Do đó, khi copy design từ Figma Make về Figma Design, nó sẽ giống một bản thiết kế tự do hơn là thiết kế component-based.
-> Vì vậy, human-in-the-loop vẫn là yếu tố quan trọng. Designer sẽ:
- Review UI mà AI tạo ra.
- Chuẩn hoá lại bằng component và token thật từ Design system trong Figma.
- Chuẩn bị file cho bước tiếp theo – nơi quá trình AI lập trình bắt đầu.
Khi Claude bắt tay với Figma và Github: AI trở thành junior frontend developer
Claude thông qua MCP có thể:
- Đọc file Figma
- Hiểu cấu trúc UI
- Đọc và tái sử dụng component trong codebase
- Generate code theo style của team
Bạn chỉ cần viết prompt với yêu cầu chi tiết để Claude có thể map chính xác giữa UI và codebase. Lúc này, dev chỉ cần review, tối ưu và merge. Và thế là xong! Quy trình này biến AI trở thành cầu nối thông minh giữa thiết kế và lập trình – thay vì chỉ là một công cụ tạo nội dung đơn lẻ.
Lợi ích của Design system với AI: không chỉ nhanh mà còn mở ra một tư duy mới
Về bản chất, đây là sự dịch chuyển lớn trong tư duy làm sản phẩm:
Thay vì chỉ để con người dùng Design system để thiết kế, AI cũng có thể trở thành người dùng của Design system – theo 1 cách khác. AI có thể đọc, hiểu, tái sử dụng ngôn ngữ thiết kế mà team đã xây dựng, giúp việc tạo UI và code trở nên nhanh, chuẩn và thống nhất hơn bao giờ hết.
Theo ước tính từ quá trình thử nghiệm nội bộ:
- Thời gian làm việc của designer có thể giảm khoảng 40%.
- Thời gian xử lý của developer giảm đến 80% cho các tác vụ lặp lại hoặc không đòi hỏi logic phức tạp.
AI không thay thế con người, mà hỗ trợ tối ưu thời gian cho những công việc có giá trị cao hơn – chiến lược sản phẩm, trải nghiệm người dùng hay mở rộng Design system. Design system với AI là một phương tiện cho các hoạt động đó.
Kết luận
Chúng ta đang bước vào thời kỳ mà AI không chỉ là công cụ, mà là đồng nghiệp kỹ thuật số – có thể tương tác trực tiếp với Design system, design (Figma), và codebase (Github). Với sự kết hợp của Figma Make + Claude + MCP, quy trình thiết kế – phát triển website trở nên liền mạch hơn, nhanh hơn, và mở ra khả năng mới:
AI như một end user của Design system. Design system với AI là một xu thế không thể đảo ngược.
Và đó mới chỉ là khởi đầu. Một kỉ nguyên mà design sytem với AI như một bộ kĩ năng liền mạch để tối ưu năng suất.
Đây là bài viết của giảng viên Diễm Diễm, của lớp Design System, bạn có quan tâm và mong muốn gặp lại chị ấy để trở thành một phần trong thị trường UI/UX Design, sở hữu bộ kĩ năng thiết kế Design system với AI? Hãy đăng ký học với form bên dưới.
