Code to Figma: Chụp lại các trang web đang hoạt động dưới dạng thiết kế

🔄 Tóm tắt nhanh: Trong Bài học 5, bạn đã học cách đẩy các thiết kế từ hệ thống thiết kế của mình vào đầu ra của agent. Bây giờ, chúng ta sẽ đảo ngược điều đó. Thay vì nói cho agent biết phải xây dựng cái gì, bạn sẽ chỉ cho nó một thứ đã tồn tại - một trang web đang hoạt động - và kéo nó vào Figma.

Mọi nhà thiết kế đều đã từng trải qua điều này: Sản phẩm đã được phát hành ba sprint trước, file thiết kế đã lỗi thời và không ai cập nhật nó. Một thành viên mới trong nhóm hỏi "nguồn thông tin chính xác ở đâu?" và không ai có câu trả lời thỏa đáng. Code chính là sự thật. Nhưng code không nằm trong Figma.

Code-to-Figma capture giải quyết vấn đề này. Chỉ cho agent một URL đang hoạt động — sản xuất, thử nghiệm, localhost — và nhận lại các layer Figma có thể chỉnh sửa.

Sau khi hoàn thành bài học này, bạn sẽ có thể:

• Chụp lại một trang web đang hoạt động và chuyển đổi nó thành file Figma có thể chỉnh sửa bằng cách sử dụng một agent
• Biết được những gì quá trình chụp xử lý tốt và những gì bạn cần sửa thủ công

Cách thức hoạt động

Figma mô tả điều này là "chuyển từ Claude Code sang Figma" — nhưng khái niệm này hoạt động với bất kỳ agent nào được kết nối với MCP. Quy trình như sau:

1. Bạn cung cấp cho agent một URL (trang web sản xuất, môi trường thử nghiệm hoặc localhost:3000)
2. Agent load trang và chụp ảnh màn hình có cấu trúc
3. Nó phân tích bố cục trực quan — xác định văn bản, hình ảnh, các phần và khoảng cách
4. Nó tạo các layer Figma bằng cách sử dụng MCP server — khung, layer văn bản, hình chữ nhật, hình ảnh
5. Bạn nhận được một file Figma có thể chỉnh sửa với các layer được đặt tên mà bạn có thể sửa đổi

Đây không phải là một ảnh chụp màn hình phẳng được đưa vào Figma. Agent tạo ra các layer thực tế, những nút văn bản bạn có thể chỉnh sửa và các khung bạn có thể sắp xếp lại. Nó gần giống với một file thiết kế được đảo ngược kỹ thuật hơn.

Prompt ví dụ:

Mở https://staging.myapp.com/settings và chụp lại trang dưới dạng
các layer Figma có thể chỉnh sửa. Tạo một trang mới có tên "Settings - Captured"
trong file hiện tại của tôi.

Đối với mỗi phần:
- Tạo các khung bố cục tự động được đặt tên
- Chụp lại tất cả văn bản dưới dạng các layer văn bản có thể chỉnh sửa
- Phối màu và khoảng cách càng sát càng tốt
- Đặt tên các layer dựa trên nội dung của chúng, không phải vị trí

✅ Kiểm tra nhanh: Tại sao bạn lại chụp từ môi trường thử nghiệm thay vì môi trường sản xuất?

Câu trả lời: Môi trường thử nghiệm thường có các tính năng chưa được phát hành mà bạn muốn ghi lại trước khi ra mắt. Nó cũng tránh được các vấn đề với giới hạn xác thực sản xuất, A/B test hoặc nội dung bị giới hạn theo địa lý có thể hiển thị phiên bản khác với những gì bạn đang thiết kế.

Ba trường hợp sử dụng thực sự quan trọng

1. Ghi lại một sản phẩm hiện có

Trường hợp sử dụng phổ biến nhất. File thiết kế của bạn đã lỗi thời. Sản phẩm đang hoạt động đã phát triển qua 20 pull request mà chưa bao giờ được phản ánh trong Figma. Thay vì mất cả tuần để tạo lại thủ công từng màn hình, bạn có thể ghi lại trạng thái hiện tại chỉ trong vài phút.

Khi nào nên sử dụng:

• Nhà thiết kế mới gia nhập nhóm và cần một file thiết kế hiện tại
• Dự án kiểm toán thiết kế hoặc thiết kế lại cần một điểm chuẩn
• Các bên liên quan muốn ảnh chụp màn hình, nhưng bạn cần một file có thể chỉnh sửa để chú thích

