Qwen 3.7 Plus로 스크린샷 코드 변환

UI 스크린샷을 Qwen 3.7 Plus에 제공하면 프런트엔드 코드를 작성하여 해당 UI를 재구성할 수 있습니다. 모델은 이미지와 코드를 동시에 읽으므로, 디자인 목업, 경쟁사 페이지 또는 Figma 내보내기가 단 한 번의 호출로 React 또는 HTML 구성 요소로 변환됩니다. 이 가이드는 워크플로와 실제로 배포할 수 있는 결과물을 얻는 방법을 보여줍니다.

기본 호출, 중요한 프롬프트 세부 사항, 픽셀 단위의 정확도를 달성하는 시각적 피드백 루프, 그리고 생성된 UI를 작동하는 앱으로 바꾸는 방법을 다룰 것입니다. 모델 배경에 대한 정보는 Qwen 3.7 Plus 개요를 참조하고, 요청 형식에 대한 정보는 Qwen 3.7 Plus API 가이드를 참조하십시오. 이 과정에서 Apidog에서 UI가 호출하는 API와 엔드포인트를 테스트하게 될 것입니다.

버튼

요약

Qwen 3.7 Plus에 스크린샷과 정확한 프롬프트를 보내 목표 프레임워크의 코드를 요청하세요. 첫 번째 시도에서 어느 정도 근접하게 얻을 수 있으며, 결과물을 렌더링하고 스크린샷을 찍은 다음 모델에게 원본과의 차이점을 수정하도록 요청하여 개선할 수 있습니다. Plus는 강력한 시각 인식과 견고한 코딩 능력을 결합하고, 대규모 디자인을 위한 1M 토큰 컨텍스트를 유지하며, 호출당 비용이 적게 들기 때문에 이러한 작업에 적합합니다. 작업은 API가 아닌 프롬프트와 반복 작업에 있습니다.

이 작업에 Qwen 3.7 Plus를 사용하는 이유

스크린샷을 코드로 변환하려면 두 가지가 동시에 필요합니다: 이미지를 정확하게 읽고, 올바른 코드를 작성하는 것입니다. Plus는 SWE-Bench Pro에서 약 60%, Terminal-Bench에서 70.3점을 기록하여 코딩 능력이 뛰어나며, UI 레이아웃의 밀집도를 시각적으로 처리합니다. 1M 토큰 컨텍스트를 사용하면 길고 고해상도 디자인을 잘림 없이 보낼 수 있으며, 백만 입력 토큰당 $0.40의 저렴한 비용으로 반복 작업을 수행할 수 있습니다. UI를 재구축하는 대신 UI를 조작하는 에이전트와 관련된 작업에 대해서는 컴퓨터 사용 에이전트 가이드를 참조하십시오.

기본 호출

텍스트 지침과 함께 이미지를 image_url 부분으로 전송합니다. 다음은 최소한의 생성기입니다:

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."))

배포하기 전에 Model Studio 문서에서 현재 모델 ID를 확인하세요. 이 방법은 작동하지만, 한 줄짜리 프롬프트는 한 줄짜리 품질의 결과를 가져옵니다. 품질은 프롬프트에 달려있습니다.

배포 가능한 코드를 얻는 프롬프트 작성

모호한 프롬프트는 일반적인 마크업을 생성합니다. 스택과 제약 사항에 대해 구체적으로 설명하세요:

Convert this UI screenshot into a single React component using Tailwind CSS.
Requirements:
- Match the layout, spacing, and color palette as closely as you can.
- Make it responsive down to a 375px mobile width.
- Use semantic HTML and accessible labels for inputs and buttons.
- Use placeholder data where the screenshot shows dynamic content.
- Return only the component code, no prose.

프레임워크, 스타일링 시스템, 반응형 중단점(breakpoints), 접근성 기준을 명시하세요. 동적 콘텐츠를 처리하는 방법을 알려주어 백엔드를 임의로 생성하지 않도록 하세요. Tailwind CSS 문서는 모델이 생성할 유틸리티 클래스에 대한 좋은 참조가 됩니다. 모델에 컴포넌트 사양이나 간략한 디자인 브리핑을 제공하면 결과물이 더욱 정확해집니다. 디자인.md가 코딩 에이전트에 어떤 역할을 하는지에 대한 저희 글은 서면 사양이 결과를 어떻게 변화시키는지 설명합니다.

시각적 피드백 루프를 통해 격차 줄이기

첫 번째 시도만으로는 간격과 색상이 정확히 맞지 않는 경우가 많습니다. 이때 Plus의 시각 능력이 두 번째로 빛을 발합니다. 생성된 컴포넌트를 렌더링하고 스크린샷을 찍은 다음, 두 이미지를 다시 보내 모델에게 조정하도록 요청하세요:

Here is the target design (image 1) and my current render (image 2).
List the visual differences, then return the corrected component code
that matches image 1 more closely.

