《60天AI学习计划启动 | Day 34: 前端 Prompt 模板 & 配置化（可复用提示词系统》

Day 34：前端 Prompt 模板 & 配置化（可复用提示词系统）

学习目标

• 梳理 前端侧 Prompt 的“可配置 + 可复用”方案
• 掌握 Prompt 模板 + 占位符参数（类似 i18n）
• 会做 一个简单的「Prompt 模板选择 + 参数填充」数据模型

---

核心知识点

• 1. Prompt 模板抽象

  • 抽象为：id + name + description + template + params[]
  • template 里用占位符：{{question}} / {{language}} / {{tone}}
  • 由前端负责渲染：renderPrompt(template, params) → 最终字符串

• 2. 配置化存储

  • 可本地 JSON / 远端接口，下发到前端：

    interface PromptParam {
      key:string; label:string; required:boolean; defaultValue?:string
    }
    interface PromptTemplateCfg {
      id:string; name:string; description:string
      template:string; params:PromptParam[]
    }
    

  • 支持按场景分类：code_assistant / doc_summary / bug_explain

• 3. 简单渲染函数

  export function renderPrompt(tpl:string, vars:Record<string,string>) {
    return tpl.replace(/{{(\w+)}}/g,(_,k)=>vars[k] ?? '')
  }
  

---

小作业（建议）

• 作业 1：定义 3 个 Prompt 模板配置（code/doc/bug）

  • 如：code_review, doc_summary, bug_explain，各写出 template 和 params

• 作业 2：写一个前端“选择模板 + 填参数 + 预览 Prompt”的最小模型

  • 不用写 UI，先写状态结构：selectedTemplateId + formValues + finalPrompt

• 作业 3：把你最近常用的那几类提问改成 Prompt 模板

  • 例如「帮我解释这段报错」「帮我重构这段代码」「帮我为这段代码生成测试用例」

---

明日学习计划预告（Day 35）

• 主题：前端 AI 调试面板（日志 / 请求回放）
• 内容：
  • 在前端记录每次请求的 prompt + response + 用时
  • 做一个简单的「查看最近 N 次对话原始 payload」调试面板