DSH to Figma

把 Figma 画布能力接入 DeepSeek Harness。

原生 DSH 插件搭配自动配对的 Figma 插件，直接读取、编辑画布并获取截图。首次导入一次，以后启动即连接。

简体中文 · English · 日本語

使用场景 · 快速开始 · 工具列表 · 配置 · 验证记录

推荐安装方式： 从 Releases 下载并安装 DSH 包。插件以本地模式启动后，DSH 会自动生成这台电脑专用、已配对的 Figma 插件。让 DSH 调用 figma_setup 获取路径，在 Figma 首次导入一次生成的 manifest，之后运行即可连接。无需另行下载通用 ZIP，也无需复制配对密钥；使用时保持 Figma 插件窗口打开。

为什么使用 DSH to Figma

• 本地模式不消耗官方 Figma MCP 调用额度。 通过本地配套插件读取、编辑、截图和导出，可持续迭代，无需消耗官方 MCP 调用次数。
• 原生 DSH 插件。 工具、设计 Skill 和图像附件均使用宿主扩展机制，无需修改 Agent 主循环；已测试 0.2.0-rc.2 与 0.2.1-rc.2 版 DSH 内核。宿主版本不设加载限制，后续版本出现实际兼容问题时再修复。
• 默认支持画布编辑（local）。 配套 Figma 插件在选定文档中执行公开 Plugin API，创建和修改 Frame、文字、自动布局、组件、变体、样式与变量。
• 从设计到代码。 读取图层结构、布局、CSS 与素材，让宿主 Agent 在当前工作区中实现界面。
• 视觉反馈。 画布截图通过 DSH 原生图像附件机制传递。模型不支持图像时明确报告限制，不会假装完成视觉检查。
• 推荐流程无需复制密钥。 DSH 自动生成本机专用的已配对 Figma 插件，运行后自动连接；只有一个连接文件时自动选用。官方桌面 MCP 保留为可选的读取与截图模式。

0.2.1 已在 Figma 设计模式实测： 自动配对、单文件绑定、原生画板与文字创建、独立读回修改、截图及 PNG 导出均通过已安装 DSH 的真实会话完成。此版本修复了 0.2.0 实机发现的沙箱启动兼容问题，详见验证记录与实际图片。

使用场景

以下场景面向默认本地模式，需要连接目标 Figma 文件并保持配套插件运行。涉及代码与素材文件的操作，需要在 DSH 中打开相应工作区并具备写入权限。

1. 已有 UI 画板 → 前端页面

设计稿做好后，让 DSH 读取目标画板的图层结构、布局、样式/CSS、组件信息和截图，再导出所需图标与图片。DSH 可以结合当前代码工作区的框架、已有组件和约定生成或修改前端页面，例如 React、Vue 项目。

读取我选中的登录页画板，先检查当前项目的技术栈和组件，在项目中实现这个页面。复用已有组件，使用画板中的真实素材，并说明小屏幕下的布局处理。

插件提供设计上下文与素材，前端代码由 DSH 的模型和工作区工具实现。 本地模式不调用 Figma 云端代码生成；交互逻辑、响应式规则、后端接口和业务行为仍需结合项目需求补充，不能仅凭静态画板确定。

2. 参考截图或文字需求 → 可编辑 Figma UI

给 DSH 一张参考图，或描述页面结构、尺寸与内容，让它在当前 Figma 文件中创建原生画板、文字、矢量和自动布局，再继续调整。已有截图重建案例见下方使用示例。

在当前页面新建一个 1440 × 900 的任务管理界面，包含侧边栏、任务列表和详情面板，使用可编辑文字与自动布局。

3. 已有设计的批量修改与迭代

指定画板和修改范围，让 DSH 调整文案、颜色、间距或布局，再读取结果并返回截图检查。画布修改不是事务，建议把较大的修改拆成小步核对。

将这个画板中的主按钮统一为 40px 高、8px 圆角，检查文字是否溢出，修改后给我截图。

4. 复用组件与设计变量

读取组件、样式和变量，辅助新页面沿用已有设计规范；也可以在明确范围内创建或调整组件、变体和变量。组件搜索以当前页面为范围，样式与变量搜索以本地文件为范围；检查其他页面需先加载目标页面，不是全云端设计库检索。本地组件与代码引用也不等同于发布官方 Code Connect 映射。

先检查当前页面已有的按钮和输入框组件，以及文件中的颜色变量，再用它们搭建设置页。

5. 素材交付与前端效果核对

将指定图层导出为 SVG、PNG、JPG 或 PDF，保存到工作区的 .figma/assets/<batch>/，再由 DSH 按项目约定整理到资源目录。若宿主具备浏览器或页面预览工具，且模型支持图像，还可以对照 Figma 截图检查前端效果并继续修改代码；这些网页预览能力由宿主提供。

导出这个画板用到的图标和图片，整理到项目资源目录；页面实现后，对照设计稿检查字体、间距和对齐。

这些是可组合的工作流，不会自动双向同步设计与代码，也不保证逐像素还原。已实测的范围包括本地自动配对、画布读取、创建与修改、截图、PNG 导出，以及下方的截图重建案例；前端生成、组件整理等工作流尚未逐项完成端到端实测。详见验证记录与能力边界。

使用示例

官方桌面 MCP 读取与截图（可选模式）

在 DSH Work 会话中，提供当前 Figma 文件内目标画板的链接：

使用官方桌面 MCP，先检查 figma_status，再读取这个画板的元数据并返回截图，不要修改画布。

实测发现 10 个官方工具，状态为 backend: desktop、available: true、bridgePort: null。get_metadata 成功读取 DeepSeek Harness — Desktop UI，节点 1:4，尺寸 1440 × 900，以及 Sidebar、Main 等内部图层。get_screenshot 返回 1024 × 640 WebP，进入 DSH 原生图片附件存储，并在实际对话中显示。下图就是该次 MCP 返回的图片；验收没有修改画布。

从参考截图重建可编辑的 Figma 界面（本地模式）

此写入案例使用 backend: local 和配套插件；0.2.0 通过自动配对简化了它的接入过程。在 DSH 中提供参考截图，在已连接的 Figma 文件中选中目标画板，再用自然语言描述绘制要求：

把这个 UI 绘制在我选中的画板上，注意只绘制 UI。

1. 在 DSH 中提供参考图与指令。 本例使用 DeepSeek Harness 桌面应用截图。Agent 识别选中的画板，计划按 1440 × 900 重建应用界面，并去除外围桌面背景。

2. 在 Figma 中得到可编辑结果。 画布呈现了侧边栏、对话区和消息输入区。左侧图层面板展示了独立的文字、Frame 和矢量图层，选中画板的尺寸为 1440 × 900，可以继续选择和调整其中的元素。

以上截图由维护者提供，来自 2026-10-18 的实际运行，展示了这次从截图到 UI 的案例；不代表逐像素一致性或所有工具、编辑器模式均已验收。

工作原理

…