sketch-implement-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Sketch Implement Design

基于Sketch实现设计

Overview

概述

Implement UI from Sketch with high visual fidelity by querying live document data through Sketch MCP. Use

run_code

to inspect and export data, and

get_selection_as_image

as the visual source of truth.

通过Sketch MCP查询实时文档数据，以高视觉还原度从Sketch实现UI。使用

run_code

检查并导出数据，将

get_selection_as_image

作为视觉参考标准。

Prerequisites

前置条件

Keep Sketch open with the target document available.
Enable Sketch MCP in Sketch settings: General -> Allow AI tools to interact with open documents.
Configure Codex MCP to point to the local Sketch server address shown in Sketch settings.
- Default address is usually
```
http://localhost:31126/mcp
```
  .
Select the layer or frame to implement in Sketch before calling
```
get_selection_as_image
```
.

保持Sketch处于打开状态，且目标文档可用。
在Sketch设置中启用Sketch MCP：通用 -> 允许AI工具与打开的文档交互。
配置Codex MCP指向Sketch设置中显示的本地Sketch服务器地址。
- 默认地址通常为
```
http://localhost:31126/mcp
```
  。
在调用
```
get_selection_as_image
```
之前，在Sketch中选中要实现的图层或框架。

Required Workflow

必选工作流程

Follow these steps in order. Do not skip steps.

请按顺序执行以下步骤，请勿跳过。

Step 0: Confirm Sketch MCP connectivity

步骤0：确认Sketch MCP连接性

If Sketch MCP calls fail:

Check that Sketch is running and MCP is enabled in settings.
Check the MCP server URL in your MCP client config.
Retry after confirming the server address in Sketch settings.

如果Sketch MCP调用失败：

检查Sketch是否在运行，且设置中已启用MCP。
检查MCP客户端配置中的MCP服务器URL。
确认Sketch设置中的服务器地址后重试。

Step 1: Identify the implementation target

步骤1：确定实现目标

Use these approaches in priority order:

User gives a Sketch share link like
```
https://sketch.com/s/<document-share-uuid>/f/<canvas-frame-uuid>
```
: extract the
```
/f/<canvas-frame-uuid>
```
value, find that layer, and select it. Prefer this target over current selection or name-based matching.
User gives layer identifiers or names: use
```
run_code
```
to locate matching layers and ask for confirmation.
User selects the exact frame/component in Sketch.

Use

run_code

with the

find

function and this pattern when a share link is provided:

const sketch = require('sketch')
const frameId = '4A2E31FF-56BD-4C29-92D2-829548D19C1D'
const frame = find(`#${frameId}`)
if (frame) sketch.getSelectedDocument().selectedLayers = [frame]

When multiple matches exist, stop and ask which layer to implement.

按以下优先级顺序选择方式：

用户提供Sketch共享链接，例如
```
https://sketch.com/s/<document-share-uuid>/f/<canvas-frame-uuid>
```
：提取
```
/f/<canvas-frame-uuid>
```
值，找到对应图层并选中。优先选择此目标，而非当前选中内容或基于名称的匹配。
用户提供图层标识符或名称：使用
```
run_code
```
定位匹配的图层，并请求用户确认。
用户在Sketch中选中了准确的框架/组件。

当提供共享链接时，使用

run_code

结合

find

函数及以下模式：

const sketch = require('sketch')
const frameId = '4A2E31FF-56BD-4C29-92D2-829548D19C1D'
const frame = find(`#${frameId}`)
if (frame) sketch.getSelectedDocument().selectedLayers = [frame]

如果存在多个匹配项，请暂停并询问用户要实现哪个图层。

Step 2: Fetch structured design context via

run_code

步骤2：通过

run_code

获取结构化设计上下文

Run

run_code

to collect design data for the selected root layer (and relevant descendants):

Hierarchy: IDs, names, types, visibility, lock state
Layout: frame, resizing behavior, pins, stack layout, clipping
Typography: font family, size, weight, line height, alignment, decoration
Styling: fills, borders, shadows, blur, corner radii, opacity, tint
Reusable styling: shared text/layer style names and source library names
Variables/swatches: color variable names and optional source library names
Symbols: nested symbols and override-capable fields
Export settings and image sources

Always start scripts with:

const sketch = require('sketch')

Pass a short