이러한 과정을 두세 번 반복하면 원본과 구별하기 어려운 결과물을 얻을 수 있습니다. 이는 컴퓨터 사용 에이전트 뒤에 있는 인식 및 수정 개념과 동일하며, 클릭 대신 코드에 적용된 것입니다.

실제 디자인 처리

실제 프로덕션 목업은 크고 상세하여 두 가지 결과를 초래합니다:

토큰 비용. 전체 페이지의 고해상도 이미지는 수천 개의 토큰을 사용합니다. 디자인의 텍스트를 여전히 읽을 수 있는 가장 작은 크기로 축소하고, 빌드하려는 섹션으로 자르세요.
범위. 한 번의 호출로 전체 대시보드를 요청하지 마세요. 페이지를 헤더, 사이드바, 테이블과 같은 섹션으로 나누고, 각 섹션을 생성한 다음 조합하세요. 1M 컨텍스트가 도움이 되지만, 더 작은 요청은 더 깔끔한 코드를 생성합니다.

더 나은 결과물 얻기

몇 가지 프롬프트 조정으로 가장 일반적인 문제를 해결할 수 있습니다:

잘못된 색상. 모델은 색조를 대략적으로 파악합니다. 디자인에서 정확한 헥스 값을 복사하여 사용하도록 지시하세요.
임의로 생성된 아이콘. 아이콘 모양을 추측합니다. Lucide 또는 Heroicons와 같은 아이콘 세트 이름을 지정하고 해당 구성 요소를 사용하도록 요청하세요.
지어낸 내용. 실제처럼 보이는 텍스트를 채워 넣는다면, 대신 명확하게 표시된 플레이스홀더 콘텐츠를 사용하도록 지시하세요.
Div 지옥. 시맨틱 요소와 평면 구조를 명시적으로 요청하세요. 그렇지 않으면 래퍼 div를 과도하게 중첩하는 경향이 있습니다.

각각은 프롬프트에 한 줄을 추가하는 것으로, 이들을 함께 사용하면 개선 작업 횟수를 눈에 띄게 줄일 수 있습니다.

UI에서 작동하는 앱으로

생성된 프런트엔드 코드는 기능의 절반에 불과합니다. 컴포넌트는 데이터를 가져오고, 양식을 제출하며, 존재하고 작동해야 하는 엔드포인트를 호출할 것입니다. 바로 이 지점에서 스크린샷-투-코드 단축키가 실제 엔지니어링과 만납니다.

먼저 해당 엔드포인트를 설계하면 생성된 UI가 통신할 견고한 대상을 갖게 됩니다. Apidog를 사용하면 API 계약을 정의하고, 즉시 현실적인 데이터로 새 컴포넌트를 렌더링하도록 목업하며, 백엔드가 구축되기 전에 응답을 테스트할 수 있습니다. 저희의 사양 우선 모드 가이드는 이러한 흐름을 안내하며, 이 접근 방식은 Cursor에서 구축된 API와 마찬가지로 AI로 구축된 프런트엔드와 잘 어울립니다.

Qwen 3.7 Plus가 생성하는 UI 뒤의 API를 목업하고 테스트하려면 Apidog를 다운로드하세요.

자주 묻는 질문

Qwen 3.7 Plus는 어떤 프레임워크를 대상으로 할 수 있나요? 프롬프트에서 명시하는 어떤 프레임워크든 가능합니다: React, Vue, Svelte, 일반 HTML 및 CSS, Tailwind 또는 컴포넌트 라이브러리. 기본값은 일반적인 마크업이므로 명확하게 지정하세요.

첫 번째 시도는 얼마나 정확한가요? 구조는 가깝지만, 정확한 간격과 색상은 거칩니다. 렌더링하고 다시 보내는 시각적 피드백 루프를 통해 픽셀 단위로 정확하게 만들 수 있습니다.

Figma 디자인으로도 작업할 수 있나요? 네, 프레임을 이미지로 내보내면 가능합니다. 모델은 Figma 파일 자체가 아닌 렌더링된 디자인을 읽습니다.

토큰 비용을 낮추려면 어떻게 해야 하나요? 이미지를 읽을 수 있는 가장 작은 크기로 축소하고, 빌드하려는 섹션으로 자르며, 페이지를 한 번에 모두 생성하는 대신 부분적으로 생성하세요.

백엔드도 구축하나요? 아니요. API를 기대하는 프런트엔드 코드를 생성합니다. 백엔드는 별도로 설계하고 목업해야 하며, 이 부분은 Apidog가 처리합니다.

결론

Qwen 3.7 Plus를 사용한 스크린샷-투-코드는 정확한 프롬프트, 저렴한 멀티모달 호출, 그리고 짧은 시각적 피드백 루프를 통해 이루어집니다. 이를 통해 작동하는 컴포넌트를 빠르게 얻을 수 있지만, UI 아래에는 여전히 실제 API가 필요합니다. Plus로 프런트엔드를 생성한 다음, Apidog에서 엔드포인트를 설계하고, 목업하고, 테스트하여 완성된 기능이 제대로 작동하도록 하세요.

버튼