Introduction¶

When working on UI-related tasks in DSH, common practices include pasting screenshots, describing layouts verbally, or setting up a separate Figma desktop MCP for read-only queries. The former lacks editable structure and variable information, while the latter, if using the official remote MCP, consumes API quota. Maintainer Duoasa’s DSH to Figma (repository Duoasa/DSH-to-Figma) turns Figma canvas capabilities into a native DSH plugin: the default local mode bridges via a companion Figma plugin running locally, allowing for reading and editing designs, exporting assets and screenshots. The local path does not consume official Figma MCP quota. The plugin is categorized as a “Web Tool” in the community catalog, has approximately 6 stars on GitHub, is licensed under MIT, and is currently in preview status.

Below is an introduction to the problems it solves, its documented capabilities, and how to install and get started.

What is this¶

DSH to Figma is aimed at developers and design collaboration scenarios already using DeepSeek Harness: it exposes Figma-related tools and a figma-workbench Skill within the host, allowing the Agent to read layer structures, layouts and CSS, components and variables. It can create or modify Frames, text, Auto Layout, etc., on the canvas, and return screenshots via DSH native image attachments. In the default local mode, DSH generates a machine-specific, pre-paired Figma development plugin under DSH_HOME upon startup; after importing the manifest into the Figma desktop client for the first time, keeping the DSH to Figma · Local window open establishes the connection. The recommended workflow does not require copying pairing keys.

Documented compatible DSH cores include 0.2.0-rc.2 and 0.2.1-rc.2. The repository is not yet released to npm; installation packages are obtained from GitHub Releases.

Core Features¶

Local Mode (Default backend: local)¶

The companion Figma plugin calls public Plugin APIs within the target document, supporting canvas scripting, structure inspection, screenshots and design context, design system queries, and asset upload/download. The README states that the default local mode provides 17 canvas-related tools prefixed with mcp__figma__…, as well as 5 onboarding and guide tools, for example:

Canvas screenshots enter as DSH image attachments; if the model does not support images, the plugin will explicitly report the limitation. Component searches scope to the current page, while style and variable searches scope to the local file; this is not equivalent to full cloud design library retrieval or published Code Connect mappings.

Optional Official Desktop / Remote Modes¶

• desktop: backend: desktop, uses Figma’s built-in desktop MCP (default address http://127.0.0.1:3845/mcp), focuses on reading and screenshots, and lacks canvas writing tools like use_figma.
• remote: backend: remote, via dsh-figma login and approved OAuth; capabilities depend on Figma-side approval and server tool catalogs.

The local bridge listens on port 3055 by default, is loopback-only, and validates pairing keys as described in the README.

Installation and Activation¶

1. Install the DSH Plugin Package¶

Download dsh-to-figma-<version>.tgz and SHA256SUMS from Releases. After verifying checksums, install using the CLI and profile corresponding to your current host. The manual example in the README (replace web with your actual profile, and change paths to local absolute paths) is as follows:

dsh plugin --profile web add "file:/absolute/path/dsh-to-figma-0.2.1.tgz"

The official DSH Desktop on macOS can use the in-app CLI to manage the desktop profile:

"/Applications/DeepSeek Harness.app/Contents/Resources/runtime/cli/bin/dsh" \
  plugin --profile desktop add "file:/absolute/path/dsh-to-figma-0.2.1.tgz"

After installation, confirm DSH to Figma is running in the host’s plugin manager; if tools do not appear, restart the host or create a new session. Successful installation does not imply connection to Figma.

Alternatively, in a DSH session with network and terminal permissions, follow “Method A” in the repository README to send the complete Chinese installation prompt, allowing the Agent to download, verify, and execute plugin add according to the documentation steps. The maintainer records that this flow has been tested on DSH Desktop 0.2.1-rc.2.

2. First-time Import of the Figma Companion Plugin¶

After DSH runs in local mode, request a call to figma_setup in the session to obtain the manifest path generated locally (do not share secrets). The default manifest location is:

~/.dsh/figma/companion/manifest.json

In the Figma desktop client: Plugins → Development → Import plugin from manifest…, select the manifest above; open the target Design file, run DSH to Figma · Local, and keep the plugin window open. Connection can be confirmed by calling figma_status.

3. Configuration Essentials (Entry dsh-figma)¶

To disable: turn it off in the host plugin manager, or set DSH_FIGMA_DISABLED=1 before starting the host. After modifying bridgePort, you must regenerate and re-import the companion plugin as per the documentation.

Typical Usage¶

Post-connection Read-only Verification (without modifying existing designs):

Read the connected Figma file, create a new standalone auto-layout card with the title "Hello from DSH". Return the node ID, read back the content, and take a screenshot. Do not modify existing designs.

Design to Frontend (Requires write permissions in the workspace): Let DSH read the target frame structure, styles/CSS, component info, and screenshots; export icons and images to the project directory; then generate or modify the page based on the current tech stack. The plugin provides design and asset context; interaction and business logic still need to be supplemented according to the project.

Create Design from Reference Images or Text Requirements:

Create a new 1440 × 900 task management interface on the current page, including a sidebar, task list, and detail panel, using editable text and auto-layout.

Batch Revisions and Visual Verification:

Unify the primary buttons in this frame to 40px height and 8px corner radius, check if text overflows, and give me a screenshot after modification.

Optional desktop MCP read-only example: first figma_status, then read frame metadata and screenshots, and explicitly request no canvas modification.

Use Cases and Notes¶

Suitable for teams that need to continuously iterate Figma designs within DSH sessions, export assets, and hand off design context to the same Agent for coding. Workflows listed in the README include: existing UI frames to frontend, rebuilding editable UIs from screenshots/requirements, batch revisions, reusing components and variables, asset delivery, and page comparison. Design and code will not automatically sync bidirectionally, nor is pixel-perfect restoration guaranteed. The maintainer has published a verification scope including auto-pairing, reading, creating and modifying, screenshots, PNG export, and documentation screenshot rebuild cases. For full boundaries, see the repository’s CAPABILITIES.md and Verification Records.

Please note before installation and use:

1. The plugin, like other native DSH plugins, runs with the permissions of the current DSH host process; please read the source code and the MIT license before installing.
2. The paired plugin and keys under DSH_HOME/figma contain local credentials; do not upload or publicly distribute them. The bridge is for local access only.
3. Canvas writing is not transactional; failures may leave partial modifications. For multi-file connections, use figma_select_document to clarify targets.
4. Screenshots and conversation content may enter your configured model provider; OAuth credentials are stored in local private files, and the README states they are not encrypted using the system keychain.

The DeepSeek Harness ecosystem emphasizes “Everything is a Plugin”; the SkillHub Directory Page is a community collection and has no official affiliation with DeepSeek / High-Flyer.

Conclusion¶

DSH to Figma consolidates Figma canvas reading/writing, design system information, and asset export into the Harness native toolchain. The default local mode uses a local companion plugin to complete editing and screenshots, avoiding the consumption of official MCP quota during daily iterations. If you are already using DSH for a design-to-code loop, you can start with the Release package and the figma_setup pairing process.

• Community Directory: DSH-to-Figma @ SkillHub
• Source Code & Documentation: github.com/Duoasa/DSH-to-Figma