codesign-mcp-server 2.0.0 震撼发布：给你的 AI 装一只眼睛，让它直接读懂腾讯 CoDesign 设计稿

一句话安利：把 CoDesign 链接丢给 Claude Code / Cursor，它自己去看图、量间距、下切图、写 CSS。不用你截图，不用你手抄标注，也不用你打开预览图按包围盒一张张裁。

仓库地址：https://github.com/geniyangge/codesign-mcp-server

npm 包名：codesign-mcp-server

写在前面

我做这个工具的时候，正卡在一个很具体的事情上：手上有一份 750 宽、86 个图层的移动端设计稿，要还原成 H5 页面。

流程本来是通的------AI 写 CSS 并不差。问题在于它看不见。

我贴一张截图过去，它只能根据画面猜：「这里大概是 16px 的内边距」「这个圆角差不多 8px」。猜个七八成没问题，但设计稿还原这件事，七成就是不合格。12 和 14 差两个像素，24 和 22 差两个像素，一个页面几十处，肉眼看着别扭，你说不出来哪里不对。

而真正准确的数字，全在 CoDesign 里：每个图层的坐标、字号、行高、字重、色值、圆角、边框、阴影参数、切图资源。它们确实存在，只是------

在网页里，需要登录才能看
没有开放 API，只有一堆 /api/ 开头的内部接口
图层树是压缩过的结构，不重建的话拿到的是一堆没有父子关系的散图层
切图给的是 OSS 签名直链，直接下载 AccessDenied

于是就有了这个项目：把这条链路全部打通，做成一个 MCP 服务，让 AI 自己来取。

一、MCP 是什么，为什么不是「写个脚本让 AI 跑」

MCP（Model Context Protocol）是让模型调用外部能力的协议。落到实现上很简单：一个本地的 stdio 进程，跟客户端（Claude Code、Cursor 等）走 JSON-RPC 通信。

客户端启动时问：你有哪些工具？→ 服务端返回 tools/list，包含每个工具的名字、说明、参数 schema
模型决定要调用时 → 发 tools/call，服务端执行后把结果作为文本返回给模型

就这么朴素。但比「写个脚本让 AI 自己 curl」强的地方在于三点：

1. 参数是带 schema 的。 模型知道 cssScale 是数字、regions 是对象数组、format 只接受 png/jpg/webp，不会瞎传。

2. 工具描述本身是提示词。 我在 design_get 的描述里写的是给模型看的话，比如「默认只返回第一个画板，需要全部请传 allScreens: true，整份设计稿一次返回可能有几百 KB」。模型读到这句，就会在合适的时机用合适的参数。

3. 错误可以被「翻译」。 这一点我觉得最被低估。普通脚本报错就是 403，模型只能干瞪眼或者瞎猜。我把 CoDesign 的错误全翻成了可执行建议，比如：

复制代码

❌ 不是该设计稿所属项目的成员

账号未加入设计稿所在团队，接口因此拒绝访问。
解决办法（任选其一）：
  1. 让设计同学把当前账号加入该 CoDesign 项目
  2. 让设计同学在分享设置里开启「可查看标注」权限
  3. 换用有权限的账号 Cookie

模型看到这个，自己就知道下一步该干什么，还能转告我。错误信息是给 AI 看的文档，这句话不是修辞。

二、五分钟装好

2.1 写配置

在你要写代码的那个项目 根目录建一个 .mcp.json：

json 复制代码

{
  "mcpServers": {
    "codesign": {
      "command": "npx",
      "args": ["-y", "codesign-mcp-server"],
      "env": {
        "CODESIGN_COOKIE": "你的 Cookie"
      }
    }
  }
}

也可以用命令行一条搞定（想全局生效就把 --scope user 留着）：

bash 复制代码

claude mcp add codesign --scope user \
  -e CODESIGN_COOKIE="你的 Cookie" \
  -- npx -y codesign-mcp-server

读图层标注和下载切图都需要登录态。步骤照抄就行：

浏览器登录 https://codesign.qq.com
打开目标设计稿
F12 打开开发者工具 → Network 面板
刷新页面，随便点一条 /api/ 开头的请求
右键 → Copy → Copy as cURL (bash)
找 -b '...' 后面引号里的那一整段，复制，粘到 CODESIGN_COOKIE

