基于草图或界面截图,快速生成可交互代码——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不仅符合要求、美观,而且可以直接与之交互。

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

更多案例

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

如何使用

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

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

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

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu9 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss