【生活娱乐】从积极心理学重新解读塔罗—— 猫咪塔罗牌（含初赛Demo版apk可下载试玩）

TRAE AI 创造力大赛 【大赛初赛专区】
1

【生活娱乐赛道】

【生活娱乐】从积极心理学重新解读塔罗—— 猫咪塔罗牌（含初赛Demo版apk可下载试玩）

【正文】

0. 先和大家打个招呼吧 :waving_hand:

  • 你是谁： 我是从积极心理学重新解读塔罗—— 猫咪塔罗牌的作者，也是当过设计总监的建筑师，对立体审美和视觉品质很在意的人，在这里诚恳邀请您下载apk安装体验版的成果。

  • 你是怎么用 TRAE 把 Demo 做出来的： 我是一名建筑师，用trae做程序后，发现搭建软件的工作和设计一栋大楼很像，先有结构框架，再有内部功能房间，最后再有精美的装饰，然后用户就可以入驻了/软件就可以使用了。这个软件是用积极心理学重构的塔罗牌，里面有精心设计的78张牌，用猫咪柔软而又温暖、神秘的形象，在塔罗文化框架下传达积极的心理暗示。

  • 背后故事：这个决定的起点是一个简单观察：“躺平的人从来不塔罗”。选择翻开塔罗牌的人，几乎都是在行动的边缘——正在考虑换工作的人、犹豫要不要表白的人、为未来焦虑的人。这些人有一个共同特征：他们在乎。他们在乎自己的选择，在乎内心状态。寻求塔罗本身就是一种积极信号——说明用户没有放弃寻找方向。

  • 传统塔罗产品存在一个根深蒂固的问题——它们在强化宿命论叙事。翻开一张逆位牌，用户看到的是"灾难降临"“关系破裂”“事业崩塌”；本就在迷茫中的人，反而被推入更深的焦虑。塔罗变成了一种制造焦虑的工具，而非化解焦虑的工具。我决定改变这一点。

1. Demo 简介

  • 是什么

    「猫咪塔罗牌 / Tarot Cat」是一款基于积极心理学框架重新设计的塔罗自我探索工具。它并非传统意义上的"占卜预测"应用，而是借助塔罗牌的象征体系，帮助用户觉察当下的能量状态、梳理内心议题、获得正向行动指引。产品形态为单页H5网页应用，所有数据和逻辑内嵌，无需后端服务，打开即可使用。支持中英双语输出，完美适配移动端全屏体验。

    首页：31个关键词按四元素着色，用户选择反映当下状态的关键词

    面向谁

    • 都市青年——面临感情、职业、人际等具体困惑，需要低成本心理支持

    • 轻度心理需求用户——对身心灵成长感兴趣，希望获得每日正向暗示

    • 塔罗好奇者——对塔罗文化感兴趣但不愿学习复杂规则的新手

    主要功能

    功能一：31关键词 × 四元素分类

    首页提供31个生活关键词，覆盖恋爱、事业、人际、健康四大领域。关键词按塔罗四元素着色分类：火元素（行动类，如"竞争"“谈判”）、水元素（情感类，如"恋爱"“暧昧”）、风元素（思想类，如"放下"“信任”）、土元素（联系/物质类，如"正财"“健身”）。用户通过选择关键词来"锚定"自己当下的心理状态，这本身就是一种正念练习。

    牌阵选择：三种牌阵各有不同的解读维度

    洗牌动画：78张卡牌散开再聚拢

    功能二：三种牌阵各有不同的解读维度（核心亮点）

    本产品最大的差异化设计在于：同一张塔罗牌在不同的牌阵、不同的Slot位置中，会呈现完全不同的解读词。这不是简单的模板替换，而是基于不同牌阵的心理学目标进行了系统性的解读重构。

    扇形选牌：用户从弧形排列的卡牌中选择

    极简牌阵（One Card Draw）—— 抽取单张牌，解读维度为"今日之牌"。关键词聚焦于日常指引，例如"愚者"在极简牌阵中的解读强调"今天适合以无畏的心态尝试新事物"。

    三张时序（Past / Present / Future）—— 解读维度为时间线因果，适合理解事情的发展脉络。同一张牌在过去、现在、未来三个位置的解读完全不同。例如：

    是非牌阵（Yes / No Spread）—— 解读维度从时间线切换为决策分析，三个Slot分别是"基础 → 阻碍 → 答案"，与三张时序的"过去 → 现在 → 未来"完全不同。同一张牌在是非牌阵中会获得与三张时序截然不同的解读词。例如：

    这种设计的意义在于：塔罗解读不再是千篇一律的固定文案，而是根据牌阵的心理学目标动态生成的个性化解读。三张时序帮助用户理解时间脉络，是非牌阵帮助用户做出具体决策——同一个象征符号在不同语境下释放出不同的心理信号。

    功能三：78张全牌库 + 正逆位双语解读

    完整覆盖22张大阿尔卡纳 + 56张小阿尔卡纳（权杖/圣杯/宝剑/星币四花色），每张牌均提供正位（Upright）与逆位（Reversed）两种解读。逆位解读基于积极心理学重构——不表示"厄运"，而是"需要觉察的内在阻力，是成长的信号"。解读文本按从正向到负向的顺序排列，用户先看到优势与资源，再温和地提示挑战。中英双语输出，语言包容且开放。