Cookie 里的 access_token 一般 30 天有效。过期了会报 401，重新抠一次即可。

不想把 Cookie 明文写进配置文件的话，.mcp.json 里写 "CODESIGN_COOKIE": "${CODESIGN_COOKIE}"，然后把值放系统环境变量：

Windows 用 setx CODESIGN_COOKIE "..."（设完要重开终端），macOS/Linux 写进 ~/.zshrc 或 ~/.bashrc。

2.3 重启并确认

配置改完必须重启 客户端，然后输入 /mcp：

复制代码

codesign  ✓ connected (5 tools)

看到 connected 就成了。如果是 failed，多半是 Cookie 里有换行或者引号没去干净。

三、第一次实战

最省事的用法就是一句话：

复制代码

帮我还原这个设计稿 https://codesign.qq.com/app/s/<分享ID>

接下来 AI 会自己跑完这一串动作，你在旁边喝咖啡：

顺序	调用	为什么是这个顺序
1	`design_download_previews`	先拿到整板预览图看一眼，判断这是列表页还是详情页，导航在顶还是底
2	`design_get`	拿结构化的图层数据：谁是谁的子节点、谁盖在谁上面、每个盒子的坐标
3	`design_download_slices`	把图标、头像、背景图这些位图资源下到本地
4	`design_get_spec`	把 750 设计稿换算成 375 CSS 宽，直接出可用的样式表
5	---	写代码

第 1 步和第 2 步是互补的：预览图负责「像不像」，图层数据负责「准不准」。只给图，模型靠猜；只给数据，模型容易把结构理解反。两个一起给，还原质量是量级上的差别。

design_get 返回的东西长这样（v2 默认的 summary 视图，我裁了一段）：

json 复制代码

{
  "share": {
    "id": 1234567,
    "title": "首页改版",
    "team": "XX 设计组",
    "permissions": { "commentable": true, "inspectable": true, "assetsDownloadable": true }
  },
  "screens": [
    {
      "id": 889,
      "name": "首页-默认",
      "size": "750×1624",
      "preview": "https://cdn4.codesign.qq.com/...png",
      "sliceCount": 13,
      "layerCount": 86,
      "layers": [
        {
          "ref": "L1", "objectId": "12", "depth": 0, "name": "顶部导航",
          "type": "group", "z": 29,
          "rect": { "x": 0, "y": 0, "width": 750, "height": 88 },
          "flags": ["group"]
        },
        {
          "ref": "L2", "objectId": "46", "depth": 1, "parentId": "12",
          "name": "图标-返回", "type": "shape", "z": 24,
          "rect": { "x": 16, "y": 30, "width": 44, "height": 44 },
          "flags": ["bitmap:slice"]
        }
      ]
    }
  ]
}

几个字段值得单独说一句，因为它们是我在真实设计稿上踩出来的：

z 是全局绘制顺序，越大越靠上。别指望数组顺序等于层叠顺序。
flags 是层标记。bitmap:slice 表示「这是位图，但有切图可用」；bitmap:no-slice 表示「位图且没切图」------后者会被一并列进 unreconstructable，那是你唯一需要人工介入的地方。
depth + parentId 表达层级。不再往名字前面塞空格缩进了，旧版那么干，结果按名字匹配和去重全都不可靠。

几个高频问法

复制代码

用 Vue3 + Tailwind 还原这个设计稿 https://codesign.qq.com/app/s/<分享ID>
这个设计稿的切图按 3 倍图下载，转成 webp
只读取弹窗画板 https://codesign.qq.com/app/s/<分享ID>/<画板ID>
把这个分组单独导出给我
这几块没切图，按区域裁出来：左上角 750×1141
还原这个设计稿 <链接>，密码 ABCD

想让结果更稳定，有两个小技巧：

能指定画板就指定。 链接里带画板 ID，或者直接说画板名，比不带省一大截上下文，也不会拿错画板。
说人话的倍率。 说「2 倍图」的时候工具会理解成 cssScale: 2，也就是 375 × 2 = 750px ------ 前端语境的那个 2 倍。这一点在 v2 里专门做了区分，下面会讲。

四、五个工具，什么时候用哪个

