Datawhale冬令营第二期！Task2🌼

Datawhale冬令营第二期-Task2：学AI编程的Prompt工程，提升效果

对应链接：https://www.datawhale.cn/activity/116/23/95?rankingPage=1

笔记整理者：博客园-岁月月宝贝

计设的报销下来啦！！！蜀黍也是有钱人啦！

这篇也不太侧重格式啦！我们多多注重内容呦~

前面Task 1的两个任务，让我们实践了AI辅助编程的意义：

核心价值：大大降低编程的入门门槛，能通过自然语言描述实现自己的想法

同时，AI工具提高了开发效率 ，可以提供智能代码建议、自动补全和调试支持，让开发者能够专注于更具创新性和复杂性的任务。

另外，既然通过自然语言描述，核心就在于“写好提示词”。

要真正发挥AI在编程中的巨大力量，关键在于 如何有效地与AI进行沟通和协作 ， 学会借助AI的力量 。——Datawhale

SO，学习 “编程场景下的 prompt工程” 非常重要。

prompt（提示词）的写作目标:有效地与AI沟通，以获取所需的编程帮助。

写编程场景下的提示词（和普通的提示词相比，需要一定领域知识，才能更清晰地表达），就像是向一位经验丰富的开发者清晰地描述你的想法 (精准地写好提示词)，确保他们 理解并能准确地实现你的需求 (提供 更有针对性和高质量的建议)。

另外我们还需要了解AI的能力，它不仅能帮助你快速生成代码 ，还能指导你优化和调试程序 。——SO，掌握提示词技巧，是充分利用AI辅助编程潜力的关键所在 。

如何写好用于编程的提示词？

我们先来看两个目标都是 开发“贪吃蛇”小游戏 的提示词：

可以发现：写好提示词的关键在于 明确、具体地表达需求 ！

（使用 HTML、 bootstrap和JavaScript 帮我编写一个贪吃蛇小游戏。 UI要界面简洁、美观 ，能够 随机生成食物 ， 允许用户使用键盘wasd键操控蛇的方向 。

当蛇吃到食物时，得分会增加，并且食物会随机生成在新的位置。当蛇撞到墙壁或自己的身体时，游戏结束，并弹出得分提示。）

已尝试！好好玩！不过第一次生成的有点错，现在正在迭代修改呢！！！会放游戏截图的！

PS：食物可以吃，问题在于黑框与实际触碰会死的框不一致，这个调教AI它听不懂

对了，还有一个，边界条件是：

1.明确“沟通”目标

良好的沟通从对齐目标开始——我们首先需想清楚，让AI完成什么类型的任务。

常见的编程任务有以下几个：需求分析、代码生成、代码调试、功能扩展。

常见编程任务场景

2. 拆解复杂任务

即随时保持清晰的视角、拆解问题， 将复杂任务拆分为多个简单步骤，逐步引导AI完成 。

例如 Task1 中简单介绍的“井字棋”游戏，我们可以将其拆分创建基本的HTML界面、添加游戏棋盘结构、设置棋盘样式、初始化游戏变量、绘制棋盘和处理点击事件、添加游戏重启功能、优化游戏体验、实现电脑对战功能等几个步骤。

满分Prompt:

请按照以下步骤帮助我创建一个“井字棋”游戏：

步骤1: 创建基本的HTML页面请帮我创建一个基本的HTML页面，包含声明，、和标签。在中添加页面标题“井字棋游戏”。

步骤2: 添加游戏棋盘结构在中添加一个

元素，设置id为“gameBoard”，用于显示井字棋的棋盘。棋盘应包含3x3的格子，每个格子用<button>元素表示，设置class为“cell”。

步骤3: 设置棋盘样式使用CSS为#gameBoard和.cell设置样式，使棋盘显示为3x3的网格。每个格子的大小为100x100像素，边框为1px实线黑色，字体大小为48px，居中显示内容。

步骤4: 初始化游戏变量在JavaScript中初始化以下游戏变量：

当前玩家为“X”

游戏状态数组，包含9个空字符串，表示棋盘的状态

游戏是否结束的标志

步骤5: 绘制棋盘和处理点击事件为每个.cell添加点击事件监听器，当玩家点击某个格子时，标记当前玩家的符号（“X”或“O”），更新游戏状态，并检查游戏是否结束。

步骤6: 添加游戏重启功能为页面添加一个“重新开始”按钮，当游戏结束时显示该按钮。点击按钮后，重置游戏状态，清空棋盘，并隐藏重启按钮。

步骤7: 优化游戏体验为页面添加一些动画效果，例如当玩家点击格子时，标记符号以渐变方式显示。并在游戏结束时，突出显示获胜的组合。

步骤8: 实现电脑对战功能为游戏添加电脑对战功能。当玩家选择“X”后，电脑自动作为“O”进行随机选择未被占用的格子。

