AI编程学习笔记

中文
, , , ,

这篇文章是我在「AI 辅助编程」学习过程中的一份复盘：一方面沉淀一个可复用的提示词框架（角色 / 背景 / 任务 / 要求），另一方面用一组真实练习把方法跑通（网站、Chrome 插件、Python 小项目），并记录每天如何推进。

1. 为什么要“给大模型写需求文档”

AI 编程不是把需求丢给模型然后祈祷它一次成功，而更像是：你写一份更明确、更可验证的需求文档，模型负责快速产出初稿，你负责验收与迭代。

一个关键认知是：

  • 大模型能获得的只有你输入的提示词，不要假设它“知道你想要什么”。
  • 你给得越具体，输出就越稳定；你给得越模糊，返工就越多。

2. 最实用的提示词框架：角色 / 背景 / 任务 / 要求

这套框架可以用在绝大多数 AI 编程场景：

  • 角色（Role）：让模型站在合适的专业身份上思考（程序员、产品经理、测试工程师……）。
  • 背景（Context）：补足必须的上下文（语言/框架/版本/运行环境/约束）。
  • 任务（Task）：要做什么，必须具体、可拆分、可验收。
  • 要求（Constraints）：输出格式、兼容性、编码、目录结构、边界条件等。

我常用的“骨架模板”如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 角色
你是一位资深软件开发人员 / 测试工程师 / 文档编写专家。

# 背景
- 语言/框架：{例如 Python 3.12 / Chrome Extension Manifest V3}
- 运行环境：{例如 macOS}
- 现状：{已有代码/目录结构/当前问题}

# 任务
请完成：{明确任务}

# 要求
- 输出：{完整代码 / 关键文件列表 / JSON 格式 / 仅改动某文件}
- 约束：{版本/编码/性能/安全}
- 验收标准：{如何判断完成}

3. 实战练习清单：从“能跑”到“好用”

我在练习中刻意选择了“短闭环”的题目：能快速验证、能快速迭代。

3.1 一个简单的网站首页（纯文本、科技感）

1
请帮我生成网站的首页，要求没有任何配图，要有科技感和高技感。

这个例子看起来简单，但很适合练手：你会很快意识到“科技感”是抽象词，需要你进一步补充（布局、字体、配色、动效、组件结构、是否用 Tailwind/React 等）。

3.2 Chrome 插件：把图片平均切成 4 份并下载

1
2
3
请你帮我开发一个谷歌插件，用于将用户上传的图片，平均切分为 4 张图片，并自动下载到本地电脑上。
注意使用 Manifest V3 版本开发。
注意按钮中文编码的问题。

我把“Manifest V3 + 中文编码”写进要求里，是因为这两点会直接影响工程结构与落地细节（例如 service worker、权限、i18n/编码处理）。

3.3 Chrome 插件：按域名自动分组 Tab

下面这个提示词是我在练习中最典型的“需求说明书式写法”之一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 角色
你是一位资深程序员，能够熟练开发 Google 浏览器插件。

# 目的
我需要开发一个插件，用于将 Google 浏览器的 tab 自动分组：根据配置的域名自动分组。

# 功能
1. 点击插件，可以配置：域名、分组名称、分组颜色（Blue、Red、Grey、Yellow、Green）
2. 点击保存后，页面消失，并显示“保存成功”
3. 当打开对应域名的链接时，后台自动按分组名称和颜色分组
	 - 若打开新链接时没有分组，则创建分组
	 - 若打开新链接时已存在相同域名分组，则自动合并

# 注意
1. 使用 Manifest V3 版本开发。
2. 注意中文编码的问题。

这个例子背后的关键点是：你不仅描述“做什么”，还描述“在什么情况下怎么做”，等于把分支逻辑（创建/合并）提前写清楚，模型产出会稳定很多。

3.4 Python 小项目：计算器 / 贪吃蛇 / 解谜

计算器练习：

1
2
3
4
5
帮我实现一个 Python 的计算器程序，要求：
1. 实现加减乘除四则运算
2. 提供括号功能，允许用户输入括号表示优先级
3. 提供删除和清空按钮
注意：请注意中文的格式编码问题

贪吃蛇练习（把“功能”和“优化项”分层写清楚）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
你是一名 Python 专家，请编写一段代码：

项目名称：贪吃蛇游戏

# 要求
1. 输出完整的贪吃蛇游戏代码
2. 果实为黄色，蛇身为黑色
3. 增加计分板功能：每吃到一个果实得 1 分

# 优化（可选）
- 添加不同颜色的网格线（横向浅绿，纵向浅红）
- 实现 10 局游戏系统：每局得 5 分即可通关
- 每局速度不同，从慢到快（第一局最慢）
- 通关后可选择继续下一局或退出游戏
- 增加局数显示、通关提示界面
- 优化中文显示问题，增加多重字体尝试机制

解谜练习（滑块/华容道风格）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 滑块解谜游戏

## 游戏介绍
这是一个经典的滑块解谜游戏，灵感来源于著名的“华容道”。玩家需要移动方块，最终将金色“钥匙”方块移出游戏区域获得胜利。

## 游戏规则
- 游戏目标：将金色“钥匙”方块移动到右侧边缘，使其右边缘到达或超过游戏区域右边界
- 游戏界面：6x6 网格
- 方块类型：
	- 绿色方块：横向移动，占据 2 或 3 个单元格
	- 红色方块：纵向移动，占据 2 或 3 个单元格
	- 金色方块：钥匙，占据 2 个单元格，需要移动到出口
- 移动规则：
	- 鼠标拖动方块
	- 方块只能在允许方向移动
	- 方块之间不能重叠
- 游戏操作：
	- 左键点击并拖动移动
	- 按 H 获取提示并启动自动解题
	- 按 R 重置

