特征设置

在开始生成代码之前，解析引擎会根据特征配置中的设置来初始化它的状态。

以下是一个完整的示例：

json

{
  "playground_url": "http://your.playground_url.com",
  "framework_type": "vue",
  "image_path": "https://image-resource.mastergo.com/",
  "image_export_scale": "1",
  "mcp_server_url": "",
  "enable_ignore_node": true,
  "enable_skip_node": true,
  "enable_ignore_style": true,
  "enable_ignore_name": true,
  "enable_slot_render": true,
  "enable_token_render": true,
  "enable_pic_placeholder": false,
  "enable_export_setting_to_image": false,
  "enable_only_object": false,
  "enable_instance_realname": true,
  "enable_aggregate_styles": false,
  "enable_file_download": true,
  "enable_inference": false,
  "enable_shorthand_mode": true,
  "resource_path": {
    "svg": "./svg/",
    "image": "./image/"
  },
  "component_prefix": "el-",
  "auto_layout_tag": "div",
  "slot_prefix": "#",
  "ignore_prefixes": ["$config", "."],
  "skip_prefixes": ["#ignore", "#skip", "#slot"],
  "ignore_component": [],
  "icon_prefix": ["@icons_"],
  "enable_root_node_sizing": {
    "width": true,
    "height": true
  },
  "enable_node_id": false,
  "enable_node_name": false,
  "enable_component_meta": true,
  "unit_conversion": {
    "unit_type": "px",
    "root_font_size": "14",
    "dpi": "96",
    "design_width": "375",
    "decimal": "2"
  },
  "color_format": "hex",
  "svg_optimizing": {
    "remove_useless_defs": true,
    "remove_unneeded_groups": true
  }
}

本章节将逐个介绍这些属性的作用以及设置方法。

playground_url

Type: string

预览窗口是用于展示并运行你项目的前端代码。这需要你自己来开发这个页面。我们提供了详细的教程和代码示例。请查看预览窗口设置。

json

"playground_url": "http://your.playground_url.com",

如果你不需要知道代码在你项目中的运行情况，你可以删除它。D2C PRO 会自动生成一个预览截图，以方便你了解当前生成的代码块是什么内容。

image_path

Type: string
Default: MasterGo 默认的图片资源路径

设置图片资源预览路径，私有化的企业可以配置专属的图片资源路径。

json

"image_path": "https://image-resource.mastergo.com/",

image_export_scale

Type: string | number
Default: "1"
可选值: "1" | "2" | "3" | "4"

设置图片与切图导出时的缩放倍率。

json

"image_export_scale": "2",

在移动端或 Retina 高分屏开发中，可设置为 "2" 或 "3"，解析引擎将按 @2x / @3x 的倍率导出高清图片资源。

mcp_server_url

Type: string
Default: ""

MCP（Model Context Protocol）服务连接地址。

json

"mcp_server_url": "http://localhost:3000/mcp",

用于配置与外部 MCP Server 的连接通道，方便将 D2C PRO 解析得到的设计数据、DSL 结构与代码片段直接提供给 Cursor、Claude Code 等 AI 客户端使用。

enable_ignore_node

Type: boolean
Default: false

当你为某个图层设置忽略解析属性时，D2C PRO 将忽略该图层及其子图层。你可以使用此开关设置此规则是否生效。

json

"enable_ignore_node": true,

enable_skip_node

Type: boolean
Default: false

当你为图层设置了跳过解析的属性后，D2C PRO 会跳过它并解析它的子级图层。你可以使用此开关设置该规则是否生效。

json

"enable_skip_node": true,

enable_ignore_style

Type: boolean
Default: false

当你为某个图层设置忽略样式属性时，D2C PRO 将忽略该图层的样式。你可以使用此开关设置此规则是否生效。

json

"enable_ignore_style": true,

enable_ignore_name

Type: boolean
Default: false

当你为某个图层设置忽略名称属性时，D2C PRO 将忽略解析该名称为前缀的图层。你可以使用此开关设置该规则是否生效。

