距离 ChatGPT 被发布已有两年之余，如何通过 AI 来对工作进行提效也已经成为了老生常谈的话题。好风凭借力，送我上青云。凭借着 AI 能力不断的快速增强的东风，本文也通过这个话题来进行简单的讨论，探讨如何通过 AI 来对工作进行“嵌入式提效”。
所谓嵌入式提效，就是能够通过 AI 的能力，对工作流程实现细致入微的赋能提效。就像是把 AI 当作方便面一样，能够无孔不入的嵌入任何需要被修复的物品之中，只不过被修复、增强的物品变成了我们的日常工作。
前端工作流分解
如果想进行嵌入式提效，就要先对我们日常的工作流进行拆分。
笔者以我司的大致前端工作流举例，把工作流简单的分为需求评审、逻辑梳理、排期、技术评审、开发、联调、测试、验收、上线几个步骤，本文则主要介绍开发、联调、测试、验收等环节的 AI 提效。
其他部分也有很大的增强空间，但因为需要更多的微调、更依赖个人经验等其他原因在本文中不再赘述.
如何通过 AI 来增强我们的开发环节？
如何用 AI 来增强我们的开发效率？这个问题从大模型被发布之时就一直是程序员们讨论的重点。
从最早的 Tabnine，再到 GitHub Copilot、ChatGPT、通义灵码，有无数的大模型，无数的插件被推出。
的确，从第一个生成式插件被发布开始，程序员们的开发过程就发生了翻天覆地的变化，开发效率也得到了高速增长。
我曾经是 Copilot 的忠实用户，但直到上个月，我中断了 Copilot 的订阅。
我一直在思考：如何将我项目的整体作为上下文让 AI 来提高我的开发效率呢？
无论是插件还是模型，都有一个缺点：它们最多只能通过文件的上下文来推断出当前文件的代码，而无法通过项目整体来分析你的意图。
如果是一个简单的逻辑方法还好，如果我想要在页面中引入一个组件，这些大模型通常不会把我现有的组件作为选项，而是会重新生成一个全新的组件，这显然不是我想要的。
就在前段时间，我再次了解到前端的全新的开发工具：「新一代的 AI 赋能的 IDE」Cursor。
Cursor
Cursor 的 codeBase 是整个工程
Cursor 最大的特点是：Cursor 的 codeBase 是整个工程。
是的，它能够解决上面我所提到的经典问题：把整个项目作为上下文进行 AI 分析。
Cursor 的这个特点为我们带来了巨大的便利。
假设时间回到了 22 年的 2 月份，我成为了一个刚刚入职的新人。我的第一个任务是对官网进行迭代，但是我对这个项目一无所知。
但是我们可以给予一点来自未来的帮助：我可以使用 Cursor 来进行开发。
于是我点击 Command + L，在输入框中输入：我是一个刚刚接手此项目的新人，请你详细的帮我梳理一下这个项目的流程。
几乎是接一杯水的功夫，整个项目的逻辑就被展示在我的眼前。
我继续把改动点添加到对话中，Cursor 则直接把具体的代码的改动交给我。
更自动的接口文档生成器
这是我的一个 node 项目，我之前把它当做我的毕设的服务端。
假设我现在遇到了这样一个问题：时间太久了，我已经把整个项目全部忘记了。我连这个项目里面曾经有什么接口，有什么功能都不记得。
这时，Cursor 就派上了用场，我可以直接 Command + L，直接输入我的 prompt：请为我梳理一下这个项目的接口文档，直接以 JSON 格式返回即可。
只需要很短的时间，整个项目的接口文档就已经被准确的生成，我们也可以对这个 JSON 继续进行提问。
更加精准的代码补全、更加精准的智能纠错、更加精准的 Chat
同时因为 Cursor 通过分析整个项目，我们也会获得更加精准的代码补全、更加精准的智能纠错、更加精准的 Chat，笔者在此处则不再赘述，各位可以直接通过 Cursor 的免费试用进行体验。
你现在拥有了更加友好的 AI 协作方式
如果我想要生成一个功能，我不需要再按下 Command + Shift + C 打开 ChatGPT，再把 ChatGPT 的回复粘贴回 VsCode 中。我只需要按下 Command + K 即可打开 Cursor 的对话框，并把我的想法告诉 Cursor。
同时，如果我感觉 AI 的回答有哪里不妥，我还可以在同一个对话框里继续追问，直到我满意为止。
我想让 AI 帮我重构一个函数。
之前，我需要先选中整段代码，然后再复制到 ChatGPT 中，然后我需要把 AI 的回答与现有的逻辑进行比对，再将代码粘贴回编辑器中。
但在 Cursor 中，我只需要双击选中函数名称，按下 Command + L 就可以打开聊天框，并把我选中的函数作为上下文发送出去。
同时，我也可以对话框中@任意文件、任意方法，或是将整个项目作为上下文发送出去。
Cursor 使用小册
按理来说，我应该在此处用大量篇幅介绍 Cursor 的使用方法以及使用细节，但这让本不简洁的本文更加臃肿，并且网络上也有大量文章介绍 Cursor 的使用方法，所以本文在此处也不再赘述。
感兴趣的同学可以自行搜索。
Cursor 的缺点
介绍完 Cursor 的优点，我们现在也来讨论一下 Cursor 的缺点。
价格昂贵
Cursor 的订阅费每个月要 20 美元，再算上 OpenAI Plus 订阅的费用，每个月用在 AI 上面的订阅费至少要 40 美元。这对于在国内赚人民币的我们压力的确是有点略微庞大。
但我们也可以在后续考虑通过公司使用 Business 版本的 Cursor，只不过比较昂贵，每人每月需要 40 美元，公司可能不会支持；
隐私问题
虽然 Cursor 官方声称在隐私模式下不会有任何的代码被上传到云端，但是这个仍然取决于我们对 Cursor 的信任程度。
信则有，不信则无。
ai-better-git-commands
介绍完编辑器，我们再通过 ai-better-git-commands 这个例子来介绍如何使用 ai 来增强我们的 git 命令。
我之前提交代码的时候总是在想：我的 commit 信息到底应该怎么写？
可能我的修改时间跨度太长，文件更改的太多，我不想再一个一个文件的去 check 去看我到底改了什么。
于是我找到了 ai-better-git-commands 这个库，我就不用在去思考如何简短有力的去书写我的 commit 信息。
我只需要运行 ait commit 就可以自动运行从更改到 git push 之前的全部流程。
我们可以通过
brew tap shenyouxiangwai/ai-better-git-commands
brew install ai-better-git-commands
这两行命令来进行安装
这是一个使用 AI 来增强 git 命令的库。
这个库能够解决我前面的问题。
我不需要再殚精竭虑的思考如何去写 commit 信息，我只需要简单的运行ait commit，这个库就会自动帮我完成从git add到git push之间的全部步骤。
mac@mac ~/D/s/someProject (someBranch)> ait commit
yarn run v1.22.22
$ lint-staged
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
✨ Done in 2.45s.
Aborting commit due to empty commit message.
Success: Git commit created with message:
'feat: 新增详情位置显示逻辑，提升代码可读性和可维护性'
ai-better-git-commands 代码浅析
下面我们通过这个库来简单分享一下 AI 的嵌入式提效。
如果我们可以看到这个库的源码的话，我们可以看到：
shell
git add .
diff_output=$(git diff --staged)
if [ -z "$diff_output" ]; then
printf "\e[31mError: Staged changes are empty!\e[0m\n" >&2
exit 1
fi
json_data=$(jq -n \
--arg diff_output "$diff_output" \
--arg secret_key "$AIT_SECRET_KEY" \
'{diff_output: $diff_output, secret_key: $secret_key}')
...
function get_commit_message {
{
response=$(curl -s -w "\n%{http_code}" -X POST https://someUrl/someApi \
-H "Content-Type: application/json" \
-d "$json_data")
echo "$response" > /tmp/response_commit
} &
...
git commit -m "$commit_message"
printf "\e[32mSuccess: Git commit created with message:\n'$commit_message'\e[0m\n"
我们在获取到git diff的内容之后，通过请求服务端 API 之后获取到 commit 信息，然后再进行后续的操作。
python
@app.route('/someRoute', methods=['POST'])
@validate_secret_key
def get_commit_message():
data = request.json
diff_output = data.get('diff_output')
...
try:
result = get_ai_commit_message(diff_output)
commit_message = result["commit_message"]
return jsonify(commit_message=commit_message)
except Exception as e:
return jsonify(error=str(e)), 500
def get_ai_commit_message(diff_output: str) -> dict:
output = get_ai_completion(prompt=f"""
请分析以下 git diff 生成简短的提交信息，
提交信息需要从性能、写法、逻辑、代码结构、代码规范、代码质量、代码安全性、代码可读性、代码可维护性等方面进行分析，
注意格式：提交消息不要有任何的多余文字，但是要在前缀加上feat: 。
例如你分析出的提交信息为：优化代码逻辑，则只需要返回“feat: 优化代码逻辑”。
以下是diff信息：
{diff_output}
""")['raw_output']
return {"commit_message": output}
def get_ai_completion(prompt: str) -> dict:
...
request_data = {
"model": current_model["model"],
"messages": [
{
"role": "system",
"content": "你是一个帮助用户分析代码变更的助手，你的代码经验十分丰富，是一个处于行业顶端的前端工程师。"
},
{
"role": "user",
"content": prompt
}
]
}
...
try:
response = requests.post(api_endpoint, headers=headers, data=json.dumps(request_data), timeout=60)
response.raise_for_status()
data = response.json()
...
return {"raw_output": raw_output}
except requests.exceptions.RequestException as e:
raise RuntimeError(f"{current_model['name']} request failed: {str(e)}")
我们可以继续看到，在服务端接口中，我们通过拼装 prompt，再请求我们的 AI API 的服务，十分简单的就完成了一次工作流程。
就是这么简单，只需要一天或半天的工作量制作一个脚本，AI 就能够帮我完成之前困扰我很长时间的问题。我把这种通过脚本来使用 AI 进行工作提效的方式称为：嵌入式提效。
如何通过 AI 来稳固我的上线？
举例说明如何在开发过程中通过 AI 增强我们的开发效率之后，我们继续分享一下如何通过 AI 来稳固我们的上线。为了方便描述，这里我们把上线分为两种：「需要 QA 协助的 C 级上线」 与 「不需要 QA 协助的 D 级上线」。
相比于 C 级上线，D 级上线并没有 QA 来协助我们进行验证，所以测试的重任就全部落在了开发身上。
如果只是更改几处文案、修改几处样式还好；如果是涉及到了功能性的改动，比如前几天的我的 D 级上线：首页逻辑优化，我之前并没有做过相关的内容，改动的方法也涉及到了一些公用的方法，所以如何写好自测 case 成为了这个上线的重中之重。
在过去，我们检验我们的自测 case 的唯一方法是根据需求文档、视觉稿自己写 case，然后再去找经验丰富的 QA 来为我们的 case 进行检查与补充。
但是现在我们有了 AI，我们就可以通过 AI 来自动为我们的 D 级上线生成自测 case。
我们可以直接把需求文档、视觉稿、交互稿交给大模型，再让大模型直接把相应的 case 提交给我。
经过我的一段时间的实践，这一套流程主要有三个步骤：
- 让大模型通过PRD、视觉稿、交互稿更好的了解到这个需求的改动点都有哪些；
- 把改动点提交给大模型，让大模型知道我们的需求；
- 让大模型把我们的需求反馈给我们
以我正在进行的 订单详情重构 这个项目举例，如果走 D 级上线的话我应该要执行哪些步骤？
- 导出了这个需求的交互图，再通过 GPT 让大模型将图片用文字表达清楚；
- 再将交互图的文字描述、需求文档一起上传给 GPT，并将我的需求描述给大模型；
- 最后，大模型给我具体详细的回答
例如我的这个对话：
请根据以下提供的需求文档、交互稿和视觉稿，为该项目生成一份详细的自测用例表。自测用例应包含以下信息：
用例编号：唯一标识每个测试用例。
用例名称：简明描述测试目标。
前置条件：执行该用例前需要满足的条件或环境。
测试步骤：详细列出执行测试的具体步骤。
预期结果：每个步骤对应的预期结果。
实际结果：测试执行后的实际结果（此项可留空，待测试后填写）。
测试结论：通过或未通过（此项可留空，待测试后填写）。
备注：其他需要说明的信息。 请确保：
- 全面覆盖功能点：根据需求文档，列出所有需要测试的功能和场景。
- 考虑用户交互：依据交互稿，涵盖所有可能的用户操作路径和交互细节。
- 验证界面设计：参考视觉稿，检查界面元素是否符合设计要求，包括布局、颜色、字体和图标等。
请使用表格形式呈现自测用例。以下是项目的相关资料：
需求文档：
一些需求文档
交互稿摘要：
一些交互稿摘要
视觉稿摘要：
一些视觉稿摘要
我们可以按照上面的步骤来进行尝试并检验这套工作流程的效果。
如何通过 AI 来...？
我们可以利用大模型的能力，使其不仅能够理解我们的需求，还能识别我们对流程的改动，从而提升整个开发流程的效率。通过这种方式，AI 可以帮助我们完成各种开发任务，极大地减少人工投入，提高产出。
举个例子，我们可以将问题转化为：
「如何让 AI 自动为我生成联调 case？」 或是 「如何让 AI 来生成一份验收文档？」 等等。
这种灵活性让我们能够通过调整需求，利用 AI 来应对不同的任务需求。
如果按照相同的流程进行操作，只需将最终需求修改为生成验收文档，AI 就能够为我们提供一份详尽的验收文档，涵盖所有必要的信息和细节。同理，如果将需求更改为生成联调 case 表格，AI 也能够自动生成一份完整的联调 case 表格，确保各个联调环节都能被清晰地记录下来。
这种方法不仅能够灵活应对多种开发场景，还能够通过减少人工干预来提升效率，帮助团队快速交付高质量的工作成果。AI 在这样的任务中不仅是工具，更是我们开发流程中的重要助手。
总结
本文主要介绍了
- 前端工作流分解与痛点
• 传统 AI 工具难以理解项目整体上下文，开发、测试、验收环节亟需优化。
- Cursor
• 通过项目级别的上下文分析、自动生成接口文档和精准代码补全，提升开发效率。
- AI 增强的 git 工具为例的嵌入式提效
• ai-better-git-commands 自动生成 commit 信息，简化 git 操作流程。
- AI 在工作流程中的应用
• 自动生成自测用例、联调 case，优化无 QA 协助的 D 级上线流程。
AI 的未来展望
目前，我们在日常使用中面临的主要问题是：模型缺乏定制化、定制化训练不足。这就导致生成的代码、文档和其他内容过于通用。
在代码方面，虽然引入了 Cursor，可以通过增加上下文来部分解决定制化不足的问题，但就文档方面来说，定制化的需求仍然十分庞大。
所以，我从每个公司的角度而言，如果能
- 加强大模型的微调，实现更高程度的定制化
例如，我在生成 D 级自测用例时希望模型能生成更全面的回归测试用例。这就需要模型了解整个流程的所有细节和回归内容，同时需要 QA 部门提供详尽的测试用例。
- 构建统一的 AI 使用平台
开发一个内部的 Web 平台，集成 AI API 以及其他 AI 工具，为开发人员提供统一的接口和使用指南，来避免每个人与 ChatGPT 等工具单独交互，提高协作效率，降低沟通成本。
的话，每个员工的工作体验将会更好。
最后的话
展望未来，AI 技术一定会继续快速发展，我们也必须持续关注和投入新技术。希望能在以后看到越来越多的小工具，让 AI 真正能够为我们的工作环节添砖加瓦。
🙏
感谢大家观看。