Những gì bạn nhận được: Một điểm khởi đầu, không phải là một file hoàn chỉnh. Tên layer sẽ không khớp với quy ước của bạn. Màu sắc sẽ là các giá trị hex được hardcode, không phải là các token thiết kế. Nhưng bố cục, nội dung và cấu trúc trực quan được ghi lại - và việc dọn dẹp chúng chỉ mất một phần nhỏ thời gian so với việc xây dựng từ đầu.

2. Tạo hệ thống thiết kế từ code

Đây là cách làm nâng cao. Sản phẩm của bạn có các mẫu nhất quán — cùng một bố cục thẻ được sử dụng ở 6 vị trí, cùng kiểu nút, cùng khoảng cách — nhưng chúng chỉ tồn tại trong code. Thuộc tính tùy chỉnh CSS, thư viện thành phần, layer tiện ích. Không có công cụ tương đương trong Figma.

Quy trình làm việc:

1. Chụp một vài màn hình tiêu biểu
2. Xác định các mẫu lặp lại trong kết quả Figma
3. Trích xuất các mẫu đó thành những thành phần
4. Kết nối những thành phần đó với các biến

Về cơ bản, bạn đang đảo ngược kỹ thuật hệ thống thiết kế của mình từ những gì các nhà phát triển đã xây dựng. Nó nhanh hơn so với việc xây dựng một hệ thống thiết kế từ trí tưởng tượng, bởi vì các quyết định đã được đưa ra trong code.

3. Đồng bộ token thiết kế và phát hiện sự thay đổi

Đây là ứng dụng thực tiễn nhất. Hệ thống thiết kế của bạn tồn tại cả trong code (các thuộc tính tùy chỉnh CSS, cấu hình Tailwind, file theme) và Figma (biến, kiểu). Theo thời gian, chúng sẽ khác nhau. Một nhà phát triển thay đổi --spacing-md từ 16px thành 20px nhưng không ai cập nhật biến Figma.

Cách thức hoạt động của tính năng phát hiện sự thay đổi:

Agent so sánh các giá trị giữa codebase và file Figma của bạn:

Bảng này cho bạn biết chính xác nơi code và thiết kế đã khác nhau. Bạn quyết định đâu là nguồn thông tin chính xác và cập nhật nguồn còn lại.

Prompt ví dụ:

So sánh các thuộc tính tùy chỉnh CSS trong code tại [repo URL] với
các biến trong file Figma của tôi. Liệt kê bất kỳ giá trị nào không khớp.
Bao gồm tên token, giá trị trong code và giá trị trong Figma.

✅ Kiểm tra nhanh: Báo cáo phát hiện sai lệch của bạn cho thấy khoảng cách/chiều dài là 24px trong Figma nhưng là 32px trong code. Cả hai giá trị đều như vậy trong nhiều tháng. Ai đúng?

Câu trả lời: Không có giá trị nào tự động "đúng". Bạn cần kiểm tra xem giá trị nào là cố ý. Có phải nhà phát triển đã thay đổi nó mà không cập nhật Figma? Có phải nhà thiết kế đã thay đổi Figma mà không thông báo cho bộ phận kỹ thuật? Báo cáo phát hiện sai lệch chỉ ra vấn đề — việc giải quyết vấn đề này cần có sự trao đổi.

Những gì Capture xử lý tốt (và những gì nó không xử lý tốt)

Đây là phần trung thực. Code-to-Figma capture giúp tiết kiệm thời gian, chứ không phải là phép thuật.

Những gì nó ghi lại chính xác:

• Cấu trúc bố cục (các phần, cột, lưới)
• Nội dung văn bản và kiểu chữ gần đúng
• Màu sắc (dưới dạng giá trị được hardcode)
• Vị trí và kích thước hình ảnh
• Khoảng cách và lề cơ bản

Những gì nó bỏ sót hoặc ghi sai:

• Tương tác và trạng thái — không có trạng thái di chuột, hoạt động, được chọn, bị vô hiệu hóa
• Hoạt ảnh — không có hiệu ứng chuyển tiếp, không có hiệu ứng cuộn
• Nội dung động — bất cứ thứ gì hiển thị tại thời điểm ghi lại đều là những gì bạn nhận được
• Hành vi đáp ứng — ghi lại một khung nhìn, không phải toàn bộ hệ thống đáp ứng
• Cấu trúc thành phần — tạo ra các layer phẳng, không phải những thành phần có thể tái sử dụng
• Token thiết kế — ghi lại các giá trị trực quan, không phải tham chiếu biến

