从 AI 生成海报到可编辑文件：用 JSON、HTML 和 SVG 扩展 ZINE Poster Skill

我最近把一个用于生成极简 ZINE 海报的视觉 Skill，扩展成了一套可以继续编辑的文件工作流。

最终结果不是一张 PNG，而是四层产物：JSON 源文件、HTML 编辑器、SVG 交换文件，以及 PNG/PDF 交付文件。JSON 负责保存画布和图层，HTML 负责拖拽与数值调整，SVG 负责交给 Figma、Illustrator 或 Inkscape，PNG/PDF 则用于发布和打印。

这篇文章记录这个改造过程，也先说清楚它目前没有解决的问题：现有六组示例可以移动和缩放整张生成图，但生成图内部的文字、人物和装饰仍然是扁平像素，尚不能单独选中。

这篇文章适合谁

如果你正在做以下事情，这个方案会比较有参考价值：

用 AI 生成海报、封面或视觉方向稿，但不想让结果停留在不可修改的图片上。
想把一个图像生成 Skill 变成可重复构建的设计资产。
需要在浏览器里快速调整主体的位置和尺寸，再把结果交给专业设计工具。
希望用 Git 管理设计参数，而不是只保存最后导出的图片。

文章中的原始视觉方向来自 gc-minimal-zine-poster。

先看结果：六张 ZINE 海报示例

这六张图都遵循同一套极简方向：3:5 纸张比例、大面积留白、较小的主体簇、一个高色度锚点，以及接近印刷或扫描的纸面质感。图片是实际生成结果，不是为了装饰文章而追加的概念图。

Night Door

Night Door 极简 ZINE 海报：深蓝夜色中带有橙色视觉锚点

这张图适合说明“低饱和背景 + 单一高色度锚点”的组合。高亮区域不需要占据画面中心，也能承担视觉入口。

Yellow Step

Yellow Step 极简 ZINE 海报：黄色几何主体位于大面积纸张留白中

这张图把主体压缩到较小区域，剩余空间保留为纸张和扫描纹理。对可编辑格式来说，主体的外接矩形比它在原图中的视觉大小更重要。

Typhoon Memory

Typhoon Memory 极简 ZINE 海报：蓝色风暴形态与红色小面积锚点

它展示了同一视觉约束在更强运动感构图中的表现：主体可以有方向和张力，但不能填满整张纸。

Shore Pause

Shore Pause 极简 ZINE 海报：海岸线与粉色形态形成稀疏构图

这张图的重点是让“暂停感”来自空间关系，而不是额外堆叠文字、边框和装饰。

Pause Map

Pause Map 极简 ZINE 海报：地图式线条、纸张纹理和少量高亮元素

当画面包含线条和多个小元素时，仍然需要先确定一个主视觉簇，否则可编辑之后很容易退化成信息卡片。

Moon Tide

Moon Tide 极简 ZINE 海报：月亮、潮汐和红色几何锚点构成纵向画面

这张图最接近传统竖向海报的阅读路径：上方建立方向，中部保留呼吸空间，下方用小型元素完成收束。

问题不在 PNG，而在编辑粒度

第一版生成流程的输出是一张栅格图。它可以被放大、缩小和放到新画布里，但用户真正想控制的通常不是“整张图片”，而是：

主体应该向左还是向右移动？
标题应该离主体多远？
红色锚点能否缩小一点？
装饰线条能否旋转几度？
同一组视觉元素能否换一张背景继续使用？

这些问题都指向一个结论：可编辑性不是导出分辨率更高，而是画面中有稳定的对象边界。

如果生成阶段只给出一张扁平图，后面再用 OCR、分割和矢量化去猜测对象边界，结果会受到文字识别、遮挡、纹理和透视的影响。更可靠的方式，是在生成或整理阶段就保留图层描述。

方案：把视觉 Skill 和文档编译器分开

我没有把原 Skill 改造成一个复杂的设计软件，而是增加了一层文档编译器：

flowchart LR A[视觉 Skill] --> B[生成视觉示例] B --> C[JSON 图层文档] C --> D[HTML 编辑器] C --> E[SVG 导出] C --> F[PNG / PDF 交付] D --> C

这样分层有两个好处：

原始 Skill 继续负责视觉一致性，不被编辑器的 UI 细节污染。
编辑器和导出器围绕稳定的 JSON 格式工作，可以独立测试、批量生成和版本控制。

这也是这次最重要的设计决定：“长什么样”和“怎么继续改”是两个不同的问题。

JSON 是源文件，不是导出中间产物

画布使用绝对像素坐标。示例默认画布为 900 × 1500，也就是 3:5 比例。每一层都有稳定的标识、类型、位置、尺寸、旋转、透明度和堆叠顺序。

一个矩形图层可以这样描述：

