mcp-sketch
mcp-sketch
English | 中文
需多模态模型(分析预览图)。agents 持续迭代中,安装后按需调整 prompt 和权限
推荐配合 CodeGraph 使用:sketch 通过 MCP 工具
codegraph_explore查询项目代码结构,推荐在 AI 平台中配置 CodeGraph MCP 服务以获得更准确的项目上下文理解。若 CodeGraph 不可用,自动回退到 Grep/Read。
安装
npx -y mcp-sketch install交互选择平台,写入对应目录:
平台 | agent 目录 | skill 目录 |
Claude Code |
|
|
OpenCode |
|
|
推荐 MCP 服务
CodeGraph — 项目源码分析,提高组件规划与代码定位的准确性:
npm i -g @colbymchenry/codegraph
codegraph install
codegraph initPlaywright MCP — 浏览器预览与截图比对:
Related MCP server: codesign-mcp
使用
切换到 Leader
OpenCode:启动后按
TAB切换到sketch-leaderClaude Code:
claude --agent sketch-leader
场景一:创建新页面
根据设计稿 设计稿.zip,创建一个用户登录页流程:pick → analyze-artboard → split → gen-base → layout → preview → draw → draw-check
场景二:插入到现有页面
描述越精确,LLM 推断越少、返工越少。按掌握的信息量选择示例:
根据设计稿 设计稿.zip,把 eWallet 画板的右下区域(rect[220,340,180,120])作为资产卡片,提取出来插入到 /assets 页面的总览区域(src/views/assets/AssetsOverview.vue 的 .overview-content 容器内)根据设计稿 设计稿.zip,把用户信息卡片提取出来,插入到 /dashboard 页面根据掌握的信息,尽可能提供:设计稿文件 → 画板名 → 坐标区域 → 目标页面路由或组件路径 → 插入位置上下文
流程:pick → analyze-artboard → split(插入模式)→ gen-base → insert-layout → preview → draw → draw-check
场景三:多画板描述同一功能
根据设计稿 设计稿.zip,聊天页面有三个状态(空状态、消息列表、输入中),需要一起处理多选画板后,analyze-artboard 一次性解析所有画板,split 自动去重合并公共组件(弹框容器、标题栏等),各画板只保留差异部分
流程:pick(multi) → analyze-artboard → split → gen-base → layout → preview → draw → draw-check
工具箱
skill | 归属 agent | 说明 |
sketch-pick | sketch-analyzer | 提取画板列表供用户选择 |
sketch-analyze-artboard | sketch-analyzer | 解析画板图层并缓存 layer.json |
sketch-split | sketch-analyzer | 分析画板,拆分组件 |
sketch-preview | sketch-analyzer | 启动服务并预览页面 |
sketch-init | sketch-architect | 扫描项目,生成配置文档 |
sketch-init-components | sketch-architect | 分析组件生态,生成组件清单 |
sketch-gen-base | sketch-architect | 生成基础组件骨架代码 |
sketch-layout | sketch-architect | 配置路由和父组件布局 |
sketch-insert-layout | sketch-architect | 布局 section 组件并插入目标页面 |
sketch-draw | sketch-developer | 根据设计稿绘制组件功能代码 |
sketch-code | sketch-developer | 修改/重构/插入等无设计稿任务 |
sketch-*-check | sketch-checker | 审核各阶段输出质量 |
状态管理
状态文件在 .sketch-cache/artboards/{design_file_name}/{page_name}/{artboard_name}/progress.json
组件状态链:split-done → split-check-done → gen-base-done → gen-base-check-done → (insert-)layout-done → (insert-)layout-check-done → preview-done → draw-done → draw-check-done
环境变量
项目根目录 .env.sketch:
字段 | 必填 | 默认值 | 说明 |
| 是 |
| 启动命令 |
| 否 | 当前目录 | 项目根目录 |
| 否 |
| 切图输出路径 |
Linux / macOS / WSL 需安装
tmux:brew install tmux(macOS) /sudo apt install tmux(Ubuntu/Debian/WSL),Windows 无需额外安装
工具
npx -y mcp-sketch <cmd> --help查看完整参数
list
[-f <path>]— 列出画板analyze
-f <path> --pn <page> --an <artboard> [-r <rect>] [-e <rects>] [-l <n>] [-o <n>] [--ap <path>] [--persist]— 解析图层/样式/切图dev
-u <url>— 启动本地开发服务state
-f <path> --pn <page> --an <artboard> -c '<yaml>' [-r]— 管理画板状态
切图输出:src/assets/sketch/,预览图:.sketch-cache/artboards/{design_file_name}/{page_name}/{artboard_name}/(webp)
MCP 配置
设置 MCP_MODE=1,在 AI 工具中配置为本地 MCP 服务:
opencode
{
"mcp": {
"mcp-sketch": {
"type": "local",
"command": ["npx", "-y", "mcp-sketch"],
"enabled": true,
"environment": { "MCP_MODE": "1" }
}
}
}claude code
{
"mcpServers": {
"mcp-sketch": {
"type": "stdio",
"command": "npx",
"args": ["-y", "mcp-sketch"],
"env": { "MCP_MODE": "1" }
}
}
}Demo
Available Tools
1 toolsketch_html_analyzesketch_html_analyzeC
Analyze sketch html files and return the design structure of corresponding pages or drawing boards
| Name | Required | Description | Default |
|---|---|---|---|
| file_path | Yes | sketch html zip file path(required) | |
| page_id | No | page id (optional) | |
| page_name | No | page name (optional) | |
| artboard_id | No | artboard id (optional) | |
| artboard_name | No | artboard name (optional) | |
| rect | No | rect [x, y, width, height] (optional) | |
| assets_path | No | assets path (optional), default src/assets/sketch | |
| saveResult | No | save analysis result (optional), default true |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure but fails to specify critical traits: it doesn't clarify that the tool likely extracts/reads zip files (implied by 'sketch html zip file path'), doesn't explain what the saveResult parameter actually saves or where, and doesn't disclose whether this is a read-only operation or has side effects.
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 a single, efficient sentence with no redundant words. It is appropriately front-loaded with the verb 'Analyze'. However, the density means it sacrifices clarity on parameter relationships and behavioral details that would require additional sentences.
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?
For an 8-parameter tool handling file processing with multiple optional filters (page, artboard, rect) and persistence options (saveResult), the description is inadequate. With no output schema provided, the description should explain the return format and structure, but it omits this entirely, leaving the agent uncertain about what data structure it will receive.
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 input schema has 100% description coverage, establishing a baseline of 3. The description adds marginal semantic value by referencing 'pages or drawing boards' which contextualizes the page_id and artboard_id parameters, but doesn't explain the rect parameter's purpose (cropping vs selection) or the assets_path 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 identifies the action ('Analyze') and resource ('sketch html files'), and mentions the return value ('design structure'). However, 'design structure' remains somewhat vague—it doesn't specify whether this returns layer hierarchies, CSS properties, or component trees, which would help the agent understand the utility of the output.
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 mentions 'pages or drawing boards' which implicitly maps to the page_id/artboard_id parameters, but provides no explicit guidance on when to use this tool versus alternatives, or how to use the filtering options (e.g., whether page_id and page_name are mutually exclusive or complementary).
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.
1 tool update
v1.0.4- First observed
sketch_html_analyze
TDQS
Scored across 1 tool
With only one tool in the set, there is no possibility of confusion or overlap with other tools within this server.
The single tool uses clear snake_case with a descriptive verb suffix, but with only one data point, a broader naming pattern cannot be established.
A single analysis tool is too few for the apparent scope implied by the server name 'mcp-sketch', suggesting a severely limited integration surface.
The server only supports analyzing HTML exports, lacking any functionality for creating, editing, or exporting native Sketch files, representing significant gaps for design workflow automation.
Maintenance
Related MCP Connectors
HTML-to-PDF MCP server — render pixel-faithful PDFs from HTML.
MCP server for web extraction and rendering via AceDataCloud WebExtrator
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
MCP server to assist with JxBrowser development.
Related MCP Servers
- AlicenseNot gradedqualityFmaintenanceMCP server to provide Sketch layout information to AI coding agents like Cursor4 npm72MIT
- AlicenseAqualityBmaintenanceLocal MCP server for Tencent CoDesign sharing links, exposing artboards, layer specs, preview images, and exported slices to support design-to-code workflows.851 npm14MIT
- AlicenseNot gradedqualityDmaintenanceMCP server for ingesting UI screenshots, Figma MCP node JSON, or hybrid Figma-plus-screenshot sources into a cross-platform design-to-code artifact pipeline.119 npmMIT
- AlicenseNot gradedqualityBmaintenanceMCP server for the MiroMiro design-extraction API. It extracts real design data from live websites—including brand colors, fonts, tokens, SVGs, images, and component code—so AI agents can build from actual values.95 npmMIT