codesign-mcp
The codesign-mcp server integrates Tencent CoDesign into design-to-code workflows via the Model Context Protocol (MCP), enabling AI agents to access artboards, layer specs, preview images, and designer-exported slices from CoDesign sharing links.
Status & Login Management:
codesign_statuschecks runtime paths, browser state, and login status.codesign_loginopens a Chromium window for QR-code login with a persisted session.codesign_logoutcloses the browser and wipes the persistent profile (requires confirmation).Artboard Discovery:
list_artboardsresolves a CoDesign sharing URL into designs and artboards with metadata (IDs, names, sizes, image URLs,meta_url,slices_url) — the recommended first step for any design-to-code task.Specification Retrieval:
get_artboard_specfetches the officialmeta_urlJSON for a screen, including layer positions, text, fills, colors, CSS properties, groups, and slice metadata — the canonical source for implementing HTML/CSS from a design.Preview Images:
get_artboard_imageretrieves the full preview or cover image of an artboard for visual comparison (not for production slicing); can optionally save the file locally.Slice Downloads:
download_slicedownloads designer-exported slice assets from the official slice manifest by layerobject_id, with optional format (png, jpg, svg, etc.) and scale (1x, 2x, etc.) filters; saves files to the workspace artifacts directory.Diagnostics:
debug_collect_networkcollects a redacted network summary (no cookies, tokens, or response bodies) for debugging tool failures or unknown endpoints.Prompts & Resources: An
implement_codesign_pageprompt and acodesign://workflow/design-to-coderesource guide agents through a structured design-to-code workflow (list → spec → slices).
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@codesign-mcpList artboards from sharing link https://codesign.qq.com/s/abc123"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
codesign-mcp
English | 简体中文
Local MCP server for Tencent CoDesign sharing links. It exposes artboards, official layer specs, preview images, and designer-exported slices for design-to-code workflows.
Features
Read CoDesign sharing links through MCP tools.
List designs and artboards from a sharing URL.
Fetch official
meta_urlspecs with layers, groups, text, colors, CSS, and coordinates.Download designer-exported slice assets from the official slice manifest.
Copy the current CoDesign screen and layer selection to an Agent with the optional Tampermonkey userscript.
Keep login state in a persistent local Chromium profile.
Store runtime files in the caller workspace by default.
Provide a reusable MCP prompt and read-only workflow resource for design-to-code tasks.
Related MCP server: Figma Native MCP
Installation
Run directly with npm:
npx -y codesign-mcpOr install globally:
npm install -g codesign-mcp
codesign-mcpMCP Configuration
For most MCP clients, use the zero-config form:
{
"mcpServers": {
"codesign-mcp": {
"command": "npx",
"args": ["-y", "codesign-mcp@latest"]
}
}
}The server detects its workspace in this order:
CODESIGN_WORKSPACE_DIRINIT_CWD, which is normally the directory wherenpxwas launchedprocess.cwd()
Runtime files are written under the detected workspace:
<workspace>/.codesign-mcp/profile
<workspace>/.codesign-mcp/artifacts
<workspace>/.codesign-mcp/codesign-mcp.logThe default runtime directory is not created when the MCP server merely starts,
lists tools, or serves prompts/resources. It is created only when a tool needs
local state or artifacts, such as codesign_login, browser-backed CoDesign
reads, or downloads. Before that happens, default file logs go to stderr.
If CODESIGN_LOG_FILE is set explicitly, the server treats that path as an
explicit logging request and creates its parent directory when writing logs.
Use the codesign_status tool to inspect workspaceRoot and workspaceRootSource. If your MCP client launches servers from a global application directory instead of the project directory, set one of these explicitly:
{
"mcpServers": {
"codesign-mcp": {
"command": "npx",
"args": ["-y", "codesign-mcp@latest"],
"cwd": "F:/your-project"
}
}
}Or:
CODESIGN_WORKSPACE_DIR=F:/your-projectOptional environment variables:
CODESIGN_DATA_DIR=F:/your-project/.codesign-mcp
CODESIGN_PROFILE_DIR=F:/your-project/.codesign-mcp/profile
CODESIGN_ARTIFACTS_DIR=F:/your-project/.codesign-mcp/artifacts
CODESIGN_LOG_FILE=F:/your-project/.codesign-mcp/codesign-mcp.log
CODESIGN_IDLE_MS=600000
CODESIGN_KEEP_BROWSER=1
CODESIGN_LOG_LEVEL=infoTools
codesign_status: Show runtime paths, browser state, and profile state.codesign_login: Open a visible Chromium window for CoDesign QR-code login.codesign_logout: Clear the persisted profile.list_artboards: Resolve a CoDesign sharing URL into designs and artboards.get_artboard_spec: Fetch official CoDesignmeta_urlspecs with layers, text, colors, CSS, groups, and slice metadata. WithlayerObjectId,selectionScopecan belayer,subtree, orregion; selected responses include flat layers/groups, a hierarchy tree, selection bounds, and relative coordinates. OptionaltargetPlatformaccepts natural-language platform names such asweb,Android,安卓,iOS,微信小程序, ormini programand returns platform-adjusted metadata. OptionaltargetUnit,customScale,customWidth, andremBasePxmirror CoDesign's platform settings.get_artboard_image: Fetch preview or cover images for visual comparison.download_slice: Download designer-exported slice assets from the official slice manifest.debug_collect_network: Collect a redacted network summary for diagnosis.
Security Notes
Remote metadata and artifact downloads are restricted to https://codesign.qq.com and https://cdn*.codesign.qq.com. Unsupported hosts fail explicitly with REMOTE_URL_NOT_ALLOWED.
codesign_logout only clears a profile directory inside the configured runtime directory. Unsafe profile paths fail explicitly with PROFILE_DIR_UNSAFE.
Prompts
implement_codesign_page: Generate a structured design-to-code prompt for a full page or copied CoDesign selection. It guides an Agent to calllist_artboards,get_artboard_spec, anddownload_slicein the intended order.
Resources
codesign://workflow/design-to-code: Read-only workflow guidance for using the MCP tools without cropping preview screenshots or fabricating unavailable CoDesign data.
For design-to-code work, prefer this flow:
list_artboards -> get_artboard_spec -> download_slicePreview screenshots are for visual comparison, not for production slicing.
CoDesign AI Selection Userscript
The optional userscript adds a Copy for AI button beside the currently selected CoDesign layer. It reads the active screen and layer identifiers already present in the CoDesign page, then copies a structured Agent prompt. It does not make network requests or copy the sharing password.
Install Tampermonkey or another compatible userscript manager.
Open codesign-ai-selection.user.js and confirm installation.
Open a CoDesign sharing page in annotation mode and select a layer or group in the layer tree.
Click Copy for AI in the right inspector, then paste the copied prompt into an Agent that has
codesign-mcpconnected.Provide the sharing password separately when the link requires one.
The copied reference has this shape:
{
"type": "codesign-selection",
"sharingUrl": "https://codesign.qq.com/s/<PROJECT_ID>",
"screenId": "<SCREEN_ID>",
"screenName": "<SCREEN_NAME>",
"layerObjectId": "<LAYER_OBJECT_ID>",
"layerName": "<LAYER_NAME>",
"selectionScope": "region"
}selectionScope=region returns non-ancestor layers and groups fully contained by the selected bounds, which is useful when visually related elements are siblings rather than strict children. Use subtree when only the selected node's strict descendants are wanted. The script reports an explicit error if CoDesign changes the DOM selectors and the current selection cannot be read.
Design-to-Code Workflow Prompt
Before asking an Agent to implement a page from CoDesign, make sure the MCP server is connected. If the design requires login, call codesign_status first. When the profile does not exist or CoDesign is not logged in, call codesign_login, scan the QR code in the opened browser window, and then call codesign_status again to confirm the login state.
Use this prompt template with your Agent. Replace <PROJECT_ID> with the value after /s/ in the CoDesign sharing URL. If the sharing link does not require a password, remove the password line.
Implement the column page from this CoDesign design:
Link: https://codesign.qq.com/s/<PROJECT_ID>
Password: <PASSWORD_IF_REQUIRED>
Requirements:
1. First call the codesign-mcp list_artboards tool to get the artboard list.
2. Then call get_artboard_spec to get the official specification data. If the target platform is known, pass it as targetPlatform, for example `Android`, `iOS`, or `微信小程序`. If the user specifies custom platform settings, also pass targetUnit, customScale, customWidth, and remBasePx.
3. Unless the user explicitly requests an absolute/canvas-style implementation, translate the coordinates into semantic page structure and normal document flow before coding. Prefer Flexbox/Grid for page layout and avoid recreating the whole page as globally absolute-positioned layers. An explicit user layout requirement takes precedence over this default.
4. If the design contains designer-exported slice assets, prefer download_slice. Do not crop assets from the full-page preview image.
5. Use preview images only for visual comparison, not as production asset sources.
6. Implement the page in the column directory.Development
npm install
npm test
node scripts/stdio-smoke.mjsPublishing
This package is intended to be published from GitHub Actions using npm Trusted Publishing. Do not store long-lived npm tokens in the repository.
Before first publish:
Configure npm Trusted Publishing for this GitHub repository and
.github/workflows/publish.yml.Enable 2FA on npm for account and publishing protection.
Create and push a version tag, for example
v0.1.7, to trigger publication.
License
MIT
简体中文
English | 简体中文
面向腾讯 CoDesign 分享链接的本地 MCP 服务器。它为设计还原流程提供画板列表、官方图层标注、预览图以及设计师导出的切图资源。
功能
通过 MCP 工具读取 CoDesign 分享链接。
从分享链接获取设计稿和画板列表。
获取官方
meta_url标注数据,包括图层、分组、文字、颜色、CSS 和坐标。从官方切图清单下载设计师导出的切图资源。
通过可选油猴脚本,把当前 CoDesign 画板和图层选区复制给 Agent。
使用本地 Chromium profile 持久化扫码登录态。
默认把运行数据写入调用方项目目录。
提供可复用的 MCP 提示词和只读流程资源,服务于设计还原任务。
安装
直接通过 npm 运行:
npx -y codesign-mcp也可以全局安装:
npm install -g codesign-mcp
codesign-mcpMCP 配置
大多数 MCP 客户端可以直接使用零配置写法:
{
"mcpServers": {
"codesign-mcp": {
"command": "npx",
"args": ["-y", "codesign-mcp@latest"]
}
}
}服务器会按这个顺序判断工作区:
CODESIGN_WORKSPACE_DIRINIT_CWD,通常是启动npx时所在的目录process.cwd()
运行数据会写入识别到的工作区:
<workspace>/.codesign-mcp/profile
<workspace>/.codesign-mcp/artifacts
<workspace>/.codesign-mcp/codesign-mcp.logMCP 服务仅启动、列出工具或读取提示词/资源时,不会创建默认运行目录。
只有工具确实需要本地状态或产物时才会创建,例如 codesign_login、
需要浏览器访问 CoDesign 的读取工具,或下载资源工具。在此之前,默认文件
日志会写到 stderr。如果显式设置了 CODESIGN_LOG_FILE,服务会把它视为
明确的日志写入请求,并在写日志时创建对应父目录。
可以通过 codesign_status 工具查看 workspaceRoot 和 workspaceRootSource。如果 MCP 客户端从全局应用目录启动服务器,而不是从项目目录启动,可以显式设置其中一种:
{
"mcpServers": {
"codesign-mcp": {
"command": "npx",
"args": ["-y", "codesign-mcp@latest"],
"cwd": "F:/your-project"
}
}
}或者:
CODESIGN_WORKSPACE_DIR=F:/your-project可选环境变量:
CODESIGN_DATA_DIR=F:/your-project/.codesign-mcp
CODESIGN_PROFILE_DIR=F:/your-project/.codesign-mcp/profile
CODESIGN_ARTIFACTS_DIR=F:/your-project/.codesign-mcp/artifacts
CODESIGN_LOG_FILE=F:/your-project/.codesign-mcp/codesign-mcp.log
CODESIGN_IDLE_MS=600000
CODESIGN_KEEP_BROWSER=1
CODESIGN_LOG_LEVEL=info工具
codesign_status:查看运行路径、浏览器状态和 profile 状态。codesign_login:打开可见 Chromium 窗口,用于扫码登录 CoDesign。codesign_logout:清理持久化 profile。list_artboards:把 CoDesign 分享链接解析为设计稿和画板列表。get_artboard_spec:读取官方 CoDesignmeta_url标注数据,包括图层、文字、颜色、CSS、分组和切图元数据。传入layerObjectId后,selectionScope可设为layer、subtree或region;选区结果包含扁平图层/分组、层级树、选区边界和相对坐标。可选的targetPlatform支持web、Android、安卓、iOS、微信小程序、mini program等自然语言平台名称,并返回平台转换后的标注信息。targetUnit、customScale、customWidth、remBasePx对应 CoDesign 的平台设置。get_artboard_image:获取预览图或封面图,主要用于视觉对比。download_slice:从官方切图清单下载设计师导出的切图资源。debug_collect_network:收集脱敏后的网络摘要,用于诊断。
安全说明
远程标注数据和资源下载仅允许访问 https://codesign.qq.com 与 https://cdn*.codesign.qq.com。不支持的远程主机会明确返回 REMOTE_URL_NOT_ALLOWED。
codesign_logout 只会清理位于运行目录内的 profile 目录。不安全的 profile 路径会明确返回 PROFILE_DIR_UNSAFE。
提示词
implement_codesign_page:为完整页面或复制的 CoDesign 选区生成结构化设计还原提示词,引导 Agent 按预期顺序调用list_artboards、get_artboard_spec和download_slice。
资源
codesign://workflow/design-to-code:只读流程说明,用于指导 MCP 工具的正确组合方式,避免裁剪预览图或伪造不可用的 CoDesign 数据。
设计还原建议优先使用:
list_artboards -> get_artboard_spec -> download_slice预览截图只适合做视觉对比,不应作为生产切图来源。
CoDesign AI 选区油猴脚本
可选油猴脚本会在当前选中图层的右侧标注面板中增加“复制给 AI”按钮。它读取 CoDesign 页面中已有的当前画板 ID 和图层对象 ID,生成结构化 Agent 提示词;脚本不会请求额外接口,也不会复制分享访问码。
安装 Tampermonkey 或其他兼容的用户脚本管理器。
打开 codesign-ai-selection.user.js 并确认安装。
在 CoDesign 分享页进入标注模式,从左侧图层树选中一个图层或分组。
点击右侧检查器中的“复制给 AI”,把提示词粘贴到已经连接
codesign-mcp的 Agent。分享链接需要访问码时,单独向 Agent 提供访问码。
复制出的引用格式如下:
{
"type": "codesign-selection",
"sharingUrl": "https://codesign.qq.com/s/<PROJECT_ID>",
"screenId": "<SCREEN_ID>",
"screenName": "<SCREEN_NAME>",
"layerObjectId": "<LAYER_OBJECT_ID>",
"layerName": "<LAYER_NAME>",
"selectionScope": "region"
}selectionScope=region 会返回选中边界内完整包含的非祖先图层和分组,适合视觉上属于同一区域、但在设计文件中互为兄弟节点的情况。只需要选中节点的严格子层级时,可改用 subtree。如果 CoDesign 更新 DOM 结构导致无法读取当前选区,脚本会明确报错,不会复制不完整引用。
设计还原流程提示词
让 Agent 基于 CoDesign 实现页面前,请先确认 MCP 服务器已经连接。如果设计稿需要登录,先调用 codesign_status。当 profile 不存在或者 CoDesign 尚未登录时,调用 codesign_login,在打开的浏览器窗口中扫码登录,然后再次调用 codesign_status 确认登录状态。
可以把下面的模板发给 Agent。将 <PROJECT_ID> 替换为 CoDesign 分享链接中 /s/ 后面的项目 ID。如果分享链接不需要密码,删除密码这一行。
请基于这个 CoDesign 设计稿实现栏目页面:
链接:https://codesign.qq.com/s/<PROJECT_ID>
密码:<PASSWORD_IF_REQUIRED>
要求:
1. 先调用 codesign-mcp 的 list_artboards 获取画板列表。
2. 再调用 get_artboard_spec 获取官方标注信息。如果已知目标开发平台,把它作为 targetPlatform 传入,例如 `Android`、`iOS` 或 `微信小程序`。如果用户指定了自定义平台设置,同时传入 targetUnit、customScale、customWidth 和 remBasePx。
3. 除非用户明确要求 absolute/canvas 式实现,否则先把坐标信息转译为语义化页面结构和正常文档流,再开始编码。页面布局优先使用 Flexbox/Grid,不要把整页还原成全局绝对定位图层;用户明确提出的布局要求优先于该默认策略。
4. 如果设计稿里存在设计师导出的切图资源,优先调用 download_slice 获取,不要从整页预览图里自行裁图。
5. 预览图只用于视觉对比,不作为生产切图来源。
6. 在 column 目录中实现页面。开发
npm install
npm test
node scripts/stdio-smoke.mjs发布
建议通过 GitHub Actions 的 npm Trusted Publishing 发布。不要在仓库里保存长期有效的 npm token。
首次发布前:
在 npm 上为这个 GitHub 仓库和
.github/workflows/publish.yml配置 Trusted Publishing。为 npm 账号开启 2FA。
创建并推送版本标签,例如
v0.1.7,触发发布。
许可证
MIT
Available Tools
8 toolscodesign_loginCoDesign LoginAIdempotent
Open a visible Chromium window pointed at codesign.qq.com so the user can scan-login. If already logged in, returns immediately without opening a window. The session is persisted under profileDir and reused by subsequent tools.
| Name | Required | Description | Default |
|---|---|---|---|
| waitMs | No | Max wait time for the user to finish scanning. Defaults to 10 min. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Beyond the annotations (idempotent, not destructive, openWorld), the description discloses that a visible window is opened, the session is persisted under profileDir, and that it returns immediately if already logged in. This adds valuable behavioral context not captured by annotations alone.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise with three sentences, each adding essential information. It is front-loaded with the primary action and avoids redundancy or trivial details.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the single parameter and no output schema, the description covers the tool's operation well. It could mention the return behavior (e.g., success/failure indication) but this is not critical. Overall, it is sufficiently complete for an AI agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema covers the `waitMs` parameter fully (100% coverage), but the description adds the default value (10 min) which is not in the schema. This extra detail enhances understanding of the parameter's behavior.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: opening a visible Chromium window for scanning login on codesign.qq.com. It uses a specific verb ('Open') and resource ('Chromium window'), and distinguishes itself from sibling tools like codesign_logout and codesign_status.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear guidance on when to use the tool: it returns immediately if already logged in, indicating no action needed. However, it does not explicitly mention alternatives or exclusions, such as suggesting codesign_status to check login state first.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
codesign_logoutCoDesign LogoutADestructiveIdempotent
Close any running browser and wipe the persistent profile directory. Pass { confirm: true }. The target path is included in the result so the caller can verify before re-running.
| Name | Required | Description | Default |
|---|---|---|---|
| confirm | Yes | Must be true. Wipes the persistent profile. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description discloses the full destructive behavior (closing browser, wiping profile) beyond the destructiveHint and idempotentHint annotations. It also reveals that the result includes the target path for verification.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, each serving a clear purpose: first states the action, second provides usage instruction and output information. No unnecessary words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool is simple with one required parameter, no output schema, and obvious destructive effect. The description covers the action, required input, and part of the output. No gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already describes the confirm parameter as 'Must be true. Wipes the persistent profile.' The description only repeats 'Pass { confirm: true }' and does not add new semantics about the parameter itself. With 100% schema coverage, baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states 'Close any running browser and wipe the persistent profile directory', specifying the action and resource. It distinguishes from siblings like codesign_login or get_artboard_image, which are not destructive.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description instructs to pass { confirm: true } and suggests verifying the target path before re-running. It does not explicitly compare to sibling tools but the context implies usage when ending a session.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
codesign_statusCoDesign StatusARead-onlyIdempotent
Return MCP server config (profile path, idle settings) and current browser/login status. Use this first to verify whether the user has logged in.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, destructiveHint, and idempotentHint. The description adds beyond that by specifying what information is returned (config and status) and that it should be used first. This provides useful behavioral context not covered by annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is only two sentences. The first sentence states the tool's output, and the second provides usage guidance. No extraneous words; every sentence adds value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (no parameters, no output schema), the description adequately explains what it returns (config and status) and when to use it. It could be slightly more specific about the exact fields in the output, but it is sufficient for an AI agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
With zero parameters and 100% schema description coverage, the baseline is high. The description does not need to add parameter info, but it could implicitly state that the tool takes no arguments. However, the empty input schema makes this clear, so no deduction.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool returns MCP server config (profile path, idle settings) and current browser/login status. It uses specific verbs and resources, and distinguishes itself from siblings like codesign_login and codesign_logout by explicitly suggesting use 'first to verify whether the user has logged in.'
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly says 'Use this first to verify whether the user has logged in,' providing a clear when-to-use instruction. It implies that other tools are for login/logout, thus giving guidance on alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
debug_collect_networkCollect CoDesign Network (Diagnostics)ARead-only
Open the sharing page in a headless browser, record all network responses for timeoutMs, and return a REDACTED summary. Use this to discover unknown endpoints or to debug why a tool fails. Output never contains Cookie, Authorization, password, state-key values, or response bodies — only JSON key paths.
| Name | Required | Description | Default |
|---|---|---|---|
| sharingUrl | Yes | ||
| password | No | ||
| timeoutMs | No | ||
| includeHeaders | No | ||
| maxBodyKeyDepth | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description goes beyond annotations by specifying that output never includes sensitive values (Cookie, Authorization, password, state-key) or response bodies—only JSON key paths. It also mentions the headless browser side-effect, aligning with the openWorldHint annotation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences: first describes the core action, second explains use cases and output limitations. No wasted words, key information is front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description covers main behavior and output redaction but omits details on the summary format and the effect of parameters like includeHeaders and maxBodyKeyDepth. Given no output schema, more detail would be helpful.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
With 0% schema coverage, the description should explain all five parameters, but it only mentions timeoutMs in context. It does not describe sharingUrl, password, includeHeaders, or maxBodyKeyDepth, leaving the agent to infer their roles.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool opens a sharing page in a headless browser, records network responses for a specified timeout, and returns a redacted summary. This distinguishes it from sibling tools like login, logout, and artboard functions.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It explicitly advises using this tool to discover unknown endpoints or debug tool failures. While it doesn't list when not to use it, the context makes it clear it's for diagnostic purposes rather than routine operations.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
download_sliceDownload CoDesign SliceAIdempotent
Downloads designer-exported CoDesign slice assets from the official slice manifest, matched by layer object_id. Use this for implementation assets instead of using Python/PIL or screenshot cropping. Returns local paths under /.codesign-mcp/artifacts//slices/. Optional filters: format and scales.
| Name | Required | Description | Default |
|---|---|---|---|
| sharingUrl | Yes | ||
| password | No | ||
| screenId | No | ||
| objectId | No | ||
| screenName | No | ||
| layerObjectId | Yes | object_id of the slice layer | |
| format | No | Filter exportables by format (png, jpg, svg, etc.) | |
| scales | No | Filter exportables by scale list, e.g. [1, 2] |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations indicate readOnlyHint=false (side effects) and idempotentHint=true. Description adds context: downloading and saving local files under a specific path, which is a side effect but not destructive. It does not contradict annotations and provides additional behavioral insight (e.g., local artifact creation).
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three concise sentences: first states action and source, second provides usage guidance, third describes output and filters. No redundant content; information is front-loaded and efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given 8 parameters and no output schema, the description covers main purpose, usage, output location, and filters. It lacks detail on some parameters (e.g., password, screenId) but is sufficient for an agent to use the tool correctly with contextual understanding from sibling tools.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 38%, meaning only 3 of 8 parameters have schema descriptions. The description explains layerObjectId, format, and scales, but does not cover sharingUrl, password, screenId, etc. It adds value for key parameters but leaves gaps for others.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it downloads CoDesign slice assets, specifies the source (official slice manifest), matching method (layer object_id), and output location (local paths). It distinguishes itself from alternatives like Python/PIL or screenshot cropping, making its purpose very clear.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly says 'Use this for implementation assets instead of using Python/PIL or screenshot cropping,' providing a clear directive on when to use this tool versus alternatives. Also mentions optional filters, further guiding correct invocation.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_artboard_imageGet CoDesign Artboard ImageA
Returns the CoDesign preview or cover image for visual comparison only. For implementation, prefer get_artboard_spec for layout/text/CSS and download_slice for designer-exported assets; do not crop this preview image to create production slices. When download=true, stores the image under /.codesign-mcp/artifacts//screens/. Selector precedence: screenId > objectId > screenName.
| Name | Required | Description | Default |
|---|---|---|---|
| sharingUrl | Yes | ||
| password | No | ||
| screenId | No | ||
| objectId | No | ||
| screenName | No | ||
| variant | No | full | |
| download | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Discloses that download=true stores the image under a specific path and gives selector precedence, but lacks details on error handling or other behaviors. With no annotations, it carries burden well.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Four sentences, front-loaded purpose, no redundancy, every sentence adds value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Covers purpose, guidelines, and key behaviors but omits parameter details, return type, and error scenarios. Adequate but gaps exist.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 0%, so description should compensate. It gives selector precedence and mentions download effect, but leaves many parameters (password, sharingUrl format, etc.) unexplained.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it returns the CoDesign preview/cover image for visual comparison only, and distinguishes from sibling tools by recommending get_artboard_spec and download_slice for implementation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly states when to use (visual comparison) and when not to (do not crop for production slices), and names alternatives (get_artboard_spec, download_slice).
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_artboard_specGet CoDesign Artboard SpecARead-onlyIdempotent
Canonical CoDesign source for design-to-code: fetches the official meta_url JSON with layer positions, text, fills, colors, CSS, groups, and slice manifest. Returns raw CoDesign fields; when css and fills disagree, inspect both fields and the screenshot instead of assuming one is always authoritative. Use this before writing HTML/CSS from a CoDesign URL. Do not crop or OCR preview screenshots when this tool can return the spec. Selector precedence: screenId > objectId > screenName. Multiple screens without a selector return SCREEN_SELECTOR_REQUIRED with options. includeSlices defaults to true so available designer-exported slice metadata is returned with the spec.
| Name | Required | Description | Default |
|---|---|---|---|
| sharingUrl | Yes | ||
| password | No | ||
| screenId | No | ||
| objectId | No | ||
| screenName | No | ||
| layerObjectId | No | Optional: return only the matching layer | |
| includeSlices | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already provide readOnlyHint, idempotentHint, etc. The description adds behavioral details: handling conflicts between css and fills, selector precedence, default includeSlices, and SCREEN_SELECTOR_REQUIRED response. No contradictions with annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is moderately long but every sentence serves a purpose: main function, conflict resolution, usage instruction, selector logic, and parameter behavior. Front-loaded with key information, no redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no output schema and limited parameter descriptions, the description covers essential behavioral aspects, selector logic, and conflict resolution. It mentions return fields (JSON with layers, text, etc.) but could benefit from specifying the output structure more clearly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is low (14%), but the description compensates by explaining selector parameters (screenId, objectId, screenName) and their precedence, as well as includeSlices default. It doesn't detail password or layerObjectId, but the overall context is clear.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states it fetches the official meta_url JSON with detailed design elements like layer positions, text, fills, and CSS. It distinguishes itself from siblings by specifying it's the canonical source for design-to-code and warns against using OCR/crop when this tool is available.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicit guidance: 'Use this before writing HTML/CSS from a CoDesign URL.' It advises against cropping/OCR and provides selector precedence. It also explains behavior for multiple screens (returns SCREEN_SELECTOR_REQUIRED). This clearly states when to use the tool and what alternatives to avoid.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_artboardsList CoDesign ArtboardsARead-onlyIdempotent
Use this first when a task contains a CoDesign sharing URL or asks to implement/recreate a CoDesign design. It resolves the official CoDesign sharing data into designs and screens with id, object_id, name, size, image URLs, meta_url, and slices_url. For design-to-code work, select a screen from this result before calling get_artboard_spec. Do not infer screens by cropping preview images.
| Name | Required | Description | Default |
|---|---|---|---|
| sharingUrl | Yes | CoDesign sharing URL (https://codesign.qq.com/app/s/<id>) or bare sharing id | |
| password | No | Sharing password if required |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, destructiveHint=false, idempotentHint=true, openWorldHint=true. Description adds context about what data is returned and the workflow order, which complements annotations. No contradictions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, front-loaded with purpose and usage. Every sentence is valuable and no redundancy. Highly efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given complete parameter schema, comprehensive annotations, and no output schema, the description covers purpose, usage, and workflow. It could mention error handling or limitations but is sufficient for a read-only tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, with both parameters fully described. The description adds no new information about parameters beyond what the schema provides. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly states the tool resolves a CoDesign sharing URL into designs and screens with specific fields. Distinguishes from siblings like get_artboard_spec by being the first step.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly says to use this first when a task contains a CoDesign URL, then select a screen before calling get_artboard_spec. Also warns not to infer screens by cropping preview images.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
8 tool updates
v0.1.9- First observed
codesign_login - First observed
codesign_logout - First observed
codesign_status - First observed
debug_collect_network - First observed
download_slice - First observed
get_artboard_image - First observed
get_artboard_spec - First observed
list_artboards
TDQS
Each tool has a distinct purpose: login, logout, status, debug, download slice, get image, get spec, list artboards. No overlap in functionality.
Naming is inconsistent: some tools have 'codesign_' prefix, others like 'download_slice' lack it, and 'debug_collect_network' uses a different prefix. While snake_case is used, the pattern is not uniform.
8 tools is an appropriate number for a design-to-code MCP server. It covers essential operations without being bloated or insufficient.
Completeness is high: the tool set covers login lifecycle, listing designs, fetching specs, downloading assets, and debugging. Minor gaps like version handling or design upload could exist, but core workflows are well-covered.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
The Figma MCP server brings Figma design context directly into your AI workflow.
The official MCP Server for the Mux API
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
9118An MCP server that provides read access to your cloud storage providers, bank accounts and more.
Related MCP Servers
- AlicenseAqualityCmaintenanceA read-only MCP server for reading and analyzing Lanhu (Blue Lake) design projects, providing tools to retrieve design lists, previews, node trees, schemas, and exportable resources.5MIT
- AlicenseNot gradedqualityCmaintenanceA local MCP server that lets MCP clients inspect and edit the Figma document currently open in the Figma desktop app using a local bridge and development plugin.MIT
- AlicenseAqualityAmaintenanceMCP server for macOS that reads Lanhu designs, analyzes UI structures, and exports fine-grained design assets for multiple platforms.85MIT
- AlicenseNot gradedqualityCmaintenanceToken-efficient Figma MCP server with image export, query DSL, and design token support.19MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/ccpopy/codesign-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server