【标签】 生活娱乐
【标题】 生活娱乐+ 同人关系梗库
【正文】
0. 先和大家打个招呼吧 
-
你是谁： 我是一名实施工程师；
-
你是怎么用 TRAE 把 Demo 做出来的： 把报名的帖子模板粘贴给它，我心里有个网站的雏形，在沟通过程中根据trae的回答优化想法。
1. Demo 简介
-
是什么： 一个面向同人创作者的关系梗创意灵感网站，帮助写作者快速获取故事灵感和写作方向。
面向谁： 核心用户是同人小说创作者、写手、故事爱好者，以及所有需要灵感激发的文字创作者。
主要功能：
-
梗库浏览 ：按纯爱、恨海情天、宿命感、破镜重圆、双向暗恋等标签分类展示关系梗，方便快速查找和筛选 -
随机抽梗 ：点击按钮触发抽梗动画，随机生成一个关系梗和三个写作方向，激发创作灵感 -
匿名讨论区 （两仪区）：用户可以匿名发帖和点赞，分享创作想法和心得，营造纯粹的交流氛围
界面展示： -
首页动态弹窗欢迎界面，文学感深色主题设计
-
梗库页卡片式布局，支持标签筛选和搜索
-
抽梗页旋转动画效果，增强互动体验
-
两仪区瀑布流帖子展示，简洁的匿名发帖界面
-
2. Demo 创作思路
-
灵感来源： 同人创作过程中，构思人物关系是最关键也最耗时的环节。很多创作者会陷入"想不出好梗"的困境，需要一个工具来激发灵感。
想解决的问题：
- 创作者缺乏关系梗灵感，需要浏览大量素材才能找到合适的梗
- 不同类型的关系梗分散在各处，难以系统化查找
- 匿名交流需求：创作者希望分享想法但不想暴露身份
为什么做这个方向： 选择同人关系梗库作为方向，是因为：
- 同人创作是一个庞大的文化圈，有明确的用户需求
- 关系梗是创作的核心要素，工具化后价值很高
- 匿名交流符合同人圈的文化习惯
- 纯前端实现，无需后端，开发周期短，适合Demo展示
3. Demo 体验地址（三选一）
dist.zip (78.1 KB)
-
部署随时可公开访问的体验链接；
-
交互式可体验的HTML格式文件，请使用Zip格式打包上传到社区；
-
硬件交互赛道可用演示视频替代在线体验（视频请上传第三方平台后附公开链接）。
4. TRAE 实践过程
-
开发流程概览
- 需求分析与技术选型 ：与TRAE对话确认需求，确定使用 Vite + React + TypeScript 技术栈，配合 Zustand 状态管理和 Tailwind CSS 样式
- 项目初始化 ：TRAE自动创建项目结构，包括配置文件、类型定义、工具函数等
- 核心功能开发 ：依次实现首页、梗库页、抽梗页、两仪区、背景投稿区和管理员面板
- 问题排查与优化 ：修复弹窗按钮无反应、数据持久化、用户唯一性等问题 关键步骤截图
（以下为步骤描述，实际发帖时请附上截图）
-
附开发关键步骤截图（不少于 3 张）；
截图1：项目初始化
-
使用 npm create vite@6.5.0 . – --template react-ts 创建项目，TRAE自动配置 tailwind.config.js、vite.config.ts、tsconfig.json 等文件
-
截图2：核心组件开发，创建梗库页组件，实现标签筛选和卡片展示，创建抽梗动画组件，实现旋转抽奖效果 -
截图3：用户系统实现-
实现设备指纹识别，确保一个设备一个用户
-
实现匿名用户系统，自动生成文学风格昵称
-
-
附关键任务对话的 Session ID（不少于 3 个），用于证明作品由 TRAE 开发完成。
- Session ID :.304997640187315:99e1ee9725340b2db5d9c778447e5aab_6a4d99755984d2e30258afa6.6a54388cbde55abe065b776c.6a54388a50fbd69f1ee7be59:Trae CN.T(2026/7/13 08:59:56)
- Session ID : .304997640187315:fe27d1c3ce9851a236e63a6da66fc38e_6a4d99755984d2e30258afa6.6a54511ebde55abe065b77d0.6a54511d50fbd69f1ee7be5a:Trae CN.T(2026/7/13 10:44:46)
- Session ID : .304997640187315:eae25236ad250091c04c44f31aadfd27_6a4d99755984d2e30258afa6.6a5455a0bde55abe065b7837.6a5455a050fbd69f1ee7be5b:Trae CN.T(2026/7/13 11:04:00)
5. 对应的报名审核通过的帖子链接
生活娱乐 + 同人关系梗库 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区