
本文作者:宣越阳,设计师
现在 AI Coding 的发展,一定程度上,解放了生产力潜能,让很多原来拥有想法却困于不会写代码的人开始制作自己的项,我和我的小伙伴就是其中的一小簇。最近几个月了解 Vibe Coding 以来,一直使用 TRAE,开始搞代码项目,收获颇丰。接下来我会分享一下我的项目,也是我参与的第一款代码项目。我会尽量浅显的和大家分享,从一个小白视角是如何写代码的。

项目简介
简述一下,我们(一起学习日语的三位朋友)做了个啥呢?完成了一个日语背单词小程序的开发。
我们一直在学习日语,每节课都有听写环节💯,想做一个帮助自己听写的工具。


先从网页版开始
如果你想骑摩托车,我建议先学会骑自行车🚴
我们首先开发了一个网页版,具备答题和查看单词的基础功能。从自然语言描述到代码生成的过程非常神奇,一度让我觉得未来人们可能不再需要编写代码了。
虽然这个原型非常粗糙,但功能完全可用,让我非常惊喜。


移动端开发需求
改头换面,单车变摩托🏍️
我们希望在移动端使用这个工具,权衡之后最终选择了微信小程序作为开发框架。我自学了小程序相关知识,将开发规范以文档形式导入 TRAE。
在移动端开发之前,我们进行了框架设计,为后续功能扩展做了规划。有了这个环节后,我制定了优先级,规划了开发计划,还使用 Figma 的 MCP 让 AI 更好地还原页面结构。
我们一步步开发了多个界面,不仅完成了对网页版的复刻,还增加了更多新功能,让日语班的同学们也体验了一下,顺便推广了 TRAE 这个软件。
微信搜索小程序:「MeowBread记忆面包」

首页和设置

答题

复习模式

单词库

扭蛋机1

扭蛋机2

奖品陈列馆

只会说普通话,如何理解开发程序
"自然语言,未来也会变成一门开发语言。"
开发步骤:
-
首先写出你的想法
-
将想法发给 AI,让它帮你开发
-
你负责测试,AI 负责修复 Bug
-
测试完成,上线
打个比方:我们就是餐馆老板,AI 就是厨师。你负责点菜,它负责炒菜。AI 制作什么菜、什么口味,都通过你的描述来决定。等它上菜后,你根据口味反馈调整咸淡,不断修改菜品配方,直到完成理想的料理。

最开始手写的「点子」
AI 可以帮忙写更完整的文档
AI 老师炒菜中
什么不懂,就问什么
调试 bug 的过程
秘法 1:让 TRAE 更加好用,更了解你
智能体、上下文、规则
1. 创建智能体
通过创建专门的智能体,让 AI 更好地理解你的项目需求。

小程序开发主力干将
为了不同的项目准备的智能体
让「智能体」来生成「智能体」
2. 创建规则
建立明确的开发规则和规范,确保代码质量和一致性。
3. 引入更多有价值的资料(上下文)
导入相关文档和资料,丰富 AI 的知识背景。
秘法 2:不要再复制保存版本了!
天呐、谁能体会,从复制保存历史文件到 git 的救赎感
我知道这个部分对于熟悉开发的老师傅们可能有点班门弄斧,但对小白来说太有用了。
写过论文、做过设计的朋友们想必都知道版本管理的重要性,指不定导师或客户就突然想改回前面某个版本。接下来隆重介绍代码界的神奇工具------Git 源代码管理。不仅适用于个人开发,在多人开发情况下,版本管理和协同更为重要。


别骂了,我真是这么干的

在 TRAE 中使用 Git 和 Github;
最开始
初始化之后是这样的
用了一段时间之后
秘法 3:设计的魔法能做到的事情
利用 MCP,Figma + TRAE,轻松完成设计落地

什么是 MCP?
简单理解 MCP(上下文协议),就是一座桥,让 TRAE,能从这座桥走到别的软件那里,查看那边的内容)
当然暂时不能一步到位,大概能还原 50%,仍需要人工调整。一个规则整齐的设计稿也十分重要(尤其是图层结构和命名)。你可以在过程中让 AI 总结设计规范,以保持后续样式的稳定性。

SOLO 模式下的全新功能:内嵌的 Figma 工具,更加方便使用
秘法 4:用文档沉淀需求和规则
好记性不如烂笔头,文档可以一定程度上解决 AI 长期记忆不足的问题。
通过引用文档,既不用重复输入,也能保证规则持续生效。
典型例子是在创建单词库的过程中,为了保证词库格式符合要求,我们只需要编写一套规则,让 AI 以这份规则为纲要,自动生成所需内容。这样我们的起始输入只需要非常简单的 txt 文件(甚至可以是一张手写草图),就可以让 AI 完成词库搭建工作。
开发的过程中的记录

在对话中引用文档

其他的话
一度以为这件事非常困难,实际跑下来并没有太多坎坷,内心反而有些感动。有一些心得可以与大家分享:
-
现在的 Vibe Coding 确实已经在一定程度上可用了, 完全可以通过自己的需求和创意来完成开发工作。AI 比想象中要可靠得多(当然也经常犯傻)。
-
一个好的创 意或需求(PRD)的重要性往往比后面的开发更重要。 你可以只有一些零星想法,然后与 AI 对话不断完善,最后让它输出一份文档,检查后再进入开发,往往会事半功倍。
-
别忘记项目管理的重要性。 AI 加速了开发过程,但不代表不需要成本。在开发过程中,因为 AI 过于强大,导致我们内心膨胀,觉得什么都能做到,设定了不合理的目标,反而走了弯路。
-
我觉得未来可能更多精力会花在「写清楚需求」「写代码规则」上, 人类会将更多精力投入到「创意构思」上,而重复性工作会逐步被 AI 攻克。