AI 用自然语言操纵 Affinity 生成店招可编辑文件的成功流程复盘日期2026-07-09项目OPC 一人全栈店招海报目标尺寸3 米 × 1.5 米最终推荐文件poster-v5.15-affinity-stable-hybrid.afdesignAI 操纵 Affinity 生成可编辑店招海报设计流程复盘 v1.0Windows 本地配置记录Codex 重启后识别 Affinity MCP绕过 Claude DesktopAffinity MCP 直连 WorkBuddy/Cursor 完整配置指南WindowsWindows 本地配置记录把 Affinity by Canva 的 MCP 连接到 Codex一、这次真正跑通的目标这次任务不是单纯生成一张海报图而是把一个已有HTML 店招设计尽量还原成 Affinity 可打开、可交付、可继续修改、图层清晰的文件。最终有效结果不是最早的 PDF 直转 Affinity而是 v5.15 的“稳定混合文件”视觉层一张锁定的 3000×1500 保真底图编辑层194 个从 HTML 中抽取出来的隐藏文字层打开效果默认只显示保真底图避免字体溢出、文字重叠、元素丢失修改入口需要改文案时打开对应隐藏文字层进行编辑。二、关键成功经验1. 只做迭代不覆盖旧产物用户明确提出只做迭代不在已有产物上修改。这个规则非常重要。实际过程中 v5.11、v5.13、v5.14 都暴露了不同问题如果覆盖旧文件就很难复盘原因。正确做法是每次生成新版本号保留失败版本作为证据把修正点写入 notesREADME 只追加最新推荐方向。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 中创建对应可编辑文字层默认隐藏所有文字层避免和底图文字叠加交付时告诉用户视觉看底图编辑时打开对应文字层。这个方案牺牲了“所有元素都是原生矢量”的纯度但换来了稳定打开、稳定预览、稳定交付。三、踩坑与修正问题 1PDF 内容挤在一起原因把原始 HTML 内部布局容器直接改成印刷尺寸导致网页布局重新计算。修正保持原始 1800×900 画布整体缩放到 3000mm×1500mm。问题 2Affinity 导入 PDF 后字体溢出、元素丢失原因Affinity 对 PDF 中的网页字体、CSS 效果和复杂矢量解释不稳定。修正不再依赖 PDF 作为 Affinity 主交付改用稳定混合文件。问题 3v5.13 背景层被隐藏文字层反而显示原因Affinity SDK 中新增节点后脚本错误使用了doc.layers.first实际选中了底层背景图。修正新增文字层后使用doc.layers.last获取最新添加的文字节点。问题 4v5.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 size3000×1500visible image layers1hidden editable text layers194visible editable text layers0。五、设计软件自然语言操控原则用户说“还原”先理解为视觉还原不要一开始追求技术形式纯粹。用户说“可编辑”要拆成不同层级完全矢量可编辑、文字可编辑、结构可编辑、视觉可替换。当设计软件导入格式不稳定时用“保真底图 可编辑覆盖层”比硬转 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 能通过自然语言持续接收反馈、定位问题、保留版本、调整技术路线最后把设计软件变成一个可迭代的工程化生产工具。
AI 用自然语言操纵 Affinity 生成店招可编辑文件的成功流程复盘
发布时间：2026/7/10 15:20:39
AI 用自然语言操纵 Affinity 生成店招可编辑文件的成功流程复盘日期2026-07-09项目OPC 一人全栈店招海报目标尺寸3 米 × 1.5 米最终推荐文件poster-v5.15-affinity-stable-hybrid.afdesignAI 操纵 Affinity 生成可编辑店招海报设计流程复盘 v1.0Windows 本地配置记录Codex 重启后识别 Affinity MCP绕过 Claude DesktopAffinity MCP 直连 WorkBuddy/Cursor 完整配置指南WindowsWindows 本地配置记录把 Affinity by Canva 的 MCP 连接到 Codex一、这次真正跑通的目标这次任务不是单纯生成一张海报图而是把一个已有HTML 店招设计尽量还原成 Affinity 可打开、可交付、可继续修改、图层清晰的文件。最终有效结果不是最早的 PDF 直转 Affinity而是 v5.15 的“稳定混合文件”视觉层一张锁定的 3000×1500 保真底图编辑层194 个从 HTML 中抽取出来的隐藏文字层打开效果默认只显示保真底图避免字体溢出、文字重叠、元素丢失修改入口需要改文案时打开对应隐藏文字层进行编辑。二、关键成功经验1. 只做迭代不覆盖旧产物用户明确提出只做迭代不在已有产物上修改。这个规则非常重要。实际过程中 v5.11、v5.13、v5.14 都暴露了不同问题如果覆盖旧文件就很难复盘原因。正确做法是每次生成新版本号保留失败版本作为证据把修正点写入 notesREADME 只追加最新推荐方向。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 中创建对应可编辑文字层默认隐藏所有文字层避免和底图文字叠加交付时告诉用户视觉看底图编辑时打开对应文字层。这个方案牺牲了“所有元素都是原生矢量”的纯度但换来了稳定打开、稳定预览、稳定交付。三、踩坑与修正问题 1PDF 内容挤在一起原因把原始 HTML 内部布局容器直接改成印刷尺寸导致网页布局重新计算。修正保持原始 1800×900 画布整体缩放到 3000mm×1500mm。问题 2Affinity 导入 PDF 后字体溢出、元素丢失原因Affinity 对 PDF 中的网页字体、CSS 效果和复杂矢量解释不稳定。修正不再依赖 PDF 作为 Affinity 主交付改用稳定混合文件。问题 3v5.13 背景层被隐藏文字层反而显示原因Affinity SDK 中新增节点后脚本错误使用了doc.layers.first实际选中了底层背景图。修正新增文字层后使用doc.layers.last获取最新添加的文字节点。问题 4v5.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 size3000×1500visible image layers1hidden editable text layers194visible editable text layers0。五、设计软件自然语言操控原则用户说“还原”先理解为视觉还原不要一开始追求技术形式纯粹。用户说“可编辑”要拆成不同层级完全矢量可编辑、文字可编辑、结构可编辑、视觉可替换。当设计软件导入格式不稳定时用“保真底图 可编辑覆盖层”比硬转 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 能通过自然语言持续接收反馈、定位问题、保留版本、调整技术路线最后把设计软件变成一个可迭代的工程化生产工具。
，射频天线国产替代优选方案)
