Ảnh chụp màn hình như một yêu cầu cho agent

Bạn có một tấm ảnh: một trang web bạn thích, và bạn muốn trang của mình cũng trông như vậy. Không thể mô tả trang đó bằng lời cho đủ. "Sáng, thoáng, thẻ chia ba cột, font không chân, tiêu đề to" - câu này đã dài hơn cả việc mở tấm ảnh ra, mà vẫn không chính xác. Từ đó nảy ra câu hỏi hợp lý: agent làm việc bằng văn bản. Vậy nó có nhìn thấy ảnh không?

Có. Bạn có thể dán thẳng ảnh chụp màn hình vào yêu cầu, và agent sẽ nhận nguyên tấm ảnh, chứ không phải lời kể lại của bạn. Nhưng tấm ảnh chỉ là một nửa yêu cầu: nó cho biết trang cần trông như thế nào, còn về mọi thứ khác thì im lặng. Phần còn lại do bạn viết thêm, và dưới đây là cụ thể những gì.

1. Cách đưa ảnh cho agent

Có hai cách.

• Sao chép ảnh rồi dán vào dòng yêu cầu: Ctrl+V, còn trên Windows và WSL thì Alt+V.
• Gõ @ rồi chọn đường dẫn từ gợi ý.

Khi dán vào dòng yêu cầu sẽ xuất hiện nhãn [Image #1]. Từ đó cả bạn lẫn agent đều nhắc đến ảnh bằng số thứ tự; ảnh thứ hai sẽ là [Image #2], và cứ thế. Trông sẽ như sau:

[Image #1] Làm trang trông giống ảnh chụp màn hình này.

Nhãn này do Claude Code tự chèn, bạn không gõ nó. Đây là yêu cầu gồm một tấm ảnh và một câu, và như vậy là chưa đủ, nhưng chuyện đó nói sau. Nếu ảnh đã có sẵn trong project, ví dụ bản thiết kế từ designer trong thư mục img/, cách thứ hai tiện hơn:

@img/reference.png Chỉnh index.html theo phong cách của mẫu này.

Gõ @, bắt đầu gõ tên file, và Claude Code sẽ tự điền đường dẫn. Với ảnh kiểu này, quay lại dùng tiếp rất dễ: ở bất kỳ yêu cầu nào sau đó, chỉ cần viết lại @img/reference.png thay vì dán ảnh lại từ đầu. File nằm ngoài project cũng chỉ định được, bằng đường dẫn đầy đủ.

Nếu terminal của bạn chặn Ctrl+V để dùng vào việc riêng, dùng Alt+V thay thế. Các định dạng thông thường đều dùng được: PNG, JPEG, WebP, cả GIF nữa, chỉ có điều với GIF động agent chỉ nhận khung hình đầu tiên. Ảnh chụp màn hình từ điện thoại vẫn ổn. Ảnh chụp lại màn hình bằng máy ảnh thì kém hơn: ánh sáng phản chiếu và góc nghiêng khiến agent đọc sai.

Và thứ tự: ảnh trước, lời sau. Agent làm việc tốt hơn theo cách này, và bạn cũng thấy tiện hơn - cho xem trước, giải thích sau.

2. Agent thấy gì trên tấm ảnh

Chính tấm ảnh, không phải mô tả. Ảnh chụp màn hình lớn sẽ bị thu nhỏ trước khi gửi đi, nên chi tiết nhỏ trên màn hình của bạn có thể bị nhòe với agent. Cái lớn thì agent lấy được chắc chắn: các khối được sắp theo thứ tự nào từ trên xuống, tỷ lệ của chúng, trang sáng hay tối và màu nhấn là gì, văn bản đọc được, phong cách chung - dày đặc hay thoáng, góc vuông hay bo tròn.

Cách đơn giản để chắc chắn agent đang nhìn đúng chỗ bạn nhìn: trước khi chỉnh sửa, hãy nhờ nó mô tả lại mẫu, không thay đổi gì cả. Mất một phút. Câu trả lời sẽ trông đại loại thế này:

Trang sáng màu. Phía trên là thanh header hẹp, tên bên trái, ba liên kết bên phải.
Bên dưới là tiêu đề lớn hai dòng và một đoạn văn ngắn phía dưới nó.
Tiếp theo là ba thẻ xếp hàng ngang, cùng chiều rộng, ảnh phía trên và chữ phía dưới.
Chỉ có một màu nhấn, xanh dương đậm: nút trong header và gạch chân.
Nhiều khoảng trống giữa các khối, góc bo tròn, gần như không có bóng đổ.

Với mẫu của bạn, phần mô tả lại sẽ khác, và trong đó hoàn toàn có thể xuất hiện mã màu, "khoảng cách chừng 24 pixel" và tên font chữ. Đây là ước lượng bằng mắt, không phải đo bằng công cụ chọn màu hay thước kẻ: những con số kiểu này cần kiểm tra lại bên cạnh mẫu, chứ đừng coi như đã đo chính xác. Lượt đầu tiên sẽ cho đúng hướng, chứ không khớp từng chi tiết. Đây là đặc điểm của tấm ảnh, không phải lỗi của agent, và phần dưới sẽ giải thích vì sao.

3. Những gì ảnh không cho biết

Khoảng cách 24 pixel thì agent sẽ gọi là "khoảng 24" và có thể sai lệch tới một phần ba, mã màu thì đưa ra một mã gần giống, font chữ thì chọn cái có phong cách gần nhất. Hover, nhấp chuột, animation, các trang liền kề, giao diện trên điện thoại - những thứ này không có trong ảnh chụp, và agent sẽ không biết đến chúng cho tới khi bạn nói ra.

Riêng về điện thoại. Mỗi ảnh chụp màn hình chỉ ứng với một chiều rộng màn hình nhất định, và agent chỉ thấy đúng chiều rộng đó. Nếu giao diện trên điện thoại quan trọng và mẫu mở được qua liên kết, hãy chụp thêm ảnh từ điện thoại nữa: hai tấm ảnh, hai nhãn. Không có tấm ảnh thứ hai, bạn sẽ phải mô tả màn hình hẹp bằng lời, và kết quả sẽ là của lời mô tả đó, chứ không phải của mẫu.

4. Điều cần viết thêm bằng lời

Tấm ảnh trả lời câu hỏi "cần trông như thế nào" và không trả lời thêm bốn câu nữa. Phần việc của bạn là đưa mẫu và nói rõ cần làm gì với nó. Bốn dòng, và sau đó bạn sẽ dùng chính chúng để đối chiếu kết quả.

Điều quan trọng nhất trong mẫu. Màu sắc? Lưới thẻ? Header? Phong cách font chữ? Thiếu điều này, agent sẽ lấy tất cả cùng lúc và lấy theo kiểu trung bình, mà trung bình thì thường không đúng ý. Từ ngữ cho dòng này thì có sẵn rồi: lấy từ phần agent mô tả lại mẫu ở bước đầu.

Điều cần giữ nguyên ở trang mình. Văn bản, cấu trúc trang, liên kết, ảnh của riêng mình. Nếu không, agent có thể viết lại tiêu đề theo mẫu: ở đó vốn có tiêu đề khác.

Điều không được sao chép. Logo, văn bản của người khác, sản phẩm, ảnh chụp. Mẫu chỉ là phong cách, không phải nội dung.

Giới hạn. Một trang duy nhất, chỉ sửa trong index.html và style.css, không dùng thư viện hay build. Những gì không được động vào.

Bốn dòng này trông có vẻ rườm rà bên cạnh tấm ảnh. Nhưng thiếu chúng thì kết quả đẹp mà không đúng, và làm lại còn tốn thời gian hơn cả bốn dòng đó.

5. Một yêu cầu trọn vẹn

Ảnh trước, bốn dòng sau:

[Image #1] Chỉnh trang của tôi theo phong cách của mẫu này.
Điều quan trọng: tông sáng, thẻ chia ba cột, tiêu đề lớn không chân.
Giữ nguyên văn bản, cấu trúc và ảnh của tôi.
Đừng chuyển logo, ảnh chụp và văn bản từ mẫu sang.
Chỉ sửa index.html và style.css, không dùng thư viện.

Bốn dòng sau tấm ảnh chính là bốn điều mà bức ảnh không nói tới.

Đáp lại, agent thường liệt kê những gì nó đã lấy từ mẫu, rồi chỉnh sửa các file. Kết quả đầu tiên là đúng hướng, chứ chưa phải bản sao chính xác. Sau đó là các yêu cầu chỉnh thêm bằng lời, ngắn gọn, vì mẫu đã có sẵn trong cuộc trò chuyện nên không cần dán lại ảnh:

Thẻ cần sát mẫu hơn: bóng đổ mềm hơn, bo góc lớn hơn, khoảng trống giữa các thẻ nhiều hơn.

Khi agent báo "xong", hãy mở mẫu và trang của bạn cạnh nhau rồi đối chiếu theo bốn dòng của bạn. Nếu kết quả còn xa mẫu về tổng thể, đừng lặp lại đúng tấm ảnh với đúng yêu cầu cũ: hãy nêu một điểm sai lệch rõ nhất và sửa từng cái một. Câu báo cáo "đã làm giống ảnh" không tính là một phép kiểm tra. nhất là khi nghe rất chắc chắn.

6. Điều cần nhớ

• Ảnh quy định hình thức, lời nói quy định giới hạn. Thiếu một trong hai thì kết quả hoặc "không đúng", hoặc mất nhiều thời gian.
• Agent lấy từ ảnh những thứ lớn: cấu trúc, tỷ lệ, tông màu, phong cách. Chi tiết nhỏ và hành vi vẫn là việc của bạn.
• Lượt đầu chỉ là đúng hướng. Các yêu cầu chỉnh thêm sau đó ngắn gọn vì mẫu đã có sẵn trong cuộc trò chuyện.
• Ảnh còn hữu ích ở nhiều chỗ khác, không chỉ làm mẫu. Hãy đưa ảnh ở bất cứ đâu mà mô tả bằng lời sẽ dài hơn chính tấm ảnh.

"Làm giống thế này" vẫn là một khởi đầu tốt. Nó chỉ trở thành một yêu cầu tốt sau bốn dòng bổ sung và một lần nhìn lại kết quả cạnh tấm mẫu.

Tổ hợp phím và hình thức nhãn ảnh có thể khác đi ở các phiên bản Claude Code mới hơn; cách đưa ảnh và giới hạn của những gì agent thấy được thì không phụ thuộc vào phiên bản.