一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

基于草图或界面截图,快速生成可交互代码——Tldraw、GPTs使用方式与体验(上)

写页面是前端开发的核心任务。为了提高开发效率,我们已经熟练采用了组件化和低代码开发等方法。在2023年3月,OpenAI公布了GPT-4,展示了通过一张简单的草图就能生成前端代码的能力,这一多模态的展示方式让人惊叹,许多人称之为“历史性的一刻”。然而,我之前试过,直接生成的代码在渲染时过于简单且美观程度有限,而且在不是自己写的代码基础上删改也比较麻烦,相比之下,自己手写代码可能更为高效。

@tldraw make-real 草图生成代码

尽管如此,最近我在即刻和X平台上看到了许多使用 @tldraw 的 make-real 功能将草图转换为代码的视频,有被震撼到。

使用流程

操作流程非常简单:

  1. 绘制草图或使用截图。
  2. 可以添加注释来增强说明。
  3. 调用OpenAI的GPT-4V API
  4. 快速得到HTML、CSS及JavaScript代码。
  5. 代码样式基于Tailwind CSS,支持在iframe中即时预览,并且适应响应式设计

这种方法比单一的语言描述更为直观明了。

案例展示

最初吸引我的是 即刻用户MichaelYuhe的计算器示例

初学前端时,实现计算器demo是一项基础任务,大概就是学了一点JavaScript时开始写的,实现的过程学到了很多,初步了解了前端如何构建一个页面、更改数据。

在tldraw make-real的帮助下,简单画完草图,即可收获demo。生成的UI不仅符合要求、美观,而且可以直接点击交互:

基于草图或界面截图,快速生成可交互代码——Tldraw、GPTs使用方式与体验(上)
基于草图或界面截图,快速生成可交互代码——Tldraw、GPTs使用方式与体验(上)

可惜掘金放视频得先上传到西瓜视频,这里强烈建议点击原博主的 视频链接 感受。

更多案例

X平台上还有更多案例,包括仪表盘图表,以及一些经典游戏,如贪吃蛇、打砖块,甚至是几年前非常流行的 Flappy bird(这个也推荐看看) 都能实现。这些示例表明,生成一些常见 widget 很nice,确实是真实有效的生产力工具!

基于草图或界面截图,快速生成可交互代码——Tldraw、GPTs使用方式与体验(上)
基于草图或界面截图,快速生成可交互代码——Tldraw、GPTs使用方式与体验(上)
基于草图或界面截图,快速生成可交互代码——Tldraw、GPTs使用方式与体验(上)

如何使用

只需访问 makereal.tldraw.com/ ,在页面下方输入您的OpenAI API密钥即可使用。画草图/截图,选中要转换的部分,点击Make Real开始丝滑体验。如何获取API key见下:

基于草图或界面截图,快速生成可交互代码——Tldraw、GPTs使用方式与体验(上)
如在使用过程中遇到问题,官方提供了详细的使用指南

以上为《基于草图或界面截图,快速生成可交互代码——Tldraw、GPTs使用方式与体验(上)》,接下来的部分将带来我个人的使用经历、Tldraw make-real与 GPTs 使用比较及 make-real 的实现原理,很快更新~

注意:部分图片来源于网络,如有侵权,请联系删除。

原文链接:https://juejin.cn/post/7328234485589295143 作者:ayyo_cici

(0)
上一篇 2024年1月27日 下午4:47
下一篇 2024年1月27日 下午4:57

相关推荐

发表评论

登录后才能评论