1. 前言
在开发一款面向小学生的童话故事小程序过程中，我深刻体会到了AI辅助开发的高效与便捷。本文将分享如何利用Trae等工具快速解决问题，并顺利完成项目。
后端程序员天生写页面不太行，像我这个半吊子的前端，修一修bug还可以。一直想写一个微信小程序，结果自己开发出来的UI都特别丑，跟主流样式差别还是好大。
Cursor一直大家都说好，但是也没怎么使用，主要是不想付费，哈哈。正好Trae免费，慢慢摸索着开发了一个相对完整的童话故事小程序，各个功能都是有的。在开发者过程不断震惊与AI写代码的强大，感觉一些非强一致的项目上都可以使用Trae来进行开发，极大的缩短项目开发的时间。隐隐感觉作为程序员一部分的工作都可以利用AI来完成，让AI成为我们的开发效率利器。
2. 界面展示
3. 功能使用
3.1. html提示词
设置### 你是谁
你是一位资深全栈工程师和设计工程师，拥有丰富的全栈开发经验和卓越的审美能力，擅长现代化设计风格，尤其精通移动端设计与开发。
### 你要做什么
1. 需求分析与构思
- 用户将提供一个【App需求】。
- 以产品经理的视角，分析需求并构思网站的功能需求和信息架构。
- 自行定义网站的主题、目标用户和核心功能，确保设计与需求的契合度。
2. UI/UX 设计与开发
- 根据构思的功能需求，使用 HTML 和 Tailwind CSS 设计高质量的 UI/UX 参考图。
- 按功能模块划分（每个功能可能包含多个页面），为每个功能输出一个独立的 HTML 文件。
- 每个 HTML 文件中包含该功能的所有页面，页面以横向排列的 mockup 边框形式展示，彼此独立且互不干扰。
- 每完成一个功能的 UI/UX 参考图后，提示用户“是否继续”。若用户回复“继续”，则根据步骤设计并输出下一个功能的 UI/UX 参考图。
### 具体要求
1. 设计标准
- 设计需高级且有质感，运用玻璃拟态等视觉效果提升层次感。
遵守现代化设计规范，注重 UI 细节，确保界面美观、直观且用户友好。
- 特别关注移动端响应式设计，确保在不同设备上均有良好展示效果。
2. 技术实现
- 使用 Tailwind CSS CDN（例如 `https://cdn.tailwindcss.com`）完成样式设计，避免手动编写内联或外部 CSS。
- 图片素材从 Unsplash 获取，确保高质量且与设计风格匹配，界面中不得出现滚动条。
- 图标使用 Lucide Static CDN 引入（格式如 `https://unpkg.com/lucide-static@latest/icons/XXX.svg`），保持一致性和易用性。
- 每个功能的页面在单个 HTML 文件中实现，使用简单的 mockup 边框（例如虚线或阴影）分隔，横向排列，互不影响。
3. 代码规范
- 代码需简洁高效，易于维护，避免复杂的嵌套和冗余选择器。
- 仅在最终输出结果中提供完整的 HTML 代码，思考过程不包含
修改上面的提示词，并添加我们需要达到的要求。这个时候就需要配合deepseek生成对应的提示词。利用deepseek R1给我们一些灵感。提示可以做一些AI相关，语音相关，做一些互动类型的。通过提示词很快就可以生成Html页面。
3.2. 创建模板
建议使用微信先创建一个基础模板，不要直接使用AI来创建整体架构，否则会出现很多未知的问题。
建好模板后，可以将上一步骤生成的html加入到微信小程序中，选中这几个文件，进行AI代码翻译。
非常快速的就完成了相应的代码。剩下的工作我们就是微调这一些页面。
4. 调试
4.1. 报错信息
遇到报错时，我直接将错误信息复制到Trae中，它会自动分析问题并提供修改建议。这种“即贴即改”的方式大幅减少了调试时间，避免了手动排查的繁琐。
4.2. 图标
- 方案一：在iconfont网站搜索并下载符合需求的图标。
- 方案二：直接让Trae生成SVG图标，快速满足设计需求。
两种方式灵活切换，确保了界面元素的丰富性和一致性。
4.3. 后端对接
当界面效果与预期不符时，我直接将截图发送给Trae，它会基于图片内容分析并调整代码，尽可能还原设计稿。这一功能极大提升了UI调整的效率。
4.4. 样式与布局：截图即可修复
直接截图给到trae，trae会分析图片内容，尽量还原图片的内容到项目中。
4.5. 模型选择: 灵活应对需求
- Claude 3.5/3.7：适合复杂逻辑和样式调整，但3.7版本偶尔需要排队。
- DeepSeek：响应速度快，适合非样式类修改，无需等待。
根据任务类型灵活切换模型，确保了开发效率。
4.6. 开发成果：3天完成，惊喜不断
在Trae的协助下，项目仅用3天就顺利完成。AI不仅高效解决问题，还时常带来意想不到的创意设计。例如，童话播放界面的动态效果和交互逻辑完全由Trae实现，效果远超预期。
5. 结果
在开发过程中，我遇到了诸多技术难题，但通过Trae的协助，这些问题都得到了妥善解决。整个开发周期仅耗时三天，最终完成的小程序不仅功能完善，在UI设计方面也达到了令人满意的效果。
值得一提的是，Trae在开发过程中展现出了出色的创造力，它能够自主添加一些我未曾考虑到的交互细节和视觉元素，这些设计都与系统风格完美契合。特别是童话播放界面的实现，完全由Trae独立完成，其最终呈现效果相当出色。
最后可惜微信个人开发者不能上架文字类的小程序，暂未上架成功。
