现在ChatGPT能将草图变成可操作的软件

“

最新发布的“Make it Real”功能原型让用户将他们绘制的软件图像轻松变成可操作的现实，借助OpenAI的GPT-4V API，它将矢量绘图转化为易于理解的代码，从而实现了无限创意可能性。这个创新工具正在引起广泛关注，并在用户社区中掀起了一股创作热潮，让界面设计和应用开发变得更加容易和有趣。

这周，一个叫做“tldraw”的协作白板应用公司发布了一个名为“Make it Real”的功能原型，这一举措在在线社区引起了广泛的兴趣和讨论。这个“Make it Real”功能的亮点是它可以将用户绘制的软件图像变成可交互的现实。它的魔力来自于OpenAI的GPT-4V API，它可以将矢量绘图转化为易于理解的Tailwind CSS和JavaScript网络代码，这样用户可以轻松地复制用户界面，甚至制作像打砖块这样简单的游戏。

一位名叫Kevin Cannon的设计师在一个X（Twitter）上展示了这一功能，他展示了可以旋转屏幕上的对象的滑块、改变对象颜色的界面，以及一个可供玩耍的井字棋游戏。随后，其他人也效仿他，展示了绘制类似打砖块游戏的复制品，创建了一个工作时钟，甚至制作了蛇游戏、乒乓球游戏和可视状态图表等等。

现在用户可以在线实时体验“Make It Real”的演示，但要注意，要运行这个功能，用户需要提供OpenAI的API密钥，这可能会带来一定的安全风险，因为如果密钥被泄露，别人可能会滥用它，导致高额费用（OpenAI的API费用是按数据传输量计费）。对于技术能力较强的用户，他们也可以选择在本地运行代码，但仍需要OpenAI API的访问权限。

“tldraw”是由伦敦的Steve Ruiz开发的，是一个开源的协作白板工具，提供一个无限画布，可以用来绘制、添加文本和媒体，而不需要登录。这个项目在2021年推出，并获得了270万美元的种子资金支持，还得到了GitHub的赞助。最近，随着GPT-4V API的发布，Ruiz将Sawyer Hood创建的名为“draw-a-ui”的设计原型整合到tldraw中，以引入AI功能。

GPT-4V是OpenAI的一个版本，它能够理解视觉图像并将其用作提示。简单来说，这个“Make it Real”功能通过生成一个base64编码的PNG格式的绘制组件，然后将其传递给GPT-4V Vision，再使用Tailwind将图像转化为文件的系统提示。下面是一个实际的系统提示示例，告诉GPT-4V如何处理输入并将其转化为可操作的代码：

const systemPrompt = 'You are an expert web developer who specializes in tailwind css.

A user will provide you with a low-fidelity wireframe of an application.

You will return a single html file that uses HTML, tailwind css, and JavaScript to create a high fidelity website.

Include any extra CSS and JavaScript in the html file.

If you have any images, load them from Unsplash or use solid colored rectangles.

The user will provide you with notes in blue or red text, arrows, or drawings.

The user may also include images of other websites as style references. Transfer the styles as best as you can, matching fonts / colors / layouts.

They may also provide you with the html of a previous design that they want you to iterate from.

Carry out any changes they request from you.

In the wireframe, the previous design's html will appear as a white rectangle.

Use creative license to make the application more fleshed out.

Use JavaScript modules and unpkg to import any necessary dependencies.'

随着越来越多的人尝试使用GPT-4V并将其与其他工具结合，我们可能会在未来几周看到更多基于OpenAI视觉解释技术的新应用。同样在这周，有一位开发者使用GPT-4V API创造了一个视频，其中David Attenborough的声音是由虚假AI实时叙述的，我们也进行了独立的报道。

总的来说，我们似乎已经进入了一种可能的未来软件开发方式，或者至少是界面设计方式，其中创建可交互的原型就像制作视觉模拟一样简单，然后让AI模型来完成剩下的工作。 正如一位开发者Michael Dubakov在展示他的“Make It Real”创作时所说： “好吧，@tldraw现在官方疯狂了。 在5年内，我们将看到创新步伐不断加快，我已经跟不上了。 ”