json

"enable_ignore_name": true,

enable_slot_render

Type: boolean
Default: false

当你为某个图层设置插槽渲染属性时，D2C PRO 将解析该图层时将其渲染为插槽。你可以使用此开关设置该规则是否生效。

json

"enable_slot_render": true,

enable_token_render

Type: boolean
Default: false

当你为某个图层使用了变量样式时，D2C PRO 在解析该图层的样式时，会直接以 css var 的形式渲染。你可以使用此开关设置该规则是否生效。

json

// 样式的代码语法: bg-body , 颜色为: #f4f4f4
"enable_token_render": true,
// 输出为：<div style="background-color: var(--bg-body)"></div>

"enable_token_render": false,
// 输出为：<div style="background-color: #f4f4f4"></div>

enable_pic_placeholder

Type: boolean
Default: false

启用图片占位符。

json

"enable_pic_placeholder": true,

开启后，解析引擎不会输出真实图片地址，而是自动生成带有对应宽高尺寸的占位图（Placeholder）。适用于前端骨架屏搭建、原型演示或数据脱敏场景。

enable_export_setting_to_image

Type: boolean
Default: false

当你启动此属性时，D2C PRO 在解析过程中会将你添加了导出设置的图层，以图片格式导出。

json

"enable_export_setting_to_image": true,

注意

建议默认保持关闭。如果开启，带有导出设置的图层会被整体当成单张图片处理，无法生成可编辑的细粒度 HTML/CSS 结构。

enable_only_object

Type: boolean
Default: false

仅导出 Object 对象节点。

json

"enable_only_object": true,

开启后，解析引擎只输出设计树的纯 Object 数据结构，不进一步展开为完整的 DOM / 模板标签，适合把 D2C 数据作为原始 AST/JSON 数据源消费的集成场景。

enable_instance_realname

Type: boolean
Default: true

当你启动此属性时，无论你的组件实例改成了什么名称，D2C PRO 都能够识别它的真实名称。

json

"enable_instance_realname": true,

enable_aggregate_styles

Type: boolean
Default: true

开启样式聚合模式，可以使写在内联的样式以 class 聚合。但需要注意，聚合的 class 样式名称是不含语义的。

json

"enable_aggregate_styles": true,

enable_file_download

Type: boolean
Default: true

启用文件下载功能。

json

"enable_file_download": true,

控制生成代码面板中是否提供打包下载工程文件的按钮。

enable_inference

Type: boolean
Default: false

启用智能布局推断。

json

"enable_inference": true,

开启后，解析引擎会对未开启自动布局（自由拖拽、绝对定位堆叠）的图层进行空间几何关系推断，自动将其重构推导为合乎规范的 Flex 弹性布局结构。

enable_shorthand_mode

Type: boolean
Default: true

启用 CSS 简写模式。

json

"enable_shorthand_mode": true,

开启后，解析引擎会自动将多方向独立样式属性（如 padding-top / padding-right / padding-bottom / padding-left、margin、border 等）合并为紧凑的 CSS 简写格式（如 padding: 12px 16px;），大幅提高输出代码的精简度与可维护性。

enable_root_node_sizing

Type: Object

默认输出根节点的宽高尺寸。

json

"enable_root_node_sizing": {
  "width": true,
  "height": true
},

enable_node_id

Type: boolean
Default: true

在数据中显示节点 ID。

json

"enable_node_id": true,

enable_node_name

Type: boolean
Default: true

在数据中显示节点名称。

json

"enable_node_name": true,

enable_component_meta

Type: boolean
Default: true

在数据中显示组件元数据。

json

"enable_component_meta": true,

resource_path

Type: boolean | object
Default: false
svg: string
image: string

当你为 svg、image、shape 这三个属性设置了路径时，D2C PRO 在解析过程中会将它们提取出来，作为一个单独的文件。

json

"resource_path": {
  "svg": "svg/",
  "image": "image/"
},

