企业官网建设流程全解析

1. 从“找素材”到“改图”：创意设计自动化的真实卡点在哪

如果你在创意团队待过，大概率见过这样的场景：设计师在 Photoshop 里反复翻找本地素材库，一个“夏日清凉感蓝色渐变背景”的需求，要在几十个文件夹里点开上百张图才能勉强找到一张能用的；找到之后还要手动置入、调整图层、对齐画布，一套动作下来十几分钟没了。更麻烦的是，这些素材散落在不同人的硬盘里，命名规则五花八门，时间一长就成了“数字黑洞”——明明知道手头有这张图，就是找不到。

MCP（Model Context Protocol）能做什么？简单说，它给 AI 模型和外部工具之间定了一套标准接口。以前你想让 AI 帮你操作 Photoshop，得自己写一堆胶水代码，把模型的输出解析成 ExtendScript 再塞给 PS 执行；现在通过 MCP，模型可以直接“看到”你本地有哪些素材资源（Resources），也可以“调用”你封装好的工具（Tools），比如搜索素材、置入图层、批量导出。适合谁？适合有一定 Node.js 基础、想让 AI 真正动手改图而不是只给建议的设计自动化开发者、创意技术岗、以及想搭内部设计中台的团队。

我试过把本地 PSD 库通过 MCP 暴露给模型，然后用一句话“把当前画布里的主视觉替换成品牌模板里的新年海报”，让模型自己完成搜索、匹配、置入三个动作。实测下来，链路跑通之后，单次改图从原来的手动 5 分钟压缩到 10 秒以内。这篇文章就按这个思路，把可复制的 MCP Server 配置、ExtendScript 脚本和 Node.js 调用示例完整交付出来，你跟着做就能搭起自己的智能自动化引擎。

核心检索词先明确：MCP 协议对接 Adobe 系列软件，本质是让 AI 通过标准化协议操控 Photoshop 等专业设计工具，实现从语义检索到物理改图的闭环。下面从环境准备开始，一步步落地。

2. TaoToken 前置：统一 Key 打通 MCP 与模型调用链路

在动手写 MCP Server 之前，得先解决模型调用的问题。MCP Server 本身只负责“暴露工具和资源”，真正理解你“找一张新年海报”这句话、并决定调用哪个工具的，是背后的大模型。所以你需要一个能稳定调用模型的入口，并且这个入口要能跟 MCP 的配置无缝对接。

TaoToken 在这里的角色是统一 Key 管理。你不需要在 MCP Server 里硬编码某个厂商的 API Key，而是通过 TaoToken 拿到一个统一的 Base URL 和 Key，然后在 MCP 配置里指向它。这样换模型、加模型都不用改 MCP Server 的代码，只改配置就行。

具体操作路径：先到 TaoToken 控制台创建一个 API Key。地址是 https://taotoken.net/api ，注意这个地址不带任何追踪参数，直接访问即可。创建完 Key 之后，你会得到一个形如sk-xxxx的字符串，以及一个 Base URL：https://taotoken.net/api。这两个东西后面配置 MCP Server 和 Claude Code 的时候都要用到。

如果你用的是 Claude Code 或者 Cline 这类支持 MCP 的客户端，配置方式略有不同。Claude Code 需要在 settings 里指定 Anthropic 的 Base URL 和 Key；Cline 则是在 MCP Servers 配置里写 command 和 args。不管哪种，核心三件套都是：Base URL、API Key、Model ID。Model ID 根据你实际要用的模型填，比如claude-sonnet-4-20250514或者gpt-4o之类的，具体以 TaoToken 文档里列出的为准。

这里有个坑要注意：MCP Server 本身不直接调用模型，它是被客户端（比如 Claude Code）调用的。所以你的 TaoToken Key 其实是配在客户端那一侧，而不是 MCP Server 代码里。MCP Server 只负责跟 Adobe 软件通信。这个分工搞清楚，后面配置才不会乱。

