day13-Codex开发口播数字人小程序之-需求设计-UI示意图设计

今日内容

1 口播数字人小程序项目演示

# 1 微信小程序项目
	-运行在微信小程序中的，不需要额外安装
    -一端前端：微信小程序
    -二端后端：Python的Django框架
# 2 演示

2 口播数字人小程序项目规划

2.1 回顾项目开发流程

######### 标准企业中软件开发流程#####################
# 1 公司立项： 口播数字人小程序微信小程序

# 2 产品经理设计：项目需求，功能
	-需求分析书:Codex生成---》需要微调
	-使用工具，软件：墨刀，figma,制作  原型图--》黑白的低保真原型图/彩色的高保真原型图--》展示项目功能和流程
    
# 3 UI部门设计软件界面
	-参照原型图设计---》UI设计图
    -美工：PS软件，画图，切图
    
    
# 4 分任务，部门开发：前端和后端---》Codex完成
	-在分部门开发之前--》有个架构说明书做指导
    
	-前端：我们看到的页面--》拼多多小程序
    -后端：对前端功能的数据和业务支撑
	-后端开发：后端--》项目架构设计会
    	-订单组
        -用户组
    -前端开发：小程序
    	-订单组
        -用户组
        
# 5 测试：软件测试，联调

# 6 运维部门：上线
	-服务器---》互联网用户都可以使用
    
# 7 运营

    

3 口播数字人小程序-需求分析

# 1 注册功能
# 2 登录功能
# 3 上传录音:本地上传和录音
# 4 上传视频：本地上传和录视频
# 5 合成口播：
	-可以直接对接第三方API：数字人服务都支持---》花钱购买
    -我们对接Coze工作流：
    	-免费：有水印
        -收费：没有水印
# 6 查看口播历史
# 7 个人中心

3.1 需求文档-codex生成

# 1 使用Codex生成，借助于某个产品经理的 skill
# 2 创建一个空文件夹，以后项目都写在这里面
	-D:/shuziren
# 3 codex管理项目：如下图

# 4 我们需求已经确定好了
# 产品经理 ---》设计这个项目的需求
	-要做哪些功能
    	-1 注册功能：通过邮箱，用户名，密码注册
        -2 登录功能：邮箱，密码登录
        -3 上传录音
        -4 上传视频	
        -5 合成口播
        -4 查看口播历史：看到之前的生成记录
        -5 个人中心：显示用户名，退出功能
        
        -6 其他：同学作为扩展
        
# 5 编写提示词，生成需求文档--》Codex 比较重--》生成时候很慢
########注意，每次生成的需求文档肯定是不一样的，只要功能是我们的需求就没问题，功能跟我们需求有差距，需要自己修改或者让Codex修改######################
'''Codex提示词
1 先自己创建文件夹和文件速度快
2 使用skill
3 思考选轻度
4 时间会很久，如果中断了，再输入框输入  继续  回车，让他继续
'''
你是一个工作经验丰富的产品经理，擅长编写软件需求分析书，现在帮我设计一款口播数字人微信小程序，分为微信小程序端(使用微信原生开发)和后端API(后端使用Django4+mysql8)，帮我生成需求文档，要求实现如下功能:
    1 注册功能：使用用户名，邮箱，密码，确认密码注册，不使用微信注册和登录
    2 登录功能：使用邮箱和密码登录
    3 上传音频素材功能：直接上传音频或录音上传
    4 上传视频素材功能：直接上传视频或录制视频
    5 生成口播功能：
    	5.1 用户选择历史上传的音频和视频，调用Coze口播数字人工作流进行合成
        5.2 不使用celery异步查询结果，每次进入口播历史页面，后端对未完成口播进行查询并下载
    6 查看生成口播历史功能：显示历史生成的口播视频，可以下载，分页加载
    7 查看历史上传音频和正脸视频功能：用户上传的音频和视频本地存储，可查看和删除，分页加载
    8 个人中心：显示用户名和默认头像，APP版本等信息，退出按钮
    9 用户上传的音频，视频素材；合成的成片保存在项目media文件夹下，不使用第三方存储
只输出需求文档，不要读取文件，不干无关操作，仅基于我的文字描述生成文档，写入到当前项目路径下01-需求分析/项目需求.md 中

