项目笔记|设计师的第一个微信小程序开发记录

本文作者:宣越阳,设计师

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

项目简介

简述一下,我们(一起学习日语的三位朋友)做了个啥呢?完成了一个日语背单词小程序的开发。

我们一直在学习日语,每节课都有听写环节💯,想做一个帮助自己听写的工具。

先从网页版开始

如果你想骑摩托车,我建议先学会骑自行车🚴

我们首先开发了一个网页版,具备答题和查看单词的基础功能。从自然语言描述到代码生成的过程非常神奇,一度让我觉得未来人们可能不再需要编写代码了。

虽然这个原型非常粗糙,但功能完全可用,让我非常惊喜。

移动端开发需求

改头换面,单车变摩托🏍️

我们希望在移动端使用这个工具,权衡之后最终选择了微信小程序作为开发框架。我自学了小程序相关知识,将开发规范以文档形式导入 TRAE。

在移动端开发之前,我们进行了框架设计,为后续功能扩展做了规划。有了这个环节后,我制定了优先级,规划了开发计划,还使用 Figma 的 MCP 让 AI 更好地还原页面结构。

我们一步步开发了多个界面,不仅完成了对网页版的复刻,还增加了更多新功能,让日语班的同学们也体验了一下,顺便推广了 TRAE 这个软件。

微信搜索小程序:「MeowBread记忆面包」

首页和设置

答题

复习模式

单词库

扭蛋机1

扭蛋机2

奖品陈列馆

只会说普通话,如何理解开发程序

"自然语言,未来也会变成一门开发语言。"

开发步骤:

  1. 首先写出你的想法

  2. 将想法发给 AI,让它帮你开发

  3. 你负责测试,AI 负责修复 Bug

  4. 测试完成,上线

打个比方:我们就是餐馆老板,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 完成词库搭建工作。

开发的过程中的记录

在对话中引用文档

其他的话

一度以为这件事非常困难,实际跑下来并没有太多坎坷,内心反而有些感动。有一些心得可以与大家分享:

  1. 现在的 Vibe Coding 确实已经在一定程度上可用了, 完全可以通过自己的需求和创意来完成开发工作。AI 比想象中要可靠得多(当然也经常犯傻)。

  2. 一个好的创 意或需求(PRD)的重要性往往比后面的开发更重要。 你可以只有一些零星想法,然后与 AI 对话不断完善,最后让它输出一份文档,检查后再进入开发,往往会事半功倍。

  3. 别忘记项目管理的重要性。 AI 加速了开发过程,但不代表不需要成本。在开发过程中,因为 AI 过于强大,导致我们内心膨胀,觉得什么都能做到,设定了不合理的目标,反而走了弯路。

  4. 我觉得未来可能更多精力会花在「写清楚需求」「写代码规则」上, 人类会将更多精力投入到「创意构思」上,而重复性工作会逐步被 AI 攻克。

相关推荐
豆包MarsCode4 小时前
用 TRAE 开发审批系统:一套可复制的 AI 辅助开发工作流
trae
豆包MarsCode7 小时前
5 分钟开发 Figma 文本替换插件,效率提升 56%
trae
用户4099322502121 天前
快速入门Vue3的v-指令:数据和DOM的“翻译官”到底有多少本事?
前端·ai编程·trae
用户4099322502121 天前
快速入门Vue3,插值、动态绑定和避坑技巧你都搞懂了吗?
前端·ai编程·trae
Goboy3 天前
用Trae IDE+GLM4.6 API 搭了个小红书文案生成器,新手也能秒出爆款!附保姆级教程
llm·ai编程·trae
豆包MarsCode3 天前
TRAE MCP 实践:如何让 LLM 准确生成业务表单代码
trae
豆包MarsCode4 天前
快速上手|从版本选择到项目实战
trae
油炸自行车7 天前
【Qt】VS Code配置Qt UI插件,vscode打开Qt Designer ,vscode打开Qt*.ui文件
qt·ui·cursor·qt designer·vscode插件·trae·qt ui
Lethehong7 天前
上下文工程实践:利用GLM-4.6和TRAE SOLO打造新粗野主义风格音乐创作网站
react·trae·glm我的编程搭子·glm-4.6
豆包MarsCode8 天前
TRAE × Spec Kit 实战:五步构建流式 AI 对话 Web 应用
trae