为了方便相亲，我用AI写了一款小程序
前言：当代年轻人的择偶困惑
最近和几个同龄朋友聊天，发现未婚的朋友都有一个共同的困扰：大家根本不知道自己想要什么样的对象。
小李说："每次相亲，别人问我择偶标准，我都只能说'看眼缘'，但什么是眼缘我也说不清楚。"
小王补充："对啊！我妈总问我喜欢什么类型的，我说'人好就行'，她就翻白眼说我没标准。"
小张更直接："我发现自己每次都是被动选择，从来没有主动思考过自己真正需要什么。"
听完大家的吐槽，我突然意识到这是一个普遍现象。我们这一代人在面对择偶时，往往是这样的状态：
- 标准模糊：说不清楚自己到底要什么
- 被动选择：总是在别人介绍的选项中挑选
- 容易摇摆：今天觉得颜值重要，明天又觉得性格更重要
想想也挺有意思的，我们买个手机都要对比参数、看评测、研究半天，但选择人生伴侣却如此随意。这不科学啊！
于是，作为一个程序员，我决定用技术手段来解决这个同龄人的共同难题。
理想型世界杯小程序开发：用代码拯救我的爱情
灵感来源：世界杯淘汰赛制
某天刷抖音时，我突然想到：**世界杯淘汰赛制多刺激啊！**每一场比赛都是生死对决，没有平局，必须做出选择。这不就是择偶的真实写照吗？
在现实生活中，我们总是想要"既要...又要...还要..."，但真正面临选择时，你只能选一个。就像世界杯一样，再强的队伍也可能在某一场比赛中被淘汰。
于是"理想型世界杯"的概念诞生了：让择偶标准像足球队一样进行淘汰赛，最终选出你心中的TOP3。
技术选型：让AI当我的编程搭档
作为一个懒癌晚期患者，我决定让AI来帮我写代码。毕竟，我的时间应该用来思考人生大事，而不是纠结CSS样式。
技术栈选择：
- uni-app + Vue3：一套代码多端运行，毕竟相亲对象可能用iOS也可能用Android
- TypeScript：类型安全，就像择偶一样需要明确标准
- Pinia：状态管理，管理我复杂的择偶心理
- 大胆手绘风格：因为相亲本身就很大胆，设计也要配得上
数据设计：把择偶标准量化
首先，我需要把择偶标准进行科学分类。经过深入思考（其实是网上搜索+AI分析），我把择偶标准分为三大维度：
typescript
interface Option {
id: string
name: string
category: '外在条件' | '内在特质' | '关系互动'
description: string
}外在条件 ：长相、身高、收入、学历等看得见摸得着的硬指标 内在特质 ：性格、幽默感、责任心等需要深入了解才知道的软实力
关系互动：沟通能力、浪漫程度、默契度等两人相处的化学反应
总共设计了48个择偶标准，从"长相"到"厨艺"，从"收入"到"养宠物的态度"，基本涵盖了相亲市场上所有可能的考量因素。
游戏机制：残酷但真实的选择
基础版（24选3） ：适合择偶新手，温和一点的自我探索 进阶版（48选3）：适合相亲老司机，更深层次的内心挖掘
游戏流程就像真实的择偶过程：
- 随机配对：就像相亲一样，你永远不知道下一个会遇到谁
- 二选一：没有"都挺好"的选项，必须做出选择
- 残酷淘汰：被淘汰的标准就像错过的缘分，再也回不来了
- 最终结果：剩下的TOP3就是你内心深处最真实的需求
开发过程：AI是个靠谱的搭档
整个开发过程中，AI表现得比我预期的要好：
我 ："帮我写一个世界杯淘汰赛制的择偶标准小程序" AI："好的，我来帮你分析需求..."
然后AI就开始了它的表演：
- 自动生成了需求文档
- 按要求输出多款设计风格的UI稿
- 根据我选择的风格将UI稿转换成uniapp代码
唯一的问题是，AI写的代码比我写的还好，让我这个程序员很有挫败感。
设计风格：大胆手绘风格
为了让这个小程序看起来不那么严肃（毕竟相亲已经够严肃了），开始的时候我选择了孟菲斯风格,以下是初稿的图片和提示词。（生成设计稿用的是cursor生成的网上有很多介绍，这里不在展开）
markdown
* **核心元素风格:**
* **大胆几何与图案:** 界面设计充斥着**鲜明的几何形状（圆形、方形、三角形、半圆形等）**的**随机、非对称组合**。广泛运用**孟菲斯经典图案**，如**波浪线 (Squiggles)、锯齿线 (Zigzags)、粗条纹、密集点阵、以及可能的豹纹或水磨石 (Terrazzo) 纹理**。这些元素作为背景、装饰或UI控件的一部分。
* **玩味与反功能:** 设计强调**视觉趣味和个性**，形式不必严格服务于功能。允许出现纯粹的装饰性元素。
* **背景与层级:**
* **纯色或图案背景:** 整体页面背景可以是大胆的**纯色块（亮粉、亮黄、亮蓝、黑、白等）**，或者直接使用**重复的孟菲斯图案**。
* **扁平化层级:** 主要通过**明确的色块边界、粗线条轮廓**来区分层级。避免使用柔和的阴影或渐变，追求**图形化、扁平的堆叠感**。可以使用**硬边缘阴影 (Hard Drop Shadows)** 制造图形感。
* **配色方案:**
* **高饱和度与撞色:** 使用**高饱和度的、明亮的色彩**，并进行**大胆的撞色搭配**（如粉配绿、黄配蓝、黑白与亮色组合）。**粉彩与霓虹色**的结合也很常见。**黑色和白色**常作为重要的平衡色或图案基础色。
* **主导色:** 鲜明的粉色 (`#FF6B6B`)、黄色 (`#FFD93D`)、蓝色 (`#6BCB77` 或 `#4D96FF`)、薄荷绿 (`#98D8AA`) 等。
* **背景色:** 白色 (`#FFFFFF`)、黑色 (`#000000`) 或上述大胆纯色之一。
* **主文字:** **黑色 (`#000000`) 或白色 (`#FFFFFF`)**，取决于背景色，确保**极高的对比度**。
* **次要文字/提示文字:** 使用对比度稍低的灰色 (`#555555` 或 `#AAAAAA`)，或者使用主导色中的一种。
* **强调色/交互色:** 选择一种**非常醒目且与周围元素形成强烈对比**的颜色（可以是上面未列出的亮色，如亮橙 `#FFA500` 或亮紫 `#AF7AC5`）。
* **几何感字体排版:**
* 字体:
* **标题/关键标签:** 使用**粗体、几何感强的无衬线字体** (如 `Montserrat Bold`, `Poppins ExtraBold`) 或具有80年代复古感的**装饰性字体**（需注意可读性）。
* **正文:** 选用清晰的**几何无衬线体** (如 `Poppins Regular`)。
* 显示：文字显示为中文。
* 层级:
* 大标题: `34px` Bold/Black, `#000000` 或 `#FFFFFF`。
* 卡片标题/重要标签: `22px` Bold, `#000000` 或 `#FFFFFF`。
* 正文/列表项: `16px` Medium, `#000000` 或 `#FFFFFF` (确保对比度)。
* 小字号/说明文字: `14px` Regular, (对比度稍低的颜色)。
* 排版: 文字布局也可能**不拘一格，与几何图形穿插**。尝试了几个风格后 考虑到使用小程序的用户可能女性偏多一些最终还是选择了手绘风。
- 不规则边缘：就像人的感情一样，不可能完美对称
- 手绘纹理：增加温度感，毕竟择偶是很有温度的事情
- 鲜明配色：深蓝、活力橙、草木绿，就像多彩的人生
- 随意的圆角：完美的圆角太冷漠，略显随意的圆角更有人情味
设计稿转换小程序
在经过多次设计稿生成和选择之后，确认了想要的风格， 直接告诉cursor把设计稿转成uniapp小程序代码。
模型上建议选择claude-4
让AI生成代码的时候，可以一个一个页面生成，而不是一性转换完成这样AI生成代码会更流畅一些，不过我的小程序只有4个页面，是可以一次性生成完成的，如果有10-20个页面的应用，建议拆分任务。
总结：技术改变生活，AI改变相亲
项目成果
经过几天的开发（主要是和AI的对话时间），"理想型世界杯"小程序正式上线了：
- ✅ 48个精选择偶标准，覆盖相亲市场99%的考量因素
- ✅ 世界杯淘汰赛制，让选择变得刺激有趣
- ✅ 大胆手绘风格，颜值在线不输相亲对象
- ✅ 数据持久化，记录你的择偶观变化历程
- ✅ 深度分析报告，比心理咨询师还专业
哲学思考：选择的艺术
这个项目让我意识到，择偶其实是一门选择的艺术。我们总是想要完美的对象，但现实中不存在完美的人。重要的是要清楚自己的优先级，知道什么是可以妥协的，什么是绝对不能妥协的。
就像游戏中的淘汰赛制一样，每一次选择都意味着放弃。但正是这些选择，定义了我们是谁，以及我们想要什么样的人生。
技术感悟：AI时代的编程
这次开发经历让我对AI编程有了新的认识：
- AI是很好的编程伙伴：它不会累，不会抱怨，还能提供很多创意
- 人类的作用是提出需求和做决策：AI负责实现，人类负责思考
- 沟通能力变得更重要：如何准确表达需求成为关键技能
- 创意仍然是人类的优势：AI可以写代码，但创意和洞察还是需要人类
未来展望
目前这个小程序还只是1.0版本，未来我计划加入更多功能：
- AI智能分析：根据你的选择推荐合适的相亲对象类型
- 社交功能：让有相似择偶观的人能够互相发现
- 数据可视化：用图表展示你的择偶偏好变化
- 专家建议：邀请情感专家提供个性化建议
最后的话
P.S. 如果你也想试试这个小程序，记住：结果仅供参考，真正的爱情还是要靠缘分。但至少，你会更清楚自己在寻找什么样的缘分。
💖 发现你的理想型，从这里开始！
感兴趣的可以扫码体验~
