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

A word of convenience: throw the CoDesign link to Claude Code / Cursor, and it will look at the image, measure the spacing, cut the image, and write CSS by itself. There is no need for you to take screenshots, no need for hand-written annotations, and no need for you to open the preview image and cut it one by one according to the bounding box.

Warehouse address: https://github.com/geniyangge/codesign-mcp-server
npm package name:codesign-mcp-server

---

write in front

When I was making this tool, I was stuck on a very specific thing: I had a 750-wide, 86-layer mobile design draft that I wanted to restore to an H5 page.

The process is straightforward – AI is not bad at writing CSS. the problem is that itCan’t see。

I posted a screenshot, and it could only guess based on the screen: “The padding here is about 16px” and “This rounded corner is about 8px.” It’s okay to guess 70% to 80%, but when it comes to restoring the design draft, 70% is unqualified. The difference between 12 and 14 is two pixels, and the difference between 24 and 22 is two pixels. There are dozens of places on one page. It looks awkward to the naked eye, and you can’t tell what’s wrong.

The truly accurate numbers are all in CoDesign: the coordinates, font size, line height, font weight, color value, rounded corners, borders, shadow parameters, and cutting resources of each layer. They do exist, it’s just—

• On the web page, you need to log in to view it.
• There is no open API, just a bunch of /api/ Internal interface at the beginning
• The layer tree is a compressed structure. If you don’t rebuild it, you will get a bunch of scattered layers with no parent-child relationship.
• The cut picture is a direct link to the OSS signature, which can be downloaded directly. AccessDenied

So there was this project: to open up all this link and make it an MCP service, and let AI pick it up by itself.

---

1. What is MCP? Why is it not “write a script and let AI run”

MCP (Model Context Protocol) is a protocol that allows models to call external capabilities. The implementation is very simple: a local stdio process communicates with the client (Claude Code, Cursor, etc.) through JSON-RPC.

• When the client starts it asks: What tools do you have? → Server returns tools/listincluding the name, description, and parameter schema of each tool
• When the model decides to call → send tools/callafter the server executes it, the result is returned to the model as text.

So simple. But it’s better than “writing a script and letting the AI ​​do it by itself” curl“The strength lies in three points:

1. Parameters come with schema. model knows cssScale is a number,regions is an object array,format only accept png/jpg/webpwill not spread nonsense.

2. The tool description itself is a prompt word. I am here design_get The description is written for the model, such as “By default, only the first artboard will be returned. If you need all, please upload allScreens: truethe entire design draft may be hundreds of KB in one return.” When the model reads this sentence, it will use the appropriate parameters at the right time.

3. Errors can be “translated.” I think this is the most underestimated. The error reported by a normal script is 403the model can only stare or guess. I translated all CoDesign mistakes into actionable suggestions, such as:

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

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

When the model sees this, he knows what to do next and can tell me.The error message is a document for AI to readthis sentence is not rhetoric.

---

2. Installed in five minutes

2.1 Write configuration

existThe project you want to write code forCreate one in the root directory .mcp.json：

 "namePattern": "图标

You can also use the command line to do it (if you want it to take effect globally, just --scope user keep):

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

2.2 Picking Cookies

Reading layer annotations and downloading cutouts require logging in. Just copy the steps:

1. Browser login
2. Open the target design draft
3. F12 Open developer tools → Network panel
4. Refresh the page and click on any item /api/ Beginning request
5. Right click → Copy → Copy as cURL (bash)
6. try to find -b '...' Copy and paste the entire paragraph in quotation marks after CODESIGN_COOKIE

in cookies access_token Generally valid for 30 days. If it expires, a 401 will be reported. Just try it again.

If you don’t want to write the cookie clear text into the configuration file,.mcp.json written in "CODESIGN_COOKIE": "${CODESIGN_COOKIE}"and then put the value in the system environment variable:
For Windows setx CODESIGN_COOKIE "..."(Restart the terminal after setting), macOS/Linux write ~/.zshrc or ~/.bashrc。

2.3 Restart and confirm

Configuration completedMust restartclient and enter /mcp：

codesign  ✓ connected (5 tools)

Just see connected. in the case of failedmost likely because there are line breaks in the cookie or the quotation marks are not removed.

---

3. The first actual combat

The easiest way to use it is to say:

帮我还原这个设计稿 /app/s/<分享ID>

Next, the AI ​​will complete this series of actions by itself, while you drink coffee next to it:

