Tools & Commands

Pixso MCP provides the design capabilities from the Pixso client to the Agent client. Users can directly describe their goals in natural language, and the Agent will automatically call the corresponding tools based on the tasks.

Prerequisites

When using the local Pixso MCP, please keep the Pixso client open and the target design file open. When using the currently selected layer, ensure the target layer is selected on the canvas.

Remote MCP Tool Scope

Remote MCP currently only provides 5 read-only tools: get_node_dsl, get_variable_sets, get_variables, get_variants, get_local_styles. Capabilities such as code generation, screenshots, image export, writing back styles/variables, creating component instances, and code-to-design are only available in the local MCP.

Tool Overview

Tool	Applicable Mode	Capability
design_to_code	Local MCP	Generate code from a specified layer or the currently selected layer.
refine_generated_code	Local MCP	Perform secondary optimization on the generated code.
get_node_dsl	Local MCP / Remote MCP	Get the structured DSL of a layer.
get_screenshot	Local MCP	Get a screenshot of a layer.
get_export_image	Local MCP	Export a layer image based on export parameters.
get_all_components	Local MCP	Get all components in the current file.
get_variants	Local MCP / Remote MCP	Get the variants information of a component set or variant layer.
create_instance	Local MCP	Create an instance based on a component key.
get_local_styles	Local MCP / Remote MCP	Get local styles.
get_remote_styles	Local MCP	Get remote styles.
get_variable_sets	Local MCP / Remote MCP	Get variable sets.
get_variables	Local MCP / Remote MCP	Get variables in a specified variable set.
set_bound_variables	Local MCP	Bind variables to node properties or text properties.
set_fill_style	Local MCP	Bind a fill style to a node.
set_text_style	Local MCP	Bind a text style to a text node.
set_grid_style	Local MCP	Bind a grid style to a node.
set_stroke_style	Local MCP	Bind a stroke style to a node.
code_to_design	Local MCP	Convert web code from HTML or ZIP into Pixso nodes.

design_to_code

Convert Pixso layers into frontend code. Supports specifying layers via itemId or using the currently selected layer. Currently supported target frameworks include html, react, vue, arkui, and flutter.

This tool should be prioritized for design-to-code tasks; only consider using get_node_dsl when the user explicitly requires DSL or the target task is not code generation.

You can ask like this:

Generate HTML code based on the currently selected layer.

Generate Vue code based on this Pixso link: https://pixso.cn/app/design/xxx?item-id=1:2

Generate a React component for this container, keeping the visual restoration as close as possible.

Generate Flutter page code based on the current selection, and explain how image resources are handled.

refine_generated_code

Perform secondary optimization on the code generated by design_to_code. This tool usually provides optimization options like A, B, C, D first, and the user can directly input the option number or letter to execute the corresponding optimization, or combine multiple options to execute together.

Common options include responsive layout, semantic HTML, CSS variables, Tailwind conversion, syntax quality, duplicate code extraction, or project design system alignment. The actual available options are based on the option list currently returned by the Agent.

You can ask like this:

Execute A.

Execute A, C, F.

Execute the responsive layout option.

get_node_dsl

Get the structured DSL of a specified layer or the currently selected layer. DSL can be used to analyze layer structure, properties, styles, hierarchy, and design semantics.

This tool is not the default entry for design-to-code. If the goal is to directly generate code, please prioritize using design_to_code.

You can ask like this:

Get the DSL of the currently selected layer.

Read the DSL of this layer first, do not generate code, help me analyze its hierarchical structure.

Get the node DSL based on this link: https://pixso.cn/app/design/xxx?item-id=1:2

After reading the DSL, determine which frontend components this design is suitable to be split into.

get_screenshot

Get a PNG preview screenshot of a specified layer or the currently selected layer. Suitable for visual alignment, restoration checks, or confirming the target layer before generating code.

You can ask like this:

Get a screenshot of the currently selected layer.

Take a screenshot of this layer first, then check if the generated code is restored based on the screenshot.

Get a screenshot based on this link: https://pixso.cn/app/design/xxx?item-id=1:2

Get the screenshot and code first, then compare and explain where the restoration might be inaccurate.

get_export_image

Export a layer image based on export parameters, which can be used to obtain resources in formats like PNG, JPEG, SVG, PDF, etc. Suitable for exporting icons, illustrations, bitmap assets, or scenarios requiring specific scales, sizes, and formats.

You can ask like this:

Export the currently selected icon as SVG.

Export this node as a 2x PNG.

Export the image resources in this design and tell me how the frontend should reference them.

Export the layer with item-id 1:2 as WebP.

get_all_components

Get all component information in the current Pixso file. Suitable for use before generating code, creating instances, or doing component reuse analysis.

You can ask like this:

List all components in the current file.

Help me find reusable button components in the current file.

Check what components are in the current file and categorize them by component type.

Get all components first, then determine if the current design can reuse existing components.

get_variants

Get the variants information of a specified component set or variant layer. Suitable for analyzing variant dimensions such as component properties, states, sizes, and themes.

You can ask like this:

Get all variants of the current component set.

Analyze what state and size variants this button component set has.

Read component variants based on this link: https://pixso.cn/app/design/xxx?item-id=1:2

Organize the variants of this component set into a property table.

create_instance

Create a component instance on the current canvas based on the component key. Suitable for batch building pages based on existing components or verifying component reuse.

