D2C+：研发模式与组件映射

研发衔接 · D2C+

研发模式与组件映射

D2C+ 是面向企业研发协作的设计转代码路径：在研发模式里选中页面、组件或图层生成代码；当团队希望复用项目组件时，再通过 DSM 建立设计组件与代码组件的映射。先跑通生成、再决定是否做映射，通常更容易评估落地成本。

我会先和你确认这几项

账号需要企业版全功能席位或研发席位。
目标文件必须位于企业空间内；企业空间下的个人草稿也可使用，企业空间之外的文件不支持 D2C⁺。
编辑 DSM 配置需要在设计模式中打开 DSM，并拥有该文件的编辑权限。

我建议的最短上手路径

在 Pixso 中打开企业空间内的目标设计文件。
点击右上角的研发模式开关。
在右侧 D2C 选项的下拉菜单中选择 D2C⁺。
选中要转换的页面、组件或图层，生成对应代码。
检查生成结果，再查看或导出代码并接入项目。

官方快速入门列出的 D2C+ 输出框架为 React、Vue 和 Flutter。若当前目标只是按设计结构生成代码，不需要将设计组件实例绑定到项目组件库，可以先直接生成，不必一开始就写配置文件。

D2C⁺ 也可以通过 Pixso 本地 MCP 或远程 MCP 的 design_to_code 工具调用。连接方式见 Pixso MCP 概览。

什么时候需要 DSM 映射

我通常会在团队已有稳定组件库、并且希望生成结果直接使用项目组件时建议配置 DSM。比如让设计稿中的 Button 输出为项目里的 el-button。组件解析器负责描述组件对应关系，以及属性、文本和图标如何映射。

打开设计文件顶栏下拉菜单进入 DSM。DSM 只能在设计模式下打开；修改配置需要编辑权限。不需要组件映射时，可以跳过这部分。

以下为官方文档中的最小示例：

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

配置可以手动编写，也可以让 Agent 通过 MCP 读取组件库文件后协助起草，再粘贴到 DSM。建议提供明确的组件文件或 API 文档，并由熟悉项目的人检查映射字段，避免把示例配置直接当成团队最终规范。

遇到问题时，我会这样排查

先确认选中的页面或组件范围清晰，再检查布局、文字和图片资源。
如果代码没有映射到预期组件，检查解析器中的组件名称、属性筛选条件和子节点名称。
如果找不到 D2C+ 入口，核实是否开启研发模式、文件是否位于企业空间，以及账号席位是否符合要求。
生成结果始终要回到项目里验证，并按团队组件和工程规范整理。

官方文档

D2C⁺ 快速开始：使用前提、生成步骤和 DSM 配置示例。
DSM：设计系统管理说明。
组件解析器：组件映射字段与完整配置说明。
Pixso MCP 工具与指令：通过 design_to_code 调用 D2C⁺。

这是个人整理的实践说明，不代表官方产品公告。能力、席位要求和产品入口可能调整，请以 Pixso 官方 D2C⁺ 文档为准。