Skip to main content
Glama

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

.claude/agents/

.claude/skills/

OpenCode

.opencode/agents/

.opencode/skills/

推荐 MCP 服务

CodeGraph — 项目源码分析,提高组件规划与代码定位的准确性:

npm i -g @colbymchenry/codegraph
codegraph install
codegraph init

Playwright MCP — 浏览器预览与截图比对:

Related MCP server: codesign-mcp

使用

切换到 Leader

  • OpenCode:启动后按 TAB 切换到 sketch-leader

  • Claude 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:

字段

必填

默认值

说明

SERVER_COMMAND

是

npm run dev

启动命令

CWD

否

当前目录

项目根目录

ASSETS_PATH

否

src/assets/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 tool
sketch_html_analyzesketch_html_analyzeC

Analyze sketch html files and return the design structure of corresponding pages or drawing boards

ParametersJSON Schema
NameRequiredDescriptionDefault
file_pathYessketch html zip file path(required)
page_idNopage id (optional)
page_nameNopage name (optional)
artboard_idNoartboard id (optional)
artboard_nameNoartboard name (optional)
rectNorect [x, y, width, height] (optional)
assets_pathNoassets path (optional), default src/assets/sketch
saveResultNosave analysis result (optional), default true

TDQS

C2.9/5.0
Behavior2/5

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.

Conciseness4/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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. 1 tool updatev1.0.4
    • First observedsketch_html_analyze

TDQS

B3/5.0

Scored across 1 tool

Disambiguation5/5

With only one tool in the set, there is no possibility of confusion or overlap with other tools within this server.

Naming Consistency4/5

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.

Tool Count2/5

A single analysis tool is too few for the apparent scope implied by the server name 'mcp-sketch', suggesting a severely limited integration surface.

Completeness2/5

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

ActivitySlowing
ResponsivenessResponsive

Related MCP Connectors

Related MCP Servers

  • A
    license
    A
    quality
    B
    maintenance
    Local MCP server for Tencent CoDesign sharing links, exposing artboards, layer specs, preview images, and exported slices to support design-to-code workflows.
    8
    51 npm
    14
    MIT
  • A
    license
    Not graded
    quality
    B
    maintenance
    MCP 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 npm
    MIT