Điểm cuối cùng đó là lý do tại sao Bài học 5 lại quan trọng đến vậy. Sau khi ghi lại một trang, công việc đầu tiên của bạn là kết nối các giá trị được hardcode đó với những biến của hệ thống thiết kế. Quá trình ghi lại cung cấp cho bạn cấu trúc. Bạn cần thêm trí thông minh.

Ví dụ minh họa: Ghi lại trang Settings

Hãy cùng xem xét một quá trình ghi lại thực tế, từng bước một.

Bước 1: Chuẩn bị URL

Chỉ định agent đến trang cài đặt của bạn. Nếu cần xác thực, hãy sử dụng môi trường thử nghiệm với thông tin đăng nhập thử nghiệm hoặc máy chủ phát triển cục bộ.

Ghi lại https://localhost:3000/settings dưới dạng các layer Figma có thể chỉnh sửa.
Tạo một trang mới có tên "Settings - March Capture" trong file của tôi.

Bước 2: Xem lại kết quả thô

Agent tạo các layer. Đây là những gì bạn thường thấy:

Settings - March Capture
├── Header Bar (frame)
│   ├── Logo (image)
│   ├── Navigation Links (frame)
│   └── User Avatar (image)
├── Sidebar (frame)
│   ├── Menu Item 1 (text)
│   ├── Menu Item 2 (text, active)
│   └── Menu Item 3 (text)
└── Content Area (frame)
    ├── Section: Profile (frame)
    │   ├── Title (text)
    │   ├── Avatar Upload (frame)
    │   └── Form Fields (frame)
    └── Section: Notifications (frame)
        ├── Title (text)
        └── Toggle Rows (frame)

Tên layer hợp lý. Cấu trúc bố cục khớp với trang trực tiếp. Màu sắc và khoảng cách được ghi lại nhưng được hardcode.

Bước 3: Dọn dẹp và kết nối với hệ thống thiết kế

Đây là lúc kiến ​​thức từ Bài học 5 của bạn phát huy tác dụng:

• Thay thế màu sắc được hardcode bằng các biến của hệ thống thiết kế
• Thay thế kiểu định dạng văn bản thô bằng kiểu định dạng văn bản đã được công bố
• Thay thế các khung chung chung bằng những thành phần thực tế từ thư viện của bạn (nút, ô nhập liệu, công tắc)
• Sửa tên layer để phù hợp với quy ước của nhóm bạn

Dành 15-20 phút để dọn dẹp một trang điển hình. Con số này vẫn ít hơn nhiều so với 1-2 giờ để xây dựng nó từ đầu.

Thực hành: Ghi lại một trang

Chọn một trong những bài tập sau:

Tùy chọn A (nếu bạn có một dự án): Ghi lại một màn hình từ môi trường thử nghiệm hoặc máy chủ cục bộ của sản phẩm. So sánh đầu ra của Figma với file thiết kế hiện có của bạn. Ghi lại những điểm khác biệt - đây là khoản nợ thiết kế của bạn.

Tùy chọn B (nếu bạn đang học): Ghi lại bất kỳ trang web công cộng nào mà bạn quen thuộc. Xem lại cấu trúc layer mà agent tạo ra. Hãy thử kết nối ít nhất 3 màu được hardcode với các biến Figma mà bạn tạo.

Tùy chọn C (phát hiện sai lệch): Nếu nhóm của bạn có các token thiết kế cả trong code và Figma, hãy chạy so sánh sai lệch. Ghi lại bất kỳ sự không khớp nào và mang chúng đến lần đồng bộ thiết kế tiếp theo.

Những điểm chính cần ghi nhớ

• Code-to-Figma capture tạo ra các layer có thể chỉnh sửa từ những trang web đang hoạt động — sản xuất, thử nghiệm hoặc cục bộ
• Ba trường hợp sử dụng cốt lõi: Ghi lại các sản phẩm hiện có, khởi tạo hệ thống thiết kế từ code và phát hiện sai lệch token thiết kế
• Việc ghi lại xử lý tốt bố cục, văn bản, màu sắc và khoảng cách nhưng bỏ sót các tương tác, hoạt ảnh, hành vi đáp ứng và cấu trúc thành phần
• Đầu ra luôn là các giá trị được hardcode. Kết nối các phần tử đã ghi lại với hệ thống thiết kế của bạn (Bài học 5) là bước dọn dẹp thiết yếu.
• Phát hiện sai lệch so sánh các giá trị token trong code và Figma và gắn cờ những giá trị không khớp — bạn quyết định nguồn thông tin nào cần cập nhật
• Dự trù 15-20 phút dọn dẹp cho mỗi trang đã ghi lại. Vẫn nhanh hơn nhiều so với việc xây dựng lại từ đầu.