🚀 AI编程 Vibe Coding - 实操案例
🏫 讲师介绍
📚 课程概述
本课程包含11个精心设计的实操案例，涵盖游戏开发、Web开发、数据处理、桌面应用、浏览器插件等多个领域，全面展示AI编程的强大能力和实用性。
🎯 学习指南
点击左侧大纲中的任意实例，或点击上方案例列表中的实例标题，即可查看详细的实操内容。每个实例都包含：
- 🎯 案例目标 - 明确学习目标
- 💡 提示词 - AI编程的核心输入
- 🔧 技术栈 - 涉及的技术和工具
- 📸 生成结果 - 最终实现效果
实例1：用一句话做一个俄罗斯方块的游戏
🎯 案例目标
使用HTML和JavaScript快速创建一个完整的俄罗斯方块Web游戏
💡 提示词
用html与js代码实现一个俄罗斯方块的web端游戏。
🔧 技术栈
HTML5 Canvas
JavaScript
游戏逻辑算法
📸 生成结果
实例2：开发一个公司官网
🎯 案例目标
为腾飞AI科技公司创建一个高端大气的企业官网
💡 提示词
帮我做一个公司网站。网站采用纯html制作。
我公司是一家名为腾飞AI科技公司，产品是提供给企业客户Ai相关的服务，包括了大语言模型与知识库的私有化布署，数字人系统开发，自动化应用开发。
界面上要有漂亮的科技公司的图片。栏目包括了，公司介绍，产品与服务，成功案例，联系我们。
公司网站要高端大气上档次。像个国际型的大公司的网站，要美观至上。配色方案：科技蓝/深色系为主色调
所有图片全部采用来自picsum.photos的高质量科技类库存照片，将图片保存至本地。
🔄 补充提示词
xx栏目下为空，补充内容。
🔧 技术栈
纯HTML/CSS
响应式设计
Stock Photos集成
📸 生成结果
实例5：Python脚本生成word报告
🎯 案例目标
从Excel数据自动生成格式化的Word分析报告
💡 提示词
你要用大语言模型进行分析数据，并写出报告。用python代码，从一般的excel表中，读取数据，而非特定的某个excel文件。并为我从多个角度分析这些数据，生成word的报告，报告中包含表格和图表。在这个报告中，要有文本分析内容，要有结论。
大语言模型用的是硅基流动平台的deepseek-ai/DeepSeek-V3.2，我的api-key是:sk-xxxxxxx<注意：这里替换为你自己的硅基流动api-key>。
在word报告中，不能出现中文乱码，正文字体采用宋体，标题采用加粗的微软雅黑。
🔄 补充提示词
现在没有实现：标题字体用微软雅黑，正文字体用宋体。
生成的word文档，格式混乱，你好好看看，再把这个问题解决掉。
🔧 技术栈
Python pandas
python-docx
matplotlib
虚拟环境管理
📸 生成结果
实例3：用C#语言，做一个两个文本文件的比较器--截屏复制一个软件
🎯 案例目标
仿照现有软件界面，开发一个智能文本文件比较器
🖼️ 参考界面
💡 提示词
仿照附件的样子，做一个文件比较器，左右两边打开不同的两个文本文件，比较两个文件的差异。用颜色表示。
不必照附件中，加入那么多的菜单与按钮，只要实现这个功能就行。
本程序要求用c#语言开发，每一个窗口，分成cs文件与.Designer.cs文件。采用.net8.0框架。
你比较文件时，要能将两个文本文件中，相比较多余的行，或字符，找出来。不是按相同行进行比较。比如，A文件，第3行后多了2行文本，而B文件中，第3行后没有这两行文本。那么只需要在A文件中将这3行标红就好了，而A文件中，第6行后，就不需要标红了。B文件中，将在第3行后，空出相对应位置。第6行后，两边显示的内容又一致了。
注意，在拖动文件向下浏览时，要将左右两边，同时向下拖动。
🔄 补充提示词
现在没有实现同步浏览，就是当一个文件向下或向上拖动时，另一个文件没有按同步的原则，进行相对应的拖动。
🔧 技术栈
C# WinForms
.NET 8.0
文本差异算法
同步滚动控制
📸 生成结果
实例6：用C#语言，从excel表中读取数据，生成word分析报告
🎯 案例目标
开发C# WinForms应用程序，自动从Excel生成Word分析报告
💡 提示词
你要用大语言模型进行分析数据，并写出报告。用C#代码，从一般的excel表中，读取数据，而非特定的某个excel文件。并为我从多个角度分析这些数据，生成word的报告，报告中包含表格和图表。在这个报告中，要有文本分析内容，要有结论。
大语言模型用的是硅基流动平台的deepseek-ai/DeepSeek-V3.2，我的api-key是:sk-xxxxxxx<注意：这里替换为你自己的硅基流动api-key>。
在word报告中，不能出现中文乱码，正文字体采用宋体，标题采用加粗的微软雅黑。
我要你做成一个windows form程序。让我选择xlsx文件，输出word的分析报告。
🔧 技术栈
C# WinForms
.NET 8.0
EPPlus (Excel处理)
DocumentFormat.OpenXml (Word生成)
数据分析与可视化
📸 生成结果
实例4：用C#，从多份不同格式的文件（pdf、word）中读取应聘数据，并生成一份excel汇总表格
🎯 案例目标
开发智能简历处理系统，使用AI大模型自动提取简历信息并汇总
📁 测试数据
学生简历（点击下载）
💡 提示词
注意：要将以下提示词中：<硅基流动上申请的api-key>，替换换成你在硅基流动上申请的api-key。
有多份简历在"西浦2024-学生简历"目录中，这些简历有pdf格式，word格式。
对每一份简历，用大模型读取简历，获取姓名、性别，学历，专业，邮箱，电话，技术能力特点。
写入汇总excel表格中去。放到本目录下"汇总.xlsx"。
本程序要求用c#语言开发，每一个窗口，分成cs文件与.Designer.cs文件。采用.net8.0框架。
界面上，有一个简历目录选择，还有一个是保存汇总excel表的目录，默认是当前目标。
并且有一个log信息框，显示处理的进展。
程序窗体下方有一个状态条，显示当前进展进度。
完成后，打开汇总的excel表格。
大语言模型用的是硅基流动平台的deepseek-ai/DeepSeek-V3.2，我的api-key是:sk-xxxxxxx<注意：这里替换为你自己的硅基流动api-key>。
🔧 技术栈
C# WinForms (.NET 8.0)
PDF/Word文档解析
DeepSeek-V3.2 AI模型
Excel文件生成
进度条与日志系统
📸 生成结果
实例7：动态公司网站前端
🎯 案例目标
使用Next.js框架开发现代化的企业官网，支持动态内容和响应式设计
💡 提示词
界面上要有漂亮的科技公司的图片。栏目包括了，公司介绍，产品与服务，成功案例，联系我们。
公司网站要高端大气上档次。像个国际型的大公司的网站，要美观至上。配色方案：科技蓝/深色系为主色调
前端采用next.js框架。
对图标使用Lucide React for icons (from lucide-react package)。不要使用其他UI库，除非需要
使用来自stock photos的库存照片。照片在适当，只使用您知道存在的有效url配置。
配置next.config.js图像为本地模式，所有图片全部采用来自picsum.photos的高质量科技类库存照片，将图片保存至本地。
创建根目录布局的tsx页面，为所有页面包装必要的导航项。
在项目开始前，先要用npx create-next-app@latest进行next.js的项目初始化。
🔄 补充提示词
这里是windows系统，所以在执行命令时，不要用&&作为多命令连接符。
🔧 技术栈
Next.js 框架
React + TypeScript
Lucide React Icons
响应式设计
Stock Photos集成
📸 生成结果
实例8：动态网站管理后端
🎯 案例目标
用java开发公司网站管理后端，后台用mysql数据库，并开发一个java的springboot服务，再用做一个后台管理web界面，管理公司产品、关于我们、成功案例、联系我们的发布与修改。
💡 提示词
设计一个企业网站的前后台，前端网页已经在文件夹front_web中。
后台使用MySQL做数据库，存储信息，mysql采用localhost:3306，用户名/密码：root/123456。数据库名为：comdb。
使用java springboot做后台服务，代码放backend_service目录中，对产品与服务、关于我们、成功案例、联系我们的数据进行发布与记录，将前端的请求使用api调用后端数据，再将数据返回前端，例如用户点击数字人系统开发，使用api调用后端数据，其中内容分要求你自己设计。
backend_service提供rest服务。admin_web中提供一个管理后台界面。在管理后台中修改内容后，要在front_web中显示相应的内容。
栏目中：关于我们与联系我们，是单项信息。产品与服务、成功案例、用户咨询是列表信息。
admin_web，需要进行登录，才能进行对后台的管理。设置用户名为admin，密码为admin123。
🔧 技术栈
java springboot
mysql
实例9：固定资产管理系统
🎯 案例目标
开发一套完整的固定资产管理系统，包含MySQL数据库、Java SpringBoot后台服务、Web前端界面
💡 提示词
编写一个固定资产管理系统。
mysql采用localhost:3306，用户名/密码：root/123456。数据库名为：assets。
🔧 技术栈
MySQL
Java SpringBoot
Next.js/Vue
REST API
实例10：爬虫开发：数据采集到Excel
🎯 案例目标
使用Playwright自动化技术，开发爬虫程序，爬取网页数据并保存到Excel表中
💡 提示词
用playwright，在https://asset.2spread.com/中的资产管理中，将资产列表中的数据，填写到excel中去。
https://asset.2spread.com/的用户名为admin，密码为123456
写一个python程序。
🔧 技术栈
Python
Playwright
Pandas
Excel处理
实例11：Web自动填表脚本
🎯 案例目标
使用脚本语言（Python + Playwright），在Web上自动填表与提交，实现工作流程自动化
📁 数据文件
资产数据A.xlsx（点击下载）
💡 提示词
用playwright，在https://asset.2spread.com/中的资产管理中，根据excel表，输入新增资产。
并将资产分类，由AI确定的类别。AI大语言模型用的是硅基流动平台的deepseek-ai/DeepSeek-V3.2，我的api-key是：sk-xxxxxxx<注意：这里替换为你自己的硅基流动api-key>。
https://asset.2spread.com/的用户名为admin，密码为123456
写一个python程序。
🔄 补充提示词
资产分类下拉框选择失败，参见：资产分类下拉框选择方案.md
🔧 技术栈
Python
Playwright
自动化脚本
表单处理
实例12：Web自动填表桌面程序
🎯 案例目标
开发一个桌面程序（exe），在Web上自动填表与提交，实现工作流程自动化
📁 数据文件
资产数据A.xlsx（点击下载）
💡 提示词
用playwright，在https://asset.2spread.com/中的资产管理中，根据excel表，输入新增资产。
并将资产分类，由AI确定的类别。AI大语言模型用的是硅基流动平台的deepseek-ai/DeepSeek-V3.2，我的api-key是：sk-xxxxxxx<注意：这里替换为你自己的硅基流动api-key>。
https://asset.2spread.com/的用户名为admin，密码为123456
写一个C#程序，用.net8.0，要有窗口界面，让我选择excel文件。
🔄 补充提示词
参见案例11的python代码。
🔧 技术栈
Python/C#
Playwright
桌面GUI
打包exe
实例13：微信小程序：用户登记
🎯 案例目标
开发一个用户登记的微信小程序，并配套管理后台，数据保存到数据库中
💡 提示词
请帮我开发一个完整的全栈项目，包含微信小程序、Web管理后台以及后端API与数据库。具体需求如下：
1. 微信小程序端（用户登记）：
实现一个用户登记表单页面。
包含字段：姓名、性别、学历、年龄、需求描述。
实现表单的校验与数据提交功能。
2. Web管理后台端（数据管理）：
实现一个管理端页面，包含一个数据表格。
功能：能够展示从小程序端提交的所有用户登记数据。
3. 后端与数据库：
设计相关的数据库表结构（推荐使用sqlite）。
提供两个核心API接口：一个用于小程序端提交并保存数据，另一个用于Web管理后台查询数据列表。
推荐使用轻量级的技术栈（如Node.js/Express 或 Python/Flask/FastAPI，前端可使用Vue/React）。
🔧 技术栈
微信小程序
Java/Node.js
MySQL
REST API
实例14：Flutter固定资产管理App
🎯 案例目标
使用Flutter开发跨平台（Android、iOS）固定资产管理App
💡 提示词
在assets目录下是固定资产管理系统的前后端代码。
根据web前端的功能，为我开发一个手机端App，用flutter构建。实现web中的各项功能。
🔧 技术栈
Flutter
Dart
Android/iOS
跨平台开发