---
name: icon-assets
description: 使用宿主图像工具生成或编辑独立 UI 图标，将真实来源和版本登记到 SmartUI 项目，并在静态 UI 组合中检查效果。
---

# 制作和使用独立 ICON 资产

当 UI 需要独立位图图标时使用本流程。先通过 [reference-style](../reference-style/SKILL.md) 查看项目参考并整理适用规则，再调用宿主提供的图像生成或编辑工具。SmartUI 负责保存和预览生成结果，不调用生图后端。如果宿主没有合适的图像工具，说明缺少该能力，并请用户提供图像或可用工具；不要悄悄改用付费 CLI 或 API。

调用图像资产和组合工具前，先阅读[项目工具说明](../../docs/project-tools.md#独立图像资产与静态组合预览)。

任务主要是用已有组件和图像排页面、移动实例或修改文案时，使用 [page-composition Skill](../page-composition/SKILL.md)。组合不限于 ICON 检查；只有需要生成或编辑独立图像时才进入本制作流程。

## 工作流程

1. 查看项目中的实际参考图和风格规则。记录图标表达的含义、目标显示尺寸、使用背景、轮廓、配色、明暗、细节密度、透明背景需求和留白。将直接观察与制作假设分开记录。
2. 调用宿主图像工具生成或编辑图像。检查工具实际返回的图像，重点查看目标尺寸下的辨识度、边缘、透明度和视觉重心。只对需要修改的图像继续迭代。
3. 将选定的宿主输出复制到业务工程，再调用 `project_register_image` 登记。传入项目最新 `revision`、稳定的 `asset_id`、资产名称、绝对路径 `source_path` 和真实的 `provenance`。`kind` 为 `generated` 或 `edited` 时，填写实际使用且非空的 `tool` 和 `prompt`。登记已有图像时使用 `kind: "imported"`，并填写非空 `description`；不要编造提示词、模型信息或其他生成细节。只有确实取得的信息才作为附加字段保存。
4. 用 `project_get_image` 查看候选版本。登记会创建不可覆盖、按序递增的版本，但不会自动选用。需要将图像设为项目选用版本时，使用最新 `revision` 调用 `project_select_image`。单次组合可以直接引用确切的登记版本，不必改变项目选用状态。选用表示项目采用该版本，不表示用户已确认美术效果。
5. 按 [page-composition](../page-composition/SKILL.md) 用 `project_save_layout` 创建检查布局、`project_build_layout` 构建浏览器预览。使用明确图像绑定与独立文字，给出参考画布、位置和目标尺寸。打开返回的 PNG/HTML，分别检查图标单图和它在 UI 中的效果。
6. 需要局部修正图标时，登记新版本，不覆盖归档。按任务要求修改选用或固定绑定，再显式重建；布局变化只修改定义。用 `project_get_page_build` 读取保留当时图像、字体和确切版本的历史构建。

## 组合预览的限制

浏览器页面使用 `#RRGGBB` 纯色背景，按节点列表顺序叠放。独立图标按完整原图等比居中；正式组件背景按导出版本的几何声明伸缩。文字使用包含全部所需字符的真实 TTF/OTF，显式设置文本框、行高、对齐、换行和溢出规则，字体随快照保存。

页面工具不生成图像、不自动设计布局，不处理业务交互或将位图导入 Krita 图层。用浏览器检查明确排布的效果；继续使用宿主图像工具修改独立图标，并通过 [Krita 绘制流程](../krita-drawing/SKILL.md)制作基础 UI。`project_create_composition` 另提供成功组件运行、图像及单行文字的简单 PNG 快照，限制见[项目工具说明](../../docs/project-tools.md#独立图像资产与静态组合预览)。