另外，如果你打算长期跑编码和 Agent 任务，可以关注一下 Coding Plan 相关的入口，在 TaoToken 官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 上有说明。不过这篇文章的重点是 MCP 对接 Adobe，模型调用部分只要保证 Key 能通就行。

3. 可复制配置：MCP Server + ExtendScript + Node.js 三件套

这一节直接给可复制的配置和代码。整个链路分三层：最上层是 MCP 客户端（Claude Code / Cline），中间是 MCP Server（Node.js），最下层是 Adobe ExtendScript 脚本宿主。三层之间通过标准输入输出和本地 Socket 通信。

先建项目目录：

mkdir mcp-adobe-bridge && cd mcp-adobe-bridge npm init -y npm install @modelcontextprotocol/sdk fast-glob npm install -D typescript @types/node npx tsc --init

然后创建tsconfig.json，确保module设为NodeNext，target设为ES2022，outDir设为dist。这些是 MCP SDK 的常规要求。

接下来是 MCP Server 的核心代码src/server.ts。这段代码暴露两个能力：一个 Resource 用来映射本地 PSD 素材库，一个 Tool 用来执行“搜索并置入”动作。

import { Server } from "@modelcontextprotocol/sdk/server/index.js"; import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; import { ListToolsRequestSchema, CallToolRequestSchema, ListResourcesRequestSchema, ReadResourceRequestSchema, } from "@modelcontextprotocol/sdk/types.js"; import fg from "fast-glob"; import path from "path"; import { execFile } from "child_process"; import { promisify } from "util"; const execFileAsync = promisify(execFile); const server = new Server( { name: "creative-asset-bridge", version: "1.0.0" }, { capabilities: { tools: {}, resources: {} } } ); // Resource: 映射本地 PSD 素材库 server.setRequestHandler(ListResourcesRequestSchema, async () => ({ resources: [ { uri: "asset://library/psd-templates", name: "企业品牌 PSD 模板库", description: "包含所有官方海报、Logo 及社交媒体展示模板", mimeType: "application/x-photoshop", }, ], })); // Tool: 搜索并置入素材 server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: [ { name: "search_and_place_asset", description: "根据关键词在本地库中搜索素材，并自动置入到当前 Adobe 软件的活动文档中。", inputSchema: { type: "object", properties: { keyword: { type: "string", description: "搜索关键词，如 '极简风格', '新年海报'", }, software: { type: "string", enum: ["photoshop", "illustrator"], default: "photoshop", }, }, required: ["keyword"], }, }, ], })); // 执行逻辑：搜索文件 + 调用 ExtendScript server.setRequestHandler(CallToolRequestSchema, async (request) => { const { name, arguments: args } = request.params; if (name !== "search_and_place_asset") { throw new Error("Tool not found"); } const keyword = args?.keyword as string; const software = (args?.software as string) || "photoshop"; const assets = await fg([`**/assets/*${keyword}*.psd`], { dot: true }); if (assets.length === 0) { return { content: [{ type: "text", text: `未找到与 "${keyword}" 相关的素材。` }], }; } const selectedFile = path.resolve(assets[0]); // 调用 ExtendScript 执行置入 const scriptPath = path.resolve(__dirname, "../scripts/place_asset.jsx"); const { stdout, stderr } = await execFileAsync("osascript", [ "-e", `tell application "${software === "photoshop" ? "Adobe Photoshop 2024" : "Adobe Illustrator 2024"}" to do javascript file "${scriptPath}" with arguments {"${selectedFile}"}`, ]); return { content: [ { type: "text", text: `已找到匹配素材：${path.basename(selectedFile)}\n执行结果：${stdout || stderr}`, }, ], }; }); const transport = new StdioServerTransport(); await server.connect(transport);

上面代码里用osascript调用 Adobe 的 ExtendScript 宿主，这是 macOS 下的方式。Windows 下需要用cscript或者 Adobe 提供的ExtendScript Toolkit命令行。为了跨平台，更稳妥的做法是让 Photoshop 监听一个本地端口，Node.js 通过 Socket 发指令。但为了演示清晰，这里先用osascript方案。

