我做过一个类似的,将设计图转为 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 根据图层信息,转换为页面代码,相当于直接从你这里第三步开始,因为是从设计稿源文件里面直接获取的图层信息，所以比较准确,如果你能想办法解决下第一步识图的问题,效果应该还不错的
不好说,我从 glm4.6 用下来,最开始和 cc 一起用,有很多 bug,乱码,报错等等,这些不知道是在模型层面修复,还是哪里的,可能存在一些使用上的问题
gorvey 最近的时间轴更新
Select Language