2. Demo 创作思路

  • **灵感来源：**我一直对塔罗文化感兴趣，但市面上的塔罗App让我失望——它们把逆位牌渲染成"厄运预警"，把解读变成恐吓营销的工具。有一次，一位朋友在感情低谷时使用某塔罗App，抽到"高塔"逆位后整夜焦虑。这让我意识到：工具本身在传递能量，而大多数塔罗软件在传递焦虑。

    塔罗文化的本源并非如此。塔罗起源于15世纪的欧洲，最初是纸牌游戏，后来逐渐发展为象征性的心理映射工具。它的核心价值在于"通过象征符号触发自我对话"，而非"预测不可知的未来"。卡尔·荣格（Carl Jung）曾研究塔罗与集体潜意识的关系，认为牌面是人类原型的视觉化表达。

    基于这个洞察，我想到：如果把**积极心理学（Positive Psychology）**的框架引入塔罗解读——关注优势、强调行动、重构逆位意义——这个古老工具完全可以成为现代人的心理自助入口。

    “塔罗牌代表的是人类集体潜意识中原型的视觉化表达。每一张牌面都是心灵深处某种普遍模式的象征性呈现。”—— Carl Gustav Jung，分析心理学创始人

  • 想解决的问题：

  • **问题一：逆位焦虑。**传统塔罗将逆位等同于"坏结果"，用户抽到逆位牌后产生不必要的恐惧。猫咪塔罗牌重构逆位为"需要觉察的内在阻力"——不是诅咒，而是温暖的邀请。

    **问题二：被动宿命。**大多数解读只告诉用户"会发生什么"，不告诉用户"可以做什么"。我们的解读始终保持"你可以怎样"的建设性姿态。

    **问题三：解读同质化。**市面上塔罗应用对不同牌阵使用相同的解读模板，缺乏针对性。猫咪塔罗牌的核心创新在于：三种牌阵各有独立的解读维度系统，同一张牌在不同位置会产生完全不同的解读词。

    **问题四：心理自助门槛高。**专业心理咨询价格昂贵（每小时300-1000元），轻度心理需求无处安放。猫咪塔罗牌3分钟即可完成一次完整的正向自我探索，零门槛、零成本。

  • 为什么做这个方向：

  • 我选择"积极心理学+塔罗"这个交叉方向，基于三点判断：

    • **需求真实存在：**现代人心理压力普遍增大，但心理服务的供给严重不足。一个免费的、随时可用、无门槛的自我探索工具有明确的用户价值。

    • **差异化明确：**市面上99%的塔罗App走"神秘学+付费解锁"路线，内容同质化严重。积极心理学视角是蓝海定位，既保留了塔罗的象征魅力，又赋予其现代心理学的科学温度。

    • **技术可行性强：**本项目完全前端实现，微信小程序/小程序均可运行，无需后端和数据库，非常适合用TRAE快速迭代。

3. Demo 体验地址（三选一）

这是一个包含可安装的demo版应用的网盘下载链接，提取码：1234。

4. TRAE 实践过程

开发环境

  • **开发工具：**TRAE IDE

  • **代码类型：**原生 HTML/CSS/JavaScript，单页应用

  • **数据存储：**JSON 内嵌（78张卡牌、31个关键词、四元素属性、能量解读语料库）

  • **图片资源：**157张 WebP 格式塔罗牌插画，已压缩优化

关键开发步骤

步骤 1：基础框架搭建

用 TRAE IDE 创建 HTML 骨架，搭建舞台切换系统（home → spread-select → shuffle → fan-select → reveal → result → detailed → card-detail），实现星空背景 Canvas 动画，使用 requestAnimationFrame 逐帧渲染星星移动。添加 CSS 变量系统定义主题色（深紫背景 #0f0a1a、金色 #d4af37 等）。

步骤 2：核心数据结构构建

在 TRAE 对话中要求生成78张塔罗牌的标准数据（名称、关键词、花色、编号），构建卡牌文本数据库——每张牌包含正位（Upright）和逆位（Reversed）双语解读。设计31个生活关键词体系，按四元素分类并分配情感/事业/人际/健康标签。为每张卡牌分配四元素属性值（火/水/风/土，范围-3到+3）。