title

argument to

run_code

and keep scripts minified unless the user asks otherwise.

If output is too large:

Fetch a shallow tree map first (IDs, names, types only).
Fetch detailed context per critical child subtree.
Continue only after all required nodes are covered.

运行

run_code

收集选中根图层（及相关子图层）的设计数据：

层级结构：ID、名称、类型、可见性、锁定状态
布局：框架、调整大小行为、定位、堆叠布局、裁剪
排版：字体家族、字号、字重、行高、对齐方式、装饰
样式：填充、边框、阴影、模糊、圆角半径、透明度、色调
可复用样式：共享文本/图层样式名称及源库名称
变量/色板：颜色变量名称及可选的源库名称
符号：嵌套符号及可覆盖字段
导出设置和图片源

脚本请始终以以下代码开头：

const sketch = require('sketch')

给

run_code

传递一个简短的

title

参数，除非用户要求，否则保持脚本压缩状态。

如果输出内容过大：

先获取浅层树形图（仅包含ID、名称、类型）。
按关键子树获取详细上下文。
仅在覆盖所有必要节点后继续。

Step 3: Capture visual reference via

get_selection_as_image

步骤3：通过

get_selection_as_image

捕获视觉参考

Call

get_selection_as_image

on the same selected target. Use this image as the primary visual reference for implementation and validation.

If selection is empty, stop and ask the user to select the intended layer/frame in Sketch.

对同一选中目标调用

get_selection_as_image

。将此图片作为实现和验证的主要视觉参考。

如果选中内容为空，请暂停并要求用户在Sketch中选中目标图层/框架。

Step 4: Export required assets via

run_code

步骤4：通过

run_code

导出所需资源

Export icons, bitmaps, and other assets from Sketch instead of inventing placeholders.

Rules:

Use assets from Sketch output; do not add new icon packs unless explicitly requested.
Use absolute output paths.
For
```
sketch.export
```
, always pass both
```
output
```
and
```
filename
```
(with extension).

Example:

const sketch=require('sketch');const d=sketch.getSelectedDocument()
const l=d.selectedLayers.layers[0]
sketch.export(l,{
  output:'/tmp/sketch-assets',
  filename:`${l.id}.png`,
  formats:['png']
});console.log('ok')

从Sketch导出图标、位图及其他资源，而非自行创建占位符。

规则：

使用Sketch输出的资源；除非明确要求，否则不要添加新的图标包。
使用绝对输出路径。
对于
```
sketch.export
```
，始终同时传递
```
output
```
和
```
filename
```
（带扩展名）。

示例：

const sketch=require('sketch');const d=sketch.getSelectedDocument()
const l=d.selectedLayers.layers[0]
sketch.export(l,{
  output:'/tmp/sketch-assets',
  filename:`${l.id}.png`,
  formats:['png']
});console.log('ok')

Step 5: Translate Sketch output to project conventions

步骤5：将Sketch输出映射到项目规范

Treat Sketch data as design intent, then map to project standards:

Reuse existing UI components before creating new ones.
Map Sketch values to project tokens (color, spacing, type scale, radius).
Match established architecture and state/data patterns.
Keep generated code maintainable and idiomatic for the target stack.

将Sketch数据视为设计意图，然后映射到项目标准：

优先复用现有UI组件，再创建新组件。
将Sketch值映射到项目令牌（颜色、间距、排版比例、圆角）。
匹配既定的架构和状态/数据模式。
确保生成的代码对于目标技术栈而言可维护且符合惯用写法。

Step 6: Implement for 1:1 visual parity

步骤6：实现1:1视觉还原

Aim for visual parity with the Sketch screenshot and context:

Match spacing, alignment, sizing, and hierarchy.
Match typography and color usage.
Preserve intended behavior for responsive/constraint-based layouts.
Use tokenized values when possible; avoid unnecessary hardcoded values.

以与Sketch截图和上下文完全一致的视觉效果为目标：

匹配间距、对齐方式、尺寸和层级结构。
匹配排版和颜色使用。
保留响应式/基于约束的布局的预期行为。
尽可能使用令牌化值；避免不必要的硬编码值。

Step 7: Validate against Sketch before completion

步骤7：完成前对照Sketch验证

Validate implemented UI against the screenshot and design context checklist:

Layout and spacing
Typography
Colors and effects
States and interactions
Asset rendering
Responsiveness/constraints
Accessibility basics

If mismatch remains, re-query with

run_code

for the affected subtree and iterate.

对照截图和设计上下文清单验证已实现的UI：

布局和间距
排版
颜色和效果
状态和交互
资源渲染
响应能力/约束
基础可访问性

如果仍存在不匹配，请使用

run_code

重新查询受影响的子树并迭代优化。

Implementation Rules

实现规则

Prefer incremental updates over broad rewrites.
Keep component boundaries consistent with the design hierarchy.
Document intentional deviations (technical or accessibility constraints).
Do not assume stale design data; re-query Sketch when unsure.

优先增量更新，而非大范围重写。
保持组件边界与设计层级一致。
记录有意的偏差（技术或可访问性约束）。
不要假设设计数据已过时；不确定时重新查询Sketch。

Common Issues

常见问题

Empty selection

from

get_selection_as_image

get_selection_as_image

返回“Empty selection”（选中内容为空）

Cause: Nothing selected in Sketch. Fix: Ask the user to select the target layer/frame, then retry.

原因：Sketch中未选中任何内容。解决方法：请用户选中目标图层/框架，然后重试。

No document

from MCP tools

MCP工具返回“No document”（无文档）

Cause: No open Sketch document or Sketch not running. Fix: Open the document in Sketch and retry.

原因：未打开Sketch文档或Sketch未运行。解决方法：在Sketch中打开文档后重试。

run_code

output is too large or truncated

run_code

输出过大或被截断

Cause: Selection tree is too large. Fix: Query shallow tree first, then fetch detailed context by subtree.

原因：选中的树结构过大。解决方法：先查询浅层树形图，再按子树获取详细上下文。

Missing or incorrect exported assets

导出的资源缺失或不正确

Cause: Invalid export options or relative output path. Fix: Use absolute paths and pass both

output

and

filename

原因：导出选项无效或使用了相对输出路径。解决方法：使用绝对路径，并同时传递

output

和

filename

。

Implementation does not match visual design

实现效果与视觉设计不匹配

Cause: Incomplete context capture or token mismatch. Fix: Re-capture screenshot and inspect exact node values via

run_code

原因：上下文捕获不完整或令牌不匹配。解决方法：重新捕获截图，并通过

run_code

检查节点的精确值。

sketch-implement-design

Original

Translation

Sketch Implement Design

基于Sketch实现设计

Overview

概述

Prerequisites

前置条件

Required Workflow

必选工作流程

Step 0: Confirm Sketch MCP connectivity

步骤0：确认Sketch MCP连接性

Step 1: Identify the implementation target

步骤1：确定实现目标

Step 2: Fetch structured design context via run_code

步骤2：通过run_code获取结构化设计上下文

Step 3: Capture visual reference via get_selection_as_image

步骤3：通过get_selection_as_image捕获视觉参考

Step 4: Export required assets via run_code

步骤4：通过run_code导出所需资源

Step 5: Translate Sketch output to project conventions

步骤5：将Sketch输出映射到项目规范

Step 6: Implement for 1:1 visual parity

步骤6：实现1:1视觉还原

Step 7: Validate against Sketch before completion

步骤7：完成前对照Sketch验证

Implementation Rules

实现规则

Common Issues

常见问题

Empty selection from get_selection_as_image

get_selection_as_image返回“Empty selection”（选中内容为空）

No document from MCP tools

MCP工具返回“No document”（无文档）

run_code output is too large or truncated

run_code输出过大或被截断

Missing or incorrect exported assets

导出的资源缺失或不正确

Implementation does not match visual design

实现效果与视觉设计不匹配

References

参考资料

Step 2: Fetch structured design context via
`run_code`

步骤2：通过
`run_code`
获取结构化设计上下文

Step 3: Capture visual reference via
`get_selection_as_image`

步骤3：通过
`get_selection_as_image`
捕获视觉参考

Step 4: Export required assets via
`run_code`

步骤4：通过
`run_code`
导出所需资源

`Empty selection`
from
`get_selection_as_image`

`get_selection_as_image`
返回“Empty selection”（选中内容为空）

`No document`
from MCP tools

`run_code`
output is too large or truncated

`run_code`
输出过大或被截断