AI 赋能 WebGIS 开发：CodeBuddy SKILL最佳实践

在现代 WebGIS 开发中，前端 UI 的繁琐状态管理与底层地图引擎（如 Mapbox GL、OpenLayers）的复杂空间逻辑常常让开发者面临极高的认知负荷。随着 AI 辅助编程工具的演进，CodeBuddy 引入了 “Skill（技能）” 这一核心概念，将零散的提示词工程（Prompt Engineering）封装为可复用、标准化的能力模块。

本文将从基础的安装配置讲起，带你了解官方推荐的高阶 Skill，并手把手教你如何利用 skill-creator 打造基于 Element Plus 的 UI 规范和 Mapbox GL 专属开发技能，最后结合 RTCO 框架 进行实战演练。

1. CodeBuddy Skill 的安装与集成架构

在 CodeBuddy 中，Skill 并非随意的文本片段，而是深度集成到工作流中的上下文约束。为了满足不同层级的复用需求，CodeBuddy 提供了两种 Skill 继承与安装模式：

1.1 用户级 Skill (Global Skill)

用户级 Skill 属于全局配置，适用于通用的开发习惯、代码审查规范或跨项目的高频操作。

安装路径：C:\Users\{username}\.codebuddy\skills （Windows）或 ~/.codebuddy/skills （Mac/Linux）。
应用场景：无论你打开哪个工程，这些 Skill 都会默认挂载，随时可用。

1.2 项目级 Skill (Project Skill)

项目级 Skill 是与具体代码仓库深度绑定的，通常用于约束当前业务线的特定架构、UI 框架版本或特定的地图引擎标准。

安装路径：当前项目根目录下的 .codebuddy/skills。
应用场景：非常适合团队协同。将该目录提交到 Git 仓库后，团队中所有使用 CodeBuddy 的成员都将共享同一套代码生成规范，保证代码风格的高度统一。

2. 高效开发利器：常用 Skill 推荐

在开始自定义之前，强烈建议先引入业内顶级的开源 Skill 库。这里重点推荐两大阵营的 Skill：

