Qwen 3.7 Plusでスクリーンショットからコード生成

UIのスクリーンショットを**Qwen 3.7 Plus**に渡すと、そのフロントエンドコードを生成できます。このモデルは画像を読み込みながら同時にコードを生成するため、デザインモックアップ、競合ページのスクリーンショット、またはFigmaのエクスポートが、たった1回の呼び出しで初期のReactまたはHTMLコンポーネントになります。このガイドでは、そのワークフローと、実際にリリースできるような出力を得る方法について説明します。基本的な呼び出し、重要なプロンプトの詳細、ピクセル単位での正確性を達成するための視覚的フィードバックループ、そして生成されたUIを動作するアプリに変える方法について解説します。モデルの背景については、Qwen 3.7 Plusの概要を、リクエスト形式についてはQwen 3.7 Plus APIガイドをご覧ください。この記事を読み進める中で、ApidogでAPIとUIが呼び出すエンドポイントをテストしていきます。ボタン

要約

スクリーンショットと正確なプロンプトをQwen 3.7 Plusに送信し、ターゲットフレームワークでのコードを求めます。最初の生成でかなり近いものが得られますが、その結果をレンダリングし、スクリーンショットを撮り、元の画像との違いをモデルに修正させることで洗練させていきます。Plusはこのタスクに適しています。強力なビジョンと堅実なコーディング能力を兼ね備え、大規模なデザインに対応する1Mトークンのコンテキストを持ち、1回の呼び出しあたりのコストも低いからです。作業の肝はプロンプトと繰り返しにあり、APIそのものにはありません。

このタスクにQwen 3.7 Plusが適している理由

スクリーンショットからコードへの変換には、同時に2つのことが必要です。画像を正確に読み取り、次に正しいコードを書くことです。PlusはSWE-Bench Proで約60%、Terminal-Benchで70.3%のスコアを記録しており、そのコーディング能力は高く、そのビジョン能力は高密度のUIレイアウトを処理できます。1Mトークンのコンテキストにより、縦長の高解像度デザインでも切り捨てることなく送信でき、入力トークン100万あたり0.40ドルという低コストで反復作業が可能です。このタスクのエージェント的な従兄弟、つまりUIを再構築する代わりにUIを操作するエージェントについては、コンピュータ利用エージェントガイドをご覧ください。

Qwen 3.7 Plusのアーキテクチャ図。入力はスクリーンショットとプロンプト。出力はコード。視覚認識とコード生成のプロセスを示す。

基本的な呼び出し

画像を`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を確認してください。これで動作しますが、1行のプロンプトでは1行程度の品質の結果しか得られません。品質はプロンプトに左右されます。

出荷可能なコードを得るプロンプトの書き方

漠然としたプロンプトは一般的なマークアップを生成します。スタックと制約について具体的に指定しましょう。

このUIスクリーンショットをTailwind CSSを使用した単一のReactコンポーネントに変換してください。
要件:
- レイアウト、間隔、カラーパレットをできるだけ忠実に合わせてください。
- 375pxのモバイル幅までレスポンシブにしてください。
- 入力とボタンにはセマンティックなHTMLとアクセシブルなラベルを使用してください。
- スクリーンショットに動的なコンテンツが表示されている場合は、プレースホルダーデータを使用してください。
- コンポーネントコードのみを返し、散文は含めないでください。

フレームワーク、スタイリングシステム、ブレークポイント、アクセシビリティの基準を明記してください。バックエンドを勝手に作成しないように、動的なコンテンツの処理方法を指示してください。Tailwind CSSのドキュメントは、モデルが生成するユーティリティクラスの良い参考になります。モデルにコンポーネント仕様や短いデザイン概要を与えると、出力はさらに近くなります。design.mdがコーディングエージェントに何をもたらすかという記事では、書かれた仕様が結果をどのように変えるかを説明しています。

視覚的フィードバックループでギャップを埋める

最初の生成で、間隔や色を完璧に再現することはめったにありません。ここでPlusのビジョンが再び役立ちます。生成されたコンポーネントをレンダリングし、スクリーンショットを撮り、両方の画像を返して、モデルにそれらを調整するように依頼します。

これがターゲットデザイン（画像1）と現在のレンダリング（画像2）です。
視覚的な違いをリストアップし、画像1により密接に一致するように修正されたコンポーネントコードを返してください。

このラウンドを2、3回繰り返すと、通常、元のデザインとほとんど区別がつかない結果が得られます。これは、コンピューター利用エージェントの背後にある、知覚と修正という考え方と同じで、クリックではなくコードに適用されています。

実際のデザインの処理

本番のモックアップは大きく詳細であるため、2つの結果が生じます。

トークンコスト。フルページの高解像度画像は数千トークンになります。デザイン内のテキストがまだ判読できる最小サイズに縮小し、作成するセクションにトリミングしてください。
スコープ。1回の呼び出しでダッシュボード全体を要求しないでください。ページをヘッダー、サイドバー、テーブルなどのセクションに分割し、それぞれを生成してから構成してください。1Mのコンテキストは役立ちますが、要求が小さいほどクリーンなコードが生成されます。

より良い出力を得るために

いくつかのプロンプトの調整で、最も一般的な問題を解決できます。

間違った色。モデルは色合いを近似します。デザインから正確なHEX値を貼り付け、それらを使用するように指示してください。
アイコンの捏造。アイコンの形を推測します。LucideやHeroiconsなどのアイコンセット名を挙げ、それらのコンポーネントを使用するように依頼してください。
でたらめなテキスト。実在するようなテキストを埋め込む場合は、明確にマークされたプレースホルダーコンテンツを使用するように指示してください。
Divの多用。セマンティックな要素とフラットな構造を明示的に要求しないと、ラッパーdivを過剰にネストする傾向があります。

これらはそれぞれプロンプトに1行追加するだけで、これらを合わせることで修正の回数を大幅に減らすことができます。

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を想定したフロントエンドコードを生成します。APIは別途設計し、モックアップしてください。これはApidogが対応する部分です。

結論

Qwen 3.7 Plusを使ったスクリーンショットからコードへの変換は、正確なプロンプト、安価なマルチモーダル呼び出し、そして短い視覚的フィードバックループによって行われます。これにより、動作するコンポーネントを迅速に作成できますが、UIの下には依然として実際のAPIが必要です。Plusでフロントエンドを生成し、Apidogでエンドポイントを設計、モックアップ、テストして、完成した機能が一体となるようにしましょう。ボタン