快速开始

D2C Plus（以下简称 D2C⁺）是企业研发模式下的设计转代码能力：选中页面、组件或图层后，即可生成可落地的前端代码。

D2C⁺ 主要提供以下能力：

• 高保真还原：按设计稿的结构、布局与样式生成代码。不绑定代码库时，无需编写任何配置即可使用。
• 多框架输出：支持 React、Vue、Flutter。
• 对接设计系统：需要时，可在 DSM 中通过组件解析器，把设计稿里的组件实例映射为项目中的组件标签和属性。

除了在 Pixso 客户端的研发模式中直接生成，也可以通过 本地 MCP 或 远程 MCP 调用 design_to_code，获取同一套 D2C⁺ 生成结果。工具说明见 工具与指令。

使用前提

• 需要企业版 全功能席位 或 研发席位。
• 仅企业空间中的文件支持 D2C⁺。企业空间内的文件（包括该空间下的个人草稿）可以使用；不在企业空间内的文件无法使用。

启动研发模式

打开企业空间中的目标设计文件，点击右上角的 研发模式 开关即可进入研发模式。

选择 D2C⁺ 并生成代码

在研发模式下，点击右栏 D2C 选项的下拉菜单，选择 D2C⁺。然后选中任意一个设计稿或者元素，即可生成对应的代码。

小提示

如果你不需要将设计稿中的组件实例和代码库绑定，则无需编写任何配置文件。

解析和映射

如果需要把设计组件映射到项目组件库（例如将 Button 输出为 el-button），需要一份组件解析器配置。不需要绑定时，可跳过本节。

配置可以从两条路径获得：

• 用 MCP 根据组件库文件自动生成（推荐）：打开对应的 Pixso 组件库文件，通过 本地 MCP 或 远程 MCP 让 Agent 读取组件并生成配置，再粘贴到 DSM。说明目标代码组件库（本地路径或开源库名称 / 文档）后，可直接让 Agent 生成映射。相关工具见 read_component_config_data。
• 在 DSM 中手动配置：按下方步骤打开 DSM，参考 组件解析器 编写 JSON。

打开 DSM

点击顶栏的下拉菜单，打开 DSM 面板。

小提示

DSM 只能在设计模式下打开，且需要有编辑权限才能进行编辑配置。

新建/编辑配置文件

以下是将设计稿中的 Button 映射为 el-button 的最小示例（完整字段见 组件解析器）：

{
  "Button": {
    "name": "el-button",
    "props": { "filter": ["md", "default"] },
    "text": { "nodeName": "_text" },
    "icon": {
      "nodeName": { "name": "icon", "deepFind": true },
      "attrName": "icon"
    }
  }
}

下一步

• DSM：设计系统入口、别名与代码解析配置
• 组件解析器：组件映射的完整配置说明
• 本地 MCP / 远程 MCP：在 IDE 中通过 design_to_code 使用 D2C⁺