AI 用自然语言操纵 Affinity 生成店招可编辑文件的成功流程复盘
日期：2026-07-09
项目：OPC 一人全栈店招海报
目标尺寸：3 米 × 1.5 米
最终推荐文件：poster-v5.15-affinity-stable-hybrid.afdesign
AI 操纵 Affinity 生成可编辑店招海报设计流程复盘 v1.0
Windows 本地配置记录：Codex 重启后识别 Affinity MCP
绕过 Claude Desktop！Affinity MCP 直连 WorkBuddy/Cursor 完整配置指南（Windows）
Windows 本地配置记录：把 Affinity by Canva 的 MCP 连接到 Codex
一、这次真正跑通的目标
这次任务不是单纯生成一张海报图，而是把一个已有HTML 店招设计，尽量还原成 Affinity 可打开、可交付、可继续修改、图层清晰的文件。
最终有效结果不是最早的 PDF 直转 Affinity，而是 v5.15 的“稳定混合文件”：
- 视觉层：一张锁定的 3000×1500 保真底图；
- 编辑层：194 个从 HTML 中抽取出来的隐藏文字层；
- 打开效果：默认只显示保真底图，避免字体溢出、文字重叠、元素丢失；
- 修改入口：需要改文案时，打开对应隐藏文字层进行编辑。
二、关键成功经验
1. 只做迭代，不覆盖旧产物
用户明确提出：只做迭代，不在已有产物上修改。
这个规则非常重要。实际过程中 v5.11、v5.13、v5.14 都暴露了不同问题，如果覆盖旧文件，就很难复盘原因。正确做法是：
- 每次生成新版本号；
- 保留失败版本作为证据；
- 把修正点写入 notes；
- README 只追加最新推荐方向。
2. PDF 适合验证排版，但不一定适合 Affinity 编辑
v5.12 解决了 PDF 中内容挤在一起的问题。核心修正是：
- 原 HTML 设计画布保持 1800×900；
- 不把
.poster内部强行改成 3000mm×1500mm； - 打印 PDF 时把整张 poster 等比缩放到 3000mm×1500mm。
这样 PDF 排版还原很好。
但 Affinity 继续导入 PDF 时，仍出现字体溢出、元素丢失等问题。这说明 PDF 不是 Affinity 最稳的可编辑中间格式，尤其当源文件包含网页字体、CSS 阴影、透明、渐变、裁切和复杂布局时。
3. Affinity 稳定交付要换策略
最终成功策略是“保真优先，编辑辅助”：
- 用 Chrome 从 HTML 渲染一张 3000×1500 的满版底图；
- 用 Affinity SDK 创建 3000×1500 新文档；
- 把底图作为一个可见、锁定的图片层放进去；
- 从 HTML 中抽取所有文字盒子的坐标、字号和颜色；
- 在 Affinity 中创建对应可编辑文字层；
- 默认隐藏所有文字层，避免和底图文字叠加；
- 交付时告诉用户：视觉看底图，编辑时打开对应文字层。
这个方案牺牲了“所有元素都是原生矢量”的纯度，但换来了稳定打开、稳定预览、稳定交付。
三、踩坑与修正
问题 1：PDF 内容挤在一起
原因：把原始 HTML 内部布局容器直接改成印刷尺寸，导致网页布局重新计算。
修正：保持原始 1800×900 画布，整体缩放到 3000mm×1500mm。
问题 2：Affinity 导入 PDF 后字体溢出、元素丢失
原因：Affinity 对 PDF 中的网页字体、CSS 效果和复杂矢量解释不稳定。
修正：不再依赖 PDF 作为 Affinity 主交付，改用稳定混合文件。
问题 3：v5.13 背景层被隐藏，文字层反而显示
原因：Affinity SDK 中新增节点后，脚本错误使用了doc.layers.first，实际选中了底层背景图。
修正：新增文字层后使用doc.layers.last获取最新添加的文字节点。
问题 4：v5.14 出现白边和右侧裁切
原因：Chrome 生成底图时，原网页 poster 仍受页面居中布局影响。
修正：渲染和抽取文字坐标时强制：
.poster { position: absolute !important; top: 0 !important; left: 0 !important; margin: 0 !important; }四、可复用操作流程
第一步：生成满版底图
使用：
node tools\affinity-mcp\html-to-jpeg-preview.mjs "<source.html>" "<background.jpg>" 3000 1500要求：
- 输出必须是 3000×1500；
- 不允许有白边；
- 右侧不能裁切；
- 视觉必须和原 HTML 一致。
第二步：抽取文字坐标
使用：
node tools\affinity-mcp\html-text-layout-json.mjs "<source.html>" "<text-layout.json>" 3000 1500这个 JSON 是后续 Affinity 可编辑文字层的坐标来源。
第三步：创建 Affinity 稳定混合文件
使用：
node tools\affinity-mcp\create-affinity-stable-hybrid.mjs "<background.jpg>" "<text-layout.json>" "<output.afdesign>"输出结构：
- 1 个锁定背景图层；
- 多个隐藏文字层；
- 默认视觉不叠字、不溢出。
第四步：验证
用 Affinity SDK 检查：
- 文档尺寸是否为 3000×1500；
- 可见图片层是否为 1；
- 可见文字层是否为 0；
- 隐藏文字层数量是否符合抽取结果；
- 背景图层是否可见且锁定。
v5.15 的验证结果：
- document size：3000×1500；
- visible image layers：1；
- hidden editable text layers：194；
- visible editable text layers：0。
五、设计软件自然语言操控原则
- 用户说“还原”，先理解为视觉还原，不要一开始追求技术形式纯粹。
- 用户说“可编辑”，要拆成不同层级：完全矢量可编辑、文字可编辑、结构可编辑、视觉可替换。
- 当设计软件导入格式不稳定时，用“保真底图 + 可编辑覆盖层”比硬转 PDF 更可靠。
- 每次失败都要转化成下一版的明确约束。
- 复杂设计交付要同时给用户：最终文件、预览图、说明文档、可回退版本。
- 自动化设计时必须视觉验证，不能只看命令成功。
六、最终推荐产物
推荐使用：
assets/brand/posters/AICSF-storefront-signage-0001/source/poster-v5.15-affinity-stable-hybrid.afdesign配套说明：
assets/brand/posters/AICSF-storefront-signage-0001/source/poster-v5.15-affinity-stable-hybrid-notes.md完整底图：
assets/brand/posters/AICSF-storefront-signage-0001/exports/poster-v5.15-affinity-stable-background-3000x1500.jpg这套流程的关键不是“AI 一次生成完美设计”，而是 AI 能通过自然语言持续接收反馈、定位问题、保留版本、调整技术路线，最后把设计软件变成一个可迭代的工程化生产工具。