## 特殊功能
- 自动解题：按 H 后每秒移动一次方块，直到解开
- 重置游戏：按 R 重置到初始状态

3.5 Chrome 插件：侧边栏 AI 聊天 / 网页二维码 / 翻译

侧边栏 AI 聊天：

1
2
3
4
5
6
7
帮我实现一个 Chrome 插件，要求：
1. 点击插件时，打开右侧边栏，展示网站：https://chat.deepseek.com/

注意：
- 无需使用图标
- 使用 Manifest V3
- 请注意中文的格式编码问题

网页二维码：

1
2
3
4
5
6
7
8
9
10
帮我实现一个 Chrome 插件，要求：
1. 打开任意网页时，在右下角显示网页 logo 图标；点击图标展开显示网页二维码
2. 二维码大小 256*256，白底，上边距/左右边距均为 25px
3. 二维码下方分两行显示：网站名称与网页标题（标题最多 10 个字）
4. 二维码中间显示网页 logo

注意：
- 无需使用图标
- 使用 Manifest V3
- 请注意中文的格式编码问题

谷歌翻译（右键菜单版 / 自动翻译版）：

1
2
3
4
5
帮我实现一个 Chrome 插件，要求：
1. 选中网页文字并右键时，在菜单中显示“使用谷歌进行翻译”；点击后弹出谷歌翻译窗口并把选中文字翻译成英文
2. 无需使用图标
3. 使用 Manifest V3
4. 请注意中文的格式编码问题
1
2
3
4
5
6
7
8
9
帮我实现一个 Chrome 插件，要求：
1. 选中网页文字后，自动将选中文字翻译成英文
2. 在鼠标停留位置展示翻译结果
3. 结果展示后，点击鼠标左键或等待 3s 自动关闭

注意：
- 无需使用图标
- 使用 Manifest V3
- 请注意中文的格式编码问题

4. 打卡复盘：怎么把学习“跑起来”

我用打卡的方式把学习拆成可执行的小步：

Day 1：先把工具和闭环跑通

  • 学习 Cursor 的高级功能与实操场景。
  • 实操 Chrome 插件：图片四等分自动下载、Tab 自动分组。

收获：强化了对插件开发流程的理解，尤其是图像处理与浏览器管理两个典型场景。

Day 2：练提示词 + 做一个可展示的项目

  • 测试不同提示词写法的效果。
  • 制作并部署 AI 图像生成器网站（GitHub：https://github.com/macshion/flux-img）。
  • 用 Cursor 辅助创建博客：ChatGPT 生成内容。

收获：学会了“用提示词设计一个网站”，并完成日文博客的部署。线上预览（https://kann.jp/）。

Day 3：用一组小项目提升“产品实现思路”

  • 实操：计算器、贪吃蛇、解谜、侧边栏 AI 聊天、网页二维码。
  • 通过优化提示词，让 Cursor 更稳定地产出可用代码。

收获：逐步学会在实现功能时考虑用户体验与交互细节，让“能实现”走向“好用”。

下一步：面向真实需求做一个“有用的插件”

我在打卡里也记录了下一步方向：确定一个有实际用途的 Chrome 插件主题，做需求分析与开发计划后再开始基础开发。

5. 我常用的 5 类提示词模板（可直接复用）

5.1 让 AI 帮我“写功能”

1
2
3
4
5
6
7
8
你是一位资深软件开发人员。
请基于以下需求输出完整可运行的代码与文件结构：
1) ...
2) ...
要求：
- 运行环境：...
- 依赖管理：...
- 输出格式：请给出文件树 + 每个文件完整内容

5.2 让 AI 帮我“优化代码”

1
2
3
4
5
6
7
8
9
你是一位软件开发人员，请根据以下要求整理和优化代码：
目标：提高代码可读性，发现潜在错误和问题，降低维护成本，提高开发效率。
代码内容：
{实际代码}

要求：
1) 不改变对外行为（除非明确指出 bug）
2) 给出修改后的代码
3) 说明你改了什么、为什么

5.3 让 AI 帮我“修 Bug”

1
2
3
4
5
6
7
8
9
10
你是一名 Bug 修复专家，请找出以下代码中的 bug 并修复。
代码：
{实际代码}
问题：
{错误内容/报错堆栈/复现步骤}

目标：确保代码能够正常运行。
要求：
- 给出最小改动的修复方案
- 如果有多个可能原因，请列出排查顺序

5.4 让 AI 帮我“写注释 / 文档”

1
2
3
4
5
6
你是一名文档编写专家，请为以下代码编写文档与必要注释：
{实际代码}

要求：
- 给出模块职责、关键函数说明、参数/返回值
- 给出一个最小使用示例

5.5 让 AI 帮我“带我学习 / 出测试用例”

学习：

1
2
3
4
【角色】充当一名有丰富实战经验的 Python 工程师。
【背景】我是 Python 初学者，想系统入门。
【任务】请先列出初学者需要掌握的要点；当我输入某个知识点时，你扩展讲解并给例子。
【要求】通俗易懂，给常见代码示例，并在代码中添加注释。

测试用例：

1
2
3
4
5
6
7
你是一名测试工程师，以下是一个功能模块的代码，请为其设计测试用例。
代码内容：{代码内容}

要求：
- 用例覆盖：正常/边界/异常
- 给出输入、步骤、期望输出
- 如果适合，请补充自动化测试示例

6. 小结：把 AI 当成“高产的协作同事”

对我来说，AI 编程学习的核心不是背更多指令，而是把沟通方式升级成“可验收的需求表达”。

  • 写清楚角色、背景、任务、要求，模型会更像一个靠谱同事。
  • 用小项目练闭环，用打卡练节奏，用复盘练方法。