可编辑视觉设计

TL;DR 让 VLM 当创意大脑、图像模型当素材生成器，Coding Agent 以“先想象后行动”闭环产出原生 HTML/CSS 分层设计，既保留代码可控性又补足审美直觉，最终交付可拖拽编辑的视觉作品。

问题

背景与问题

视觉设计自动化正从单纯图像生成转向可编辑、可维护的设计交付物。扩散模型（如 GPT-Image-2、Nano-Banana）能产出高保真视觉，但输出是扁平位图，文字渲染易错，图层信息丢失，无法进行后期的分层编辑。代码生成路线（基于 LLM 直接生成 HTML/CSS/SVG）提供了清晰的结构和可编辑性，却受限于模型对全局美学的把控不足，复杂的视觉资产（如插画、纹理、特殊字体效果）难以用纯代码精确表达，需要大量人工干预。

核心矛盾与技术难点

两种路线各自面对的是视觉表达力与结构化可控性之间的张力。扩散模型的隐空间生成过程不可预测，难以保证元素间精确的对齐、间距和语义一致；代码生成则需要提前用形式化语言描述所有视觉细节，但人类设计师的美学判断往往是非形式化的、基于视觉反馈的迭代过程。因此，如何让生成系统同时具备专业设计师的审美直觉和工程实现的结构化产出，是一个尚未解决的工程问题。业界对自动化设计工具的期待不仅是“能生成好看的图”，而是“能产出可直接修改、集成到产品中的源文件”。

与业界场景的类比

这类似于 AI 辅助前端开发中从设计稿到代码的转换（design-to-code）——若只给位图截图，开发仍需手动重建组件；若只给代码，设计师又无法直接感知视觉质量。需要一种新的工作流，在生成过程中同时保留视觉仿真和代码可编辑性。

核心洞察

• 将 VLM 定位为**创意大脑**、图像生成模型定位为**视觉世界模拟器**，采用“先想象后行动”闭环，把生成模型的视觉表现力转化为 agent 的按需资产合成能力。 与纯代码生成 agent 相比，后者受限于编码复杂视觉资产的能力，导致设计缺乏整体美感；与 diffusion 端到端生成相比，后者输出扁平位图、文本易错且无法分层编辑。该范式通过隔离资产生成与布局编码，在保留美学质量的同时获得层分离和真实文本，独特地解耦了视觉创造力与结构化编辑。
• **Agent Design Replay** 机制将 agent 从需求理解到布局迭代的全过程记录为可回放的推理轨迹，复刻专业设计师的创作逻辑。 现有 agentic 设计系统多关注最终结果，其推理过程不透明，难以调试或复用。此机制使设计决策可审计、可复现，并支持基于视觉渲染反馈的自我修复，为工程实践提供了可观测性和可控性，区别于一次性代码生成或仅基于文本反馈的优化。

方法

输入

用户提供设计需求（如海报、信息图等场景描述）。

关键模块

1. 视觉语言模型（VLM） 作为“creative brain”，负责需求理解、任务规划与审美判断。
2. 图像生成模型 作为按需调用的“visual world simulator”，用于合成独立的视觉资产（如插画、背景元素）。
3. Coding Agent 闭环流程：遵循“imagine first, then act”原则——先生成视觉资产，再编写原生 HTML/CSS 结构，并基于渲染反馈进行迭代验证与视觉自修复（self-healing）。
4. Agent Design Replay：记录并重现设计过程中的创造性推理轨迹，模拟专业设计师的工作方式。

输出

系统交付具有解耦图层 和真实文本 的可编辑产物，用户可在图形界面上通过鼠标拖拽与布局调整进行后续编辑。

与同类方法的差异

该方法区别于纯代码生成的视觉设计（缺乏全局审美直觉）和纯扩散模型端到端生成（输出扁平位图、不可分层编辑），通过 VLM 与图像生成模型的协同，同时获得精细美学与生产级可编辑性。

实验

实验设计

论文在 posters、infographics 等多个典型视觉设计场景上验证了 Coding-Agent-Driven Design Workflow。流程分为四步：1) VLM 理解需求并规划设计；2) 按需调用图像生成模型生成独立视觉资产；3) 编码原生 HTML/CSS 构建图层结构；4) 基于渲染反馈进行 visual self-healing 迭代优化。对比对象包括扩散模型端到端生成与纯代码生成，评估维度聚焦视觉表现力与生产级可编辑性。

