最近在做一些鸿蒙应用时，我想到一个问题。从设计稿到鸿蒙页面代码这个过程中，有多少前期工作可以交给AI完成？

以前的协作流程其实很固定，中途需求调整，就要重新修改设计稿、重新同步开发、重新适配。尤其是电商类项目，首页、商品详情页、购物车、个人中心、订单列表，各种列表和卡片组件非常多。很多开发时间其实并不是花在业务逻辑上，反而是UI还原阶段的重复劳动。

这次我做了一个测试，主要想验证两件事：一是AI能不能直接生成电商UI设计稿，二是D2C转出的鸿蒙代码在实际项目中到底能不能用。

先从一个电商APP首页开始

这次测试我选的是Pixso。Figma虽然也有类似功能，但鸿蒙代码这块它是空白的。所以我直接打开设计文件，在左边面板找到AI智能设计，输入了一段需求描述，让它设计一个移动端电商APP首页。

提交需求后，Pixso的AI便开始逐步搭建页面。从顶部搜索区开始，再到Tab分类标签，最后是商品卡片，整个过程在画布里实时可见，有点像真实设计师正在画图，只不过速度快得多。

AI生成界面后，我先快速过了一遍布局，没有出现组件堆叠或错位。但也不是完全不用调整，比如推荐商品区，AI第一次生成的卡片间距偏小，显得有点挤，我手动拉大了留白。

 

设计规范比生成速度更重要

AI生成设计稿很快，但真要做到能用，拼的不是速度快，是设计规范统一。我以前试过几个AI设计工具，没有设计规范约束，页面生成出来之后还是得从头改一遍。那种设计稿就算生成得再快，后面开发也会非常痛苦。

所以这次生成前，我注意到可以提前指定设计系统和设计规范。如果团队已经建立组件库或者设计系统，AI生成时就能够优先遵循对应规范。这样后续页面扩展时，一致性会好很多。尤其是电商项目这种页面数量较大的场景，统一规范带来的价值远远超过单纯提升生成速度。

 

顺手把变量系统也建立起来

做久了后来才发现，设计和开发能顺畅协作，关键就是设计Token。例如颜色变量、文本变量、数字变量（圆角间距）等。以前很多团队都是项目上线了才想起来建变量，设计和开发两边都搭进去不少时间。

所以我试了试直接通过AI生成变量体系。选中页面后发送生成变量的指令，AI很快就给出了一版深色模式，并且可以看到颜色、字体和部分基础样式已经形成了对应变量。后续调整主题色时，明显比逐个页面修改轻松很多。特别是鸿蒙项目后面如果需要适配深色模式或者多主题场景，变量系统很重要。之前我手动创建变量，一个一个绑，至少花半小时，这次AI几分钟就生成了深色模式版本和变量。当然也有翻车的时候，有些色值映射错了，还是要手动矫正一下。

 

评审之后AI局部修改设计稿

我见过的项目，第一版设计稿基本都要返工。设计师最怕评审一过，需求说变就变。这次我试了一下，直接在画布里选中要改的组件，让AI在原稿基础上修改，整个页面结构没有被打乱。它并不会重新生成整个页面，就只是在原设计稿基础上修改我指定的区域。

这种AI修改设计稿的方式在大项目里很实用，不用怕改一个模块导致整个页面重做。

D2C生成鸿蒙代码到底怎么样

设计稿确定了，接下来就是开发最关心的环节：代码生成。这里我在右上角找到研发模式之后，选择D2C功能，并指定鸿蒙ArkUI代码生成。步骤很简单，能选择页面或者某个容器/分区/组件，也能勾选样式同步和变量同步。没多久系统开始根据设计稿结构解析页面。

D2C这个功能有个前提：设计稿得规范。跟前端开发一个道理，HTML结构写不清晰，什么工具都救不了。鸿蒙代码生成完成后，我重点看了几个模块：顶部导航栏、商品分类区、推荐商品列表、底部导航。这些常见电商组件基本都能够识别并转换成对应代码结构，页面层级关系也保留下来。

 

当然，业务逻辑部分还是需要后期开发介入的，这些不会因为D2C自动出现。但页面结构已经提前搭建完成，对于前端开发来说，确实能够节省不少基础页面搭建时间。

这套流程到底适不适合实际项目

这次测试结束之后，我觉得设计和开发之间多了一层新的协作方式。AI负责生成初稿，设计师就在这个基础上去优化，再利用它生成变量体系统一规范，还能协作评审做修改。设计稿定稿后，直接让D2C负责完成代码转换，不过这个过程中，设计师和开发都需要按自己的经验去判断。

这次试下来，AI生成UI设计稿和D2C生成鸿蒙代码，现阶段还谈不上完全自动化开发，但已经能够覆盖不少重复性工作。