Cả Figma và Claude Design đều cho phép bạn đi từ một ý tưởng thiết kế đến một bản mẫu (prototype) tương tác hoàn chỉnh. Điều thú vị là bạn có thể đưa cho các công cụ này một ảnh chụp màn hình (screenshot) giao diện (UI) và yêu cầu chúng biến nó thành một bản mẫu bằng mã nguồn (coded prototype). Trong bài viết này, tôi sẽ chia sẻ quy trình cần thực hiện để chuyển một ảnh screenshot thành prototype, cũng như một số điểm khác biệt đáng chú ý giữa Figma và Claude Design.
Thử nghiệm
Đối với thử nghiệm của mình, tôi sẽ sử dụng một bản thiết kế độ phân giải cao (high-fidelity mockup) của một ứng dụng học ngôn ngữ. Đó là màn hình chính của ứng dụng, bao gồm một số khối nội dung như: trình độ hiện tại, tiến trình học tập, bài học đang làm và một vài hoạt động chính. Như bạn có thể thấy, thiết kế ứng dụng rất cơ bản (được tạo bằng các màu sắc, font chữ đơn giản, sử dụng card và badge làm thẻ chứa nội dung). Tuy nhiên, nó có một chi tiết thiết kế thị giác khá tinh tế: các lớp bóng (shadow) nhẹ nhàng trong bố cục. Bóng đổ giúp tạo cảm giác về chiều sâu và giữ cho bố cục không bị quá phẳng.
Chuyển ảnh chụp màn hình thành Bản mẫu bằng Figma
Quy trình chuyển ảnh screenshot thành prototype bằng Figma bắt đầu trong tệp Figma Design. Đối tượng duy nhất trong tệp này là một tệp hình ảnh PNG của bố cục (quy tắc chung là nên dùng ảnh độ phân giải cao, không bị biến dạng thị giác). Trong trường hợp của tôi, tôi sử dụng ảnh có độ phân giải 1400 x 3100, giúp mô hình AI phân tích tệp nguồn tốt hơn và trích xuất các quyết định thiết kế giá trị.
Bước 1: Yêu cầu Figma AI agent chuyển ảnh chụp màn hình thành thiết kế Figma
Ở bước đầu tiên, chúng ta cần đưa ảnh chụp màn hình vào Figma AI agent và yêu cầu nó chuyển thành một bố cục Figma gồm các phần tử cấu thành. Tôi chọn đối tượng hình ảnh trên canvas, nhấp vào Agents và nhập lệnh (prompt) yêu cầu Figma biến hình ảnh này thành thiết kế Figma. Toàn bộ quá trình chuyển đổi từ ảnh tĩnh sang một Figma frame có các phần tử mất khoảng 2 phút, và Figma đã tạo ra một bố cục khá tốt để xem xét. Figma đã sử dụng Auto Layout cho thiết kế này, giúp việc chỉnh sửa trở nên rất dễ dàng nếu muốn thay đổi. Nhược điểm duy nhất là Figma không tạo ra một hệ thống thiết kế (design system) cho tệp này (màu sắc và phông chữ chỉ ở dạng giá trị thô chứ không phải các style token).
Nếu so sánh ảnh chụp màn hình gốc với thiết kế do Figma tạo ra, bạn sẽ thấy một khoảng cách khá rõ ràng. Ngoài màu sắc, kích thước font chữ, căn chỉnh phần tử và icon hơi khác một chút, sự cố nghiêm trọng nhất là việc hiển thị sai tiến trình học tập (thanh tiến trình bị lỗi trong thiết kế do Figma tạo ra). Điều này có nghĩa là bạn sẽ cần tinh chỉnh lại thiết kế trước khi biến nó thành prototype. Trong thử nghiệm này, tôi đang kiểm tra khả năng của AI nên sẽ bỏ qua bước tinh chỉnh thủ công và trực tiếp yêu cầu Figma chuyển thiết kế thành prototype.
Bước 2: Chuyển thiết kế Figma thành bản mẫu bằng Figma Make
Quá trình tạo bản mẫu hoàn chỉnh trong Figma hơi lạ một chút. Bạn cần chọn Figma frame của mình, chuyển sang tab Prototype và nhấp vào Send to Figma Make (Figma Make là công cụ chuyên dụng để tạo bản mẫu tương tác). Figma sẽ mở Figma Make trong một tab riêng biệt, và bạn sẽ thấy frame thiết kế của mình được thêm vào ô nhập liệu. Tất cả những gì bạn cần làm là nhập câu lệnh. Tôi giữ nguyên các thiết lập khác (bao gồm cả mô hình AI) mặc định và yêu cầu Figma Make thực hiện công việc. Quá trình tạo bản mẫu mất khoảng 2 phút (nhanh vì thiết kế không quá phức tạp) và Figma đã chia sẻ một bản xem trước tương tác. Vẫn có khoảng cách giữa thiết kế trên Figma và bản mẫu bằng mã mà Figma Make tạo ra, nhưng khoảng cách này nhỏ hơn so với khoảng cách giữa ảnh chụp màn hình gốc và thiết kế Figma (bạn có thể nhận thấy vài lỗi nhỏ về khoảng cách và màu sắc hơi khác). Nhìn chung, Figma đã làm tốt việc chuyển đổi thiết kế thành bản mẫu bằng mã.
Chuyển ảnh chụp màn hình thành Bản mẫu bằng Claude Design
Tương tự như Figma, quá trình tạo bản mẫu với Claude Design cũng gồm hai bước.
Bước 1: Chuyển ảnh chụp màn hình vào Claude Design
Tất cả những gì tôi cần làm là đính kèm hình ảnh và yêu cầu Claude chuyển nó thành thiết kế ứng dụng di động. Tôi chọn mô hình Opus 5 với mức nỗ lực Extra High để đạt kết quả tối ưu. Quá trình chuyển đổi mất 2 phút và Claude đã tạo ra một bản xem trước tương tác trên canvas. Một điểm cộng của Claude Design là nó cung cấp các bộ điều khiển ngữ cảnh cho thiết kế tạo ra, cho phép bạn tùy chỉnh một số thuộc tính theo thời gian thực (trong trường hợp của tôi là tùy chọn thay đổi số lượng cột). Về mặt thiết kế thực tế, Claude Design cũng tạo ra một vài thay đổi so với ảnh gốc (màu sắc, kiểu chữ và khoảng cách hơi khác). Chi tiết dễ nhận thấy nhất lần này là thiếu hình ảnh: vì lý do nào đó, Claude sử dụng một khung giữ chỗ (placeholder) thay vì hình ảnh thực tế trong thẻ bài học hiện tại.
Bước 2: Gửi thiết kế sang Claude Code để tạo bản mẫu
Tương tự Figma, quá trình chuyển thiết kế thành prototype bằng mã trong Claude cũng cảm giác hơi cồng kềnh. Bạn không thể tải trực tiếp mã nguồn ở giai đoạn này; bạn cần gửi thiết kế sang Claude Code. Để làm điều đó, bạn nhấp vào Share, chọn Claude Code và sao chép câu lệnh do hệ thống tự động tạo ra. Tiếp theo, chuyển sang Claude Code, dán câu lệnh vào ô nhập liệu và nhấn Enter. Toàn bộ quá trình biến thiết kế thành bản mẫu mất 8 phút, và cuối cùng Claude Code đã hiển thị một bản xem trước tương tác của thiết kế. Giống như Figma & Figma Make, khoảng cách giữa thiết kế trong Claude Design và bản mẫu do Claude Code tạo ra là rất nhỏ. Đáng chú ý, Claude Code còn tự hoàn thiện thêm một số chi tiết tinh tế, chẳng hạn như sửa lại văn bản giữ chỗ cho hình ảnh trong thẻ bài học hiện tại.
Kết luận
Cả Figma và Claude Design đều có thể giúp bạn chuyển một ảnh chụp màn hình giao diện tĩnh thành một bản mẫu tương tác. Trong cả hai trường hợp, đều tồn tại một khoảng cách nhất định giữa ảnh chụp màn hình tham chiếu và thiết kế cuối cùng do AI tạo ra. Theo kinh nghiệm của tôi, Claude Design có xu hướng tạo ra ít thay đổi so với ảnh gốc hơn Figma, điều này khiến Claude trở thành công cụ phù hợp hơn cho việc tạo bản mẫu nhanh từ một hình ảnh tham chiếu.
