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

本文作者：宣越阳，设计师

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

项目简介

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

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

先从网页版开始

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

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

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

移动端开发需求

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

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

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

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

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

首页和设置

答题

复习模式

单词库

扭蛋机1

扭蛋机2

奖品陈列馆

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

“自然语言，未来也会变成一门开发语言。”

开发步骤：

1. 首先写出你的想法

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

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

4. 测试完成，上线

打个比方：我们就是餐馆老板，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 攻克。

• 奖品激励+官方认证！TRAE 最佳实践征文大赛邀你参赛：https://mp.weixin.qq.com/s/mdsfX8XZrg-xTQkYl4mm0g?scene=25#wechat_redirect