太真实了！tldraw 发布 makereal 功能🖼

介绍 tldraw 的 make real 功能，演示如何利用 AI 将手绘草图转化为可交互的网页代码。

UP主: 沧海九粟 · 时长: 5:18 · 🔗 B站原视频

发布: 2023-11-17 · 收录: 2025-02-03

标签: tldraw · AI编程 · GPT-4V · 前端开发 · 生产力工具

开源白板 tldraw 是啥，强在哪

小伙伴们大家好。

今天给大家介绍一款开源的软件：开源、免费的白板软件 tldraw。这其实是一款在业内蛮有名的白板软件。

它的主要特色是：虽然功能不多，但在手写 handwriting 的 style 风格组件，以及书写处理上做得非常棒，非常流畅，几乎是同类产品里做得最好的一款。

另外它也很棒的一点是开源、免费，并且可以通过 React 植入到你的代码里面，这个白板能力非常强。

不过今天要介绍的不是这块能力，因为 B 站已经有很多小伙伴讲过了。

今天的重点在 AI，在它和 OpenAI 的能力结合。

它昨天正式发布了一个新的子功能，叫 make real。意味着大家在用白板画一些内容后，可以把它变成真实可用的代码。这些代码不单只是页面，并且可以直接使用、直接交互。

下面来看一些实际例子。

第一个例子是一个计算器。我们画一个计算器的线框图，然后 make real，就可以得到结果。

关键是它可以实际使用，你可以直接在这里做计算，这个很酷。

再往下是一个界面：往银行账户里存钱，有输入框、按钮，还有账户内容展示。

make real 之后，就能得到一个可以初步使用的页面内容，这个也非常方便。

下面这个大家注意，它做了 responsive 的呈现：有手机版、有桌面版。

把这些都选中，要求它一起呈现成一个内容，最后的结果是具备 responsive 能力的，这就比较厉害了，比我们想象中更丰富。

再看一个饼图，需要一些动画效果，比如往左转、往右转，下面还有显示内容。

全部框上后点 make real，最终就能得到带动画效果、可以直接使用的界面。这个会稍微花更多时间，因为动画效果更多一点。

顺便说一下，点击右上角的 copy 图形，可以拿到源代码。页面代码基本上都是 GPT 来做的。

下面就更令人震惊了：你直接画一个游戏的界面，通过 make real 得到一个经典的贪吃蛇游戏，你可以在这里玩。

你做的就是把线框图做出来，让 GPT 能够识别出你要干啥，然后它帮你把代码做出来。

而且你可以通过画板上的类似评论的做法，让它迭代式生成内容。

比方说现在的内容不太满意，要把按钮变成绿色，要把开头的 title 变得更友好一点，同样 make real 之后，就能得到更好的结果。

所有这一切都发生在原先用来画图的白板软件上，这就让大家有很多遐想：以后产品经理直接画个图，它就把前端代码做完了，前端工程师可能主要去做一些页面逻辑。

这些能力会基于 OpenAI 的能力去用，所以真正使用这个功能时，需要在界面上提供一个 OpenAI 的 API key 才能用。

我也会把它这个新功能的链接地址放在视频的评论/简介区里，大家都可以去尝试。如果没有的话，也可以关注它的账号，看看很多大神已经做出来的一些非常酷炫的内容。

那我们今天的工具就介绍到这里，谢谢大家。