只有设置了路径才能够启动 AI Generate 功能，以节省 AI 模型的 Token 资源。

为什么需要？

冗长的路径数据：

路径数据通常非常长且密集，由大量的坐标点和命令组成。对人类来说是不可读的“乱码”，但对模型来说，每一个字符、逗号、小数点都是一个需要处理的 Token。

低信息密度：

从 “理解代码逻辑” 的角度看，一大段 SVG 路径数据所承载的有效信息量很低。它只是描述了具体的像素点位置，而不是程序的逻辑、算法或架构。

总结

使用 resource_path 将资源渲染为路径，本质上是一种信息提纯。是帮助 AI 聚焦于问题的核心（代码逻辑），同时为自己节省宝贵的 Token 资源（金钱和时间），这是一种高效且经济的做法。

同时推荐你使用图标解析器来将图标渲染为一个组件。

component_prefix

Type: string

我们可以在 DSM 为组件设置别名。这样在识别组件时会使用别名来替代组件名称。

D2C PRO 还会将使用 <> 尖括号包裹的图层名称识别为一个前端组件。如果需要在组件名称前增加前缀，可以设置这个属性。

json

// 图层名称: <button> 或 别名: button
"component_prefix": "el-",
// 输出为：<el-button>

slot_prefix

Type: string

如果你为容器名称设置了 # 号为前缀的名称，如 #header，即可渲染成一个插槽标签。这个属性对于当前热门的前端框架项目来说尤为重要。

当然，你可以自定义它的前缀：

json

"slot_prefix": "#",

Vue

vue

<template #header>
  <div>content</div>
</template>

React

jsx

<component header={
  <div>content</div>
}>

WARNING

但要注意的是，D2C PRO 不会解析插槽的样式。如果你的设计稿中的插槽带了一些布局样式，我们建议你对其进行手动调整，以保持与前端组件的视觉效果一致。

下面是一个实际案例：

icon_prefix

Type: string | array

你可以为图标图层设置一个前缀，这样在解析时就会将该图层解析为一个图标组件。

json

"icon_prefix": [
  "@"
],

// 图层名称: @edit
// 输出为：<edit />

ignore_prefixes

Type: string | array

忽略掉一些前缀，让这些带有特定前缀的图层不被 D2C PRO 默认识别。

json

"ignore_prefixes": ["_"],

// _name

如果你将一个图层的属性设置为忽略，这样会阻止 D2C PRO 的遍历解析器来解析这个图层。

你也可以将图层命名为 _ 开头的名称，如： _title 来达到相同的效果。

如果你的组件属性也使用了忽略前缀，也会在解析时忽略掉这个属性。

为什么要忽略图层？

以常用的前端组件为例。有些内容是写在标签上的，例如：

html

<input value="please enter" type="text">
<el-input placehoder="please enter">

<!-- 如果不忽略 文本节点，可能会解析为 -->
<input value="" type="text">please enter</input>
<el-input placehoder="">please enter</el-input>

这显然是不符合预期的，所以我们要忽略这个节点。然后通过组件解析的方式将它的文本内容写入到标签中。详情请查看组件解析。

skip_prefixes

Type: string | array

我们可以为图层设置跳过解析属性，这样在解析时就会跳过这个图层，直接解析子级节点内容。

同时你也可以将属性写到图层的名称上，如： #skip 来达到相同的效果。

json

"skip_prefixes": ["#skip"],

// 图层名称: #skip_title

ignore_component

Type: string | array

如果你想忽略一些组件，你可以在配置中添加 ignore_component。它将不会被解析。

json

"ignore_component": ["step", "tab-pane", "timeline-item", "list-item"],

通常情况下，一些组件由父组件和子组件组成。子组件通常无法独立运行。因此，当你选择的一级节点是一个子组件，你可以通过 ignore_component 忽略它们。

framework_type

Type: string
Default: html
可选值: react | vue | vue2 | angular | html | wxml | android | json

你可以提前为你当前的配置预设前端框架的类型，例如 react 或者 vue，这样在解析时会默认生成对应的代码。

