- Demo 简介
是什么
Potato U 是一款基于微信小程序的「正向约会」社交平台。它借鉴 Tinder 的滑动匹配交互，同时针对中国年轻人的社交习惯做了本土化改造——用轻松可爱的"投土豆"机制替代生硬的"喜欢/不喜欢"，让认识新朋友这件事变得更有趣、更无压力。（后续界面会更加二次元）
面向谁
核心用户是 18-35 岁的单身年轻人（二次元群体
demo小程序作品.zip (69.5 KB)
），尤其是：
厌倦传统严肃相亲平台（如珍爱网、世纪佳缘）的功利氛围
觉得现有社交 App（如陌陌、探探）太粗糙、缺乏真诚
希望以轻松方式认识新朋友，同时保持认真交往态度的都市青年
主要功能
① 发现页滑动匹配
卡片式滑动交互，左划跳过（
）、右划投土豆（
）、上划 Super Like（
）。每张卡片展示用户的照片、昵称、年龄、城市、身高、星座、MBTI、兴趣标签和约会心愿。匹配成功后弹出全屏"MATCH"动画，两颗土豆碰撞发光，伴随樱花飘落特效。
② 破冰聊天系统
匹配成功后开启 24 小时限时聊天通道，聊满 7 天解锁对方微信号。聊天页内置"安全代码"机制（双方各设一个安全词，线下见面时核对），以及 Date 邀约功能（一日/双日/三日等套餐，平台抽取 20% 服务费）。
③ 个人资料体系
用户可选择"公主"或"王子"身份，填写 MBTI、兴趣标签、WantToDo/CannotDo 清单、声音介绍、约会心愿等。资料页采用粉白渐变配色，整体视觉风格温暖柔和。
- Demo 创作思路
灵感来源
传统相亲软件给人强烈的"被审视"感——填表格、看条件、算分数，年轻人用起来心理压力很大。而 Tinder 虽然轻松，但在中国缺乏本土化运营，且口碑偏向"约炮"。我在观察身边的单身朋友时发现，大家真正想要的是一个**“轻松但认真”**的社交产品：氛围像 Tinder 一样无压力，但用户心态像相亲一样真诚。
"土豆"这个隐喻来自朋友间的玩笑——"给你投个土豆"比"我喜欢你"轻松一百倍，但双向互投土豆时，那种"原来你也喜欢我"的惊喜感一点都不少。
想解决的问题
社交破冰门槛高：传统相亲 App 的资料填写太繁琐，匹配后的开场白太生硬
信任建立周期长：线上聊很久也不敢见面，缺乏安全感和推进机制
产品氛围太功利：条件筛选（收入、房产、户口）让年轻人感到被物化
为什么做这个方向
约会社交是年轻人的真实刚需，但现有产品呈现两极分化：一端是"功利相亲"，一端是"轻浮社交"。中间存在一个巨大的**“正向约会”（Positive Dating）**市场空白——用户认真对待感情，但不喜欢被审问式地筛选条件。Potato U 试图占据这个中间地带。
- 用 TRAE 做出来的过程（核心部分）
3.1 为什么选择 TRAE
这个项目的开发周期只有一周，而且我是一个人独立开发。TRAE 的 AI 编程助手在整个过程中扮演了"结对程序员"的角色——我负责产品决策和视觉设计，TRAE 负责代码实现、Bug 修复和逻辑优化。
3.2 开发流程
第一步：从零搭建项目骨架（2 小时）
我让 TRAE 帮我创建微信小程序的基础目录结构（pages、components、utils），并配置好 app.json 的页面路由和 tabBar。TRAE 自动生成了 5 个 tab 页面（发现、匹配、消息、Date、我的）的骨架代码，包括 WXML、WXSS、JS 三件套。
第二步：核心交互——滑动卡片（4 小时）
滑动匹配是整个产品的灵魂。我描述了 Tinder 的交互逻辑（手指拖动卡片、松手后根据偏移量决定滑出方向、下一张卡片自动置顶），TRAE 帮我实现了一个完整的 swipe-card 自定义组件：
bindtouchstart / bindtouchmove / bindtouchend 事件链处理手指拖动
transform: translateX() rotate() 实现实时跟随和旋转倾斜
动态计算 opacity 实现滑出时的淡出效果
堆叠布局通过 z-index 和 absolute 定位实现
最棘手的是"点击按钮也要有滑动动画"这个需求。手指拖动时卡片需要 transition: none 实现实时跟手，但点击按钮时需要 transition 生效才能看到滑出动画。TRAE 帮我设计了"swiping 状态类"方案——点击按钮时给卡片添加 swiping-pass / swiping-potato 类，用更高优先度的 CSS 覆盖 transition: none。
第三步：Match 动画效果（2 小时）
匹配成功的瞬间需要给用户强烈的情感反馈。我描述了想要的视觉效果：土豆 emoji 从下方弹入、放大抖动、然后轻微漂浮；背后有一层发光脉冲；伴随樱花飘落。TRAE 用纯 CSS 动画实现了全套效果：
@keyframes potatoShakeScale：0% 透明+小+倾斜 → 26% 放大到 1.55 倍 → 后续几帧模拟弹性回弹
@keyframes potatoFloat：820ms 后进入无限循环的轻微上下漂浮
@keyframes glowPulse：发光层呼吸式缩放
@keyframes sakuraCoreFlash 和 @keyframes sakuraFirework：樱花从中心爆开、向外飘散、旋转下落
第四步：聊天页与业务逻辑（3 小时）
聊天页涉及多个状态管理：24 小时倒计时、7 天解锁微信、安全代码、Date 订单。TRAE 帮我把这些状态拆分成清晰的 data 结构，并实现了 loadMatchData、loadMessages、checkWechatUnlock 等方法。
特别值得一提的是"安全代码"功能的设计。我让 TRAE 实现了一个双向验证逻辑：双方各自设置一个安全词，见面时互相说出对方的安全词才能确认身份。这个机制既增加了线下见面的安全感，又避免了一方单方面爽约的风险。
第五步：视觉调优（1 小时）
整个产品采用粉白渐变配色（#FFF0F5 → #FFFFFF），主色调是暖粉色（#E91E63）。TRAE 帮我在所有页面统一了圆角规范（卡片 44rpx、按钮 999rpx）、阴影规范（粉色系微阴影）和字体层级（标题 36rpx、正文 30rpx、辅助文字 24rpx）。
3.3 TRAE 帮我解决的典型问题
问题 1：昵称输入框在真机上无法输入
本地模拟器测试正常，但真机上输入不显示。TRAE 分析后发现是 input 组件的默认高度和 view 不一致导致事件没有正确触发。解决方案是把 input 包在 view.picker-input 容器内，让外部容器负责样式，内部 input 只负责输入交互，结构和年龄/星座选择器保持一致。
问题 2：卡片布局在手机上按钮被截断
最初把按钮放在卡片外部、用 flex: 1 分配空间，结果在手机上按钮被挤出屏幕。TRAE 建议把按钮直接放进 .card 内部底部，让按钮跟随卡片一起滑动，同时给卡片设置 max-height: calc(100vh - 280rpx) 确保不会溢出容器。
问题 3：MATCH 弹窗的土豆动画被截断
.match-card 设置了 overflow: hidden，土豆 emoji 放大到 1.55 倍时顶部被裁切。TRAE 诊断后移除了 overflow: hidden，并增大了 padding-top，给动画留出足够空间。
4. 开发心得与总结
做得好的地方
交互打磨足够细：滑动卡片的物理手感（阻尼、回弹、倾斜角度）调了十几个版本，最终的手指跟随体验接近原生 App
情感化设计到位：MATCH 动画不是一个简单的弹窗，而是一整套包含土豆弹入、发光脉冲、樱花飘落的情感反馈系统
安全机制有新意：安全代码 + Date 订单 + 平台服务费的模式，既保障了用户安全，又创造了可持续的商业模式
可以改进的地方
后端还没接：目前所有数据都是 Mock 的，真实上线需要对接用户系统、匹配算法、消息推送、支付系统
审核机制缺失：照片和资料的人工审核流程还没做，这是社交平台必须有的
算法推荐：目前的推荐是随机排序，后续需要基于地理位置、兴趣标签、互动行为做推荐算法
未来规划
接入微信小程序的实时音视频能力，支持"视频速配"功能
开发"土豆市集"——用户可以用积分兑换虚拟礼物、头像框、主题皮肤
拓展线下活动模块，组织"土豆派对"等主题社交活动https://forum.trae.cn/t/topic/74374?u=u2099397118680472https://forum.trae.cn/t/topic/73401?u=u2099397118680472
potato-u-contest-post.zip (366.9 KB)
UID:2099397118680472
