OpenAI 发布新旗舰模型 GPT-4o！UI 设计师的又一 AI 设计神器来了！

昨天凌晨大洋彼岸的 OpenAI 召开春季线上直播，发布了最新的旗舰模型 GPT-4o，可以实时对音频、图片和文本进行推理，支持以文本、音频和图像的任意组合作为输入，并生成文本、音频和图像的任意组合输出，这让原先只能处理文本的 ChatGPT 具备了真正意义上的多模型能力。

从官方可以得到的消息是，GPT-4o 即将向所有人免费开放，少部分用户反馈在网页版中可看到免费试用 GPT-4o 的提示，付费用户则可以直接使用最新的模型，对比免费版可获得 5 倍调用额度，并能最早访问其全新 macOS 桌面 App 和下一代语音及视频功能。

新旗舰模型GPT-4o

眼看 OpenAI 在朝 AGI 狂奔的路上又迈进了一大步，尤其是视觉识别和语音处理方面，这对从事相关领域的人来说，无疑是一个令人振奋的消息。

以 UI 设计师群体为例，过去遇到一个好看的 UI 网页设计作品，想把它复刻出来，或是基于此制作一个交互原型，得完全从零到一手动创建，整个过程繁琐又枯燥，很容易消磨设计师的创作热情。

不过最新诞生的 GPT-4o 模型，有望从根本上重塑过去的 UI 设计流程，得益于其多模型能力，它能够接收并理解我们输入的文本、上传的图片等，对我们提出的需求给出更精准的回复。

就如上面提到的，基于效果图制作 UI 交互原型，这个用 ChatGPT 最新的 GPT-4o 模型就能轻松实现，如下图，有人对比了输入的图片和 GPT-4o 输出的 HTML 代码渲染得到的网页效果，被 GPT-4o 出色的表现惊艳到了。

GPT-4o 一键生成 UI 设计原型

① 搜集喜欢的 UI 设计作品

搜集自己喜欢的 UI 设计作品，可以从网上查找下载，也可以从专门的 UI 设计资源网站搜索查看自己喜欢的 UI 作品，将 UI 作品截图保存、或是导出到本地。

专业的 UI 设计资源网站，分成国外和国内两大派别，国外有 Figma 社区，国内的是 Pixso 模板资源，可按需选择所需的 UI 设计资源网站。

Pixso 资源社区，是国内领先的在线 UI 设计工具 Pixso 旗下的 UGC 模板平台，这里汇集了用户发布的各类设计模板资源，涵盖移动设计、网页设计、UI 组件库、界面合集、设计系统、差插画等，是众多设计师寻找设计资源首推的平台。

*Pixso资源社区

在浏览器 Pixso 资源社区时，点击任意一个资源的封面，可进入到其详情页，里面提供了查看模板详情的预览窗口，如果有看到喜欢的视觉图，可使用截图软件截取后保存到电脑本地。

② 上传图片转换为网页 HTML 代码

搜集喜欢的 UI 设计作品后，打开 GPT-4o 首页，按照提示登录，点击左上角的「新聊天」，新建一个对话窗口，接着点击底部输入框左侧的「文件」按钮，上传刚搜集的 UI 设计作品截图。

上传图片后，同时输入我们的需求，让 GPT-4o 模型基于 UI 截图，给出相对应的网页代码，将 GPT-4o 返回的代码粘贴到代码编辑器或 IDE 中，如 VS Code、Webstorm 等，保存为 index 文件后在浏览器打开，就能体验到带有交互效果的网页。

需要说明的是，GPT-4o 模型目前仅对付费用户和少数地区的用户开放，暂未全量推送给所有用户，因此想要基于 GPT-4o 自动生成 UI 交互原型的免费用户还得再等等。

在这之外，是否还有其他将设计稿一键转换为交互原型的方法呢？

笔者这里给大家额外提供一种可行的方法，使用上架到 Pixso 插件广场的设计插件——Pixso to code，可以将现成的 UI 设计稿一键转换为 html 代码，经过浏览器渲染，同样可以实现类似前面的效果。

*Pixso插件广场

设计稿一键转代码插件 Pixso to code

Pixso to code 插件非常强大，可以将位于 Pixso 中的 UI 设计稿快速转换为 Tailwind、Flutter、SwiftUI、HTML 代码，满足不同场景下的需求。

✅ 想要在线体验这一 UI 设计稿转代码插件的朋友，可以前往 Pixso 插件广场搜索安装「Pixso to code」插件。

点击上方的卡片，打开 Pixso to code 插件页面，点击右上角的「安装」按钮，将 Pixso to code 插件安装到 Pixso。

接着打开在线 UI 设计工具 Pixso 的工作台，点击「新建设计文件」，创建一个 Pixso 设计文件。

打开刚创建的 Pixso 文件或导入的设计文件，点击 Pixso 编辑界面右上角的「插件」图标，在「我的插件」面板中可以看到刚安装的 Pixso to Code 插件，单击运行插件。

打开 Pixso to Code 插件后，用鼠标选中 Pixso 文件中的任意元素，插件面板会显示设计稿在不同编程语言或开发框架下对应的代码，点击插件面板顶部的选项，可切换查看对应的代码。 

点击插件面板的「复制到剪切板」按钮，一键复制到系统剪贴板，接着你可以把复制的代码粘贴到代码编辑器或 IDE 中。 

在 Pixso to Code 插件的帮助下，通过简单的操作，就可以将设计稿一键转换为代码，是不是非常简单呢？看到这里，还不赶紧打开在线 UI 设计工具 Pixso 尝试一下？

码字不易，如果对你有帮助的话，请别忘了赏个【三连】或是【关注】我哦，关注不迷路，那我们下次再见咯！