WARNING

注意：如果你的设计组件中使用了 vue 或者 angular 等框架的特殊语法，你需要提前为你的配置设置 framework_type。否则，D2C PRO 会默认将其解析为 html 代码。

json

{
  "framework_type": "react"
}

当前支持的框架类型：react, vue, vue2, angular, html, wxml, json, android。

auto_layout_tag

Type: string
Default: div

你可以为具有自动布局的 div 标签重新命名，例如 Space：

json

{
  "auto_layout_tag": "Space"
}

// 之前：
// <div>content</div>

// 之后：
// <Space>content</Space>

unit_conversion

Type: object
Default: false
unit_type: px | rem | pt | mm | cm | rpx | vw
root_font_size: number | string（默认 "14"）
dpi: number | string（默认 "96"）
design_width: number | string（默认 "375"，用于移动端 rpx / rem / vw 计算基准）
decimal: number | string（默认 "2"，计算结果保留小数位数）
scaling: number（缩放倍数）

单位转换。你可以为数值设置单位换算规则，例如将 px 转换为 rem、rpx 或 vw。

json

{
  "unit_conversion": {
    "unit_type": "rem", // 单位类型
    "root_font_size": "14", // 根字体大小 (1rem = 14px)
    "dpi": "96", // 屏幕 DPI
    "design_width": "375", // 设计稿基准宽度 (px)
    "decimal": "2" // 转换后保留的小数位数
  }
}

如果你只需要缩放尺寸，而不需要将 px 转换为其它单位，可以设置 scaling：

json

{
  "unit_conversion": {
    "unit_type": "px", // 单位类型
    "scaling": 2 // 缩放倍数
  }
}

color_format

Type: string
Default: hex
可选值: hex | rgb | rgba | hsl | oklch

颜色格式。你可以为颜色设置转换规则，例如将 hex 转换为 rgb 或现代 CSS 的 oklch。

json

{
  "color_format": "rgb"
}

svg_optimizing

Type: boolean ｜ object
Default: false

是否开启 SVG 优化。开启后会对 SVG 代码进行压缩，会略微降低代码生成的速度。

json

{
  "svg_optimizing": {
    "remove_useless_defs": true, // 是否移除无用的 defs
    "remove_unneeded_groups": true // 是否移除不需要的 group
  }
}

特征设置 ​

playground_url ​

image_path ​

image_export_scale ​

mcp_server_url ​

enable_ignore_node ​

enable_skip_node ​

enable_ignore_style ​

enable_ignore_name ​

enable_slot_render ​

enable_token_render ​

enable_pic_placeholder ​

enable_export_setting_to_image ​

enable_only_object ​

enable_instance_realname ​

enable_aggregate_styles ​

enable_file_download ​

enable_inference ​

enable_shorthand_mode ​

enable_root_node_sizing ​

enable_node_id ​

enable_node_name ​

enable_component_meta ​

resource_path ​

component_prefix ​

slot_prefix ​

Vue ​

React ​

icon_prefix ​

ignore_prefixes ​

为什么要忽略图层？ ​

skip_prefixes ​

ignore_component ​

framework_type ​

auto_layout_tag ​

unit_conversion ​

color_format ​

svg_optimizing ​

特征设置

playground_url

image_path

image_export_scale

mcp_server_url

enable_ignore_node

enable_skip_node

enable_ignore_style

enable_ignore_name

enable_slot_render

enable_token_render

enable_pic_placeholder

enable_export_setting_to_image

enable_only_object

enable_instance_realname

enable_aggregate_styles

enable_file_download

enable_inference

enable_shorthand_mode

enable_root_node_sizing

enable_node_id

enable_node_name

enable_component_meta

resource_path

component_prefix

slot_prefix

Vue

React

icon_prefix

ignore_prefixes

为什么要忽略图层？

skip_prefixes

ignore_component

framework_type

auto_layout_tag

unit_conversion

color_format

svg_optimizing