步骤 3：关键词交互系统

实现关键词浮动动画（随机位置、字体大小 0.5rem~1.3rem、透明度变化），添加关键词选择逻辑（单选模式，选中后放大居中并高亮金色），实现"开始探索"按钮激活逻辑，添加点击空白区域刷新关键词排列的交互。

步骤 4：洗牌与发牌动画

实现洗牌阶段动画：78张卡牌从中心散开再聚拢，模拟真实洗牌手感。实现扇形发牌（fan-select）：卡牌呈扇形排列，用户可左右滑动选择。实现翻牌动画（reveal）：3D 翻转效果，随机决定正位/逆位（正逆位概率各50%）。

步骤 5：积极心理学解读引擎

重构逆位解读文本，将传统"厄运"表述改为"觉察内在阻力"的积极框架。实现基于牌阵类型和 Slot 位置的差异化解读——同一张牌在"过去/现在/未来"与"基础/阻碍/答案"中生成完全不同的解读词。实现四元素能量分析：计算当前牌面的火/水/风/土数值，识别最强和最弱元素，生成平衡建议。添加中英双语随机连接词库。

步骤 6：牌阵系统与详细解读

实现三种牌阵的 Slot 布局系统（极简牌阵1张、三张时序3张横向、是非牌阵3张三角），为每种牌阵设计独立的解读维度体系。在详细解读页底部添加固定提示，引导用户点击查看卡牌大图与详解。

步骤 7：优化与合规

添加免责声明："塔罗牌是一种象征性的自我探索工具，并非科学预测。"压缩图片资源：157张 WebP 从 2048×3584 压缩至 512×905（小图）和 1024×1792（大图），文件体积减少 50%。优化移动端触摸事件，适配未来微信小程序迁移。

关键任务对话 Session ID

微信图片_20260716083926_803_123
微信图片_20260716083926_803_1231395×940 116 KB

微信图片_20260716082927_801_123
微信图片_20260716082927_801_1231264×945 57.3 KB

微信图片_20260716090254_807_123
微信图片_20260716090254_807_1231381×900 128 KB

**1 、**基础框架搭建 / 首页与星空背景动画实现

Session ID: 3295650140916649:998a33c4a65bc931004f9f4b23b7b95a_6a4707cb44f3de4481f96e2c.6a470e9944f3de4481f96f3b.6a470e9944f3de4481f96f39

2、78张卡牌数据库构建 / 四元素属性赋值

Session ID: 3295650140916649:9ad35cb384192e5b33b66bc5a839130c_6a4707cb44f3de4481f96e2c.6a472c1844f3de4481f97353.6a472c1844f3de4481f97351

**3、**关键词交互系统 / 选择逻辑与按钮激活

Session ID: 3295650140916649:81967482631dfa5e3e040f1b0fb7711b_6a4707cb44f3de4481f96e2c.6a47261944f3de4481f972ca.6a47261744f3de4481f972c8

**4、**积极心理学解读引擎 / 逆位重构与能量分析

Session ID: 3295650140916649:012aa9bed912b5acda3a82dd4d908b18_6a4707cb44f3de4481f96e2c.6a473c2a44f3de4481f9746c.6a473c2a44f3de4481f9746a

**5、**牌阵系统 / 差异化解读与双语输出优化

Session ID: 3295650140916649:012aa9bed912b5acda3a82dd4d908b18_6a4707cb44f3de4481f96e2c.6a473c2a44f3de4481f9746c.6a473c2a44f3de4481f9746a

Session ID 查找方法：双击 TRAE 对话中的会话头像，复制 Session ID 字符串。

5. 对应的报名审核通过的帖子链接

报名帖链接：https://forum.trae.cn/t/topic/95533

6.后续规划

微信小程序迁移

当前已完成 H5 版本，计划使用 TRAE IDE 继续开发微信小程序版本，采用分包加载和云存储 CDN 控制包体积，让用户可以在微信生态中直接使用。

AI 解读增强

接入大模型 API，基于用户选择的关键词 + 牌面 + 四元素分布，生成更个性化的长文本解读。当前已有31个关键词的语料库作为基础，未来可实现千人千面的解读体验。

用户体系与社交分享

增加每日一抽记录、历史解读回顾、能量趋势追踪等轻量级数据功能。生成精美的解读结果卡片，支持保存图片和分享至朋友圈——将3分钟的自我对话成果变成可传播的正向内容。

解读维度拓展

在现有三种牌阵的基础上，计划增加"关系牌阵"（双人关系分析）、“月度能量牌阵”（30天能量趋势追踪）等新牌阵类型，每种新牌阵同样拥有独立的解读维度体系。