这是我做的第一个完整前后端项目距离做完已经过去一个多月。 当时我的基础只会 Python 和 MySQLVue、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 vuelatest #创建vue3工程项目如果报错可以输入这条命令#修改 PowerShell 脚本运行权限策略仅当前登录电脑的用户生效Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned然后重新输入npm create vuelatest成功之后输入项目名称。选择需要安装的功能一般只需要这两个初始化之后会有三条指令依次输入初始化完成后会出现本地访问地址可以通过本机访问前置步骤完成后切换至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个接口和域名丢给Ai3.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 云端推荐优先上传这个分支不直接碰 mastergit push -u origin ai_modify测试新功能一切正常想要把新功能合并到 master 主分支1.切回master分支原版git checkout master2.把ai_modify的新功能合并过来git merge ai_modify3.把合并之后的master上传Giteegit push origin master使用AI时不要什么都让AI去做自己要去一看一些重要的文件如.env文件还有自己检查一些报错 or 有bug文件。四、成品展示当然第一个项目比较简陋没有优雅的架构也缺少周全的边界处理很多地方只是实现了功能。能跑通就已经是最大目标。后续继续通过学习补齐架构设计、异常校验。