3分钟搞定陌陌约聊原型图设计，剩下的时间我竟然用来……

“以前，做一个原型图像跑马拉松；现在，像点外卖。”

做设计的，谁没被原型图折磨过？

熬夜画线框，反复调间距，手动加交互……

明明只是验证个想法，却硬生生耗成体力活。

---

最近有个小需求：老板让快速做一个类似陌陌的聊天界面原型，用来测试用户流程。

搁以前，这事儿得分几步走：

1. 手绘草图：先拿纸笔画布局，反复修改；

2. 设计软件开干：用PS或Sketch一个个像素对齐，调间距、配色；

3. 加交互：导入Axure或墨刀，手动拉跳转链接；

4. 开发对接：切图标注，写说明文档……

没一个月根本搞不定，UI设计是细活，根本不能快。  

但现在？

我用了点“科技与狠活”—— 使用AI赋能，将提示词直接扔给AI，然后3分钟AI ta 就全给我生成好了。

我全程没碰画笔，没抠像素。

效果还很不错，我们先看看：

---

其实对于AI来说，做这样的页面挺简单的，下面我将制作的过程详细和大家汇报一下。

第一步

首先我们需要一个空的文件夹来放我们的页面，这个页面最好是没有中文的。

我创建了一个momo_proto_graph的文件夹

第二步

使用Trae打开这个文件夹。
如果有对Trae不了解的可以看看我之前的文章，有解释。

Trae解释

第三步

打开指定的文件夹📂之后，别忘了选择Builder 模式。

Builder模式适合从0到1制作一个项目。

模式选好之后在右下方输入提示词。

此处还有一个细节：模型选择Claude-3.7-Sonnet

都设置好之后直接回车发送，然后AI就开始帮你分析啦

到这一步，按道理你就可以去泡茶喝了……

但也有一些意外，当AI发现有一些文件需要你审查时，你需要用鼠标点击一下、

经过几分钟的处理，我们的AI就全部处理完成了，在左边他生成了9个文件——大约几千行代码吧。

右边他还详细解释了这些页面的功能，可以说非常的奈斯！

---

效果

---

现在3分钟把1个月的活干完了，省下来的时间干嘛？

• 和产品经理吵架（bushi）；
• 多做3个备选方案；
• 喝咖啡，喝茶，撩妹。

最后提醒各位：别光顾着偷懒，记得把咖啡喝完。