Vue JS 官方 AI Skills (https://github.com/vuejs-ai/skills)：涵盖了 Vue3 最佳实践、Pinia、Router 及测试规范。
Anthropics SKILL 库 (https://github.com/anthropics/skills)：由 Claude 背后的团队打造，包含了一系列极具参考价值的元技能。

在 Anthropics 的库中，有两个 Skill 对我们的 WebGIS 前端开发至关重要：

frontend-design (前端设计规范)：它赋予了 AI 设计师般的视角，使其在生成前端代码时，不仅仅是堆砌标签，而是严格遵循现代 UI 的排版、色彩心理学和响应式布局原则。
skill-creator (技能创造者)：这是一个“元技能”（Meta-Skill）。 它的作用是利用 AI 来编写高质量的 AI Prompt。在日常开发中，我们只需提供粗略的需求和参考文档，skill-creator 就能自动输出结构严谨、约束明确的 .mdc 或 SKILL.md 技能定义文件。这是我们后续生成专属业务 Skill 的核心引擎。

3. 定制化赋能：使用 skill-creator 生成专属 Skill

现有的开源 Skill 往往是通用的，但在实际 WebGIS 项目中，我们需要 AI 严格遵循公司的 UI 规范，并精通我们所使用的地图引擎（如 Mapbox GL）。接下来，我们将使用刚刚提到的 skill-creator 来生成这两个专属 Skill。

3.1 打造企业级 UI 规范 Skill (基于 Element Plus)

为了让 AI 每次生成的控制面板都不偏离团队的设计系统，我们需要将 Element Plus 的 SCSS 变量库与 frontend-design 融合，创建一个名为 element-ui-standard 的专属技能。

参考文件

在 CodeBuddy 中的对话指令如下：

**任务要求**：请调用 `skill-creator` 能力，结合提供的 Element Plus UI 基本 SCSS 规范（var.scss），生成一个严格遵循该规范的 UI Skill 文件。
**约束**：确保未来 AI 调用此技能生成的 UI 组件，在布局 (margin/padding)、色彩 (primary/success/warning)、字体排版和交互方式上，100% 映射到上述 var.scss 中的 CSS 变量，严禁 AI 自由发挥写死十六进制颜色。请输出完整的技能定义代码。

3.2 构建 WebGIS 专属地图引擎 Skill (基于 Mapbox GL)

由于 Mapbox GL JS 的 API 极其庞大且存在严格的图层 (Layer) 与数据源 (Source) 分离逻辑，直接让 AI 写代码极易出现上下文错乱。我们可以参考优秀的高德地图 AI 技能框架，让 skill-creator 帮我们生成一个专业的 Mapbox GL 技能。

参考文件

https://clawhub.ai/lbs-amap/amap-jsapi-skill

在 CodeBuddy 中的对话指令如下：

**任务要求**：
请参照高德地图 JS SDK 的技能结构框架，使用 `skill-creator` 生成一个名为 `mapboxgl-expert` 的使用技能文件。
**约束**：
1. 技能必须涵盖 Mapbox GL v3 的核心功能范式，包括：地图实例化、Style URL 配置、Maker 添加。
2. **核心重点**：必须向 AI 强调 Mapbox 的核心渲染哲学——先 `addSource` 定义 GeoJSON 数据，再 `addLayer` 绑定渲染图层。
3. 包含 Mapbox 独有的交互事件处理（如图层 click、mouseenter 的 Feature 获取）以及常用控件（NavigationControl）的注册方式。
请保持结构清晰，附带标准代码示例，输出完整的技能定义文件。

mapboxgl

将上述生成的两个文件保存到 .codebuddy/skills 目录下，你的 AI 就正式完成“进化”，成为了既懂公司 UI 规范，又精通 Mapbox 开发的 WebGIS 专家了！

4. 融会贯通：Skill 的实战使用与 RTCO 提示词

当 Skill 安装完毕后，我们该如何发挥它们的威力？在日常业务开发中，我们不需要再在 Prompt 中长篇大论地解释什么是 Mapbox、什么是 Element Plus 变量。我们只需要结合 RTCO 框架 (Role 角色 - Task 任务 - Context 上下文 - Output 输出)，并在上下文中直接 @ 引用我们刚刚创建的 Skill 即可。

实战场景：开发一个带 UI 控制面板的 POI 矢量地图组件

在 CodeBuddy 的对话框中，输入以下高阶 RTCO 提示词：

# 角色 (Role)
你是一位资深的前端 WebGIS 工程师，精通 Vue3、Element Plus 以及 Mapbox GL。

# 任务 (Task)
请帮我开发一个完整的 Vue3 单文件组件 (SFC)。该组件左侧是一个业务控制面板，右侧是撑满全屏的 Mapbox 地图。控制面板需要包含两个按钮，分别用于切换地图底图，并提供一个滑动条用于控制指定图层的透明度。

# 上下文 (Context)
1. **UI 规范**：请严格应用项目内的 `element-ui-designer`技能。所有的按钮、滑块、面板边距必须使用 Element Plus 组件，且样式覆盖时必须使用 var.scss 中的原生 CSS 变量（如 var(--el-color-primary)）。

2. **地图规范**：请严格应用项目内的 `mapbox-gl`。
   - 默认中心点为 [116.39, 39.9]，缩放级别 10。
   - 使用 `addSource` 加载一份 Mock 的 GeoJSON 点位数据（表示医院）。
   - 使用 `addLayer` 渲染该数据，表现为圆点 (circle)。
3. **交互逻辑**：滑块(Slider)绑定的响应式变量需通过 `map.setPaintProperty` 实时动态改变医院圆点图层的透明度。

# 输出 (Output)
1. 输出完整的 Vue3 `<template>`, `<script setup lang="ts">` 和 `<style scoped>` 代码。
2. 代码需保证 Mapbox 实例不要被 Vue 的 reactive/ref 深度劫持（请使用 shallowRef）。
3. 请为核心的 GIS 逻辑步骤（添加源、添加图层、动态样式）添加中文注释。

效果解析：

通过这种方式，你将繁杂的设计规范和底层 API 细节交给了底层的 Skill去处理，将宏观的业务逻辑交给了 RTCO 提示词。CodeBuddy 将毫无悬念地为你生成一份结构优雅、样式统一且不卡顿的专业 WebGIS 代码，实现开发效率与代码质量的双重跃升！

demo

仓库地址：

https://gitee.com/lzugis15/lzugis-skills

AI 赋能 WebGIS 开发：CodeBuddy SKILL最佳实践