AI动态壁纸生成，支持PC、ipad、phone
ai-imagebeta

AI动态壁纸生成，支持PC、ipad、phone

这个项目的核心价值就是让AI技术 democratize 动态壁纸创作，让每个普通用户都能轻松获得专业级的个性化动态壁纸，从而解决传统动态壁纸内容有限、创作门槛高、适配困难的问题。

「
作者
「云析」
43 浏览2025年10月上线
变现方式订阅制 (SaaS)
⚡

技术栈

Next.js
Supabase
TypeScript
Stripe
OpenAI API

DreamWall AI - MVP开发计划文档

  • ▸版本: 1.0
  • ▸日期: 2025年10月10日
  • ▸基于PRD版本: 1.1
  • ▸基于TDD版本: 2.1

#1. 项目概述

1.1 MVP目标

验证用户是否愿意为"AI一键生成个性化动态壁纸"这一核心价值付费，所有功能都为此目标服务。

1.2 核心价值主张

  • ▸一键生成：用户通过简单文字描述生成动态壁纸
  • ▸设备适配：自动适配不同设备分辨率
  • ▸高质量输出：基于SDXL + SVD的AI模型
  • ▸付费验证：通过点数系统验证付费意愿

1.3 技术架构

  • ▸前端: Next.js 15 + TypeScript + Tailwind CSS
  • ▸后端: Vercel Serverless Functions + Supabase
  • ▸AI模型: SDXL (文生图) + SVD (图生视频)
  • ▸部署: Vercel + Supabase + GPU云服务

#2. 项目前缀配置

2.1 前缀策略