order	call	Why is this order
1	design_download_previews	Get the preview of the whole board firsttake a lookdetermine whether this is a list page or a details page, and whether the navigation is at the top or bottom
2	design_get	Get structured layer data: who is whose child node, who is on top of whom, and the coordinates of each box
3	design_download_slices	Download bitmap resources such as icons, avatars, and background images to the local
4	design_get_spec	Convert 750 design drafts into 375 CSS widths and directly generate available style sheets
5	—	write code

Steps 1 and 2 are complementary: the preview image is responsible for “likeness”, and the layer data is responsible for “accuracy”. If only pictures are given, the model relies on guessing; if only data is given, the model can easily understand the structure. If the two are given together, the difference in restoration quality is in magnitude.

design_get The returned thing looks like this (v2 default summary View, I cropped a section):

{
  "share": {
    "id": 1234567,
    "title": "首页改版",
    "team": "XX 设计组",
    "permissions": { "commentable": true, "inspectable": true, "assetsDownloadable": true }
  },
  "screens": [
    {
      "id": 889,
      "name": "首页-默认",
      "size": "750×1624",
      "preview": "
      "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"]
        }
      ]
    }
  ]
}

Several fields are worth mentioning separately, because they were created by me on the real design draft:

• z yesglobal draw orderthe bigger it is, the higher it is. Don’t expect array order to equal stack order.
• flags is the layer mark.bitmap:slice It means “This is a bitmap, but cutouts are available”;bitmap:no-slice means “bitmap without cutting” – the latter will be listed together unreconstructablethat’s the only place where you need human intervention.
• depth + parentId Expression level.No more spaces in front of names.Yes, the old version did that, and the result was that matching by name and deduplication were all unreliable.

Several high-frequency questions

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

To make the results more stable, there are two tips:

1. If you can specify the artboard, do so. If you include the artboard ID in the link, or simply state the artboard name, you will save a lot of context than not adding it, and you won’t get the wrong artboard.
2. The magnification of speaking human words. When you say “2x image”, the tool will understand it as cssScale: 2that is, 375 × 2 = 750px – 2 times the front-end context. This point is specially distinguished in v2, which will be discussed below.

---

Four or five tools, when to use which one?

tool	what to do	typical timing
design_get	Layer structure: coordinates, levels, stacking order, style details	You need it every time, it’s the main entrance
design_download_previews	The entire drawing board allows AI to “see” the design	Take a look before writing the code
design_download_slices	Download labeled cutouts + lists in batches	When you want to implement image resources
design_export	Exportarbitrarylayer or any area	There are layers but no markings on the cutout, so be careful
design_get_spec	Layer tree → 375 wide CSS spec	Want a ready-made style sheet

The first three are “According to what is given in the design draft”, and the last two are “Whatever is not given in the design draft, you have to figure it out yourself.”

design_export This is the one I most want to talk about separately, because the problem it solves is very specific: there are often a bunch of bitmap layers (smart objects, picture fills) in the design draft, and the designer does not mark them as cutouts. In the past, this kind of layer tool could only tell you “cannot be restored”. You could only open the preview yourself and manually crop according to the bounding box.

Now it is treated as a three-level downgrade and returned to the body. tier It will indicate which way to take:

tier	Condition	source	transparent?
slice	Layers have cuts	Original cut image + server-side image processing	✅ Transparent
composite	There is no cutting picture, the box is valid	Cut from the drawing board composition according to the box	❌ opaque
fail	There is no cutout and the box is empty	—	—

and design_get will be in unreconstructable in arrayput everyThe uncut bitmap layers are listed, each one comes with a suggestedRegionthe coordinates are the original pixels of the design draft, which can be directly pasted to design_export of regions inside:

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

I just want to import in batches by name and don’t want to copy the objectId one by one:

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

Notice composite The opacity is not me being lazy. CoDesign does not provide original resources at the layer level at all – 42 bitmap layers were measured.exportables All empty,pixels It’s just a Boolean tag, there is no image URL in the layer, and there is no layer rendering interface. Cropping into a composite image will inevitably bring with it the underlying content that is obscured. If you want a clean transparent image, you can only ask your design classmates to mark the layers as cutouts in CoDesign.

---

5. What has been changed in 2.0.0?

There are three changes in this edition that are not big but will change your existing habits. I have listed them all clearly.

5.1 The original image is taken by default, no more secretly downsampling