工具	干什么	典型时机
`design_get`	图层结构：坐标、层级、层叠顺序、样式细节	每次都要，是主入口
`design_download_previews`	画板整图，让 AI「看见」设计	写代码前先看一眼
`design_download_slices`	批量下载标注好的切图 + 清单	要落地图片资源时
`design_export`	导出任意图层或任意区域	有图层没标切图，要兜底
`design_get_spec`	图层树 → 375 宽的 CSS 规格	想要现成的样式表

前三个是「按设计稿给的来」，后两个是「设计稿没给的，自己想办法」。

design_export 是我最想单独讲的一个，因为它解决的问题很具体：设计稿里往往有一堆位图图层（智能对象、图片填充），设计师没把它们标成切图。以前这种图层工具只能告诉你「无法还原」，你只能自己打开预览图、按包围盒手工裁。

现在它按三级降级处理，返回体里的 tier 会标明走的哪条路：

tier	情况	来源	透明？
`slice`	图层有切图	原切图 + 服务端图片处理	✅ 透明
`composite`	没有切图，盒子有效	从画板合成图上按盒子裁	❌ 不透明
`fail`	没有切图且盒子为空	---	---

而且 design_get 会在 unreconstructable 数组里把每一个 没切图的位图图层列出来，每条都附带一个 suggestedRegion，坐标是设计稿原始像素，可以直接原样粘到 design_export 的 regions 里：

json 复制代码

{ "regions": [{ "name": "顶部横幅", "x": 0, "y": 0, "width": 750, "height": 1141 }] }

只想按名字批量导，不想一个个抄 objectId：

json 复制代码

{ "namePattern": "图标|按钮", "nameTypes": ["shape"] }

注意 composite 的不透明不是我偷懒。CoDesign 压根不提供图层级的原始资源------实测 42 个位图图层，exportables 全为空，pixels 只是个布尔标记，图层里没有任何图片 URL，也没有图层渲染接口。裁合成图，必然带上被遮挡的底层内容。想要干净的透明图，只能请设计同学在 CoDesign 里把图层标成切图。

五、2.0.0 到底改了什么

这版有三个不算大、但会改变你既有习惯的变化，我都列清楚。

5.1 默认取原图，不再偷偷降采样

v1 不传倍率时默认降到 2 倍。听着合理，实际是个坑：源图本来是 3 倍的，被你这么一「默认」就掉了一档画质，而且没人告诉你。

v2 改成 native 模式：不传倍率，就取图层自带的那张原图，一个像素都不动。要倍率就显式说。

5.2 「2 倍图」这个词，被拆成了两个参数

这是我觉得最值得拿出来说的一个设计决定。因为**「2 倍图」在中文前端语境里是有歧义的**：

前端说「要 2 倍图」，指的是 CSS 尺寸的 2 倍 ：375 × 2 = 750px
设计稿语境里说「2 倍」，指的是 750 设计稿的 2 倍 ：750 × 2 = 1500px
差整整一倍

含糊着做，结果就是每次都要返工。所以 v2 拆成两个参数，基准写死在名字里：

参数	基准	例子	落盘宽度
`cssScale`	CSS 宽（375）	`cssScale: 2`	750px ------ 前端说的「2 倍图」
`scale`	设计稿宽（750）	`scale: 2`	1500px ------ 对 CSS 其实是 4 倍
`targetWidth`	直接给像素	`targetWidth: 500`	500px

两个同时传会直接报错，不做「以谁为准」的猜测。targetWidth 优先级最高。

5.3 上下文是有限资源，得省着花

这一条没在 changelog 里大书特书，但它可能是 v2 在体验上提升最大的一点。

刚做出来的时候，design_get 一份完整的双画板设计稿能返回 240KB 的 JSON。什么概念？直接撑爆对话窗口，模型要么被截断、要么开始胡言乱语。

所以 v2 做了一整套「按需付费」：

默认只返回第一个画板 ，要全部显式传 allScreens: true
默认 summary 视图 ，只给定位图层必需的字段；要样式细节传 view: "flat"，要嵌套结构传 view: "tree"
subtreeId 只看某个分组
types 只看某类图层，比如 ["text"] 就只剩文本
fields 字段投影
offset / limit 分页
超过 8KB 的结果自动压成单行 JSON ------ 缩进对机器消费没有任何意义，纯属浪费 token

同一块画板实测：

