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

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

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