Prompt—— 被 “高端术语” 包装的基础操作

1. 这词在唬谁？------ 被 "高端术语" 包装的基础操作

"提示词工程""精准 Prompt 优化""AI 话术设计"------ 这些词汇一出来，是不是瞬间觉得门槛拉满？仿佛要掌握一套神秘话术，才能让 AI 听话。但作为前端，咱们天天跟字符串打交道：拼接接口参数、渲染模板字符串、处理用户输入的动态替换，说白了，Prompt 的本质和咱们写的 ${username} 已登录没区别。

你以为的 "高端 Prompt"：请以专业前端工程师的视角，基于ES6语法，简洁明了地解释闭包概念，要求包含使用场景和避坑点

在前端眼里：你是{role}，请{requirement}：{content} ------ 无非是多了几个变量的模板字符串，跟渲染页面时的动态数据填充如出一辙。

那些被吹得神乎其神的 "Prompt 技巧"，比如 "明确角色""限定场景""补充上下文"，本质上都是在给模板字符串加固定参数和变量 ------ 这活儿咱们写组件、封装工具函数时早就练熟了。

2. 前端人话翻译：Prompt = 带模板的指令字符串

先给前端同学一个极简公式：Prompt = 固定指令模板 + 动态变量 + 上下文数据

咱们拆解一下：

固定指令模板：就是 "你是 XX 角色，按照 XX 规则处理内容" 这类不变的话术框架，比如 "你是前端技术顾问，用通俗易懂的语言解答问题，避免复杂术语"；
动态变量：用户输入的问题、选择的角色类型、配置的输出格式等，比如{question}（用户问题）、{outputType}（输出是文字 / 代码 / 表格）；
上下文数据：历史对话记录、之前的 AI 回复、用户的偏好设置等，比如拼接上一轮 "用户问 React Hooks 怎么用，AI 回复了基础用法"，让当前 Prompt 更连贯。

举个前端能秒懂的例子：

复制代码

// Prompt 模板函数
function generatePrompt(options) {
  const { role, requirement, content, history = [] } = options
  // 拼接历史上下文
  const historyStr = history
    .map((item) => `用户：${item.user}\nAI：${item.ai}`)
    .join('\n')
  // 模板字符串生成最终 Prompt
  return `你是${role}，请遵守以下规则：${requirement}。历史对话：${historyStr}当前用户需求：${content}请给出回复：`
}

调用这个函数：generatePrompt({ role: '前端面试官', requirement: '围绕React基础提问，难度适中，每次1个问题', content: '我想面试初级前端岗位' })

得到的 Prompt 就是：你是前端面试官，请遵守以下规则：围绕React基础提问，难度适中，每次1个问题。历史对话：当前用户需求：我想面试初级前端岗位，请给出回复：

这跟咱们写user，欢迎使用{user}，欢迎使用user，欢迎使用{appName}，您的余额${balance}元有任何本质区别吗？没有。Prompt 对前端来说，就是 "给 AI 用的模板渲染"。

3. 前端到底要懂到啥程度？------ 不用精通，够用就行

很多前端会焦虑："我要不要学遍所有 Prompt 技巧？会不会因为 Prompt 写得不好，做不了 AI 相关开发？"

答案是： 完全不用 。前端对 Prompt 的核心要求，就 3 个：

会写模板字符串：能把固定指令和动态变量拆分开，比如知道哪些内容是可配置的，哪些是固定不变的；
会做变量替换：能把用户输入、角色选择、历史记录等动态数据，准确拼接到 Prompt 模板里，不出现语法错误（比如引号嵌套、换行处理）；
会处理上下文：知道怎么把历史对话、用户偏好等数据加入 Prompt，让 AI 回复更连贯（本质就是数组遍历拼接字符串）。

至于那些 "如何让 Prompt 更精准""怎么优化话术让 AI 输出质量更高" 的技巧，交给产品经理和算法同学就好 ------ 他们负责定义 "{role} 应该填什么""{requirement} 要包含哪些规则"，咱们前端只需要把这些规则做成可配置的变量，封装成模板组件就行。

就像咱们写页面时，不用管产品经理为什么要设计这个按钮，只要按照需求把按钮的样式、点击事件、动态文案实现好 ------ Prompt 开发也是同理，不用纠结 "这个指令好不好"，只要能把产品定义的规则，用字符串拼接的方式准确传递给 AI。

4. 前端要写啥代码？------ 核心是 "模板封装" 和 "角色配置"