v1 defaults to 2 times when the magnification is not transmitted. It sounds reasonable, but it’s actually a pitfall: the source image was originally 3 times larger, but you just “defaulted” and the quality dropped by a notch, and no one told you.

v2 changed to native mode: If you don’t pass the magnification, just take the original image that comes with the layer, and don’t move a single pixel. If you want a magnification, say it explicitly.

5.2 The word “2x graph” is split into two parameters

This is the design decision I think is most worth mentioning. because“2x image” is ambiguous in the Chinese front-end context：

• The front-end says “requires 2 times the image”, which means 2 times the CSS size：375 × 2 = 750px
• In the context of the design draft, “2 times” refers to 750 2 times the design draft：750 × 2 = 1500px
• Exactly double the difference

If you do it vaguely, the result will be rework every time. So v2 is split into two parameters, and the benchmark is written in the name:

parameter	benchmark	example	Drop width
cssScale	CSS wide (375)	cssScale: 2	750px – “2x image” as mentioned on the front end
scale	Design draft width (750)	scale: 2	1500px – actually 4 times more for CSS
targetWidth	directly to pixels	targetWidth: 500	500px

If two simultaneous transmissions are made, an error will be reported directly, without any guessing about “who will prevail”.targetWidth Highest priority.

5.3 Context is a limited resource and must be spent sparingly.

This item is not highlighted in the changelog, but it may be the biggest improvement in the experience of v2.

When it was first made,design_get A complete two-artboard design draft can be returned 240KB JSON. What concept? The dialogue window will explode directly, and the model will either be cut off or start gibbering nonsense.

So v2 has made a complete set of “pay-as-you-go”:

• By default, only the first artboard is returnedall must be passed explicitly allScreens: true
• default summary viewgive only the fields necessary to position the layer; pass style details view: "flat"you need to pass the nested structure view: "tree"
• subtreeId View only a certain group
• types Only look at certain types of layers, such as ["text"] Just text
• fields Field projection
• offset / limit Pagination
• Results exceeding 8KB are automatically compressed into a single line of JSON ——Indentation has no meaning for machine consumption and is a pure waste of tokens.

Actual measurement on the same drawing board:

means	Effect
Default summary + single artboard	243KB → 23.3KB
types: ["text"]	10.4KB / 86 layers → 11 layers
subtreeId Torikosori	1.3KB
limit: 10 Pagination	10.3KB

Remove the indentation of a large payload, 484KB → 200KB, saving 59%. These are real money contextual budgets.

5.4 Migrated from v1

v1 writing method	v2 changed to
scale: 2 Want to get 2x the front-end image?	cssScale: 2
expect layers is a nested tree	The default is flat, you need to nest it view: "tree"
Expect to return all artboards	By default, only the first block is transmitted, all allScreens: true
Determine the level by the space before the name	use depth + parentId
cut picture call 图标.png	Call now 图标@2x.pngthe magnification suffix is ​​unified.

Old files will not be renamed automatically, just try again.

---

6. Principle dismantling: How did I open up this road?

This part is for people who want to understand the implementation, or want to change something themselves. The technology stack is very simple: TypeScript + official MCP SDK + zod, without any framework. After packaging, it is a Node script.npx You can run in one line.

6.1 CoDesign has no open API

Then you can only look at what the web page itself is using. The captured interfaces are roughly as follows:

interface	Authentication
/api/sharings/	No login required; sharing with password requires additional state-key head
/api/sharings//state-keys	POST {password} → {key, expires}
/api/designs/	Cookie + Authorization: Bearer(for background link)
/api/designs//screens/	Actual measurementOnly using cookies will return “non-project member”must explicitly bring Bearer
cdn4.codesign.qq.com/meta/...(layer JSON)	need Origin:
cut picture	Same as above, bitmap must bring ?imageMogr2/...svg must not be brought

Three independent authentication rules, each of which is tried and tested:

• The authentication interface requires both Cookie + Bearer. With only cookies, the interface returns “non-project member” – this error is very misleading. You think it is a permissions issue, but in fact it is just missing. Bearer’s token is in Cookie’s access_token field, just take it out and put it together again.
• CDN resources must have Origin。 only give Referer Will 403. I have been troubleshooting this pitfall for a long time, because the browser automatically includes Origin when sending requests, and you don’t even realize that it is required.
• Password sharing is two-tiered. GET /api/sharings/:id When encountering password protection, 403 “Please enter password!” will be returned. You must first POST /state-keys Change another one keyand then state-key header to re-request. The swapped key has a validity period, which the server will provide in the response. expiresI did caching.

