基于AI的D2C前端代码生成技术深入总结

坦白说，AI在D2C（Design to Code）这个方向上，能做的事比想象中多，但踩过的坑也比预料中深。作为淘天内部的AI创新团队，我们在这条路上摸爬滚打了好一阵子，从最初觉得“AI能搞定大量简单重复的B端页面”到真正落地时被各种细节问题打回原形，中间经历了不少曲折。今天就把这些实实在在的体会和教训一次性说清楚，也算是给同样在探索AI前端代码生成的人一份可信的参考。

产品介绍

背景

团队在AI大模型上做了大量探索，发现AI能高效处理简单重复的事务。B端场景标准化程度高，无论低代码还是源码开发，理论上都存在提效空间。同时，基础平台有大量B端页面研发需求，天然呼唤更高效的开发方式。经过调研，预计每年可在团队内部节省相当可观的人力。

产品能力

落地业务

已有5+项目落地，平均提效15%，用户调用次数超过5000+。在实际落地过程中，遇到的麻烦远比预想的多，但通过技术+产品的手段陆续解决了。下面挑几个印象最深的分享出来。

遇到的问题

一、prompt管理&测评成本大

一开始在idealab上做模型和prompt的评测，但需要大量的测试数据集（100+张图片）。改一句prompt就得重新跑所有测试数据，测评成本极高，而且没法打分，效率低得让人头疼。

自己搭了一套专门用于UI测评的系统，可以快速测评图片并高效打分，还能版本化管理prompt内容。工欲善其事必先利其器，有了这套系统，评测效率提升了一大截。

二、图片识别准确率过低

定义了一套准确率规则（结构布局、组件类型、组件内容）。一开始用GPT4V，图片识别准确率只有50%，连及格线都够不着。

• 阶段1：发现4V对中文识别很差，但对英文识别不错。于是通过OCR把中文翻译成英文再识别，最后翻回中文，识别率提升到70%-80%。
• 阶段2：今年3月Gemini和GPT4o出来后，我们对Gemini做了大量测试。Gemini的图片识别能力更强、性能更好、token也够长。切换后大部分测评图片的准确率能达到90%左右。

三、某些图片内容识别准确率低

比如表格详情里的label项、搜索表格中的搜表单项、表单页面每行组件个数（有时4个，有时5个），以及子组件的先后顺序，都容易识别错。

table的操作项，AI会把“|”或空格误认为一个操作项。我们定义用action表示操作项，但经常多出一列叫“操作”的column。表单标题的“*”号也很难处理。

通过OCR分析组件标题位置，能得出标题在同一水平线的个数（比如6个），从而确定表单一行有几个组件，做出正确布局。同样可以得到标题顺序，重新排列子组件。

[{"height": 15,"width": 54,"word": "项目管理","x": 0,"y": 10},{"height": 55,"width": 15,"word": "新建项目","x": 93,"y": -10},{"height": 12,"width": 13,"word": "2","x": 401,"y": 71}]

对JSON做预处理

• table action做拆分——工程去处理，包括空格、换行符等。
• 去掉表单label里的“*”，增加require标识。

四、上行prompt过长导致模型返回错误&出现幻觉

当需要识别更多组件和不同页面类型时，一套提示词里塞了太多demo示例，导致上行token过长。AI开始产生幻觉，调用时间变长，经常直接返回错误，成本也直线上升。

按页面类型拆分prompt——把提示词拆成多份，减少单次token量，也减少幻觉。页面类型识别靠AI+OCR，准确率95%以上，万一识别不准，还有通用prompt兜底。

五、下行组件节点过多导致准确率下降

模型返回的组件节点太多时，出错率明显增加，准确率跟着下降。

很多场景只需要对组件做个简单标识（比如是否包含图片、是否是链接、能否复制）。这种简化后的识别准确率非常高。

六、定制场景差异大，生成内容无法复用

对接业务时，场景差异实在太大。我们只能提供基础和通用的组件识别，生成的代码也是通用组件库（fusion、antd）的源码，根本满足不了业务定制需求。

把之前做的一整套AI能力抽象化和标准化，提供组件化的能力对外开放。业务只需要定制个别组件，就能完成整个页面的识别和代码生成。这样一来，业务定制一套D2C的成本降低80%。

AI在D2C方向的总结

AI可提效的点

AI不是万能的，但能通过图片生成的代码主要包括以下几类：

• 页面静态内容生成：
  组件、组件布局、静态文案填充、表单必填项等；自动生成表格内部的cell渲染内容（状态、图片、进度条等）。

• name标识命名：
  包括表单组件的name、表格列的dataIndex等——命名向来是不少开发者的痛点。
  • 方案一：根据中文标题让AI自动生成规范的英文命名。
  • 方案二：根据接口文档自动生成name，并自动关联接口、生成请求逻辑，辅助联调。

• 组件className类名

• 部分布局等样式

• 规范代码风格：
  比如表格用JSON定义columns。很多外包代码质量堪忧，AI能自动产出更规范、易维护的代码。

• 业务通用逻辑：
  如表格删除需要二次确认、再提交接口等。
• 其他待补充……

AI不适用场景

这些都是目前还没解决的点：

• 模型对

  icon识别
  不太好，只能认出复制、删除、箭头等常见图标，不常见的就抓瞎。
• 经常出现

  样式风格
  识别错误，比如步骤条的类型（circle、arrow、dot）容易弄混。

• 字体识别
  比较差——颜色、大小、类型都很难准确识别。好在B端一般有设计规范，加上OCR能解决一部分。
• AI无法识别不存在的内容（或者说

  业务逻辑
  ）。比如一张表单图里，你不知道某个组件需不需要自适应宽度、宽度变长后一行显示几个——这些需要人工定义。
• 一些不常见的细节逻辑，比如

  合并表格
  等。
• 其他补充中……

prompt规范&使用建议

• 推荐使用readme格式书写prompt。
• 提示词里不要出现“上面”“下面”这种含糊的词，一定要具体、精确。
• 重要的内容放在prompt最后强调。
• 不要在示例里一次性返回所有属性——会有很多冗余字段。可以描述成“如果xxx情况，就添加属性xxx”，让AI按需返回，工程里再设置默认值。
• 其他补充中……

结语

从prompt管理的繁琐与测评效率低下，到图片识别精度的瓶颈，再到定制场景的多样性难题，本文逐一分享了应对策略与优化成果。这不仅是一次技术实践的深度剖析，也是对AI在D2C方向潜力与局限的客观总结——希望能给前端开发者和AI研究者带来一些真实的启发。