以下是一份整体性、聚焦核心功能且易于快速启动的应用方案设计文档,包含了技术选型、架构设计和分阶段实施方案。你可以根据团队具体情况进行裁剪或调整。
一、项目概览
项目名称:AI 驱动的王者荣耀职业选手追星应用
核心功能:
- IP 选择:用户首次进入应用时选择喜爱的职业选手,其后的聊天与创作均与该选手的人设绑定。
- AI 聊天:基于微调的大语言模型,结合 memobase 做长期记忆和用户个性化。
- AI 创作:使用第三方内容生成 API(图像、视频),内置模板简化用户创作流程。
- 历史记录:展示用户已创作内容的历史记录,便于查看与回顾。
- 用户成长体系:通过使用 AI 功能或购买会员提升用户等级,获得差异化的奖励。
- 用户设置:一些个人与系统的设定选项(语言、通知、隐私等)。
- 管理后台:包括用户管理、IP 管理、内容模版管理、用户等级奖励管理等。
目标:
- 快速迭代、简化系统,实现核心功能的良好效果;
- 最大化利用现有技术框架,减少重复开发;
- 为未来的扩展(移动端、更多 AI 模型接入)做好准备。
二、整体技术选型
-
前端
- Web 应用框架:Next.js
- 理由:支持 SSR/SSG、内置路由、生态成熟,利于 SEO。
- UI 框架 & 组件库:Tailwind CSS + shadcn/ui + 21st.dev
- 理由:Tailwind 便于快速样式开发;shadcn/ui 与 21st.dev 提供了常用组件,可灵活定制,减少重复 UI 编码。
- 状态管理:Zustand + persist middleware
-
移动应用
- 开发框架:Expo(React Native)
- 理由:React 技术栈与 Web 共通,能大幅度复用业务逻辑与组件风格;
- Expo 提供一站式打包与工具链,便于小团队维护。
-
后端服务
- 数据库 & 认证:Supabase
- 理由:开箱即用的 Postgres 数据库、内置 Auth、实时订阅等功能,可快速完成 MVP 级别后端;
- 用户系统:better-auth
- 理由:可与 Supabase 或其他身份验证方式集成,提供常见的登录注册流程;
- 缓存服务:Redis
- 理由:用于存储热门或频繁访问数据(如 IP 配置、用户会话缓存、AI 聊天上下文)以降低数据库压力。
-
容器化与部署
- 容器编排:Kubernetes
- 理由:后期可扩展至多服务;若初期规模小也可暂用 Docker Compose,后续升级。
- 镜像仓库:Docker Hub
- 域名解析:Cloudflare
- 理由:提供快速 DNS 解析、防护及 CDN 加速。
-
AI 相关
- 长期记忆与用户个性化:memobase
- 理由:可记录用户对话上下文及偏好,实现记忆型人设及个性化。
- AI 创作:第三方内容生成 API(如 Stable Diffusion、Midjourney、Runway 等),根据实际授权和付费情况选择。
- 理由:减少自行训练/部署的成本,适用小团队初期快速启动。
三、系统架构与数据流
下图为简化的架构示意(文字描述):
┌──────────────────┐ ┌─────────────────┐
│ Web Client │ │ Mobile App │
│ (Next.js + UI) │ │ (Expo) │
└──────────────────┘ └─────────────────┘
│ │
└───────── HTTP/HTTPS──────────┘
(GraphQL/REST)
┌───────────────────────┐
│ API Gateway │
│ (Supabase functions) │
└───────────────────────┘
/ │ \
┌───────────────────┐ │ ┌───────────────┐
│ Database │ │ │ Redis Cache │
│ (Supabase PG) │ │ └───────────────┘
└───────────────────┘ │
│
┌───────────────┐
│ AI Services │
│(memobase + LLM│
│ + Content Gen)│
└───────────────┘
- Web 端 / Mobile 端:
- 负责展示界面与交互,通过 HTTP/HTTPS 请求与后端通信。
- API 层(Supabase Functions 或服务器端):
- 提供统一的接口,对接数据库与缓存、AI 服务等;
- 完成鉴权、接口聚合、业务逻辑校验。
- 数据库(Postgres / Supabase):
- 存储用户信息、创作历史、用户等级、模版配置信息等。
- Redis Cache:
- AI Services:
- 长期记忆 & 用户个性化:memobase + LLM;
- 内容生成:第三方 API(图像/视频)。
- 可由 Supabase Functions 调用或由独立微服务容器进行调用。
四、功能模块拆解
-
IP 选择
- 用户进入应用时,拉取可选 IP 列表(来自数据库的职业选手列表);
- 用户选择后,写入前端状态(Phase1 使用 mock 数据,后续使用数据库存储),后续所有 AI 聊天 & 内容生成基于此 IP 配置。
-
AI 聊天
- 消息上下文管理:前端可采用 Zustand 存储当前会话上下文,后端可与 memobase 交互进行长期记忆。
- 人设与个性化:在调用微调模型时,将 IP 的背景资料与用户的过往上下文传入 prompt;
- 前端交互:类似即时聊天窗口,用户可以输入文本,得到模型回复。
-
AI 创作
- 内容模版:后端/管理后台可配置不同创作场景:合影、写真等;
- 前端交互:用户在界面上选择模板类型、上传必要素材(如头像),触发第三方生成 API;
- 生成流程:后端将用户输入与 IP 信息合并,调用图像/视频生成 API,获取结果后返回前端。
- 历史记录:将生成结果及其必要元数据(时间、使用的模板等)存入数据库,以便后续查看。
-
用户成长体系
- 用户在使用 AI 聊天或 AI 创作时,计入经验值(Exp),当 Exp 达到阈值自动升级;
- 会员购买亦可增加 Exp;
- 不同用户等级可解锁更多免费创作次数、或特殊合影模板等;
- 具体奖励规则由管理后台配置,保存在数据库中。
-
用户设置
- 主要包括:语言切换、消息推送开关、IP 切换、账号信息等。
- 初期可仅实现核心设置,后续迭代扩充。
-
管理后台
- 用户管理:查看用户列表、封禁/恢复;
- IP 管理:配置各职业选手的简介、AI 聊天模型所需的人设参数(如 prompt 模板、OpenAI API Key 等);
- 模版管理:配置合影、写真等的参数和生成规则;
- 用户等级奖励管理:设置等级与对应的权益,例如:月度免费生成次数、独家模板等;
- 采用同样的技术栈(Next.js + Tailwind + shadcn/ui),简化维护。
五、分阶段实施计划
阶段一:前端原型 + Mock 数据
目标:快速搭建前端页面、使用假数据和本地状态管理(Zustand + persist)模拟应用流程,让核心用户/团队测试并反馈。
-
技术要点
- Next.js 项目搭建,集成 Tailwind CSS、shadcn/ui、21st.dev;
- 实现基础的路由:
/
:应用首页或 IP 选择页
/chat
:AI 聊天页(此时仅 mock 对话数据)
/creation
:AI 创作页(此时仅 mock 生成结果)
/history
:历史记录页(以 mock 数据展示)
/profile
:用户设置页
- 状态管理:Zustand(persist 到 localStorage 实现用户选择 IP 等信息的持久化)
- 单点登录/用户体系在此阶段可以省略,或仅使用 fake 用户数据
-
Mock 数据示例
- 用户信息:
{ userId: 1, username: "TestUser", level: 1 }
- IP 列表:
[ { id: 1, name: "职业选手A"}, ... ]
- 聊天记录:
[{ userMsg: "你好", ipReply: "你好,我是XX选手" }, ...]
- 生成结果:
[{ url: "https://example.com/image.png", template: "合影" }, ...]
-
验收标准
- 前端页面可以完整地走一遍核心功能的流程(选择 IP => 聊天 => 创作 => 查看历史),尽管都是 mock。
- 收集用户体验反馈,为功能逻辑和界面设计做下一步优化。
阶段二:管理后台 & 用户体系
目标:在已有前端的基础上,增加后台管理和基本的真实用户系统。
-
管理后台
- 使用 Next.js + Tailwind + shadcn/ui 快速搭建;
- 功能:
- 用户列表(从 Mock 切换为真实数据库后端或 Supabase)
- IP 管理:增删改查
- 模版管理:增删改查
- 用户等级奖励配置
- 部署方式与主站一致,也可使用同一项目内的多路由结构进行隔离(例如
/admin
路由)。
-
用户体系
- 引入 better-auth 或直接使用 Supabase Auth;
- 支持注册、登录、退出功能;可选邮箱验证或第三方(GitHub/Google)登录;
- 前端集成:在 Zustand 的用户状态部分替换为真实的 Auth 状态;
- 拿到真实 userId 后,把用户相关的数据(聊天记录、生成历史、等级、Exp)存储在数据库中。
-
数据存储
- 由 Mock 切换到 Supabase/Postgres 数据库;
- 保证在管理后台创建的 IP 信息、模板信息能够在前端被读取使用。
-
验收标准
- 前端用户可注册/登录后进行聊天、创作;
- 管理员可在后台看到新注册用户,并可配置新的 IP 与模板;
- 用户在数据库中可查到相应的成长等级、生成历史。
阶段三:后端服务 & 完成 Web 站点
目标:完善后端逻辑,接入 AI 服务,完成与前端的全面联调,发布可用版本的 Web 站点。
-
后端开发
- API:
- 若使用 Supabase Functions,集中在
api
文件夹编写函数;
- 或使用自建 Node.js / NestJS / Next.js API Routes 作为后端逻辑层;
- 业务逻辑:
- IP 相关:从数据库读取 IP 配置 + 人设信息 => 拼接到 AI Prompt;
- AI 聊天:集成 memobase + LLM (如 OpenAI ChatGPT API);
- AI 创作:集成第三方图片/视频生成接口;
- 缓存:
- 使用 Redis 缓存一些高频访问数据(热门 IP、模板),以及用户的会话上下文,减少重复调用耗时。
-
AI 接口集成
- memobase:存储用户的长期对话上下文、个性化信息;
- 外部内容生成:调用各类图像或视频生成 API;
- 调用链:前端 -> API Gateway -> 后端服务 -> AI 服务;
- 费用/配额控制:需要在后端或管理后台对调用次数进行限制。
-
Web 正式上线
- 域名解析使用 Cloudflare;
- 镜像打包并推送到 Docker Hub;
- 部署到 Kubernetes 集群或其他容器环境;
- 使用 Cloudflare(或其他负载均衡)来指向 Kubernetes Ingress。
-
验收标准
- 用户能够在真实环境中进行完整体验:注册、登录、选择 IP、AI 聊天、AI 创作、查看历史、成长升级等;
- 管理后台能正常管理用户/IP/模板;
- 性能与稳定性满足 MVP 需求。
阶段四:移动端(Expo)
目标:在完成 Web 功能后,基于相同的前端逻辑与组件,开发移动应用客户端。
-
组件复用
- 将业务逻辑和部分 UI 组件从 Web 端抽象为可复用逻辑,移动端可复用 Zustland 状态管理与部分服务调用逻辑;
- 样式方面,部分基于 React Native 的重新适配,但 Tailwind React Native 也有对应解决方案(如
twrnc
)。
-
功能对齐
- 保持与 Web 端核心功能一致,包括 IP 选择、AI 聊天、AI 创作、历史记录、用户设置;
- 管理后台通常不必上移动端。
-
打包与发布
- 使用 Expo 的 EAS(Expo Application Services)进行打包;
- 发布到 App Store / Google Play;也可先进行 TestFlight / Internal Testing。
-
验收标准
- 移动端在主要平台(iOS/Android)可运行,功能流程与 Web 一致;
- 界面适配合理,交互流畅。
六、数据库与核心数据结构示例
示例(基于 Postgres 设计):
- users
CREATE TABLE users (
id BIGSERIAL PRIMARY KEY,
username VARCHAR(50) UNIQUE NOT NULL,
email VARCHAR(100) UNIQUE,
password_hash VARCHAR(255),
level INT DEFAULT 1,
exp INT DEFAULT 0,
created_at TIMESTAMP DEFAULT NOW()
);
- ips(职业选手 IP 信息)
CREATE TABLE ips (
id BIGSERIAL PRIMARY KEY,
name VARCHAR(100) NOT NULL,
description TEXT,
prompt_data JSONB, -- 存放AI提示词等
created_at TIMESTAMP DEFAULT NOW()
);
- creations(用户 AI 创作历史)
CREATE TABLE creations (
id BIGSERIAL PRIMARY KEY,
user_id BIGINT REFERENCES users(id),
ip_id BIGINT REFERENCES ips(id),
creation_url TEXT NOT NULL,
template VARCHAR(50),
metadata JSONB, -- 可存放模型参数、生成参数
created_at TIMESTAMP DEFAULT NOW()
);
- templates(可编辑的创作模板)
CREATE TABLE templates (
id BIGSERIAL PRIMARY KEY,
name VARCHAR(50) NOT NULL,
description TEXT,
config JSONB, -- 具体生成所需参数
created_at TIMESTAMP DEFAULT NOW()
);
- user_levels(用户等级奖励定义)
CREATE TABLE user_levels (
level INT PRIMARY KEY,
exp_required INT,
rewards JSONB -- 如每月可免费生成次数,是否有VIP特权等
);
七、部署与运维
-
CI/CD 流程
- 建议在 GitHub / GitLab Actions 中,自动构建 Docker 镜像并推送到 Docker Hub;
- 触发 Kubernetes 环境的自动部署更新。
-
Kubernetes 资源
- Deployment:
web-frontend
, api-backend
(如有独立部署),redis
, supabase
(或外部托管)
- Service & Ingress:对外暴露 80/443 端口,配合 Cloudflare DNS。
-
监控 & 日志
- 建议使用 Prometheus + Grafana 监控容器指标;
- 日志可集中到 ELK 或其他云端日志平台,方便排查问题。
-
费用与扩容
- 初期可用 Supabase 免费/小型方案,后期用户量上来再升级;
- Redis 可托管于第三方服务(如 Upstash)或自建;
- Kubernetes 可先在小规模集群/云主机上实践。
八、关键风险与应对
- AI 模型使用门槛 / 费用:
- 建议先与第三方 API 提供商谈妥配额和费用,或在 MVP 阶段限制调用次数以控制成本。
- 版权与隐私:
- 职业选手本身的肖像/形象版权,需要与俱乐部或选手相关方沟通;
- AI 生成内容可能涉及版权争议,需有免责声明或用户协议。
- 技术选型复杂度:
- Kubernetes 在初期可能“过度”,可视团队规模考虑先用简单的 Docker Compose 部署;
- 用户体验:
- AI 聊天与生成速度、稳定性需要重点关注,避免让用户等待过久。
- 阶段目标过于分散:
- 要确保在每一阶段都能快速试错迭代,而不是一次性做完后期才发现问题。
九、总结
本方案旨在快速迭代并尽早获得用户反馈。具体要点包括:
- 前端优先:先用 Mock 数据跑通整体逻辑,让测试人员/小范围用户体验;
- 管理后台与用户系统:在第二阶段统一上,建立最基础的后端数据管理;
- AI 集成:第三阶段全面接入 AI 聊天与内容生成,优化性能与体验;
- 移动端:最后通过 Expo 进行多端复用,进一步扩大用户覆盖面。
通过上述分阶段实施和合理的技术组合(Next.js + Tailwind + Zustland + Supabase + Redis + K8s/容器部署 + AI 服务),能最大化利用成熟方案并避免重复造轮子。同时在初期保持功能的简洁聚焦,后续可基于用户反馈迭代扩展,从而在短时间内打造出效果出色、可持续演进的 AI 驱动追星应用。