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