大家好，我是锋哥。最近发布了《 Cursor+Claude AI编程 1小时打造Flask+Vue3漂亮的Python网上商城购物系统》。
本课程主要讲解根据我们提供的项目需求使用Cursor+Claude AI编程设计一个Flask+Vue3漂亮的Python网上商城购物系统。以及把常用的Cursor Rules规则包应用，Skills技能包应用讲解下。用AI开发项目的时候，也可能会有报错或者功能缺陷，我们通过这个实战来讲解下在Cursor中如何来修复这些问题和缺陷。《Cursor+Claude AI编程 1小时打造Flask+Vue3漂亮的Python网上商城购物系统》
项目需求分析设计
功能需求：
生成一个flask+Vue3的python商城系统。 1，要求普通用户访问的页面系统和管理员后台管理页面系统各自独立。 2，普通用户访问的系统页面用HTML5即可。管理员后台管理页面用Vue3。 3，以及后端接口服务用flask技术(server项目)，普通用户端的系统页面就放后端flask项目的template下即可。 4，数据库是mysql5.7，生成建表sql语句，以及测试数据。 5，前端界面要求美观，尤其是用户界面html5页面，要求美观大气。 6，支付功能模拟支付即可，不需要真实支付
Cursor里Rules规则包应用
规则为 Agent 提供系统级指令。它们将提示词、脚本等内容打包在一起，便于在团队内管理和共享工作流。用于引导 Agent 行为，例如强制代码规范、最佳实践或语言要求。
添加规则：Rules 数据库名字以 db_ 开头,项目里连接mysql数据库密码是 123456 , 生成的测试数据用户或者管理员密码要md5加密，原密码是123456
全局配置
Include third-party skills, subagents, and other configs：开启后，会自动应用来自其他工具的 Agent 配置，实现能力扩展。- 当前已配置一条规则：
Always respond in Chinese-simplified，强制 Agent 始终使用简体中文进行回复。
Rules（规则）
- 作用：用于引导 Agent 行为，例如强制代码规范、最佳实践或语言要求。
- 应用方式：可以设置为全局生效，或按文件路径、手动触发。
- 操作：点击
+ New可以创建新规则。
点 New+
Cursor里Skills技能包应用
Agent Skills 是一个用于为 AI 智能体扩展专门能力的开放标准。Skills 将特定领域的知识和工作流封装起来，智能体可以调用这些 Skills 来执行特定任务。
Skills（技能）
- 作用：是 Agent 的专业能力模块，用于完成特定任务，如代码重构、测试生成等。
- 触发方式：Agent 会在相关场景自动调用，也可以通过
/命令手动触发。 - 当前状态：
No Skills Yet，可点击New Skill进行创建。
ui-ux-pro-max-skill.nextlevelbuilder.io/
网页风格设计技能包添加：
# Install CLI globally
npm install -g uipro-cli
# Go to your project
cd /path/to/your/project
# Install for your AI assistant
uipro init --ai claude # Claude Code
uipro init --ai cursor # Cursor
uipro init --ai windsurf # Windsurf
uipro init --ai antigravity # Antigravity
uipro init --ai copilot # GitHub Copilot
uipro init --ai kiro # Kiro
uipro init --ai codex # Codex CLI
uipro init --ai qoder # Qoder
uipro init --ai roocode # Roo Code
uipro init --ai gemini # Gemini CLI
uipro init --ai trae # Trae
uipro init --ai opencode # OpenCode
uipro init --ai continue # Continue
uipro init --ai codebuddy # CodeBuddy
uipro init --ai all # All assistants
命令行执行：npm install -g uipro-cli
cursor终端输入：uipro init --ai cursor
这样项目里就加入了技能包：
我们用 / 指定技能包：
这样设计的页面就参考使用了ui-ux-pro-max技能包：
我们来看下用了技能包做出来的页面效果，整体还是不错的。
初始化Flask和Vue项目
先建一个父页面目录python_shop_pro2：
打开pycharm，新建flask项目，项目名是server：
接下来创建前端vue项目，用vite构建：
进入命令行工具：输入 npm create vite@latest
指定项目名称client，选择Vue框架，指定语言JavaScript
这样我们前端项目就生成了：
利用Cursor生成项目
功能需求：
生成一个flask+Vue3的python商城系统。 1，要求普通用户访问的页面系统和管理员后台管理页面系统各自独立。 2，普通用户访问的系统页面用HTML5即可。管理员后台管理页面用Vue3。 3，以及后端接口服务用flask技术(server项目)，普通用户端的系统页面就放后端flask项目的template下即可。 4，数据库是mysql5.7，生成建表sql语句，以及测试数据。 5，前端界面要求美观，尤其是用户界面html5页面，要求美观大气。
6，支付功能模拟支付即可，不需要真实支付
我们先选Plan和Cursor沟通下方案，模型选 Opus4.6
沟通方案的时候，可以让我们选择功能：
我们选全功能，然后点"Continue"
大概3分钟时间，Opus4.6就给出了我们设计方案：
如果我们觉得可以，就点"Build"构建。
大概20分钟左右，AI就根据Plan方案，把项目生成好了。
我们来看下项目效果，先把sql脚本导入数据库。
后端项目的库自己安装下：
然后启动下后端项目。前端项目也打开下 直接输入命令 npm run dev 启动项目：
利用Cursor修复bug和完善功能
我们来测试下生成的项目，有时候会有一些bug和功能问题。
我们发现一个系统功能缺陷，用户管理模块 状态字段 被挤压了
我们用Plan模式现和模型沟通改下解决方案，提示词：管理员后台管理用户管理模块表格显示列用户状态字段示太拥挤，改成自适应
AI给了我们解决方案，我们确认下，没问题就点Build
这样我们就解决好了这个缺陷
我们测试的时候，有发现一个Bug，后台管理，商品管理模块，修改商品的图片，可以上传成功，但是回显失败。
我们继续选Plan，给AI描述下问题： 管理员后台管理商品管理商品添加商品图点击上传本地图片，上传成功，但是回显图片失败，惨正下这个问题
AI给我们分析了问题，少了一个 /static 代理：
我们点Build修复下就OK
最后，我们在加一个用户页面，商品模块下面，加一个商品评论功能模块。我们给AI提示词：
还是选Plan沟通下方案，提示词：我们在用户系统的商品详情页面下，加一个用户功能。|
AI会给出我们技术方案，我们确实没问题，就点Build
AI生成完成后，我们下把sql脚本导入数据库：
然后测试，我们发现已经有用户评论功能了。
但是我们发现，后台管理居然没有用户管理模块，所以我们继续找AI，给我们添加一个用户评论管理模块：
AI修复完后，我们看下后台管理，已经有评论管理功能了。
至此，我们轻松完成了一个Python项目。是不是很轻松的搞定了。AI编程是不是很强大，但是我们这里再次强调，编程基础还是要掌握好的，代码要能看懂。
