工具与指令

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

使用前提

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

远程 MCP 工具范围

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

工具总览

工具	适用形态	能力
design_to_code	本地 MCP	将设计稿生成前端代码，支持 HTML、React、Vue、ArkUI、Flutter 等框架。
refine_generated_code	本地 MCP	design_to_code 完成后自动呈现的代码优化选项，无需主动调用。
get_node_dsl	本地 MCP / 远程 MCP	针对指定图层或节点获取 DSL；默认返回轻量结构，可按需深入读取。
get_screenshot	本地 MCP	获取设计预览图，便于视觉对齐与还原检查。
get_export_image	本地 MCP	导出设计中的图片资源，支持 PNG、SVG、WebP 等多种格式。
get_all_components	本地 MCP	查看当前文件中的全部组件。
get_variants	本地 MCP / 远程 MCP	查看组件集的状态、尺寸等变体信息。
create_instance	本地 MCP	在画布中创建组件实例，快速搭建页面。
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	将网页代码还原为可编辑的设计稿。
get_top_level_frames	本地 MCP	浏览文件中的页面与顶层画板。
read_component_config_data	本地 MCP	读取组件解析配置，用于设计转代码的组件映射。
fetch_context	本地 MCP	了解当前画布、选区与设计资源概况。
load_guidelines	本地 MCP	按场景获取设计规范与最佳实践。
list_style_tags	本地 MCP	浏览可用的设计风格标签。
get_style_guide	本地 MCP	根据风格标签获取设计灵感参考。
query_nodes	本地 MCP	搜索或查看设计稿中的图层信息。
read_components	本地 MCP	查看可复用的组件与组件集。
read_styles	本地 MCP	查看本地与资源库中的共享样式。
read_variables	本地 MCP	查看设计变量，用于保持设计一致性。
write_styles	本地 MCP	创建或管理共享样式。
write_variables	本地 MCP	创建或管理设计变量。
apply_design	本地 MCP	批量创建、修改或组织设计稿内容。
take_screenshot	本地 MCP	截图验证设计效果，支持多图层对比。
check_layout	本地 MCP	检查布局结构，发现潜在问题。
query_all_unique_props	本地 MCP	盘点设计中的颜色、字体、间距等用法。
replace_props	本地 MCP	批量统一设计中的颜色、字号等属性。

design_to_code

将 Pixso 设计稿一键生成前端代码。支持指定图层、当前选中图层或 Pixso 链接，可输出 HTML、React、Vue、ArkUI、Flutter 等主流框架代码。设计转代码场景下应优先使用该工具。

你可以这样提问：

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

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

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

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

refine_generated_code

design_to_code 生成代码后，Agent 会自动展示以下优化选项，供你选择是否继续优化。这不是需要主动调用的工具——完成设计转代码后，直接回复选项即可。

• A — 响应式布局
• B — CSS 变量
• C — Tailwind 转换
• D — 代码精简（去除重复代码）
• E — 对齐项目设计系统 / 组件规范

你可以直接输入选项字母，也可以用自然语言描述想要的优化方向。

你可以这样回复：

执行 A，优化响应式布局。

执行 A、C 和 E。

把代码转成 Tailwind，并提取重复样式。

对齐项目里的设计系统和组件规范。

get_node_dsl

针对具体图层或节点获取 DSL 数据，帮助分析其结构、样式、层级与设计语义。支持当前选中图层、Pixso 链接中的目标图层，或指定节点进行读取。

默认返回轻量 DSL，便于快速了解设计概况；当你需要进一步分析某个区域时，可继续追问以获取更完整的 DSL 内容。

适合需要理解设计结构、而非直接生成代码的场景。若目标是产出代码，请优先使用 design_to_code。

你可以这样提问：

获取当前选中图层的 DSL。

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

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

这个按钮组件的 DSL 不够详细，帮我获取更完整的结构和属性信息。

get_screenshot

获取设计预览截图，便于视觉对齐、还原检查，或在生成代码前确认目标图层。

你可以这样提问：

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

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

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

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

get_export_image

将设计中的图层导出为图片资源，支持 PNG、JPEG、SVG、PDF、WebP 等格式，适合导出图标、插图等素材供开发使用。

