本文作者：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：技术架构文档，明确技术实现方案
项目构建流程
采用"先前端页面，后后端实现"的开发思路：
前端开发阶段
为保证与 AI 沟通顺畅，在开发过程中：
让 AI 生成 icon.md，明确图标需求和使用位置
及时提供素材资源
后端开发准备
前端页面完成后，让 AI 基于前端页面生成完整的 prd.md，确保 AI 理解后端功能需求，避免功能遗漏或冗余。
开发总结
TRAE 在解决 bug 时会自动生成总结文档，便于回顾和知识沉淀。
核心体会与思考
目前项目仍在构建中，需要持续与 AI 工程师协作。通过这次实践，我有两点深刻感受：
1. AI 协作的艺术
AI 能力很强，但有时无法充分发挥。人类需要与 AI 建立新的协作方式，了解其特性才能更好地创造价值。这就像与真实工程师协作一样，不同的配合方式会带来不同的效率和价值。
2. 上下文的重要性
AI 编程非常依赖上下文能力，这比大模型的基础能力更为关键。
最后希望 TRAE 能越来越完善，在 AI 编程赛道上越来越成功，让我这种纯编程小白更加能激发创造，落地灵感，以前总有人说点子不值钱，但在 AI 时代，以后任何一个创意都越来越引起重视。
<!---->
