从零到一：编程小白用 TRAE 打造微信小程序全记录

本文作者：Less@蓝镜空间，TRAE 开发者用户

作为一名编程小白，我将完整记录通过 TRAE 等 AI 工具开发微信小程序的全过程，涵盖需求发现、功能构思、UI 设计、代码实现四个阶段。这是一次真实的实践分享，希望我踩过的坑和总结的经验能为你提供参考。

需求发现：洞察真实痛点

今年初，我注意到在线监督学习这个细分需求——网上经常看到有学习需求的用户寻求监督和陪伴，但市面上缺乏专门的产品解决方案。这个需求真实存在且具有一定普遍性。

经过与朋友多轮头脑风暴和深度讨论，我们逐步明确了产品定位和核心价值。

功能构思：从想法到产品形态

品牌设计阶段

在产品构思期间，我尝试设计产品图标和 slogan，借助即梦等 AI 生图工具进行实现。虽然最终效果未完全达到预期，但整体结果令人满意。

重要体会：AI 工具有其独特的"语言体系"，需要建立有效的沟通方式才能获得理想结果。

产品形态确定

经过持续打磨核心功能和产品形态构思，最终确定以小程序作为产品载体，主要考虑：

• 用户覆盖面广

• 跨平台兼容性好

在此过程中，我使用 AI 工具生成 UI 界面和可交互 demo 来完善产品想法。AI 工具经常能带来意想不到的灵感启发。

UI 构思：从生成到手工优化

尽管现有的 AI 工具生成的 UI 界面质量不错，但在细节处理上仍无法完全满足预期。因此我选择使用 UI 工具手动制作了一份设计稿，这也为后续使用 TRAE 进行前端开发奠定了基础。

这一系列尝试的核心目标是让心中的想法变得更加清晰、具体、聚焦。

代码实现：选择合适的 AI 编程工具

工具选择

面临缺乏前后端工程师的困境，我开始调研 AI IDE 工具。大家的固有观念会认为国外的产品可能更好用，但从我的认知看国内的产品确实更符合国人使用习惯，所以我优先体验了几款国内 AI IDE 工具。

最终选择 TRAE 的原因：

• 实现效果出色

• 产品体验完整

• 功能特性符合需求

开发实践

初期探索

使用 TRAE（免费试用阶段）制作完整的 HTML 可交互界面，目的是验证静态 UI 转为可交互界面时是否存在设计缺陷。

TRAE 的优势特性：

• 支持截图作为上下文输入

• 生成 HTML 页面后自动创建本地预览服务

• 内置浏览器预览功能，支持直接选择元素进行调整

深度使用

免费额度用完后果断充值继续开发。在使用过程中发现的问题：

• 即使提供截图，页面还原度有时不够理想

• 需要反复调整和修改

• 不同页面间风格存在差异

• 整体效率有待提升

优化策略

受到 TRAE SOLO 模式"通过文档协作"理念的启发，我在项目构建前做了两项重要准备：

1. 建立 MCP 连接 UI 设计工具

• 用于页面级和组件级 UI 实现

• 当完整页面实现效果不理想时，尝试单个组件实现

页面级实现

组件级实现

2. 制作规范文档

• design.md：设计规范文档，确保 AI 按照统一风格实现页面

• tech.md：技术架构文档，明确技术实现方案

design.md

tech.md

项目构建流程

采用"先前端页面，后后端实现"的开发思路：

前端开发阶段

为保证与 AI 沟通顺畅，在开发过程中：

• 让 AI 生成 icon.md，明确图标需求和使用位置

• 及时提供素材资源

后端开发准备

前端页面完成后，让 AI 基于前端页面生成完整的 prd.md，确保 AI 理解后端功能需求，避免功能遗漏或冗余。

开发总结

TRAE 在解决 bug 时会自动生成总结文档，便于回顾和知识沉淀。

icon.md

prd.md

核心体会与思考

目前项目仍在构建中，需要持续与 AI 工程师协作。通过这次实践，我有两点深刻感受：

1. AI 协作的艺术

AI 能力很强，但有时无法充分发挥。人类需要与 AI 建立新的协作方式，了解其特性才能更好地创造价值。这就像与真实工程师协作一样，不同的配合方式会带来不同的效率和价值。

2. 上下文的重要性

AI 编程非常依赖上下文能力，这比大模型的基础能力更为关键。

最后希望 TRAE 能越来越完善，在 AI 编程赛道上越来越成功，让我这种纯编程小白更加能激发创造，落地灵感，以前总有人说点子不值钱，但在 AI 时代，以后任何一个创意都越来越引起重视。