你可以这样提问：

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

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

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

把这个按钮图标导出为 WebP。

get_all_components

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

你可以这样提问：

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

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

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

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

get_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 文件。执行前建议明确要修改的图层和属性范围。

你可以这样提问：

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

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

把当前组件中能绑定的属性都绑定到变量。

先读取变量集合，再批量绑定当前组件的属性。

set_fill_style

为图层应用或移除填充样式，统一背景与填充色的视觉规范。

该工具会修改 Pixso 文件。

你可以这样提问：

给当前按钮绑定合适的填充样式。

先读取本地样式，再给当前按钮绑定主色填充。

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

把这个卡片的背景统一绑定到品牌色样式。

set_text_style

为文本图层应用或移除文字样式，统一标题、正文等排版规范。

该工具会修改 Pixso 文件。

你可以这样提问：

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

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

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

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

set_grid_style

为容器应用或移除网格样式，对齐布局与栅格规范。

该工具会修改 Pixso 文件。

你可以这样提问：

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

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

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

给这个列表容器设置统一的布局网格。

set_stroke_style

为图层应用或移除描边样式，统一边框与描边视觉规范。

该工具会修改 Pixso 文件。

你可以这样提问：

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

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

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

把这个表单区域的描边统一绑定到边框颜色样式。

code_to_design

将 HTML 页面或包含网页项目的 ZIP 包还原为可编辑的 Pixso 设计稿，并插入当前画布。适合把已有代码、静态页面或原型快速转为设计文件。

该工具会向当前画布插入新内容。

你可以这样提问：

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

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

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

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

get_top_level_frames

浏览当前文件中的页面与顶层画板，快速定位目标页面或屏幕级设计区域。

你可以这样提问：

列出当前文件中的所有页面。

获取当前页面的顶层画板。

查看首页所在的顶层 Frame。

先列出所有页面，再找到名为 "Home" 的画板。

read_component_config_data

读取组件解析配置，用于设计转代码时建立组件与设计稿之间的映射关系。

你可以这样提问：

读取当前文件的组件配置数据。

获取这个设计系统中所有组件的配置信息。

读取组件配置，帮我生成设计转代码的组件映射。

列出所有组件族及其属性，用于配置组件解析规则。

fetch_context

了解当前画布、选中内容以及组件、变量、样式等设计资源概况，作为开始设计或编辑任务的起点。

你可以这样提问：

获取当前画布的基础信息。

查看当前选中了哪些节点。

读取当前文件的基础设计信息，包括组件、变量和样式。

先了解当前设计文件的整体情况，再决定如何开始任务。

load_guidelines

按场景获取设计规范与最佳实践，例如代码生成、设计系统、移动端、落地页、Web 应用等，帮助 Agent 更贴合场景地开展设计工作。

你可以这样提问：

获取代码生成相关的设计指南。

加载设计系统相关的设计规范。

获取移动端界面布局的设计规范。

加载落地页设计相关的指导方针。

list_style_tags

浏览可用的设计风格标签，为后续获取风格指南做准备。

你可以这样提问：

列出所有可用的风格标签。

查看有哪些设计风格标签可以选择。

先获取风格标签列表，再根据标签获取具体风格指南。

显示全部风格标签，帮我选择适合当前项目的标签。

get_style_guide

根据风格标签获取设计灵感参考，帮助确定视觉方向与设计基调。

你可以这样提问：

根据 modern、minimal、dark 等标签获取设计风格指南。

先列出风格标签，再选择合适的标签获取风格指南。

获取适合移动端界面的风格指南。

根据科技风和简约风标签，生成一份设计灵感参考。

query_nodes

搜索或查看设计稿中的图层信息，例如按名称查找按钮、读取某个图层的样式，或了解组件变体详情。

你可以这样提问：

查询这个图层的详细信息。

搜索所有名称包含 "Button" 的节点。

批量读取这几个节点的填充色和字号。

查看这个组件集中 primary、small 变体的详情。

read_components

查看当前文件中可复用的组件与组件集，了解设计系统里有哪些 building blocks 可用。

你可以这样提问：

读取当前文件中的所有可复用组件。

