【Skill 创作】生成鸿蒙图形开发代码 | 六大图形 Kit 一手掌握，让 AI 秒变鸿蒙图形专家

FIEforever · 2026 年6 月 4 日 03:29

【Skill 创作】生成鸿蒙图形开发代码 | 六大图形 Kit 一手掌握，让 AI 秒变鸿蒙图形专家

一、Skill 简介

harmonyos-graphics-development 是一个专为 HarmonyOS 图形领域开发打造的知识型 Skill，让 TRAE SOLO 能够严格遵循华为官方开发规范，自动生成符合 API 24（HarmonyOS 6.1.1 Beta1）标准的图形相关代码。

一句话总结：只要你的项目涉及鸿蒙图形开发——无论是 2D 绘制、3D 场景、AR 应用、游戏加速还是 GPU 优化——这个 Skill 都能让 AI 输出带规范、有深度、可直接运行的工程代码。

适合谁用：

正在做鸿蒙原生应用开发的工程师
需要集成 AR/3D/图形特效的开发团队
想用 AI 快速验证鸿蒙图形方案的产品/技术负责人

二、使用场景

场景 1：2D 图形绘制 → 一句需求出代码

以前要在 HarmonyOS 上做自绘制图形（Canvas、自定义组件、图像滤镜），需要翻阅大量 API 文档确认 Drawing 模块的接口签名和单位规范。现在只需要说：

“用 ArkGraphics 2D 的 Drawing 模块画一个带渐变填充的圆角矩形，通过 RenderNode 显示”

Skill 会自动使用 drawing.Brush + drawing.Path + 正确的 px 单位，给出完整的 ArkTS 实现代码。

场景 2：3D 模型展示 → 一键生成场景代码

想要在 App 里嵌入一个 3D 模型查看器？只需描述需求：

“加载一个 glTF 模型，添加平行光光源，支持旋转查看”

Skill 会基于 ArkGraphics 3D 的 Scene.load()、Camera、Light、Component3D 等 API，输出完整的 3D 场景代码。

场景 3：AR 应用开发 → 避免反复试错

AR Engine Kit 的 API 调用链较长（权限申请 → 会话初始化 → 帧回调 → 命中检测 → 锚点管理），稍有遗漏就报错。Skill 内置了完整的 AR 开发流程模板，一次性补全所有环节。

场景 4：游戏性能优化 → Native 层 C++ 代码

XEngine Kit 和 Graphics Accelerate Kit 都涉及 Native 层开发（CMakeLists 配置 + C++ 接口调用 + 运行时查询扩展支持），手动配置极其繁琐。Skill 能直接生成可编译的 C++ 模板代码。

三、创作过程

灵感来源

我在做鸿蒙应用开发时发现一个痛点：AI 生成的鸿蒙图形代码经常不准确。原因很直接——鸿蒙图形领域的 API 迭代快（从 API 11 到 API 24）、Kit 种类多（6 大图形 Kit 各有各的规范），通用 AI 模型很难掌握所有细节。

于是我决定做一个能让 AI 自动 “学会” 鸿蒙图形规范的 Skill。

知识体系构建

我花了大量时间研读华为官方开发者文档，梳理了六大图形 Kit 的核心知识：

Kit	覆盖要点	代码示例数
ArkGraphics 2D	Canvas/Drawing 模块、RenderNode 上屏、离屏绘制、画布变换	3+
ArkGraphics 3D	Scene/Camera/Light、PBR 材质系统、glTF 加载、动画控制	5+
AR Engine	6DoF 跟踪、环境跟踪(7 子能力)、命中检测、高精几何重建	5+
Graphics Accelerate	超帧/ABR/OpenGTX、资源加速、启动加速	—
Spatial Recon	3DGS 模型加载(MP4/PLY/GLB)、滤镜效果	2+
XEngine	空域/时域超分、VRS、光追反射/阴影/GI、Subpass Shading	5+

每一个环节都附带了可直接运行的代码示例，包括 ArkTS 和 C/C++ 两种语言。

独家整理的内容

除了 API 文档整理，我特别做了几件事：

Kit 关系拓扑图 → 直观展示 6 大图形 Kit 的依赖与组合方式
组合使用建议表 → 针对不同场景推荐最佳 Kit 组合（如 AR 应用 = AR Engine + ArkGraphics 3D）
API 版本兼容矩阵 → XEngine Kit 各特性在不同 API 版本的 OpenGL ES / Vulkan 支持情况
权限声明速查 → 每个 Kit 需要哪些权限、什么授权方式
专属注意事项表 → 每个 Kit 最容易踩的坑（如 ArkGraphics 2D 是单线程模型、XEngine 仅限马良 GPU）

