当前位置：首页 > news >正文

UI生成前端代码实测：3种方案从React/Vue到鸿蒙ArkUI

news 2026/6/10 23:15:22

前几天接了个挺急的内部需求，由于UI资源紧张，基本上就是甩了几张参考图和简单的线框过来。说实话，现在这个大环境下，谁还甘心天天当切图仔？花一下午像素级还原设计稿，回头产品说改个圆角，全是无用功，性价比太低了。趁着这个机会，我把最近关注的“UI生成前端代码”的几种方案全测了一遍，顺便记录体验。

先说清楚，别指望AI替你写if/else或者调接口。但做React、Vue组件结构，甚至是刚需的ArkUI鸿蒙开发上，还是没问题的。大致有3条实操路径，各位可以对照着自己的业务场景看。

途径一：文本直接生成UI组件（Prompt to code）

你只要描述一下界面需求，它就给你整出一套React组件，连Tailwind样式都带。这块我试了好几个，比如Stitch、Lovable，还有最近用得比较顺手的国产Paico。

我拿它实测了一段Prompt：“生成一个电商后台的数据看板，左侧导航，右侧上面是4个核心指标卡片，下面跟一个折线图占位，用Tailwind。”界面效果先不提，最让我意外的是它没瞎用useEffect。你知道，很多工具为了跑通例子，把里面的hooks写的乱七八糟。Paico生成的代码没有滥用状态，纯展示组件的props预留得还算规整。

途径二：UI界面图片转代码（Image to Code）

有时候看到竞品某个交互模块做得不错，或者只有一张设计好的JPG图，要想精准还原，抠像素有点费劲。说白了就考验AI的眼力：它得看出来你是用Flex还是Grid，是相对还是绝对定位。我又拿Stitch测了一下，传了一张比较复杂的移动端商品详情页截图。本来以为出来的会是一堆绝对定位（早年这类工具的通病），结果它确实是用Flexbox去排的。

Stitch倒是让我意外了一下，它把底部的购买按钮区识别成了position: fixed，这点很准。商品标题和标签的间距，还原度能到80%左右。不过如果原图里有半透明渐变叠加，它生成的CSS偶尔会用一个死颜色代替，这部分需要人工微调一下。Lovable在处理那个商品详情页的图片和文字嵌套时，Flexbox的层级切分跟我自己写的基本一样，不用再去调margin-top的魔法数字。

途径三：设计稿转代码（Design to Code）

前两种一个靠嘴说，一个靠截图抄。但在实际的公司流程里，你面对的肯定还是UI设计师丢过来的设计源文件。提到D2C，大部分人第一反应是Figma。Figma的Dev Mode确实好用，但你让它直接生成ArkUI？不行，没适配。我试了一圈，发现Pixso在这块跟进得特别狠，能直接导出ArkUI的代码结构。

在设计稿里选中一个设计好的卡片组件，直接用它的D2C插件，选择ArkUI导出。出来的数据大概是这样的（模拟一下结构）：

Row() {
Image($r('app.media.icon')).width(40).height(40)
Column() {
Text('订单标题').fontSize(16).fontWeight(FontWeight.Bold)
Text('描述信息...').fontSize(14).fontColor(Color.Gray)
}.alignItems(HorizontalAlign.Start).margin({left: 12})
}
.width('100%')
.padding(16)
.backgroundColor(Color.White)
.borderRadius(8)

另外，我试了转出的ArkUI代码，直接在DevEco Studio里跑没问题。但它对自定义字体和图标的处理还有点迷，生成的是$r('app.media.xxx')这种路径，如果你项目用的不是标准资源命名，得自己改。这点Figma的Dev Mode反而更灵活。

如果UI画图时不爱打组（Group），或者压根不用Auto Layout，那生成的代码层级能嵌套到让你想哭。所以用D2C转代码我的建议是，要么你自己学一下整理图层，要么去请UI喝杯奶茶，让他们画图规范点，这比你自己调CSS快多了。