高阶版前端工程MCP工具调用方案提示词

角色定义与任务定位

角色：资深前端架构师 / AI工具链设计师
任务：以“构建高效、可解释、可复用的MCP（Model Context Protocol）工具调用方案”为生成目标，设计一套面向高阶前端工程场景的专业提示词。这套提示词用于指导AI模型（如代码生成、视觉设计辅助）在调用MCP工具时，能精准理解上下文、自动编排调用顺序、输出符合工程规范的结果。适用对象为有前端工程化经验的开发者或技术决策者。

适用场景

• 前端项目初始化阶段：自动生成MCP工具调用链路（如构建配置、API接口注册、状态管理集成）
• 调试与优化阶段：识别并修复MCP工具调用冲突或性能瓶颈（如重复调用、上下文丢失）
• 多工具协同工作流：设计复杂的MCP工具编排方案（如 lint → test → build → deploy）
• 行业应用落地：为金融、电商、医疗等前端领域定制MCP工具调用规范

核心提示词（可直接复制使用）

基础调用模板：

• “以资深前端架构师身份，为我设计一个MCP工具调用方案，要求：自动识别当前项目的前端技术栈（React/Vue/Angular），按优先级排序可用MCP工具，输出每一步的调用参数与回调逻辑，并标注错误处理策略。”
• “针对以下场景生成MCP工具调用序列：场景描述（如‘将TypeScript代码编译为ES Modules，并生成.d.ts类型声明’），需包含工具名称、输入参数格式、期望输出类型，以及上下文传递规则。”

高阶控制指令：

• “添加上下文记忆机制：调用时携带历史调用链的摘要信息（最多最近5步），并自动过滤重复上下文。”
• “支持条件分支：根据前一步输出结果（成功/失败）动态选择下一步调用的MCP工具，输出伪代码形式的条件路由图。”

风格方向

• 技术理性风： 强调逻辑清晰、标注精确（参数类型、返回值、异常码），使用等宽字体排版，背景采用深色主题（#1e1e2e），辅以蓝绿渐变色强调连接线。
• 信息图表风： 以流程图或时序图呈现调用链，节点包含工具图标（扁平均带投影），箭头标注数据流向与状态码。
• 极简文档风： 仿GitHub README排版，以Markdown语法块展示核心命令，左侧保留交互式侧栏显示上下文状态。

构图建议

• 主视觉： 采用分割布局——左侧列出MCP工具列表（图标+名称），右侧用瀑布流展示调用顺序，每个工具卡片下方用虚线连到下一个。
• 聚焦区域： 突出显示关键上下文传递节点（如“全局状态对象”），使用发光边框或渐变色背景。
• 辅助元素： 在画面上方添加当前上下文快照（JSON片段），并用箭头指向当前调用的工具；下方放置错误捕捉模块，使用红色警示色与“retry”按钮。

细节强化

• 材质与纹理： 采用磨砂玻璃效果（backdrop-filter: blur）模拟半透明上下文面板；工具卡片加入微妙的网格线纹理，体现工程感。
• 动态提示： 加入“调用耗时”进度条（从左到右填充），并标注历史平均耗时。
• 标注与注释： 每个工具调用旁添加“上下文摘要”标签，例如“当前携带了 userAuthToken 与 projectConfig”。
• 交互暗示： 在可点击的MCP工具上绘制“点击可查看详细参数”的悬浮提示（tooltip样式）。

使用建议

• 图像生成场景： 将上述“核心提示词”直接输入AI绘图工具，补充：“请输出一张横版16:9的科技感界面图，包含上述所有视觉元素，配以等宽字体标注‘MCP Call Sequence’”。
• 设计系统对齐： 可根据实际项目品牌色替换主色调（如金融行业改用深蓝+金色，医疗行业用浅绿+白色）。
• 输出格式： 优先要求AI生成SVG或Figma可编辑矢量稿，以便后续调整工具图标与连接线位置。
• 迭代优化： 若初始结果中上下文传递不够清晰，可在提示词后追加“为每个调用节点增加输入/输出摘要框，并标红上下文不一致处”。