You can ask like this:

Create a component instance based on this componentKey.

Find the button component first, then create an instance on the current canvas.

Create an instance using the Card component in the current file.

After creating the instance, do not modify the original component.

get_local_styles

Get local styles in the current file, including color, text, stroke, grid styles, etc. Suitable for design system checks, style binding, or code token mapping.

You can ask like this:

List all local styles in the current file.

Get local color styles and text styles, and organize them into a table.

Read local styles first, then determine if the current component uses the correct styles.

Help me find a local fill style suitable for binding to this node.

get_remote_styles

Get available remote styles or library styles for the current file. Suitable for checking team library styles, cross-file style reuse, or binding remote styles.

You can ask like this:

List the remote styles available for the current file.

Find brand color styles in the remote library.

Compare local styles and remote styles to find parts that can be unified.

Get remote styles first, then help me choose a suitable stroke style for this button.

get_variable_sets

Get all variable sets in the current file. Suitable for understanding variable groupings (e.g., color, size, spacing, theme) before reading specific variables.

You can ask like this:

List all variable sets in the current file.

Check what variable sets are in this file and explain the possible use of each set.

Get variable sets first, then continue to read color variables.

Help me determine if this file has established a design token system.

get_variables

Get variables in a specified variable set. Suitable for reading color, number, text, boolean variables, etc., and used for code token mapping or node variable binding.

You can ask like this:

Read all variables in this variable set.

Get the color variable set and list the variable names and values.

Find variables that can be bound to the fill color of the current node.

Read variables first, then determine which properties in the current design can be changed to variable bindings.

set_bound_variables

Bind variables to node properties or text properties. Bindable properties include size, spacing, corner radius, opacity, fill color, stroke color, font size, font family, line height, etc.

This tool will modify the Pixso file. It is recommended to clarify the target node, target property, and variable source before execution.

You can ask like this:

Bind the fill color of the current node to the corresponding color variable.

Bind the font size and line height of this text node to text variables.

Bind the width, height, corner radius, and spacing of node 1:2 to existing number variables.

Read variable sets first, then bind all bindable properties in the current component to variables.

set_fill_style

Set a fill style for a node. A style key needs to be provided; if an empty string is passed, the fill style binding can be removed.

This tool will modify the Pixso file.

You can ask like this:

Set the fill style of the current node to this styleKey.

Read local styles first, then bind a suitable fill style to the current button.

Remove the fill style binding of the current node.

Bind the background of node 1:2 to the local primary color style.

set_text_style

Set a text style for a text node. A text style key needs to be provided; if an empty string is passed, the text style binding can be removed.

This tool will modify the Pixso file.

You can ask like this:

Bind the current text node to a specified text style.

Read local text styles first, then bind a suitable style to this title text.

Remove the text style binding of this text node.

Check the text nodes in this component and uniformly bind them to existing text styles.

set_grid_style

Set a grid style for a node. Suitable for binding existing grid specifications to a Frame or layout container.

This tool will modify the Pixso file.

You can ask like this:

Bind the current artboard to an existing grid style.

Read local grid styles first, then set a suitable grid for this container.

Remove the grid style binding of the current node.

Set this layout grid styleKey for node 1:2.

set_stroke_style

Set a stroke style for a node. A color style key needs to be provided; if an empty string is passed, the stroke style binding can be removed.

This tool will modify the Pixso file.

You can ask like this:

Bind the stroke of the current node to a specified style.

Read local color styles first, then set a stroke style for this input box.

Remove the stroke style binding of the current node.

Uniformly bind the stroke of node 1:2 to the border color style.

code_to_design

Convert an HTML string or a ZIP containing HTML/CSS/assets into Pixso design nodes and paste them onto the current canvas. Suitable for restoring existing pages, component code, or static prototypes into editable design drafts.

This tool will insert new nodes into the current canvas.

You can ask like this:

Convert this HTML and CSS into a Pixso design draft.

Generate Pixso nodes based on the web project in this ZIP.

Convert the login page code in the project into an editable design draft and insert it into the current canvas.

Convert this static page code to Pixso, but do not overwrite the existing content.

Prompt Suggestions

Specify Target Layer

Prioritize providing a layer link with item-id, or select a specific container layer in the Pixso client.

Generate code based on this layer: https://pixso.cn/app/design/xxx?item-id=1:2

Note

item-id is the key parameter for locating a layer. page-id is not a layer ID and cannot be used as itemId.

Specify Output Framework

Generate Vue 3 code.

Generate a React component and use CSS Modules.

Generate ArkUI code.

Clarify Write-back Permission

Tasks like style binding, variable binding, creating instances, and code-to-design will modify the Pixso file. Before executing such operations, it is recommended to clarify the write-back scope.

Write-back to the current file is allowed. Only modify the currently selected node, do not modify other layers.

Creating component instances is allowed, but do not modify the original component.

Binding variables is allowed, but list the properties to be modified first.

Usage Suggestions

• Prioritize using design_to_code for design-to-code tasks.
• Use get_node_dsl when you need to analyze structure, check hierarchy, or output DSL.
• When visual alignment is needed, you can use get_screenshot first.
• When you need to export image resources, use get_export_image.
• When you need to bind styles or variables, read the style or variable list first, then execute the write-back tool.
• When selecting layers, prioritize choosing the smallest but complete business container to avoid directly selecting an overly large artboard.