写页面是前端开发的核心任务。为了提高开发效率,我们已经熟练采用了组件化和低代码开发等方法。在2023年3月,OpenAI公布了GPT-4,展示了通过一张简单的草图就能生成前端代码的能力,这一多模态的展示方式让人惊叹,许多人称之为“历史性的一刻”。然而,我之前试过,直接生成的代码在渲染时过于简单且美观程度有限,而且在不是自己写的代码基础上删改也比较麻烦,相比之下,自己手写代码可能更为高效。
@tldraw make-real 草图生成代码
尽管如此,最近我在即刻和X平台上看到了许多使用 @tldraw 的 make-real 功能将草图转换为代码的视频,有被震撼到。
使用流程
操作流程非常简单:
- 绘制草图或使用截图。
- 可以添加注释来增强说明。
- 调用OpenAI的GPT-4V API。
- 快速得到HTML、CSS及JavaScript代码。
- 代码样式基于Tailwind CSS,支持在iframe中即时预览,并且适应响应式设计。
这种方法比单一的语言描述更为直观明了。
案例展示
最初吸引我的是 即刻用户MichaelYuhe的计算器示例。
初学前端时,实现计算器demo是一项基础任务,大概就是学了一点JavaScript时开始写的,实现的过程学到了很多,初步了解了前端如何构建一个页面、更改数据。
在tldraw make-real的帮助下,简单画完草图,即可收获demo。生成的UI不仅符合要求、美观,而且可以直接点击交互:
可惜掘金放视频得先上传到西瓜视频,这里强烈建议点击原博主的 视频链接 感受。
更多案例
X平台上还有更多案例,包括仪表盘、图表,以及一些经典游戏,如贪吃蛇、打砖块,甚至是几年前非常流行的 Flappy bird(这个也推荐看看) 都能实现。这些示例表明,生成一些常见 widget 很nice,确实是真实有效的生产力工具!
如何使用
只需访问 makereal.tldraw.com/ ,在页面下方输入您的OpenAI API密钥即可使用。画草图/截图,选中要转换的部分,点击Make Real开始丝滑体验。如何获取API key见下:
如在使用过程中遇到问题,官方提供了详细的使用指南。
以上为《基于草图或界面截图,快速生成可交互代码——Tldraw、GPTs使用方式与体验(上)》,接下来的部分将带来我个人的使用经历、Tldraw make-real与 GPTs 使用比较及 make-real 的实现原理,很快更新~
注意:部分图片来源于网络,如有侵权,请联系删除。
原文链接:https://juejin.cn/post/7328234485589295143 作者:ayyo_cici