Hướng dẫn kết nối Claude Code với Figma và tự động làm hình ảnh cho game

Làm một game nhỏ có thể cần đến hàng trăm hình: nhân vật, biểu cảm, nền, icon, đồ vật. Bài này ghi lại cách chúng tôi kết nối Claude Code với Figma để làm hình cho một game nhỏ. Mọi lệnh, công cụ và kết quả trong bài đều lấy từ phiên làm việc thật.

Trước khi bắt đầu, bạn cần nắm một điều: kết nối Figma cho phép Claude Code làm ba loại việc khác nhau. Đọc thiết kế, chỉnh thiết kế và tạo ảnh AI dùng các công cụ khác nhau và cho ra kết quả khác nhau.

1. Claude Code kết nối Figma để làm gì?

Ba loại việc cần phân biệt

Ảnh AI là ảnh bitmap. Bạn không chỉnh được từng nét như lớp vector. Ngược lại, use_figma không “vẽ đẹp” thay bạn: nó dựng hình đúng theo đoạn code Claude viết ra.

Cần chuẩn bị

• • Tài khoản Figma. (Gói tài khoản nào dùng được generate_image, và giới hạn bao nhiêu lần tạo ảnh)

• • Claude Code. Chúng tôi dùng tab Code trong ứng dụng Claude trên Windows.

• • Python và thư viện Pillow để cắt ảnh sau khi tải về.

2. Kết nối Claude Code với Figma từng bước

Bước 1: Bật kết nối Figma và đăng nhập

Trong phiên làm việc, chúng tôi dùng máy chủ MCP chính thức của Figma. Mô tả của máy chủ này ghi rõ nó cho phép đọc thiết kế, ghi thiết kế và tạo ảnh. Các bước cụ thể để bật kết nối và đăng nhập Figma trong ứng dụng Claude:

Bước 2: Kiểm tra kết nối bằng whoami

Sau khi kết nối, hãy bảo Claude kiểm tra tài khoản. Công cụ whoami trả về tên hiển thị, email, các team (plan) bạn tham gia và loại ghế (seat) của bạn trong từng team. Bạn cần mã team ở bước sau để tạo file mới. Khi chụp màn hình bước này cho người khác xem, nhớ che email và mã team.

Bước 3: Tạo file Figma đầu tiên

Câu chúng tôi dùng rất đơn giản: “kết nối với tài khoản Figma của tôi và vẽ trước một nền thử”. Claude gọi create_new_file với tên file, loại file (design) và mã team, rồi nhận về file_key cùng đường dẫn tới file. Mọi ảnh của dự án sau đó đều nằm chung trong file này.

3. Đọc và xuất thiết kế

Ba công cụ đọc file chúng tôi đã dùng:

• • get_metadata: không kèm nodeId thì trả về danh sách trang. Kèm nodeId thì trả về cây lớp (id, tên, vị trí, kích thước) dạng XML. Đây là cách tìm id của khung cần lấy.

• • get_screenshot: chụp một khung theo nodeId và trả về một đường dẫn PNG ngắn hạn kèm lệnh curl để tải. Có tham số maxDimension để giới hạn cạnh dài của ảnh.

• • download_assets: xuất một khung ra PNG, kèm các tài nguyên SVG bên trong. Kết quả cũng là đường dẫn tải ngắn hạn.

Các đường dẫn này chỉ dùng được trong thời gian ngắn. Tool ghi rõ phải giữ kín chúng như mật khẩu, nên hãy tải ảnh về máy ngay.

4. Chỉnh thiết kế bằng use_figma

Ảnh đầu tiên của dự án không dùng AI. Đó là nền phòng ngủ 320 x 240, bằng đúng kích thước màn hình game. Claude viết đoạn JavaScript chạy qua use_figma để dựng tường chấm bi, rèm, sàn gỗ và chừa ô kính cửa sổ trong suốt. Nhờ ô kính trong suốt, game tự vẽ bầu trời và thời tiết phía sau cửa sổ. Kết quả là một khung gồm 136 lớp vector, sửa tiếp được trong Figma.

Trước khi gọi use_figma, Claude nạp kỹ năng figma-use của plugin Figma để biết cách viết code cho Plugin API. Khi xuất ảnh, cần để nền trang trong suốt thì vùng kính mới giữ được độ trong suốt.

5. Tạo ảnh AI bằng generate_image

Hầu hết hình trong game được làm bằng cách này. Mỗi lần gọi generate_image gồm: fileKey, prompt, width, height và có thể thêm model. Chúng tôi dùng model gpt-image-2.5-sunburst. Ảnh tạo ra xuất hiện trong file dưới dạng một khung mới. Tool trả về đường dẫn PNG có hạn 7 ngày, kèm lệnh curl để tải. Trong cả dự án, Claude đã gọi công cụ này 322 lần.

Viết prompt cho sprite sheet

