母亲节特献：使用Trae为年轻人打造模拟衰老网站，感悟长辈时光

母亲节特献：使用Trae为年轻人打造模拟衰老网站，感悟长辈时光 母亲节特献：使用Trae为年轻人打造模拟衰老网站，感悟长辈时光 Modified September 11, 2025 但好在最终大功告成。在此，我分享一些使用Trae的经验。 开发过程：稳扎稳打，步步为营 • 拆分组件，理清脉络 ： 优先完成主页面的布局工作，随后将主页面中的组件拆分到指定的目录中。这样做可以使代码结构更加清晰，便于后续的维护和管理。 • 小步迭代，减少失误 ： 开发过程中，基于拆分后的组件或页面进行修改，尽量避免一次性修改过多代码。这样可以降低出错的概率，同时也能更方便地定位和解决问题。 • 设计先行，AI助攻 ： 在整个开发流程中，建议先完成页面设计，明确页面的功能和布局后，再要求AI按照接口文档逐步进行开发。一把梭哈完成前后端+接口目前是做不到的，保持清晰的思路，将AI作为辅助工具。 • 及时瘦身，优化代码 ： 及时重构代码，消除冗余代码，优化代码结构。避免这些冗余代码给大模型提供错误的上下文。 • 高频提交，有迹可循 ： 在开发过程中多提交代码，以便于版本管理和问题追溯。 尤其是当出现一版比较符合心意的页面的时候，要及时提交github。 • 豆包助力，设计开挂 ： 页面设计提示词可以通过豆包生成，还可将页面截图发送给豆包（在PC端可以直接进行截图并粘贴），让豆包协助完成页面的设计。 • 扣子空间，美化救星 ： 可以使用扣子空间生成几个页面看看，扣子空间是生成单页文件，样式也比较好看，下载网页文件放到代码目录中，让AI参照代码进行复刻。 • lovable定调，规范开发 ： 先使用lovable生成，生成的代码会有完整的项目结构，用AI解释项目结构，然后作为开发规范。 • 分工协作，效率拉满 ： 项目可以和lovable共用一个git，trae开发完功能后，交给lovable美化。 • 后端开发，云端调试 ： 基于接口文档开发，用云端mock调试，完工后切换真实接口，双窗口并行开发前后端。 • 见势不妙，及时止损 ： 报错过多就重置会话，输出超长就新开窗口，保持开发节奏。 • 排队漫长，转身充电 ： trae使用Claude3.7排队超30位时，可做点别的，比如让AI讲解当前项目开发语言，大概15 30分钟看一次，因为后续排队体验较差。 • 精简规则，效能更佳 ： 项目规则设置精简，只设基本必要规则（如目录、接口等），规则过多效果未必好。 模型选择 • 长任务攻坚 ：涉及长上下文及多文件开发或重构，推荐（近乎必须）使用Claude3.7。它处理这类任务效果最佳，但使用几次后可能排队，且排队时长随使用次数递增。 • 小功能优化 ：小功能修改，优先考虑gpt4.1或Claude3.5，根据实际情况选择，也可多尝试其他模型。 • 片段修改 ：处理单个代码片段或标签修改，可按个人习惯随意切换不排队的模型尝试。 • deepseek ：选择少量代码片段修改，避免横跨多个文件，防止大量报错、代码省略问题。 最后 当 AI 长时间解决不了问题时，与其盲目等待或全盘否定，不如暂时按下暂停键。借助 AI 的解读能力，抽丝剥茧分析代码逻辑，反而能发现问题所在。 人工智能应是并肩作战的伙伴，而非替代思考的拐杖。唯有让人类智慧与 AI 能力相互赋能，方能在开发之路上行稳致远。 智能体提示词 没有前端实际开发经验，仅供参考 Code block Plain Text Copy 你是 TypeScript、React Native、Expo 和移动 UI 开发方面的专家。以下是开发时需遵循的规范和要点： 技术栈 TypeScript（严格模式）、React Native、Expo 优先函数式组件，避免类和枚举 接口 类型，映射 枚举 代码规范 目录：小写 破折号 组件：命名导出 变量：描述性动词前缀（isLoading/hasError） UI/样式 Expo内置组件 + Flexbox响应式设计 styled components/Tailwind CSS react native reanimated动画 SafeAreaView处理刘海屏 性能优化 React.memo + useMemo/useCallback react query数据缓存 图片懒加载（expo image） 动态导入 + Suspense 状态管理 React Context + useReducer 复杂场景：Zustand/Redux Toolkit Expo特定 托管工作流 OTA更新（expo updates） 权限管理（expo permissions） 参考文档 Expo Documentation Expo Security 重构提示词 重构前一定要提交代码 Code block Plain Text Copy 整体要求 基于“项目目录结构及用途说明”对现有代码进行重构，以提高代码的易读性和可维护性。重构过程中需避免使用复杂语法和写法，采用简洁明了的方式实现相同功能。 具体重构要点 组件（ 目录） 确保每个组件职责单一，避免一个组件承担过多功能。将复杂的功能拆分成多个小的、可复用的子组件。 API 服务层（ 目录） 清晰地封装 API 请求，将不同业务的 API 请求分别封装在不同的函数中。 函数命名要具有描述性，便于维护和调用。同时，添加必要的注释说明请求的用途和参数含义。 自定义 Hook（ 目录） 逻辑要简单易懂，避免在 Hook 中实现过于复杂的业务逻辑。 提高 Hook 的复用性，确保一个 Hook 可以在多个组件中方便地使用。 React 上下文（ 目录） 管理要清晰，明确每个上下文的作用和包含的数据。 数据传递和使用方式要直观，避免复杂的嵌套和数据处理逻辑。 TypeScript 类型定义（ 目录） 类型定义要准确，能够反映实际数据结构。 避免过度复杂的类型声明，使用简单、易懂的类型定义方式。 代码结构与逻辑优化 优化代码结构，使代码层次更加清晰，各部分功能模块划分明确。 优化变量的定义和使用，变量命名要有意义，避免使用无意义的变量名。 剔除冗余、无实际作用的代码部分，如未使用的变量、函数和注释掉的代码。 简化状态管理，将相关状态合并，移除冗余状态； 最终目标 通过上述重构，使代码结构更加清晰，提高代码的可读性和可维护性，方便后续的开发和迭代。 规则 规则比较精简，主要是控制大模型别乱写。 img Trae AI 母亲节 End 点 击 关 注 我 们 ， 实 时 获 取 推 送 你 若 喜 欢 ， 别 忘 了 点 个 在 看 噢 但好在最终大功告成。在此，我分享一些使用Trae的经验。 开发过程：稳扎稳打，步步为营 • 拆分组件，理清脉络 ： 优先完成主页面的布局工作，随后将主页面中的组件拆分到指定的目录中。这样做可以使代码结构更加清晰，便于后续的维护和管理。 • 小步迭代，减少失误 ： 开发过程中，基于拆分后的组件或页面进行修改，尽量避免一次性修改过多代码。这样可以降低出错的概率，同时也能更方便地定位和解决问题。 • 设计先行，AI助攻 ： 在整个开发流程中，建议先完成页面设计，明确页面的功能和布局后，再要求AI按照接口文档逐步进行开发。一把梭哈完成前后端+接口目前是做不到的，保持清晰的思路，将AI作为辅助工具。 • 及时瘦身，优化代码 ： 及时重构代码，消除冗余代码，优化代码结构。避免这些冗余代码给大模型提供错误的上下文。 • 高频提交，有迹可循 ： 在开发过程中多提交代码，以便于版本管理和问题追溯。 尤其是当出现一版比较符合心意的页面的时候，要及时提交github。 • 豆包助力，设计开挂 ： 页面设计提示词可以通过豆包生成，还可将页面截图发送给豆包（在PC端可以直接进行截图并粘贴），让豆包协助完成页面的设计。 • 扣子空间，美化救星 ： 可以使用扣子空间生成几个页面看看，扣子空间是生成单页文件，样式也比较好看，下载网页文件放到代码目录中，让AI参照代码进行复刻。 • lovable定调，规范开发 ： 先使用lovable生成，生成的代码会有完整的项目结构，用AI解释项目结构，然后作为开发规范。 • 分工协作，效率拉满 ： 项目可以和lovable共用一个git，trae开发完功能后，交给lovable美化。 • 后端开发，云端调试 ： 基于接口文档开发，用云端mock调试，完工后切换真实接口，双窗口并行开发前后端。 • 见势不妙，及时止损 ： 报错过多就重置会话，输出超长就新开窗口，保持开发节奏。 • 排队漫长，转身充电 ： trae使用Claude3.7排队超30位时，可做点别的，比如让AI讲解当前项目开发语言，大概15 30分钟看一次，因为后续排队体验较差。 • 精简规则，效能更佳 ： 项目规则设置精简，只设基本必要规则（如目录、接口等），规则过多效果未必好。 模型选择 • 长任务攻坚 ：涉及长上下文及多文件开发或重构，推荐（近乎必须）使用Claude3.7。它处理这类任务效果最佳，但使用几次后可能排队，且排队时长随使用次数递增。 • 小功能优化 ：小功能修改，优先考虑gpt4.1或Claude3.5，根据实际情况选择，也可多尝试其他模型。 • 片段修改 ：处理单个代码片段或标签修改，可按个人习惯随意切换不排队的模型尝试。 • deepseek ：选择少量代码片段修改，避免横跨多个文件，防止大量报错、代码省略问题。 最后 当 AI 长时间解决不了问题时，与其盲目等待或全盘否定，不如暂时按下暂停键。借助 AI 的解读能力，抽丝剥茧分析代码逻辑，反而能发现问题所在。 人工智能应是并肩作战的伙伴，而非替代思考的拐杖。唯有让人类智慧与 AI 能力相互赋能，方能在开发之路上行稳致远。 智能体提示词 没有前端实际开发经验，仅供参考 重构提示词 重构前一定要提交代码 规则 规则比较精简，主要是控制大模型别乱写。 img Trae AI 母亲节 End 点 击 关 注 我 们 ， 实 时 获 取 推 送 你 若 喜 欢 ， 别 忘 了 点 个 在 看 噢 🔗 原文链接： https://mp.weixin.qq.com/s/vOGMxAny... https://mp.weixin.qq.com/s/vOGMxAny... 原创 ggguo 牛渚 AI2025年05月11日 08:31 北京 在母亲节这个充满温情的日子里，我精心筹备了一份特殊的礼物🎊——一个模拟衰老过程中视力、听觉等变化的网站，旨在让年轻群体通过沉浸式体验，直观感受老年人的世界。 体验地址（建议PC端体验，后续适配移动端）： https://age.ggguo.cn/ img 网站设有 视力模拟 、 听觉模拟 、 认知模拟 以及 场景模拟 4个共情模块。从白内障引发的视物模糊，到高频听力损失造成的声音失真，再到模拟手抖时操作手机的艰难，每个细节都力求逼真还原衰老体验，让体验者仿佛“穿越”到老年状态。 以下是开发过程中主要用到的工具🧰： 工具使用：各司其职的开发天团 • lovable（UI） （ https://lovable.dev ）：一键完成网页UI设计与开发，生成完整项目结构代码，为网站颜值打下基础。 每月有免费次数。 • Trae（研发） （国际版 https://www.trae.ai ）：作为AI 编程核心主力，从代码生成到功能实现，全程高效输出，是网站功能实现的关键。 • 豆包 （产品）（ https://www.doubao.com ）：在页面设计、生成提示词方面表现出色，有问必答，为项目推进提供助力。 值得一提的是， 网站并没有借助AI一把梭哈出来，整个研发过程耗时1.5天。大部分使用 Trae ，少量使用 lovable。 过程并非一帆风顺，各种问题如影随形： • 项目报错无法解决，一直修，一直错。 • 一个简单的问题，输出了将近上千行代码 • 长时间排队，且排队时长逐渐递增。 • 输出过长，请输入“继续”后获得更多结果。 • 模型处理出错，请重试或切换模型。 • 陷入长时间思考中没有反应。 • …… 这是我的部分提交记录： img