Vision2Web - 清華大学とZhipu AIが共同で立ち上げた、ビジュアルWebサイト開発評価ベンチマーク

Vision2Webとは何ですか？

Vision2Webは、清華大学とZhipu AIが共同で立ち上げたプロジェクトです。ビジュアルWebサイト開発評価ベンチマークVision2Webは、マルチモーダルAIエージェントのエンドツーエンドのWebサイト構築能力を評価するために使用されます。このベンチマークには、静的Webページ生成、インタラクティブなフロントエンド開発、フルスタックWebサイト構築という、難易度が段階的に上がる3つのレベルに分けられた193の実際のWebサイトタスクが含まれています。このベンチマークは、革新的な「ワークフローベースのエージェント検証」パラダイムを採用しており、機能的正確性に関するGUIエージェント検証と視覚的忠実度に関するVLM評価を組み合わせることで、複雑で長期にわたるソフトウェア開発タスクにおける、現在の最先端（SOTA）モデルの能力限界を体系的に明らかにします。

Vision2Webの主な機能

• 3段階の段階的能力評価静的なウェブページの生成から、インタラクティブなフロントエンド開発、そしてフルスタックのウェブサイト構築に至るまで、AIエージェントの視覚理解能力とエンジニアリング実装能力が段階的にテストされます。
• 二次元自動検証このシステムは、GUIエージェントを介して機能の正確性を検証し、VLMジャッジを使用して視覚的な忠実度を評価することで、客観的かつ再現性のあるエンドツーエンドテストを実現します。
• 実世界のデータによるサポートこのデータセットは、4つの主要カテゴリと16のサブカテゴリを網羅する193の実際のウェブサイトに基づいて構築されており、918のプロトタイプ図と1,255のテストケースを提供します。
• 全身能力診断：異種感覚推論、長期計画、および複雑なシステム構築におけるエージェントの能力と失敗原因を正確に特定する。

Vision2Webの使い方

• 環境準備フロントエンド、バックエンド、データベースの依存関係を含む、コンテナ化されたランタイム環境を構成します。
• データ読み込みプロトタイプの図、要件定義書、およびマルチメディア資料を、指定された作業ディレクトリに配置してください。
• エージェントアクセステスト対象モデルを、OpenHandsやClaude Codeなどのエージェントフレームワークに統合します。
• タスク実行エージェントは入力を読み取り、コードを生成し、最終的にデプロイ可能なWebサイトプロジェクトを出力します。
• 自動展開エージェントによって生成された起動スクリプトを実行して、固定ポートでのウェブサイトのデプロイを完了します。
• 機能検証GUIエージェント検証ツールは、専門家が設計したテストワークフローを実行し、インタラクションの正確性を評価し、機能スコアを出力します。
• 目視確認VLM Judgeは、レンダリング結果をプロトタイプ画像と比較し、視覚的な忠実度を評価して、ビジュアルスコアを出力します。
• 結果分析両方の次元からのスコアを組み合わせることで、特定の開発段階におけるモデルの欠点を特定することができます。

Vision2Webの主要情報と利用要件

• 研究背景これは、清華大学とZhipu AIによる共同イニシアチブであり、マルチモーダルAIエージェントの視覚的なウェブサイト開発能力を体系的に評価することを目的としています。
• タスクサイズ本書には、実際のウェブサイト開発に関する193の課題が含まれており、静的ウェブページ生成、インタラクティブなフロントエンド開発、フルスタックウェブサイト構築という、難易度が段階的に上がる3つのレベルに分かれています。
• データ構成本書は、コンテンツ、トランザクション、SaaS、公共サービスの4つの主要分野にわたる16のサブカテゴリを網羅し、918のマルチデバイスプロトタイプ図と1,255のテストケースを提供します。
• 検証メカニズム2次元の自動検証パラダイムが採用されており、GUIエージェントを使用して機能の正確性（機能スコア）を検証し、VLMジャッジを使用して視覚的な忠実度（視覚スコア）を評価します。
• 環境要件フロントエンドフレームワーク、バックエンドサービス、データベース、およびその他の必要な依存関係がすべてインストールされたコンテナ化された実行環境が必要です。
• フレームワークアクセステスト対象となるモデルは、OpenHandsやClaude Codeなどの標準化されたエージェントフレームワークに統合される必要がある。

