在鸿蒙项目中，设计师与开发者需要把界面结构、样式和资源整理成 ArkUI（ArkTS）可继续实现的代码。对于刚接触 ArkUI 的团队，设计稿与代码之间的对应关系往往需要额外核对。
已有移动端设计稿时，可先整理图层、自动布局和资源，再在 Pixso 研发模式的 D2C 中选择 ArkUI，生成布局与样式代码，最后接入 DevEco Studio 补齐业务逻辑。音乐 App 的列表、播放器和状态画面可以沿同一条流程交付；预览时重点比较长歌名、封面比例、播放状态与窄屏布局。设计阶段的准备可结合鸿蒙设计转代码方法完成。
ArkUI 使用 D2C 中对应的代码类型。D2C⁺ 是另一条设计转代码路径，当前开发者文档列出 React、Vue、Flutter，并有企业空间和席位要求；不要把两种入口的框架与权限混用。需要了解 D2C⁺ 的配置时，可查看D2C⁺ 开发者指南。
1. 为什么需要 Pixso AI？
在手动实现界面时，开发者需要把设计稿中的间距、颜色、层级和状态对应到 ArkUI 的容器与组件（如 Column、Row）。先整理这些结构，有助于后续检查生成代码是否符合原稿。
Pixso D2C 可以根据设计稿中的图层、组件和布局关系生成界面代码草稿。生成结果仍需结合项目组件、资源和业务逻辑检查，不能把代码输出直接视为完整的生产实现。鸿蒙设计资源和标准组件
2. D2C 设计稿转 ArkUI 代码的流程
下面以一套已经完成的音乐 App 设计稿为例，说明在 Pixso 环境中进行 D2C（Design-to-Code）转换。
第一步：导入与规范校准
首先，将现有的设计稿导入 Pixso 协作空间。如果团队已有 Figma、Sketch 或 XD 文件，可先按当前导入入口导入 Pixso，再检查组件、字体、图片和自动布局是否保持正确。
- 关键动作：检查核心组件是否开启了“自动布局”。
- 技术解析：自动布局能提供更明确的层级和尺寸关系，有助于 D2C 生成布局结构。生成后仍要检查 Stack、Flex、List 等容器是否符合项目实际写法，不能只根据是否使用自动布局判断结果一定正确。
第二步：开启“研发模式”：精准对齐 ArkUI 语法
点击右上角的“研发模式”开关。此时，原本用于视觉编辑的面板会转变为开发者熟悉的代码审查视图。
- 选择D2C功能：在研发模式下，有“代码”、“切图”和“D2C”三个功能选项，点击“D2C”
- 代码类型选择：Pixso的D2C设计稿转代码功能支持ArkUI/HTML/Flutter/Vue/React类型的代码，选择 ArkUI，选择要转化的设计稿（这里注意需要至少选中一个顶层可见的Frame，或包含frame的分区），并点击转化为代码
- 代码生成：生成完成后，先查看代码内容和文件结构，再按项目目录、组件和资源规则决定哪些部分可以接入。
第三步：查看导出内容并接入项目
生成完成后，先查看右侧代码与文件结构。需要单独调整一个组件时可以复制代码；需要一并交接页面与资源时，使用“下载代码包”，再检查文件与项目目录的对应关系。
- 操作：点击“下载代码包”，解压后查看页面代码、资源路径和依赖，再把需要的文件接入项目。
- 产出：接入 ArkUI 代码时，逐项检查 .ets 文件中的组件、图片引用和导入语句，并把配套图片放到项目对应的资源目录。设计师补充加载、播放、暂停和失败等状态，研发连接实际数据与操作逻辑。
3. 如何在 DevEco Studio 中快速复用
在 DevEco Studio 中接入生成结果时，应把它当作待检查的界面代码，而不是无需调整的成品。
- 直接粘贴：在鸿蒙官方开发工具 DevEco Studio 中新建一个页面。
- 预览同步：将代码片段放入项目合适的页面或组件位置，补齐 imports、资源引用和项目所需配置。
- 效果达成：在 DevEco Studio 中运行预览，用同一份歌曲名称与封面对照设计稿，检查长标题换行、底部播放器是否遮住列表，以及播放和暂停状态能否正确切换。
4. 常见问答 (FAQ)
Q：生成的代码包含交互逻辑吗？
A：这条路径主要生成 UI 布局与样式代码。API 调用、数据绑定、导航、权限和业务状态仍需要开发人员在项目中补充并验证。
Q：设计稿不规范会影响导出吗？
A：建议在 Pixso 中多使用“自动布局”，这能让 AI 更准确地推导出 Flex 布局属性。
Q：支持鸿蒙最新的 API 吗？
A：先在项目中确认目标 SDK 和 API 版本，再编译生成代码。遇到不存在的属性、组件或导入路径时，按该项目版本的 ArkUI API 调整，并重新运行页面预览。代码生成不能替代编译与设备适配检查。
整理好自动布局后，可以通过研发模式导出 ArkUI 布局与样式代码，再在 DevEco Studio 中预览页面并补充业务逻辑。在线体验 Pixso AI，整理设计稿并查看界面代码生成。