对应的 ExtendScript 脚本scripts/place_asset.jsx：

// place_asset.jsx // 接收参数：目标文件路径 var targetFile = arguments[0]; if (!targetFile) { throw new Error("未提供目标文件路径"); } var doc = app.activeDocument; var placedLayer = doc.artLayers.add(); placedLayer.kind = LayerKind.NORMAL; // 置入文件 var file = new File(targetFile); if (!file.exists) { throw new Error("文件不存在：" + targetFile); } // 使用 placedLayer 方式置入 doc.activeLayer = placedLayer; var desc = new ActionDescriptor(); desc.putPath(charIDToTypeID("null"), file); desc.putEnumerated( charIDToTypeID("FTcs"), charIDToTypeID("QCSt"), charIDToTypeID("Qcsa") ); executeAction(charIDToTypeID("Plc "), desc, DialogModes.NO); // 写入 TraceID 到图层元数据 placedLayer.name = "AI-Placed-" + new Date().getTime();

这个脚本做了两件事：把目标 PSD 置入当前文档，并在图层名里写入时间戳作为简易 TraceID。后面做版权追溯的时候，这个 TraceID 可以扩展成完整的指令日志。

MCP 客户端的配置，以 Claude Code 为例，在~/.claude/settings.json里加：

{ "mcpServers": { "creative-asset-bridge": { "command": "node", "args": ["/absolute/path/to/mcp-adobe-bridge/dist/server.js"], "env": { "TAOTOKEN_BASE_URL": "https://taotoken.net/api", "TAOTOKEN_API_KEY": "sk-你的Key" } } } }

注意这里的 Base URL 和 Key 是给客户端调模型用的，MCP Server 本身不读这两个环境变量，但放在一起方便管理。Model ID 在客户端的模型选择里指定，比如claude-sonnet-4-20250514。

如果你用的是 Cline，配置写在 Cline 的 MCP Servers 设置里，格式类似，command 和 args 指向编译后的dist/server.js即可。

4. 验证请求：从一句话指令到改图执行的完整动作

配置写完，得验证链路是否真的通了。验证分两步：先确认 MCP Server 能被客户端识别，再确认模型能正确调用工具并触发 Photoshop 动作。

第一步，启动 Claude Code，输入/mcp查看已连接的 MCP Server 列表。如果配置正确，你应该能看到creative-asset-bridge出现在列表里，并且状态是 connected。如果没出现，检查dist/server.js是否编译成功，路径是否写对。

第二步，在 Claude Code 里输入一句话指令：

在当前打开的 Photoshop 文档里，搜索“新年海报”素材并置入到活动图层。

模型会先调用ListTools拿到可用工具，然后决定调用search_and_place_asset，参数是keyword: "新年海报"。MCP Server 收到请求后，用fast-glob在本地assets目录下搜索匹配的 PSD 文件，找到之后调用osascript执行 ExtendScript，Photoshop 里就会多出一个置入的图层。

成功的结果长这样：Claude Code 返回一段文本，类似“已找到匹配素材：new-year-poster.psd，执行结果：置入完成”。同时 Photoshop 的活动文档里出现新图层，图层名带AI-Placed-前缀和时间戳。

