Prompt 编程实战:用 AI 10 分钟开发 Chrome 插件

0 阅读5分钟

AI 应用开发工程师:用 Prompt 编程与 LLM 协作打造智能生产力

引言:不做传统程序员,做 AI 驱动的开发者

在 AI 时代,编程的方式正在发生革命性的变化。传统的“手写每一行代码”的模式逐渐被 AI 驱动的智能编程 取代。作为 AI 应用开发工程师,我们的核心目标不再是机械地写代码,而是:

  • 用自然语言(Prompt)驱动 AI(如 Claude、DeepSeek、GPT)生成代码
  • 让 AI 自动完成测试、注释、部署等任务
  • 打造 AI 自动化应用(如 Chrome 插件、AIGC 工具)

本文将介绍如何用 Prompt Engineering(提示词工程)  高效开发 AI 应用,并分享 AI Code Copilot(AI 编程助手)  的最佳实践。


1. 为什么 AI 应用开发工程师 ≠ 传统程序员?

传统程序员需要:
❌ 手动写大量重复代码
❌ 自己调试、优化、测试
❌ 学习复杂框架,记忆 API

而 AI 应用开发工程师
✅ 用自然语言描述需求,AI 生成代码(如 Claude Sonnet 特别适合代码生成)
✅ 让 AI 自动优化、注释、测试(如 GitHub Copilot、DeepSeek)
✅ 专注业务逻辑,而非底层实现

核心差异:

  • 传统开发:人写代码,机器执行
  • AI 开发:人用 Prompt 指挥 AI,AI 写代码

2. Prompt Engineering:自然语言编程

Prompt(提示词)是与 AI 沟通的核心工具。好的 Prompt = 清晰的指令 + 具体任务 + 规则约束

2.1 如何写出高效的 Prompt?

(1)给 AI 一个身份

让 AI 像专家一样思考,例如:

"你是一名资深 Chrome 插件开发者,请帮我开发一个自动高亮网页关键词的插件。"

(2)明确任务(RW:Request & Workflow)
  • Request(请求) :要做什么?
  • Workflow(流程) :分步骤细化需求

示例(Chrome 插件开发):

"开发一个 Chrome 插件,功能如下:

  1. 用户输入关键词(通过 popup 输入)
  2. 自动高亮网页中的所有匹配词
  3. 支持自定义高亮颜色
  4. 提供开关按钮,一键关闭高亮
    请用 Manifest V3 实现,并给出完整代码。"
(3)遵循规则,避免模糊

✅ 清晰:分步骤描述
✅ 具体:给出技术细节(如 "用 Manifest V3")
❌ 模糊:避免 "做一个好用的插件" 这种宽泛描述


3. AI 应用开发实战:Chrome 插件案例

Chrome 插件开发是 AI 应用工程师的高性价比方向,因为:

  1. 需求多(企业、个人都需要定制化插件)
  2. 代码量少(AI 可快速生成)
  3. 适合远程兼职/外包(很多公司愿意付费定制)

3.1 传统方式 vs. AI 方式

步骤传统开发AI 开发
需求分析自己查文档Prompt 描述需求,AI 建议方案
写代码手动写 JS/HTMLAI 生成 80% 代码
调试自己找 BugAI 分析错误并修复
测试手动测试AI 生成测试用例
部署手动打包AI 生成部署脚本

3.2 实例:用 AI 生成 Chrome 插件代码

Prompt 示例:

"你是一名专业 Chrome 插件开发者,请帮我实现一个网页关键词高亮插件。要求:

  • 使用 Manifest V3
  • 用户可在 popup 输入关键词
  • 高亮颜色可自定义(默认黄色)
  • 提供开关按钮
    请给出完整代码,并解释关键逻辑。"

**AI(如 Claude、DeepSeek)会返回:

javascript

// manifest.json
{
  "manifest_version": 3,
  "name": "关键词高亮插件",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab", "scripting"]
}

// popup.html(用户输入界面)
<input type="text" id="keyword" placeholder="输入关键词">
<button id="highlightBtn">高亮</button>
<button id="clearBtn">清除</button>

// content.js(高亮逻辑)
function highlightKeyword(keyword, color = "yellow") {
  const elements = document.querySelectorAll("body *");
  elements.forEach(el => {
    if (el.textContent.includes(keyword)) {
      el.style.backgroundColor = color;
    }
  });
}

AI 甚至会自动补充:

  • 如何打包发布到 Chrome 商店
  • 如何测试不同网页的兼容性

4. AI Code Copilot:让 AI 自动编程

GitHub Copilot、DeepSeek、Claude 等工具可以:
✔ 代码补全(写注释,AI 生成代码)
✔ 自动优化("这段代码如何优化?")
✔ 生成测试("请为这个函数写 Jest 测试")
✔ 自动部署("生成 Dockerfile 和 CI/CD 脚本")

4.1 最佳实践

  1. 让 AI 先写注释,再生成代码

    javascript

    // 1. 反转字符串
    // 2. 处理 Unicode 字符
    // 3. 返回处理后的结果
    function reverseString(str) {
      // AI 自动补全实现
    }
    
  2. 让 AI 检查代码质量

    "这段代码有哪些潜在 Bug?如何优化?"

  3. 让 AI 写自动化测试

    "请用 Jest 为这个 React 组件写单元测试。"


5. 未来趋势:AI 全栈开发

未来的开发流程可能是:

  1. 产品经理用自然语言描述需求
  2. AI 生成前端(React/Vue)+ 后端(Node.js/Python)代码
  3. AI 自动测试 + 部署
  4. 工程师只需调整业务逻辑

如何提前适应?

  • 学习 Prompt Engineering(比学框架更重要)
  • 掌握主流 LLM(Claude、DeepSeek、GPT)的编码能力
  • 实践 AI 自动化(如 Chrome 插件、AIGC 工具)

结语:AI 时代,编程方式已改变

传统程序员 关注 "怎么写代码",而 AI 应用开发工程师 关注:
🔹 如何用 Prompt 精准指挥 AI
🔹 如何让 AI 自动完成繁琐任务
🔹 如何打造智能化的 AI 应用

行动建议:

  1. 用 Claude/DeepSeek 生成一个 Chrome 插件(实践 Prompt 编程)
  2. 让 AI 优化你的旧代码(体验 AI 自动化)
  3. 尝试用 AI 写测试、部署脚本(减少重复劳动)

AI 不会取代程序员,但 会用 AI 的程序员会取代不用 AI 的程序员。🚀