Chuyển Screenshot thành Code với Qwen 3.7 Plus

Cung cấp cho Qwen 3.7 Plus một ảnh chụp màn hình giao diện người dùng (UI), sau đó yêu cầu nó tạo lại thành mã front-end. Vì mô hình đọc được cả hình ảnh và mã, bạn có thể biến bản phác thảo thiết kế, trang của đối thủ, hoặc ảnh export từ Figma thành component React hoặc HTML khởi đầu chỉ bằng một lần gọi API.

Dùng thử Apidog ngay hôm nay

Bài viết này hướng dẫn quy trình triển khai thực tế: gọi API cơ bản, viết prompt đủ chi tiết, dùng vòng lặp phản hồi bằng ảnh để tinh chỉnh giao diện, và nối UI được tạo với API thật. Nếu cần nền tảng về mô hình, xem Tổng quan về Qwen 3.7 Plus. Nếu cần định dạng request, xem hướng dẫn API Qwen 3.7 Plus. Trong quá trình build, bạn có thể dùng Apidog để thiết kế, mock và kiểm thử các endpoint mà UI sẽ gọi.

TÓM TẮT

Quy trình ngắn gọn:

1. Gửi ảnh chụp màn hình UI cho Qwen 3.7 Plus.
2. Prompt rõ framework, styling, responsive, accessibility và phạm vi output.
3. Render mã được tạo.
4. Chụp lại kết quả render.
5. Gửi ảnh gốc và ảnh render cho mô hình để yêu cầu sửa khác biệt.
6. Lặp 2-3 vòng cho đến khi UI đủ gần bản thiết kế.
7. Kết nối component với API được mock hoặc API thật.

Qwen 3.7 Plus phù hợp với tác vụ này vì kết hợp khả năng thị giác, lập trình và ngữ cảnh dài. Tuy nhiên, chất lượng thực tế phụ thuộc chủ yếu vào prompt và vòng lặp tinh chỉnh, không chỉ vào API.

Tại sao nên dùng Qwen 3.7 Plus cho tác vụ chuyển screenshot thành code

Chuyển ảnh chụp màn hình thành mã cần hai năng lực cùng lúc:

• Hiểu bố cục, màu sắc, khoảng cách, typography và trạng thái UI từ hình ảnh.
• Sinh mã front-end có thể chỉnh sửa, render và tích hợp vào ứng dụng.

Qwen 3.7 Plus đạt khoảng 60% trên SWE-Bench Pro và 70.3 trên Terminal-Bench, cho thấy năng lực lập trình tốt. Ngữ cảnh 1M token giúp xử lý thiết kế lớn hoặc ảnh toàn trang, còn chi phí 0,40 USD cho mỗi triệu token đầu vào giúp bạn có thể lặp nhiều vòng. Nếu bạn quan tâm đến phiên bản tác tử điều khiển UI thay vì tạo lại UI, xem hướng dẫn tác tử sử dụng máy tính.

Gọi API cơ bản

Bạn gửi ảnh dưới dạng image_url cùng instruction văn bản. Ví dụ tối thiểu bằng Python:

import os
import 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):
    with open(png_path, "rb") as f:
        b64 = base64.b64encode(f.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

prompt = "Rebuild this UI as a React component."
print(screenshot_to_code("mockup.png", prompt))

Trước khi deploy, hãy xác nhận ID mô hình hiện tại trong tài liệu Model Studio.

Đoạn trên sẽ chạy được, nhưng prompt một dòng thường chỉ tạo ra kết quả gần đúng. Muốn dùng được trong dự án thật, bạn cần prompt có ràng buộc rõ ràng.

Viết prompt để nhận mã có thể triển khai

Prompt mơ hồ thường tạo ra markup chung chung. Hãy chỉ rõ stack, styling, responsive, accessibility và cách xử lý dữ liệu động.

Ví dụ prompt tốt hơn:

Chuyển ảnh chụp màn hình UI này thành một component React duy nhất sử dụng Tailwind CSS.

Yêu cầu:
- Khớp bố cục, khoảng cách, typography và bảng màu càng gần càng tốt.
- Responsive tốt ở chiều rộng mobile 375px và desktop 1440px.
- Sử dụng HTML ngữ nghĩa.
- Thêm label hoặc aria-label phù hợp cho input, button và control tương tác.
- Dùng dữ liệu placeholder cho các nội dung động.
- Không tạo backend, không gọi API thật.
- Chỉ trả về mã component, không giải thích thêm.

Bạn nên nêu rõ:

• Framework: React, Vue, Svelte, HTML/CSS thuần.
• Styling: Tailwind CSS, CSS Modules, styled-components, hoặc CSS thuần.
• Breakpoint: ví dụ 375px, 768px, 1440px.
• Accessibility: label, aria-label, semantic elements.
• Output format: chỉ code, không văn xuôi.
• Dữ liệu động: dùng placeholder, không tự phát minh backend.

Nếu dùng Tailwind, có thể tham chiếu tài liệu Tailwind CSS để kiểm tra utility class mà mô hình sinh ra. Nếu bạn có đặc tả component hoặc mô tả thiết kế bằng văn bản, hãy đưa vào prompt. Bài viết thiết kế.md làm gì cho các tác tử lập trình giải thích vì sao đặc tả dạng văn bản giúp cải thiện kết quả.

Dùng vòng lặp phản hồi trực quan để tinh chỉnh UI

Lần chạy đầu tiên thường đúng cấu trúc nhưng sai chi tiết: spacing, màu, font-size, border-radius hoặc alignment. Cách hiệu quả là dùng chính Qwen 3.7 Plus để so sánh ảnh gốc và ảnh render.

Quy trình:

1. Tạo component từ ảnh gốc.
2. Render component trong app hoặc sandbox.
3. Chụp ảnh màn hình kết quả render.
4. Gửi cả ảnh gốc và ảnh render cho mô hình.
5. Yêu cầu mô hình liệt kê khác biệt và trả về mã đã sửa.

Prompt mẫu:

Đây là thiết kế mục tiêu ở hình ảnh 1 và bản render hiện tại ở hình ảnh 2.

Hãy:
1. Liệt kê các khác biệt trực quan quan trọng về bố cục, khoảng cách, màu sắc, typography và kích thước.
2. Sửa component React bên dưới để khớp hình ảnh 1 hơn.
3. Chỉ trả về mã component đã sửa.

Component hiện tại:
[ dán mã component ở đây ]

Hai hoặc ba vòng như vậy thường giúp kết quả gần với bản gốc hơn nhiều. Đây là cùng ý tưởng nhận diện và sửa lỗi trong tác tử sử dụng máy tính, nhưng áp dụng cho mã thay vì thao tác click.

Xử lý thiết kế thực tế

Mockup sản xuất thường dài, nhiều chi tiết và có nhiều trạng thái UI. Đừng gửi toàn bộ trang nếu bạn chỉ cần một phần.

1. Giảm kích thước ảnh

Ảnh toàn trang độ phân giải cao có thể tiêu tốn nhiều token. Hãy:

• Resize ảnh xuống mức nhỏ nhất mà chữ vẫn đọc được.
• Crop đúng vùng cần build.
• Tránh gửi phần ngoài phạm vi component.

Ví dụ: nếu bạn đang build bảng dữ liệu, chỉ gửi vùng bảng, không cần gửi toàn bộ dashboard.

2. Chia UI thành nhiều component

Thay vì yêu cầu mô hình tạo cả dashboard trong một lần gọi, hãy tách thành:

• Header
• Sidebar
• Toolbar
• Data table
• Filter panel
• Modal
• Empty state

Cách này giúp code sạch hơn, dễ review hơn và dễ tích hợp hơn.

Prompt mẫu:

Chỉ tạo component DataTable từ vùng ảnh này.
Không tạo header, sidebar hoặc layout toàn trang.
Component nhận dữ liệu qua prop `rows`.
Dùng placeholder data trong ví dụ nếu cần.

Cải thiện output bằng các ràng buộc cụ thể

Một số vấn đề thường gặp có thể giảm bằng cách thêm một dòng vào prompt.

Sai màu

Mô hình thường ước lượng màu. Nếu bạn có màu chính xác, hãy đưa mã hex vào prompt:

Sử dụng bảng màu sau:
- Primary: #2563EB
- Background: #F8FAFC
- Border: #E2E8F0
- Text primary: #0F172A
- Text secondary: #64748B

Icon bị đoán sai

Nếu mô hình tự vẽ icon bằng CSS hoặc SVG không nhất quán, hãy chỉ định thư viện:

Sử dụng icon từ lucide-react. Không tự tạo SVG tùy chỉnh trừ khi cần thiết.

Hoặc:

Sử dụng Heroicons cho tất cả icon.

Nội dung bị tự phát minh

Nếu UI có dữ liệu động, yêu cầu dùng placeholder rõ ràng:

Không tự tạo dữ liệu giống thật. Dùng placeholder như "Tên người dùng", "Tiêu đề mục", "Giá trị".

Quá nhiều div lồng nhau

Yêu cầu cấu trúc ngữ nghĩa:

Ưu tiên HTML ngữ nghĩa như header, nav, main, section, table, form, label và button.
Tránh lồng div không cần thiết.

Thiếu trạng thái responsive

Thêm breakpoint cụ thể:

Thiết kế phải hoạt động ở:
- Mobile: 375px
- Tablet: 768px
- Desktop: 1440px

Từ UI tĩnh đến ứng dụng hoạt động

Mã front-end được tạo mới chỉ là phần giao diện. Một tính năng hoàn chỉnh vẫn cần API để:

• Load dữ liệu.
• Gửi form.
• Xử lý filter, search, pagination.
• Hiển thị trạng thái loading, error, empty.
• Đồng bộ dữ liệu với backend.

Cách làm thực tế:

1. Thiết kế hợp đồng API trước.
2. Mock endpoint để component có dữ liệu render ngay.
3. Kết nối UI với mock API.
4. Kiểm thử response, schema và edge case.
5. Sau đó mới nối với backend thật.

Apidog cho phép bạn định nghĩa API contract, mock response và kiểm thử endpoint trước khi backend hoàn tất. Xem thêm Hướng dẫn chế độ ưu tiên đặc tả. Cách tiếp cận này cũng phù hợp với workflow tạo API bằng AI như trong bài API được xây dựng trong Cursor.

Bạn có thể tải Apidog để mock và kiểm thử API phía sau UI mà Qwen 3.7 Plus tạo ra.

Câu hỏi thường gặp

Qwen 3.7 Plus có thể tạo code cho framework nào?

Bất kỳ framework nào bạn nêu rõ trong prompt: React, Vue, Svelte, HTML/CSS thuần, Tailwind CSS hoặc thư viện component. Nếu không chỉ định, mô hình có thể trả về markup chung chung.

Lần chạy đầu tiên chính xác đến đâu?

Thường đúng cấu trúc tổng thể nhưng chưa chính xác tuyệt đối về spacing, màu sắc và typography. Vòng lặp render, chụp lại và gửi ảnh so sánh là cách cải thiện độ chính xác.

Có thể dùng thiết kế Figma không?

Có, nếu bạn export frame Figma thành ảnh. Mô hình đọc thiết kế đã render, không đọc trực tiếp file Figma.

Làm sao giảm chi phí token?

Resize ảnh, crop đúng vùng cần build và chia trang thành nhiều component nhỏ thay vì gửi toàn bộ UI trong một lần gọi.

Mô hình có xây backend không?

Không theo mặc định. Nó tạo mã front-end. Backend, API contract, mock response và kiểm thử endpoint nên được xử lý riêng, ví dụ bằng Apidog.

Đ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 workflow đơn giản: prompt rõ ràng, gọi API đa phương thức, render kết quả, rồi dùng vòng lặp phản hồi trực quan để tinh chỉnh. Cách này giúp bạn tạo component nhanh hơn, nhưng để thành tính năng hoàn chỉnh, UI vẫn cần API ổn định bên dưới. Hãy tạo front-end với Qwen 3.7 Plus, sau đó thiết kế, mock và kiểm thử endpoint trong Apidog.