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 desktop client / Pixso IDE plugin 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	Turn designs into frontend code for HTML, React, Vue, ArkUI, Flutter, and more.
refine_generated_code	Local MCP	Code optimization options shown automatically after design_to_code; no need to invoke separately.
get_node_dsl	Local MCP / Remote MCP	Get DSL for a specific layer or node; lightweight by default, with deeper reads on request.
get_screenshot	Local MCP	Capture a design preview for visual alignment and fidelity checks.
get_export_image	Local MCP	Export design assets as PNG, SVG, WebP, and other formats.
get_all_components	Local MCP	View all components in the current file.
get_variants	Local MCP / Remote MCP	View component variants such as states, sizes, and themes.
create_instance	Local MCP	Place component instances on the canvas to build pages faster.
get_local_styles	Local MCP / Remote MCP	View local styles in the current file.
get_remote_styles	Local MCP	View shared styles from team libraries.
get_variable_sets	Local MCP / Remote MCP	View design variable collections.
get_variables	Local MCP / Remote MCP	View design variables and their values.
set_bound_variables	Local MCP	Bind design variables to layer properties.
set_fill_style	Local MCP	Apply or remove fill styles on layers.
set_text_style	Local MCP	Apply or remove text styles on text layers.
set_grid_style	Local MCP	Apply or remove grid styles on containers.
set_stroke_style	Local MCP	Apply or remove stroke styles on layers.
code_to_design	Local MCP	Turn web code into editable designs.
get_top_level_frames	Local MCP	Browse pages and top-level frames in a file.
read_component_config_data	Local MCP	Read component mapping config for design-to-code workflows.
fetch_context	Local MCP	Understand the current canvas, selection, and design resources.
load_guidelines	Local MCP	Get design guidelines and best practices by scenario.
list_style_tags	Local MCP	Browse available design style tags.
get_style_guide	Local MCP	Get design inspiration based on style tags.
query_nodes	Local MCP	Search for or inspect layers in a design.
read_components	Local MCP	View reusable components and component sets.
read_styles	Local MCP	View shared styles from local files and libraries.
read_variables	Local MCP	View design variables to keep designs consistent.
write_styles	Local MCP	Create and manage shared styles.
write_variables	Local MCP	Create and manage design variables.
apply_design	Local MCP	Create, update, and organize design content in bulk.
take_screenshot	Local MCP	Capture screenshots to verify design results, with multi-layer comparison.
check_layout	Local MCP	Review layout structure and spot potential issues.
query_all_unique_props	Local MCP	Audit colors, fonts, spacing, and other properties in a design.
replace_props	Local MCP	Batch-update colors, font sizes, and other properties for consistency.

design_to_code

Turn Pixso designs into frontend code in one step. Works with a selected layer, a specified layer, or a Pixso link, and supports HTML, React, Vue, ArkUI, Flutter, and other popular frameworks. Use this tool first for design-to-code tasks.

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

After design_to_code generates code, the Agent automatically presents the optimization options below for you to choose from. This is not a tool you need to invoke yourself — once design-to-code is done, simply reply with your choice.

• A — Responsive layout
• B — CSS variables
• C — Tailwind conversion
• D — Code cleanup (remove duplicate code)
• E — Align with project design system / components

You can reply with option letters or describe the optimization you want in natural language.

You can reply like this:

Execute A to improve responsive layout.

Execute A, C, and E.

Convert the code to Tailwind and remove duplicate styles.

Align the code with our project design system and components.

get_node_dsl

Get DSL data for a specific layer or node to analyze its structure, styles, hierarchy, and design intent. Works with the current selection, a target layer from a Pixso link, or a specified node.

By default, it returns a lightweight DSL so you can quickly understand the design at a glance. When you need to dig deeper into a specific area, keep asking to get more complete DSL content.

Best when you need to understand design structure rather than generate code directly. For code output, use design_to_code first.

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

The DSL for this button component isn't detailed enough — get the full structure and property information.

get_screenshot

Capture a design preview for visual alignment, fidelity 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 design layers as image assets in PNG, JPEG, SVG, PDF, WebP, and other formats. Useful for icons, illustrations, and other assets needed in development.

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 this button icon 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

View component variants such as states, sizes, and themes to understand how a component behaves in different scenarios.

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

View local styles in the current file, including colors, text, strokes, and grids. Useful 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

View shared styles from team libraries. Useful for reusing design standards across files 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

View design variables and their values. Useful for reading color, spacing, and other tokens, and for code mapping or 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 design variables to layer or text properties such as size, spacing, corner radius, color, font size, and more to keep designs consistent and easier to maintain.

This tool will modify the Pixso file. It is recommended to clarify which layers and properties may be changed 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 all bindable properties in the current component to variables.

Read variable sets first, then batch-bind properties in the current component.

set_fill_style

Apply or remove fill styles on layers to keep backgrounds and fills aligned with your design system.

This tool will modify the Pixso file.

You can ask like this:

Apply a suitable fill style to the current button.

Read local styles first, then bind the primary fill color to the current button.

Remove the fill style binding of the current node.

Apply the brand color style to this card background.

set_text_style

Apply or remove text styles on text layers to keep typography consistent across titles, body text, and labels.

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

Apply or remove grid styles on containers to align layouts with your grid standards.

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.

Apply a consistent layout grid to this list container.

set_stroke_style

Apply or remove stroke styles on layers to keep borders and outlines consistent.

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.

Apply the border color style to all fields in this form area.

code_to_design

Turn HTML pages or web project ZIP files into editable Pixso designs and insert them onto the current canvas. Useful for converting existing code, static pages, or prototypes into design files.

This tool will insert new content 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.

get_top_level_frames

Browse pages and top-level frames in the current file to quickly locate the target page or screen-level design area.

