关于现阶段 AI 生成可视化网页的可行性方案讨论

我开发过一款开源的数据可视化编辑器，在编辑完成后他会产生一个 json 格式的项目数据结构。这两年 AI 识图的效果快速发展。我就在想，如果我随手丢一个可视化面板的效果图，AI 就可以识别这个效果图中的元素，并且按照我项目的数据格式要求生成最终的 JSON 文件。这样一来岂不就完成了 AI 直接生成可视化面板的效果吗？

摸索了一两天之后有一条可实践的路径，大概流程为

让 AI 识别图片中的可视化元素。
根据识别的元素选择我编辑器中可以使用的组件
结合上面两点让 AI 输出一个简化版的数据结构，其中包括使用的组件类型、组件的尺寸、组件的位置等信息
然后再自己编写一套逻辑解析上面的简化版数据结构，确保生成的最终数据结构是编辑器可以识别的

上面的流程确实能够走通，但是生成的效果图实在惨不忍睹(如下图）。

最根本的原因在于不管提示词写得多么详细，AI 反馈过来的简化的数据结构始终都是非常潦草的。比如我从肉眼上看这个设计稿可能至少需要一百个可视化元素，但实际上它返回给我的结果可能就包含十几二十个元素。我以为是 AI 上下文大小限制的问题。但我切换过高级模型 200K 的上下文长度完全是足够的。但是 AI 输出结果依然没有提升多少。想问问各位 V 友。这个想法是现阶段可以实现的吗？ AI 识图的能力有没有到可以支撑这个想法的地步？

gorvey

1 月 21 日

我做过一个类似的,将设计图转为 html+css 静态页面,还原度还不错
具体思路是从设计平台比如蓝湖里面复制图层信息,然后给 AI 生成
我拿的是这些平台预处理后的图层信息,里面的样式已经生成了,然后过滤掉不需要的字段,最终结果比如:
---
layerData 结构描述:
- type: 图层类型
- name: 图层名称
- x, y: 坐标位置
- width, height: 尺寸
- css: 样式信息
- content: 图层内容

layerDatas:
[
{
"type": "text",
"name": "默认标签",
"x": 670,
"y": 296,
"width": 55,
"height": 17,
"css": [
"font-weight: normal;",
"font-size: 12px;",
"line-height: 20px;",
"color: rgba(0, 0, 0, 0.6);"
],
"content": "总分：150"
},
{
"type": "text",
"name": "默认标签",
"x": 742,
"y": 296,
"width": 103,
"height": 17,
"css": [
"font-weight: normal;",
"font-size: 12px;",
"line-height: 20px;",
"color: rgba(0, 0, 0, 0.6);"
],
"content": "答题时长：120 分钟"
},
{
"type": "shape",
"name": "矩形 9835",
"x": 733,
"y": 299,
"width": 1,
"height": 12,
"css": [
"width: 1px;",
"height: 12px;",
"background: #d6d7d8;"
],
"content": ""
}
]

再让 AI 根据图层信息,转换为页面代码,相当于直接从你这里第三步开始,因为是从设计稿源文件里面直接获取的图层信息，所以比较准确,如果你能想办法解决下第一步识图的问题,效果应该还不错的