Vision2Webの主な利点

• タスク設計は階層的かつ段階的である。静的なウェブページからフルスタック開発までを網羅する3層アーキテクチャにより、開発の各段階におけるエージェントの機能限界を正確に特定できる。
• 実世界のシナリオから得られたデータC4検証セットに基づいて、合成データの偏りを回避し、評価結果が実際のアプリケーションに近いものとなるよう、実際のウェブサイトを構築します。
• 検証メカニズムは客観的かつ信頼できる。GUIエージェントとVLMジャッジのコンポーネントは連携して、機能の正確性と視覚的な忠実性について、再現性のある自動評価を実現します。
• 包括的かつ多様な報道これは4つの主要分野と16のサブカテゴリーを網羅しており、モデル、フレームワーク、およびデバイス全体にわたる体系的な比較分析をサポートする。
• 診断機能は洗練され、詳細に分析されています。ワークフローベースの検証ノードを使用することで、エージェントのUI理解、インタラクションロジック、長期計画などの面での失敗の具体的な原因を明確に追跡できます。

Vision2Webプロジェクトのアドレス

• arXiv技術論文：https://arxiv.org/pdf/2603.26648

Vision2Webとその競合製品の比較

比較対象寸法	Vision2Web	Design2Code	WebGen Bench
タスク範囲	3段階の進歩：静的ウェブページ、インタラクティブなフロントエンド、そしてフルスタック開発。	静的UIからコード生成のみ	テキスト主導型のエンドツーエンド開発は、マルチモーダル対応が不足している。
検証方法	GUIエージェント＋VLMジャッジのデュアルコンポーネントワークフロー検証	ピクセルレベルの比較とルールスクリプト	構造的な制約のない、自由記述式のテキスト評価
再現性	高：構造化されたワークフローが実行パスを明確に制約する	低：レイアウトの変更により、スクリプトが脆弱になる。	低い：自由記述式の評価は再現が難しい
データスケール	193のタスク / 918のプロトタイプ図 / 1255のテストケース / 16のサブクラス	規模が限定的で、対象分野も限定的である	タスクの階層構造は明確に定義されておらず、タスクの数も比較的少ない。
複数デバイス対応	デスクトップ、タブレット、モバイルデバイス向けの適応評価をサポートします。	複数デバイス環境は明確に区別されていなかった。	複数デバイスとの互換性は重視されていない
能力診断	正確性：UIの理解、インタラクションロジック、システムアーキテクチャにおける弱点を的確に特定できる能力。	大まかな目安：視覚的な類似性スコアのみ	大まかな評価：全体的な評価であり、より細かい部分に分解するのは難しい。

Vision2Webの応用事例

• モデル機能評価Claude、Gemini、GPTなどのマルチモーダル大規模モデル向けのビジュアルWebサイト開発機能に関する標準化されたベンチマークテストを提供します。
• エージェントフレームワークの最適化OpenHandsやClaude Codeなどの異なるエージェントフレームワークのパフォーマンスを比較し、フレームワークの反復開発やアップグレードの指針とする。
• アルゴリズムの開発と検証新しいモデルが、UI理解、コード生成、長期計画などの主要技術に及ぼす革新的な影響を評価する。
• 製品機能ベンチマークAIウェブサイト構築製品（Vibeコーディングツールなど）が自身のレベルを定量化し、最先端（SOTA）製品とのギャップを明確にするのに役立つ。
• 教育・訓練に関する参考資料これは、AI支援開発におけるエンジニアや研究者の育成のための教育事例ライブラリとして機能する。