开源Editable-Design，让AI生图终于能改字、拖图层

AI 生图很好看，但一个字都改不了：这个开源项目想把设计稿重新 “拆开”

一张海报，从「看起来不错」到「真的能交付」，中间到底差了什么？

可能只差一句临时改掉的文案。

如今的图像生成模型，已经很会做设计了。给它一段提示词，构图、配色、光影和氛围很快就能到位。但当运营同学说「价格改一下」，品牌方要求「Logo 往右挪一点」，或者编辑发现标题里有一个错字，麻烦就来了：画面里的文字、人物和背景早已压在同一张图上，改一个局部，常常意味着整张重来。

换成代码生成呢？文字是真的，图层也能动，但成品往往更像一个规整的网页，而不是经过设计师推敲的视觉作品。

一个有审美但改不动，一个改得动却未必好看。最近开源的 Editable Design，想解决的正是这个有点尴尬的二选一。

图 1｜同一设计需求下，像素生成、直接代码生成与可编辑设计的结果对比

• 项目地址：https://github.com/yejy53/Editable-Design
• 论文地址：https://huggingface.co/papers/2609.04034

01

好看和好改，为什么总要二选一？

传统 AI 生图交付的是像素。模型可以一次性决定画面中所有元素的位置和质感，却不会把「标题」「价格」「人物插画」「背景纹理」作为可以继续操作的对象交出来。

这也是为什么，AI 生成的第一版可能很惊艳，后续修改却格外费劲。文字一旦画进图片，就可能出现错字、乱码和字体不统一；想改局部，只能涂抹、重绘，或者重新生成整张图。新结果即使修好了文字，也可能顺手改掉原本满意的构图。

直接让 Coding Agent 写 HTML，问题恰好相反。HTML 天生有结构，文字可以选中，元素可以移动，样式也能逐项修改。但「有结构」不等于「有设计」。复杂海报涉及视觉重心、留白、字体层级、材质和空间关系，单靠代码一步到位，很容易得到一张功能正确、审美平庸的页面。

Editable Visual Design 的思路并不复杂：让视觉模型负责它擅长的艺术指导，让代码负责它擅长的结构化表达，再让一个持续工作的 Agent 把两者接起来。

02

不是把图片塞进网页，而是把设计重新做一遍

这套方法里，视觉模型先给出构图、层级、色彩和空间关系。它更像一位负责定方向的艺术指导，帮助 Agent 看清「这张图应该长什么样」。

但参考图的像素不会直接进入最终交付物。

Agent 会重新生成干净的独立素材，再用 HTML 重建文字和布局。标题仍然是真实文字，插画、背景和装饰元素则各自处在独立图层中。最终得到的不是一张被嵌入网页的图片，而是一份可以继续编辑的设计文件。

图 2｜从需求理解、视觉模拟、结构化重建到可编辑交付的完整工作流

整个过程可以概括为几步：

• 理解需求，确定画布、信息层级和视觉方向；
• 调用视觉模型探索构图，而不是直接交付生成图；
• 生成独立、干净的视觉素材；
• 用语义化 HTML 重建版式和真实文字；
• 实际渲染成图，观察问题，再继续修正；
• 通过检查后，连同编辑器和过程记录一起交付。

这里最关键的变化是，生成不再止于「出图」。同一个 Agent 从理解需求开始，一直负责到渲染、检查和修复。它既做设计决策，也要面对浏览器里真正渲染出来的结果。

如果标题挤出了边界、字体没有正确加载、某个图层没有对齐，Agent 需要继续调整，而不是把第一版当作答案。

03

文字能改、图层能拖，设计过程也能回放

打开最终文件后，用户可以直接双击修改文字，也可以单独选择和拖动插画、背景、装饰与文本图层。因为交付物保留了语义结构，局部修改不需要重新生成整张图。

图 3｜三组设计从最终画面展开为可独立选择、移动和修改的图层

项目还提供了一个很有意思的 Agent Design Replay。

它记录的不是简单的聊天日志，而是从需求理解、构图规划、素材生成，到 HTML 实现、渲染观察和局部修复的完整路径。用户不仅能看到成品，也能知道 Agent 为什么这样排版、发现过什么问题，以及它后来怎样修正。

对于今天的生成式设计工具，这一点并不常见。我们通常只能看到输入和输出，中间发生了什么几乎是黑盒。而当生成结果要进入真实生产流程时，「可追溯」和「可修改」往往与第一眼的视觉效果同样重要。

为了避免「看着差不多」的结果直接交付，Editable Visual Design 还设置了确定性检查，包括画布尺寸、字体、图层约定、实际渲染以及编辑器往返操作等。换句话说，编辑能力不是展示视频里的特效，而是交付格式本身的一部分。

04

14 组案例，覆盖的不只是营销海报

目前，项目仓库展示了 14 组案例，覆盖 6 类视觉设计任务：营销活动、信息设计、文字型设计、海报、学术海报与艺术设计。

其中既有茶饮新品、电商护肤品这样的商业海报，也有小熊猫百科、纽约三日攻略、腹肌训练计划等高信息密度内容；还有《滕王阁序》全文海报、学术研究海报和艺术化视觉作品。

图 4｜项目覆盖营销、长文本、海报与信息图等多类视觉任务

这些例子刻意选择了 AI 生图最容易露怯的场景：大量中文、密集信息、价格数字、表格化模块，以及需要保持严格层级关系的长文案。

以传统生成图片的方式处理这类任务，最难的往往不是画得够不够漂亮，而是文字能否准确、信息能否完整、后续能否改动。结构化交付正好把问题从「要求模型一次画对所有字」变成「让文字从一开始就保持为文字」。

每组案例都同时提供最终渲染、可编辑演示和 Agent 设计回放。对于想复现流程的开发者，仓库已经提供 Editable Design Codex Skill；如果源文件结构允许，还可以通过配套工具进一步导出为元素独立可选的 PowerPoint。

05

AI 设计的下一步，可能不是生成更大的图片

过去两年，图像生成模型一直在比拼分辨率、真实感和指令遵循。Editable Visual Design 提出的则是另一个问题：一张图生成之后，能不能自然地进入接下来的工作？

真实的设计流程很少在第一次出图时结束。文案会改，素材会换，比例要适配不同渠道，同一套视觉还要衍生出多个版本。只交付像素，意味着模型完成了创作的前半程，却把后半程重新留给人类。

结构化、可编辑的生成式设计，试图把这条链路继续往后推一步。

视觉模型不再承担所有工作，而是提供审美先验；代码也不再单独决定画面，而是承接结构；Agent 则在两者之间持续观察和修正，直到产出一份可以真正接着用的设计稿。

它未必会取代专业设计软件，也不是要把每个设计师都变成前端工程师。更现实的意义在于：当 AI 参与设计时，交付物终于不必只有一张 PNG。

从「帮我画一张图」到「给我一份还能继续改的设计」，也许才是 AI 设计真正走向生产环节的开始。

文章来自于微信公众号 “机器之心”，作者 “机器之心”