手段	效果
默认 summary + 单画板	243KB → 23.3KB
`types: ["text"]`	10.4KB / 86 层 → 11 层
`subtreeId` 取子树	1.3KB
`limit: 10` 分页	10.3KB

一个大 payload 去掉缩进，484KB → 200KB，省 59%。这些都是真金白银的上下文预算。

5.4 从 v1 迁过来

v1 写法	v2 改成
`scale: 2` 想拿前端 2 倍图	`cssScale: 2`
期望 `layers` 是嵌套树	默认扁平，要嵌套传 `view: "tree"`
期望返回全部画板	默认只第一块，全部传 `allScreens: true`
靠名字前的空格判断层级	用 `depth` + `parentId`
切图叫 `图标.png`	现在叫 `图标@2x.png`，倍率后缀统一带上了

旧文件不会自动改名，重新下一次就行。

六、原理拆解：我是怎么把这条路打通的

这部分是给想了解实现、或者想自己改点东西的人看的。技术栈很朴素：TypeScript + 官方 MCP SDK + zod，没有任何框架，打包后就是一个 Node 脚本，npx 一行就能跑。

6.1 CoDesign 没有开放 API

那就只能看它网页自己在用什么。抓下来的接口大致这几条：

接口	鉴权
`/api/sharings/<shareId>`	无需登录；带密码的分享要额外加 `state-key` 头
`/api/sharings/<shareId>/state-keys`	`POST {password}` → `{key, expires}`
`/api/designs/<designId>`	Cookie + `Authorization: Bearer`（后台链接用）
`/api/designs/<designId>/screens/<screenId>`	实测只带 Cookie 会返回「非项目成员」，必须显式带 Bearer
`cdn4.codesign.qq.com/meta/...`（图层 JSON）	需要 `Origin: https://codesign.qq.com`
切图图片	同上，位图必须带 `?imageMogr2/...`，svg 绝对不能带

三条独立的鉴权规则，每一处都是试出来的：

鉴权接口要 Cookie + Bearer 两个都带。 只带 Cookie，接口返回「非项目成员」------这个报错很有误导性，你以为是权限问题，实际上只是少了个头。Bearer 的 token 就在 Cookie 的 access_token 字段里，拆出来重新拼一次就行。
CDN 资源必须有 Origin。 只给 Referer 会 403。这个坑我排查了挺久，因为浏览器发请求时自动带 Origin，你根本意识不到它是必需的。
密码分享是两层。 GET /api/sharings/:id 遇到密码保护会返回 403「请输入密码！」，得先 POST /state-keys 换一个 key，再以 state-key 头重新请求。换到的 key 有有效期，服务端会在响应里给 expires，我做了缓存。

这里还有一个特别阴间的细节：带着 Cookie 去访问密码分享时，服务端返回的是「您当前暂无权限」而不是「请输入密码」。你没法从这一次请求判断到底是缺密码还是真没权限。

我的处理是：先做一次不带 Cookie 的探测请求 。如果探测拿到 403 + 请输入密码，就说明是密码问题，提示补密码；否则才是真的没权限。多一次请求，换一个准确的报错。

6.2 图层树其实是拼出来的

拿到 meta_url 指向的那份 JSON 之后，我发现结构比想象中难缠：

layers 和 groups 是两个独立的扁平数组 ，真实层级只存在于每个节点的 parent_id 字段上。直接拼接，你会得到一堆没有父子关系的散图层------数量对得上，结构全错。

所以第一步是用 parent_id 重建整棵树，画板自身的 object_id 是根节点。

第二步是排序。兄弟节点必须按 index 升序排，因为 index 是全局绘制顺序 。不排序的话，layers 与 groups 直接拼接的后果是：所有分组都被推到所有形状后面。实测某个画板 6 个组全部跑到最底层，层叠关系彻底错乱，做出来的页面就是「导航被内容盖住」。

但这里有个反直觉的地方：index 是全局的，子节点的 index 可能小于父组（父 29，子 24~28）。所以它只能用于兄弟之间排序，绝不能拿来判断父子关系。

第三步是校正盒子。组图层的 rect 经常不可信：

空组返回 0×0，拿它布局必然错位
有的组直接报整屏尺寸
更离谱的是子层比父组还大（子 368 报 750×1612，父组 764 报 388×180）

