【生活娱乐】
【生活娱乐赛道】 +恋人城市指南——为情侣生成专属约会计划
0. 先和大家打个招呼吧 
-
**你是谁：**我是一名准大二学生，零编程基础小白
-
你是怎么用 TRAE 把 Demo 做出来的： 全程用自然语言与 TRAE 对话，从需求描述到代码生成、Bug 修复、部署上线，没有手写一行代码。过程中遇到过 TRAE 理解不到位、功能倒退的情况，通过截图标注 + 小步迭代逐步解决。这份经历让我深刻感受到 AI 编程的效率与潜力。
1. Demo 简介
-
是什么：款为情侣量身定制的城市约会计划生成器，纯前端单页应用，打开即用，无需注册。覆盖 40 个城市，包含 1600+ 条约会地点与活动，支持按天数和预算生成定制化约会计划
面向谁：情侣、夫妻用户；适合周末约会、节假日出行、纪念日策划等场景
-
主要功能：① 城市约会指南（40 城覆盖）
覆盖北京、上海、成都、杭州、西安、长沙、重庆、丽江、三亚、拉萨等 40 个城市。每个城市包含 16-19 个打卡点 + 10 个约会地点 + 14 个约会活动，每条内容都有场景化描述和实操贴士 -
② 智能约会计划生成器
选择天数（1/2/3/5/7 天）和预算（不限/500/1000/2000/3000 以内/自定义），一键生成完整约会计划。每天包含"打卡点 → 约会地点 → 约会活动"三段式安排，并显示地点间距离与步行时间③ 双人喜好匹配
设置双方偏好（浪漫/文艺/活力/治愈），开启"喜好优先"后，打卡点和活动按匹配度排序，卡片上显示匹配标签。
2. Demo 创作思路
-
灵感来源：每次和男朋友出去玩时的烦恼——不知道去哪、规划杂乱、攻略分散在多个 App 里
-
想解决的问题：情侣约会规划不知道怎么安排，旅游规划太杂乱。市面上的软件要么只提供地点信息（大众点评），要么只提供团购（美团），缺少把"地点 + 路线 + 时间 + 预算 + 活动"整合在一起的工具
-
为什么做这个方向：
-
痛点真实且高频：情侣约会是高频场景，"不知道去哪"是普遍困扰
-
市场空白：目前没有专门面向情侣的约会计划生成工具，多数产品只做单点功能
-
内容差异化：每个地点的文案不是干巴巴的信息罗列，而是带有场景感的描述（如"黄昏时分，红墙金瓦倒映在筒子河水面上"），让规划过程本身也有仪式感
-
TRAE 验证可行：询问 TRAE 后确认纯前端方案可以实现，且能覆盖多城市数据
3. Demo 体验地址（三选一）
- 部署随时可公开访问的体验链接；https://couple-date-v5.surge.sh/
4. TRAE 实践过程
用 TRAE 完成 Demo 开发的全流程
核心循环
用 TRAE 做 Demo 的本质就是一个循环：用自然语言描述需求 → 浏览器看效果 → 提反馈修改 → 再看效果。TRAE 负责写代码、查 bug、部署上线，你只需要负责想清楚要什么。
以下是这个循环在真实项目中的完整展开。
第一阶段：从需求到应用
第一步：描述需求，生成核心应用
不需要写代码，用中文描述产品想法。我当时的原话是：「做一个情侣城市约会指南，覆盖多个城市，按氛围分类推荐打卡点，支持双人喜好匹配排序，能生成多日不重样的约会计划。」
TRAE 生成了一份完整的单文件 HTML 应用，包含城市数据、打卡点、氛围分类、约会计划生成等核心功能。用了 Leaflet 地图、高德瓦片、localStorage 本地存储。约 450KB，直接浏览器打开就能跑。
第二步：迭代优化，逐步完善
这是最核心的环节。不要一次提所有需求，先生成核心功能，再逐步加功能、修 bug，每步都在浏览器验证。
迭代的过程就是不断对话：
- 「加一个’喜好优先’功能，按双方偏好排序卡片」
- 「卡片上显示匹配标签」
- 「修一下城市切换时数据没刷新的 bug」
- 「随机约会生成的活动不要重复」
每次修改后直接在浏览器预览。发现问题可以截图加标注反馈给 TRAE，它会读取代码、定位问题、修改后保存。
第二阶段：迭代深水区
简单的功能增补做完后，真正的挑战才开始。
城市搜索与卡顿
我让 TRAE 给搜索框加了城市搜索功能。输入「天津」或拼音「tianjin」，回车切换城市。功能上线后，卡顿出现了——切换城市卡，搜索框打字也卡，延迟半秒。
第一反应是优化搜索逻辑：搜索时只渲染当前面板，反馈改用变量计数，移除滚动。缓解了，没根治。
回退
卡顿没解决，我做了整个过程中最关键的决策：回退。把城市搜索、放大镜、延迟渲染全部移除，恢复原样。在一个有问题的基础上叠加修复只会越改越乱。TRAE 几条指令就完成了回退，不需要 git。
回退后卡顿依然存在，证明问题不在搜索。
找到真正的性能杀手
让 TRAE 深入分析运行时行为，找到三个真凶：
光标拖尾特效。每秒 60 帧循环，每帧读写 12 个 DOM 元素样式，每秒 720 次布局重计算，页面什么都不做也在空转。
MutationObserver 监听太大。监听整个 body 加 subtree，每次渲染创建几十个子节点就触发几十次回调。
逐卡片绑定事件。每渲染 10 张卡片创建 10 到 30 个监听器，搜索时反复创建销毁。
三个全改了。拖尾移除，Observer 只监听四个容器，事件改成委托。卡顿彻底消失。然后把回退掉的功能重新加回来，性能优化保留，新功能不拖垮体验。
视觉统一
应用大量使用 emoji 作为 UI 图标，跨平台显示不一致。让 TRAE 启动 Explore 子代理扫描了整个 8000 行文件，一次性返回 40 多处 emoji 的完整清单。建立了统一 SVG 图标系统，用 TodoWrite 拆成七个区域逐个替换。option 里的 emoji 保留，数据里的保留，文案里的保留。
第三阶段：制作可分享版本
转换为自包含文件
原始版本依赖外部字体文件，分享时容易丢失。我对 TRAE 说：「转换为可保存的文件。」
TRAE 编写了 Python 脚本，把 6 个字体文件转为 base64 数据 URI，替换 CSS 中的字体引用，生成无外部依赖的 HTML。
制作交互式体验页
体验页是产品的门面。我对 TRAE 说：「转换为交互式可体验的 HTML 格式文件。」
TRAE 生成了体验页：Hero 区加统计数字加功能卡片加模拟生成器加喜好匹配演示，底部 CTA 按钮链接到真实应用。
第四阶段：部署到公开链接
把本地文件部署到 Surge.sh，生成随时可访问的公开 URL。
TRAE 通过 Surge API 创建账号、获取 token，用 curl 上传 tar.gz 包到 Surge 边缘节点，自动验证 HTTP 200 和文件大小一致性。
后来在 v5 部署时遇到了更复杂的情况。surge CLI 需要交互式终端，沙箱环境没有 TTY。管道传入凭据不生效，Python pty 模拟有时序问题，surge 三次拒绝密码。最终绕过 CLI，阅读 surge npm 包源码找到 HTTP API 认证路径：POST /token 获取 token，GET /account 验证。axios 不走代理导致 502，引入 https-proxy-agent 解决。部署成功到 couple-date-v5.surge.sh。
第五阶段：检查与打包
自动 Bug 检查与修复
让 TRAE 自己检查代码是否有问题。它会读取完整文件、逐项排查并修复。
在 v5 阶段做了更彻底的全量测试。让 TRAE 通过浏览器自动化逐一测试 16 项功能：页面加载、引导页、深色模式、氛围筛选、四 Tab 切换、收藏面板交互、随机约会生成器、纪念日、喜好设置、约会历史、更多城市、喜好优先、数据导出、AI 助手。每项通过 browser_evaluate 验证内部状态。
这次测试发现了收藏面板缺失事件委托、data-fav-idx 属性不匹配、跨城市收藏删除 bug、const 暂时性死区导致白屏等多个隐藏问题，全部修复。
关键技巧
用自然语言描述。 不需要写代码，用中文说清楚想要什么即可。描述越具体，生成质量越高。
小步迭代。 不要一次提所有需求。先生成核心功能，再逐步加功能、修 bug，每步都在浏览器验证。
回退不丢人。 当新功能引入了问题且第一轮修复无效时，继续叠加修复只会更乱。回到上一个已知正确的状态，从干净的地基重新分析。
让 AI 自查。 完成后让 TRAE 自己检查 bug，更彻底的做法是让它通过浏览器自动化做端到端全量测试，在 JavaScript 运行时中验证内部状态。
TodoWrite 协调多区域任务。 涉及多个区域的批量修改，用 TodoWrite 拆成待办项逐个推进，始终只保持一个任务进行中。
Explore 子代理做全量扫描。 需要在长文件中找出所有某类元素，让子代理一次性扫描返回分类清单，比手动多轮搜索更完整。
速查表
| 阶段 | 你说什么 | TRAE 做什么 | 产出 |
|---|---|---|---|
| 1. 生成应用 | 描述产品需求 | 生成完整 HTML 应用 | standalone.html |
| 2. 迭代优化 | 提功能需求 / 修 bug | 逐项修改并保存 | 完善的应用 |
| 3. 性能攻坚 | 分析卡顿原因 | 定位根因、移除瓶颈、事件委托 | 零卡顿应用 |
| 4. 视觉统一 | 扫描替换 emoji | 全量扫描、建立 SVG 系统、逐区域替换 | 统一图标应用 |
| 5. 可保存版 | 转换为可保存的文件 | 字体内嵌为 base64 | 可保存版.html |
| 6. 体验页 | 转换为交互式体验页 | 生成产品展示页 | experience.html |
| 7. 部署上线 | 部署到公开链接 | Surge API 部署 + 验证 | xxx.surge.sh |
| 8. 全量测试 | 自己完整用一遍检查 bug | 浏览器自动化测试 16 项功能 | 0 已知 bug |
| 9. 检查打包 | 检查 bug + 打包 zip | 自查修复 + 压缩 | 体验页.zip |
最终产出
**关于技术形态的说明**
本作品选择单文件 HTML 而非前后端分离架构，是初赛阶段的刻意选择：让评委打开链接即用，无需下载、无需注册、无文件损坏风险。1600+ 条结构化数据与 10+ 功能模块装进一个 8211 行的独立文件，零外部依赖，打开即跑——这是对 TRAE 代码组织与生成能力的极限测试。单文件不等于单薄：城市数据、约会生成算法、喜好匹配排序、地图渲染、本地存储、性能优化、SVG 图标系统，全在一个文件里跑通，且 0 已知 bug。
-
代码：8211 行独立 HTML，零外部依赖，打开即用
-
覆盖：40座城市，1600＋打卡点、约会地点、活动三类数据
-
功能：城市搜索、氛围筛选、喜好匹配、随机约会生成、AI 文案、收藏管理、纪念日、深色模式、数据导入导出
-
性能：DOM 操作减少 75%，Observer 回调降低 90%，零感知延迟
-
视觉：40 余处 emoji 替换为统一 SVG 矢量图标
-
已知 bug：0
1.需求描述，并让trae进行功能实现，让功能完善
3682690187673824:c4827e9bfc40a0a435914ce1309e3c3e_6a33b13f47820766e5e9c0e4.6a33b1b8c176c1c6a62065ca.6a33b1b858447f73b098c716:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/18 17:13:46)
2.完善城市打卡点数据解决方案不足的缺点3682690187673824:7969aa5a7f76b7f438d6509b3e7968b7_6a33b13f47820766e5e9c0e4.6a33f7ee8e43ba5f925a05db.6a33f7ee34816632fe4e6508:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/18 21:54:37)
3.trae自己检查有没有bug然后转换为zip压缩包，
3682690187673824:de06bc071a960a0142b4793b2725cbcd_6a33b13f47820766e5e9c0e4.6a34d3db24979c97e1ad682c.6a34d3db61b0abb8f8224fdc:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/19 13:34:33)
4.后续考虑到链接更便携，所以将作品转换为公开链接
3682690187673824:bae7d0be2b80d692defa9ed1b1b5e476_6a33b13f47820766e5e9c0e4.6a34f0246aa6bb70eecc01d5.6a34f02376d1a4dc40760ac4:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/19 15:30:51)
5.该版本更新了ai生成文案功能，发朋友圈不再发愁
3682690187673824:57125040e2b60bd4421e841745630bcc_6a33b13f47820766e5e9c0e4.6a3a279665aa56098f3cc81a.6a3a2793b7027f456b1957f8:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/23 14:37:50)
6.发现按钮无反应让他自己修改
3682690187673824:bc784c1674807493885026cae543c2fc_6a33b13f47820766e5e9c0e4.6a3a2af665aa56098f3cc973.6a3a2af6e889a2edb0ce08af:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/23 16:08:42)
7.将具体需求描述，让他修改其中的问题并部署了新链接
3682690187673824:6bac8916d088d986f2d1221db4b083de_6a33b13f47820766e5e9c0e4.6a3d2c30bb585b8142489335.6a3d2c3083c8d3a6a5e3d3cc:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/25 22:40:59)
3682690187673824:7be66b6f6b175a4cda85a70de66dbb3b_6a33b13f47820766e5e9c0e4.6a3d5d6e2fc895e053fe8a55.6a3d5d6b39bfde7fa46fda3c:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/26 00:55:45)
最好附上通过的报名帖