Here is another particularly underworld detail:When using cookies to access password sharing, the server returns “You currently do not have permission” instead of “Please enter your password.”. You can’t judge from this request whether it is a lack of password or a lack of permission.

My solution is: do it onceProbe request without cookies. If the detection is obtained 403 + 请输入密码it means it is a password problem and prompts you to fill in the password; otherwise, you really don’t have permission. Make one more request and get an accurate error report.

6.2 The layer tree is actually spelled out

get meta_url After pointing to the JSON, I found that the structure was more difficult than imagined:

layers and groups yesTwo independent flat arraysthe real level only exists in each node parent_id on the field. If you splice them directly, you will get a bunch of scattered layers with no parent-child relationship – the number is right, but the structure is all wrong.

So the first step is to use parent_id Rebuild the entire tree, the artboard itself object_id is the root node.

The second step is sorting. Sibling nodes must press index Sort in ascending order because index yesglobal draw order. If not sorted,layers and groups The consequence of direct splicing is that all groupings are pushed behind all shapes. It was actually measured that all 6 groups of a certain drawing board went to the bottom layer, and the stacking relationship was completely messed up. The resulting page was “navigation covered by content”.

But here’s something counterintuitive:index It is global, and the index of the child node may be smaller than the parent group.(Father 29, Son 24~28). Therefore, it can only be used for sorting between brothers, and can never be used to judge the relationship between father and son.

The third step is to calibrate the box. group layer rect Often not trustworthy:

• Empty group return 0×0the layout will inevitably be misplaced
• Some groups directly report the full screen size
• What’s even more outrageous isThe child layer is larger than the parent group(Child 368 reports 750×1612, parent group 764 reports 388×180)

My solution is not to secretly change the number;Mark credibility: Use the union of visible sub-layers to calculate the real content box, and then rectConfidence marked as "low"while giving the presumed sliceRect. The caller decides who to trust. Silently correcting data is more dangerous than giving wrong data.

By the way,rect AlreadyAbsolute coordinates relative to the artboardno need to accumulate layer by layer. This saves a lot of trouble.

6.3 Images: Direct link from OSS signature to CDN image processing

The OSS signature address is given in the cut list. You can directly GET it. AccessDenied. The rule is: change it to cdn4.codesign.qq.com domain name and append imageMogr2 parameters to download.

imageMogr2 It is the image processing capability of Tencent Cloud, which can be used by hanging it behind the URL.Must bring imageMogr2/ prefixnaked writing ?thumbnail/208x is invalid. Available operations:

operate	Effect
cut/WxHxXxY	Pixel-accurate cropping
thumbnail/x	Scale proportionally to the specified width,Support zoom(750 → 1500 is feasible in actual testing)
format/png｜jpg｜webp	format conversion
quality/<1-100>	jpg/webp quality

Can be combined in any way, such as cut/675x236x39x872/thumbnail/1350x/format/webpcomplete “cropping + scaling + formatting” in one request.

The beauty of this mechanism is:All pixel operations are completed in the cloud, and no image library is run locally.. Depends only on @modelcontextprotocol/sdk and zod Two, small installation size, fast startup, cross-platform without the trouble of native modules.

Of course there are pitfalls, both of which are fatal:

Pitfall 1: Duplicate format Only recognize the first one. format/png/format/webp The returned PNG is still PNG. If no error is reported, it will fail silently. And mine toCdnUrl Will hang up by default format/pngso when specifying webp, you mustreplaceDrop the existing format instead of appending it. This bug is quite subtle, because the image was indeed downloaded, but in the wrong format.

Pitfall 2: svg cannot be touched. Do anything in vector format imageMogr2 Know how to operate 400 InvalidImageFormat. The code is judged according to the export format, and svg is returned as is.

6.4 The matter of magnification is not difficult in arithmetic but difficult in semantics.

The core conversion has only one line:

const DESIGN_BASE = 750;
const CSS_BASE = 375;

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

cssScale: 2 → The relative design draft is 1 times → The placement width = layer design width × 1 = 750px. Right.

Then there are three strategies:

• native:Select this layerHighest magnificationExport the file, without scaling, and place it as it is.
• Specify magnification: Accurate hit is the best; if not, get it from the nearest locationDon’t exceed targetThe highest level, and then let the server use thumbnail Scale to target width
• targetWidth: The highest priority, directly scale according to the given pixel width

The key is: no matter which way you go,The placement size is always equal to the target size;Report three fields truthfully at the same time——sourceScale(How many times the source image is original),targetScale(what you want),resampled(Has it been resampled?) If downgraded, the user will be notified of the downgrade and will not be replaced silently.

The magnification in the file name is also used.After resamplingthe actual value of , so 图标@2x.png When opened, it is 750px wide, which is consistent with the name.

6.5 Changing your name is not a trivial matter.

v2 I did three things with the filename:

1. Unified with magnification suffix：图标@2x.png
2. Optional ASCIIization：asciiNames: true Convert “icon” to iconChinese are hidden dangers on CI, static servers, and URL encoding links. The approach is not to reference the Pinyin library (one more dependency, the result is still uncontrollable), common UI words use the built-in mapping (icon→icon, button→btn, pop-up window→dialog, mask→mask…), use it if there is no match. layer- reveal all the details. The original Chinese name is retained in the list and no information is lost.
3. prefix grouping：prefix: "item" → item-icon@2x.png

in addition sanitizeFilename Handled Windows reserved names (CON、NUL、COM1…) and trailing dots/spaces – writing files with these characters will directly fail, and cross-platform tools must take care of them.

6.6 Keep a list for each download

design_download_slices and design_export Two lists will be written in the output directory:

• codesign-manifest.json ——Program reading
• codesign-manifest.csv ——With UTF-8 BOM, Excel and PowerShell Import-Csv Open directly without garbled characters

The primary key of the list is ref（s1、s2…)and objectIdthe Chinese layer name and final file name are just incidental information. The reason is very practical: layers with the same name depend on _2/_3 The corresponding relationship cannot be guessed at all from the suffix, and Chinese names are prone to problems in the terminal.

Speaking of terminal garbled characters, this is a fixture for Windows users: the file content is UTF-8, and the garbled characters come from the terminal code page. PowerShell first chcp 65001or change to Windows Terminal, and it will be normal.

6.7 Concurrency, retries and timeouts

• Both drawing board parsing and cut image downloading use the fixed concurrency pool (default 4, configurable 1–16), and will not wait one by one serially.
• Each request has a timeout (default 30s)
• 5xx and 429 Exponential backoff retries twice;4xx It is a deterministic failure and returns directly without waiting in vain.

There is a pitfall of Node here:AbortSignal.timeout() Throwing is TimeoutErrornot something you are familiar with AbortError. Both must be recognized, otherwise the timeout will be regarded as an unknown network error and the prompt message will be unreadable.

---

7. Record of Trampling on Pitfalls

The process of writing this thing is basically a battle of wits and courage with CoDesign’s data format. Pick a few of the most representative ones, all measured on real design drafts.

slices_count The metadata is wrong. The interface returns 0, and there are actually 13 items in the picture cutting list. So now the list length prevails and the original value is saved to slicesCountReported Leave a file here.

assetsDownloadable Not believable either. According to the actual measurement, the field of design draft is falsebut the cut figureallCan be downloaded normally. So don’t reject it in advance because of this field, just try to download it. If it really fails, you will get an error.

Color alpha has two units. Normal padding is 0–1, translucent masks will return a: 100with one color-hex: "#000000 10000%",even css-rgba All illegal rgba(0,0,0,100)–The browser will discard this entire entry. Anything greater than 1 will be processed as a percentage and normalized uniformly.

Font size to choose impliedFontSize,no textStyle.size。 The latter is the original value of typesetting and will scale with the layer. The actual measurement difference between the two can be more than 15%. What’s even more sinister is that the font size returned by some layers is not a number, but { value: 22, units: "pointsUnit" } this kind of object. If we only recognize naked numbers, the result is font-size: NaNpx。

fontCaps: "allCaps" It’s a false alarm. It appears commonly in Vietnamese and normal text in online data, and is not really capitalized at all. CoDesign’s own css Fields are not output either text-transform. Therefore, it cannot be added based on this text-transform: uppercaseI directly hardcoded it into allCaps: false。

The true source of text alignment is at the paragraph level. paragraphStyleRange[].paragraphStyle.align It’s the authority, the graph level l.textAlign Just to give you the bottom line – different fragments of the same text can have different alignments.