我的处理不是偷偷改数，而是标注可信度 ：用可见子层的并集算出真实内容框，然后把 rectConfidence 标成 "low"，同时给出推定的 sliceRect。调用方自己决定信谁。静默修正数据比给错数据更危险。

顺带一提，rect 已经是相对画板的绝对坐标，不需要逐层累加。这点省了不少事。

6.3 图片：从 OSS 签名直链到 CDN 图片处理

切图清单里给的是 OSS 签名地址，直接 GET 会 AccessDenied。规律是：把它换到 cdn4.codesign.qq.com 域名，并追加 imageMogr2 参数，才能下载。

imageMogr2 是腾讯云的图片处理能力，挂在 URL 后面就能用。必须带 imageMogr2/ 前缀 ，裸写 ?thumbnail/208x 是无效的。可用的操作：

操作	效果
`cut/WxHxXxY`	按像素精确裁剪
`thumbnail/<W>x`	等比缩放到指定宽，支持放大（750 → 1500 实测可行）
`format/png｜jpg｜webp`	格式转换
`quality/<1-100>`	jpg/webp 质量

可以任意组合，比如 cut/675x236x39x872/thumbnail/1350x/format/webp，一次请求完成「裁剪 + 缩放 + 转格式」。

这套机制的妙处在于：所有像素操作都在云端完成，本地不跑任何图像库 。依赖只有 @modelcontextprotocol/sdk 和 zod 两个，安装体积小、启动快、跨平台没有原生模块的麻烦。

当然也有坑，两个都很致命：

坑一：重复的 format 只认第一个。 format/png/format/webp 返回的仍然是 PNG，不报错，就是静默失效。而我的 toCdnUrl 默认会挂上 format/png，所以指定 webp 的时候必须替换掉已有的 format，而不是追加。这个 bug 挺隐蔽的，因为图片确实下载下来了，只是格式不对。

坑二：svg 不能碰。 矢量格式做任何 imageMogr2 操作都会 400 InvalidImageFormat。代码里按导出格式判断，svg 原样返回。

6.4 倍率这件事，算术不难，语义难

核心换算只有一行：

ts 复制代码

const DESIGN_BASE = 750;
const CSS_BASE = 375;

// cssScale 换算到设计稿基准
designScale = cssScale * (CSS_BASE / DESIGN_BASE);  // 即 × 0.5

cssScale: 2 → 相对设计稿是 1 倍 → 落盘宽 = 图层设计宽 × 1 = 750px。对上了。

然后是三档策略：

native ：挑这个图层倍率最高的那一档导出，不缩放，原样落盘
指定倍率 ：精确命中最好；没有的话就近取不超过目标 的最高档，再让服务端用 thumbnail 缩放到目标宽度
targetWidth：优先级最高，直接按给定像素宽缩放

关键在于：不管走哪条路，落盘尺寸永远等于目标尺寸 ；同时如实上报三个字段------sourceScale（源图本来多少倍）、targetScale（你要的）、resampled（有没有被重采样过）。降级了就告诉用户降级了，不静默替换。

文件名里的倍率用的也是重采样后 的实际值，所以 图标@2x.png 打开就是 750px 宽，名实相符。

6.5 改名这件小事，其实不小

v2 我把文件名做了三件事：

统一带倍率后缀 ：图标@2x.png
可选 ASCII 化 ：asciiNames: true 把「图标」转成 icon，中文在 CI、静态服务器、URL 编码链路上都是隐患。做法是不引拼音库（多一个依赖、结果还不可控），常见 UI 词走内置映射（图标→icon、按钮→btn、弹窗→dialog、遮罩→mask...），匹配不上就用 layer-<objectId> 兜底。中文原名保留在清单里，不丢信息。
前缀分组 ：prefix: "item" → item-icon@2x.png

另外 sanitizeFilename 处理了 Windows 的保留名（CON、NUL、COM1...）和尾部点/空格------这些字符写文件会直接失败，跨平台工具必须照顾到。

6.6 每次下载都留一份清单

design_download_slices 和 design_export 都会在输出目录写两份清单：

codesign-manifest.json ------ 程序读
codesign-manifest.csv ------ 带 UTF-8 BOM，Excel 和 PowerShell 的 Import-Csv 直接打开不乱码