查看有哪些组件集可以使用。

先读取组件列表，再查询具体组件的详细信息。

列出设计系统中的所有组件，帮我规划组件复用方案。

read_styles

查看本地与资源库中的共享样式，用于后续应用样式或检查设计规范一致性。

你可以这样提问：

读取当前文件的所有共享样式。

查看本地和资源库中有哪些颜色样式和文字样式。

整理当前文件的样式，检查是否有重复或未使用的样式。

帮我找出适合应用到当前按钮的样式。

read_variables

查看设计变量与变量集合，确保设计中使用统一的 token 而非零散数值。

你可以这样提问：

读取当前文件中的所有设计变量。

查看有哪些变量集和变量可以使用。

列出所有变量及其值，帮我检查变量是否完整。

先读取变量，再判断当前设计中哪些属性应改为变量。

write_styles

创建或管理共享样式，维护颜色、文字、效果等设计 token。

该工具会修改 Pixso 文件。

你可以这样提问：

创建一组品牌色共享样式。

将这个颜色样式重命名为新的名称。

更新指定文字样式的字号和行高。

删除未使用的颜色样式。

write_variables

创建或管理设计变量与变量集合，建立和维护设计 token 体系。

该工具会修改 Pixso 文件。

你可以这样提问：

创建一组颜色变量集，并添加主色和辅色变量。

重命名这个变量集。

更新变量的多模式值。

删除指定的变量集及其所有变量。

apply_design

批量创建、修改或组织设计稿内容，例如在画布上搭建页面结构、更新样式、移动或删除图层。

该工具会修改 Pixso 文件。

你可以这样提问：

在当前画布创建一个新的 Frame 并添加子节点。

批量更新这些节点的填充色和字号。

把这个节点移动到指定父节点下。

删除这些不需要的节点。

take_screenshot

对设计结果截图验证，支持同时对比多个图层，检查视觉还原与最终效果。

你可以这样提问：

截取当前节点的截图。

同时截取这三个节点的截图，进行视觉对比。

截图检查设计结果是否符合预期。

截取修改前后的节点截图，对比差异。

check_layout

检查设计稿的布局结构，发现对齐、嵌套或布局规范方面的问题。

你可以这样提问：

检查当前画板的布局结构。

只显示存在问题的布局节点。

检查这个容器节点的布局是否合理。

分析当前设计的布局问题并给出修复建议。

query_all_unique_props

盘点设计中使用的颜色、字体、间距、圆角等属性，发现不一致或偏离规范的地方。

你可以这样提问：

查找这个画板下所有使用到的填充颜色。

列出当前节点树中所有的字体和字号。

审计这个组件的间距和圆角值，找出不一致的地方。

先盘点所有属性用法，再统一替换为标准值。

replace_props

批量统一设计中的颜色、字号、圆角等属性，快速修复不一致问题。

该工具会修改 Pixso 文件。

你可以这样提问：

把这个画板下所有红色填充统一替换为主色。

将所有 14px 的字号统一替换为 16px。

把所有 4px 的圆角改为 8px。

先盘点属性用法，再把杂散颜色统一替换为标准色。

提示词建议

明确目标图层

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

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

注意

item-id 用于定位具体图层。page-id 表示页面，不能替代图层 ID 使用。

明确输出框架

生成 Vue 3 代码。

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

生成 ArkUI 代码。

明确是否允许写回

样式绑定、变量绑定、创建实例、批量编辑设计稿、代码转设计等操作会修改 Pixso 文件。执行前建议说明允许修改的范围。

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

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

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

使用建议

• 设计转代码优先使用 design_to_code。
• 需要分析设计结构时，使用 get_node_dsl；默认先获取轻量 DSL，需要时再深入读取。
• 需要视觉对齐时，可使用 get_screenshot 或 take_screenshot 截图对比。
• 需要导出图片资源时，使用 get_export_image。
• 编辑设计稿前，可先了解画布概况，再查看组件、样式和变量。
• 需要绑定样式或变量时，先读取相关列表，再执行写回操作。
• 需要统一设计规范时，可先盘点属性用法，再批量替换。
• 选择图层时，优先选择最小但完整的业务容器，避免直接选择过大的画板。