我开源了 Iterlay:让 Coding Agent 在画布上生成、编辑和交付视觉素材

0 阅读2分钟

我做了一个 MIT 开源的 AI 视觉创作工作台 Iterlay,把参考图、图片生成、编辑、版本比较和素材整理放在同一张无限画布里,也让 Codex、Claude Code 等 Coding Agent 通过 CLI 和 Skill 参与操作。

GitHub:github.com/Davied-H/it… 官网:davied-h.github.io/iterlay/

Iterlay 实际工作台:产品主图、配色、场景与海报保留在同一画板

一个实际完成的例子

README 展示了一组虚构 FIELD 音箱的视觉素材:Codex 通过 Iterlay CLI 生成橙色产品主图,再实际编辑成绿色版本,生成户外场景和品牌海报,最后将结果整理到同一画板,并导出图片。

你可以在画布上检查结果、继续修改,或拖动版本比较滑块检查变化。Agent 负责执行生成、编辑、编排和导出,结果保留在可查看、可调整的工作区里。

案例截图和制作过程:github.com/Davied-H/it…

选中图片,继续描述修改目标

编辑助手会结合当前图片帮助明确修改目标。下面的截图展示的是修改选项,不代表又完成了一次额外生成。

图片编辑助手识别产品,并询问要修改的内容

比较修改前后的版本

下面是实际完成的橙色到绿色编辑,原图与修改版保留在同一节点,可以拖动滑块比较。

同一音箱从橙色编辑为绿色的真实版本对比

开发者可以怎样用

  • 为正在开发的网站或 App 生成插画、背景、封面等素材。
  • 把已有图片作为参考继续编辑,在同一节点中比较版本。
  • 让 Coding Agent 整理画板、选择结果,并导出到项目的 assets 目录。
  • 配置自己的模型服务;Agent 复用 App 中已保存的模型配置与授权。

安装并打开 App、配置模型后,在“设置 → Coding Agent”中安装 Skill,就可以给 Agent 一个具体任务,例如:

用 Iterlay 为这个项目生成一组产品视觉素材,保留主图、配色版本和场景图,整理到一个画板里,并把选定图片导出到项目的 assets 目录。

实现与边界

项目采用 Electron、React、TypeScript,当前 Agent 接入使用 CLI + Skill。应用原创代码采用 MIT 许可证,第三方组件保留各自许可证。

应用免费,模型调用由你选择的供应商计费。画板和素材保存在本机;使用远程模型时,提示词与所需参考图片会发给对应服务。本地保存不代表离线推理,具体模型能力和各平台限制见项目文档与 Releases。

已有 macOS 和 Windows 安装包,可从 GitHub Releases 下载。

想听听实际做项目的开发者意见:你最希望 Agent 先帮你完成哪一步——生成素材、修改现有图片,还是整理和导出结果?欢迎通过 Issues 分享具体场景,也欢迎贡献代码。