Giúp trợ lý AI xem kỹ bản thiết kế trước khi làm trang web

Thử hình dung một bảng thiết kế có hai màn hình đặt cạnh nhau: màn hình đầu là trang đang chờ kết quả, màn hình thứ hai là chính trang ấy khi đã đầy đủ nội dung, còn bên dưới là bố cục cho điện thoại với cách sắp xếp khác hẳn. Trước khi bắt tay làm trang, cần có người xác định yêu cầu đang nói đến màn hình nào, rồi xem màn hình đó đủ kỹ để làm đúng nhãn, khoảng cách và phông chữ.

Bước xem đầu tiên này rất dễ bị bỏ qua khi việc tiếp theo là giao cho agent lập trình, tức một trợ lý AI có thể đọc và sửa code. Agent bắt tay vào làm rất nhanh, nên nếu nó khởi đầu từ một ảnh tổng quan nhỏ hoặc từ nhầm trạng thái, bản tham chiếu chưa rõ ràng ấy sẽ đi theo agent vào mọi chi tiết về sau của trang.

Mình muốn agent dừng lại đúng ở chỗ đó để chọn một màn hình, xem thật kỹ, rồi tiếp tục lấy màn hình ấy làm chuẩn khi trang đã chạy trên trình duyệt. Vì vậy mình tạo ra Figma Lens để bước xem thiết kế ban đầu của agent có một trình tự rõ ràng.

Figma Lens gồm những gì

Bảng thiết kế ở đầu bài nằm trong Figma, một ứng dụng dùng để thiết kế giao diện, và mỗi màn hình trên đó có thể được chia sẻ bằng một liên kết Figma. Figma Lens là một công cụ dòng lệnh (CLI), nghĩa là agent chạy nó bằng cách gõ lệnh trong terminal, giống như khi chạy test. Khi nhận liên kết ấy, công cụ lấy ảnh và thông tin thiết kế cho đúng khu vực đang xem, và không cần đến Figma Desktop, tức bản ứng dụng Figma cài trên máy tính. Mỗi kết quả đều kèm vài lệnh gợi ý tiếp theo, nên agent có thể đi từ cả bảng thiết kế xuống một màn hình rồi xuống một chi tiết nhỏ hơn, giống như cầm kính lúp soi một bản in: tìm đúng màn hình trước, rồi mới ghé sát lại để đọc.

Đi kèm công cụ là một skill, tức bộ hướng dẫn viết sẵn mà agent đọc trước khi làm việc. Skill ghi rõ thứ tự công việc: chọn màn hình, xem kỹ từng chi tiết, rồi đối chiếu trang đã làm với chính màn hình đó.

Khi agent mở liên kết thiết kế

Quay lại bảng thiết kế ở đầu bài, việc đầu tiên là chọn màn hình. Ảnh tổng quan của cả bảng thiết kế cho thấy màn hình đang chờ, màn hình đầy đủ và bố cục điện thoại nằm cạnh nhau, nên skill yêu cầu agent chọn đúng màn hình mà yêu cầu nhắc đến trước khi lấy ảnh chi tiết và thông tin thiết kế. Sau đó, ảnh của riêng màn hình đã chọn giúp tìm vị trí của thẻ thông tin hay hộp thoại, và mọi chi tiết agent đọc được từ đây đều thuộc về đúng màn hình nó đang làm.

Khi agent cần đọc từng chi tiết

Từ đó agent ghé sát hơn vào từng phần: ảnh chi tiết giúp đọc nhãn và kiểm tra khoảng cách, đồng thời skill còn yêu cầu agent kiểm tra chính xác họ phông chữ và độ đậm, dùng lại tài nguyên đã xuất từ tệp thiết kế, và lấy nguyên nội dung chữ từ trạng thái đã chọn.

Khi trang đã chạy trên trình duyệt

Đến lúc trang chạy được, bản tham chiếu ban đầu lại có việc để làm. Skill yêu cầu agent chụp màn hình trang trên trình duyệt ở cùng kích thước với thiết kế để so sánh, và kiểm tra riêng phần chữ hiển thị. Trong hình dưới, khi hai bảng tin tuyển dụng được căn thẳng hàng, có thể thấy một tiêu đề xuống dòng khác đi trong trang đang kiểm tra.

Bài viết về trang tổng quan đi theo cả quy trình này qua một trang có biểu đồ và bảng tin tuyển dụng, và cho thấy vì sao một ảnh chi tiết đủ rõ có thể trả lời những câu hỏi mà ảnh tổng quan nhỏ còn bỏ ngỏ.

Mình làm gì trong dự án này

Mình phụ trách chính việc phát triển Figma Lens và đặt ra trình tự xem thiết kế kể trên. Agent lập trình đảm nhiệm một phần đáng kể việc triển khai, còn mình xem xét và kiểm soát các thay đổi code, rồi tự chạy thử quy trình để kiểm tra agent có dùng đúng bản thiết kế và có mở các ảnh cần xem hay không. Nếu bạn định thử một cách làm tương tự, mình nghĩ bước kiểm tra cuối này đáng giữ nhất, vì dù công cụ trả về đúng ảnh, ảnh chỉ có ích khi agent thật sự mở ra xem. Cách cài đặt, yêu cầu và giới hạn của công cụ nằm ngay bên dưới.

npm install --global figma-lens
figma-lens --version

figma-lens auth login
figma-lens doctor

figma-lens scout "https://www.figma.com/design/FILE_KEY/File?node-id=1-2"

npx -y skills@latest add khanglvm/figma-lens --skill figma-lens --global --yes

Use the figma-lens CLI and its skill to inspect this Figma link: <link>.
Open the screenshots, identify the relevant screen state, and inspect its
important details before coding. Check the required fonts and reuse the
exported assets. Compare the finished UI with the source in a browser.