← ポータルに戻る

Editable Visual Design💻 コードあり

Junyan Ye, Wei Liu, Dongzhi Jiang, Zichen Wen, HaoDong Li等 · diffusion base models, VLM, Coding Agent · 2026-09-03 ⭐ 8/10
💡 VLMを「創造的な脳」、画像生成モデルを「視覚世界シミュレーター」として活用するコーディングエージェントにより、美的品質と編集可能性を両立したビジュアルデザインを生成する新しいパラダイム。
🤖 Ayumuより: この論文は、AIがデザインを生成するだけでなく、人間が後から編集できる形にするという点がすごく実用的で面白いね。VLMと画像生成モデルの役割分担が明確で、「imagine first, then act」というワークフローも直感的だよ。朋義さんなら、このエージェントがどのように美的判断を下しているのか、その内部メカニズムに興味を持つんじゃないかな。特に、プロのデザイナーの思考を再現するという「Agent Design Replay」の概念は、AIの創造性を深く探る上で注目だよ。
Editable Visual Design Coding Agent VLM Diffusion Models HTML/CSS Generation Design Automation
1. どんなもの？
  • 拡散モデルとコーディングエージェントの利点を組み合わせた、編集可能なビジュアルデザイン生成システムです。
  • VLM（Visual Language Model）を「創造的な脳」として要件理解、タスク計画、美的判断を担わせます。
  • 画像生成モデルを「オンデマンドの視覚世界シミュレーター」として、独立した視覚アセットを合成します。
  • 最終出力はネイティブHTML/CSSで、レイヤー分離とリアルなテキスト編集が可能です。
2. 先行研究と比べてどこがすごい？
  • 既存の拡散モデルは高い視覚表現力を持つものの、出力がフラットなビットマップで後編集が不可能であり、テキストに誤りが生じやすいという課題がありました。
  • 既存のコードベースの生成手法は精密なレイアウト制御とレイヤー分離が可能ですが、美的直感に欠け、複雑な視覚アセットのコーディングが困難でした。
  • 本研究は、これらの先行研究の課題を解決し、洗練された美学とプロダクションレベルの編集可能性（レイヤー分離、リアルテキスト、GUIでの直感的な調整）を両立できる点が画期的です。
3. 技術や手法の肝はどこ？
  • VLMと画像生成モデルの明確な役割分担: VLMがデザインの「脳」として全体を統括し、画像生成モデルが具体的な「素材」を生成します。
  • 「imagine first, then act」の閉ループワークフロー: エージェントがまず独立した視覚アセットを生成し、次にネイティブHTML/CSSを記述します。その後、視覚レンダリングのフィードバックに基づいてデザインを反復的に洗練します。
  • Agent Design Replay: プロの人間デザイナーの創造的・推論的軌跡を忠実に再現するメカニズムを導入し、より自然で高品質なデザイン生成を可能にします。
4. どうやって有効だと検証した？
  • ポスター、インフォグラフィックなど、様々なデザインシナリオでシステムを検証しました。
  • その結果、提案パラダイムが洗練された美学とプロダクションレベルの編集可能性の両方を成功裏に達成したことを示しています。
5. 議論はある？
  • アブストラクトからは具体的な議論点や限界は明記されていませんが、生成されるHTML/CSSの複雑性や、エージェントが対応できるデザインスタイルの多様性、生成時間の効率性などが今後の議論の対象となる可能性があります。
  • また、「Agent Design Replay」がどの程度人間の創造性を再現できているか、その評価方法も興味深い点です。
6. 次に読むべき論文は？
  • VLMと画像生成モデルの連携によるデザイン生成に関する論文。
  • HTML/CSSなどのコード生成を行うAIエージェントに関する研究。
  • デザイン自動化における編集可能性やレイヤー構造の維持に焦点を当てた論文。
  • 「GPT-Image-2」や「Nano-Banana」のような最新の拡散モデルの技術詳細に関する論文。

Abstract (原文)

While diffusion base models such as GPT-Image-2 and Nano-Banana exhibit remarkable visual expressiveness, their end-to-end generation inherently yields flattened bitmaps with error-prone text, precluding layer-wise post-editing. Conversely, code-based visual generation via Coding Agents provides precise layout control and decoupled layers, yet remains constrained by a lack of global aesthetic intuition and the difficulty of coding complex visual assets. To address this, we propose Editable Visual Design, a new paradigm driven by a Coding Agent. We designate the VLM as the ``creative brain'' for requirement comprehension, task planning, and aesthetic judgment, while utilizing the image generation model as an on-demand ``visual world simulator'' to synthesize standalone visual assets. Operating under an ``imagine first, then act'' closed-loop workflow, the agent generates isolated assets, writes native HTML/CSS, and iteratively refines the design against visual rendering feedback. Furthermore, Agent Design Replay faithfully reproduces the creative and reasoning trajectory akin to that of professional human designers. Ultimately, the system delivers editable artifacts with decoupled layers and real text, enabling users to perform intuitive mouse dragging and layout adjustments on a graphical user interface. Validations on posters, infographics, and other scenarios show that this paradigm successfully achieves both refined aesthetics and production-grade editability.

📄 arxiv ページ 📑 PDF ⭐ GitHub (516 stars)