原创 Ace人生 2025-03-15 18:18 美国
“想到即看到”。
题记
最近准备开启一系列的、在线约朋友聊AI，内容包括印象深刻的AI工具和使用场景、AI对工作和行业的赋能、AI在家庭和教育中的实践、AI带来的个人机会、是否对AI的到来感到恐慌等话题。上周和一个老朋友聊了接近2小时，谈兴很浓，结束后意犹未尽。期间聊到AI对产品设计上的赋能，之后我深入调研了一番，其中最受启发的是油管上一个叫花生的博主的分享，结合我自己现在的工具，得到了一个不错的技术方案，记录如下。
（有想要约线上聊AI的朋友，欢迎留言。）
效果
先不废话，上效果图：
类似“小红书”的App设计图
老年人社交App设计图
基于MBTI个性的AI情感陪伴App设计图
怎么样？是不是很惊艳？
反正对我这个以前只用手绘界面设计过产品的程序员来说，效果是震惊的。我一口气设计了十来个一直在心头萦绕的产品，大部分都是一遍过，就更震惊了🤯！
这是怎么做到的呢？
工具：Trae + Claude-3.7-Sonnet
其核心是Claude-3.7-Sonnet这个大模型。它是在Claude推出的最新模型，在代码生成与产品设计上有着一流的能力。
Trae是字节跳动推出的一款类似Cursor的AI编程IDE，功能强大。最诱人的地方在于它可以免费、无限制地使用Claude-3.7-Sonnet（如果你不是Claude的付费玩家，使用Claude-3.7-Sonnet是受限的）。
下载并安装Trae之后，打开界面，切换到“Builder”模式（Chat模式只能聊天；Builder可以通过聊天直接生成/修改代码）；并将模型切换到“Claude-3.7-Sonnet”：
神奇的Prompt：生成设计图的灵魂
下面是生成App设计图的灵魂 - 一个神奇的Prompt：
我想开发一个[xxx/类似xxx/给某某群体使用的xxx]的App.
## 功能部分不是必须
它实现下面的功能：
1、...
2、...
...
## 必须要求
现在需要输出出高保真的原型图,请通过以下方式帮我完成所有界面的原型设计,并确保这些原型界面可以直接用于开发:
1、用户体验分析:先分析这个App的主要功能和用户需求,确定核心交互逻辑
2、产品界面规划:作为产品经理,定义关键界面,确保信息架构合理
3、高保真UI设计:作为Ul设计师,设计贴近真实iOS/Android设计规范色的界面,使用现代化的UI元素,使其具有良好的视觉体验。
4、HTML原型实现:使用HTML+Tailwind CSS (或Bootstrap)生成所有原型界面,并使用FontAwesome(或其他开源UI组件)让界面更加精美、接近真实的App设计。拆分代码文件,保持结构清晰:
5、每个界面应作为独立的HTML文件存放,例如home.html、profile.html、settings.html
- index.html作为主入口,不直接写入所有界面的HTML代码,而是使用iframe的方式嵌入这些HTML片段,并将所有页面直接平铺展示在index页面中,而不是跳转链接。
- 真实感增强:
- 界面尺寸应模拟iPhone 15 Pro,并让界面圆角化,使其更像真实的手机界面。
- 使用真实的Ul图片,而非占位符图片(可从Unsplash、Pexels、Apple官方UI资源中选择)。
- 添加顶部状态栏(模拟iOS状态栏),并包含App导航栏(类似iOS底部TabBar)。
请按照以上要求，在文件夹design中生成完整的HTML代码, 并确保其可用于实际开发。
这个Prompt包含：
App的产品功能。它可以是一句话，比如“类似小红书的App”或者“给老人使用的婚恋app”；也可以列出自己想要的各种功能。
设计要求。这是Prompt的核心约束：
先做用户体验分析和产品界面规划，以确定整个设计的内容。
高保真的UI设计，符合iOS/Android设计规范。
输出HTML文件，要求使用Tailwind CSS、FontAwesome等组件保证界面精美。
每个界面单独一个HTML，并在入口的index.html中集成起来。
界面元素要求：模拟iPhone；使用真实的Ul图片；有顶部状态栏；有底部TabBar导航。
输出这些设计文件到design文件夹，以备后用。
这个Prompt可以直接发给Trae AI；也可以保存到一个prd.txt（产品设计文档）中，让Trae AI“根据prd.txt，实现app设计”。
然后Trae Builder就能根据这个产品设计需求，开始一个文件一个文件地产出设计稿。如下图：
最后它会给你汇总生成的所有内容：
你可以通过“全部接受”让它生成的代码写入对应的文件，然后直接在浏览器中打开index.html这个设计稿入口文件，浏览整个设计：
这些页面真实美观，文字、图标、头像、贴图不是随意的示意，而是与App的功能、内容、调性非常契合。而且有一定的互动性，有的地方可以点击、页面可以向下滑动，Tab可以切换，感觉稍加开发，就能直接发布。至少可以找目标用户，show给他们看看，直接获得产品反馈。
如果你发现有bug或者不如意的地方，直接通过对话反馈给Trae就好，一会儿功夫，代码就改好了。
小结
通过Trae + Claude-3.7-Sonnet + 设计生成Prompt，真的可以“分分钟”设计一个新产品，让你“想到即看到”。这种门槛的降低，让想法💡变成行动🏃♂️的可能性大大增加，对异想天开的人是太大的赋能和加持。
也许，很久以前在你脑子中蹦哒过的各个想法已经复活过来，再次攻击你。就现在！
如果你有想法，但这篇文章的方法对你来说还是门槛太高，有想要约线上聊AI、让我帮着实现的朋友，欢迎留言。
设计好了，接下来就是实现了，AI有会给我们带来怎样的惊喜呢？让我们行动起来，拭目以待。
