开源 ant-codeAI，图片生成代码（React， Vue， Tailwind）

前一阵体验试用 screenshot-to-code 通过截图生成代码挺有意思，本身也有一直关注尝试这个方向，但是试用尤其是截图背后的逻辑代码输出不太符合预期所以改了改代码。开源地址

一、新增/修改能力

1. 将后端代码从 python 改为 node （主要是更熟悉 node ）。
2. 提供自定义 prompt 能力让输出的代码更有逻辑、更可控。
3. 新增 react+antd 、vue+element plus 、vue+tailwind 代码输出。
4. 将输出的静态资源地址改为国内可访问地址。
5. 设置上增加代理 openAI url 录入入口。
6. 腾讯云部署了一份临时地址，技术可以自己源代码本地跑着玩玩。

二、使用体验

• 挺费钱，只保留了 gpt-4-vision-preview 的请求，一次差不多 0.3 元。
• prompt 成本较高，需要反复调整 prompt 才可以输出期望的代码。
• 每次使用相同的图片，输出的代码不一样不够稳定，有时输出的代码会有缺失报错。
• system + 自定义 prompt 的组合可以输出功能相近有逻辑的代码。
• 截图为中文，输出效果一般。

三、效果截图

在使用的技术（ React ，Vue ，Tailwind ，组件库）官网上截图还原度会更高。下面是使用了项目修改后的效果图。 下面是 Tailwind 上截图生成的对比。

原图	生成网页效果

选择自定义的 prompt 后，会输出更相近且带有逻辑的页面。

原图	生成网页效果

四、更新计划

初步想法，随着更深入的研究计划可能有变。

• 多图片分块支持。
• 引入 langChain 输出更符合预期的代码。
• 复杂开发场景支持。
• 和可视化拖拽结合。
• 简单场景完善整个链路，比如表单从截图生成到数据提交。

五、交流

♂目前定位还不清晰，可能偏向技术思维有些固化，想交流下是否有用过 screenshot-to-code 或者类似功能的使用感受？有没有在实际场景用到了？等相关交流看看这个开源项目可能往哪个方向继续做。

六、开源地址：

https://github.com/sparrow-js/ant-codeAI