最近用通义灵码搭配高德 MCP 平台完成了一个北京端午出游攻略网页的开发，从环境配置到最终页面呈现，短短半小时的过程充满了探索与收获，今天就来分享这段实践经历。

 

一、环境准备：从插件安装到服务连接

 

本次实践使用的开发工具是 VSCode。

 

首先，在 VSCode 中安装「通义灵码 MCP」插件并完成账号登录，在插件对话中点击MCP tools,接着需要配置高德 MCP 服务，

 

这一步得先去高德开放平台创建应用并获取 API Key（如图，在高德开放平台控制台“我的应用”中点击“创建新应用”，并为应用添加 Key，选择“Web服务”等相关配置）。

 

 

 

 

 

拿到 API Key 后，在通义灵码的 MCP 配置中手动添加服务（如图，选择“Add manually”），类型选择“SSE or Streamable HTTP”，Server URL 格式为  https://mcp-amap.com/sse?key=你的高德API密钥 

 

 

 

 

刚开始我因地址格式写错，一直提示“无法连接 MCP 服务”，修改正确格式后成功连接，面板中出现了 MCP 控制界面（如图，通义灵码中开启 Agent 模式，准备对接 MCP 服务）。

 

二、生成出游攻略网页：从提示词迭代到页面优化

 

服务连接成功后，我在通义灵码中输入了详细的需求提示（如图，在 Add Context 中明确“北京3天端午节旅行攻略”“网页包含天气卡片、旅游路线地图、简约美观风格”等需求）。

 

 

通义灵码很快生成了 HTML 代码（如图，灵码根据提示返回了完整的网页代码结构），但第一次生成的页面并不完美：排版略显混乱、色彩搭配不够协调、标题与主题契合度不足。

 

 

于是我不断调整提示词，比如补充“简约风格”“天气卡片需展示温度、湿度、天气状况”“旅游路线在高德地图中自定义绘制”等细节，同时结合自己对前端布局的理解，在代码中调整样式，最终得到了满意的页面（如图，浏览器中打开的网页展示了清晰的天气卡片），还有实用的旅行贴士（如图，网页中“Travel Tips”板块包含出行打包、交通、票务等建议）。将最终文件命名为  travel_tips.html  后，一个包含天气、路线、旅行贴士的出游攻略网页就完成了。

 

 

三、实践体会：工具与人工的协作艺术

 

这次实践让我对 AI 开发工具的应用有了更深刻的理解：

 

- 效率提升显著：从网页框架到基础功能代码，通义灵码几乎可以自动生成，大大节省了从零开始编码的时间。

- 提示词是关键：生成结果的质量和需求的匹配度，很大程度上取决于提示词的详细程度和精准度，需要不断迭代优化。

- 人工调试不可少：AI 生成的代码并非完美，像页面布局、色彩搭配这些细节，仍需要人工介入调整，这也让我对网页结构和前端样式的理解更深入了。

- API 认知更清晰：通过配置高德 MCP 服务，我对“API 密钥的作用”“服务接口的调用逻辑”有了更直观的认知。

 

四、总结：智能工具时代的开发者定位

 

这次实践让我明白：再智能的工具，也需要人的判断、设计与优化。

 

通义灵码和高德 MCP 这样的工具，是开发者提升效率的“利器”，但不能完全替代人的思考。未来在开发更复杂的项目时，我会更注重提示词的打磨，同时保持对代码和设计的把控力，让工具真正成为助力而非依赖。