4 UI示意图

# 1 美工上场---》设计软件的界面，图片等等

# 2 我们借助于Codex帮我们生成界面图---》可能不会完全符合我们的需求---》需要多次调整
	- 1 纯提示词生成
    - 2 手绘图生成
    - 3 图片生成
    
# 3 使用Codex生成UI示意图
	三种生成方式是可以结合起来用
    
# 4 微调，我们借助于figma

4.1 提示词生成---以后任何项目都可以用它

你是一位资深设计师，你非常了解微信小程序的设计风格，拥有丰富的全栈开发经验和极高的审美，擅长设计现代风格的微信小程序端界面

## 我的微信小程序需求是：
我要做一款口播数字人微信小程序，你根据项目需求分析书：01-需求分析/项目需求.md，设计出界面

## 我的要求
1.页面元素高级美观，遵循移动端设计规范，页面设计简洁大气，尽量干净。
2.所有数据使用假数据，所有页面都可以点击交互。
3.图标使用CDN方式引入。
4.把设计图生成在  02-UI设计 目录下，每个子页面都是一个但单独的html，css和js都写在一个文件中。
5 方便在一个页面展示全，把所有页面，平铺展示在index.html中，不增加其它任何额外内容。
6.界面尺寸模拟IPhone17 Pro，让页面圆角化，使其更像真实微信小程序界面。
7.不要带网络，时间,状态栏,手机边框，灵动岛等。
8.不要再创建文件夹，生成的所有页面，直接存放在 02-UI设计 目录下。
请按以上要求生成完整的高保真原型图(html)

4.2 html 示意图微调

# 1 方式一：跟codex交互
	-帮我修改首页，删除底部最近合成内容和列表

# 2 方式二：我们自己调
	-
    
# 原则：加功能，用交互，删东西，我们自己调

4.2 手绘图生成

# 1 提示词生成---》界面布局，颜色，功能按钮---》提示中没有描述特别清楚---》好多是大模型自己按自己的想法生成的

# 2 我们想按自己想法做

# 3 提示词 + 手画一个界面图

我想做一个英语单词词汇量测试的小程序，根据这张手绘图，帮我生成首页UI设计，以html形式输出,尽量美观好看一些，你可以有自己的想法加入改动，帮我生成在当前项目目录下。

4.3 图片生成

# 1 使用提示词，每次生成的界面样式可能不一样
# 2 如果我们要控制一样--》严格--》使用图片生成
# 3 示意图哪里来？
	1 截图别人的软件截图使用
    2 找专业美工设计好---》使用设计图，让Codex生成
# 4 提示词：
	我想做一个AI换背景的小程序，严格根据这参照图图，帮我生成页面，以html形式输出,不要有自己的改动，帮我生成在当前项目目录下。

4.4 三个可以合三为一

# 提示词+手绘图(可有可无)+图片---》公共生成
# 提示词 + 参照图---》生成
	-参照这种设计风格
    
    
# 作业:
	-用方式一：提示词+我的示意图风格生成
   

5 项目架构设计

5.1 Django解释

# 1 Python 编程语言，可以写软件---》用来写 口播小程序后端

# 2 使用Python编写后端，需要使用一些框架：Web框架---》对外提供API接口
	-Django--》Python 界用来写web应用的框架
        -Django
        -flask
        -fastapi
        。。。。
    
# 3 框架：
	提供了很多基础模块和功能--》我们只需要在固定的位置写python代码，就能实现一个web软件

# 4 开发在本地：使用django开发--》上线要把开发完的django项目，放在服务器上--》所有互联网用户都可以调用

# 5 如果有同学想学django，网上找资料系统学习一下
	-我不建议【比较难】

6 扩展

# 1 Codex开发Django后端--》解释了--》大家不需要去学习，比较难
# 2 Codex开发微信小程序端--》我们不需要写代码，但是大家如果懂小程序开发流程，会更好
	# 如果大家想学习---》一套资料给大家
        视频：
            https://www.bilibili.com/video/BV1WgQdYNERe/
        笔记：
            https://pan.baidu.com/s/1VTd6S3rJKQ42MRFPsFwaZQ 提取码: bpxa
            
# 3 我们在Coze上创建口播工作流--》下次课会讲
	-大家可以尝试做一下