所有页面路由和API端点统一使用 dreamwall-ai 前缀：

  • ▸页面路由: /[locale]/dreamwall-ai/*
  • ▸API端点: /api/dreamwall-ai/*
  • ▸配置文件: 通过环境变量和配置文件统一管理

2.2 前缀配置文件

// lib/config.ts
export const APP_CONFIG = {
  PREFIX: 'dreamwall-ai',
  API_BASE: '/api/dreamwall-ai',
  ROUTE_BASE: '/dreamwall-ai',
  // 其他配置...
}

#3. MVP功能模块

3.1 核心功能优先级

| 功能模块 | 优先级 | 描述 | 预计工期 | |---------|--------|------|----------| | 项目基础架构 | 最高 | 前缀配置、路由结构、基础组件 | 1天 | | 用户认证系统 | 最高 | 注册/登录、用户管理 | 2天 | | AI生成核心 | 最高 | 文本输入、风格选择、生成流程 | 3天 | | 设备适配系统 | 最高 | 设备选择、分辨率处理 | 1天 | | 预览下载功能 | 最高 | 结果预览、文件下载 | 1天 | | 支付系统 | 高 | 点数购买、Stripe集成 | 2天 | | 用户中心 | 中 | 历史记录、账户管理 | 1天 | | 部署测试 | 高 | 生产环境部署、端到端测试 | 2天 |

#4. 分阶段开发计划

阶段1: 项目基础架构搭建 (1天)

4.1.1 任务清单

  • ▸[ ] 配置项目前缀系统
  • ▸[ ] 设置国际化路由结构
  • ▸[ ] 配置Supabase连接
  • ▸[ ] 设置环境变量管理
  • ▸[ ] 创建基础组件库

4.1.2 技术实现

// 路由结构
/[locale]/dreamwall-ai/          # 首页
/[locale]/dreamwall-ai/auth/     # 认证页面
/[locale]/dreamwall-ai/account/  # 用户中心
/[locale]/dreamwall-ai/pricing/  # 定价页面

// API结构
/api/dreamwall-ai/generate       # 生成任务
/api/dreamwall-ai/tasks/         # 任务管理
/api/dreamwall-ai/payments/      # 支付相关

4.1.3 验收标准

  • ▸[ ] 所有路由正确添加前缀
  • ▸[ ] 国际化切换正常工作
  • ▸[ ] Supabase连接成功
  • ▸[ ] 环境变量配置正确

阶段2: 用户认证系统 (2天)

4.2.1 任务清单

  • ▸[ ] 实现用户注册/登录页面
  • ▸[ ] 集成Supabase Auth
  • ▸[ ] 创建用户数据库表
  • ▸[ ] 实现用户状态管理
  • ▸[ ] 添加认证中间件

4.2.2 数据库设计

-- 用户表
CREATE TABLE "users" (
  "id" uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  "email" varchar UNIQUE NOT NULL,
  "credits" integer DEFAULT 10,
  "stripe_customer_id" VARCHAR,
  "created_at" timestamp DEFAULT now(),
  "updated_at" timestamp DEFAULT now()
);

-- 用户配置表
CREATE TABLE "user_profiles" (
  "id" uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  "user_id" uuid REFERENCES users(id) ON DELETE CASCADE,
  "display_name" varchar,
  "preferred_language" varchar DEFAULT 'en',
  "created_at" timestamp DEFAULT now()
);

4.2.3 验收标准

  • ▸[ ] 用户可以成功注册和登录
  • ▸[ ] 用户状态正确管理
  • ▸[ ] 数据库表创建成功
  • ▸[ ] 认证中间件正常工作

阶段3: AI生成核心功能 (3天)

4.3.1 任务清单

  • ▸[ ] 实现文本输入界面
  • ▸[ ] 创建视觉风格选择组件
  • ▸[ ] 设计生成任务数据库表
  • ▸[ ] 实现生成进度显示
  • ▸[ ] 创建AI工作节点接口

4.3.2 数据库设计

-- AI生成任务表
CREATE TABLE "generation_tasks" (
  "id" uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  "user_id" uuid REFERENCES users(id) ON DELETE CASCADE,
  "prompt" text NOT NULL,
  "style" varchar NOT NULL,
  "device_type" varchar,
  "resolution" varchar,
  "status" varchar DEFAULT 'pending',
  "progress" integer DEFAULT 0,
  "result_url" varchar,
  "error_message" text,
  "created_at" timestamp DEFAULT now(),
  "updated_at" timestamp DEFAULT now()
);

-- 任务状态枚举
-- pending, processing, completed, failed

4.3.3 AI工作流程

  1. ▸用户提交生成请求
  2. ▸创建任务记录 (status: pending)
  3. ▸AI工作节点接收任务
  4. ▸执行SDXL生成静态图
  5. ▸执行SVD生成动态视频
  6. ▸上传结果到Supabase Storage
  7. ▸更新任务状态 (status: completed)

4.3.4 验收标准

  • ▸[ ] 用户可以输入描述和选择风格
  • ▸[ ] 生成任务正确创建
  • ▸[ ] 进度显示正常工作
  • ▸[ ] AI工作节点可以处理任务

阶段4: 设备适配和预览下载 (2天)

4.4.1 任务清单

  • ▸[ ] 实现设备选择界面
  • ▸[ ] 创建分辨率适配逻辑
  • ▸[ ] 实现结果预览功能
  • ▸[ ] 添加文件下载功能
  • ▸[ ] 创建下载历史记录

4.4.2 设备配置

const DEVICE_CONFIGS = {
  'iphone-15-pro': { width: 1179, height: 2556, type: 'iOS' },
  'samsung-s24': { width: 1080, height: 2340, type: 'Android' },
  'ipad-pro': { width: 2048, height: 2732, type: 'iOS' },
  'desktop-4k': { width: 3840, height: 2160, type: 'PC' },
  'desktop-fhd': { width: 1920, height: 1080, type: 'PC' }
}

4.4.3 验收标准

  • ▸[ ] 设备选择界面正常工作
  • ▸[ ] 分辨率适配正确
  • ▸[ ] 预览功能正常显示
  • ▸[ ] 文件下载成功

阶段5: 支付系统集成 (2天)

4.5.1 任务清单

  • ▸[ ] 集成Stripe支付
  • ▸[ ] 创建定价页面
  • ▸[ ] 实现点数购买流程
  • ▸[ ] 添加支付状态处理
  • ▸[ ] 创建订阅管理

4.5.2 支付流程

  1. ▸用户选择点数包
  2. ▸创建Stripe Checkout Session
  3. ▸用户完成支付
  4. ▸Stripe Webhook通知
  5. ▸更新用户点数

4.5.3 数据库设计

-- 支付记录表
CREATE TABLE "payments" (
  "id" uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  "user_id" uuid REFERENCES users(id),
  "stripe_payment_intent_id" varchar UNIQUE,
  "amount" integer NOT NULL,
  "credits_purchased" integer NOT NULL,
  "status" varchar DEFAULT 'pending',
  "created_at" timestamp DEFAULT now()
);

-- 订阅表
CREATE TABLE "subscriptions" (
  "id" uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  "user_id" uuid REFERENCES users(id),
  "stripe_subscription_id" VARCHAR UNIQUE,
  "status" VARCHAR,
  "current_period_end" TIMESTAMP,
  "created_at" timestamp DEFAULT now()
);

4.5.4 验收标准

  • ▸[ ] Stripe集成成功
  • ▸[ ] 支付流程完整
  • ▸[ ] 点数正确更新
  • ▸[ ] Webhook处理正确

阶段6: 用户中心和部署 (3天)

4.6.1 任务清单

  • ▸[ ] 创建用户中心页面
  • ▸[ ] 实现历史记录功能
  • ▸[ ] 添加账户设置
  • ▸[ ] 配置生产环境
  • ▸[ ] 进行端到端测试

4.6.2 验收标准

  • ▸[ ] 用户中心功能完整
  • ▸[ ] 历史记录正确显示
  • ▸[ ] 生产环境部署成功
  • ▸[ ] 所有功能测试通过

#5. 技术实现细节

5.1 环境变量配置

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# Stripe
STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_webhook_secret

# AI服务
AI_WORKER_ENDPOINT=your_ai_worker_url
AI_WORKER_API_KEY=your_ai_worker_key

# 应用配置
NEXT_PUBLIC_APP_PREFIX=dreamwall-ai
NEXT_PUBLIC_APP_URL=your_app_url

5.2 API端点设计

// 生成相关
POST /api/dreamwall-ai/generate
GET  /api/dreamwall-ai/tasks
GET  /api/dreamwall-ai/tasks/[id]

// 用户相关
GET  /api/dreamwall-ai/user/profile
PUT  /api/dreamwall-ai/user/profile

// 支付相关
POST /api/dreamwall-ai/payments/create-checkout-session
POST /api/dreamwall-ai/payments/webhook

5.3 错误处理策略

  • ▸统一的错误响应格式
  • ▸用户友好的错误提示
  • ▸详细的日志记录
  • ▸自动重试机制

#6. 测试计划

6.1 单元测试

  • ▸组件功能测试
  • ▸API接口测试
  • ▸工具函数测试

6.2 集成测试

  • ▸用户认证流程
  • ▸AI生成流程
  • ▸支付流程

6.3 端到端测试

  • ▸完整用户旅程
  • ▸跨浏览器兼容性
  • ▸移动端适配

#7. 部署计划

7.1 开发环境

  • ▸Vercel Preview Deployments
  • ▸Supabase Development Project
  • ▸本地AI工作节点

7.2 生产环境

  • ▸Vercel Production
  • ▸Supabase Production
  • ▸GPU云服务部署

7.3 监控和日志

  • ▸Vercel Analytics
  • ▸Supabase Logs
  • ▸错误监控服务

#8. 成功指标

8.1 技术指标

  • ▸[ ] 页面加载时间 < 2秒
  • ▸[ ] API响应时间 < 500ms
  • ▸[ ] 生成成功率 > 95%
  • ▸[ ] 系统可用性 > 99%

8.2 业务指标

  • ▸[ ] 用户注册转化率
  • ▸[ ] 首次付费转化率
  • ▸[ ] 用户留存率
  • ▸[ ] 平均生成次数

#9. 风险评估

9.1 技术风险

  • ▸AI模型性能不稳定
  • ▸GPU服务成本过高
  • ▸第三方服务依赖

9.2 业务风险

  • ▸用户付费意愿不足
  • ▸竞品压力
  • ▸内容合规问题

9.3 缓解措施

  • ▸多模型备选方案
  • ▸成本监控和优化
  • ▸用户反馈收集

#10. 下一步行动

10.1 立即开始

  1. ▸配置项目前缀系统
  2. ▸设置Supabase项目
  3. ▸创建基础路由结构

10.2 本周目标

  • ▸完成阶段1和阶段2
  • ▸建立开发环境
  • ▸实现用户认证

10.3 本月目标

  • ▸完成所有MVP功能
  • ▸部署到生产环境
  • ▸开始用户测试

此文档将根据开发进度持续更新，确保项目按计划推进。