四、使用步骤

第 1 步：下载 Skill 文件

从 GitHub 下载或将整个仓库克隆到本地：

git clone https://github.com/FIEforever/harmonyos-native-skill.git

然后将 graphics-skill/SKILL.md 放入你的 TRAE SOLO 工作区：

你的项目/.trae/skills/harmonyos-graphics-development/SKILL.md

第 2 步：在 SOLO 中启用 Skill

打开 TRAE SOLO → 设置 → 规则和技能 → 技能 → 点击「+」导入 Skill 文件。

第 3 步：开始使用

在聊天窗口输入你的需求，例如：

“用 ArkGraphics 2D 给图片添加高斯模糊效果，通过 RenderNode 上屏显示”

“帮我生成一个 AR 房间摆放应用的完整页面代码，支持平面检测和点击放置 3D 模型”

“写一段 XEngine Kit 的 Vulkan 空域超分 C++ 代码，CMakeLists 也配置好”

AI 会自动加载 Skill 中的知识体系，输出符合鸿蒙官方规范的正确代码。

五、效果展示

示例 1：生成 2D 自定义绘制代码

输入：“画一个带渐变填充和阴影效果的圆角矩形”

Skill 加持下的输出（节选）：

import { UIContext, NodeController, FrameNode, RenderNode, DrawContext } from '@kit.ArkUI';
import { drawing } from '@kit.ArkGraphics2D';

export class MyRenderNode extends RenderNode {
  async draw(context: DrawContext) {
    const canvas = context.canvas;
    
    // 使用 px 单位（Skill 自动使用正确单位）
    const rect = { left: 50, right: 350, top: 50, bottom: 250 };
    
    // 创建渐变着色器（Skill 内置 ShaderEffect 用法）
    const shader = new drawing.ShaderEffect();
    shader.setLinearGradient(...);
    
    const brush = new drawing.Brush();
    brush.setShaderEffect(shader);
    canvas.attachBrush(brush);
    canvas.drawRoundRect(rect, 20, 20); // 正确使用 RoundRect
  }
}

示例 2：生成 AR 场景代码

输入：“帮我生成一个 AR 场景页面，支持平面检测和点击放置模型”

Skill 加持下的输出：自动包含权限申请、会话配置、帧回调、命中检测 → 锚点创建 → 模型加载的完整链路。

示例 3：生成 XEngine 超分代码

输入：“生成 XEngine Vulkan 光追阴影 AO 的 C++ 代码”

Skill 输出：包含扩展查询、实例创建参数、每帧渲染调用、Shader 片段应用的完整工程级代码。

六、Skill 链接

完整仓库地址：https://github.com/FIEforever/harmonyos-native-skill

SKILL.md 直接下载：graphics-skill/SKILL.md

使用方式：将 graphics-skill/SKILL.md 放入项目 .trae/skills/harmonyos-graphics-development/ 目录下，TRAE SOLO 即可自动识别并启用。仓库中还包含了另一个通用鸿蒙开发 Skill（harmonyos-native），欢迎搭配使用。

七、总结与思考

最满意的地方

深度够：不是泛泛的 API 罗列，而是连 CMakeLists 配置、权限声明、版本兼容矩阵这种实战细节都涵盖了
代码全：每个 Kit 都有可直接运行的代码示例，ArkTS 和 C/C++ 双语言覆盖
结构清晰：从基础概念到 Kit 详解到组合建议，层次分明，AI 容易理解

后续想优化的方向

增加更多实际项目案例的完整代码（如 AR 家居摆放、3D 产品展示器等）
补充 Canvas 组件（CanvasRenderingContext2D）与 Native Drawing 的对比使用指南
跟进 API 版本更新，保持与最新 SDK 同步

一点感悟

之前总觉得 AI 写鸿蒙代码"不够靠谱"，用了 Skill 之后发现，问题不在 AI，在于给 AI 输入的知识够不够精准。把官方文档整理成 AI 能理解的结构化知识，它输出的质量真的会上一个台阶。

希望大家试用后给我反馈，也欢迎一起完善这个 Skill

如果觉得有用，欢迎点赞、评论交流！也欢迎分享给正在做鸿蒙开发的朋友。