设计稿转代码指南

设计稿转代码（Design-to-Code）的质量，很大程度上取决于设计稿本身的结构规范。D2C 引擎的核心原理是解析设计树中的图层节点类型（Frame、Text、Vector 等）、盒模型与布局属性，进而生成对应的 DOM 树与 CSS 样式。

本文面向设计师与产研团队，讲解如何在设计阶段做好规范准备，让生成的代码更干净、更符合前端工程化标准。

---

布局规范：让 Flexbox 与流式排版更精准

自动布局（Auto Layout）是设计稿映射到前端 Flexbox/Grid 盒模型的核心桥梁。

关键原则

• 全面使用自动布局：凡是可以描述为“横向排列”或“纵向排列”的内容区域，均应使用自动布局构建。
• 嵌套自动布局：通过横向与纵向容器的层层嵌套表达复杂结构，而非手动拖拽像素定位。
• 正确设置自适应模式：
  • 填充容器（Fill）：对应 CSS flex: 1 或 width: 100%，使元素自动拉伸填满父容器剩余空间。
  • 适应内容（Hug）：对应 CSS fit-content / 内联块级尺寸，使容器大小由内部子元素自动撑开（适用于按钮、标签等）。
  • 固定尺寸（Fixed）：对应固定宽高（width / height），适合头像、图标等特定固定比例元素。
• 合理使用“容器内绝对定位”：
  • 在自动布局容器内，如果存在徽标角标（Badge）、悬浮关闭按钮、背景装饰物等脱离正常流的元素，应开启绝对定位（Absolute position）。
  • D2C 引擎会精准将其转为父容器 position: relative + 子元素 position: absolute，无需刻意为了禁用绝对定位而破坏设计表达。

检查方法

在交付设计稿前，尝试拖动外层画板或自动布局容器边缘，观察内部元素在拉伸、压缩时是否保持正确的自适应和对齐响应。

---

容器与背景构建：Frame 代替矩形，消除无效层级

容器的构造方式直接决定了生成代码的 DOM 结构干净程度与弹性自适应能力。

关键原则

• 禁止用图形工具（如矩形 Rectangle）充当容器背景：
  • 常见反模式：绘制一个矩形底色块，上面放一行文字，再打组作为“按钮”或“卡片”。这种做法会导致生成冗余无意义的背景 DOM 节点（如 <div class="bg-rect">），且矩形与文字之间缺失真实的 Padding 关联，文字变长时背景不会自动撑开。
  • 正确做法：直接将 Frame / 自动布局容器本身作为按钮或卡片！把背景色（Fill）、圆角（Corner Radius）、描边（Stroke）、内边距（Padding）直接设置在 Frame 属性上，Frame 内部仅放置文字或图标等子内容。
• 使用 Frame / 自动布局 代替 Group（编组）：
  • Group 在设计工具中缺乏独立的盒模型、尺寸坐标系与自适应约束，D2C 解析 Group 时容易退化为绝对定位或产生意外的坐标计算偏差。
  • 请始终使用 Frame 或自动布局容器来组织界面元素。
• 消除无意义的空壳容器（Redundant Wrappers）：
  • 避免仅包含单个子元素且没有独立样式（如无背景、无描边、无 padding）的多余包装 Frame。
  • 保持扁平且语义明确的 DOM 树结构，减少无谓的嵌套。

---

文本设置：规范 Resizing 与换行行为

文本图层的尺寸与换行模式决定了前端文本流的表现与自适应能力。

关键原则

• 自动宽度（Auto Width / Hug）：
  • 适用于单行标签、按钮文案、单行标题等。
  • 文本宽度随字数自然伸缩，不会强制折行。
• 自动高度（Auto Height）：
  • 适用于多行正文、卡片描述、评论内容等。
  • 宽度随父容器设定（如配合 Fill），高度随文字折行自动向下撑开，防止容器高度塌陷。
• 慎用固定尺寸（Fixed Size）文本框：
  • 固定宽高的文本框在多语言或内容动态变化时，极易导致文字溢出（Overflow）或被异常裁切。

---

图形与特效规范：禁用蒙版，规范图标与导出

复杂的矢量与特效工具如果不规范使用，会导致生成臃肿甚至难以维护的代码。

关键原则

• 禁用蒙版（Mask）工具：
  • 为什么禁用：蒙版在前端通常需要转为复杂的 CSS mask-image、clip-path 或嵌套 SVG，不仅代码体积臃肿，在各端和不同浏览器中还容易产生渲染兼容性问题。
  • 替代方案：
    • 圆形头像 / 圆角卡片：直接给外层 Frame 设置圆角（Corner Radius）并开启裁剪超出内容（Clip content），对应标准 CSS 的 overflow: hidden 与 border-radius；
    • 图片裁切：直接将图片作为 Frame 的填充（Fill -> Image），通过填充模式（Cover / Fit）进行自适应缩放；
    • 复杂异形图案：在设计端合并为单一矢量图形，或直接导出为静态图片资源。
• 图标添加固定宽高占位容器：
  • 图标组件应外包一个固定尺寸的正方形 Frame（如 16×16、20×20、24×24）。
  • 确保内部矢量路径居中对齐，避免不同图标尺寸不一导致前端排版对齐抖动。
• 复杂矢量合并与 SVG 导出：
  • 复杂矢量图形（如节点数较多、布尔运算复杂的图形）建议拼合路径（Flatten）或直接标记导出为 SVG，避免生成过于冗长庞大的 DOM 节点。
• 标记资源导出设置：
  • 对于图片、插画、独立图标等资源，在 MasterGo 中配置好 Export（导出） 规则。
  • D2C PRO 支持通过 enable_export_setting_to_image 与 resource_path 配置自动识别导出标记并生成对应的图片资源引用路径。

---

变量与样式绑定：让 Design Token 完整映射

样式与变量的绑定能够让生成的 CSS 更加贴近前端工程化体系。

关键原则

• 绑定设计变量（Variables）：
  • 颜色、间距、字体字阶、圆角等属性应绑定变量，而非直接填写数值。
  • D2C PRO 的 enable_token_render 功能可将绑定的变量直接渲染为 CSS 变量形式（如 var(--color-primary)）。
• 描边优先使用内部描边（Inside）：
  • CSS 标准盒模型（box-sizing: border-box）默认在元素内部占据边框尺寸，对应设计工具中的 Inside 描边。
  • 尽量避免使用居中（Center）或外部（Outside）描边，以减少前端转换时生成额外的 outline 或 box-shadow。

---

组件与辅助建议

• 复用元素组件化：将高频复用的 UI 单元（按钮、输入框、卡片等）封装为主组件，有助于沉淀一致的设计规范与前端组件库映射。
• 语义化命名（辅助性）：
  • 虽然 D2C 转换的核心依据是图层类型与布局树，但为主要组件和关键区域添加语义化命名（如 Header, ProductCard, Button）有助于生成更清晰的 CSS 类名与提高代码可读性。