Cung cấp cho Qwen 3.7 Plus một ảnh chụp màn hình của giao diện người dùng (UI) và nó có thể viết mã giao diện người dùng (front-end) để xây dựng lại giao diện đó. Mô hình đọc hình ảnh và mã cùng lúc, vì vậy một bản phác thảo thiết kế, một trang của đối thủ cạnh tranh, hoặc một tệp xuất từ Figma sẽ trở thành một thành phần React hoặc HTML khởi đầu chỉ trong một lần gọi. Hướng dẫn này chỉ ra quy trình làm việc và cách để có được đầu ra mà bạn thực sự có thể triển khai.
Chúng ta sẽ tìm hiểu về cuộc gọi cơ bản, các chi tiết câu lệnh (prompt) quan trọng, vòng lặp phản hồi trực quan giúp đạt độ chính xác từng pixel, và cách biến UI được tạo thành một ứng dụng hoạt động. Để biết thông tin cơ bản về mô hình, hãy xem Tổng quan về Qwen 3.7 Plus của chúng tôi, và để biết định dạng yêu cầu, hãy xem hướng dẫn API Qwen 3.7 Plus. Bạn sẽ kiểm tra API và các điểm cuối (endpoints) mà UI của bạn gọi trong Apidog trong suốt quá trình.
TÓM TẮT
Gửi một ảnh chụp màn hình kèm theo một câu lệnh (prompt) chính xác đến Qwen 3.7 Plus và yêu cầu mã bằng khung làm việc mục tiêu của bạn. Lần chạy đầu tiên sẽ đưa bạn đến gần; bạn tinh chỉnh bằng cách hiển thị kết quả, chụp ảnh màn hình nó, và yêu cầu mô hình sửa các khác biệt so với bản gốc. Plus phù hợp với việc này vì nó kết hợp khả năng thị giác mạnh mẽ với khả năng lập trình vững chắc, giữ ngữ cảnh 1M token cho các thiết kế lớn và có chi phí thấp cho mỗi lần gọi. Công việc nằm ở câu lệnh và sự lặp lại, không phải ở API.
Tại sao nên dùng Qwen 3.7 Plus cho việc này
Chuyển ảnh chụp màn hình thành mã cần hai điều cùng lúc: đọc hình ảnh chính xác, sau đó viết mã đúng. Plus đạt khoảng 60% trên SWE-Bench Pro và 70.3 trên Terminal-Bench, vì vậy khả năng lập trình của nó tốt, và khả năng thị giác của nó xử lý các bố cục UI phức tạp. Ngữ cảnh 1M token cho phép bạn gửi một thiết kế cao, độ phân giải cao mà không bị cắt xén, và với 0,40 đô la cho mỗi triệu token đầu vào, bạn có thể lặp lại một cách tiết kiệm. Đối với phiên bản tác tử của tác vụ này, điều khiển một UI thay vì xây dựng lại nó, hãy xem hướng dẫn tác tử sử dụng máy tính của chúng tôi.
Cuộc gọi cơ bản
Gửi hình ảnh dưới dạng phần image_url cùng với một hướng dẫn văn bản. Dưới đây là một trình tạo tối thiểu:
import os, base64
from openai import OpenAI
client = OpenAI(
api_key=os.environ["DASHSCOPE_API_KEY"],
base_url="https://dashscope-intl.aliyuncs.com/compatible-mode/v1",
)
def screenshot_to_code(png_path, prompt):
b64 = base64.b64encode(open(png_path, "rb").read()).decode()
resp = client.chat.completions.create(
model="qwen3.7-plus",
messages=[{
"role": "user",
"content": [
{"type": "text", "text": prompt},
{"type": "image_url",
"image_url": {"url": f"data:image/png;base64,{b64}"}},
],
}],
)
return resp.choices[0].message.content
print(screenshot_to_code("mockup.png", "Rebuild this UI as a React component."))
Xác nhận ID mô hình hiện tại trong tài liệu Model Studio trước khi triển khai. Điều đó hoạt động, nhưng một câu lệnh một dòng sẽ cho kết quả chất lượng một dòng. Chất lượng nằm ở câu lệnh.
Viết một câu lệnh (prompt) để có mã có thể triển khai
Các câu lệnh mơ hồ sẽ tạo ra đánh dấu chung chung. Hãy cụ thể về công nghệ và các ràng buộc:
Chuyển ảnh chụp màn hình UI này thành một thành phần React duy nhất sử dụng Tailwind CSS.
Yêu cầu:
- Phù hợp với bố cục, khoảng cách và bảng màu càng gần càng tốt.
- Làm cho nó phản hồi tốt với chiều rộng di động 375px.
- Sử dụng HTML ngữ nghĩa và nhãn dễ tiếp cận cho các trường nhập liệu và nút.
- Sử dụng dữ liệu giữ chỗ (placeholder) ở những nơi ảnh chụp màn hình hiển thị nội dung động.
- Chỉ trả về mã thành phần, không có văn xuôi.
Nêu tên khung làm việc, hệ thống tạo kiểu, các điểm ngắt (breakpoints) và tiêu chuẩn truy cập (accessibility bar). Nói rõ cách xử lý nội dung động để nó không tự tạo ra một backend. Tài liệu Tailwind CSS là một tài liệu tham khảo tốt cho các lớp tiện ích mà nó sẽ phát ra. Nếu bạn cung cấp cho mô hình một đặc tả thành phần hoặc một bản tóm tắt thiết kế ngắn gọn, đầu ra sẽ còn gần hơn nữa; bài viết của chúng tôi về thiết kế.md làm gì cho các tác tử lập trình giải thích tại sao một đặc tả bằng văn bản lại thay đổi kết quả.
Thu hẹp khoảng cách với vòng lặp phản hồi trực quan
Lần chạy đầu tiên hiếm khi đúng hoàn toàn về khoảng cách và màu sắc. Đây là lúc khả năng thị giác của Plus phát huy tác dụng lần thứ hai. Render thành phần đã tạo, chụp ảnh màn hình nó, sau đó gửi cả hai hình ảnh trở lại và yêu cầu mô hình đối chiếu chúng:
Đây là thiết kế mục tiêu (hình ảnh 1) và bản render hiện tại của tôi (hình ảnh 2).
Liệt kê các khác biệt về mặt trực quan, sau đó trả về mã thành phần đã sửa lỗi
để phù hợp với hình ảnh 1 hơn.
Hai hoặc ba vòng lặp này thường cho ra kết quả khó phân biệt với bản gốc. Đây là ý tưởng nhận diện và sửa lỗi tương tự đằng sau một tác tử sử dụng máy tính, nhưng áp dụng cho mã thay vì các cú nhấp chuột.
Xử lý các thiết kế thực tế
Các bản mockup sản xuất thường lớn và chi tiết, điều này có hai hệ quả:
- Chi phí token. Một hình ảnh toàn trang, độ phân giải cao sẽ tốn hàng nghìn token. Giảm tỷ lệ xuống kích thước nhỏ nhất mà văn bản trong thiết kế vẫn đọc được, và cắt xén đến phần bạn đang xây dựng.
- Phạm vi. Đừng yêu cầu toàn bộ bảng điều khiển chỉ trong một lần gọi. Chia trang thành các phần: tiêu đề, thanh bên, bảng, và tạo từng phần, sau đó kết hợp chúng lại. Ngữ cảnh 1M giúp ích, nhưng yêu cầu nhỏ hơn sẽ tạo ra mã sạch hơn.
Nhận được đầu ra tốt hơn
Một vài chỉnh sửa câu lệnh sẽ khắc phục các vấn đề phổ biến nhất:
- Sai màu. Mô hình ước tính các sắc thái. Dán các giá trị hex chính xác từ thiết kế của bạn và yêu cầu nó sử dụng chúng.
- Các biểu tượng được tạo ra. Nó đoán hình dạng biểu tượng. Đặt tên một bộ biểu tượng như Lucide hoặc Heroicons và yêu cầu nó sử dụng các thành phần đó.
- Nội dung giả định. Nếu nó điền vào văn bản trông giống thật, hãy yêu cầu nó sử dụng nội dung giữ chỗ được đánh dấu rõ ràng thay thế.
- Đống div. Yêu cầu rõ ràng các phần tử ngữ nghĩa và cấu trúc phẳng, nếu không nó có xu hướng lồng quá nhiều div bao bọc.
Mỗi điều trên là một dòng bổ sung vào câu lệnh, và cùng nhau chúng sẽ giảm đáng kể số vòng tinh chỉnh của bạn.
Từ UI đến một ứng dụng hoạt động
Mã giao diện người dùng (front-end) được tạo chỉ là một nửa tính năng. Thành phần sẽ tìm nạp dữ liệu, gửi biểu mẫu và gọi các điểm cuối (endpoints) phải tồn tại và hoạt động. Đó là lúc phím tắt chuyển ảnh chụp màn hình thành mã gặp kỹ thuật thực tế.
Thiết kế các điểm cuối đó trước và UI được tạo sẽ có một thứ gì đó vững chắc để giao tiếp. Apidog cho phép bạn xác định hợp đồng API, giả lập nó để thành phần mới hiển thị dữ liệu thực tế ngay lập tức, và kiểm tra các phản hồi trước khi backend được xây dựng. Hướng dẫn chế độ ưu tiên đặc tả của chúng tôi sẽ hướng dẫn qua quy trình đó, và cách tiếp cận này kết hợp tốt với giao diện người dùng do AI xây dựng giống như cách nó kết hợp với API được xây dựng trong Cursor.
Tải Apidog để giả lập và kiểm tra các API đằng sau UI mà Qwen 3.7 Plus tạo ra.
Câu hỏi thường gặp
Qwen 3.7 Plus có thể nhắm mục tiêu đến những khung làm việc nào? Bất cứ điều gì bạn nêu trong câu lệnh: React, Vue, Svelte, HTML và CSS thuần túy, Tailwind, hoặc một thư viện thành phần. Hãy rõ ràng, vì mặc định là đánh dấu chung chung.
Độ chính xác của lần chạy đầu tiên là bao nhiêu? Gần đúng về cấu trúc, còn sơ sài về khoảng cách và màu sắc chính xác. Vòng lặp phản hồi trực quan, render và gửi lại, là thứ giúp nó đạt độ chính xác gần từng pixel.
Nó có thể hoạt động từ một thiết kế Figma không? Có, nếu bạn xuất khung đó dưới dạng hình ảnh. Mô hình đọc thiết kế đã render, chứ không phải tệp Figma.
Làm thế nào để giảm chi phí token? Giảm tỷ lệ hình ảnh xuống kích thước nhỏ nhất có thể đọc được, cắt xén đến phần bạn đang xây dựng và tạo trang theo từng phần thay vì tất cả cùng một lúc.
Nó có xây dựng cả backend không? Không. Nó tạo ra mã giao diện người dùng (front-end) cần có API. Thiết kế và giả lập chúng riêng biệt, đó là phần mà Apidog xử lý.
Điểm mấu chốt
Chuyển ảnh chụp màn hình thành mã với Qwen 3.7 Plus là một câu lệnh chính xác, một cuộc gọi đa phương thức giá rẻ và một vòng lặp phản hồi trực quan ngắn gọn. Nó giúp bạn có một thành phần hoạt động nhanh chóng, nhưng UI vẫn cần các API thực tế bên dưới. Tạo giao diện người dùng (front-end) với Plus, sau đó thiết kế, giả lập và kiểm tra các điểm cuối (endpoints) trong Apidog để tính năng hoàn chỉnh hoạt động tốt.