第4章：交互与提示工程（高质量对话与上下文管理）

本章聚焦如何与MCP进行高质量交互：系统化设计提示词、分阶段协作、管理上下文与多模态输入，避免常见陷阱并建立可复用的模板库。读完本章，你能让模型稳定地产出符合验收标准的结果。

4.1 章节导读与目标

• 目标：掌握提示词结构化方法、分阶段工作流、上下文管理、多模态提示技巧。
• 产出：建立一套可落地的提示模板库与验收清单，并完成一套演练。
• 适用：代码生成、解释与调试、重构评审、文档与测试、UI到代码、多轮协作。

4.2 高质量提示的结构化方法

将提示拆解为六要素：角色、目标、输入、约束、输出、验收标准。

• 角色（Role）：定义模型的身份与风格。
  • 示例：
    • “你是资深前端工程师，关注语义化、可访问与响应式。”
• 目标（Goal）：清晰说明要达成的任务与范围。
  • 示例：
    • “为主页生成页面骨架与样式，并说明关键设计决策。”
• 输入（Input）：提供必要上下文与数据样例。
  • 示例：产品需求、设计草图、CSV字段说明、现有代码片段。
• 约束（Constraints）：明确规则与禁止事项。
  • 示例：
    • “不改动公共接口；变量命名遵循驼峰；避免内联样式；优先移动端。”
• 输出（Output）：指定结果格式与颗粒度。
  • 示例：
    • “输出HTML/CSS/JS分段代码块；附3点关键决策说明。”
• 验收标准（QA）：定义可核查的标准与检查点。
  • 示例：
    • “通过WAVE基本可访问检查；Lighthouse移动端性能≥90；无控制台报错。”

模板（可复用）：

角色：你是[角色]，遵循[风格/规范]。
目标：完成[任务]，范围包括[子任务列表]。
输入：
- 背景：[背景说明]
- 数据/代码/设计稿：[具体内容]
约束：
- [约束1]
- [约束2]
输出：
- [输出项1]
- [输出项2]
验收标准：
- [标准1]
- [标准2]

4.3 分阶段提示工作流（规划→生成→复核→执行→迭代）

• 阶段1 规划（Plan）：先让模型给出任务拆解、风险点、依赖与时间估算。
  • 示例提示：
    • “请先给出任务分解、关键风险与依赖清单，不要直接生成代码。”
• 阶段2 生成（Build）：按子任务逐步生成，避免一次性输出超长内容。
  • 技巧：先骨架后样式再交互；先接口定义再实现；先数据管道再可视化。
• 阶段3 复核（Review）：要求自我审查与对照验收标准列问题清单。
  • 示例提示：
    • “对照验收标准进行自检，列出问题与修复方案并迭代代码。”
• 阶段4 执行（Run）：在本地或沙箱执行；捕获报错并回传。
  • 技巧：提供日志/错误信息与期望行为，要求最小修复补丁。
• 阶段5 迭代（Refine）：根据反馈持续改进，明确只改动的范围与优先级。
  • 示例提示：
    • “仅在不改动A模块的前提下优化B的性能，给出对比指标。”

4.4 上下文管理策略（稳态与一致性）

• 系统提示固化规范：将编码标准、命名约定、目录结构、测试目标固定在系统提示中。
• 对话记忆结构化：使用“变更日志”与“决定记录（ADR）”维护历史选择。
• 文件与片段引用：为每次生成提供明确的文件路径与代码范围，避免漂移。
• 粒度控制：大任务分段输入；长上下文避免一次塞入全部内容。
• 指令锁定：重复声明不可变更部分，防止模型误改关键接口与协议。

变更日志模板：

# Change Log（日期/版本）
- 目标：[本次变更目标]
- 范围：[影响文件/模块]
- 决策：[关键设计与理由]
- 风险与缓解：[风险点/措施]
- 回滚方案：[触发条件/步骤]

4.5 多模态提示技巧（图像/语音/文件）

• 图像到代码（视觉到结构）：
  • 步骤：图像→结构说明→语义化布局→样式→交互→可访问性。
  • 提示示例：
    • “基于截图，先用文字描述DOM结构与布局意图，再生成HTML与CSS，并说明响应式策略与可访问考虑。”
