我用AI“ vibe“出了一个小程序的记录和感想

用Vibe Coding做了一个小程序:"看看我们有多像",大概花了多半天的时间,简单记录一下开发过程和自己的感想。

小程序功能:上传一张合影,会调用旷视的接口对进行面部相似度分析,计算面部相似度分数和排名占比。

主要的开发过程:页面设计-> 页面开发 -> 基础数据构造 -> 编写后端接口 -> 发布。

0.背景

最近AI和VibeCoding比较火,虽然我平时也会用AI来调试bug,生成组件/工具代码/文档/技术方案,但并没有用AI完整的实现一个项目,经常看到网上有人分享自己的项目90%+都是由AI生成的,自己也想试试。

1.开发工具

本地开了3个窗口:

OpenCode(MiniMax 2.1) 开发后端

Trae(MiniMax 2.1) 开发前端

微信开发者工具 实时预览

没有手写代码,只有提示词和对话

2.页面设计

设计也是交给AI来实现,分别使用了 v0、bolt.new、gemini 实现了H5的界面,还找了几个图片生成工具输出设计稿,

实现一个人脸对比的移动端H5,用户上传图片,识别并标记用户面部位置,对识别到的人脸进行相似度评分,并给出评分占比结果,生成海报风格的卡片给用户下载。不需要实现上传功能,相似度分数和评分占比结果使用随机值,不需要调用API和排名计算

挑了一个看着比较顺眼的UI来作为页面原型,没有Figma,没有PS,从Prompt到视觉稿只花了不到10分钟时间。

3.页面开发

页面是在Trae中通过分步提示实现的:

先让AI创建两个页面,在主页中创建一个图片选择器

选择图片后进行压缩处理,并得到base64数据

接下来让AI生成后端代码,并给出了调用示例,让Trae根据示例实现接口调用

得到人脸相似度对比分数和排名占比数据后让Trae进行绘制

文案也不用绞尽脑汁,直接问Kimi、Gemini和DeepSeek :

我做了一款面部相似度对比小程序,需要根据不同相似度给出一些文案和标签。

相似度区间 推荐文案 标签

90%以上 基因编辑都不敢这么像!建议查一下族谱,怕不是失散多年的双胞胎 复制粘贴

85%-89% 这也太像了,简直是同一个人好吗 一模一样

80%-84% 相似度爆表!建议原地组队出道,素颜都像亲兄妹 亲姐弟吧

70%-79% 这五官排列组合简直师出同门,得上辈子修了多少缘分 很有夫妻相

60%-69% 有内味儿了!某些角度会让人恍惚,属于越看越像型 孪生气质

50%-59% 相似buff已触发,笑起来的时候有点莫名的神同步 远房亲戚

40%-49% 大概就是传说中的"氛围感相似",气质这块儿拿捏了 聊胜于无

30%以下 算了算了,重在参与,颜值即正义,各有各的美 强行不像

选取了几个不同分数对应的文案和标签让AI绘制照片和文案到Canvas中。

最惊艳的环节:Canvas绘制:

之前手写Canvas代码很痛苦,需要各种计算,使用AI绘制Canvas简直太方便了,直接告诉AI从上到下绘制什么内容,怎么进行排版,绘制完成后还可以通过Chat进行微调。

其他细节:

字体使用了免费的"抖音美好体",并在线裁,只保留用到的字。

图标使用confont的AI生成器: https://www.iconfont.cn/ai_icon

4.数据准备

为了让排名功能更真实,我找了一个开源的人脸库,让OpenCode调用 Face++ 的接口两两对比。

全程自动化:只需提供图片目录和API文档,让AI自动生成代码调用,数据存储到Redis中,最后导出数据库备份文件。

5.接口开发

后端服务用了Nest.js,我之前主要做用户端和中后台开发,偶尔写写小工具会用node和Express , 并没有Nest.js的使用经验,这次后端服务是直接使用OpenCode + MiniMax2.1生成的。

步骤也很简单:

让AI初始化 Nest.js 项目,带上常用配置

需要两个接口:detect(人脸识别)和 compare(人脸对比 + 排名计算)

把旷视的 API 文档扔进去,AI会自动生成代码并测试

这里有个技巧:**生成后端接口后,可以让AI补充接口调用示例,再生成前端调用代码会更精准和方便。

6.部署和发布

自己有一台闲置的服务器,本来跑一些自用的工具,我在上面也安装了OpenCode,让AI自动安装redis,导入备份的数据,配置持久化。

代码提交后进行线上发布,可以微信搜索"看看我们有多像"体验一下。

几个感想

1.彻底交给AI写代码,真的很快 AI还自动验证,自动测试和修复。以前遇到问题后才会去问AI,自己还是不自觉的上手写代码,现在会考虑优先让AI来写,自己来把握方向、拆解需求、组合模块,效率会更高。

2.独立开发小工具的门槛大幅降低 从前端到后端,从设计到数据,AI能在短时间内给出可用方案。以后小而美的工具会越来越多。

3.有想法就去做,别等 每个人都应该做自己的产品并进行商业化尝试,以前有想法没时间做的,有想法但是不会前端/后端的,有想法但是自己不懂设计的,现在都不是借口了,AI都可以在很短的时间以极低的成本帮你解决。

4.早点入场,拥抱变化 顺应时代的变化,一个新的市场和未来的趋势,越早加入,越早适应,越能在未来的竞争中享受更大的红利。

相关推荐
衣乌安、2 小时前
归一化与点积在 Embedding 中的作用
ai·embedding
Designerpupu4 小时前
纸巾亚马逊详情页怎么做?3 步用 GPT 生成高转化产品图片
gpt·ai·photoshop·ps·跨境电商·亚马逊·详情页
曦尧4 小时前
开源后台编程 Agent 系统 background-agents:架构拆解与落地判断
ai·自动化
小博测试成长之路6 小时前
基于飞算JavaAI,从零落地企业线上培训考核管理系统
人工智能·vibe coding·飞算javaai·飞算java·飞算java ai炫技赛
码哥字节6 小时前
11 万 Star 的 Spec Kit,90% 的工程师只用它解决了 10% 的问题
设计模式·vibe coding·github spec kit
阿木实验室7 小时前
AI融入硬件产品的思考和实战:LQ10图数传的AI智能配置
ai·无人机·图数传
Dragon Wu7 小时前
ComfyUI SUPIR图片扩图插件集成报错解决
ai
Smoothcloud润云7 小时前
训练一个7B参数的大模型需要多少张GPU?大概要跑多久?
人工智能·深度学习·ai·开源·gpu算力
俊哥V7 小时前
每日 AI 研究简报 · 2026-07-13
人工智能·ai