关于我
普通打工人一枚，Vibe Coding 重度爱好者。白天写业务代码，晚上喜欢做点带"温度"的小产品。相信技术不该只是效率工具，也可以是某种柔软的陪伴。这是的主攻方向是"AI 能否成为一个温柔的情绪容器"。
一隅是什么
一句话：一隅是一个 AI 情绪疗愈卡牌 Web 应用——你倾诉此刻的心情，它为你抽一张水墨卡牌，并用一首诗签和一段解读回应你。
形态：PWA Web 应用（Next.js 16 全栈），手机浏览器打开即可使用，支持添加到桌面像原生 App 一样体验。
面向谁：
-
深夜想说点什么但找不到人说的人
-
情绪上头想被"接住"但又不想被评判的人
-
想要一个不评判、不分析、只回应的树洞的人
典型使用场景：
-
下班路上觉得累——打开一隅，写下"今天有点累"
-
一隅为你随机抽一张牌（比如"苔藓"），并生成一首诗签 + 牌意解读
-
翻看牌面背面（3D 翻转），把这一刻的诗签存下来
-
时间久了，"牌签墙"慢慢积累成你的情绪年轮
完整功能与用户路径
核心闭环：倾诉 → 抽牌仪式 → 牌签 → 落墙
完整功能清单：
| 模块 | 功能 |
|---|---|
| 账号 | 手机号 + 密码 / demo 一键体验 |
| 倾诉 | 200 字文本框 + 8 个情绪快捷 chip |
| 抽牌仪式 | 3 阶段动画（静心 0.9s → 洗牌 1.5s → 翻牌 1.2s），与 AI 并行 |
| AI 解读 | 随机抽 1 张卡 + DeepSeek 根据用户输入+卡牌意象生成 4 合 1（情绪识别 + 诗签 + 牌意解读 + 动效参数） |
| 牌签页 | 4 层合成卡牌（渐变 + 水墨主图 + 文字 + 角线）+ Canvas 动态背景 + 3D 翻面看背面 |
| 牌签墙 | 双列瀑布流 + 分页 + 单条详情 + 删除 |
| 牌图鉴 | 24 张卡按 6 情绪面向分组，已抽到显示主图，未抽到灰显带 “?” |
| 导出 | 离屏 Canvas 渲染 720×960 PNG 下载（不依赖 DOM 截图） |
| 数据 | SQLite + Prisma 7 持久化，跨设备同步 |
| PWA | manifest + Service Worker + 安装图标 |
24 张卡牌系统：按 6 种情绪面向（焦灼 / 澄澈 / 低回 / 明朗 / 迷茫 / 守候）各 4 张，每张都是独立的水墨意象——落雷、静水、晴雪、萤火、孤岛、残烛……每张牌都有固定牌义（archetype），AI 解读时会围绕这张牌的意象展开。
用户路径示意：
相比初赛 Demo 的升级
初赛 Demo 是一个单文件 HTML，靠关键词匹配选情绪色卡 + 预制诗库。复赛做了全面重构：
| 维度 | 初赛 Demo | 复赛版本 |
|---|---|---|
| 形态 | 单文件 HTML | Next.js 16 全栈 + PWA |
| AI | 关键词匹配 | DeepSeek 真实调用（4 合 1） |
| 卡牌 | 6 种情绪色卡 | 24 张水墨意象牌 + gpt-image-2 生成主图 |
| 数据 | localStorage | SQLite + Prisma，跨设备同步 |
| 账号 | 无 | 手机号 + 密码 + JWT |
| 仪式 | 1 个生成动画 | 3 阶段动画 + AI 并行 |
| 牌签 | 只有正面 | 4 层合成 + 3D 翻面 + Canvas 动效 |
| 导出 | 占位未实现 | 离屏 Canvas PNG 下载 |
| 收集 | 无 | 牌图鉴 24 张收集 |
产品演示视频
产品落地页 https://yy.oyjf518.workers.dev/
创作历程
灵感来源：有段时间经常在深夜收到朋友发来的情绪信息——“今天好累”、“不知道为什么难过”。作为倾听者我意识到，很多人需要的不是建议，而是一个"被接住"的瞬间。塔罗牌的"抽牌"仪式感 + 中国水墨画的留白美学 + AI 的即时回应能力，这三个元素叠在一起就是"一隅"。
初赛 Demo：用最朴素的方式验证创意——单文件 HTML，关键词匹配 + 预制诗库，跑通了"倾诉 → 卡片 → 落墙"这条链路。验证了用户愿意"写下来"，也愿意"等一张牌"。
复赛迭代的关键决策：
-
从"固定回复"改为"随机抽牌 + AI 解读"：初赛为了快速落地验证，使用几种固定回复。复赛改为系统随机抽卡，AI 再基于抽到的卡和用户输入生成解读——这样每次的牌都是命运给的，AI 负责让这张牌与你的此刻产生呼应。这个改动让体验从"算法推荐"变成了"缘分签"。
-
卡牌主图用AI生成水墨风：24 张卡每张都有独立主体（孤松、扁舟、梅枝、莲灯……），统一中式水墨画风，留白处理，无卡牌边框——这样卡牌正面用 4 层合成（渐变背景 + 主图 + 文字 + 角线），主图本身是纯净的水墨画。
-
3 阶段仪式动画：初赛只有一个生成动画。复赛设计了 breathe（静心）→ shuffle（洗牌）→ reveal（翻牌）三阶段，让"抽牌"这个动作有了仪式感。AI 调用与动画并行，仪式结束瞬间 AI 已就绪，体验无等待。
-
4 层合成卡牌：为了在不同场景（牌签页大图 / 牌签墙缩略图 / 图鉴小图）保持视觉统一，把 CardFront 抽成支持 4 种 variant 的共用组件（full/tile/atlas/locked），所有字号按 baseWidth 比例自适应。
TRAE 实践过程
一隅从初赛到复赛全程使用 TRAE IDE 开发。
技术栈：
-
框架：Next.js 16 (App Router, Turbopack) + TypeScript
-
UI：Tailwind 4 + shadcn/ui + Framer Motion
-
状态：Zustand
-
数据：Prisma 7 + SQLite (better-sqlite3)
-
认证：jose JWT (httpOnly Cookie)
-
AI：DeepSeek (deepseek-v4-flash via openai SDK) + zod schema 校验
-
部署：Vercel 兼容 + PWA (manifest + Service Worker)
关键实现思路：
-
AI 返回用 zod schema 严格校验，校验失败仍保留随机抽到的卡 + 兜底文案，保证用户体验不中断
-
客户端 20s + 服务端 15s 双超时，DeepSeek 慢响应时优雅降级
-
抽牌用
Math.random均匀随机，与 AI 解耦——AI 不参与抽牌，只负责基于抽到的卡生成内容 -
PNG 导出用离屏 Canvas 而非 DOM 截图，避免依赖 html2canvas 等库
开发关键步骤截图：
[截图 1：复赛项目策划]
[截图 2：24张卡牌策划]
[截图 3：完成PRD文档]
[截图 4：工程开发落地]
[截图 5：牌签墙/图鉴样式统一 + bug 修复]
关键任务 Session ID（证明全程 TRAE 开发）：
-
Session 1: [2355573263697299:3088387c268e19238f034c59f5e940bb_6a66aa37378b6d2895f2e23f.6a66abd8378b6d2895f2e275.6a66abd8378b6d2895f2e273:TRAE Work CN.0.1.40.no_sid.no_ppe.T(2026/7/27 08:52:40)] —— 主题：复赛项目设计
-
Session 2: [2355573263697299:b4b1d426ffdbc5dc657104105393fb4d_6a66aa37378b6d2895f2e23f.6a66b036378b6d2895f2e290.6a66b036378b6d2895f2e28e:TRAE Work CN.0.1.40.no_sid.no_ppe.T(2026/7/27 09:11:18)] —— 主题：24张卡牌策划
-
Session 3: [2355573263697299:14b513af064d0c933f555571342adb99_6a66aa37378b6d2895f2e23f.6a66bb98378b6d2895f2e31f.6a66bb98378b6d2895f2e31e:TRAE Work CN.0.1.40.no_sid.no_ppe.T(2026/7/27 09:59:52)] —— 主题：完成PRD文档
-
Session 4: [2355573263697299:717f79557afff5cb36edefe79eb4de03_6a66aa37378b6d2895f2e23f.6a66be14378b6d2895f2e366.6a66be14378b6d2895f2e364:TRAE Work CN.0.1.40.no_sid.no_ppe.T(2026/7/27 10:10:28)] —— 主题：工程开发落地
-
Session 5: [2355573263697299:559565e1d035da30add30d90c5faa74c_6a66aa37378b6d2895f2e23f.6a66f91a378b6d2895f2ee0d.6a66f91a378b6d2895f2ee0b:TRAE Work CN.0.1.40.no_sid.no_ppe.T(2026/7/27 14:22:18)] —— 主题：牌签墙/图鉴样式统一 + bug 修复
迭代规划
-
设计更具用户粘性的私人情绪空间
-
基于卡牌进行更深入的AI心理疗愈对话
-
制作成移动端APP，加入vip专属卡牌
-
卡牌分享卡片（带二维码的分享图）
-
UGC卡牌和用户社群