{
  "id": "anchor",
  "type": "rect",
  "x": 430,
  "y": 680,
  "width": 240,
  "height": 160,
  "rotation": -4,
  "opacity": 0.92,
  "z": 3,
  "fill": "#F0442E"
}

当前格式支持以下图层：

图层类型	作用
`image`	放置生成图片或其他栅格素材
`svg`	放置可以继续交换的 SVG 素材
`text`	保存可编辑文字
`rect` / `ellipse` / `line`	保存基础几何和装饰线

这里的字段设计刻意保持简单。首版不引入复杂的时间线、组件树和设计软件私有属性，先解决“主体能否移动、尺寸能否控制、导出是否可复现”这三个问题。

HTML 编辑器承担什么工作

HTML 编辑器是 JSON 的交互面板，而不是新的数据源。它提供：

拖拽图层。
拖拽调整宽高，按住 Shift 保持比例。
数值修改 X、Y、宽度、高度、旋转、透明度和 Z 顺序。
修改画布宽高。
导出 JSON、SVG、HTML、PNG 和 PDF。

因此，同一个海报可以有两种工作方式：

直接编辑 poster.json
  -> 重新构建 poster.html / poster.svg

打开 poster.html 调整
  -> 导出更新后的 poster.json / poster.svg

第一种方式适合批量生产和 Git diff，第二种方式适合快速试构图。两者必须回到同一个 JSON 文档，否则很快会出现“预览改过了，但源文件没有改”的分叉。

为什么选择 HTML、JSON 和 SVG

这不是说 PSD 或 AI 没有价值，而是首版需要一个更容易自动化的交换边界。

格式	在这套流程中的责任	主要优势	当前边界
JSON	唯一源文件	易读、易 diff、易批量生成	需要自己定义格式
HTML	本地编辑器	无需安装设计软件，交互直观	不等于专业排版软件
SVG	交换与二次编辑	可导入多个设计工具	复杂滤镜和字体需额外处理
PNG/PDF	交付	适合发布和打印	不保存完整编辑语义

这个选择也让流程更接近代码项目：源文件可以审查，构建可以重复，导出物可以重新生成。

当前示例的真实编辑边界

六组示例目前把“整张生成图”作为一个 image 图层。因此已经验证的是：

可以控制整张图在画布中的位置。
可以控制整张图的显示尺寸。
可以把同一张图放入不同尺寸的画布。
可以生成 HTML 和 SVG 交换文件。

还没有实现的是：

单独移动生成图内部的标题。
单独缩放人物或主体。
自动把纹理、背景、装饰线和文字可靠拆成独立图层。
在浏览器中完成一次真实拖拽后，再自动回读并验证 JSON 的端到端交互测试。

这一区分很重要。把 PNG 放进图层系统，只解决了“画布级调整”；要做到“对象级调整”，必须让生成阶段输出独立素材，或者引入分割、OCR、矢量化和人工确认。

验证结果

本次实际完成并验证了以下内容：

新 Skill 结构检查通过。
示例 JSON 通过构建脚本的校验模式。
六组 Bundle 均通过 HTML 内嵌 JavaScript 语法检查。
生成的 SVG 可以被 XML 解析。
相同 JSON 重复构建的 SVG 哈希一致，说明构建结果稳定。
六张视觉示例均完成图像检查，仍保持原来的极简 ZINE 方向。

需要单独标记的限制是：Codex 内置浏览器拒绝了本地 file:// 页面，因此尚未把真实浏览器拖拽操作作为已完成证据。构建正确、页面可以生成，并不等于浏览器交互已经完成验收。

如何复用这套流程

在安装好的 Skill 目录中，准备一个符合格式说明的 JSON 文件，然后运行：

python scripts/build_poster.py `
  --config path/to/poster.json `
  --out-dir dist/poster

预期输出包括：

dist/poster/
├── poster.html
├── poster.json
├── poster.svg
└── assets/

复用时建议遵循三个顺序：先确认画布和主体的比例，再确定图层边界，最后增加文字和装饰。若一开始就把所有内容塞进一张生成图，后续仍然只能做画布级调整。

结论：生成结果应该尽早成为资产

这次改造没有试图把 AI 生成图直接变成完整的 Photoshop 替代品。它先解决了一个更窄、也更容易验证的问题：让视觉方向可以被保存、移动、缩放、导出，并且能够进入下一轮设计。

可复用的判断是：

视觉生成 Skill 负责建立风格和构图候选。
JSON 图层文档负责保存可编辑语义。
HTML 编辑器负责低门槛试构图。
SVG 负责跨工具交换。
PNG/PDF 负责最终交付。

如果下一步要实现真正的对象级编辑，最值得优先改的不是编辑器按钮，而是生成契约：背景、主体、文字和装饰应该从生成阶段开始就作为独立图层输出。