AI画原型,效果如何?

多客科技

作者：微信文章


前言

目前大模型最为大众所知的场景在搜索/查资料、解决文字问题、以及简单的图像/视频创作，而背后强大的Coding能力，是业内公认落地确定性最强的场景之一

而前端UI页面作为程序开发的一环，目前大模型能力自然可涉猎其中。作为产品经理，日常工作中产品原型图的创作，不妨也可尝试辅以AI能力

下面就以市面上集成大模型能力，最具人气的两款Coding产品：Cursor和Trae为例，看看AI画原型，效果究竟如何？

需注意的是，Cursor/Trae作为一款「套壳」AI产品，本身不具备AI编程能力，而是通过调用大模型接口的方式产生代码，并配合意图理解能力和一些「复制粘贴」操作完成文件创建和编写

一、基础提示词

首先准备提示词，引用郝敬（TaoOfAGI）同学的提示词稍加修改后：

我想开发一个｛精美购物APP｝，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：

1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑

2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理

3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验

4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰

5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等

6、index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接

7、真实感增强：

   - 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面

   - 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）

  - 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）

请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发

准备好提示词后，先登场的选手是Cursor

（1）Cursor

开始之前，先简单介绍Cursor工作界面，分为三个主区域：



①文件目录结构区：展示项目文件结构树和路径

②单文件内容区：点击左侧具体文件后展开在此处，从大模型获得的代码自动编写在此处（Agent模式），也可人工进行编辑调整

③自然语言对话编程区：在底部与AI对话，上方呈现AI处理进度和过程

准备工作：

创建项目：在本地创建项目文件夹（空），顶部file-Open Folder导入文件夹，此后项目所有操作均在此文件夹中进行；

选择模式：自然语言对话区下方选择「Agent」模式（自动模式，Cursor可创建和操作本地文件读写，无需自己动手复制粘贴），以及选择模型Claude 3.7 Sonnet（当前地表编程能力最强模型）配合使用

一切就绪后，终于可将上述准备好的提示词粘贴进来，send发送，等待Cursor一步步处理即可

期间可能需多次授权操作文件编辑许可，点击accept或回车即可，处理过程界面如下：



上下滑动，查看更多

完成后，打开项目文件夹中的index.html文件即可查看效果图：



对于0-1项目来说，Cursor完成度已然很高，体现在：

界面元素齐全：设计感、图标、配色、插图均在线

高保真可交互：四大金刚可点击跳转，不少按钮处具有点击效果，方便与开发展示沟通

不敢说拿来即用，但至少在应届生平均水平之上！

接下来，轮到Trae上场：

（2）Trae

简单介绍下，Trae是字节推出的AI IDE（Integrated Development Environment，集成开发环境），与Cursor类似，但Trae分为国际海外版与国内版。

两个版本除了界面语言中英文的区别，最重要是的接入的大模型并不一致，这也导致了海内外两个版本Coding能力的差异。

-海外版：接入Claude，可选3.7 Sonnet，编码能力与Cursor对齐

-国内版：主要模型使用Deepseek V3 0324（3月更新版）

多说一句，海外版先于国内版上线，猜测与Claude限制有关，而deepseek V3横空出世后，国内版顺势推出，接入V3，而Trae CN也是国内首个AI IDE

本次演示的是与Cursor不同模型（V3）的国内版Trae CN，如需关注海外版Trae能力，读者可自行测试后分享交流

进入Trae CN：



Trae与Cursor主界面结构类似，不再重复介绍。区别是Trae的模式选择在上方，分为Chat和Builder模式

-Chat：与Cursor chat模式一致，只从模型处拉取代码，人工粘贴，可控性强，要求操作者具有一定开发能力；

-Builder：对应Cursor Agent模式，软件可自动操作创建/编写文件（同样有授权确认）

另外，下方模型默认选择Deepseek V3 0324 ，无需调整

接着输入上述同一份提示词后，等待片刻，Trae的效果出来了：



这emmm，可以说高下立判：

界面粗糙：排版混乱、配图缺失、大部分图标丢失，好在最后一张图带上了四大金刚

缺乏交互，远称不上需求提的高保真页面

唯一值得称道的只是功能架构相对完整、以及适配手机尺寸展示了......

毫无疑问，Cursor胜出

但是，考虑到一个例子说明不了问题，于是我紧接着新增一个回合

二、有挑战的提示词

这次必须分出明显胜负，于是该回合我决定增加难度，让提示词更加丰富，指令更加具体，一来看他俩能不能执行到位，二来对Cursor能力进行一次摸底

于是在Deepseek的辅助下，得到如下提示词：



上下滑动，查看更多

略去过程，直接公布第二回合结果：

这次先看Trae，果不其然...



但崩得还是出乎意料：仅看到一个页面，还是只有外框和一行字，唯一一张图片没加载出来...缓一下

接着，来看上一回合王者Cursor的效果：



除了首页上半部分和某些位置存在显示堆叠问题，其它大部分地方均稳定发挥：

页而元素丰富，执行还原度很高；

交互细节到位，「我的」页中的封面收集竟然可以点击切换

至此，在这场原型大PK中，Cursor连胜两局

又或者说，Cursor背后的模型Claude3.7 sonnet过于强大...

无论如何，还是希望国产的Trae+Deepseek组合能够迎头赶上，持续看好国产AI产业

而Trae，作为互联网大厂出品，某些方面表现依然可圈可点，如对用户更加友好的交互界面：



（全中文界面，更适合中国宝宝体质~）

三、总结&思考

1.结合实际工作

回到现实工作场景，原型图的绘制场景大致分为两类：

从0-1构建项目

从1-N优化迭代

在一家稳定运营的企业中，第1类场景终归是少数（仅在启动一个全新项目时发生），而第2类场景则是工作日常

本文展示的仅是第1类绘图场景，而对于更加日常的第2类，场景多而杂，细碎且繁复，对于大模型的考验则更为严峻，AI想要完成得到令人满意的效果，还有较长的路要走

而仅对于本文展示的第1类从0-1的任务，哪怕Cursor完成度较高，也不可能100%达到拿来即用程度

当然你可以继续在与AI对话中调整，但当前AI对于人的自然语言指令，并不能做到100%精确执行

即使AI已经发展到精确理解并执行人类指令的阶段，又有多少人类，能做到指令上的精确表达呢？

哪怕绞尽脑汁的你，写下一段完美提示词，可我在Axure中按两下快捷键已经成图，且更精确、更可控

2. Agent有多大用？

然而，现在人们已经不再讨论AI有没有用，新命题是：AI在这个场景下用处有多大？

Manus的季逸超，在播客中提到他对现阶段Agent的一个观点，让我印象深刻，大致如下：

Agent没办法做到任务的最后一公里，因为最后一公里始终需要人类精确操作来抵达


而换个角度，如果人类原本需要走完的99公里，现在可交由AI完成，这已经是巨大的进步

Cursor是如此，所有Agent工具也是如此