体验码道MCP&Skill，高德 MCP 智能行程规划

一、环境和资源准备

1.1 安装&登录华为云码道IDE

参考《华为云码道部署与本地基础环境搭建》完成华为云码道部署与本地基础环境搭建。

1.2 获取高德地图 Key

1. 登录高德开放平台https://lbs.amap.com/api ，点击页面右上角的「控制台」。

2. 在控制台左侧选择 账号中心 -> 账号认证 -> 个人开发者认证 ，进行认证。

3. 认证通过后在左侧导航栏中选择 应用管理 -> 我的应用。点创建新应用，编辑应用名称和应用类型，然后点新建应用创建。

4. 应用创建完成后，点击应用条目右侧的 添加 Key 按钮。填入 Key 的名称，将 服务平台 设置为 Web 服务，勾选 阅读并同意 高德地图开放平台服务协议 和 高德地图开放平台隐私权政策 选框，然后点击 提交 按钮。

5. 创建成功后，即可在列表中查看高德地图 Key。

注意保存高德地图 Key，后续步骤中会用到。

1.3 码道安装高德MCP服务

码道IDE界面，右上角打开设置，左侧选择「MCP工具」，MCP Server界面右上角点「配置MCP」。

系统自动打开mcp_settings.json，参考如下代码替换原有配置（注意替换 高德地图 Key 值）。

 {
"mcpServers": {
 "amap-maps-streamableHTTP": {
"url": "https://mcp.amap.com/mcp?key=高德地图 Key",
"type": "streamableHttp"
 }
}
  }

替换完成后 Ctrl+S 保存配置文件，返回设置界面「已安装」页签，确保高德地图MCP Server为可用状态（绿点），若状态不可用可重启MCP服务。

1.4 安装skill

对话码道，发送如下prompt，安装ui-ux-pro-max skill：

请帮我安装 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git 这个 skill 到 CodeArts，要求最终在个人级技能列表中可见。具体步骤如下：
1. 克隆仓库到 ~/.codeartsdoer/skills/ui-ux-pro-max（注意：目录名用 ui-ux-pro-max，不是 ui-ux-pro-max-skill，需与 SKILL.md frontmatter 中的 name 字段一致）：
   git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git ~/.codeartsdoer/skills/ui-ux-pro-max
2. 进入目录，使用 universal 模式初始化：
   cd ~/.codeartsdoer/skills/ui-ux-pro-max && npx ui-ux-pro-max-cli init --ai universal
3. 将生成的 SKILL.md 从嵌套路径复制到 skill 根目录（CodeArts 只识别根目录的 SKILL.md）：
   cp .agents/skills/ui-ux-pro-max/SKILL.md ./SKILL.md
4. 在 ~/.codeartsdoer/skills/UserSkillStatus.txt 末尾追加注册行（注意换行）：
   echo "ui-ux-pro-max=true" >> ~/.codeartsdoer/skills/UserSkillStatus.txt
5. 验证：调用 listSkills 工具确认 ui-ux-pro-max 出现在列表中，scope 为 user，status 为 enabled。

注意：ui-ux-pro-max skill安装完成后，可在「设置」 > 「技能与规则」 > 「个人级」中进行查看。

二、对话码道，开发旅游助手

2.1 对话码道，开发旅游助手

打开码道IDE，选择氛围编程（Vibe-Coding）模式。在对话框中输入以下提示词：

我计划2026年10月17日至24日到南京旅游，帮我制作旅行攻略应用，考虑出行时间和路线，以及天气状况路线规划。 通过python和html生成一个web服务，页面包含天气卡片展示3天的天气详情以及旅行小贴士，展示每天的旅行计划，每天安排3个景点。 制作网页地图自定义绘制旅游路线和位置。 网页使用简约美观页面风格，景区图片以卡片展示。同一天行程景区之间我想打车前往。生成应用后自动运行打开，无需手动安装其他依赖。

点击码道对话框右下侧的提示词优化按钮，码道自动梳理和优化提示词。优化过后的提示词如下：

我计划于2026年10月17日至10月24日前往南京旅游，共8天。请使用Python和HTML/CSS/JavaScript为我生成一个完整的旅行攻略Web应用服务，具体需求如下：

**一、出行与路线规划**
1. 根据南京热门景点，为8天行程中每天安排3个景点，合理规划游览顺序，确保同一天内景点之间的地理路线连贯。
2. 同一天行程中景点之间的出行方式为打车，请在路线规划中体现打车距离与大致耗时。
3. 结合10月中旬南京的历史天气特征，提供天气状况参考，用于辅助路线规划。

**二、天气展示模块**
1. 页面顶部以卡片形式展示旅行期间3天的天气详情（包括温度、天气状况、风力、湿度等）。
2. 每张天气卡片附带与当日天气相关的旅行小贴士（如穿衣建议、防晒/防雨提醒等）。

**三、行程展示模块**
1. 以日期为维度，逐天展示旅行计划，每天列出3个景点的名称、简介、推荐游览时长。
2. 景区图片以卡片式布局展示，图片需清晰且与景点对应。
3. 页面整体风格采用简约美观的设计语言，配色协调，排版清晰，具备良好的移动端适配能力。

**四、地图与路线绘制模块**
1. 在网页中嵌入自定义地图，标注所有计划游览景点的地理位置。
2. 在地图上绘制每日旅行路线，用不同颜色或图例区分不同日期的行程。
3. 标注同一天景点之间的打车路段。

**五、运行与部署要求**
1. 生成的应用应支持自动运行并自动在浏览器中打开，用户无需手动安装额外依赖包或进行复杂配置。
2. Python端作为Web服务器提供页面服务，前端页面由HTML/CSS/JavaScript构成。

请基于以上需求，综合考虑南京景点的实际分布、10月天气特点以及打车出行的实际情况，生成完整的可运行应用。

优化过后的提示词会更加的整洁干净，逻辑清晰。

编码完成后，自动启动程序。

2.2 优化页面设计

对话码道，使用ui-ux-pro-max skill优化页面设计。

请使用ui-ux-pro-max skill优化页面设计。