老板让我做官网首页设计，我用 AI 半小时做了 10 版方案，还直接发布“上线”了！

【资料图】

最近给大家分享了不少用 AI 生成前期素材、辅助需求落地的案例，确实能省不少时间。同时我们也在想，能不能让 AI 帮我们做更多的事情，比如生成一整张 UI 设计稿。

01 选择 AI 工具

输入关键词，让 AI 生成一张电影网站首页。

确实有那么点儿意思了，但生成的只是一张图，可以看看布局和样式，想要落地使用肯定是不行。

用 AI 生成一个图标时，我们可以通过多次生成来筛选，再用 PS 精修调整；但用 AI 生成 UI 设计稿的要求就高了，字体、样式、组件都需要遵循设计规范，所以最好能生成可编辑的源文件。

翻遍全网，终于让我找到了一款满足条件且立刻就能用上的工具——「即时 AI」，输入文字就能生成可编辑 UI 设计稿，而且同时支持生成 APP 和 web 两种尺寸。

「即时 AI」官网：http://mtw.so/5LkTpb

先来简单尝试一下，让 AI 生成一个电影播放网站首页，等待几十秒，得到了以下 4 个页面。

基础结构都还比较清晰，界面 1 和 2 明显完整性更高，可以先保留下来。

参考第一次生成的结果，我们对于这个「电影网站首页」应该包含哪些模块有了一个大概的印象，可以将栏目进一步划分为热门影片、近期上映、电影资讯等。

根据这些优化描述语再生成一次，得到了又一张可用的设计稿。

描述语：生成一个电影播放网站首页，包含热门影片推荐、近期上映、电影行业资讯模块

即时 AI 生成图片如下：

看着效果已经很不错了，简单修改下顶部的图标、替换一下 logo，拿去给老板看看布局、根据这个对齐细化需求肯定是没问题的。

02 快速产出多个方案

正常我们做需求，画一个方案已经很耗费时间，最多再给出两个备选方案，但用 AI 辅助产出完全没有这个压力。

每次只要等待 60s 左右就可以获得 4 张不错的设计稿，一共尝试了四五次，就筛选出了以下可供参考、可二次编辑使用的 AI 作品。

除了出图快，借助 AI 工具我们还可以不受限制地发挥创意。

我尝试了继续增加描述词，让即时 AI 生成更符合预期的设计稿；也试了试只保留对页面主要内容的描述，看看 AI 还能怎样发挥创意。

当我删去关于内容模块的描述后，AI 非常有创意地在页面中加上了电影详情（包含剧情简介、演职员表）。

在另一张生成结果中，AI 还帮我加上了「影评」和「购票信息」，直接“打通”线上线下观影流程。

主要的功能用得差不多了，我的 10 个方案也攒够了。

同样需要 AI 帮忙设计初稿，给老板过方案的，现在就可以去试试了。全面开放使用，每天 20 次机会，最多可生成 80 张 APP/web 设计稿，完全够用。

「即时 AI」官网：http://mtw.so/5LkTpb

03 一键发布“上线”

「即时 AI」和即时设计工具是打通的，原本打算把我刚用 AI 做好的 10 个方案保存到即时设计，然后分享预览给领导看，但我突然注意到还有个按钮是【发布网页】，点一下直接帮我把 AI 设计稿发布成可在线查看的网页了。

发布成功后，复制链接或者截图二维码发给领导同事，就能在线打开查看“线上”效果，而且高度还原设计稿。

目前这个发布上线的功能只可以在「即时 AI」中使用，如果能在即时设计内使用，那不仅能给前端开发同学节省时间，还能给我们 UI 设计师省去反复走查的痛苦，各种精美的设计效果也能被一一还原。

总结

以上就是和大家分享我使用「即时 AI」产出 UI 初版方案的全部内容啦！

整个试下来，AI 生成的 UI 设计稿还比较初级，适合在前期探索阶段用来获取灵感、参考布局。但整体生成速度很快，且支持二次编辑，既能生成 APP 页面，也支持生成 web 尺寸，覆盖了大多数 UI 设计场景。

平均 30～60s 的生成速度，也可以帮设计师们快速生成多张不同布局的高保真图，提供除竞品以外的页面参考，试错成本也大幅降低。搭配“发布上线”这个功能，快速生成可在线查看的预览网页，实用性大幅提升。

AI 工具发展很快，但我们也不必担心被取代，因为 UI 设计需要考虑用户交互的问题，而如何提升用户体验还是需要设计师去深入研究。但我很推荐大家用 AI 生成的 UI 界面来快速生成原型、设计初稿，以便进行测试和验证；又或者用参考 AI 作品来增强和改进自己的设计。

总的来说，无论 AI 发展到什么程度，最终的设计决策仍需由设计师来做出。我们可以积极尝试更多工具，让 AI 成为最好的创作帮手！

希望以上内容对大家有所帮助，如果感觉有用，请点个赞～

最后，感兴趣的可以去试试「即时 AI」，复制链接到浏览器打开即可：

http://mtw.so/5LkTpb

关键词：