The text content is in textKey inside. The layer name is just a label in the design tool and has nothing to do with the actual text.

original_path and preview_path point to the same file. They are all full-resolution composite images, so you can crop them by area and use them directly as the source without having to look for them elsewhere.

---

8. Where is the boundary?

Make it clear what you need to say to avoid disappointment after installation.

If you don’t cut the bitmap layer, you can’t get the transparent image. As mentioned before, this is not an implementation problem, but the data source does not exist.composite It can give you a picture that is cropped according to position, but it contains the underlying content that is obscured.

This is a reverse implementation of an undocumented interface. The day Tencent changes its interface or adds risk control, it may fail. If you encounter an exception, first confirm whether the web page is normal, and then raise an issue.

The password cannot unlock the permission. Sharing passwords can only unlock the “shared content” layer. If the account corresponding to the cookie is not in the team to which the design draft belongs, even if the password is correct, it will still prompt that there is no permission.

Can only read, not write. Don’t write back design drafts, make comments, or change layers. Pure read.

Don’t use it to catch in bulk. This tool is for “I want to restore this page”, not a crawler. There are concurrency limits when running, please abide by CoDesign’s terms of service.

---

9. Run a copy yourself

If you don’t want to use npx:

git clone 
cd codesign-mcp-server
pnpm install
pnpm run build

.mcp.json Change it to an absolute path:

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

Remember to use forward slashes in Windows paths:"D:/path/to/dist/index.js"backslashes must be escaped.

The code structure, release process, and more actual measurement details are all written in DEVELOPMENT.md. If you want to submit a PR, it is recommended to read it first.

List of configuration items:

variable	Required	illustrate
CODESIGN_COOKIE	Required for reading layers/cutting images	CoDesign Login Cookie
CODESIGN_PASSWORD	no	Default shared access password
CODESIGN_OUT_DIR	no	Cutting output directory, default ./codesign-assets
CODESIGN_CONCURRENCY	no	Number of concurrencies, default 4, range 1–16, decrease when current is limited
CODESIGN_TIMEOUT_MS	no	Single request timeout, default 30000
CODESIGN_SCALE	no	v1 compatibility item, v2 defaults to the original image, generally no need to set

---

at last

If you are also doing design draft restoration, or just want the AI ​​to stop guessing at screenshots, try installing it:

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

Then say this to your design draft:

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

If you find it useful, go to the warehouse and give it a star: https://github.com/geniyangge/codesign-mcp-server
If you encounter problems or discover new pitfalls, you are welcome to raise issues – especially the pitfalls where “interface fields are not actually trustworthy”. Every time one is fixed, the tool becomes more stable.

The last thing I want to say to my design classmates is:If you want a layer to be perfectly restored, mark it as a cutout. With this click, the front end can save twenty pictures.

---

Additional note: CoDesign has announced delisting arrangements and will cease services at the end of 2028

As I write this, there is one more thing to explain: Tencent Cloud has launched September 15, 2025Released the “[Tencent CoDesign]Product Delisting Announcement”, involving the basic version, professional version and enterprise version of the CoDesign design collaboration platform. The official gave three time nodes:

stage	date	Influence
End of Sale (EOM)	December 31, 2025	Stop new purchases, and the renewal period must not exceed the final service cessation date
End of Full Support (EOSS)	June 30, 2026	Stop new purchases, renewals, configuration changes, and no longer release new security patches and bug fixes
Out of Service (EOMS)	December 31, 2028	All functions and services are stopped, the product console is inaccessible, and instance resources are released.

As of this writing November 7, 2026CoDesign has passed the point of stopping full support, and the final time of outage is December 31, 2028. Just because the design draft can still be opened does not mean that the product will continue to receive security patches and bug fixes.

If you still have projects on hand using CoDesign, you can start archiving design data now: source files and complete data are backed up according to the official method, and a copy of previews, cutouts, material lists and restoration specifications used in business projects is also kept. Don’t wait until the link expires, only to find that all the materials referenced in the code are not saved, and there is only a link to the design draft in the handover document.

The purpose of this MCP in the remaining service period is also very clear: take out the development basis from the existing design draft and put it into the project under maintenance.It relies on CoDesign’s online services and internal interfaces. It cannot continue to be read online after the platform is stopped, nor can it replace the official full backup and migration tool. Teams that are still using these design drafts will feel much more at ease if they can complete page development and data handover while the service is available.