---
name: page-composition
description: 使用已有组件和独立图像安排页面位置、尺寸与文字，创建可追溯的静态组合并按反馈调整。用于页面排版和资产复用；组件外观修改转到 Krita 制作流程。
---

# 使用已有资产组合页面

页面组合管理实例、位置、尺寸、层级和文字，组件制作管理可复用外观。先读 `project_context`，查询已有组件运行、图像版本和组合，再决定缺少什么。已有资产能够满足任务时直接引用，不因需要完整页面而启动整页基础 UI 绘制，也不用共享绘制函数重新生成已有组件。

调用前阅读[可更新的页面布局](../../docs/project-tools.md#可更新的页面布局)。用 `project_save_layout` 保存定义、`project_get_layout` 读取修订、`project_build_layout` 构建离线 HTML 与同页 PNG、`project_get_page_build` 读取历史构建。AI 修改结构化定义，用户在浏览器查看和缩放；当前没有拖拽编辑或自动重建。

## 选择修改入口

| 任务 | 处理方式 |
| --- | --- |
| 移动按钮、调整间距、修改文案或层级 | 保留资产绑定，修改布局节点、保存修订并构建新快照 |
| 修改材质、轮廓或某个组件状态 | 用 [krita-drawing](../krita-drawing/SKILL.md) 修改对应源组件，再组合检查受影响实例 |
| 生成或编辑独立图标 | 用 [icon-assets](../icon-assets/SKILL.md) 制作和登记图像，组合时引用明确版本 |
| 判断目标风格或定位视觉偏差 | 用 [reference-style](../reference-style/SKILL.md) 查看依据，区分资产外观、导出、布局、文字和运行时问题 |

尺寸变化先检查资产版本声明的内容区域、伸缩方式和最小尺寸。正式导出支持等比、显式拉伸、九宫格及单轴伸缩；未声明几何的独立图像按完整原图等比居中。不能为达到目标尺寸而擅自改变资产伸缩规则或压平独立文字。所需外观超出声明的伸缩能力时，才制作合适变体。

## 引用与检查

1. 确定参考分辨率、目标背景、实例位置和文字。同一资产的多个实例使用不同节点 ID，复用同一 `asset_id`。节点矩形对应内容区域，透明边和光晕由几何声明计算，可能延伸到矩形之外并按画布边界裁切。
2. 已登记图像通过 `project_get_image` 校验和查看。需要从组件交付正式 PNG 时，按[正式导出约定](../../docs/project-tools.md#正式-png-导出)调用 `project_export_assets`，使用返回的同一资产身份和版本，不再重复登记为导入图。已有未登记 PNG 用 `project_register_image` 的 `imported` 来源登记真实说明。布局明确使用 `fixed` 指定版本，或用 `selected` 跟随项目选用；未选用时不能建立跟随绑定。只有任务要求改变项目选用版本时才调用 `project_select_image`。组件预览仍可用于检查，但不等于经过明确区域及几何声明的正式导出。
3. 新页面可以使用任务明确允许的业务占位，但应在项目资料中记录占位范围、用途和替换需求，汇报时明确指出。已声明的正式资产缺失或摘要不符必须报错，不能自动换成占位。
4. 用 `project_save_layout` 保存最多 512 个节点。文字独立指定文本框、真实 TTF/OTF、字号、行高、对齐、换行和溢出策略；缺字、字体变化或非法尺寸明确报错。`project_build_layout` 加载实际字体和图片，在浏览器中检查溢出并截图。不能靠自动缩字、换字体或压平文案消除错误。
5. 查看返回的 PNG 和 HTML，检查目标尺寸下的留白、文字关系、状态辨识和整体层次。布局反馈只修改定义；资产反馈修改来源，明确选用或更新固定绑定后重建。读取历史构建时分别报告 `matches_layout` 和 `matches_bindings`；它们不表示美术确认，也不自动寻找或重建全部引用。

展示页面 ID 与修订、构建 ID、HTML/PNG 路径、实际资产版本和未完成项。选用版本、技术校验、模型视觉结论和用户确认分别表达；流程不增加逐步骤用户审批。需要简单的组件运行裁切对照时，`project_create_composition` 和 `project_get_composition` 仍可创建、读取只含等比图像和单行文字的静态快照，不能向该接口传入页面布局的九宫格或换行能力。