Tạo Design System tự động từ website có sẵn bằng Claude, Figma và React

Trong bối cảnh công nghệ AI phát triển mạnh mẽ như hiện nay, các công cụ thiết kế và lập trình đang liên tục được cải tiến. Một trong những tính năng được mong chờ nhất là khả năng hỗ trợ Figma MCP (Model Context Protocol), cho phép các tác nhân AI ghi trực tiếp lên canvas thiết kế.

Nếu bạn vừa tham gia một startup và họ sở hữu một website nhưng thiếu vắng một Design System (hệ thống thiết kế) tái sử dụng trong codebase hay Figma, bạn sẽ cần tạo ra các biến CSS có ngữ nghĩa và một bộ web components cơ bản trong React, đồng thời có bản sao chính xác của chúng trên Figma. Tin vui là nếu bạn sử dụng Claude Code, bạn có thể thực hiện tất cả điều này chỉ với 4 lệnh.

Hệ sinh thái Claude Code

Lệnh Claude Code là gì?

Đối với quy trình làm việc này, chúng ta sẽ sử dụng Commands (lệnh). Đây là tập hợp các hướng dẫn có thể lặp lại, được kích hoạt theo thứ tự chúng ta mong muốn, giúp mọi bước đều có thể được kiểm soát và đối chiếu kỹ lưỡng.

Chuẩn bị tệp tin

Bạn có thể tải xuống hoặc clone các lệnh được định nghĩa sẵn từ kho lưu trữ khởi động (starter repository) tại đây: https://github.com/saintasia/workshop-claude-figma-design-system

Quy trình xây dựng Design System

1. Kiểm tra kho lưu trữ trên Claude Code

Mở terminal, di chuyển vào thư mục bạn vừa tải về bằng lệnh cd REPOSITORY, chạy claude và thử gõ /extract. Nếu lệnh /extract-tokens xuất hiện trong danh sách, bạn đã sẵn sàng bắt đầu.

2. Trích xuất Tokens từ một trang web

Bạn nên đảm bảo rằng trang web cung cấp cho Claude chứa đầy đủ các màu sắc, also cả nút chính (primary) và nút phụ (secondary) để nó có thể đọc được một hệ thống token đầy đủ hơn.

Quá trình trích xuất token

Khi Claude hoàn thành lệnh, bạn sẽ nhận được một bản tóm tắt token. Lệnh này sẽ tạo ra một tệp raw.json với các ánh xạ token semantic và các loại khác để dễ dàng tổ chức sau này.

3. Xây dựng hệ thống Token

Sau khi bước trước hoàn tất, Claude Code sẽ thông báo chạy lệnh tiếp theo: /build-token-system.

Lệnh này sẽ tạo ra các tệp CSS và JSON có cấu trúc trong thư mục tokens/system và cung cấp bản tóm tắt, bao gồm cả kiểm tra độ tương phản (contrast audit). Nó cũng tạo ra một tệp token-conventions.md dễ đọc cho con người, liệt kê các quyết định mà AI đã đưa ra và các quy tắc ẩn mà nó đã phát hiện ra.

4. Tạo React Components

Sau khi đã có hệ thống token và mô tả, chúng ta có thể tạo web components của mình, bao gồm cả bản xem trước cơ bản của toàn bộ design system bằng cách chạy /generate-components. Bạn có thể thêm danh sách các component bạn muốn tạo sau lệnh, nếu không, nó sẽ tạo một bộ cơ bản bao gồm các phần tử mà nó phát hiện thấy khi lần đầu xem xét các màu sắc và ngữ nghĩa.

Khi lệnh chạy xong, bạn sẽ thấy bản tóm tắt những gì đã được tạo, bao gồm cả một ứng dụng web để xem trước. Nếu chạy cd preview && npm run dev, ứng dụng xem trước sẽ khởi chạy locally trên trình duyệt của bạn.

5. Đồng bộ Tokens và Components lên Figma

Sau khi xác nhận mọi thứ trông ổn, đã đến lúc chạy lệnh cuối cùng /push-to-figma. Hãy cung cấp liên kết đến tệp nơi bạn muốn tạo bộ biến và các component.

Tệp raw.json được tạo ra

Đối với bước này, bạn hãy chắc chắn đã cài đặt plugin Figma từ thư mục plugin của Claude Code (https://claude.com/plugins/figma) và đã xác thực để sử dụng Figma MCP.

Sau khi nhận được thông báo thành công từ Claude Code, bạn có thể kiểm tra tệp thiết kế Figma của mình; nó sẽ có các tab mới cho tokens và components, được điền đầy đủ các thuộc tính đúng và chế độ sáng/tối (light/dark modes).

Tóm tắt và các bước tiếp theo

Tóm lại, khi các công cụ AI không ngừng phát triển, điều quan trọng là phải thử nghiệm các quy trình làm việc khác nhau và chú ý hơn vào việc thiết lập ngữ cảnh (context engineering) cho các bước có thể tái sử dụng. Trước đây, việc thiết lập và đồng bộ giữa các token code, components và Figma có thể mất vài ngày; nay với Claude Code, điều đó có thể thực hiện được trong khoảng 30 phút.

Một số bước tiếp theo được khuyên dùng là thêm Figma Code Connect vào các web component của bạn và xuất bản Design System để có thể truy cập từ môi trường bên ngoài, giúp các nhà phát triển dễ dàng tái sử dụng.

Bạn cũng có thể viết lại lệnh /generate-components để thiết lập hệ thống Storybook thay vì bản xem trước web đơn giản, cũng như tạo tài liệu về cách sử dụng và lắp ghép các component thành giao diện người dùng hoàn chỉnh để tái sử dụng tiếp.