清单的主键是 ref（s1、s2...）和 objectId，中文图层名和最终文件名只是附带信息。原因很实际：同名图层靠 _2/_3 后缀根本猜不出对应关系，而中文名在终端里又容易出问题。

说到终端乱码，这算是 Windows 用户的固定节目：文件内容是 UTF-8 的，乱码来自终端代码页。PowerShell 里先 chcp 65001，或者换 Windows Terminal，就正常了。

6.7 并发、重试与超时

画板解析和切图下载都走固定并发池（默认 4，可配 1--16），不会一个一个串行等
每个请求带超时（默认 30s）
5xx 和 429 指数退避重试两次；4xx 是确定性失败，直接返回，不白等

这里有个 Node 的坑：AbortSignal.timeout() 抛的是 TimeoutError，不是你熟悉的 AbortError。两者都得认，否则超时会被当成未知网络错误，提示信息就没法看了。

七、踩坑实录

写这个东西的过程，基本就是跟 CoDesign 的数据格式斗智斗勇的过程。挑几个最有代表性的，都是真实设计稿上实测出来的。

slices_count 元数据是错的。 接口返回 0，切图清单里实打实 13 条。所以现在以清单长度为准，原始值另存到 slicesCountReported 里留档。

assetsDownloadable 也不可信。 实测有设计稿这个字段为 false，但切图全部能正常下载。所以不因为这个字段提前拒绝，直接试着下，真下不了再报错。

颜色 alpha 有两个单位。 普通填充是 0--1，半透明遮罩会返回 a: 100，配一个 color-hex: "#000000 10000%"，连 css-rgba 都是非法的 rgba(0,0,0,100)------浏览器会把这一整条丢弃。大于 1 的一律按百分比处理，统一归一化。

字号要取 impliedFontSize，不是 textStyle.size。 后者是排版原始值，会随图层缩放，两者实测能差 15% 以上。更阴的是：某些图层返回的字号不是数字，而是 { value: 22, units: "pointsUnit" } 这种对象。只认裸数字的话，结果就是 font-size: NaNpx。

fontCaps: "allCaps" 是误报。 它在线上数据里普遍出现在越南语和普通文本上，根本不是真的大写。CoDesign 自己的 css 字段也不输出 text-transform。所以不能据此加 text-transform: uppercase，我直接硬编码成了 allCaps: false。

文本对齐的真源在段落层。 paragraphStyleRange[].paragraphStyle.align 才是权威，图层级的 l.textAlign 只是兜底------同一段文本的不同片段可以有不同的对齐。

正文内容在 textKey 里。 图层名只是设计工具里的标签，跟实际文字没关系。

original_path 和 preview_path 指向同一个文件。 都是全分辨率合成图，所以按区域裁剪直接拿它当源，不用另找。

八、边界在哪

该说的都说清楚，免得装上之后失望。

没有切图的位图图层，拿不到透明图。 前面提过了，这不是实现问题，是数据源就没有。composite 能给你一张按位置裁好的图，但它带着被遮挡的底层内容。

这是对未公开接口的逆向实现。 腾讯哪天改接口或加风控，它就可能挂。遇到异常先确认网页端是否正常，然后提 issue。

密码解不开权限。 分享密码只能解锁「分享内容」这一层。如果 Cookie 对应的账号本身不在设计稿所属团队里，密码对了也一样提示无权限。

只能读，不能写。 不回写设计稿、不做评论、不改图层。纯读取。

别拿来批量抓。 这工具是给「我要还原这个页面」用的，不是爬虫。跑的时候有并发限制，请遵守 CoDesign 的服务条款。

九、自己跑一份

不想用 npx 的话：

bash 复制代码

git clone https://github.com/geniyangge/codesign-mcp-server.git
cd codesign-mcp-server
pnpm install
pnpm run build

.mcp.json 里改成绝对路径：

json 复制代码

{
  "mcpServers": {
    "codesign": {
      "command": "node",
      "args": ["/path/to/codesign-mcp-server/dist/index.js"],
      "env": { "CODESIGN_COOKIE": "你的 Cookie" }
    }
  }
}

Windows 路径记得用正斜杠："D:/path/to/dist/index.js"，反斜杠要转义。