关键发现

案例研究表明，该方法能交付图层解耦、文本真实的可编辑设计文件，用户可在图形界面上直接拖拽调整布局。Agent Design Replay 能够以类似职业设计师的轨迹还原创作与推理过程，验证了“先想象后行动”闭环的可行性。论文未提供定量指标，但从展示案例看，系统同时规避了扩散模型输出扁平位图、文本易错、不可分层编辑的问题，以及纯代码生成缺乏全局审美直觉、难以编码复杂视觉资产的局限。工程上，将 VLM 定位为“创意大脑”、将扩散模型视为可按需调用的“visual world simulator”，实现了生成质量与可编辑性的解耦，适合需要后续人工精修的生产流水线。

与基线对比的深度解读

扩散模型（如 GPT-Image-2、Nano-Banana）在视觉表现力上通常占优，但其输出为拍平的位图，文本渲染错误率高，无法分层编辑；基于代码的 Coding Agent 能提供干净的分层和真实文本，却难以生成复杂视觉资产，审美判断也偏弱。本工作采用混合协作架构，而非替代关系，从系统设计层面缓解了两类基线的核心缺陷。若要进一步验证优势，未来工作应补充可编辑性、文本准确率、用户修改操作数等可量化指标，以便与现有生成范式进行更严格的定量对比。

行业影响

落地场景

该范式适用于需要高质量、可编辑视觉物料的业务场景。电商平台 的促销海报与商品详情页、内容平台 的信息图与社媒卡片、企业服务 中的品牌模板与市场材料、在线教育 的课程可视化课件等，均可通过 Coding Agent 自动生成带分层和真实文本的 HTML/CSS 设计稿。相比纯位图生成，这些场景要求频繁修改文字或布局，因此可编辑性成为刚需。

商业价值

核心价值在于降本增效：减少设计师与运营之间的反复沟通，将设计周期从小时级压缩到分钟级；同时支持快速迭代，营销团队可基于同一模板批量生成变体，进行 A/B 测试。例如，某全球电商平台在大促期间需要为数千个 SKU 生成促销卡片，传统人工设计成本高昂，而该系统可自动生成带真实价格与折扣信息的可编辑卡片，设计师仅需微调即可发布。

与现有工作流集成

该系统可作为设计自动化层嵌入现有 stack：

• 通过 REST API 或 CLI 接入企业 CMS 或营销自动化平台，批量生成视觉内容。
• 以 插件 形式集成到 Figma、Canva 等设计工具，输出分层源文件而非扁平图。
• 生成的 HTML/CSS 可直接部署至 Web，或作为模板存储于设计系统，复用品牌组件。

具体落地 Use Case

1. 全球电商平台：运营输入商品链接与卖点，自动生成商品详情页首屏，包含真实标题、价格标签和装饰性视觉资产，支持直接在线编辑。
2. 在线教育平台：课程团队输入知识点与数据，生成可交互信息图，文字准确且可修改，教师可替换图表数据后用于课件。

局限

• - **依赖 VLM 的自主规划与审美判断**：该方法将需求理解、任务分配和美学评估完全交给 VLM，但 VLM 的设计意图理解可能存在偏差，导致生成的 HTML/CSS 布局不符合预期。虽然工作流包含“验证与视觉自愈”闭环，但论文未给出迭代次数上限或收敛性保证，实际应用中可能出现大量无效迭代，增加推理成本与延迟。
• - **图像生成资产的风格一致性与可用性**：图像生成模型作为“视觉世界模拟器”按需生成独立元素，但不同提示下生成的资产可能风格不统一、分辨率不足或包含伪影。论文未说明如何自动过滤低质量生成结果，也未讨论生成内容的版权与安全合规问题，这在实际生产环境中可能成为部署障碍。
• - **HTML/CSS 原生能力的上限**：使用原生 HTML/CSS 构建设计虽保证可编辑性，但对复杂图形（如精细插画、复杂路径、特殊滤镜或动画）表达有限，可能被迫简化视觉或额外嵌入 SVG/Canvas，反而增加代码复杂度。论文验证集中于海报和信息图，缺少对 UI 界面、品牌设计等更多场景的系统评估，泛化性存疑。