React 工程化与 Prompt（第 3-4 周）

目标：让 Prompt 变成可配置、可回滚、可评测的工程资产。

学习目标

这一节的核心是把“一次能跑通”的 Prompt，升级成“长期可维护”的 Prompt。
小白最容易踩的坑是：把 Prompt 写死在代码里，遇到效果波动时只能改一堆文件，最后连自己都不知道哪个版本好。
所以这里强调文件化、校验、评测，目的是让你以后每次改动都有证据可对比。

Prompt 文件化（不是写死在组件里）
输出结构化（JSON Schema / Zod）
失败样本可回收，可做回归

模板组织方式

建议目录：

这一段目录示例要解决的是“Prompt 可维护”问题。
如果不做文件化，Prompt 往往散落在组件和接口里，后续很难回滚和比较版本效果。

prompts/
  prd.v1.txt
  prd.v2.txt
  summary.v1.txt

并维护一个注册表：

注册表是“控制面板”，作用是告诉系统当前每个任务启用哪个版本。
这样你可以在不改代码的前提下切换模板，做灰度和 A/B 测试。

{
  "prd": { "active": "v2", "path": "prompts/prd.v2.txt" }
}

输出校验与重试

下面代码体现的是最小质量闸门：

拿到模型输出先做 JSON 解析
校验不通过就重试（避免瞬时格式波动）
连续失败就抛错误并记录失败样本

它的核心价值是把“偶发格式错误”从线上用户侧转移到系统内部处理。

for (let i = 0; i < 2; i++) {
  const raw = await callLLM(prompt);
  const parsed = tryParseJSON(raw);
  if (Schema.safeParse(parsed).success) return parsed;
}
throw new Error("E_SCHEMA");

最终你得到的不是“偶尔可用”，而是“可预期可追踪”的输出链路。

模板渲染代码示例

type PromptParams = {
  productName: string;
  audience: string;
  format: "markdown" | "json";
  tone: "professional" | "friendly";
};

export function renderPrompt(tpl: string, p: PromptParams) {
  return tpl
    .replaceAll("{{productName}}", p.productName)
    .replaceAll("{{audience}}", p.audience)
    .replaceAll("{{format}}", p.format)
    .replaceAll("{{tone}}", p.tone);
}

Prompt 流程图

最小评测闭环

评测闭环可以简单理解为“给 Prompt 做单元测试”。
你提前准备一批真实输入样例，每次改 Prompt 后都跑一次，就能知道效果是变好了还是变差了。
这样做会让你的迭代从“靠直觉”变成“看数据”。

准备 20 条真实输入样例
记录 JSON 合格率、平均耗时
每次改 Prompt 后跑回归并对比指标

评测脚本示例

type EvalCase = { input: string; expectFields: string[] };

export async function runEval(cases: EvalCase[]) {
  let pass = 0;
  for (const c of cases) {
    const raw = await callLLM(c.input);
    const parsed = tryParseJSON(raw);
    const ok = c.expectFields.every((f) => f in (parsed || {}));
    if (ok) pass += 1;
  }
  return {
    total: cases.length,
    pass,
    passRate: Number((pass / cases.length).toFixed(4)),
  };
}

验收标准

Prompt 支持版本切换与回滚
输出不合法时能自动重试并可追踪失败原因
有最小评测报表（至少两项指标）

目录​

学习目标​

模板组织方式​

输出校验与重试​

模板渲染代码示例​

Prompt 流程图​

最小评测闭环​

评测脚本示例​

验收标准​

目录