PS :此Prompt的目标是通过和豆包MarsCode AI 解释需求，让他能一次性生成不错的游戏代码 。

（此版本的生成经过Datawhale的反复尝试，具体方法包含与不在这个对话框里的另一个“豆包MarsCode AI”探讨可能的编程方案）

已经尝试，超级顺利，一次生成！！！！会放游戏截图的！！

具体是一个一个人轮着下，一个赢了就重开

3.尝试通过“关键词” “唤醒” AI能力

回到task1中的 “思考” 环节，其中有一些词语是加粗过的。

html、tailwind css和javascript
UI简洁美观大方
呼吸感

这些词语的特征是带有很强指向性， 同时与特定领域、任务或知识相关的。

我们在使用AI进行编程时，可以用这些“关键词” 帮助AI迅速识别任务的类型，进而给出相关代码。

简单理解，这些 关键词与AI的关系 ，好比 “咒语”和“魔法师” ， “教鞭”和“不听话的学生”。——Datawhale好可爱！

以 “代码生成”的任务场景为例，我们来看几个 “关键词”：

前端关键词

“前端”：可以让AI快速明确，自己面向的任务是 开发用户能看到的界面、能够进行交互的组件 。具有类似效果的关键词是 “html、css、JavaScript” (前端编程语言）。
“html、css、JavaScript”：往往会组合出现，是前端开发的 编程语言三件套 ~

如果把你看到的界面比做 “你家” ，

html 是你家的 “户型” ，它决定了你家 基本布局 ；

css 是你家的 “装修或者装饰” ，它让你家更美观；

JavaScript则是你家的 “家居设备” ，它决定了你在家里能够 使用的功能 。

——Datawhale

“tailwind css” / “bootstrap”:两个关键词都是 “功能类”的css框架 。“tailwind” 的作用是让AI快速明确，自己面向的任务是 调整页面布局、组件、响应式设计 等等让页面变得“更美观”的操作。 “bootstrap”具有类似效果。

使用tailwind css关键词开发的贪吃蛇游戏，背景与地图边框线的过渡非常自然，符合用户的视觉体验。

使用bootstrap关键词开发的贪吃蛇游戏，背景与地图边框线的对比非常强烈。

“呼吸感”:通常是指通过细腻、柔和的动画效果，像呼吸一样在视觉上产生动态变化。作用是让AI明确使用 渐变、缩放、透明度变化 等设计来增强页面的生命感，使用户在使用过程中获得更好的视觉体验和交互反馈。

可以看到，使用“呼吸感”关键词的钟表盘外部的渐变效果，让用户能够直观感受到时间的流逝。

“毛玻璃”：一种通过模糊背景或容器，模拟毛玻璃材质效果的设计技术。常常用来给界面元素增添一种现代感、时尚感，同时增加一定的层次感和深度感。作用是让AI明确使 背景内容呈现模糊的状态 ，同时让 前景元素保持一定的透明度或半透明效果。

可以看到，右侧使用“毛玻璃”关键词的图片，主体的名片系统形成了半透明效果，同时背景以彩色渐变的形式出现，更加突出了名片这一前景元素。

——DW太有审美啦！

后端关键词

涉及内容：注册平台账号和登陆平台账号的过程等看不到的过程

“多线程” ：它的作用是让AI明白用户需要的是 处理并发、并行任务和提高程序性能的代码片段 。——具体看本人的分布式计算帖子
“异步处理” ：它的作用是让AI明白用户需要与 非阻塞任务执行 、 并发处理 、回调、 Promise 、 async/await 等相关的功能。异步处理在很多场景中都非常重要，特别是在处理 I/O密集型任务 （如网络请求、文件读写、数据库查询等）时，能够提高应用的响应性和吞吐量。
“JWT认证” ：JWT 认证常用于 Web 应用程序和 API 中来验证用户身份并确保安全性。它的作用是让AI明白用户需要涉及到 用户登录、生成令牌、令牌验证等 步骤的代码。

如何挖掘能够 “唤醒” AI的 “关键词”

最简单的方法———— 问AI！

既然我们的代码是从AI来的，因此可以很自然地反推得——AI也知道并理解这些可以 “唤醒” 自己的 “关键词” 。

前端领域挖掘 “关键词”的咒语:

在大语言模型领域，由于训练语料已经存在，以及很多用户输入的提示词会频繁使用一些代表性词汇来“触发”大语言模型的操作，我将这个过程称之为“关键词唤醒大语言模型”。例如，当我的提示词中带有“小红书”，大语言模型通常为认为，接下来的操作需要符合“小红书”用户群体的调性或操作习惯。接下来，我的问题是，请你列举一些 前端开发领域 能够“唤醒”AI的“关键词”。

在前端开发领域，有一些关键词可以帮助唤醒AI，使其理解你的需求并提供相应的帮助。以下是一些常见的关键词：

HTML: 超文本标记语言，用于构建网页的结构。
CSS: 层叠样式表，用于美化网页的外观。
JavaScript: 一种脚本语言，用于为网页添加交互功能。
React: 一个用于构建用户界面的JavaScript库。
Vue: 另一个流行的JavaScript框架，用于构建用户界面。
Angular: Google开发的前端框架，用于构建单页应用程序。
jQuery: 一个快速、简洁的JavaScript库，用于简化HTML文档遍历、事件处理、动画等。
Bootstrap: 一个流行的前端框架，提供了预定义的CSS样式和JavaScript组件，用于快速构建响应式网站。
Sass: 一种CSS扩展语言，提供了更强大的功能，如变量、嵌套、混合等。
Webpack: 一个模块打包器，用于将多个模块打包成一个或多个文件。
Babel: 一个JavaScript编译器，用于将现代JavaScript代码转换为旧版本浏览器兼容的代码。
Git: 一个版本控制系统，用于管理代码的版本和变更。
GitHub: 一个基于Git的代码托管平台，提供了代码存储、协作和管理功能。
npm: Node.js的包管理器，用于安装、管理和共享JavaScript包。
RESTful API: 一种设计风格，用于构建Web服务。
AJAX: 异步JavaScript和XML，用于在不刷新页面的情况下与服务器通信。
JSON: 一种轻量级的数据交换格式，常用于Web应用程序中。
SVG: 可缩放矢量图形，用于在网页中显示图形。
Canvas: HTML5中的一个元素，用于通过JavaScript绘制图形。
Responsive design: 响应式设计，用于确保网页在不同设备和屏幕尺寸上都能良好显示。

当你在与AI交流时，使用这些关键词可以帮助AI更好地理解你的需求，并提供更准确的帮助和建议。

后端领域挖掘 “关键词”的咒语:

在大语言模型领域，由于训练语料已经存在，以及很多用户输入的提示词会频繁使用一些代表性词汇来“触发”大语言模型的操作，我将这个过程称之为“关键词唤醒大语言模型”。例如，当我的提示词中带有“小红书”，大语言模型通常为认为，接下来的操作需要符合“小红书”用户群体的调性或操作习惯。接下来，我的问题是，请你列举一些 后端开发领域 能够“唤醒”AI的“关键词”。

在后端开发领域，有一些关键词可以帮助唤醒AI，使其理解你的需求并提供相应的帮助。以下是一些常见的关键词：

Java: 一种广泛使用的编程语言，用于构建企业级应用程序。
Python: 一种通用编程语言，以其简洁的语法和丰富的库而闻名，常用于Web开发、数据分析和人工智能。
Node.js: 一个基于Chrome V8引擎的JavaScript运行时，用于构建服务器端应用程序。
Spring Boot: 一个用于简化Spring应用程序开发的框架，提供了自动配置和快速开发的功能。
Django: 一个高级Python Web框架，遵循MVC架构模式，提供了快速开发和安全的Web应用程序的工具。
RESTful API: 一种设计风格，用于构建Web服务，通常与JSON数据格式一起使用。
SQL: 结构化查询语言，用于管理关系型数据库。
NoSQL: 非关系型数据库的统称，如MongoDB、Redis等，用于处理大量非结构化数据。
Docker: 一个开源的容器化平台，用于简化应用程序的部署和管理。
Kubernetes: 一个开源的容器编排系统，用于自动化部署、扩展和管理容器化应用程序。
Microservices: 一种架构风格，将应用程序拆分为一组小型服务，每个服务都可以独立部署和扩展。
Serverless: 一种云计算模型，其中服务提供商管理服务器基础设施，开发者只需关注代码。
DevOps: 一种软件开发和运维的文化和实践，强调团队协作、自动化和持续集成/持续部署（CI/CD）。
Agile: 一种项目管理方法，强调灵活性、协作和持续改进。
Git: 一个版本控制系统，用于管理代码的版本和变更。
GitHub: 一个基于Git的代码托管平台，提供了代码存储、协作和管理功能。
Jenkins: 一个开源的自动化服务器，用于持续集成和持续部署。
JUnit: 一个Java语言的单元测试框架，用于编写和运行测试用例。
Postman: 一个API开发和测试工具，用于构建、测试和调试API。
Swagger: 一个规范且完整的框架，用于生成、描述、调用和可视化RESTful风格的Web服务。

当你在与AI交流时，使用这些关键词可以帮助AI更好地理解你的需求，并提供更准确的帮助和建议。

那我该如何确定我的需求属于前端开发，还是后端开发，还是两者都要涉及呢？这将引出我们的Task3“ AI辅助编程——构建自己应用的方法论 ”~