文末有下载链接地址
你只需要:
1️⃣ 打开VSCode(就像启动Word)
2️⃣ 唤醒Cline(你的AI编程助理)
3️⃣ 输入中文需求(像聊天一样)
💡 真实案例:
昨天帮市场部做的抽奖系统
👉 操作记录:
09:30 安装VSCode(5分钟)
09:35 搜索安装Cline插件(2次点击)
09:40 把DeepSeek的API密钥贴进去(复制粘贴)
09:45 输入用户需求
09:50 点击运行 → 浏览器自动弹出抽奖界面
为什么是这三件套?
✔️ VSCode:微软官方神器,装插件就像手机装APP
✔️ Cline:能写代码的智能管家,中文对话就能生成程序
✔️ DeepSeek:国产AI黑马,免费额度够写50个抽奖系统
一、软件介绍
1、VS code
Visual Studio Code(简称 VS Code)是由微软开发的一款免费、开源的代码编辑器,支持 Windows、macOS 和 Linux 系统。它以其轻量、高效和强大的扩展性受到开发者广泛欢迎。VS Code 内置了代码高亮、智能提示、调试工具和 Git 集成等功能,同时支持多种编程语言和框架。通过丰富的插件市场,用户可以自定义编辑器功能,满足不同开发需求。其内置的终端和任务运行器进一步提升了开发效率。VS Code 的界面简洁直观,支持多窗口分屏和主题定制,适合从初学者到专业开发者的各类用户群体。
2、Cline
Cline 是一款先进的 AI 助手,能够使用命令行和编辑器协助完成复杂的软件开发任务。基于 Claude 3.5 Sonnet 的代理编码能力,Cline 可以创建和编辑文件、浏览大型项目、使用浏览器以及执行终端命令(需用户授权)。通过模型上下文协议(MCP),Cline 还能创建新工具并扩展自身功能。
3、DeepSeek
DeepSeek 是一家专注于人工智能技术研发的创新公司,致力于打造高效、智能的 AI 解决方案。其核心产品包括先进的 AI 助手和开发工具,能够帮助用户完成复杂的编程、数据处理和自动化任务。DeepSeek 的技术基于强大的自然语言处理和机器学习模型,支持多场景应用,如代码生成、项目管理和智能决策。
二、软件安装
1、VS code
访问 VS code 官网:https://code.visualstudio.com/Download
选择适合自己系统的版本进行下载
下载完成后,双击可执行程序进行安装
全部勾选,点击下一步进行安装
安装完成后打开软件,正常运行即可
2、CLine 安装
Cline 是 Vs code 的一个插件,安装好 VS code ,在 VScode 的扩展界面,搜索 cline,如下图中第一个就是 cline,然后点击安装,等待安装完成即可。
3、DeepSeek api 配置
搜索:https://www.deepseek.com/,点击接入 API,会跳转到登录注册界面。
这里需要使用新的手机号注册,才会领到 500 万 tokens,去年登录领取过的就没有了。
登录后会跳转到如下界面,500 万 tokens 有限期共一个月,抓紧使用
点击创建 API key,名称随表输入即可,点击创建。
图中 sk-16***53b1 这一串全是 api key 的内容,点击复制。
Cline 安装完成后,vscode 左侧会出现 Cline 的图标,API Provider 下拉框选择 DeepSeek。DeepSeek API key 需要填 key, 在 Custom Instructions 一栏填入"用中文回答",这样后续的对话将会采用中文回复,配置完成后点击 Done。
可以点击 cline 右上角的箭头固定到编辑器中。
点击对话栏上边的箭头会出现如下内容
翻译如下
Auto-approve (自动批准):None (无)
Auto-approve 允许 Cline 在不请求许可的情况下执行以下操作。请谨慎使用,并且只有在您了解相关风险的情况下才启用。
选项列表:
- Read files and directories (读取文件和目录)
允许访问读取您计算机上的任何文件。
- Edit files (编辑文件)
允许修改您计算机上的任何文件。
- Execute safe commands (执行安全命令)
允许执行安全的终端命令。如果模型确定某个命令可能具有破坏性,仍将需要批准。
- Use the browser (使用浏览器)
允许在浏览器中启动和与任何网站进行交互。
- Use MCP servers (使用 MCP 服务器)
允许使用配置的 MCP 服务器,这些服务器可能会修改文件系统或与 API 交互。
Max Requests (最大请求数):20
Cline 在请求批准以继续任务之前将自动发起这么多次 API 请求。
Enable Notifications (启用通知)
当 Cline 需要批准才能继续或任务完成时接收系统通知。
这里我们先按照默认的配置使用即可。
三、年会抽奖系统实现
1、需求分析
提示词:
你是一位资深的产品经理,我想做一个简单的年会抽奖系统,使用h5页面开发,用户可直接双击运行,不用部署,可以使用txt文档导入内容,帮我进行需求分析的梳理。
AI 生成内容
需求分析梳理
1. 项目背景
- 目标:开发一个简单的年会抽奖系统,用户可通过 H5 页面直接运行,无需部署。
- 用户:公司员工或活动组织者。
- 使用场景:年会、庆典等活动中进行抽奖。
2. 核心功能
- 抽奖内容导入:
- 支持通过 TXT 文档导入抽奖内容(如奖品名称、中奖人名单等)。
- 文档格式:每行一个条目,简单清晰。
- 抽奖逻辑:
- 随机抽取一个或多个获奖者。
- 支持多次抽奖,确保已中奖者不重复中奖。
- 用户界面:
- 简洁直观的 H5 页面。
- 显示当前抽奖内容和中奖结果。
- 提供“开始抽奖”和“重置”按钮。
- 结果展示:
- 抽奖结果实时显示在页面上。
- 可显示中奖者的名称或编号。
3. 非功能性需求
- 易用性:用户无需复杂操作,双击即可运行。
- 兼容性:支持主流浏览器(Chrome、Firefox、Safari 等)。
- 性能:抽奖过程流畅,响应迅速。
- 安全性:确保抽奖过程公平,避免作弊。
4. 技术选型
- 前端:HTML5、CSS3、JavaScript。
- 数据处理:使用 JavaScript 读取和解析 TXT 文件。
- 随机算法:使用 JavaScript 的Math.random()或更复杂的随机算法。
5. 用户流程
- 准备阶段:
- 用户准备 TXT 文档,包含抽奖内容。
- 双击打开 H5 页面。
- 导入内容:
- 用户上传 TXT 文档,系统读取并显示抽奖内容。
- 抽奖阶段:
- 用户点击“开始抽奖”按钮,系统随机抽取中奖者。
- 中奖结果实时显示在页面上。
- 重置阶段:
- 用户点击“重置”按钮,清空当前抽奖结果,准备下一次抽奖。
6. 风险与应对
- 风险:TXT 文档格式错误导致无法读取。
- 应对:提供文档格式示例,前端进行格式校验。
- 风险:抽奖结果不公平。
- 应对:使用可靠的随机算法,确保每次抽奖的公平性。
7. 未来扩展
- 多轮抽奖:支持不同奖品的多轮抽奖。
- 动画效果:增加抽奖过程的动画效果,提升用户体验。
2、功能实现
拿到基本的需求分析后,就可以进行程序的开发了,打开 VScode 并创建新目录,在目录下创建需求分析文档,复制之前的需求分析到该文档中,在 Cline 的对话栏中使用 @ 即可导入文件,然后让 AI 根据需求分析文档进行开发。
这里因为 Auto-approve 没有开启的原因,在每生成一个文件之后需要手动点击 Save, 开启后会自动保存。
稍等几十秒后便开发完成了,因为是简单页面,可以使用命令运行,点击 Run Command,会自动打开编写好的网页。
如下是初版界面,需要先上传抽奖名单,我们可以继续让 CLine 帮我们编写一份抽奖名单。
简单描述后帮我们生成了一个抽奖名单
3、程序测试
导入抽奖名单后即可正常测试了,点击开始抽奖,会在最下方显示抽奖结果。
我让 AI 优化了一下生成效果,最后程序界面如下。
VScode + Cline + DeepSeek 是目前小白入门 AI 编程的最佳路线,没有太繁琐的配置,用户体验也很好,大家可以多学习,多尝试开发自己的应用。
我用夸克网盘分享了「无需网络快速部署deepseek」
链接:https://pan.quark.cn/s/363b8daf855a