如果搜索不到素材，返回的是“未找到与‘新年海报’相关的素材”，这时候检查assets目录下是否有对应文件，以及文件名是否包含关键词。fast-glob的匹配规则是**/assets/*${keyword}*.psd，所以文件必须放在任意层级的assets目录下，且扩展名是.psd。

验证模型调用是否走了 TaoToken，可以在 Claude Code 的日志里看请求的 Base URL。如果日志里显示的是https://taotoken.net/api，说明 Key 配置生效了。如果显示的是其他地址，检查 settings.json 里的TAOTOKEN_BASE_URL是否写对。

这一步跑通之后，你可以试着把指令改得更复杂一点，比如“找一张极简风格的蓝色渐变背景，置入后把不透明度调到 80%”。模型会先调用搜索工具，拿到文件路径后，再调用一个你还没写的“调整不透明度”工具。这就引出了下一节要讲的扩展思路——但在此之前，先把基础链路的报错排查清楚。

5. 本篇常见错排查：401、local proxy failed、reading choices、OAuth

链路跑不通的时候，报错信息往往很模糊。这一节把几个高频报错和对应解法列出来，你对照着查。

401 Unauthorized：这个最常见，基本是 Key 没配对。检查三处：TaoToken 控制台里 Key 是否被禁用或删除；settings.json 里TAOTOKEN_API_KEY是否完整复制，有没有多余空格；Base URL 是否写成了https://taotoken.net/api而不是带其他路径的地址。如果 Key 刚创建，等几秒再试，有时候有缓存延迟。

local proxy failed：这个报错通常出现在客户端尝试连接 MCP Server 的时候。原因可能是dist/server.js路径不对，或者 Node.js 版本太低。MCP SDK 要求 Node 18 以上，建议用 Node 20 LTS。另外检查command字段是不是node，如果你用npx或者ts-node，路径解析会不一样。最稳的方式是先npm run build编译出dist/server.js，然后直接用node dist/server.js测试能否启动。如果启动就报错，看终端输出的堆栈，通常是依赖没装全。

reading choices：这个报错一般出现在模型返回结果解析阶段。MCP 协议要求工具返回的content数组里每个元素都有type字段，比如{ type: "text", text: "..." }。如果你返回的对象缺了type，客户端解析就会报reading choices之类的错。检查CallToolRequestSchema的返回结构，确保每个 content 元素都有type: "text"。

OAuth：如果你在客户端配置里选了需要 OAuth 的模型提供商，但没走完授权流程，会报 OAuth 相关错误。用 TaoToken 的 Key 方式不需要 OAuth，直接在 settings 里填 Key 就行。如果客户端强制走 OAuth，检查是不是选错了提供商类型，改成 API Key 模式。

还有一个不报错但很烦的问题：ExtendScript 执行了但 Photoshop 没反应。这通常是osascript的 application 名称写错了。不同版本的 Photoshop 应用名不一样，比如Adobe Photoshop 2024、Adobe Photoshop 2023。你可以在 macOS 的/Applications目录下看实际名称，然后改代码里的字符串。Windows 下则是用cscript调用.jsx文件，路径要用反斜杠转义。

排查顺序建议：先确认 MCP Server 能独立启动，再确认客户端能连上 MCP Server，最后确认模型能调用工具。每一步单独验证，比一次性全链路调试效率高得多。

6. 语义一致 CTA：把 Key 和文档放在手边

链路跑通之后，你可能会想加更多工具，比如“批量导出为 WebP”、“自动对齐图层”、“根据品牌色校准颜色”。这些扩展都遵循同一个模式：在 MCP Server 里注册新的 Tool，在 ExtendScript 里实现对应的物理操作，然后在客户端里用自然语言触发。

如果你还没拿到 TaoToken 的 Key，或者想看看完整的接入文档，可以直接访问 API Keys 页面：https://taotoken.net/api-keys 。文档入口在 https://taotoken.net/doc ，里面有各客户端的配置示例和模型列表。想先试试模型对话效果，可以走 https://taotoken.net/chat 。长期跑编码和 Agent 任务的话，Coding Plan 的说明在 https://taotoken.net/coding-plan 。

Claude Code 相关的配置参考在 https://taotoken.net/claude-code ，控制台在 https://taotoken.net/console 。这些地址都带上了归因参数，方便你从这篇文章直接跳转。

最后说一个实用技巧：ExtendScript 的调试信息默认不输出到终端，你可以在脚本里用$.writeln()写日志到文件，然后在 Node.js 侧读取这个文件来确认执行到了哪一步。这个办法在排查“脚本跑了但没效果”的时候特别管用。