ChatGPT截图生成代码测试-你不能完全信任它，但是也有惊喜

今天获得了GPT-4V的使用资格，于是想试一下@mckaywrigley^[1]前几天试过的，给它一个设计稿截图让它来生成对应的代码。先说结论，目前GPT-4V的生成精度不太行，内容之间的对齐关系和大小经常搞错。目前仅仅依靠GPT-4V来一步到位还原设计稿的样式是不太可能的。但是我也想到了一些基于现在的能力它的其他作用。下面是相关的结论和生成过程。        

生成过程

我找了一个Relume设计系统从里面找组件的设计稿，主要原因是这个设计系统以黑白为主样式都比较简单但是比较注重排版。这样方便GPT-4V来还原，没想到就这么简单的东西GPT-4V都差点气死我。

我分别找了Relume下面这两张图来生成，结果前两张由于CSS过长，ChatGPT今天又非常的慢，慢的令人发指，所以连续十几次生成到最后报错，无法生成。

之后我找了一个相对复杂的想测试一下，顺便让它写一下对应的交互。同时为了避免报错，我让它分开生成HTML、CSS和JS文件。这次终于磕磕绊绊写完了。

下面就是实现的结果，对比上面可以看到，虽然美观度是在线的，但是细节跟原图差了非常多，比如内容的间距、问题部分的描边变成了分割线，下面的Still have a question部分的对齐方式，甚至按钮颜色都错了。

样式上问题虽然多，但是不同分辨率的适配和展开收起的交互确实都做了，也没什么问题。

之后我又把原图和它自己生成的图给了GPT-4V让它根据两张图的不同点，生成一份设计走查报告，结果发现，它确实发现不了这两者的区别。全是无需修改。

结论

我们需要看到虽然GPT-4V生成的内容细节还原不行，但是审美是在线的，它的字体大小间距甚至自动加上的响应式布局都是符合需求的。

所以目前来看GPT-4V更大的作用是帮一些没有审美的工作者，完善他们的界面或者设计。作为一个设计副驾驶存在，你可以不断地提交你设计或者开发的内容让GPT-4V帮你改善你的设计和交互。让它变得越来越好。

至于内容的生成仅靠GPT-4V显然不行，但是如果有API的话搭配已有的设计系统基建和前端样式库，我觉得应付一些普通页面的开发是完全没问题的。开发者的时间可以用在更复杂的业务逻辑上面。

我知道有些前端每次还原界面样式都非常痛苦，有些设计细节他们确实注意不到，我也尝试了让GPT-4V来检查前端的还原结果，但显然GPT-4V无法识别一些细微的区别，甚至对齐方式的不一样也无法发现，看来走查和样式修改这一部分仅靠GPT-4V也不太现实了。

希望尽快开放API之后我们可以接入现有的一些设计和前端基建来更深入的探索GPT-4V在这方面的能力极限。

参考资料