前端在 AI 项目中，关于 Prompt 的代码开发，主要集中在两个方向：Prompt 模板封装 和 角色 / 规则配置 。咱们用实际代码示例说明：

（1）封装可复用的 Prompt 模板组件

复制代码

// promptTemplates.js - 集中管理所有 Prompt 模板
export const PromptTemplates = {
  // 技术顾问模板
  techAdvisor: {
    base: '你是{role}，擅长{skill}，请{rule}回答用户问题：{question}',
    defaultParams: {
      role: '资深前端工程师',
      skill: 'JavaScript、React、Vue 等前端技术，问题排查、性能优化',
      rule: '用步骤化方式，结合代码示例，避免专业术语堆砌'
    }
  },
  // 文案编辑模板
  copywriter: {
    base: '你是{role}，为{scene}撰写{type}文案，要求{requirement}：{topic}',
    defaultParams: {
      role: '互联网文案编辑',
      scene: '产品推广、公众号文章、活动海报',
      type: '简洁、有吸引力、符合年轻人语境',
      requirement: '突出核心卖点，控制在 100 字以内'
    }
  }
  // 可扩展更多模板...
}

/**
 * 生成 Prompt 的工具函数
 * @param {string} templateKey 模板键
 * @param {Object} customParams 自定义参数（覆盖默认值）
 * @returns {string} 最终 Prompt
 */
export function createPrompt(templateKey, customParams = {}) {
  const template = PromptTemplates[templateKey]
  if (!template) throw new Error(`不存在的 Prompt 模板：${templateKey}`)

  const params = { ...template.defaultParams, ...customParams }
  let prompt = template.base

  Object.entries(params).forEach(([key, value]) => {
    prompt = prompt.replace(new RegExp(`\\{${key}\\}`, 'g'), value)
  })

  return prompt
}

（2）支持角色切换和上下文管理

复制代码

// useAIPrompt.js - React Hooks示例，管理Prompt相关逻辑
import { useState, useMemo } from 'react'
import { createPrompt } from './promptTemplates'

export function useAIPrompt() {
  // 存储历史对话，用于拼接上下文
  const [history, setHistory] = useState([])
  // 当前选择的角色模板
  const [currentTemplate, setCurrentTemplate] = useState('techAdvisor')
  // 自定义参数（比如用户设置的角色细分、回答规则）
  const [customParams, setCustomParams] = useState({})

  // 生成最终的Prompt（包含上下文）
  const finalPrompt = useMemo(() => {
    // 先通过模板生成基础Prompt
    const basePrompt = createPrompt(currentTemplate, customParams)
    // 拼接历史对话上下文
    const historyStr = history.map(({ user, ai }) => `用户：${user}\nAI：${ai}`).join('\n\n')
    return historyStr ? `${basePrompt}\n\n历史对话参考：\n${historyStr}` : basePrompt
  }, [currentTemplate, customParams, history])

  // 新增对话记录（更新上下文）
  const addHistory = (userInput, aiOutput) => {
    setHistory([...history, { user: userInput, ai: aiOutput }])
  }

  return {
    finalPrompt,
    setCurrentTemplate,
    setCustomParams,
    addHistory,
    clearHistory: () => setHistory([])
  }
}

（3）前端调用示例（对接 AI 接口）

复制代码

// 调用AI接口时，传入生成的Prompt
async function callAI(userInput) {
  const { finalPrompt, addHistory } = useAIPrompt()
  // 生成包含上下文和角色配置的Prompt
  const prompt = finalPrompt(userInput)
  // 调用AI接口（以OpenAI为例）
  const response = await fetch('/api/ai', {
    method: 'POST',
    body: JSON.stringify({ prompt }),
    headers: { 'Content-Type': 'application/json' }
  })
  const { data: aiOutput } = await response.json()
  // 新增对话记录，更新上下文
  addHistory(userInput, aiOutput)
  return aiOutput
}

从代码能看出来，前端做的工作，本质上还是咱们熟悉的 "组件封装""状态管理""字符串处理"------ 没有任何新的技术壁垒，只是把原来渲染页面的模板，改成了渲染给 AI 的 "指令模板"。

5. 一句话总结

Prompt 对前端来说，从来不是需要死记硬背的 "高端技巧"，而是用模板字符串封装角色规则、用变量替换填充动态内容、用上下文拼接保证对话连贯的基础开发工作 ------ 咱们只要会写${}，就能搞定 AI 项目里的 Prompt 开发。