1. 从一张店招海报说起为什么需要 Codex MCP Affinity 这条链路店招海报这件事看起来是设计问题实际是工程问题。我最近在做一个 3 米 × 1.5 米的门店招牌客户要的不是一张 JPG而是能继续改的源文件——文字要能改、色块要能调、图标要能挪。如果只丢一张位图过去后面每改一个字都得重做这在真实交付里是灾难。所以这次我验证了一条链路用自然语言描述设计目标让 Codex 通过 MCP 驱动 Affinity产出可编辑的 SVG再转成 .afdesign 源文件最后渲染预览做闭环检查。整条链路里模型调用和 MCP 桥接都需要一个稳定的 API 通道我用 TaoToken 的统一 Key 把 Codex 和 MCP 两侧的接入配置统一起来避免到处散落不同的 Key 和 endpoint。这篇文章适合三类人一是想用 AI 辅助做可编辑设计交付的设计师二是想把 Codex 接进本地工具链的开发者三是已经在用 MCP 但被多套 Key 管理搞烦的人。下面我会把 config.toml、settings.json 骨架、CC Switch 切换步骤以及一次完整的店招海报生成与 SVG 可编辑性验证动作全部给出来你可以直接照着改。2. TaoToken 前置统一 Key 与 API 通道的准备在动手配 Codex 和 MCP 之前先把通道这件事理清楚。TaoToken 在这里扮演的角色是统一的模型调用入口——你不需要为 Codex 配一套 Key、为 MCP 再配一套而是用同一个 Key 走同一个 API 通道。官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基址是 https://taotoken.net/api 这个不加 UTM。你需要准备的东西不多一个 TaoToken 账号、一个 API Key、本地装好 Codex CLI 和 Affinityby Canva。Key 的创建入口在控制台的 API Keys 页面地址是 https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。创建后先复制保存后面 config.toml 和 settings.json 都要用到。注意Key 只显示一次建议创建后立刻存进本地密码管理器或环境变量文件不要直接写进会提交到 Git 的配置里。如果你还没决定用哪个模型可以先去模型对话页面试一下手感地址是 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 。对于设计类任务我建议选一个对结构化输出尤其是 SVG 这种带层级和属性的文本比较稳的模型因为后面 Codex 要生成的是可编辑矢量不是随便一段文字。这一步的核心判断是通道先通再谈配置。很多人卡在 Codex 报 401 或 MCP 拿不到回包最后发现是 Key 或 base_url 写错了而不是工具本身的问题。3. 可复制配置config.toml 与 settings.json 骨架这一节是全文最干的部分直接给骨架。Codex 侧用 config.tomlMCP 侧用 settings.json两边都指向 TaoToken 的 API 通道。3.1 Codex 侧 config.toml 骨架Codex 的配置文件一般放在用户目录下的.codex/config.tomlWindows 是C:\Users\你的用户名\.codex\config.toml。下面是我实测可用的骨架把YOUR_TAOTOKEN_KEY换成你自己的 Key# ~/.codex/config.toml model gpt-5-codex model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chat [profiles.default] model gpt-5-codex model_provider taotoken approval_policy on-request这里的关键是base_url指向https://taotoken.net/apienv_key指定从环境变量读 Key而不是硬编码。Windows 下设置环境变量setx TAOTOKEN_API_KEY 你的Key设置完要重开一个终端才生效。验证是否读到echo $env:TAOTOKEN_API_KEY3.2 MCP 侧 settings.json 骨架MCP 的配置取决于你用的宿主。如果你用 Claude Desktop 或 Cursorsettings.json 里加一个 mcpServers 段。下面是以 Affinity MCP 为例的骨架{ mcpServers: { affinity: { command: node, args: [ C:\\tools\\affinity-mcp\\server.mjs ], env: { TAOTOKEN_API_KEY: 你的Key, TAOTOKEN_BASE_URL: https://taotoken.net/api, AFFINITY_WORKSPACE: C:\\projects\\storefront-signage } } } }注意env里同时给了 Key 和 base_url这样 MCP server 内部调用模型时也走同一条通道。AFFINITY_WORKSPACE指向你的项目目录后面生成 SVG 和 .afdesign 都落在这里。3.3 CC Switch 切换步骤如果你在多个模型供应商之间切换用 CC Switch 可以少改配置。步骤是打开 CC Switch新增一个 provider名称填TaoToken。Base URL 填https://taotoken.net/apiAPI Key 填你的 TaoToken Key。在 Codex 的 profile 里选中这个 provider保存。回到终端运行codex --profile default确认生效。切换后建议跑一次最小请求验证别等到生成海报时才发现通道没通。4. 验证请求与成功结果一次店招海报生成与 SVG 可编辑性验证配置好之后跑一次真实任务。目标是生成一张 3000mm × 1500mm 的店招海报输出可编辑 SVG再转 .afdesign。4.1 用 Codex 生成结构化 SVG在项目目录下启动 Codex输入类似这样的指令生成一张店招海报 SVG画布 3000x1500比例 2:1。 顶部超大标题副标题加横线四个承诺标签 中部三列服务卡片右侧为什么选择我们面板 底部发光增长曲线和四个成长节点。 所有文字用 text 保留可编辑面板用 rect 曲线用 path发光用 linearGradient 和 filter。 按模块分组 g transform...。Codex 会输出一段 SVG。把它存成文件mkdir assets\brand\posters\storefront-signage-0001\source # 把 Codex 输出保存为 poster-v5.5-3m-by-1p5m.svg4.2 用 Affinity MCP 转 .afdesignMCP 侧提供一个保存脚本命令模式如下node tools\affinity-mcp\save-svg-as-afdesign.mjs assets\brand\posters\storefront-signage-0001\source\poster-v5.5-3m-by-1p5m.svg assets\brand\posters\storefront-signage-0001\source\poster-v5.5-3m-by-1p5m.afdesign成功的话会在 source 目录下看到 .afdesign 文件。这一步是可编辑性的关键——如果只输出 SVG 不转 .afdesign客户在 Affinity 里打开还得再导入一次。4.3 渲染预览做闭环检查转完之后渲染预览图node tools\affinity-mcp\render-svg-preview.mjs assets\brand\posters\storefront-signage-0001\source\poster-v5.5-3m-by-1p5m.svg assets\brand\posters\storefront-signage-0001\exports\poster-v5.5-3m-by-1p5m-preview.jpg然后打开预览图逐项检查是否裁切、比例是否 2:1、标题是否醒目、服务卡片是否拥挤、图标和文字是否碰撞、底部标签是否压线、右侧发光区域是否破坏主体信息。4.4 SVG 可编辑性验证动作光看预览不够还要验证可编辑。在 Affinity 里打开 .afdesign做三个动作双击标题文字看能否直接改字。选中一个服务卡片看能否单独移动。选中底部曲线看能否调整节点。如果这三步都能做说明 SVG 里的text、g、path结构被正确保留没有在转换过程中被拍平成位图。5. 本篇常见错排查这一节是我踩过的坑按出现频率排。报错一Codex 返回 401 Unauthorized。九成是环境变量没生效。Windows 下setx之后必须重开终端echo $env:TAOTOKEN_API_KEY确认能打印出来。如果打印为空说明没读到。报错二MCP 调用超时或拿不到 JSON 回包。这是并发问题。保存 .afdesign 和导出预览如果并行跑Affinity MCP 偶尔会因为并发execute_script没拿到回包。经验原则是关键验收步骤串行执行。如果并行导出失败但 .afdesign 已保存成功不要误判设计失败单独重跑render-svg-preview.mjs就行。报错三生成的 SVG 在 Affinity 里文字变成图形。说明 Codex 把文字转曲了。检查 SVG 里是不是还有text标签如果全是path就要在指令里强调文字用text保留可编辑。报错四比例不对。参考图是 3:2实际店招是 2:1如果直接缩放会变形。正确做法是按实际尺寸重排画布从 3000×2000 改成 3000×1500顶部标题横向展开中部卡片高度压缩右侧面板变矮变宽。报错五预览图裁切。通常是 viewBox 和画布尺寸不一致。检查 SVG 根元素的width、height、viewBox三个值是否匹配。提示每次迭代都新增版本号不要覆盖旧版。命名用poster-v{版本号}-{设计方向}-{尺寸}.svg配套 .afdesign、preview.jpg 和 notes.md。6. 把这条链路用起来从接入到长期编码如果你只是偶尔生成一张海报上面的配置够用了。但如果你要把这条链路长期跑下去——比如每周出几版店招、或者把 MCP 接进自动化流程——建议把 Codex 的调用方式固定下来用 Coding Plan 管理长期额度地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有完整的参数说明和示例。回到这次任务本身最终交付的目录结构是这样的assets/brand/posters/storefront-signage-0001/ ├── source/ │ ├── poster-v5.5-3m-by-1p5m.svg │ └── poster-v5.5-3m-by-1p5m.afdesign ├── exports/ │ └── poster-v5.5-3m-by-1p5m-preview.jpg └── poster-v5.5-3m-by-1p5m-notes.md四类文件缺一不可SVG 是可编辑中间源.afdesign 是 Affinity 源文件preview.jpg 是预览notes.md 记录设计目的、尺寸、参考来源和生产注意事项。这套流程真正有价值的地方不是一次生成完美图片而是把设计过程工程化、版本化、可检查化。自然语言驱动 AI 完成设计意图理解 → 可编辑矢量重建 → Affinity 源文件生成 → 预览验证 → 继续迭代的闭环每一步都有产物、有验证、可回退。你按上面的 config.toml 和 settings.json 骨架配好跑一次 3000×1500 的店招再在 Affinity 里双击标题改个字就知道这条链路通没通了。