Game cần nhiều tư thế của cùng một nhân vật, vì vậy chúng tôi yêu cầu AI vẽ cả bảng (sprite sheet) trong một ảnh. Các quy tắc rút ra từ những prompt đã dùng:

• • Ghi rõ đây là nhân vật gốc: “Original character design sheet (not based on any existing franchise)”.

• • Chỉ định lưới cụ thể, ví dụ 5 cột x 2 hàng, mỗi ô một tư thế, các ô bằng nhau.

• • Giữ nhân vật đồng nhất: cùng cỡ, cùng trang phục, chân đặt trên cùng một đường nền.

• • Dùng nền phẳng một màu (trắng, hoặc xanh lá #00FF00 để dễ tách nền). Không chữ, không khung, không bóng đổ.

• • Liệt kê thứ tự ô: bình thường, chớp mắt, vui, ăn, đói, thương, buồn, ốm, ngủ, mệt.

Trong dự án, chúng tôi đặt luật: ảnh lỗi, xấu hoặc lệch thì tạo lại, tối đa 3 lần cho mỗi ảnh. Cũng nên chuẩn bị tinh thần là kích thước nhận được có thể khác kích thước yêu cầu. Với nhân vật Leo, prompt yêu cầu 1920 x 1024 nhưng khung trong Figma là 1536 x 864. Vì vậy hãy kiểm tra kích thước thật trước khi cắt ảnh.

Tải ảnh về trước khi đường dẫn hết hạn

Sau mỗi lần tạo ảnh, Claude chạy lệnh curl mà tool gợi ý để lưu ảnh vào thư mục ảnh gốc của dự án, ví dụ zodiac_art/leo/leo_expressions.png. Ảnh gốc vẫn còn trong file Figma, nhưng đường dẫn tải sẽ hết hạn sau 7 ngày.

Một lưu ý: trong máy chủ Figma còn nhóm công cụ Weave. Khi chúng tôi thử gọi, tool báo phải liên kết tài khoản Figma với Weave trước. Dự án này không dùng Weave.

6. Quy trình tự động đưa ảnh vào game

Cắt ảnh bằng script, không cắt tay

Ảnh từ AI chưa dùng ngay được trong game. Mỗi nhóm hình có một script Python riêng trong thư mục tools/. Với 4 nhân vật chơi được, quy trình là:

1. 1. python tools/make_zodiac_chars.py: đọc lưới biểu cảm 5 x 2 và lưới đi bộ 4 x 2, cắt từng ô và căn chân về cùng một vị trí. Kết quả ghi vào sd/tama/characters/<cung>/pet_*.png, mỗi khung 128 px, chân ở y = 120.

1. 1. python tools/make_small_sheets.py và python tools/make_sizes.py: tạo sẵn các bản nhỏ (_64, _100, icon) cho từng chỗ hiển thị.

Với ảnh nền xanh lá, dự án dùng tools/key_green.py để tách nền. Ảnh có nền màu khác thì dùng tools/clear_bg.py, chọn một điểm trong vùng cần xoá.

Cắt sẵn đúng cỡ, đừng để máy thu nhỏ

Ở một khu event trong bản game gốc của cùng dự án, mỗi khung hình phải thu nhỏ 4–5 NPC từ ảnh 128 xuống 64 px ngay lúc vẽ. Việc này làm mạch ESP32 chạy rất nặng. Cách sửa là cắt sẵn đúng từng cỡ cần dùng ngay ở bước làm ảnh, để máy chỉ việc chép ảnh ra màn hình. Với phần cứng yếu, đây là lý do quan trọng nhất để có một bước xử lý ảnh tự động.

Giữ ảnh gốc để làm lại khi cần

Dự án lưu riêng ảnh gốc (*_src.png hoặc thư mục zodiac_art/) và ảnh đã cắt. Khi đổi kích thước khung hay sửa lỗi tách nền, chỉ cần chạy lại script, không phải tạo lại ảnh AI. Có lần lỗi tách nền xanh làm lá cây và váy xanh bị trong suốt. Sau khi sửa key_green.py, toàn bộ ảnh Figma được cắt lại chỉ bằng cách chạy lại các script.

Kiểm tra trong game

Cuối cùng, hãy xem ảnh trong chính game thay vì chỉ xem trong Figma. Ở cỡ 320 x 240, một chi tiết đẹp trên ảnh gốc có thể biến mất, còn viền dày lại dễ nhìn hơn.

Kết luận

Kết nối Claude Code với Figma không phải là “bấm một nút ra cả game”. Nó gồm ba việc riêng. Đọc thiết kế giúp lấy cấu trúc và xuất ảnh. Chỉnh thiết kế bằng use_figma cho ra lớp vector chính xác, sửa tiếp được. Tạo ảnh AI bằng generate_image cho ra nhiều hình nhanh, nhưng cần prompt chặt và một bước cắt ảnh tự động phía sau. Lời khuyên của chúng tôi: viết prompt theo lưới cố định, tải ảnh về ngay, lưu ảnh gốc riêng và để script làm phần việc lặp lại.