「苹果应用」Trae AI & claude-3.7 实现AI自动记账原型—15分钟完成苹果应用原型图开发
Trae AI -- 从初级到入门 第十二课 「苹果应用」AI自动记账原型—15分钟完成苹果应用原型图开发
Trae AI -- 从初级到入门 第十一课 「苹果应用」番茄时钟—30分钟完成苹果应用原型图开发
今天我想和大家分享一个超酷的技能——如何用Trae和提示词快速完成iOS应用原型图的开发。我刚刚亲测了一个完整的流程，只用了15分钟就搞定了一个原型图，相信我，这个方法不仅高效，而且非常适合初学者和需要快速迭代设计的开发者。接下来，我将详细分享我的操作过程，希望能帮到大家。
起因：发现一个超棒的设计
事情是这样的，我在小红书上偶然看到了“atian25”博主分享的AI自动记账应用原型设计。这个设计让我眼前一亮，它不仅功能齐全，界面设计也非常简洁美观。博主还分享了她使用的提示词，这让我萌生了一个想法：让我用Trae工具来复刻一下。
准备工作：新建项目与导入文档
我立刻行动起来。首先，我打开了Trae软件，新建了一个项目文件夹，名字就叫“AI记账”。这个文件夹相当于一个容器，用来存放所有相关的文档和设计素材。
核心操作：使用Build模式生成原型
接下来，就是最关键的一步了。我切换到了Trae的Builder模式，这是专门用于生成设计原型的功能模式。在Builder模式下，我选择了claude-3.7-sonnet版本的模型，这个版本的生成效果特别好，而且速度也很快。
然后，我仔细对照博主的提示词，复制到Trae中。为了避免出错，我还在每行提示词前加上了编号（12345），这样可以方便后续查看和修改。
提示词：我想开发一个ai自动记账app，现在需要输出原型图，请通过以下方式帮我完成app所有原型图片的设计：1、思考用户需要ai记账app实现哪些功能 2、作为产品经理规划这些界面3、作为设计师思考这些原型界面的设计4、使用html在一个界面上生成所有的原型界面，可以使用FontAwesome等开源图标库，让原型显得更精美和接近真实我希望这些界面是需要能直接拿去进行开发的5、每一个模块之间用Grid方式排版，每行3个
插件助力：提升开发效率
在生成原型的过程中，我还用到了两个特别实用的插件。
第一个是Live Server插件，这个插件可以在应用商城里搜索到，它能直接呈现HTML文件，方便我实时预览生成的原型图效果。
另一个插件是Go for Page，它可以生成高清截图，方便我展示给大伙看。这两个插件大大提升了我的开发效率，也让整个过程变得更加顺畅。
成果展示：原型图完成
大概过了10分钟左右，原型图就生成了。生成的原型图界面设计得很合理，功能也很全面。有自动记账、资产情况、预算管理、消费支出分析，还有各种发票上传识别的功能。蓝色的背景搭配简洁的布局，看起来特别舒服。我用Go for Page插件截了个高清图，效果特别棒。
互动环节：布置作业
最后，我决定在评论区布置一个作业，邀请大家留言分享自己想要开发的APP原型想法。点赞量和呼声最高的，我就用claude-3.7-sonnet模型帮你实现出来。我觉得这个互动特别有意思，既能满足大家的需求，又能让我更好地了解大家的想法。说不定，下一个超酷的APP原型就出自你的想法呢！
总结与展望
这次用Trae开发原型图的经历让我收获颇丰。它不仅让我快速实现了设计想法，还让我发现了好多实用的工具。整个过程只用了15分钟，这让我深刻感受到了Trae工具的高效性和实用性。如果你也有类似的需求，或者想要快速实现自己的设计想法，不妨试试这个方法。
