工具与指令

Pixso MCP 会把 Pixso 客户端中的设计稿能力提供给 Agent 客户端。用户可以直接用自然语言描述目标，Agent 会根据任务自动调用对应工具。

使用前提

使用本地 Pixso MCP 时，请保持 Pixso 客户端开启，并保持目标设计文件处于打开状态。使用当前选中图层时，请确保目标图层已在画布中选中。

远程 MCP 工具范围

远程 MCP 当前仅提供 5 个读取类工具：get_node_dsl、get_variable_sets、get_variables、get_variants、get_local_styles。 代码生成、截图、图片导出、样式/变量写回、创建组件实例、代码转设计等能力仅在本地 MCP 中提供。

工具总览

工具	适用形态	能力
design_to_code	本地 MCP	将指定图层或当前选中图层生成代码。
refine_generated_code	本地 MCP	对已生成代码做二次优化。
get_node_dsl	本地 MCP / 远程 MCP	获取图层结构化 DSL。
get_screenshot	本地 MCP	获取图层截图。
get_export_image	本地 MCP	按导出参数导出图层图片。
get_all_components	本地 MCP	获取当前文件中的全部组件。
get_variants	本地 MCP / 远程 MCP	获取组件集或变体图层的 variants 信息。
create_instance	本地 MCP	根据组件 key 创建实例。
get_local_styles	本地 MCP / 远程 MCP	获取本地样式。
get_remote_styles	本地 MCP	获取远程样式。
get_variable_sets	本地 MCP / 远程 MCP	获取变量集合。
get_variables	本地 MCP / 远程 MCP	获取指定变量集合中的变量。
set_bound_variables	本地 MCP	给节点属性或文本属性绑定变量。
set_fill_style	本地 MCP	给节点绑定填充样式。
set_text_style	本地 MCP	给文本节点绑定文字样式。
set_grid_style	本地 MCP	给节点绑定网格样式。
set_stroke_style	本地 MCP	给节点绑定描边样式。
code_to_design	本地 MCP	将 HTML 或 ZIP 中的网页代码转换为 Pixso 节点。

design_to_code

将 Pixso 图层转换为前端代码。支持通过 itemId 指定图层，也支持使用当前选中图层。当前支持的目标框架包括 html、react、vue、arkui、flutter。

设计转代码时应优先使用该工具；只有当用户明确需要 DSL，或目标任务不是代码生成时，再考虑使用 get_node_dsl。

你可以这样提问：

根据当前选中的图层生成 HTML 代码。

根据这个 Pixso 链接生成 Vue 代码：https://pixso.cn/app/design/xxx?item-id=1:2

把这个容器生成 React 组件，尽量保持视觉还原。

根据当前选区生成 Flutter 页面代码，并说明图片资源如何处理。

refine_generated_code

对 design_to_code 生成的代码做二次优化。该工具通常会先给出 A、B、C、D 等优化选项，用户可以直接输入选项编号或字母来执行对应优化，也可以组合多个选项一起执行。

常见选项包括响应式布局、语义化 HTML、CSS 变量、Tailwind 转换、语法质量、重复代码提取或项目设计系统对齐等。实际可选项以 Agent 当前返回的选项列表为准。

你可以这样提问：

执行 A。

执行 A、C、F。

执行响应式布局选项。

get_node_dsl

获取指定图层或当前选中图层的结构化 DSL。DSL 可用于分析图层结构、属性、样式、层级和设计语义。

该工具不是默认的设计转代码入口。如果目标是直接生成代码，请优先使用 design_to_code。

你可以这样提问：

获取当前选中图层的 DSL。

先读取这个图层的 DSL，不要生成代码，帮我分析它的层级结构。

根据这个链接获取节点 DSL：https://pixso.cn/app/design/xxx?item-id=1:2

读取 DSL 后，判断这个设计适合拆成哪些前端组件。

get_screenshot

获取指定图层或当前选中图层的 PNG 预览截图。适合用于视觉对齐、还原检查或在生成代码前确认目标图层。

你可以这样提问：

获取当前选中图层的截图。

先截取这个图层，再根据截图检查生成代码是否还原。

根据这个链接获取截图：https://pixso.cn/app/design/xxx?item-id=1:2

先获取截图和代码，再对比说明哪些地方可能还原不准确。

get_export_image

按导出参数导出图层图片，可用于获取 PNG、JPEG、SVG、PDF 等格式资源。适合导出图标、插图、位图素材或需要指定倍率、尺寸、格式的场景。

你可以这样提问：

把当前选中的图标导出为 SVG。

将这个节点按 2 倍图导出为 PNG。

导出这个设计里的图片资源，并告诉我前端应该如何引用。

把 item-id 为 1:2 的图层导出为 WebP。

get_all_components

获取当前 Pixso 文件中的全部组件信息。适合在生成代码、创建实例或做组件复用分析前使用。

你可以这样提问：

列出当前文件中的全部组件。

帮我找出当前文件里可以复用的按钮组件。

查看当前文件有哪些组件，并按组件类型归类。

先获取全部组件，再判断当前设计是否能复用已有组件。

get_variants

获取指定组件集或变体图层的 variants 信息。适合分析组件属性、状态、尺寸、主题等变体维度。

你可以这样提问：

获取当前组件集的所有 variants。

分析这个按钮组件集有哪些状态和尺寸变体。

根据这个链接读取组件变体：https://pixso.cn/app/design/xxx?item-id=1:2

把这个组件集的 variants 整理成属性表。

create_instance

根据组件 key 在当前画布中创建组件实例。适合根据已有组件批量搭建页面或验证组件复用。

你可以这样提问：

根据这个 componentKey 创建一个组件实例。