You can ask like this:

List all pages in the current file.

Get top-level frames on the current page.

Find the top-level frame for the home screen.

List all pages first, then find the frame that matches "Home".

read_component_config_data

Read component mapping configuration for design-to-code workflows, helping connect design components to generated code.

You can ask like this:

Read component config data from the current file.

Get config information for all components in this design system.

Read component config and help me set up design-to-code component mapping.

List all component families and their properties for parser configuration.

fetch_context

Understand the current canvas, selection, and available design resources such as components, variables, and styles before starting a design or editing task.

You can ask like this:

Get the basic information of the current canvas.

Check which nodes are currently selected.

Read the basic design information of the current file, including components, variables, and styles.

Understand the current file first, then decide how to start the task.

load_guidelines

Get design guidelines and best practices by scenario, such as code generation, design systems, mobile apps, landing pages, and web apps.

You can ask like this:

Get design guidelines on code generation.

Load guidelines for the design system scenario.

Get design specifications for mobile app layout.

Load guidelines related to landing page design.

list_style_tags

Browse available design style tags to prepare for style guide lookup.

You can ask like this:

List all available style tags.

See what design style tags are available to choose from.

Get the list of style tags first, then get a specific style guide based on a tag.

Show all style tags and help me choose tags suitable for the current project.

get_style_guide

Get design inspiration based on style tags to help define the visual direction and tone of a design.

You can ask like this:

Get a design style guide based on tags like modern, minimal, and dark.

List style tags first, then choose suitable tags to get a style guide.

Get a style guide suitable for mobile interfaces.

Generate a design inspiration reference based on tech and minimalist style tags.

query_nodes

Search for or inspect layers in a design, such as finding buttons by name, reading a layer's styles, or checking component variant details.

You can ask like this:

Query detailed information for this layer.

Search for all nodes whose names contain "Button".

Batch read the fill colors and font sizes of these nodes.

Check the primary, small variant in this component set.

read_components

View reusable components and component sets in the current file to understand what building blocks are available in the design system.

You can ask like this:

Read all reusable components in the current file.

Check what component sets are available.

Read the component list first, then query detailed information of a specific component.

List all components in the design system and help me plan a component reuse strategy.

read_styles

View shared styles from local files and libraries for applying styles or checking design consistency.

You can ask like this:

Read all shared styles of the current file.

Check what color styles and text styles are in the local and library.

Organize the styles of the current file and check for duplicate or unused styles.

Help me find a suitable style for the current button.

read_variables

View design variables and variable sets to ensure designs use consistent tokens instead of scattered values.

You can ask like this:

Read all design variables in the current file.

Check what variable sets and variables are available.

List all variables and their values, and help me check if the variables are complete.

Read variables first, then determine which properties should use variables instead.

write_styles

Create and manage shared styles for colors, text, effects, and other design tokens.

This tool will modify the Pixso file.

You can ask like this:

Create a set of brand color shared styles.

Rename this color style to a new name.

Update the font size and line height of a specified text style.

Delete unused color styles.

write_variables

Create and manage design variables and variable sets to build and maintain a design token system.

This tool will modify the Pixso file.

You can ask like this:

Create a color variable set and add primary and secondary color variables.

Rename this variable set.

Update the multi-mode values of a variable.

Delete a specified variable set and all its variables.

apply_design

Create, update, and organize design content in bulk, such as building page structure, updating styles, or moving and deleting layers.

This tool will modify the Pixso file.

You can ask like this:

Create a new Frame on the current canvas and add child nodes.

Batch update the fill colors and font sizes of these nodes.

Move this node under a specified parent node.

Delete these unnecessary nodes.

take_screenshot

Capture screenshots to verify design results, with support for comparing multiple layers side by side.

You can ask like this:

Take a screenshot of the current node.

Take screenshots of these three nodes simultaneously for visual comparison.

Take a screenshot to check if the design result meets expectations.

Take screenshots of the node before and after modification to compare differences.

check_layout

Review the layout structure of a design and spot issues with alignment, nesting, or layout standards.

You can ask like this:

Check the layout structure of the current artboard.

Only show layout nodes that have problems.

Check whether the layout of this container looks correct.

Analyze layout issues in the current design and provide repair suggestions.

query_all_unique_props

Audit colors, fonts, spacing, corner radius, and other properties used in a design to find inconsistencies or deviations from standards.

You can ask like this:

Find all fill colors used under this artboard.

List all fonts and font sizes in the current node tree.

Audit the spacing and corner radius values of this component to find inconsistencies.

Audit all property usage first, then replace non-standard values.

replace_props

Batch-update colors, font sizes, corner radius, and other properties to quickly fix inconsistencies across a design.

This tool will modify the Pixso file.

You can ask like this:

Replace all red fills under this artboard with the primary brand color.

Uniformly replace all 14px font sizes with 16px.

Change all 4px corner radii to 8px.

Audit property usage first, then replace stray colors with standard colors.

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 locates a specific layer. page-id refers to a page and cannot be used as a layer ID.

Specify Output Framework

Generate Vue 3 code.

Generate a React component and use CSS Modules.

Generate ArkUI code.

Clarify Write-back Permission

Tasks such as style binding, variable binding, creating instances, bulk design edits, 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 to analyze design structure; start with the lightweight DSL and ask for more detail when needed.
• When visual alignment is needed, use get_screenshot or take_screenshot for comparison.
• When you need to export image resources, use get_export_image.
• Before editing a design, start by understanding the canvas, then review components, styles, and variables.
• When binding styles or variables, read the relevant lists first, then apply changes.
• To unify design standards, audit property usage first, then batch-update values.
• When selecting layers, prioritize choosing the smallest but complete business container to avoid directly selecting an overly large artboard.