基于草图或界面截图,快速生成可交互代码——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 的实现原理,很快更新~

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

相关推荐
Rockson4 分钟前
使用Ruby接入实时行情API教程
javascript·python
祝余呀16 分钟前
HTML初学者第三天
前端·html
就爱瞎逛32 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81635 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者1 小时前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架