代码结构、发版流程、以及更多实测细节都写在 <DEVELOPMENT.md> 里了，想提 PR 的话建议先看一遍。

配置项一览：

变量	必填	说明
`CODESIGN_COOKIE`	读图层/切图必填	CoDesign 登录 Cookie
`CODESIGN_PASSWORD`	否	默认分享访问密码
`CODESIGN_OUT_DIR`	否	切图输出目录，默认 `./codesign-assets`
`CODESIGN_CONCURRENCY`	否	并发数，默认 4，范围 1--16，被限流时调小
`CODESIGN_TIMEOUT_MS`	否	单次请求超时，默认 30000
`CODESIGN_SCALE`	否	v1 兼容项，v2 默认取原图，一般不用设

最后

如果你也在做设计稿还原，或者只是想让 AI 别再对着截图瞎猜，装上试试：

bash 复制代码

claude mcp add codesign --scope user \
  -e CODESIGN_COOKIE="你的 Cookie" \
  -- npx -y codesign-mcp-server

然后对着你的设计稿说一句：

复制代码

帮我还原这个设计稿 <链接>

用着顺手的话，去仓库点个 star：https://github.com/geniyangge/codesign-mcp-server

遇到问题、发现新坑，欢迎提 issue ------ 尤其是那种「接口字段实际不可信」的坑，每修一个，工具就稳一分。

最后一句话想对设计同学说：如果某个图层你希望它被完美还原，请把它标记成切图。 这一下点击，能让前端少裁二十张图。

补记：CoDesign 已公布退市安排，2028 年底停止服务

写到这里，还有一件事要交代：腾讯云已于 2025 年 9 月 15 日 发布《【腾讯 CoDesign】产品退市公告》，涉及 CoDesign 设计协作平台的基础版、专业版和企业版。官方给出了三个时间节点：

阶段	日期	影响
停止销售（EOM）	2025 年 12 月 31 日	停止新购，续订时长不得超过最终停止服务日期
停止全面支持（EOSS）	2026 年 6 月 30 日	停止新购、续订、变配，不再发布新的安全补丁和错误修复
停止服务（EOMS）	2028 年 12 月 31 日	所有功能和服务停止，产品控制台不可访问，实例资源释放

截至本文撰写的 2026 年 11 月 7 日，CoDesign 已经过了停止全面支持的节点，最终停服时间则是 2028 年 12 月 31 日。现在仍能打开设计稿，不代表产品还会继续获得安全补丁和问题修复。

手头还有项目在用 CoDesign 的话，设计资料可以现在就开始归档：源文件和完整资料按官方提供的方式备份，业务项目用到的预览图、切图、素材清单和还原规格也留一份。别等到链接失效，才发现代码里引用的素材没存全，交接文档里只剩一条设计稿链接。

这个 MCP 在剩余服务期里的用途也很明确：把已有设计稿中的开发依据取出来，落到正在维护的项目里。它依赖 CoDesign 的在线服务和内部接口，平台停服后无法继续在线读取，也不能替代官方的完整备份和迁移工具。 还在使用这些设计稿的团队，趁着服务可用把页面开发和资料交接做好，会踏实很多。

codesign-mcp-server 2.0.0 震撼发布：给你的 AI 装一只眼睛，让它直接读懂腾讯 CoDesign 设计稿

写在前面

一、MCP 是什么，为什么不是「写个脚本让 AI 跑」

二、五分钟装好

2.1 写配置

2.2 抠 Cookie

2.3 重启并确认

三、第一次实战

几个高频问法

四、五个工具，什么时候用哪个

五、2.0.0 到底改了什么

5.1 默认取原图，不再偷偷降采样

5.2 「2 倍图」这个词，被拆成了两个参数

5.3 上下文是有限资源，得省着花

5.4 从 v1 迁过来

六、原理拆解：我是怎么把这条路打通的

6.1 CoDesign 没有开放 API

6.2 图层树其实是拼出来的

6.3 图片：从 OSS 签名直链到 CDN 图片处理

6.4 倍率这件事，算术不难，语义难

6.5 改名这件小事，其实不小

6.6 每次下载都留一份清单

6.7 并发、重试与超时

七、踩坑实录

八、边界在哪

九、自己跑一份

最后

补记：CoDesign 已公布退市安排，2028 年底停止服务