From 097170836d184ded166bbe2e51faa06bf31905e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Fri, 19 Jun 2026 10:09:19 +0800
Subject: [PATCH] Add UI-design asset extraction & spritesheet support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce a new UI design asset extraction flow: add POST /api/editor/ui-designs/assets/extractions handler that always uses gpt-image-2 with the fixed prompt "提取画面中的所有独立并整理成spritesheet"; parse Data URL references, call OpenAI image edits, return a spritesheet and sliced icon assets. Increase request body limit for image Data URLs and wire the route with bearer auth. Add platform-image slicing: slice_generated_icon_spritesheet_all_by_connected_components (with auto-naming "素材 1..N", foreground estimation and heuristics) and export it. Add Rust tests for the handler, prompt constant, and slicing behavior. Update frontend client and integration tests to call the new extractEditorUiDesignAssets API and verify spritesheet + icon layers are added to the canvas and persisted. Update multiple docs to describe the extraction UI, toolbar placement, and related audio/playback pitfalls. Minor related updates: toolbar button ordering and audio duration / signed read-url notes.
---
 .../shared-memory/decision-log.md             |   8 +
 docs/project-memory/shared-memory/pitfalls.md |   8 +
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |   3 +-
 ...��】生成类面板Lovart统一改造方案-2026-06-17.md |   3 +-
 ...辑器】画板UI设计图生成入口设计-2026-06-17.md |  14 ++
 ...辑器】画板图标素材生成入口设计-2026-06-15.md |  10 +-
 ...�编辑器】画板音乐生成入口设计-2026-06-18.md |  11 +-
 server-rs/crates/api-server/src/app.rs        |  43 +++++
 .../crates/api-server/src/editor_project.rs   |  98 +++++++++-
 .../api-server/src/modules/editor_project.rs  |  40 +++-
 .../src/generated_asset_sheets/mod.rs         |   1 +
 .../src/generated_asset_sheets/sheet.rs       | 182 ++++++++++++++++--
 ...CanvasEditorGenerationIntegration.test.tsx |  99 ++++++++++
 .../ImageCanvasEditorModel.test.ts            |  35 ++--
 .../image-editor/ImageCanvasEditorModel.ts    |  23 +++
 .../ImageCanvasEditorShellView.test.tsx       |   1 +
 .../image-editor/ImageCanvasEditorTypes.ts    |   2 +
 .../ImageCanvasEditorView.test-utils.ts       |   3 +
 .../image-editor/ImageCanvasEditorView.tsx    |   2 +
 .../ImageCanvasGenerationLayerModel.test.ts   |  31 ++-
 .../ImageCanvasGenerationLayerModel.ts        |  51 ++++-
 .../ImageCanvasGenerationModel.ts             |  26 +++
 .../ImageCanvasMetadataModalView.test.tsx     |  34 ++++
 .../ImageCanvasMetadataModalView.tsx          |  23 ++-
 ...ageCanvasSelectedLayerToolbarView.test.tsx |  29 +++
 .../ImageCanvasSelectedLayerToolbarView.tsx   |  14 ++
 .../image-editor/ImageCanvasStageView.tsx     |   3 +
 .../ImageCanvasWorldView.test.tsx             |  10 +-
 .../image-editor/ImageCanvasWorldView.tsx     | 118 +++++++++---
 ...anvasGenerationSubmissionWorkflow.test.tsx |  81 +++++++-
 ...ImageCanvasGenerationSubmissionWorkflow.ts |  60 +++++-
 .../useImageCanvasGenerationWorkflow.ts       |  26 +++
 .../useImageCanvasProjectPersistence.ts       |   6 +-
 src/index.css                                 |  36 +++-
 .../image-editor/editorProjectClient.test.ts  |  44 +++++
 .../image-editor/editorProjectClient.ts       |  24 +++
 36 files changed, 1092 insertions(+), 110 deletions(-)

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index dfd601fc4..10c4f2756 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -16,6 +16,14 @@
 
 ---
 
+## 2026-06-18 图片画布 UI 设计图提取素材保留图集
+
+- 背景：UI 设计图需要从成图中继续抽取可复用独立素材；原图标素材生成只把拆分后的图标放入画布，spritesheet 原图没有保留，后续追溯和二次切图不方便。
+- 决策：`assetKind="ui-design"` 图层浮动工具栏新增 `提取素材`，固定调用 `/api/editor/ui-designs/assets/extractions`，后端固定 `gpt-image-2` 和提示词 `提取画面中的所有独立并整理成spritesheet`，返回结构复用图标 spritesheet 响应。图标生成与 UI 提取都必须把 spritesheet 图集作为 `assetKind="icon-spritesheet"` 图层放到画布，再放拆分后的 `assetKind="icon"` 素材。
+- 影响范围：图片画布浮动工具栏、编辑器图片生成 BFF、`platform-image` 图集连通域拆分、画布图层类型和编辑器文档。
+- 验证方式：运行图片画布工具栏 / 图集落层 / 生成提交相关前端测试，`cargo test -p platform-image generated_asset_sheets --manifest-path server-rs/Cargo.toml`，以及 `cargo test -p api-server editor_ui_design_asset_extraction_prompt_is_fixed --manifest-path server-rs/Cargo.toml`。
+- 关联文档：`docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md`、`docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md`。
+
 ## 2026-06-18 图片画布 Seedance 2.0 参考媒体提交边界
 
 - 背景：`/editor/canvas` 生成视频需要严格对齐火山 Seedance 2.0 多模态参考输入；参考视频若继续走 Base64 / `data:video` 会超过请求体并被上游拒绝，参考音频单独输入和非 Seedance 模型携带参考字段也会违反文档契约。
diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md
index f2ee9b825..0e965d443 100644
--- a/docs/project-memory/shared-memory/pitfalls.md
+++ b/docs/project-memory/shared-memory/pitfalls.md
@@ -23,6 +23,14 @@
 - 验证：`cargo test -p platform-audio --manifest-path server-rs/Cargo.toml`；`cargo test -p api-server vector_engine_audio_generation --manifest-path server-rs/Cargo.toml`。
 - 关联：`server-rs/crates/platform-audio/src/client.rs`、`server-rs/crates/platform-audio/src/response.rs`、`docs/【编辑器】画板音乐生成入口设计-2026-06-18.md`。
 
+## 图片画布音频卡播放条 0:00 要优先查签名 URL 和嵌套交互
+
+- 现象：画板音效或背景音乐已经生成成功，但卡片里的播放条显示 `0:00`，点击无法预览。
+- 原因：generated 音频资源通常是私有 OSS 路径，直接把 `/generated-*` 或 generated OSS 地址交给 `<audio>` 会无鉴权读取失败；如果音频控件嵌在 `<button>` 图层里，浏览器还可能因嵌套交互元素阻断 controls 行为。
+- 处理：音频图层使用非嵌套交互容器承接画布选择语义，内部 `<audio controls preload="metadata">` 单独阻止 pointer / click 冒泡；generated 音频播放前统一通过 `useResolvedAssetReadUrl` / `/api/assets/read-url` 换签。卡片和角标展示 `时长`，后端没返回时长时可用 `loadedmetadata.duration` 兜底。
+- 验证：`npx vitest run src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/ImageCanvasMetadataModalView.test.tsx src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts --reporter verbose`，并在浏览器确认 generated 音频控件可播放。
+- 关联：`src/components/image-editor/ImageCanvasWorldView.tsx`、`src/components/image-editor/ImageCanvasMediaModel.ts`、`docs/【编辑器】画板音乐生成入口设计-2026-06-18.md`。
+
 ## 图片编辑器底部生成按钮不要复用单一画布生成状态
 
 - 现象：图片画布里先新建一个“生成规范”占位，再点击“生成角色形象”或其它底部生成入口，前一个规范占位和面板状态被销毁。
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index ec2c1d81c..41f06309a 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -67,6 +67,7 @@
 - `DELETE /api/editor/assets/{assetId}`：删除素材。已放入画布的 project resource 不被级联删除，避免旧画布丢图。
 - `POST /api/editor/images/generations`：按提示词调用 VectorEngine 生成图片；角色生成可携带 `model`、`aspectRatio`、`imageSize` 和 `referenceImageSrcs`。`nanobanana2` 参考图作为 `inline_data` 进入 `generateContent`，`gpt-image-2` 参考图进入 edits。携带参考图的快速编辑也走该接口，前端必须把参考图源预读成图片 Data URL 后放入 `referenceImageSrcs`；接口返回 data URL、尺寸、prompt、model、provider 和 taskId。
 - `POST /api/editor/icon-spritesheets/generations`：按图标规范图和素材描述数组生成 spritesheet，再由后端切分为独立透明图标。请求支持 `model`、`aspectRatio`、`imageSize` 和 `priceMudPoints`；`priceMudPoints` 必须来自编辑器生成计费配置的 `icon` 档位（首版 12 泥点），后端用 `editor_generation_config` 校验后才调用上游；`nanobanana2` 走原生 `generateContent` 并写入 `generationConfig.imageConfig.aspectRatio/imageSize`，`0.5K` 传 `"512"`；`gpt-image-2` 走 `/v1/images/edits`，后端把 UI 尺寸归一为文档支持的 `1024x1024`、`1024x1536`、`1536x1024`、`2048x2048`、`2048x1152` 等 `size` 字符串。
