create-app-icon

HarmonyOS 应用图标设计与配置技能。提供从设计规范到 SVG 图标生成、项目文件配置、合规自检的端到端工作流。HarmonyOS 应用图标必须是 1024×1024px 的分层 PNG（前景图 + 背景图），系统自动裁切圆角蒙版；Agent 凭经验直接生成的图标常违反规范：手动加圆角、背景含透明像素、尺寸错误、未分层配置，导致上架审核被拒。

本 skill 提供离线参考文档集（4 份文档，覆盖图标设计规范、项目配置、合规标准、多设备适配），以及 SVG 模板和 JSON 配置模板，作为 Agent 设计与配置鸿蒙应用图标的权威参考。

When to Use This Skill

Follow this skill's workflow whenever any of the following conditions is met:

• 用户需要为鸿蒙应用项目设计新的应用图标
• 用户需要生成 SVG 图标代码（前景层 + 背景层），遵循鸿蒙规范
• 用户需要配置分层图标文件（layered_image.json、app.json5、module.json5）
• 用户的应用图标审核被拒，需要修复问题（未配置前景图/背景图、尺寸错误、圆角问题等）
• 用户需要适配多设备图标（手机/折叠屏/平板/电脑/智慧屏/穿戴）
• 用户询问图标资源规范（1024×1024、分层、PNG、禁止圆角等）
• 用户需要 AGC 上架素材规范（应用图标上传要求）
• 用户需要配置启动页图标（startWindowIcon）

Do not force this skill onto "ArkTS 语法/类型/编码风格"、"命令行构建/签名/部署"、"鸿蒙设计语言视觉风格概念"、"在线抓取最新文档" 场景 - 使用对应 skill（见下表）。

Boundary with Other Skills

This skill covers 「应用图标如何设计、生成、配置」，不覆盖 「ArkTS 代码怎么写」、「编译错误怎么修」、「怎么构建部署」、「鸿蒙设计语言视觉风格概念」、「怎么在线抓取最新文档」。当图标任务涉及以下问题时，交叉引用对应 skill：

Workflow (Follow Strictly)

1. 读 INDEX，定位必读文档

任何应用图标任务前，必须先读 references/INDEX.md。INDEX 提供「任务类型 -> 必读文档」映射表。不要一次性加载全部 4 份文档。

2. 分析应用项目

读取目标项目的 app.json5 和 module.json5，提取：

• 应用名称（label / $string:app_name）
• Bundle name（bundleName）
• 应用品类/领域（从包名、项目结构推断）
• 现有图标配置（单层 vs 分层）
• 目标设备类型（deviceTypes）

理解品牌身份：应用名含义、品类惯例（如金融类偏蓝/绿色，娱乐类偏鲜艳色）。

3. 加载设计规范

根据任务类型从 INDEX 映射加载必读文档。核心设计原则（详见 references/01-icon-design-spec.md）：

• 单一焦点：图标需有醒目的单个中心点，立刻吸引用户注意
• 简洁背景：避免杂乱，保持留白与呼吸感
• 品牌代表性：用户不必分析图标就能了解它代表什么
• 避免大面积灰度：颜色与图形是第一视觉元素
• 禁止文字：除品牌 Logo 外不在图标上使用字符
• 系统自动圆角：系统使用自动将图标角变圆的蒙版，禁止自行裁切圆角

4. 生成 SVG 图标

生成两个 1024x1024 viewBox 的 SVG 文件：

前景图 SVG：

• 1024x1024 viewBox，透明背景（不填充整个画布）
• 仅主体图形/Logo，居中于安全区（约中心 77% 区域）
• 禁止圆角、禁止内边距
• 使用简洁几何形状与品牌色

背景图 SVG：

• 1024x1024 viewBox，完全不透明纯色填充
• 纯色或简单渐变（手机/平板：纯色；电脑/智慧屏：可含微立体细节）
• 禁止复杂图案、禁止文字
• 必须完全填满 1024x1024 画布

5. 生成项目配置

生成/更新以下文件：

1. layered_image.json（放在 resources/base/media/）：

{
  "layered-image": {
    "background": "$media:background",
    "foreground": "$media:foreground"
  }
}

2. app.json5 icon 配置（AppScope 级）：

{
  "app": {
    "icon": "$media:layered_image",
    "label": "$string:app_name"
  }
}

3. module.json5 icon 配置（如需 UIAbility 级图标）：

{
  "module": {
    "abilities": [
      {
        "name": "EntryAbility",
        "icon": "$media:layered_image",
        "label": "$string:EntryAbility_label"
      }
    ]
  }
}

提供 SVG 转 PNG 指引：

• DevEco Studio：右键 > New > Image Asset > 选择前景/背景图
• 命令行：rsvg-convert -w 1024 -h 1024 foreground.svg -o foreground.png
• 或 Inkscape CLI、Figma 导出等

6. 合规自检

按 UX 标准 2.1.4.3.1 自检（详见 references/03-icon-compliance.md）：

Directory Structure

create-app-icon/
├── SKILL.md                              # This file
├── references/
│   ├── INDEX.md                          # 唯一入口，必读
│   ├── 01-icon-design-spec.md            # 图标设计规范（设计原则/风格/前景/背景/色彩/资源规范）
│   ├── 02-icon-config.md                 # 项目配置（优先级/单层/分层/DevEco向导/资源路径）
│   ├── 03-icon-compliance.md             # 合规标准（UX 2.1.4.3.1/AGC素材/上架体检/常见被拒）
│   └── 04-multi-device.md                # 多设备适配（手机/电脑/智慧屏/穿戴/多密度）
└── assets/
    ├── svg-foreground-template.svg       # 前景图 SVG 模板（1024x1024，透明）
    ├── svg-background-template.svg       # 背景图 SVG 模板（1024x1024，不透明）
    ├── layered_image.json                # 分层图标配置模板
    ├── app-json5-icon-snippet.json5      # app.json5 icon 配置片段
    └── module-json5-icon-snippet.json5   # module.json5 icon 配置片段

Documentation Source & Maintenance

• 上游：华为开发者官网
  • 图标设计指南：https://developer.huawei.com/consumer/cn/doc/design-guides/application-icon-0000001953444009
  • 配置应用图标和名称：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/layered-image
  • 通用应用UX体验标准：https://developer.huawei.com/consumer/cn/doc/design-guides/ux-guidelines-general-0000001760708152
  • AGC素材规范：https://developer.huawei.com/consumer/cn/doc/app/agc-help-app-visual-asset-spec-0000002277607976
  • 上架合规体检：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-app-analyzer-ag-policy
• 抓取方式：通过 harmony-fetch skill 的 getDocumentById API 抓取；搜索类内容用 WebSearch with site:developer.huawei.com 补充
• 抓取时间：2026-07-29（所有 references/*.md 顶部标注）
• 更新策略：HarmonyOS 版本迭代可能更新图标规范；若需更新，使用 harmony-fetch skill 重新抓取对应 objectId 覆盖文件
• 图片链接：文档中的图片为华为 CDN 带签名链接，24 小时后过期；若需查看图片，访问上游 URL 或重新抓取