从零实现第一个项目
这是我做的第一个完整前后端项目，距离做完已经过去一个多月。 当时我的基础：只会 Python 和 MySQL，Vue、FastAPI、Redis 这些都算是边做边学。没有完整项目经验，对前后端联调、权限、token、数据库设计了解不多。 做这个项目初衷：不想只写书本上的 CRUD 例子，希望完整走完需求分析→数据库设计→后端接口→前端页面→联调 bug 全套流程，积累一份可以写进简历的实战作品。 项目历时一个多月，中途多次卡壳，也踩了很多新手常见的坑，在这里记录下整个过程，给同样初学的同学一点参考。
一、PRD文档：
PRD文档是干什么的:
PRD = 产品需求文档，核心就 3 件事：
写清楚做什么、不做什么：哪些功能要实现，哪些坚决不做，避免大家乱加需求
讲清楚业务逻辑、规则：按钮点了发生什么，表单怎么校验，角色权限，异常情况怎么处理
统一所有人认知：产品、UI、前端、后端、测试，所有人看同一份文档，理解一致
我们可以让WorkBuddy或者Kimi给我们生成一份PRD文档：
Ai提示词：
我想开发一个AI漫剧制作平台，要求能首先基于AI生成的小说，然后一步步制作出多镜头的AI视频漫剧短片。请我帮设计一下完整的制作流程思路，及给每个步骤推荐一些所需的优质国内大模型API及相关的主流技术栈要求，方便下一步生成项目产品PRD文档。
如果你觉的他给的方案满足你的需求，就可以进行下一步制作PRD文档。继续跟AI说基于上述内容帮我生成详细的PRD文档模板的md文档。
除了PRD文档，也有一些其他文档也可以让 ai 生成：
1.生成详细的PRD文档模板的md文档（按上述结构填充）
2.设计详细的数据库ER图的md文档（项目/分镜/角色/素材 等等表结构）
3.绘制详细的系统架构图（用mermaid语法生成可视化架构图）
4.生成详细的产品原型线框图的md文档（关键页面低保真原型）
5.生成详细的项目产品原型高保真页面描述清单的md文档（关键页面高保真原型）
6.生成详细的项目开发的API接口的md文档
7.生成详细的技术方案的md文档（针对MVP的技术实现方案）
根据自己的需要生成项目文档。
二、UI设计工具：
界面 UI 设计网站：https://stitch.withgoogle.com/
stitch生成ui界面提示词：
认真审核并理解所提供的“高保真页面描述清单”md文档内容，帮我设计一套web界面效果图，要求以中文界面 的方式输出，每个界面的布局与风格要求保持一致性
stitch添加ui界面提示词：
帮我再添加这几个页面：注册页，AI小说引擎，角色库与一致性管理，漫画生成器，视频生成引擎，配音工 坊，剪辑合成器，素材资源库，套餐购买页，用量统计页；要求“注册页”的 布局和风格 与“登录页”保持一致 性，其他的每一个界面的布局和风格 与“工作台”保持一致性。
在生成过程中遇到很多问题：
第一，页面是基于ai生成的可能不够完善，会缺少一些页面。
第二，千万不要随意撤回(重要)，因为这个网站可能一下会撤回很多步骤。遇到两三次都是撤回了7、8个以上的操作。导致几个已经删除了的页面又出现。也可能是网络原因
第三，登录/注册页，最好分开两个页面，要不就一定要写详细，要不然登录页，点击注册页面几乎没有变化，只有点击登录按钮变成了点击注册。
第四，让他帮忙添加我再添加这几个页面时，会出现侧边栏是英文的情况。（在添加提示词中可以强调用中文输出）
当然这个网站是外网的如果进不去
也可以找一些功能相同的网站让AI直接帮你生成ui界面
参考提示词（记得把风格迭代换成 生成ui界面）：
我们需要对当前业务的整体UI设计做一次风格迭代，我会给你几张参考设计的截图
请你仔细分析它的视觉风格，然后把这种风格应用到我当前的页面上
请重点还原这几个方面1. 配色：主色、辅助色、背景色、文字颜色
2. 字体：标题和正文的字号层级、粗细、对比
3. 问距与留白：模块之间、元素之间的呼吸感
4. 组件样式：按钮、卡片、导航栏的圆角、阴影、边框
5. 整体布局：参考它的排版结构来组织页面
2.1 Trae CN制作Vue前端
先安装框架Node和npm：
#验证 Node.js 版本：
node -v
# 验证 npm 版本：
npm -v
安装完框架后
打开Trae CN把文件导入（直接将文件拖入）
在导入的文件后输入：npm create vue@latest #创建vue3工程项目
如果报错可以输入这条命令：
#修改 PowerShell 脚本运行权限策略，仅当前登录电脑的用户生效
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
然后重新输入：npm create vue@latest，成功之后输入项目名称。选择需要安装的功能，一般只需要这两个
初始化之后会有三条指令依次输入
初始化完成后会出现本地访问地址，可以通过本机访问
前置步骤完成后，切换至SOLO模式
2.2 使用提示词开始创建前端
用之前在stitch做好的ui界面
提示词：
基于所提供的原型界面文件，以1:1的方式完全重构vue3项目源码，保证项目的布局，样式及交互功能的一致性
可以优化输入内容
2.3 Trae CN前端优化
先输入：npm run dev #启动前端服务
前端优化提示词
基于 \ 项目开发文档 \stitch_consistent_web_interface_design\comicforge_1\code.html 页面重构优化http://localhost:5173/login 页面
可以点击优化
基于一个页面美化别一个页面
好处是不会随意美化，会尽量保证跟前一个页面一样
三、功能实现
3.1 添加 技能 /frontend-design
先点击帮助文档
进入之后帮助文档之后，点击教程中的热门Skil推荐
在技能页面下载前端的 SKLL.md 技能
导入技能
点击设置，进入技能与命令，点击创建选择 全局/项目
把下载好的文件拖动到这里
之后就可以使用 /frontend-design 技能了
3.2 手机号注册完整业务
我们在做个人项目时一般只需要注册的账号和密码然后把数据放数据库，登录时进行校验。今天教大家通过手机号注册。
让AI编写后端对应代码
提示词：
写后端（核心中转层）
在后端配置数据库连接信息，创建用户、验证码两张数据表
前端引入图形验证码 SDK，验证通过后把手机号 + ticket 传给后端
后端先校验图形票据，再查数据库做限流判断
无限制则写入验证码到数据库，调用短信接口下发
用户提交短信码时，后端查询数据库比对完成登录校验
一步步教我怎么完成。我是小白，每一步都要讲清楚，该怎么做，为什么要这么做。
获取数据库配置（我这里是3307，一般是3306）
记得在数据库里添加表（也可以让Ai创建）
获取阿里云的云市场，滑块验证码和第三方短信配置：
点击接口就能看到
测试接口：
如果不对就把问题发给ai询问是哪里的问题。
这里遇到一个问题就是验证码模板格式不对，导致他发的是验证码是这样的。
通过修改后端代码来匹配：
后端写好后直接把4个接口和域名丢给Ai
3.3后续继续把需求发送给ai
让AI根据RPD的功能逐个实现。
我是第一次做做得比较急。中间很多制作过程没有记录下来。
我们使用ai的时候一定要做好人工审核。
这是一些ai 提示词
这是做人物分镜的提示词：
基于同一本小说，按小说章节逐章生成分镜脚本，一章一套独立分镜； 全书所有章节出场的同名人物，角色形象、外貌特征、服饰、五官、体型保持完全统一，严格杜绝第一章角色和第二章角色长相、造型不一致； 生成每一章分镜前，锁定全部人物固定人设档案，后续章节复用同一套角色设定，不随机刷新人物样貌； 分镜按章节顺序拆分，每章独立成片逻辑，所有视频人物形象连贯统一，不能出现人物画风、长相突变。
ai 有时候可能不会理解你的需求，为保证代码的安全可以把代码上传gitee
在项目目录打开 Git Bash
#1初始化仓库，只运行一次
git init
#2把总文件夹内所有代码加入暂存
git add .
#3备份提交，AI修改前快照
git commit -m "backup AI修改前完整源码，全部原有功能"
如果报错提示没有用户信息，执行下面两行替换成你 gitee 用户名邮箱
git config user.name "你的gitee用户名"
git config user.email "你的gitee注册邮箱"
#关联远程地址，复制你网页仓库给的地址
git remote add origin 把你Gitee Ai漫剧仓库的HTTPS链接粘贴在这里
#推送备份版本到远程
git push -u origin master
#新建ai_modify分支并且切换过去，后续所有AI修改都在这个
git checkout -b ai_modify
新功能做完，把 ai_modify 分支的改动保存到本地
#选中所有修改过的文件
git add .
#填写备注，写清楚做了什么功能，例子
git commit -m "实现XX新功能：xxx模块开发完成"
#把 ai_modify 分支上传到 Gitee 云端（推荐优先上传这个分支，不直接碰 master）
git push -u origin ai_modify
测试新功能一切正常，想要把新功能合并到 master 主分支
1.切回master分支（原版）
git checkout master
2.把ai_modify的新功能合并过来
git merge ai_modify
3.把合并之后的master上传Gitee
git push origin master
使用AI时不要什么都让AI去做，自己要去一看一些重要的文件，如.env文件，还有自己检查一些报错 or 有bug文件。
四、成品展示
当然第一个项目比较简陋，没有优雅的架构，也缺少周全的边界处理，很多地方只是实现了功能。能跑通就已经是最大目标。后续继续通过学习补齐架构设计、异常校验。