+- `POST /api/editor/ui-designs/assets/extractions`：以 UI 设计图 Data URL 作为参考图，固定 `gpt-image-2` 和提示词 `提取画面中的所有独立并整理成spritesheet` 生成素材 spritesheet，再按连通域自动拆分为 `素材 1..N`，返回结构复用图标 spritesheet 响应。前端必须把 spritesheet 原图与拆分素材都加入画布。
 - `POST /api/editor/images/edits`：按提示词和当前图片 Data URL 调用 VectorEngine edits，返回新的生成图片元数据。
 - `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音和泥点价格生成视频。前端可选模型为 `seedance2.0-fast`、`seedance2.0`、`kling3.0`、`kling3.0-omni`，默认 `seedance2.0-fast`；后端必须将 `seedance2.0-fast` 映射到 `doubao-seedance-2-0-fast-260128`，将 `seedance2.0` 映射到 `doubao-seedance-2-0-260128`，两者不得混用。后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS，返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
 
@@ -95,7 +96,7 @@
 - 快速编辑面板底部必须以禁用态参数按钮显示原图尺寸和原图模型，视觉对齐可编辑面板参数控件；参考图顺序为额外参考图在前、原图在最后。
 - 点击生成、生成规范、生成角色形象或生成图标素材后创建的占位图可继续保留；点击画布空白区域让当前图片或占位图失焦时，关闭当前生成面板并移除图片选中样式，但不删除占位图本身。
 - 生成资源显示元数据按钮，元数据窗口展示来源、生成输入快照、model、provider、task、Resolution 和 OSS 引用；生成输入快照只包含用户面板输入和参考图，不包含后端拼接 Prompt，不再展示独立 Size 字段。
-- 图片选中后的浮动工具栏按钮顺序固定为：快速编辑、分割线、裁扩按钮、去除背景按钮、角色图专属生成动画、分割线、重绘、下载按钮。裁扩通过画布边界拖拉完成，不再展示四边数值输入；默认自由比例，选择固定比例后拖拉边界保持对应比例，完成后在原素材旁边新增裁扩结果图层，扩展区域透明填充。去除背景使用前端轻量去背并回写为新的工程资源快照。
+- 图片选中后的浮动工具栏按钮顺序固定为：快速编辑、分割线、裁扩按钮、去除背景按钮、UI设计图专属提取素材、角色图专属生成动画、分割线、重绘、下载按钮。裁扩通过画布边界拖拉完成，不再展示四边数值输入；默认自由比例，选择固定比例后拖拉边界保持对应比例，完成后在原素材旁边新增裁扩结果图层，扩展区域透明填充。去除背景使用前端轻量去背并回写为新的工程资源快照。UI设计图的提取素材固定走 `gpt-image-2` 和提示词 `提取画面中的所有独立并整理成spritesheet`，生成的 spritesheet 原图和拆分后的独立素材都作为画布图层保留。
 - 重绘生成资源后，右侧出现新生成结果图层，并自动 fit 原图 + 新图，且重绘面板保持打开。
 - 快速编辑 / 重绘站内 public 示例图、历史 generated 图或 OSS generated 图时，前端先读取成 `data:image/*;base64,...` 再提交，后端不得再收到 `/creation-type-references/*`、`/generated-*` 或 OSS URL 作为 `referenceImageSrcs/sourceImageSrc`。
 - 快速编辑的额外参考图同样必须在前端读取成图片 Data URL 后提交；后端 `referenceImageSrcs` 上限为 9 张，承载 8 张额外参考图加 1 张原图。
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
index 1b014b051..e14040adf 100644
--- a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -120,7 +120,7 @@
 ## 生成视频模型与接口
 
 - 底部 `生成视频` 面板提交到 `POST /api/editor/videos/generations`。
-- 固定 `16:9`、静音、标准模式；结果作为 `mediaType="video"`、`assetKind="video"` 的视频图层加入画布。
+- 固定 `16:9`、静音、标准模式；结果作为 `mediaType="video"`、`assetKind="video"` 的视频图层加入画布，并在画布中使用原生 `<video>` 播放控件渲染，不再走图片元素。
 - 支持模型：
   - `seedance2.0-fast`
   - `seedance2.0`
@@ -163,6 +163,7 @@
 - 快速编辑生成中的占位图同样只支持键盘 `Delete` / `Backspace` 删除，不新增 UI 删除按钮；删除后异步结果不得再落回画布。
 - 生成视频 / 角色形象 / 角色动作 / 音效 / 背景音乐新建后，画布占位空白样式和右上角标签均与对应生成类型一致，不再统一使用图片占位 icon。
 - 点击角色图只选中图层并显示工具栏，不自动弹出重绘、快速编辑或角色动画面板；点击工具栏或右键菜单中的 `生成动画` 才创建角色动作占位和面板。
+- 点击 UI 设计图只选中图层并显示工具栏；工具栏在 `去除背景按钮` 后显示 `提取素材`，点击后固定用 `gpt-image-2` 和提示词 `提取画面中的所有独立并整理成spritesheet` 生成 spritesheet，再复用图标素材拆分流程，把 spritesheet 图集和拆分素材都放到画布。
 - 生成游戏音效面板底部不显示 `type` / `tempo` 字段标题，只有一个音效参数按钮；type 只支持 `one-shot` / `loop`，BPM 为 `1-300` 的数字或 `null`，选择后按钮显示 `单次·120BPM` 这类组合值。
 - 生成视频结果以视频图层加入画布，画布媒体元素标记为 `画布视频：生成视频 N`。
 - 生成器输入、参数、参考图和占位框在刷新后仍存在；已生成对象的生成器面板继续跟随成品图层。
diff --git a/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md b/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
index 05af86878..0d032d46d 100644
--- a/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
+++ b/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
@@ -7,6 +7,7 @@
 - 底部 AI 画布工具栏新增 `生成UI设计图`。
 - 点击后立即在画布中新建 `UI设计图生成占位图`，不复用普通新建图片的空白样式。
 - 占位图默认 16:9 展示，生成成功后替换为 `assetKind: "ui-design"` 的画布图层。
+- 用户点击 `assetKind: "ui-design"` 图层后，图片上方浮动工具栏在 `去除背景按钮` 后显示 `提取素材` 按钮；普通图片、角色图和图标图层不显示该入口。
 
 ## 生成面板
 
@@ -44,6 +45,18 @@
 
 生成请求固定使用 `gpt-image-2`。有参考图时走图片编辑请求；无参考图时走图片生成请求。
 
+## 提取素材
+
+- 点击浮动工具栏 `提取素材` 后，前端把当前 UI 设计图读取为图片 Data URL，提交到 `POST /api/editor/ui-designs/assets/extractions`。
+- 后端固定使用 `gpt-image-2` 图片编辑链路，并固定提示词：
+
+```text
+提取画面中的所有独立并整理成spritesheet
+```
+
+- 后端收到 spritesheet 后复用图标素材的连通域拆分能力；未知素材数量时按从上到下、从左到右自动命名为 `素材 1`、`素材 2`。
+- 前端先把 spritesheet 原图作为 `assetKind: "icon-spritesheet"` 图集图层放在 UI 设计图右侧，再把拆分出的独立素材作为 `assetKind: "icon"` 图标图层继续放到画布。
+
 ## 验收点
 
 - 点击 `生成UI设计图` 后出现 UI 设计占位图和独立生成面板。
@@ -51,3 +64,4 @@
 - 从画布选择时只能绑定图标规范图片。
 - 请求参数包含 `kind: "ui-design"`、`model: "gpt-image-2"`、比例、大小与可选参考图。
 - 生成图层信息面板展示 `用户输入` 与 `图标规范`。
+- 选中 UI 设计图时浮动工具栏显示 `提取素材`；点击后调用固定 `gpt-image-2` 提取接口，画布同时出现 spritesheet 图集和拆分后的独立素材。
diff --git a/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md b/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
index 7fcf2b818..2f75a20e6 100644
--- a/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
@@ -11,7 +11,7 @@
 - 底部 AI 画布工具栏新增 `生成图标素材` 按钮。
 - 点击后立即在画布中心创建图标素材占位图，不复用普通“单张空白图片”图标；占位图表现为一叠空白素材图标卡片。
 - 图标素材面板锚定在占位图下方，和现有生成输入框同一层级展示。
-- 生成完成后删除占位态，把拆分出的每个独立图标素材作为画布图片图层铺开，图标之间不重叠，并保留少量间距。
+- 生成完成后删除占位态，先把后端返回的 spritesheet 原图作为 `assetKind: "icon-spritesheet"` 的图集图层放到画布，再把拆分出的每个独立图标素材作为画布图片图层铺开，图集与图标之间、图标彼此之间不重叠，并保留少量间距。
 - 图标素材图层写入 `assetKind: "icon"`；图标规范图写入 `assetKind: "icon-spec"`，用于刷新后保留标签和限制点选来源。
 
 ## 面板结构
@@ -64,10 +64,10 @@
 
 ## 前端铺放规则
 
-- 第一张图标放在原占位图左上附近。
-- 后续图标按行铺开，图标之间保留约 `24px` 世界坐标间距。
+- spritesheet 图集放在原占位图左上附近。
+- 第一张拆分图标放在 spritesheet 图集右侧，后续图标按行铺开，图标之间保留约 `24px` 世界坐标间距。
 - 每个图标图层标题使用对应素材描述文本。
-- 生成成功后关闭图标素材面板，选中第一张图标素材，并打开图层面板。
+- 生成成功后关闭图标素材面板，选中 spritesheet 图集，并打开图层面板。
 
 ## 验收
 
@@ -76,5 +76,5 @@
 - 默认 6 个素材描述会进入 prompt；用户在单个文本框中继续输入时最多解析 100 个素材描述。
 - 默认打开图标素材面板时选中 `nanobanana2 / 1:1 / 1K`；模型切换后，角色和图标素材面板之间沿用上次选择的模型。
 - 图标素材生成请求必须带 `model`、`aspectRatio` 和 `imageSize`；`nanobanana2` 请求体必须包含 `generationConfig.imageConfig.aspectRatio/imageSize`，`gpt-image-2` 请求必须包含文档映射后的 `size`。
-- 生成成功后画布出现按描述命名的多个透明图标素材图层，图层之间不重叠。
+- 生成成功后画布出现 spritesheet 图集和按描述命名的多个透明图标素材图层，图层之间不重叠。
 - 生成图标素材提交体包含 `priceMudPoints: 12`；若前端传入与后端计费配置不一致的值，后端返回 `priceMudPoints` 校验错误，不继续调用上游生成。
diff --git a/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md b/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md
index 8bc25c015..39df1af6d 100644
--- a/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md
+++ b/docs/【编辑器】画板音乐生成入口设计-2026-06-18.md
@@ -44,7 +44,11 @@
   - `assetKind="sound-effect"`
   - `assetKind="background-music"`
 - 音频结果以小型音频卡加入画布，卡片内使用 `<audio controls>` 播放；音频结果当前只保存为画布资源，不进入图片素材库。
-- 元数据弹窗按音频显示 `音频信息` / `音频类型`，生成输入快照只展示用户面板字段。
+- 音频结果卡片显示用户提示词和 `时长 mm:ss`；如果上游暂未返回时长，先显示 `时长 --:--`，并在 `<audio>` 元数据加载后用真实 duration 兜底。
+- generated 私有音频资源播放前必须通过 `/api/assets/read-url` 换签；画布卡片不得直接把 `/generated-*` 或 generated OSS 私有地址交给 `<audio>` 裸请求。
+- 音频卡片、音频生成占位和元数据弹窗都使用 `时长`，不使用图片 / 视频的分辨率语义。
+- 音频图层右上角标签显示在信息按钮左侧，和其他素材卡右上角信息区保持一致。
+- 元数据弹窗按音频显示 `音频信息` / `音频类型` / `时长`，生成输入快照只展示用户面板字段。
 
 ## 前端提交契约
 
@@ -84,7 +88,8 @@ POST /api/editor/audios/background-music/generations
   provider: string,
   taskId: string,
   priceMudPoints: number,
-  audioKind: "sound-effect" | "background-music"
+  audioKind: "sound-effect" | "background-music",
+  durationSeconds?: number | null
 }
 ```
 
@@ -113,5 +118,7 @@ POST /api/editor/audios/background-music/generations
 - 点击 `生成游戏背景音乐` 后出现背景音乐面板，字段为 `gpt_description_prompt`，不展示 `make_instrumental`。
 - 音效提交到 `/api/editor/audios/sound-effects/generations`，背景音乐提交到 `/api/editor/audios/background-music/generations`。
 - 成功后画布新增音频卡，能通过 `<audio controls>` 播放。
+- 成功后的音频卡展示提示词；卡片、悬停角标、信息弹窗和待生成占位均显示时长。
+- 私有 generated 音频能先换签再预览播放，不出现播放条一直为 `0:00` 的裸路径失败状态。
 - 刷新后 layout 能恢复音频生成器和音频图层。
 
diff --git a/server-rs/crates/api-server/src/app.rs b/server-rs/crates/api-server/src/app.rs
index 082e95566..c7d44d14e 100644
--- a/server-rs/crates/api-server/src/app.rs
+++ b/server-rs/crates/api-server/src/app.rs
@@ -1516,6 +1516,49 @@ mod tests {
         assert!(!body_text.contains("length limit exceeded"));
     }
 
+    #[tokio::test]
+    async fn editor_ui_design_asset_extraction_accepts_image_body_above_default_limit() {
+        let state = AppState::new(AppConfig::default()).expect("state should build");
+        let seed_user = seed_phone_user_with_password(&state, "13800138188", TEST_PASSWORD).await;
+        let token = sign_test_user_token(&state, &seed_user, "sess_editor_ui_extract_body");
+        let app = build_router(state);
+        let source_image_src = format!("data:image/png;base64,{}", "A".repeat(3 * 1024 * 1024));
+        let request_body = serde_json::json!({
+            "sourceImageSrc": source_image_src,
+        })
+        .to_string();
+        assert!(request_body.len() > 2 * 1024 * 1024);
+
+        let response = app
+            .oneshot(
+                Request::builder()
+                    .method("POST")
+                    .uri("/api/editor/ui-designs/assets/extractions")
+                    .header("authorization", format!("Bearer {token}"))
+                    .header("content-type", "application/json")
+                    .body(Body::from(request_body))
+                    .expect("request should build"),
+            )
+            .await
+            .expect("request should succeed");
+
+        assert_eq!(response.status(), StatusCode::SERVICE_UNAVAILABLE);
+        let body = response
+            .into_body()
+            .collect()
+            .await
+            .expect("response body should collect")
+            .to_bytes();
+        let body_text = String::from_utf8_lossy(&body);
+        assert!(
+            body_text.contains("VECTOR_ENGINE")
+                || body_text.contains("OPENAI")
+                || body_text.contains("配置"),
+            "handler should parse the oversized UI design image before checking image config: {body_text}"
+        );
+        assert!(!body_text.contains("length limit exceeded"));
+    }
+
     #[tokio::test]
     async fn password_entry_rejects_unknown_phone_without_registration() {
         let app = build_router(AppState::new(AppConfig::default()).expect("state should build"));
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index 80ac3571e..7f69ef14a 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -13,7 +13,9 @@ use module_assets::{
 use platform_image::{
     DownloadedImage,
     generated_asset_sheets::{
-        GeneratedAssetSheetConnectedIcon, slice_generated_icon_spritesheet_by_connected_components,
+        GeneratedAssetSheetConnectedIcon,
+        slice_generated_icon_spritesheet_all_by_connected_components,
+        slice_generated_icon_spritesheet_by_connected_components,
     },
 };
 use platform_oss::{LegacyAssetPrefix, OssHeadObjectRequest, OssObjectAccess};
@@ -60,6 +62,7 @@ const EDITOR_PROJECT_DEFAULT_TITLE: &str = "未命名画布";
 const EDITOR_IMAGE_GENERATION_SIZE: &str = "1024x1024";
 const EDITOR_IMAGE_MODEL_NANOBANANA2: &str = "gemini-3.1-flash-image-preview";
 const EDITOR_ICON_DESCRIPTION_LIMIT: usize = 100;
+const EDITOR_UI_DESIGN_ASSET_EXTRACTION_PROMPT: &str = "提取画面中的所有独立并整理成spritesheet";
 const EDITOR_CHARACTER_IMAGE_ASSET_KIND: &str = "editor_character_image";
 const EDITOR_CHARACTER_IMAGE_ENTITY_KIND: &str = "editor_project";
 const EDITOR_CHARACTER_IMAGE_SLOT: &str = "character";
@@ -177,6 +180,12 @@ pub struct EditorIconSpritesheetGenerationRequest {
     price_mud_points: u32,
 }
 
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorUiDesignAssetExtractionRequest {
+    source_image_src: String,
+}
+
 #[derive(Debug, Serialize)]
 #[serde(rename_all = "camelCase")]
 pub struct EditorProjectResponse {
@@ -1225,6 +1234,85 @@ pub async fn generate_editor_icon_spritesheet(
     ))
 }
 
+pub async fn extract_editor_ui_design_assets(
+    State(state): State<AppState>,
+    Extension(request_context): Extension<RequestContext>,
+    Extension(authenticated): Extension<AuthenticatedAccessToken>,
+    Json(payload): Json<EditorUiDesignAssetExtractionRequest>,
+) -> Result<Json<Value>, AppError> {
+    let reference_image =
+        parse_editor_reference_image(payload.source_image_src.as_str()).map_err(|error| {
+            error.with_details(json!({
+                "provider": "editor-ui-design-asset-extraction",
+                "field": "sourceImageSrc",
+                "message": "UI设计图必须是图片 Data URL。",
+            }))
+        })?;
+    let settings = require_openai_image_settings(&state)?.with_external_api_audit_context(
+        &request_context,
+        Some(authenticated.claims().user_id().to_string()),
+        None,
+    );
+    let http_client = build_openai_image_http_client(&settings)?;
+    let generated = create_openai_image_edit_with_references_and_model(
+        &http_client,
+        &settings,
+        GPT_IMAGE_2_MODEL,
+        EDITOR_UI_DESIGN_ASSET_EXTRACTION_PROMPT,
+        None,
+        EDITOR_IMAGE_GENERATION_SIZE,
+        1,
+        &[reference_image],
+        "图片画布提取UI设计图素材 spritesheet",
+    )
+    .await?;
+    let image = generated.images.into_iter().next().ok_or_else(|| {
+        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": "vector-engine",
+            "message": "VectorEngine 未返回 UI 设计图素材 spritesheet",
+        }))
+    })?;
+    let (spritesheet_width, spritesheet_height) = image::load_from_memory(image.bytes.as_slice())
+        .map(|image| (image.width(), image.height()))
+        .unwrap_or((512, 512));
+    let source = DownloadedImage {
+        bytes: image.bytes.clone(),
+        mime_type: image.mime_type.clone(),
+        extension: image.extension.clone(),
+    };
+    let icon_slices = slice_generated_icon_spritesheet_all_by_connected_components(&source)
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "editor-ui-design-asset-extraction",
+                "message": error.to_string(),
+            }))
+        })?;
+    let spritesheet_image_src =
+        data_url_from_image_bytes(image.mime_type.as_str(), image.bytes.as_slice());
+    let icon_image_srcs = icon_slices
+        .into_iter()
+        .map(editor_icon_response_from_slice)
+        .collect();
+
+    Ok(json_success_body(
+        Some(&request_context),
+        EditorIconSpritesheetGenerationResponse {
+            spritesheet_image_src,
+            spritesheet_width,
+            spritesheet_height,
+            icon_image_srcs,
+            prompt: EDITOR_UI_DESIGN_ASSET_EXTRACTION_PROMPT.to_string(),
+            actual_prompt: generated.actual_prompt,
+            model: GPT_IMAGE_2_MODEL.to_string(),
+            provider: "VectorEngine",
+            task_id: generated.task_id,
+            price_mud_points: crate::editor_generation_config::editor_image_generation_mud_points(
+                Some("icon"),
+            ),
+        },
+    ))
+}
+
 fn editor_project_payload_from_record(record: EditorProjectRecord) -> EditorProjectPayload {
     let canvas = editor_canvas_payload_from_record(record.canvas);
     EditorProjectPayload {
@@ -1898,6 +1986,14 @@ mod tests {
         assert!(prompt.contains("返回按钮、设置按钮、下一关按钮"));
     }
 
+    #[test]
+    fn editor_ui_design_asset_extraction_prompt_is_fixed() {
+        assert_eq!(
+            EDITOR_UI_DESIGN_ASSET_EXTRACTION_PROMPT,
+            "提取画面中的所有独立并整理成spritesheet"
+        );
+    }
+
     #[test]
     fn editor_icon_description_validation_filters_empty_and_rejects_more_than_limit() {
         let descriptions = normalize_icon_descriptions(vec![
diff --git a/server-rs/crates/api-server/src/modules/editor_project.rs b/server-rs/crates/api-server/src/modules/editor_project.rs
index be1ca8735..58a447149 100644
--- a/server-rs/crates/api-server/src/modules/editor_project.rs
+++ b/server-rs/crates/api-server/src/modules/editor_project.rs
@@ -1,5 +1,7 @@
 use axum::{
-    Router, middleware,
+    Router,
+    extract::DefaultBodyLimit,
+    middleware,
     routing::{get, patch, post},
 };
 
@@ -8,14 +10,17 @@ use crate::{
     editor_project::{
         create_editor_asset, create_editor_asset_folder, create_editor_project,
         create_editor_project_resource, delete_editor_asset, delete_editor_asset_folder,
-        delete_editor_project, edit_editor_image, generate_editor_icon_spritesheet,
-        generate_editor_image, get_editor_asset_library, get_editor_project, list_editor_projects,
-        load_recent_editor_project, rename_editor_project, save_editor_project_layout,
-        update_editor_asset, update_editor_asset_folder,
+        delete_editor_project, edit_editor_image, extract_editor_ui_design_assets,
+        generate_editor_icon_spritesheet, generate_editor_image, get_editor_asset_library,
+        get_editor_project, list_editor_projects, load_recent_editor_project,
+        rename_editor_project, save_editor_project_layout, update_editor_asset,
+        update_editor_asset_folder,
     },
     state::AppState,
 };
 
+const EDITOR_IMAGE_REFERENCE_BODY_LIMIT_BYTES: usize = 12 * 1024 * 1024;
+
 pub fn router(state: AppState) -> Router<AppState> {
     Router::new()
         .route(
@@ -113,9 +118,26 @@ pub fn router(state: AppState) -> Router<AppState> {
         )
         .route(
             "/api/editor/icon-spritesheets/generations",
-            post(generate_editor_icon_spritesheet).route_layer(middleware::from_fn_with_state(
-                state.clone(),
-                require_bearer_auth,
-            )),
+            post(generate_editor_icon_spritesheet)
+                // 中文注释：图标规范参考图会以 Data URL 提交，需避免默认 2MB body limit 在 handler 前拦截。
+                .layer(DefaultBodyLimit::max(
+                    EDITOR_IMAGE_REFERENCE_BODY_LIMIT_BYTES,
+                ))
+                .route_layer(middleware::from_fn_with_state(
+                    state.clone(),
+                    require_bearer_auth,
+                )),
+        )
+        .route(
+            "/api/editor/ui-designs/assets/extractions",
+            post(extract_editor_ui_design_assets)
+                // 中文注释：UI 设计图提取素材复用图片 Data URL 入参，需兼容较大的画板生成图。
+                .layer(DefaultBodyLimit::max(
+                    EDITOR_IMAGE_REFERENCE_BODY_LIMIT_BYTES,
+                ))
+                .route_layer(middleware::from_fn_with_state(
+                    state.clone(),
+                    require_bearer_auth,
+                )),
         )
 }
diff --git a/server-rs/crates/platform-image/src/generated_asset_sheets/mod.rs b/server-rs/crates/platform-image/src/generated_asset_sheets/mod.rs
index a9be573df..8c65326cd 100644
--- a/server-rs/crates/platform-image/src/generated_asset_sheets/mod.rs
+++ b/server-rs/crates/platform-image/src/generated_asset_sheets/mod.rs
@@ -20,5 +20,6 @@ pub use sheet::{
     crop_generated_asset_sheet_view_edge_matte,
     crop_generated_asset_sheet_view_edge_matte_with_options, slice_generated_asset_sheet,
     slice_generated_asset_sheet_two_items_per_row,
+    slice_generated_icon_spritesheet_all_by_connected_components,
     slice_generated_icon_spritesheet_by_connected_components,
 };
diff --git a/server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs b/server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs
index 3407258e9..40c53581b 100644
--- a/server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs
+++ b/server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs
@@ -12,6 +12,7 @@ use super::color::{
 };
 use super::error::GeneratedAssetSheetError;
 use image::{GenericImageView, ImageFormat};
+use std::collections::BTreeMap;
 
 #[derive(Clone, Debug, PartialEq, Eq)]
 pub struct GeneratedAssetSheetSliceImage {
@@ -148,7 +149,17 @@ pub fn slice_generated_icon_spritesheet_by_connected_components(
         GeneratedAssetSheetError::decode_image(format!("图标 spritesheet 解码失败：{error}"))
     })?;
     let source = apply_generated_asset_sheet_green_screen_alpha(source);
-    slice_generated_icon_spritesheet_rgba_by_connected_components(source, icon_names)
+    slice_generated_icon_spritesheet_rgba_by_connected_components(source, icon_names, false)
+}
+
+pub fn slice_generated_icon_spritesheet_all_by_connected_components(
+    image: &crate::DownloadedImage,
+) -> Result<Vec<GeneratedAssetSheetConnectedIcon>, GeneratedAssetSheetError> {
+    let source = image::load_from_memory(image.bytes.as_slice()).map_err(|error| {
+        GeneratedAssetSheetError::decode_image(format!("图标 spritesheet 解码失败：{error}"))
+    })?;
+    let source = apply_generated_asset_sheet_green_screen_alpha(source);
+    slice_generated_icon_spritesheet_rgba_by_connected_components(source, &[], true)
 }
 
 pub fn crop_generated_asset_sheet_view_edge_matte(
@@ -163,8 +174,9 @@ pub fn crop_generated_asset_sheet_view_edge_matte(
 fn slice_generated_icon_spritesheet_rgba_by_connected_components(
     source: image::DynamicImage,
     icon_names: &[String],
+    auto_name_all_components: bool,
 ) -> Result<Vec<GeneratedAssetSheetConnectedIcon>, GeneratedAssetSheetError> {
-    let image = source.to_rgba8();
+    let mut image = source.to_rgba8();
     let (width, height) = image.dimensions();
     let pixel_count = (width as usize).saturating_mul(height as usize);
     if pixel_count == 0 {
@@ -173,28 +185,31 @@ fn slice_generated_icon_spritesheet_rgba_by_connected_components(
         ));
     }
 
-    let mut visited = vec![false; pixel_count];
-    let mut components = Vec::<GeneratedAssetSheetCellBounds>::new();
-    for y in 0..height {
-        for x in 0..width {
-            let pixel_index = (y as usize)
-                .saturating_mul(width as usize)
-                .saturating_add(x as usize);
-            if visited[pixel_index] || image.get_pixel(x, y).0[3] == 0 {
-                continue;
-            }
-            components.push(flood_fill_generated_icon_component(
-                &image,
-                &mut visited,
-                width,
-                height,
-                x,
-                y,
-            ));
+    let mut components = detect_generated_icon_components_by_alpha(&image, width, height);
+    if components.len() < icon_names.len()
+        || (auto_name_all_components && generated_icon_alpha_fill_ratio(&image) > 0.92)
+    {
+        let foreground_image =
+            build_generated_icon_spritesheet_foreground_image(&image, width, height);
+        let foreground_components =
+            detect_generated_icon_components_by_alpha(&foreground_image, width, height);
+        if !foreground_components.is_empty()
+            && (foreground_components.len() >= icon_names.len()
+                || auto_name_all_components && foreground_components.len() >= components.len())
+        {
+            image = foreground_image;
+            components = foreground_components;
         }
     }
 
     components.sort_by_key(|bounds| (bounds.y0, bounds.x0));
+    let icon_names = if auto_name_all_components {
+        (1..=components.len())
+            .map(|index| format!("素材 {index}"))
+            .collect::<Vec<_>>()
+    } else {
+        icon_names.to_vec()
+    };
     if components.len() < icon_names.len() {
         return Err(GeneratedAssetSheetError::invalid_request(format!(
             "图标 spritesheet 连通域数量不足：需要 {} 个，实际 {} 个。",
@@ -235,6 +250,101 @@ fn slice_generated_icon_spritesheet_rgba_by_connected_components(
     Ok(icons)
 }
 
+fn generated_icon_alpha_fill_ratio(image: &image::RgbaImage) -> f32 {
+    let (width, height) = image.dimensions();
+    let total = (width as usize).saturating_mul(height as usize).max(1);
+    let visible = image.pixels().filter(|pixel| pixel.0[3] > 0).count();
+    visible as f32 / total as f32
+}
+
+fn detect_generated_icon_components_by_alpha(
+    image: &image::RgbaImage,
+    width: u32,
+    height: u32,
+) -> Vec<GeneratedAssetSheetCellBounds> {
+    let pixel_count = (width as usize).saturating_mul(height as usize);
+    let mut visited = vec![false; pixel_count];
+    let mut components = Vec::<GeneratedAssetSheetCellBounds>::new();
+    for y in 0..height {
+        for x in 0..width {
+            let pixel_index = (y as usize)
+                .saturating_mul(width as usize)
+                .saturating_add(x as usize);
+            if visited[pixel_index] || image.get_pixel(x, y).0[3] == 0 {
+                continue;
+            }
+            let bounds =
+                flood_fill_generated_icon_component(image, &mut visited, width, height, x, y);
+            if bounds.area() >= 16 {
+                components.push(bounds);
+            }
+        }
+    }
+    components
+}
+
+fn build_generated_icon_spritesheet_foreground_image(
+    image: &image::RgbaImage,
+    width: u32,
+    height: u32,
+) -> image::RgbaImage {
+    let background = estimate_generated_icon_spritesheet_background_pixel(image, width, height);
+    let mut foreground = image.clone();
+    for pixel in foreground.pixels_mut() {
+        if !is_generated_asset_sheet_foreground_pixel(pixel.0, background) {
+            pixel.0[3] = 0;
+        }
+    }
+    foreground
+}
+
+fn estimate_generated_icon_spritesheet_background_pixel(
+    image: &image::RgbaImage,
+    width: u32,
+    height: u32,
+) -> [u8; 4] {
+    let mut buckets = BTreeMap::<u32, (u32, [u32; 4])>::new();
+    let mut push_pixel = |pixel: [u8; 4]| {
+        let key = ((pixel[0] as u32 / 16) << 20)
+            | ((pixel[1] as u32 / 16) << 12)
+            | ((pixel[2] as u32 / 16) << 4)
+            | (pixel[3] as u32 / 64);
+        let entry = buckets.entry(key).or_insert((0, [0, 0, 0, 0]));
+        entry.0 = entry.0.saturating_add(1);
+        entry.1[0] = entry.1[0].saturating_add(pixel[0] as u32);
+        entry.1[1] = entry.1[1].saturating_add(pixel[1] as u32);
+        entry.1[2] = entry.1[2].saturating_add(pixel[2] as u32);
+        entry.1[3] = entry.1[3].saturating_add(pixel[3] as u32);
+    };
+
+    for x in 0..width {
+        push_pixel(image.get_pixel(x, 0).0);
+        if height > 1 {
+            push_pixel(image.get_pixel(x, height - 1).0);
+        }
+    }
+    for y in 1..height.saturating_sub(1) {
+        push_pixel(image.get_pixel(0, y).0);
+        if width > 1 {
+            push_pixel(image.get_pixel(width - 1, y).0);
+        }
+    }
+
+    buckets
+        .into_values()
+        .max_by_key(|(count, _)| *count)
+        .map(|(count, sums)| {
+            let count = count.max(1);
+            [
+                (sums[0] / count) as u8,
+                (sums[1] / count) as u8,
+                (sums[2] / count) as u8,
+                (sums[3] / count) as u8,
+            ]
+        })
+        .unwrap_or([255, 255, 255, 255])
+}
+
 fn flood_fill_generated_icon_component(
     image: &image::RgbaImage,
     visited: &mut [bool],
@@ -352,6 +462,38 @@ mod tests {
 
         assert!(error.to_string().contains("连通域数量不足"));
     }
+
+    #[test]
+    fn slices_all_icon_spritesheet_components_with_auto_names() {
+        let mut sheet: image::RgbaImage =
+            ImageBuffer::from_pixel(96, 64, Rgba([255, 255, 255, 255]));
+        for y in 8..24 {
+            for x in 10..28 {
+                sheet.put_pixel(x, y, Rgba([240, 80, 80, 255]));
+            }
+        }
+        for y in 34..50 {
+            for x in 56..76 {
+                sheet.put_pixel(x, y, Rgba([80, 120, 240, 255]));
+            }
+        }
+
+        let source = crate::DownloadedImage {
+            bytes: encode_png(sheet),
+            mime_type: "image/png".to_string(),
+            extension: "png".to_string(),
+        };
+        let icons = slice_generated_icon_spritesheet_all_by_connected_components(&source)
+            .expect("all icons should slice");
+
+        assert_eq!(icons.len(), 2);
+        assert_eq!(icons[0].name, "素材 1");
+        assert_eq!(icons[1].name, "素材 2");
+        let decoded = image::load_from_memory(icons[0].bytes.as_slice())
+            .expect("icon should decode")
+            .to_rgba8();
+        assert_eq!(decoded.get_pixel(0, 0).0[3], 0);
+    }
 }
 
 pub fn crop_generated_asset_sheet_view_edge_matte_with_options(
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 0a306e071..362a4dcca 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -20,6 +20,7 @@ import {
 
 const generateEditorImageMock = vi.hoisted(() => vi.fn());
 const generateEditorIconSpritesheetMock = vi.hoisted(() => vi.fn());
+const extractEditorUiDesignAssetsMock = vi.hoisted(() => vi.fn());
 const generateEditorCharacterAnimationMock = vi.hoisted(() => vi.fn());
 const editEditorImageMock = vi.hoisted(() => vi.fn());
 const createEditorAssetMock = vi.hoisted(() => vi.fn());
@@ -42,6 +43,7 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
   return {
     ...actual,
     editEditorImage: editEditorImageMock,
+    extractEditorUiDesignAssets: extractEditorUiDesignAssetsMock,
     createEditorAsset: createEditorAssetMock,
     createEditorAssetFolder: createEditorAssetFolderMock,
     createEditorProjectResource: createEditorProjectResourceMock,
@@ -64,6 +66,7 @@ describe('ImageCanvasEditorView generation integration', () => {
   setupImageCanvasEditorViewTestLifecycle({
     generateEditorImageMock,
     generateEditorIconSpritesheetMock,
+    extractEditorUiDesignAssetsMock,
     generateEditorCharacterAnimationMock,
     editEditorImageMock,
     createEditorAssetMock,
@@ -2264,6 +2267,102 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(screen.getByText('动作')).toBeTruthy();
   });
 
+  it('extracts UI design assets from the floating toolbar and keeps the spritesheet on canvas', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-ui-extract',
+      title: 'UI素材提取画布',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          layerId: 'layer-ui-design',
+          resourceId: 'resource-ui-design',
+          title: '战斗UI设计图',
+          src: 'data:image/png;base64,dWktZGVzaWdu',
+          x: 120,
+          y: 140,
+          width: 560,
+          height: 315,
+          originalWidth: 2048,
+          originalHeight: 1152,
+          zIndex: 2,
+          sourceType: 'generated',
+          prompt: '战斗UI',
+          actualPrompt: '战斗UI',
+          model: 'gpt-image-2',
+          provider: 'VectorEngine',
+          taskId: 'ui-design-task-1',
+          assetKind: 'ui-design',
+        },
+      ],
+      resources: [],
+      updatedAt: '2026-06-18T00:00:00.000Z',
+    });
+    extractEditorUiDesignAssetsMock.mockResolvedValueOnce({
+      spritesheetImageSrc: 'data:image/png;base64,dWktc2hlZXQ=',
+      spritesheetWidth: 512,
+      spritesheetHeight: 512,
+      iconImageSrcs: [
+        {
+          name: '素材 1',
+          imageSrc: 'data:image/png;base64,YXNzZXQtMQ==',
+          width: 96,
+          height: 96,
+        },
+      ],
+      prompt: '提取画面中的所有独立并整理成spritesheet',
+      actualPrompt: '提取画面中的所有独立并整理成spritesheet',
+      model: 'gpt-image-2',
+      provider: 'VectorEngine',
+      taskId: 'ui-extract-task-1',
+      priceMudPoints: 12,
+    });
+    render(<ImageCanvasEditorView />);
+
+    const uiDesignImage = await screen.findByAltText(
+      '画布图片：战斗UI设计图',
+    );
+    fireEvent.pointerDown(uiDesignImage.closest('button')!, {
+      button: 0,
+      pointerId: 156,
+      clientX: 180,
+      clientY: 180,
+    });
+    fireEvent.pointerUp(screen.getByLabelText('画布工作区'), {
+      pointerId: 156,
+      clientX: 180,
+      clientY: 180,
+    });
+    fireEvent.click(screen.getByRole('button', { name: '提取素材' }));
+
+    await waitFor(() => {
+      expect(extractEditorUiDesignAssetsMock).toHaveBeenCalledWith({
+        sourceImageSrc: 'data:image/png;base64,dWktZGVzaWdu',
+      });
+    });
+    expect(
+      await screen.findByAltText('画布图片：战斗UI设计图 素材图集'),
+    ).toBeTruthy();
+    expect(screen.getByAltText('画布图片：素材 1')).toBeTruthy();
+    expect(screen.getByText('图集')).toBeTruthy();
+    await waitFor(() => {
+      expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
+        'editor-project-ui-extract',
+        expect.objectContaining({
+          layers: expect.arrayContaining([
+            expect.objectContaining({
+              title: '战斗UI设计图 素材图集',
+              assetKind: 'icon-spritesheet',
+            }),
+            expect.objectContaining({
+              title: '素材 1',
+              assetKind: 'icon',
+            }),
+          ]),
+        }),
+      );
+    });
+  });
+
   it('opens quick edit from the floating toolbar, keeps the source as the last reference, and generates from a new frame', async () => {
     loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
       projectId: 'editor-project-quick-edit',
diff --git a/src/components/image-editor/ImageCanvasEditorModel.test.ts b/src/components/image-editor/ImageCanvasEditorModel.test.ts
index 4f0aca801..b2a0a8ec6 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.test.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.test.ts
@@ -141,25 +141,30 @@ describe('ImageCanvasEditorModel', () => {
         originalWidth: 420,
         originalHeight: 120,
         zIndex: 5,
-        sourceType: 'generated',
-        mediaType: 'audio',
-        assetKind: 'sound-effect',
-      },
-      new Map([
-        [
-          'resource-audio',
-          { imageSrc: '/generated-character-drafts/editor-audios/sfx.mp3' },
-        ],
-      ]),
-    );
+      sourceType: 'generated',
+      mediaType: 'audio',
+      assetKind: 'sound-effect',
+      durationSeconds: 2.4,
+    },
+    new Map([
+      [
+        'resource-audio',
+        {
+          imageSrc: '/generated-character-drafts/editor-audios/sfx.mp3',
+          durationSeconds: 2.4,
+        },
+      ],
+    ]),
+  );
 
     expect(hydrated).toMatchObject({
       id: 'layer-audio',
-      src: '/generated-character-drafts/editor-audios/sfx.mp3',
-      mediaType: 'audio',
-      assetKind: 'sound-effect',
-    });
+    src: '/generated-character-drafts/editor-audios/sfx.mp3',
+    mediaType: 'audio',
+    assetKind: 'sound-effect',
+    durationSeconds: 2.4,
   });
+});
 
   it('restores audio generation dialogs from saved layout', () => {
     const dialog: CanvasGenerationDialogState = {
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index b64fffac8..9fb7f505c 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -135,6 +135,7 @@ export function createLayerFromAsset(
     taskId: asset.taskId,
     objectKey: asset.objectKey,
     assetObjectId: asset.assetObjectId,
+    durationSeconds: asset.durationSeconds,
     sourceAssetId: asset.id,
   } satisfies CanvasLayer;
 }
@@ -162,6 +163,7 @@ export function serializeLayer(
     taskId: layer.taskId,
     objectKey: layer.objectKey,
     assetObjectId: layer.assetObjectId,
+    durationSeconds: layer.durationSeconds,
     sourceResourceId: layer.sourceResourceId,
     sourceAssetId: layer.sourceAssetId,
     groupId: layer.groupId,
@@ -344,6 +346,7 @@ export function hydrateCanvasGenerationDialog(
       typeof snapshot.makeInstrumental === 'boolean'
         ? snapshot.makeInstrumental
         : undefined,
+    audioDurationSeconds: audioDurationOrNull(snapshot.audioDurationSeconds),
     aspectRatio: stringOrUndefined(snapshot.aspectRatio),
     imageSize: stringOrUndefined(snapshot.imageSize),
     errorMessage: stringOrUndefined(snapshot.errorMessage),
@@ -400,6 +403,13 @@ export function hydrateLayer(
     taskId: stringOrNull(snapshot.taskId),
     objectKey: stringOrNull(snapshot.objectKey),
     assetObjectId: stringOrNull(snapshot.assetObjectId),
+    durationSeconds:
+      audioDurationOrNull(snapshot.durationSeconds) ??
+      audioDurationOrNull(
+        resourcesById.get(resourceId) as
+          | ({ imageSrc: string } & { durationSeconds?: unknown })
+          | undefined,
+      ),
     sourceResourceId: stringOrNull(snapshot.sourceResourceId),
     sourceAssetId: stringOrNull(snapshot.sourceAssetId),
     groupId: stringOrNull(snapshot.groupId),
@@ -443,6 +453,7 @@ export function mapAssetLibrarySnapshot(
       taskId: asset.taskId ?? undefined,
       objectKey: asset.objectKey ?? undefined,
       assetObjectId: asset.assetObjectId ?? undefined,
+      durationSeconds: asset.durationSeconds ?? undefined,
     })),
   };
 }
@@ -478,6 +489,17 @@ export function numberFromSnapshot(value: unknown, fallback: number) {
   return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
 }
 
+function audioDurationOrNull(value: unknown) {
+  if (value && typeof value === 'object' && 'durationSeconds' in value) {
+    return audioDurationOrNull(
+      (value as { durationSeconds?: unknown }).durationSeconds,
+    );
+  }
+  return typeof value === 'number' && Number.isFinite(value) && value > 0
+    ? value
+    : undefined;
+}
+
 export function bpmOrNull(value: unknown) {
   if (value === null) {
     return null;
@@ -631,6 +653,7 @@ export function canvasAssetKindOrNull(value: unknown): CanvasAssetKind | null {
     value === 'character' ||
     value === 'character-animation' ||
     value === 'icon' ||
+    value === 'icon-spritesheet' ||
     value === 'icon-spec' ||
     value === 'ui-design' ||
     value === 'video' ||
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index a009ec2fe..772c72b74 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -165,6 +165,7 @@ function createStageProps(): ImageCanvasStageViewProps {
     onOpenRedrawPanel: vi.fn(),
     onOpenCropExpandPanel: vi.fn(),
     onRemoveBackground: vi.fn(),
+    onExtractUiDesignAssets: vi.fn(),
     onOpenCharacterAnimationPanel: vi.fn(),
     onDownloadLayer: vi.fn(),
     onPasteCanvasClipboard: vi.fn(),
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index 903ed117d..4246137b6 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -13,6 +13,7 @@ export type CanvasAssetKind =
   | 'character'
   | 'character-animation'
   | 'icon'
+  | 'icon-spritesheet'
   | 'icon-spec'
   | 'ui-design'
   | 'video'
@@ -188,6 +189,7 @@ export type GenerateDialogState = {
   // 中文注释：音效 tempo 改为可空 BPM，null 表示用户不指定节奏。
   soundTempo?: number | null;
   makeInstrumental?: boolean;
+  audioDurationSeconds?: number | null;
   aspectRatio?: string;
   imageSize?: string;
   errorMessage?: string;
diff --git a/src/components/image-editor/ImageCanvasEditorView.test-utils.ts b/src/components/image-editor/ImageCanvasEditorView.test-utils.ts
index 526e27161..1b1831242 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test-utils.ts
+++ b/src/components/image-editor/ImageCanvasEditorView.test-utils.ts
@@ -16,6 +16,7 @@ export type AuthValue = NonNullable<
 export type ImageCanvasEditorViewServiceMocks = {
   generateEditorImageMock: Mock;
   generateEditorIconSpritesheetMock: Mock;
+  extractEditorUiDesignAssetsMock?: Mock;
   generateEditorCharacterAnimationMock: Mock;
   editEditorImageMock: Mock;
   createEditorAssetMock: Mock;
@@ -214,6 +215,7 @@ export async function readZipText(zip: JSZip, path: string) {
 export function setupImageCanvasEditorViewTestLifecycle({
   generateEditorImageMock,
   generateEditorIconSpritesheetMock,
+  extractEditorUiDesignAssetsMock,
   generateEditorCharacterAnimationMock,
   editEditorImageMock,
   createEditorAssetMock,
@@ -323,6 +325,7 @@ export function setupImageCanvasEditorViewTestLifecycle({
     vi.restoreAllMocks();
     generateEditorImageMock.mockReset();
     generateEditorIconSpritesheetMock.mockReset();
+    extractEditorUiDesignAssetsMock?.mockReset();
     generateEditorCharacterAnimationMock.mockReset();
     editEditorImageMock.mockReset();
     createEditorAssetMock.mockReset();
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index d964c6a85..a7672f180 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -561,6 +561,7 @@ export function ImageCanvasEditorView() {
     openRedrawPanel,
     openCropExpandPanel,
     removeSelectedLayerBackground,
+    extractUiDesignAssets,
     pickCharacterSpecFromLayer,
     pickGenerationReferenceFromLayer,
     pickQuickEditReferenceFromLayer,
@@ -923,6 +924,7 @@ export function ImageCanvasEditorView() {
     onOpenRedrawPanel: openRedrawPanel,
     onOpenCropExpandPanel: openCropExpandPanel,
     onRemoveBackground: removeSelectedLayerBackground,
+    onExtractUiDesignAssets: extractUiDesignAssets,
     onOpenCharacterAnimationPanel: openCharacterAnimationPanel,
     onDownloadLayer: exportLayerImage,
     onPasteCanvasClipboard: pasteCanvasClipboard,
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
index 3a9843a03..1c6b32607 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
@@ -220,31 +220,42 @@ describe('ImageCanvasGenerationLayerModel', () => {
       generationInputs: createGenerationInputs(),
     });
 
-    expect(layers).toHaveLength(3);
+    expect(layers).toHaveLength(4);
     expect(layers[0]).toMatchObject({
-      id: 'layer-icon-11',
-      title: '返回按钮',
+      id: 'layer-icon-spritesheet-11',
+      title: '图标素材图集 11',
       x: 200,
       y: 100,
+      width: 512,
+      height: 512,
+      assetKind: 'icon-spritesheet',
+      prompt: '图标 prompt',
+      actualPrompt: '图标 actual prompt',
+    });
+    expect(layers[1]).toMatchObject({
+      id: 'layer-icon-12',
+      title: '返回按钮',
+      x: 744,
+      y: 100,
       width: 256,
       height: 256,
       assetKind: 'icon',
       prompt: '图标 prompt',
       actualPrompt: '图标 actual prompt',
     });
-    expect(layers[1]).toMatchObject({
-      id: 'layer-icon-12',
+    expect(layers[2]).toMatchObject({
+      id: 'layer-icon-13',
       title: '设置按钮',
-      x: 200,
+      x: 744,
       y: 380,
       width: 512,
       height: 256,
       assetKind: 'icon',
     });
-    expect(layers[2]).toMatchObject({
-      id: 'layer-icon-13',
+    expect(layers[3]).toMatchObject({
+      id: 'layer-icon-14',
       title: '提示按钮',
-      x: 200,
+      x: 744,
       y: 660,
       width: 128,
       height: 128,
@@ -266,6 +277,7 @@ describe('ImageCanvasGenerationLayerModel', () => {
         taskId: 'sound-task-1',
         priceMudPoints: 10,
         audioKind: 'sound-effect',
+        durationSeconds: 75,
       },
       generatedIndex: 14,
       title: '游戏音效 14',
@@ -303,6 +315,7 @@ describe('ImageCanvasGenerationLayerModel', () => {
       model: 'audio1.0',
       provider: 'VectorEngine',
       taskId: 'sound-task-1',
+      durationSeconds: 75,
     });
   });
 
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
index 91032bca7..88b4e56aa 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
@@ -13,7 +13,10 @@ import type {
   CanvasViewport,
   GenerateDialogState,
 } from './ImageCanvasEditorTypes';
-import { ICON_FRAME_DISPLAY_SIZE } from './ImageCanvasGenerationModel';
+import {
+  ICON_FRAME_DISPLAY_SIZE,
+  ICON_FRAME_ORIGINAL_SIZE,
+} from './ImageCanvasGenerationModel';
 
 type CanvasSize = { width: number; height: number };
 
@@ -46,6 +49,7 @@ type IconSpritesheetResultLayerOptions = {
   viewport: CanvasViewport;
   generationInputs: CanvasGenerationInputs;
   frame?: GenerateDialogState['placeholder'];
+  spritesheetTitle?: string;
 };
 
 type VideoResultLayerOptions = {
@@ -226,6 +230,7 @@ export function createIconSpritesheetResultLayers({
   viewport,
   generationInputs,
   frame,
+  spritesheetTitle,
 }: IconSpritesheetResultLayerOptions): CanvasLayer[] {
   const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
   const startX =
@@ -234,11 +239,42 @@ export function createIconSpritesheetResultLayers({
     frame?.y ?? worldCenter.y - ICON_FRAME_DISPLAY_SIZE.height / 2;
   const spacing = 24;
   const maxRowWidth = 560;
-  let cursorX = startX;
+  const spritesheetOriginalWidth =
+    generated.spritesheetWidth || ICON_FRAME_ORIGINAL_SIZE.width;
+  const spritesheetOriginalHeight =
+    generated.spritesheetHeight || ICON_FRAME_ORIGINAL_SIZE.height;
+  const spritesheetDisplaySize = resolveLayerResolutionSize(
+    spritesheetOriginalWidth,
+    spritesheetOriginalHeight,
+    ICON_FRAME_DISPLAY_SIZE,
+  );
+  const spritesheetLayer: CanvasLayer = {
+    id: `layer-icon-spritesheet-${startIndex}`,
+    resourceId: `local-resource-icon-spritesheet-${startIndex}`,
+    title: spritesheetTitle ?? `图标素材图集 ${startIndex}`,
+    src: generated.spritesheetImageSrc,
+    x: startX,
+    y: startY,
+    width: spritesheetDisplaySize.width,
+    height: spritesheetDisplaySize.height,
+    originalWidth: spritesheetOriginalWidth,
+    originalHeight: spritesheetOriginalHeight,
+    zIndex: startIndex + 10,
+    sourceType: 'generated',
+    prompt: generated.prompt,
+    actualPrompt: generated.actualPrompt ?? generated.prompt,
+    model: generated.model,
+    provider: generated.provider,
+    taskId: generated.taskId,
+    assetKind: 'icon-spritesheet',
+    generationInputs,
+  };
+  const iconStartX = startX + spritesheetDisplaySize.width + 32;
+  let cursorX = iconStartX;
   let cursorY = startY;
   let rowHeight = 0;
 
-  return iconResults.map((icon, index) => {
+  const iconLayers = iconResults.map((icon, index) => {
     const originalWidth = icon.width || 128;
     const originalHeight = icon.height || 128;
     const { width, height } = resolveLayerResolutionSize(
@@ -246,13 +282,13 @@ export function createIconSpritesheetResultLayers({
       originalHeight,
       { width: 128, height: 128 },
     );
-    if (cursorX > startX && cursorX + width - startX > maxRowWidth) {
-      cursorX = startX;
+    if (cursorX > iconStartX && cursorX + width - iconStartX > maxRowWidth) {
+      cursorX = iconStartX;
       cursorY += rowHeight + spacing;
       rowHeight = 0;
     }
 
-    const generatedIndex = startIndex + index;
+    const generatedIndex = startIndex + index + 1;
     const layer: CanvasLayer = {
       id: `layer-icon-${generatedIndex}`,
       resourceId: `local-resource-icon-${generatedIndex}`,
@@ -279,6 +315,8 @@ export function createIconSpritesheetResultLayers({
     rowHeight = Math.max(rowHeight, height);
     return layer;
   });
+
+  return [spritesheetLayer, ...iconLayers];
 }
 
 export function createVideoResultLayer({
@@ -377,6 +415,7 @@ export function createAudioResultLayer({
     model: generated.model,
     provider: generated.provider,
     taskId: generated.taskId,
+    durationSeconds: generated.durationSeconds ?? undefined,
     generationInputs,
   };
 }
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index 1cb37dede..8c84eb16f 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -66,6 +66,8 @@ export const DEFAULT_ICON_DESCRIPTIONS = [
   '原图按钮',
   '冻结按钮',
 ];
+export const UI_DESIGN_ASSET_EXTRACTION_PROMPT =
+  '提取画面中的所有独立并整理成spritesheet';
 export const QUICK_EDIT_SIZE_PRESETS = [
   '1024x1024',
   '1536x1024',
@@ -266,6 +268,9 @@ export function getLayerKindLabel(layer: CanvasLayer) {
   if (layer.assetKind === 'icon') {
     return '图标';
   }
+  if (layer.assetKind === 'icon-spritesheet') {
+    return '图集';
+  }
   if (layer.assetKind === 'icon-spec') {
     return '图标规范';
   }
@@ -316,6 +321,9 @@ export function formatLayerImageType(layer: CanvasLayer) {
   if (layer.assetKind === 'icon') {
     return '图标素材图片';
   }
+  if (layer.assetKind === 'icon-spritesheet') {
+    return '图标素材图集';
+  }
   if (layer.assetKind === 'icon-spec') {
     return '图标规范图片';
   }
@@ -578,6 +586,24 @@ export function buildIconGenerationInputs(
   };
 }
 
+export function buildUiDesignAssetExtractionGenerationInputs(
+  sourceLayer: CanvasLayer,
+): CanvasGenerationInputs {
+  return {
+    fields: createGenerationInputField(
+      '提取提示词',
+      UI_DESIGN_ASSET_EXTRACTION_PROMPT,
+    ),
+    references: [
+      {
+        title: 'UI设计图',
+        label: sourceLayer.title,
+        src: sourceLayer.objectKey?.trim() || sourceLayer.src,
+      },
+    ],
+  };
+}
+
 export function buildEditGenerationInputs(
   title: '修改要求' | '快速编辑提示词' | '重绘提示词',
   prompt: string,
diff --git a/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx b/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
index 1b4837d70..b02424d18 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
@@ -131,6 +131,40 @@ describe('ImageCanvasMetadataModalView', () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
+  it('renders generated audio metadata with duration instead of resolution', () => {
+    render(
+      <ImageCanvasMetadataModalView
+        layer={createLayer({
+          title: '游戏背景音乐',
+          src: '/generated-character-drafts/editor-audios/music.wav',
+          mediaType: 'audio',
+          assetKind: 'background-music',
+          originalWidth: 420,
+          originalHeight: 120,
+          model: 'suno',
+          taskId: 'audio-task-75',
+          durationSeconds: 75,
+          generationInputs: {
+            fields: [{ title: '音乐描述', value: '紧张的地下城循环音乐' }],
+            references: [],
+          },
+        })}
+        onClose={vi.fn()}
+      />,
+    );
+
+    const dialog = screen.getByRole('dialog', { name: '音频信息' });
+
+    expect(within(dialog).getByText('音频类型')).toBeTruthy();
+    expect(within(dialog).getByText('游戏背景音乐')).toBeTruthy();
+    expect(within(dialog).getByText('音乐描述')).toBeTruthy();
+    expect(within(dialog).getByText('紧张的地下城循环音乐')).toBeTruthy();
+    expect(within(dialog).getByText('时长')).toBeTruthy();
+    expect(within(dialog).getByText('1:15')).toBeTruthy();
+    expect(within(dialog).queryByText('Resolution')).toBeNull();
+    expect(within(dialog).queryByText('420 x 120 px')).toBeNull();
+  });
+
   it('does not render a dialog when no layer is selected', () => {
     render(<ImageCanvasMetadataModalView layer={null} onClose={vi.fn()} />);
 
diff --git a/src/components/image-editor/ImageCanvasMetadataModalView.tsx b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
index 2a8aa2b20..af9191ca3 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
@@ -1,6 +1,7 @@
 import { UnifiedModal } from '../common/UnifiedModal';
 import { formatLayerImageType } from './ImageCanvasGenerationModel';
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
+import { formatCanvasDurationMetric } from './ImageCanvasMediaModel';
 
 export type ImageCanvasMetadataModalViewProps = {
   layer: CanvasLayer | null;
@@ -77,10 +78,24 @@ export function ImageCanvasMetadataModalView({
           </dd>
           <dt>Model</dt>
           <dd>{layer.model ?? '-'}</dd>
-          <dt>Resolution</dt>
-          <dd>
-            {layer.originalWidth} x {layer.originalHeight} px
-          </dd>
+          {layer.mediaType === 'audio' ? (
+            <>
+              <dt>时长</dt>
+              <dd>
+                {formatCanvasDurationMetric(layer.durationSeconds).replace(
+                  /^时长\s*/u,
+                  '',
+                )}
+              </dd>
+            </>
+          ) : (
+            <>
+              <dt>Resolution</dt>
+              <dd>
+                {layer.originalWidth} x {layer.originalHeight} px
+              </dd>
+            </>
+          )}
           <dt>Task</dt>
           <dd>{formatTaskIdForDisplay(layer.taskId)}</dd>
           <dt>Object</dt>
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
index 7d60a9b7d..5a22b9946 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
@@ -40,6 +40,7 @@ function renderSelectedToolbar(
     onOpenRedrawPanel: vi.fn(),
     onOpenCropExpandPanel: vi.fn(),
     onRemoveBackground: vi.fn(),
+    onExtractUiDesignAssets: vi.fn(),
     onOpenCharacterAnimationPanel: vi.fn(),
     onDownloadLayer: vi.fn(),
     ...overrides,
@@ -88,6 +89,32 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
     expect(
       within(toolbar).queryByRole('button', { name: /查看.*图片信息/u }),
     ).toBeNull();
+    expect(
+      within(toolbar).queryByRole('button', { name: '提取素材' }),
+    ).toBeNull();
+  });
+
+  it('renders UI design asset extraction after remove background', () => {
+    const layer = createLayer({
+      sourceType: 'generated',
+      assetKind: 'ui-design',
+    });
+    const props = renderSelectedToolbar({ selectedLayer: layer });
+    const toolbar = screen.getByRole('toolbar', { name: '图片工具栏' });
+    const buttons = within(toolbar).getAllByRole('button');
+
+    expect(buttons.map((button) => button.getAttribute('aria-label'))).toEqual([
+      '快速编辑',
+      '裁扩按钮',
+      '去除背景按钮',
+      '提取素材',
+      '重绘',
+      '下载按钮',
+    ]);
+
+    fireEvent.click(within(toolbar).getByRole('button', { name: '提取素材' }));
+
+    expect(props.onExtractUiDesignAssets).toHaveBeenCalledWith(layer);
   });
 
   it('renders character animation only for character layers', () => {
@@ -115,6 +142,7 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
         onOpenRedrawPanel={vi.fn()}
         onOpenCropExpandPanel={vi.fn()}
         onRemoveBackground={vi.fn()}
+        onExtractUiDesignAssets={vi.fn()}
         onOpenCharacterAnimationPanel={vi.fn()}
         onDownloadLayer={vi.fn()}
       />,
@@ -130,6 +158,7 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
         onOpenRedrawPanel={vi.fn()}
         onOpenCropExpandPanel={vi.fn()}
         onRemoveBackground={vi.fn()}
+        onExtractUiDesignAssets={vi.fn()}
         onOpenCharacterAnimationPanel={vi.fn()}
         onDownloadLayer={vi.fn()}
       />,
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
index 718f12e6b..cda87d1e9 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
@@ -2,6 +2,7 @@ import {
   Crop,
   Download,
   Eraser,
+  Scissors,
   Sparkles,
   WandSparkles,
 } from 'lucide-react';
@@ -18,6 +19,7 @@ type ImageCanvasSelectedLayerToolbarViewProps = {
   onOpenRedrawPanel: (layer: CanvasLayer) => void;
   onOpenCropExpandPanel: (layer: CanvasLayer) => void;
   onRemoveBackground: (layer: CanvasLayer) => void;
+  onExtractUiDesignAssets: (layer: CanvasLayer) => void;
   onOpenCharacterAnimationPanel: (layer: CanvasLayer) => void;
   onDownloadLayer: (layer: CanvasLayer) => void;
 };
@@ -29,6 +31,7 @@ export function ImageCanvasSelectedLayerToolbarView({
   onOpenRedrawPanel,
   onOpenCropExpandPanel,
   onRemoveBackground,
+  onExtractUiDesignAssets,
   onOpenCharacterAnimationPanel,
   onDownloadLayer,
 }: ImageCanvasSelectedLayerToolbarViewProps) {
@@ -69,6 +72,17 @@ export function ImageCanvasSelectedLayerToolbarView({
         icon={Eraser}
         onClick={() => onRemoveBackground(selectedLayer)}
       />
+      {selectedLayer.assetKind === 'ui-design' ? (
+        <PlatformIconButton
+          className="image-canvas-editor__floating-toolbar-text-button"
+          label="提取素材"
+          title="提取素材"
+          icon={<Scissors className="h-4 w-4" />}
+          onClick={() => onExtractUiDesignAssets(selectedLayer)}
+        >
+          <span>提取素材</span>
+        </PlatformIconButton>
+      ) : null}
       {selectedLayer.assetKind === 'character' ? (
         <EditorIconButton
           label="生成动画"
diff --git a/src/components/image-editor/ImageCanvasStageView.tsx b/src/components/image-editor/ImageCanvasStageView.tsx
index 1ca6f2200..9bd1ea880 100644
--- a/src/components/image-editor/ImageCanvasStageView.tsx
+++ b/src/components/image-editor/ImageCanvasStageView.tsx
@@ -100,6 +100,7 @@ export type ImageCanvasStageViewProps = {
   onOpenRedrawPanel: (layer: CanvasLayer) => void;
   onOpenCropExpandPanel: (layer: CanvasLayer) => void;
   onRemoveBackground: (layer: CanvasLayer) => void;
+  onExtractUiDesignAssets: (layer: CanvasLayer) => void;
   onOpenCharacterAnimationPanel: (layer: CanvasLayer) => void;
   onDownloadLayer: (layer: CanvasLayer) => void;
   onPasteCanvasClipboard: (canvasPoint?: { x: number; y: number }) => void;
@@ -189,6 +190,7 @@ export function ImageCanvasStageView({
   onOpenRedrawPanel,
   onOpenCropExpandPanel,
   onRemoveBackground,
+  onExtractUiDesignAssets,
   onOpenCharacterAnimationPanel,
   onDownloadLayer,
   onPasteCanvasClipboard,
@@ -275,6 +277,7 @@ export function ImageCanvasStageView({
         onOpenRedrawPanel={onOpenRedrawPanel}
         onOpenCropExpandPanel={onOpenCropExpandPanel}
         onRemoveBackground={onRemoveBackground}
+        onExtractUiDesignAssets={onExtractUiDesignAssets}
         onOpenCharacterAnimationPanel={onOpenCharacterAnimationPanel}
         onDownloadLayer={onDownloadLayer}
       />
diff --git a/src/components/image-editor/ImageCanvasWorldView.test.tsx b/src/components/image-editor/ImageCanvasWorldView.test.tsx
index bec870869..cadbe101f 100644
--- a/src/components/image-editor/ImageCanvasWorldView.test.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.test.tsx
@@ -376,16 +376,18 @@ describe('ImageCanvasWorldView', () => {
       ariaLabel: '音效生成占位图',
       generatorLabel: 'Sound Generator',
       badgeLabel: '音效',
+      metricLabel: '时长 --:--',
     },
     {
       mode: 'audio-background-music',
       ariaLabel: '背景音乐生成占位图',
       generatorLabel: 'Music Generator',
       badgeLabel: '背景音乐',
+      metricLabel: '时长 --:--',
     },
   ])(
     'keeps $mode generation title size and badge readable when zoomed out',
-    ({ mode, ariaLabel, generatorLabel, badgeLabel }) => {
+    ({ mode, ariaLabel, generatorLabel, badgeLabel, metricLabel }) => {
       const dialog = createGenerationDialog({
         id: `dialog-zoom-${mode}`,
         mode: mode as CanvasGenerationDialogState['mode'],
@@ -406,9 +408,9 @@ describe('ImageCanvasWorldView', () => {
         ),
       ).toBe(inverseScale);
       expect(
-        (within(frame).getByText('1024 x 768') as HTMLElement).style.getPropertyValue(
-          '--image-canvas-editor-inverse-scale',
-        ),
+        (
+          within(frame).getByText(metricLabel ?? '1024 x 768') as HTMLElement
+        ).style.getPropertyValue('--image-canvas-editor-inverse-scale'),
       ).toBe(inverseScale);
       expect(
         (within(frame).getByText(badgeLabel) as HTMLElement).style.getPropertyValue(
diff --git a/src/components/image-editor/ImageCanvasWorldView.tsx b/src/components/image-editor/ImageCanvasWorldView.tsx
index b90df1376..0a490f69c 100644
--- a/src/components/image-editor/ImageCanvasWorldView.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.tsx
@@ -10,6 +10,7 @@ import {
 import { useState } from 'react';
 import type {
   CSSProperties,
+  KeyboardEvent as ReactKeyboardEvent,
   MouseEvent as ReactMouseEvent,
   PointerEvent as ReactPointerEvent,
 } from 'react';
@@ -140,6 +141,7 @@ function buildInverseScaleStyle(
     '--image-canvas-editor-kind-offset': `calc(0.38rem * ${inverseScale})`,
     '--image-canvas-editor-beside-kind-offset': `calc(3.95rem * ${inverseScale})`,
     '--image-canvas-editor-frame-label-offset': `calc(-1.35rem * ${inverseScale})`,
+    '--image-canvas-editor-frame-action-offset': `calc(-0.75rem * ${inverseScale})`,
   };
 }
 
@@ -156,15 +158,15 @@ export type ImageCanvasWorldViewProps = {
   cropExpandSourceLayer: CanvasLayer | null;
   generationComposerStyle: CSSProperties | null;
   onLayerPointerDown: (
-    event: ReactPointerEvent<HTMLButtonElement>,
+    event: ReactPointerEvent<HTMLElement>,
     layer: CanvasLayer,
   ) => void;
   onLayerClick: (
-    event: ReactMouseEvent<HTMLButtonElement>,
+    event: ReactMouseEvent<HTMLElement>,
     layer: CanvasLayer,
   ) => void;
   onLayerContextMenu: (
-    event: ReactMouseEvent<HTMLButtonElement>,
+    event: ReactMouseEvent<HTMLElement>,
     layer: CanvasLayer,
   ) => void;
   onLayerMouseEnter: (layerId: string) => void;
@@ -195,6 +197,76 @@ const CROP_EXPAND_HANDLES: Array<{
   { value: 'left', label: '左边' },
 ];
 
+function stopMediaEventPropagation(
+  event: ReactMouseEvent<HTMLElement> | ReactPointerEvent<HTMLElement>,
+) {
+  event.stopPropagation();
+}
+
+function handleLayerKeyboardActivation(
+  event: ReactKeyboardEvent<HTMLElement>,
+) {
+  if (event.key !== 'Enter' && event.key !== ' ') {
+    return;
+  }
+  event.preventDefault();
+  event.currentTarget.click();
+}
+
+function getLayerMetricLabel(layer: CanvasLayer) {
+  if (layer.mediaType === 'audio') {
+    return formatCanvasDurationMetric(layer.durationSeconds);
+  }
+  return `${Math.round(layer.originalWidth)} x ${Math.round(
+    layer.originalHeight,
+  )} px`;
+}
+
+function isAudioGenerationDialog(dialog: CanvasGenerationDialogState) {
+  return (
+    dialog.mode === 'audio-sound-effect' ||
+    dialog.mode === 'audio-background-music'
+  );
+}
+
+function ImageCanvasAudioLayerCard({ layer }: { layer: CanvasLayer }) {
+  const [loadedDurationSeconds, setLoadedDurationSeconds] = useState<
+    number | null
+  >(null);
+  const { resolvedUrl } = useResolvedAssetReadUrl(layer.src, {
+    refreshKey: layer.taskId ?? layer.resourceId,
+  });
+  const prompt = layer.prompt?.trim();
+  const durationSeconds = layer.durationSeconds ?? loadedDurationSeconds;
+
+  return (
+    <div className="image-canvas-editor__audio-card">
+      {prompt ? (
+        <span className="image-canvas-editor__audio-card-title">{prompt}</span>
+      ) : null}
+      <audio
+        src={resolvedUrl || undefined}
+        controls
+        preload="metadata"
+        aria-label={`画布音频：${layer.title}`}
+        onClick={stopMediaEventPropagation}
+        onPointerDown={stopMediaEventPropagation}
+        onLoadedMetadata={(event) => {
+          const nextDuration = event.currentTarget.duration;
+          setLoadedDurationSeconds(
+            Number.isFinite(nextDuration) && nextDuration > 0
+              ? nextDuration
+              : null,
+          );
+        }}
+      />
+      <span className="image-canvas-editor__audio-card-meta">
+        {formatCanvasDurationMetric(durationSeconds)}
+      </span>
+    </div>
+  );
+}
+
 export function ImageCanvasWorldView({
   viewport,
   snapGuide,
@@ -262,10 +334,13 @@ export function ImageCanvasWorldView({
             generateDialog.sourceLayerId === layer.id
               ? '修改中'
               : null;
+          const LayerElement = layer.mediaType === 'audio' ? 'div' : 'button';
           return (
-            <button
+            <LayerElement
               key={layer.id}
-              type="button"
+              {...(layer.mediaType === 'audio'
+                ? { role: 'button', tabIndex: 0 }
+                : { type: 'button' })}
               className={`image-canvas-editor__layer ${isSelected ? 'image-canvas-editor__layer--selected' : ''} ${isHovered ? 'image-canvas-editor__layer--hovered' : ''} ${layerGeneratingLabel ? 'image-canvas-editor__layer--generating' : ''} ${layer.locked ? 'image-canvas-editor__layer--locked' : ''}`}
               style={{
                 left: layer.x,
@@ -278,18 +353,17 @@ export function ImageCanvasWorldView({
               onPointerDown={(event) => onLayerPointerDown(event, layer)}
               onClick={(event) => onLayerClick(event, layer)}
               onContextMenu={(event) => onLayerContextMenu(event, layer)}
+              onKeyDown={
+                layer.mediaType === 'audio'
+                  ? handleLayerKeyboardActivation
+                  : undefined
+              }
               onMouseEnter={() => onLayerMouseEnter(layer.id)}
               onMouseLeave={() => onLayerMouseLeave(layer.id)}
               aria-label={`选择${layer.title}`}
             >
               {layer.mediaType === 'audio' ? (
-                <div className="image-canvas-editor__audio-card">
-                  <audio
-                    src={layer.src}
-                    controls
-                    aria-label={`画布音频：${layer.title}`}
-                  />
-                </div>
+                <ImageCanvasAudioLayerCard layer={layer} />
               ) : layer.mediaType === 'video' ? (
                 <video
                   className="image-canvas-editor__layer-video"
@@ -311,7 +385,7 @@ export function ImageCanvasWorldView({
               )}
               {kindLabel ? (
                 <span
-                  className={`image-canvas-editor__kind-badge image-canvas-editor__kind-badge--${layer.assetKind}`}
+                  className={`image-canvas-editor__kind-badge image-canvas-editor__kind-badge--${layer.assetKind} image-canvas-editor__kind-badge--beside-info`}
                   style={inverseScaleStyle}
                 >
                   {kindLabel}
@@ -320,11 +394,7 @@ export function ImageCanvasWorldView({
               <PlatformIconButton
                 asChild="spanButton"
                 variant="darkMini"
-                className={`image-canvas-editor__metadata-corner ${
-                  kindLabel
-                    ? 'image-canvas-editor__metadata-corner--beside-kind'
-                    : ''
-                }`}
+                className="image-canvas-editor__metadata-corner"
                 label={`查看${layer.title}${
                   layer.mediaType === 'audio'
                     ? '音频'
@@ -347,8 +417,7 @@ export function ImageCanvasWorldView({
                   className="image-canvas-editor__size-badge"
                   style={inverseScaleStyle}
                 >
-                  {Math.round(layer.originalWidth)} x{' '}
-                  {Math.round(layer.originalHeight)} px
+                  {getLayerMetricLabel(layer)}
                 </PlatformPillBadge>
               ) : null}
               {layerGeneratingLabel ? (
@@ -359,7 +428,7 @@ export function ImageCanvasWorldView({
                   {layerGeneratingLabel}
                 </span>
               ) : null}
-            </button>
+            </LayerElement>
           );
         })}
       {canvasMarquee ? (
@@ -481,8 +550,11 @@ export function ImageCanvasWorldView({
                       className="image-canvas-editor__generation-frame-size"
                       style={inverseScaleStyle}
                     >
-                      {dialog.placeholder.originalWidth} x{' '}
-                      {dialog.placeholder.originalHeight}
+                      {isAudioGenerationDialog(dialog)
+                        ? formatCanvasDurationMetric(
+                            dialog.audioDurationSeconds ?? null,
+                          )
+                        : `${dialog.placeholder.originalWidth} x ${dialog.placeholder.originalHeight}`}
                     </span>
                   ) : null}
                   <span className="image-canvas-editor__generation-frame-icon">
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index cbcb8b8b2..4a1c31e8c 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -19,6 +19,7 @@ import { useImageCanvasGenerationSubmissionWorkflow } from './useImageCanvasGene
 
 const resolveEditorImageReferenceDataUrlMock = vi.hoisted(() => vi.fn());
 const editEditorImageMock = vi.hoisted(() => vi.fn());
+const extractEditorUiDesignAssetsMock = vi.hoisted(() => vi.fn());
 const generateEditorCharacterAnimationMock = vi.hoisted(() => vi.fn());
 const generateEditorIconSpritesheetMock = vi.hoisted(() => vi.fn());
 const generateEditorImageMock = vi.hoisted(() => vi.fn());
@@ -34,6 +35,7 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
   return {
     ...actual,
     editEditorImage: editEditorImageMock,
+    extractEditorUiDesignAssets: extractEditorUiDesignAssetsMock,
     generateEditorCharacterAnimation: generateEditorCharacterAnimationMock,
     generateEditorIconSpritesheet: generateEditorIconSpritesheetMock,
     generateEditorImage: generateEditorImageMock,
@@ -243,6 +245,16 @@ function SubmissionWorkflowHarness({
       >
         提交图标
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          if (sourceLayer) {
+            void workflow.extractUiDesignAssets(sourceLayer);
+          }
+        }}
+      >
+        提取UI素材
+      </button>
       <button
         type="button"
         onClick={() => void workflow.submitCharacterAnimation()}
@@ -275,6 +287,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
   beforeEach(() => {
     resolveEditorImageReferenceDataUrlMock.mockReset();
     editEditorImageMock.mockReset();
+    extractEditorUiDesignAssetsMock.mockReset();
     generateEditorCharacterAnimationMock.mockReset();
     generateEditorIconSpritesheetMock.mockReset();
     generateEditorImageMock.mockReset();
@@ -445,6 +458,9 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
 
   it('submits icon spritesheets, trims descriptions, and remembers the model', async () => {
     generateEditorIconSpritesheetMock.mockResolvedValueOnce({
+      spritesheetImageSrc: 'data:image/png;base64,sheet',
+      spritesheetWidth: 512,
+      spritesheetHeight: 512,
       prompt: '图标素材',
       actualPrompt: '图标素材',
       model: 'gpt-image-2',
@@ -498,21 +514,78 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     });
     await waitFor(() => {
       expect(screen.getByTestId('layers').textContent).toContain(
-        'layer-icon-1:返回按钮:-:icon',
+        'layer-icon-spritesheet-1:图标素材图集 1:-:icon-spritesheet',
       );
     });
     expect(screen.getByTestId('layers').textContent).toContain(
-      'layer-icon-2:设置按钮:-:icon',
+      'layer-icon-2:返回按钮:-:icon',
+    );
+    expect(screen.getByTestId('layers').textContent).toContain(
+      'layer-icon-3:设置按钮:-:icon',
+    );
+    expect(screen.getByTestId('selected').textContent).toBe(
+      'layer-icon-spritesheet-1',
     );
-    expect(screen.getByTestId('selected').textContent).toBe('layer-icon-1');
     expect(screen.getByTestId('dialog').textContent).toBe(
-      'icon:idle:open:layer-icon-1:placeholder:-',
+      'icon:idle:open:layer-icon-spritesheet-1:placeholder:-',
     );
     expect(screen.getByTestId('remembered-model').textContent).toBe(
       'gpt-image-2',
     );
   });
 
+  it('extracts UI design assets into a spritesheet layer and sliced icon layers', async () => {
+    extractEditorUiDesignAssetsMock.mockResolvedValueOnce({
+      spritesheetImageSrc: 'data:image/png;base64,ui-sheet',
+      spritesheetWidth: 512,
+      spritesheetHeight: 512,
+      prompt: '提取画面中的所有独立并整理成spritesheet',
+      actualPrompt: '提取画面中的所有独立并整理成spritesheet',
+      model: 'gpt-image-2',
+      provider: 'VectorEngine',
+      taskId: 'task-ui-assets',
+      priceMudPoints: 12,
+      iconImageSrcs: [
+        createIconResult('素材 1', 'data:image/png;base64,asset-1'),
+      ],
+    });
+    render(
+      <SubmissionWorkflowHarness
+        initialLayers={[
+          createLayer({
+            assetKind: 'ui-design',
+            objectKey: 'generated/ui-design.png',
+          }),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '提取UI素材' }));
+
+    await waitFor(() => {
+      expect(resolveEditorImageReferenceDataUrlMock).toHaveBeenCalledWith(
+        'generated/ui-design.png',
+      );
+    });
+    await waitFor(() => {
+      expect(extractEditorUiDesignAssetsMock).toHaveBeenCalledWith({
+        sourceImageSrc: 'data:image/png;base64,ui-design.png',
+      });
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('layers').textContent).toContain(
+        'layer-icon-spritesheet-1:源图 素材图集:-:icon-spritesheet',
+      );
+    });
+    expect(screen.getByTestId('layers').textContent).toContain(
+      'layer-icon-2:素材 1:-:icon',
+    );
+    expect(screen.getByTestId('selected').textContent).toBe(
+      'layer-icon-spritesheet-1',
+    );
+    expect(screen.getByTestId('fit-count').textContent).toBe('1');
+  });
+
   it('keeps character generation dialog data after the result is created', async () => {
     generateEditorImageMock.mockResolvedValueOnce(
       createGenerated({ width: 768, height: 768 }),
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index 89e1a8f70..b7fc19d7d 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -9,6 +9,7 @@ import {
 import { resolveEditorImageReferenceDataUrl } from '../../services/image-editor/editorImageReference';
 import {
   editEditorImage,
+  extractEditorUiDesignAssets,
   generateEditorBackgroundMusic,
   generateEditorCharacterAnimation,
   generateEditorIconSpritesheet,
@@ -39,6 +40,9 @@ import {
   buildCharacterAnimationGenerationInputs,
   buildEditGenerationInputs,
   buildQuickEditGenerationInputs,
+  buildUiDesignAssetExtractionGenerationInputs,
+  ICON_FRAME_DISPLAY_SIZE,
+  ICON_FRAME_ORIGINAL_SIZE,
   isCanvasGenerationDialog,
   normalizeQuickEditPromptSourceReference,
   resolveImageGenerationErrorMessage,
@@ -269,9 +273,12 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       generationInputs: CanvasGenerationInputs,
       frame?: GenerateDialogState['placeholder'],
       dialogId?: string,
+      options: {
+        spritesheetTitle?: string;
+      } = {},
     ) => {
       if (dialogId && !hasCanvasGenerationDialogById(dialogId)) {
-        return;
+        return [];
       }
       const startIndex = layerCounterRef.current + 1;
       const nextLayers = createIconSpritesheetResultLayers({
@@ -282,10 +289,11 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         viewport,
         generationInputs,
         frame,
+        spritesheetTitle: options.spritesheetTitle,
       });
 
       if (!nextLayers.length) {
-        return;
+        return [];
       }
       layerCounterRef.current += nextLayers.length;
       addGeneratedLayersToCanvas(nextLayers);
@@ -301,6 +309,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         }));
       }
       setActiveTool('select');
+      return nextLayers;
     },
     [
       addGeneratedLayersToCanvas,
@@ -471,6 +480,51 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     ],
   );
 
+  const extractUiDesignAssets = useCallback(
+    async (sourceLayer: CanvasLayer) => {
+      if (sourceLayer.assetKind !== 'ui-design') {
+        return;
+      }
+
+      try {
+        const sourceImageSrc = await resolveEditorImageReferenceDataUrl(
+          sourceLayer.objectKey?.trim() || sourceLayer.src,
+        );
+        const generated = await extractEditorUiDesignAssets({
+          sourceImageSrc,
+        });
+        const extractionFrame = {
+          x: sourceLayer.x + sourceLayer.width + 32,
+          y: sourceLayer.y,
+          width: ICON_FRAME_DISPLAY_SIZE.width,
+          height: ICON_FRAME_DISPLAY_SIZE.height,
+          originalWidth: ICON_FRAME_ORIGINAL_SIZE.width,
+          originalHeight: ICON_FRAME_ORIGINAL_SIZE.height,
+        };
+        const nextLayers = addIconSpritesheetResultLayers(
+          generated,
+          generated.iconImageSrcs,
+          buildUiDesignAssetExtractionGenerationInputs(sourceLayer),
+          extractionFrame,
+          undefined,
+          {
+            spritesheetTitle: `${sourceLayer.title} 素材图集`,
+          },
+        );
+        if (nextLayers.length) {
+          fitLayers([sourceLayer, ...nextLayers]);
+        }
+      } catch (error) {
+        window.alert(
+          error instanceof Error && error.message.trim()
+            ? error.message
+            : '提取素材失败',
+        );
+      }
+    },
+    [addIconSpritesheetResultLayers, fitLayers],
+  );
+
   const submitIconSpritesheetGeneration = useCallback(
     async (dialog: GenerateDialogState) => {
       if (dialog.mode !== 'icon') {
@@ -873,12 +927,14 @@ export function useImageCanvasGenerationSubmissionWorkflow({
   return useMemo(
     () => ({
       submitIconSpritesheetGeneration,
+      extractUiDesignAssets,
       submitQuickEdit,
       submitImageGeneration,
       submitCharacterAnimation,
     }),
     [
       submitCharacterAnimation,
+      extractUiDesignAssets,
       submitIconSpritesheetGeneration,
       submitImageGeneration,
       submitQuickEdit,
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index 70f6f667d..c91416fa6 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -928,12 +928,36 @@ export function useImageCanvasGenerationWorkflow({
     [characterAnimationDialog, setGenerateDialog],
   );
   const {
+    extractUiDesignAssets: submitUiDesignAssetExtraction,
     submitCharacterAnimation,
     submitIconSpritesheetGeneration,
     submitImageGeneration,
     submitQuickEdit,
   } = generationSubmissionWorkflow;
 
+  const extractUiDesignAssets = useCallback(
+    (sourceLayer: CanvasLayer) => {
+      closeGenerationTransientState();
+      setMetadataLayer(null);
+      setQuickEditPanel(null);
+      setCropExpandPanel(null);
+      setCharacterAnimationPanel(null);
+      selectSingleLayer(sourceLayer.id);
+      setActiveTool('select');
+      void submitUiDesignAssetExtraction(sourceLayer);
+    },
+    [
+      closeGenerationTransientState,
+      selectSingleLayer,
+      setActiveTool,
+      setCharacterAnimationPanel,
+      setCropExpandPanel,
+      setMetadataLayer,
+      setQuickEditPanel,
+      submitUiDesignAssetExtraction,
+    ],
+  );
+
   const updateSpecFormValue = useCallback(
     (key: keyof SpecFormValues, value: string) => {
       setGenerateDialog((currentDialog) =>
@@ -1071,6 +1095,7 @@ export function useImageCanvasGenerationWorkflow({
       openCropExpandPanel,
       startCropExpandFrameResize,
       removeSelectedLayerBackground,
+      extractUiDesignAssets,
       pickCharacterSpecFromLayer,
       pickGenerationReferenceFromLayer,
       pickQuickEditReferenceFromLayer,
@@ -1119,6 +1144,7 @@ export function useImageCanvasGenerationWorkflow({
       openCharacterGenerationDialog,
       openCropExpandPanel,
       openEditDialog,
+      extractUiDesignAssets,
       openGenerateDialog,
       openIconGenerationDialog,
       openRedrawPanel,
diff --git a/src/components/image-editor/useImageCanvasProjectPersistence.ts b/src/components/image-editor/useImageCanvasProjectPersistence.ts
index 822989c6a..bae9a8c66 100644
--- a/src/components/image-editor/useImageCanvasProjectPersistence.ts
+++ b/src/components/image-editor/useImageCanvasProjectPersistence.ts
@@ -106,6 +106,7 @@ export function useImageCanvasProjectPersistence({
         model: layer.model,
         provider: layer.provider,
         taskId: layer.taskId,
+        durationSeconds: layer.durationSeconds,
         sourceResourceId: layer.sourceResourceId,
       })
         .then((resource) => {
@@ -207,7 +208,10 @@ export function useImageCanvasProjectPersistence({
         const resourcesById = new Map(
           project.resources.map((resource) => [
             resource.resourceId,
-            { imageSrc: resource.imageSrc },
+            {
+              imageSrc: resource.imageSrc,
+              durationSeconds: resource.durationSeconds,
+            },
           ]),
         );
         const { layerItems, generationDialogs } = splitCanvasLayoutItems(
diff --git a/src/index.css b/src/index.css
index 413882a3e..49d0acdc3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4040,16 +4040,37 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__audio-card {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  align-items: center;
+  justify-content: center;
+  gap: 0.38rem;
   border-radius: 0.85rem;
   background: linear-gradient(135deg, #0f172a, #263449);
   padding: 0.85rem;
   box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
 }
 
+.image-canvas-editor__audio-card-title,
+.image-canvas-editor__audio-card-meta {
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.86);
+  font-size: 0.74rem;
+  font-weight: 800;
+  line-height: 1.1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__audio-card-title {
+  color: #ffffff;
+}
+
+.image-canvas-editor__audio-card-meta {
+  color: rgba(226, 232, 240, 0.72);
+}
+
 .image-canvas-editor__audio-card audio {
   width: 100%;
 }
@@ -4436,7 +4457,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__metadata-corner--beside-kind {
-  right: var(--image-canvas-editor-beside-kind-offset, 3.95rem);
+  right: var(--image-canvas-editor-corner-offset, 0.35rem);
 }
 
 .image-canvas-editor__spec-badge {
@@ -4479,6 +4500,10 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   transform-origin: top right;
 }
 
+.image-canvas-editor__kind-badge--beside-info {
+  right: var(--image-canvas-editor-beside-kind-offset, 3.95rem);
+}
+
 .image-canvas-editor__kind-badge--spec {
   background: rgba(37, 99, 235, 0.9);
   box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
@@ -4499,6 +4524,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 8px 18px rgba(16, 185, 129, 0.24);
 }
 
+.image-canvas-editor__kind-badge--icon-spritesheet {
+  background: rgba(20, 184, 166, 0.92);
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
 .image-canvas-editor__kind-badge--icon-spec {
   background: rgba(13, 148, 136, 0.92);
   box-shadow: 0 8px 18px rgba(13, 148, 136, 0.24);
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index db886302a..ffd79f282 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -9,6 +9,7 @@ import {
   deleteEditorAssetFolder,
   deleteEditorProject,
   editEditorImage,
+  extractEditorUiDesignAssets,
   generateEditorBackgroundMusic,
   generateEditorCharacterAnimation,
   generateEditorIconSpritesheet,
@@ -666,6 +667,49 @@ describe('editorProjectClient', () => {
     );
   });
 
+  it('extracts UI design assets through the dedicated backend BFF', async () => {
+    requestJsonMock.mockResolvedValueOnce({
+      spritesheetImageSrc: 'data:image/png;base64,ui-sheet',
+      spritesheetWidth: 1024,
+      spritesheetHeight: 1024,
+      iconImageSrcs: [
+        {
+          name: '素材 1',
+          imageSrc: 'data:image/png;base64,asset-1',
+          width: 128,
+          height: 128,
+        },
+      ],
+      prompt: '提取画面中的所有独立并整理成spritesheet',
+      actualPrompt: '提取画面中的所有独立并整理成spritesheet',
+      model: 'gpt-image-2',
+      provider: 'VectorEngine',
+      taskId: 'ui-asset-extraction-1',
+      priceMudPoints: 12,
+    });
+
+    const result = await extractEditorUiDesignAssets({
+      sourceImageSrc: 'data:image/png;base64,ui-design',
+    });
+
+    expect(result.taskId).toBe('ui-asset-extraction-1');
+    expect(requestJsonMock).toHaveBeenCalledWith(
+      '/api/editor/ui-designs/assets/extractions',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          sourceImageSrc: 'data:image/png;base64,ui-design',
+        }),
+      }),
+      '提取UI设计图素材失败',
+      expect.objectContaining({
+        timeoutMs: 1_200_000,
+        retry: { maxRetries: 0 },
+      }),
+    );
+  });
+
   it('passes spec generation size and kind to the backend BFF', async () => {
     requestJsonMock.mockResolvedValueOnce({
       imageSrc: 'data:image/png;base64,spec',
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index a934e0980..a3b29cee6 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -6,6 +6,8 @@ const EDITOR_IMAGE_GENERATION_API = '/api/editor/images/generations';
 const EDITOR_IMAGE_EDIT_API = '/api/editor/images/edits';
 const EDITOR_ICON_SPRITESHEET_GENERATION_API =
   '/api/editor/icon-spritesheets/generations';
+const EDITOR_UI_DESIGN_ASSET_EXTRACTION_API =
+  '/api/editor/ui-designs/assets/extractions';
 const EDITOR_CHARACTER_ANIMATION_GENERATION_API =
   '/api/editor/character-animations/generations';
 const EDITOR_VIDEO_GENERATION_API = '/api/editor/videos/generations';
@@ -106,6 +108,10 @@ export type EditorIconSpritesheetGenerationInput = {
   priceMudPoints: number;
 };
 
+export type EditorUiDesignAssetExtractionInput = {
+  sourceImageSrc: string;
+};
+
 export type EditorImageEditInput = {
   prompt: string;
   sourceImageSrc: string;
@@ -577,6 +583,24 @@ export async function generateEditorIconSpritesheet(
   );
 }
 
+export async function extractEditorUiDesignAssets(
+  input: EditorUiDesignAssetExtractionInput,
+) {
+  return requestJson<EditorIconSpritesheetGenerationResponse>(
+    EDITOR_UI_DESIGN_ASSET_EXTRACTION_API,
+    jsonRequest('POST', {
+      sourceImageSrc: input.sourceImageSrc,
+    }),
+    '提取UI设计图素材失败',
+    {
+      timeoutMs: 1_200_000,
+      retry: {
+        maxRetries: 0,
+      },
+    },
+  );
+}
+
 export async function editEditorImage(input: EditorImageEditInput) {
   return requestJson<EditorImageGenerationResponse>(
     EDITOR_IMAGE_EDIT_API,