先查找按钮组件，再创建一个实例到当前画布。

用当前文件中的 Card 组件创建一个实例。

创建实例后，不要修改原组件。

get_local_styles

获取当前文件中的本地样式，包括颜色、文字、描边、网格等样式。适合做设计系统检查、样式绑定或代码 token 映射。

你可以这样提问：

列出当前文件中的所有本地样式。

获取本地颜色样式和文字样式，并整理成表格。

先读取本地样式，再判断当前组件是否使用了正确样式。

帮我找出适合绑定到这个节点的本地填充样式。

get_remote_styles

获取当前文件可用的远程样式或资源库样式。适合检查团队资源库样式、跨文件样式复用或绑定远程样式。

你可以这样提问：

列出当前文件可用的远程样式。

查找远程资源库里的品牌色样式。

对比本地样式和远程样式，找出可以统一的部分。

先获取远程样式，再帮我选择适合这个按钮的描边样式。

get_variable_sets

获取当前文件中的全部变量集合。适合在读取具体变量前先了解变量分组，例如颜色、尺寸、间距、主题等集合。

你可以这样提问：

列出当前文件中的所有变量集合。

查看这个文件有哪些变量集合，并说明每个集合可能的用途。

先获取变量集合，再继续读取颜色变量。

帮我判断这个文件是否已经建立设计 token 体系。

get_variables

获取指定变量集合中的变量。适合读取颜色、数字、文本、布尔等变量，并用于代码 token 映射或节点变量绑定。

你可以这样提问：

读取这个变量集合里的所有变量。

获取颜色变量集合，并列出变量名和值。

找出可以绑定到当前节点填充色的变量。

先读取变量，再判断当前设计中哪些属性可以改成变量绑定。

set_bound_variables

将变量绑定到节点属性或文本属性。可绑定的属性包括尺寸、间距、圆角、透明度、填充色、描边色、字号、字体、行高等。

该工具会修改 Pixso 文件。执行前建议明确目标节点、目标属性和变量来源。

你可以这样提问：

把当前节点的填充色绑定到对应的颜色变量。

把这个文本节点的字号和行高绑定到文字变量。

把节点 1:2 的宽高、圆角和间距绑定到已有数字变量。

先读取变量集合，再把当前组件中能绑定的属性都绑定到变量。

set_fill_style

为节点设置填充样式。需要提供样式 key；如果传入空字符串，可移除填充样式绑定。

该工具会修改 Pixso 文件。

你可以这样提问：

把当前节点的填充样式设置为这个 styleKey。

先读取本地样式，再给当前按钮绑定合适的填充样式。

移除当前节点的填充样式绑定。

把节点 1:2 的背景绑定到本地的主色样式。

set_text_style

为文本节点设置文字样式。需要提供文字样式 key；如果传入空字符串，可移除文字样式绑定。

该工具会修改 Pixso 文件。

你可以这样提问：

把当前文本节点绑定到指定文字样式。

先读取本地文字样式，再给这个标题文本绑定合适的样式。

移除这个文本节点的文字样式绑定。

检查这个组件里的文本节点，并统一绑定到已有文字样式。

set_grid_style

为节点设置网格样式。适合给 Frame 或布局容器绑定已有网格规范。

该工具会修改 Pixso 文件。

你可以这样提问：

把当前画板绑定到已有网格样式。

先读取本地网格样式，再给这个容器设置合适的网格。

移除当前节点的网格样式绑定。

给节点 1:2 设置这个 layout grid styleKey。

set_stroke_style

为节点设置描边样式。需要提供颜色样式 key；如果传入空字符串，可移除描边样式绑定。

该工具会修改 Pixso 文件。

你可以这样提问：

把当前节点的描边绑定到指定样式。

先读取本地颜色样式，再给这个输入框设置描边样式。

移除当前节点的描边样式绑定。

把节点 1:2 的描边统一绑定到边框颜色样式。

code_to_design

将 HTML 字符串或包含 HTML/CSS/assets 的 ZIP 转换为 Pixso 设计节点，并粘贴到当前画布。适合将已有页面、组件代码或静态原型还原成可编辑设计稿。

该工具会向当前画布插入新节点。

你可以这样提问：

把这段 HTML 和 CSS 转换成 Pixso 设计稿。

根据这个 ZIP 里的网页项目生成 Pixso 节点。

把项目里的登录页代码转成可编辑设计稿，并插入当前画布。

将这段静态页面代码转换到 Pixso，但不要覆盖当前已有内容。

提示词建议

明确目标图层

优先提供带 item-id 的图层链接，或在 Pixso 客户端中选中一个明确的容器图层。

根据这个图层生成代码：https://pixso.cn/app/design/xxx?item-id=1:2

注意

item-id 才是定位图层的关键参数。page-id 不是图层 ID，不能作为 itemId 使用。

明确输出框架

生成 Vue 3 代码。

生成 React 组件，并使用 CSS Modules。

生成 ArkUI 代码。

明确是否允许写回

样式绑定、变量绑定、创建实例、代码转设计等任务会修改 Pixso 文件。执行这类操作前，建议明确写回范围。

允许写回当前文件。只修改当前选中的节点，不要修改其他图层。

允许创建组件实例，但不要修改原组件。

允许绑定变量，但先列出将要修改的属性。

使用建议

• 设计转代码优先使用 design_to_code。
• 需要分析结构、检查层级或输出 DSL 时，再使用 get_node_dsl。
• 需要视觉对齐时，可以先使用 get_screenshot。
• 需要导出图片资源时，使用 get_export_image。
• 需要绑定样式或变量时，先读取样式、变量列表，再执行写回工具。
• 选择图层时，优先选择最小但完整的业务容器，避免直接选择过大的画板。