本文作者：Less@蓝镜空间，TRAE开发者用户
作为一名编程小白，我将完整记录通过TRAE等AI工具开发微信小程序的全过程，涵盖需求发现、功能构思、UI设计、代码实现四个阶段。这是一次真实的实践分享，希望我踩过的坑和总结的经验能为你提供参考。
01 需求发现：洞察真实痛点
今年初，我注意到在线监督学习这个细分需求——网上经常看到有学习需求的用户寻求监督和陪伴，但市面上缺乏专门的产品解决方案。这个需求真实存在且具有一定普遍性。
经过与朋友多轮头脑风暴和深度讨论，我们逐步明确了产品定位和核心价值。
02 功能构思：从想法到产品形态
品牌设计阶段
在产品构思期间，我尝试设计产品图标和slogan，借助即梦等AI生图工具进行实现。虽然最终效果未完全达到预期，但整体结果令人满意。
重要体会：AI工具有其独特的"语言体系"，需要建立有效的沟通方式才能获得理想结果。
产品形态确定
经过持续打磨核心功能和产品形态构思，最终确定以小程序作为产品载体，主要考虑：
-
用户覆盖面广
-
跨平台兼容性好
在此过程中，我使用AI工具生成UI界面和可交互demo来完善产品想法。AI工具经常能带来意想不到的灵感启发。
03 UI构思：从生成到手工优化
尽管现有的AI工具生成的UI界面质量不错，但在细节处理上仍无法完全满足预期。因此我选择使用UI工具手动制作了一份设计稿，这也为后续使用TRAE进行前端开发奠定了基础。
这一系列尝试的核心目标是让心中的想法变得更加清晰、具体、聚焦。
04 代码实现：选择合适的AI编程工具
工具选择
面临缺乏前后端工程师的困境，我开始调研AI IDE工具。大家的固有观念会认为国外的产品可能更好用，但从我的认知看国内的产品确实更符合国人使用习惯，所以我优先体验了几款国内AI IDE工具。
最终选择TRAE的原因：
-
实现效果出色
-
产品体验完整
-
功能特性符合需求
开发实践
初期探索
使用TRAE（免费试用阶段）制作完整的HTML可交互界面，目的是验证静态UI转为可交互界面时是否存在设计缺陷。
TRAE的优势特性：
-
支持截图作为上下文输入
-
生成HTML页面后自动创建本地预览服务
-
内置浏览器预览功能，支持直接选择元素进行调整
深度使用
免费额度用完后果断充值继续开发。在使用过程中发现的问题：
-
即使提供截图，页面还原度有时不够理想
-
需要反复调整和修改
-
不同页面间风格存在差异
-
整体效率有待提升
优化策略
受到TRAE SOLO模式"通过文档协作"理念的启发，我在项目构建前做了两项重要准备：
- 建立MCP连接UI设计工具
-
用于页面级和组件级UI实现
-
当完整页面实现效果不理想时，尝试单个组件实现
- 制作规范文档
-
design.md：设计规范文档，确保AI按照统一风格实现页面 -
tech.md：技术架构文档，明确技术实现方案
项目构建流程
采用"先前端页面，后后端实现"的开发思路：
前端开发阶段
为保证与AI沟通顺畅，在开发过程中：
-
让AI生成
icon.md，明确图标需求和使用位置 -
及时提供素材资源
后端开发准备
前端页面完成后，让AI基于前端页面生成完整的prd.md，确保AI理解后端功能需求，避免功能遗漏或冗余。
开发总结
TRAE在解决bug时会自动生成总结文档，便于回顾和知识沉淀。
05 核心体会与思考
目前项目仍在构建中，需要持续与AI工程师协作。通过这次实践，我有两点深刻感受：
- AI协作的艺术
AI能力很强，但有时无法充分发挥。人类需要与AI建立新的协作方式，了解其特性才能更好地创造价值。这就像与真实工程师协作一样，不同的配合方式会带来不同的效率和价值。
- 上下文的重要性
AI编程非常依赖上下文能力，这比大模型的基础能力更为关键。
演示demo（待补充）
最后希望trae能越来越完善，在AI编程赛道上越来越成功，让我这种纯编程小白更加能激发创造，落地灵感，以前总有人说点子不值钱，但在AI时代，以后任何一个创意都越来越引起重视。