• 语音到任务（语音摘要与行动）：
  • 步骤：转写→需求摘要→任务拆解→执行。
  • 提示示例：
    • “根据语音纪要生成会议行动项清单，并给出优先级与负责人分配。”
• 文件到管道（数据与代码）：
  • 步骤：文件清点→字段/接口说明→处理流程→脚本生成→复核。
  • 提示示例：
    • “读取data.csv字段说明，生成清洗与聚合脚本，并附运行与验证步骤。”

4.6 可复用提示模板库（常见任务）

• 代码生成：

角色：资深[语言/框架]工程师。
目标：实现[功能]，包含[模块/接口]。
输入：需求与约束：[具体条目]
输出：分段代码与简短说明。
验收：通过[测试/工具]检查，无控制台报错。

• 代码解释：

请解释以下代码片段的功能与复杂度：
[代码]
关注：边界条件、资源释放、错误处理。
若发现问题，给出最小改动修复建议。

• 调试与修复：

错误日志：[日志]
期望行为：[描述]
实际行为：[描述]
请定位根因并提供最小补丁与验证步骤。

• 重构与测试：

约束：不改动公共接口；提升可读性与内聚；覆盖率≥80%。
输出：重构原则、变更清单、测试用例与运行说明。

• 文档与评审：

输出：技术说明（目的/设计/权衡/限制）、API参考、变更记录。
风格：简洁中文，条理清晰，含示例。

4.7 复杂任务的对话模式（稳定推进）

• 思路树与决策表：
  • 让模型树状展开方案→评分→选择→执行，减少盲目生成。
• RACI职责划分：
  • 要求模型明确负责人（Responsible）、审批者（Accountable）、支持者（Consulted）、知情者（Informed），用于项目协作输出。
• 检查清单（Checklist）：
  • 将验收标准转为Checklist，让模型逐项自检并报告结论。

示例（Checklist片段）：

可访问性：语义标签、表单标签关联、颜色对比度通过？
性能：资源压缩、缓存策略、关键渲染路径优化？
安全：XSS/CSRF/SQL注入防护、鉴权与速率限制？

4.8 常见陷阱与反模式

• 含糊与范围漂移：目标不清或频繁改动导致输出混乱。
• 超长一次性输出：易出错与被截断，建议分段生成与复核。
• 未设验收标准：缺少可核查标准，难以评估质量。
• 忽略安全与合规：敏感数据直传、未做脱敏与权限控制。
• 缺少变更记录：多轮对话后难以回溯决策与影响范围。

应对策略：结构化提示、分阶段工作流、Checklist与ADR、限定范围与不可变更项、定义最小补丁。

4.9 实操演练（完整示例）

目标：根据文字需求生成一个响应式主页原型，并完成自检。

• 输入（需求）：
  • “主页含导航、Hero、三项功能卡片、页脚；浅蓝主题；移动优先；含基本交互（卡片悬停效果）。”
• 分阶段提示示例：
  1. 规划：
     • “列出任务拆解、依赖与风险，先不要生成代码。”
  2. 生成：
     • “输出HTML骨架与语义标签说明；再输出CSS与响应式策略；最后输出JS交互。”
  3. 复核：
     • “对照Checklist自检可访问性/性能/安全，并输出改进清单与最小补丁。”
• 验收清单：
  • 语义标签完整；移动端断点表现良好；无控制台报错；含3点关键决策说明。

4.10 快速验收清单（交互完成后）

• 是否使用了结构化提示（角色/目标/输入/约束/输出/验收）？
• 是否按规划→生成→复核→执行→迭代的顺序推进？
• 是否提供了必要的上下文与明确约束？
• 输出是否满足Checklist且可运行/可验证？
• 是否沉淀了模板与ADR，便于后续复用与审计？

4.11 小结与下一章预告

• 本章提供了高质量交互与提示工程的“方法论+模板+清单”。
• 核心要点：结构化提示、分阶段生成与自检、上下文稳态管理、多模态的分步转译。
• 下一章（第5章）将进入“编程实战基础”：以网页、数据分析、调试与重构为例，完成端到端练习并建立可复用的工程脚手架与测试。