From d1cd30069548869c5cfa5bcb953737569906af64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Wed, 17 Jun 2026 17:46:13 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E9=9A=90=E8=97=8F=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E4=B8=AD=E7=9A=84=E4=B8=8A=E6=B8=B8=E6=A0=87?=
 =?UTF-8?q?=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

图片信息弹窗标题固定为图片信息，不再拼接图片名称
图片信息弹窗移除 Provider 展示行
Task 展示收口为任务标识末尾数字，避免暴露 Provider 字符串
补充图片信息脱敏展示回归测试
更新画板角色形象生成文档中的图片信息展示口径
---
 ...��编辑器】画板角色形象生成入口设计-2026-06-15.md |  7 +++++++
 .../ImageCanvasMetadataModalView.test.tsx          | 14 +++++++++-----
 .../image-editor/ImageCanvasMetadataModalView.tsx  | 11 +++++++----
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
index 41360ec0..b67d3218 100644
--- a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
@@ -57,6 +57,13 @@
 - 提交生成规范时，若存在参考图，前端必须把参考图作为 `referenceImageSrcs[0]` 提交到 `/api/editor/images/generations`，并在生图提示词开头自动追加“参考图生成规范”语义：要求模型参考图 1 的构图、风格、材质、色彩、形状语言和视觉层级生成规范图，但不要复制参考图中的文字、水印或无关背景。
 - 生成结果的信息快照必须记录该参考图，标题为 `参考图`，便于后续在图片信息面板回看生成输入。
 
+## 图片信息展示
+
+- 图片信息弹窗标题固定为 `图片信息`，不拼接图片 / 图层名称。
+- 图片信息弹窗不展示 Provider 行，也不在 Task 中暴露 Provider 字符串。
+- Task 只展示任务标识里的数字部分；若任务标识没有数字，则显示 `-`。
+- 图片 / 图层名称只用于画布内部选择、图层列表和素材管理，不进入图片信息弹窗。
+
 ## 可访问性与状态
 
 - 点选状态下画布显示状态提示 `请选择画布中的图片作为角色形象规范，按 Esc 退出`。
diff --git a/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx b/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
index ba2e0efa..2263bdf0 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
@@ -31,7 +31,7 @@ describe('ImageCanvasMetadataModalView', () => {
         layer={createLayer({
           model: 'gpt-image-2',
           provider: 'VectorEngine',
-          taskId: 'task-123',
+          taskId: 'gpt-image-2-task-123',
           objectKey: 'generated/object.png',
           generationInputs: {
             fields: [{ title: '生成提示词', value: '清爽游戏按钮' }],
@@ -48,8 +48,9 @@ describe('ImageCanvasMetadataModalView', () => {
       />,
     );
 
-    const dialog = screen.getByRole('dialog', { name: '生成主图图片信息' });
+    const dialog = screen.getByRole('dialog', { name: '图片信息' });
 
+    expect(within(dialog).queryByText('生成主图')).toBeNull();
     expect(within(dialog).getByText('生成图片')).toBeTruthy();
     expect(within(dialog).getByText('生成提示词')).toBeTruthy();
     expect(within(dialog).getByText('清爽游戏按钮')).toBeTruthy();
@@ -57,8 +58,10 @@ describe('ImageCanvasMetadataModalView', () => {
     expect(within(dialog).getByText('角色立绘')).toBeTruthy();
     expect(within(dialog).getByText('gpt-image-2')).toBeTruthy();
     expect(within(dialog).getByText('1024 x 768 px')).toBeTruthy();
-    expect(within(dialog).getByText('VectorEngine')).toBeTruthy();
-    expect(within(dialog).getByText('task-123')).toBeTruthy();
+    expect(within(dialog).queryByText('Provider')).toBeNull();
+    expect(within(dialog).queryByText(/VectorEngine/u)).toBeNull();
+    expect(within(dialog).queryByText(/task-/u)).toBeNull();
+    expect(within(dialog).getByText('123')).toBeTruthy();
     expect(within(dialog).getByText('generated/object.png')).toBeTruthy();
   });
 
@@ -80,8 +83,9 @@ describe('ImageCanvasMetadataModalView', () => {
       />,
     );
 
-    const dialog = screen.getByRole('dialog', { name: '上传素材图片信息' });
+    const dialog = screen.getByRole('dialog', { name: '图片信息' });
 
+    expect(within(dialog).queryByText('上传素材')).toBeNull();
     expect(within(dialog).getByText('上传图片')).toBeTruthy();
     expect(within(dialog).getAllByText('-').length).toBeGreaterThanOrEqual(3);
     expect(within(dialog).getByText('asset-object-1')).toBeTruthy();
diff --git a/src/components/image-editor/ImageCanvasMetadataModalView.tsx b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
index 6751cd6a..628ea40b 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
@@ -7,6 +7,11 @@ export type ImageCanvasMetadataModalViewProps = {
   onClose: () => void;
 };
 
+function formatTaskIdForDisplay(taskId?: string | null) {
+  const numericParts = taskId?.match(/\d+/gu);
+  return numericParts?.length ? numericParts[numericParts.length - 1] : '-';
+}
+
 export function ImageCanvasMetadataModalView({
   layer,
   onClose,
@@ -14,7 +19,7 @@ export function ImageCanvasMetadataModalView({
   return (
     <UnifiedModal
       open={Boolean(layer)}
-      title={layer ? `${layer.title}图片信息` : '图片信息'}
+      title="图片信息"
       size="sm"
       closeLabel="关闭图片信息"
       onClose={onClose}
@@ -70,10 +75,8 @@ export function ImageCanvasMetadataModalView({
           <dd>
             {layer.originalWidth} x {layer.originalHeight} px
           </dd>
-          <dt>Provider</dt>
-          <dd>{layer.provider ?? '-'}</dd>
           <dt>Task</dt>
-          <dd>{layer.taskId ?? '-'}</dd>
+          <dd>{formatTaskIdForDisplay(layer.taskId)}</dd>
           <dt>Object</dt>
           <dd>{layer.objectKey ?? layer.assetObjectId ?? '-'}</dd>
         </dl>

From b2fd5574dbc07e11253e1c127c30427e874b216b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Wed, 17 Jun 2026 20:47:27 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=8E=A5=E5=85=A5=E7=94=BB=E6=9D=BF?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E8=A7=86=E9=A2=91=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增画板底部生成视频入口、Lovart 风格面板、视频图层渲染与元数据展示。

接入 /api/editor/videos/generations 契约与后端 Ark/VectorEngine 视频任务链路。

统一编辑器生成类泥点配置，并补充 UI 设计图、参考图与生成面板结构测试。

更新编辑器技术方案、生成类面板方案和 Hermes 共享决策/踩坑记录。
---
 .hermes/shared-memory/decision-log.md         |  20 +-
 .hermes/shared-memory/pitfalls.md             |   8 +
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |   8 +-
 ...��】生成类面板Lovart统一改造方案-2026-06-17.md | 101 +++
 ...辑器】画板UI设计图生成入口设计-2026-06-17.md |  53 ++
 ...辑器】画板图标素材生成入口设计-2026-06-15.md |  16 +-
 ...辑器】画板角色形象生成入口设计-2026-06-15.md |  34 +-
 .../src/character_animation_assets.rs         | 415 ++++++++++-
 .../src/editor_generation_config.rs           |  72 ++
 .../crates/api-server/src/editor_project.rs   | 327 +++++++--
 server-rs/crates/api-server/src/main.rs       |   1 +
 .../api-server/src/modules/play_flow.rs       |   9 +-
 .../api-server/src/openai_image_generation.rs |  92 ++-
 server-rs/crates/platform-image/src/lib.rs    |   7 +-
 .../src/vector_engine/client.rs               | 143 +++-
 .../platform-image/src/vector_engine/mod.rs   |   5 +-
 .../src/vector_engine/payload.rs              |  39 +
 .../src/vector_engine/request.rs              |  81 ++-
 .../platform-image/src/vector_engine/tests.rs |  60 +-
 .../platform-image/tests/vector_engine.rs     | 127 +++-
 .../crates/shared-contracts/src/assets.rs     |  79 +++
 .../image-editor/ImageCanvasEditorModel.ts    |   6 +-
 .../image-editor/ImageCanvasEditorTypes.ts    |  35 +-
 ...ImageCanvasGenerationComposerView.test.tsx | 296 ++++++++
 .../ImageCanvasGenerationLayerModel.ts        |  61 ++
 .../ImageCanvasGenerationModel.ts             | 118 +++-
 ...mageCanvasGenerationPlacementModel.test.ts | 113 +++
 .../ImageCanvasGenerationPlacementModel.ts    | 257 +++++++
 .../ImageCanvasMetadataModalView.test.tsx     |  36 +
 .../ImageCanvasMetadataModalView.tsx          |   6 +-
 .../useImageCanvasGenerationWorkflow.test.tsx | 101 ++-
 .../useImageCanvasKeyboardShortcuts.test.tsx  |   9 +
 .../useImageCanvasKeyboardShortcuts.ts        |  22 +-
 .../useImageCanvasStageInteractions.test.tsx  |   8 +
 .../useImageCanvasStageInteractions.ts        |  37 +
 .../useImageCanvasUploadWorkflow.test.tsx     |  58 +-
 src/index.css                                 | 665 +++++++++++++++---
 .../image-editor/editorProjectClient.test.ts  |  53 ++
 .../image-editor/editorProjectClient.ts       |  50 +-
 39 files changed, 3390 insertions(+), 238 deletions(-)
 create mode 100644 docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
 create mode 100644 docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
 create mode 100644 server-rs/crates/api-server/src/editor_generation_config.rs
 create mode 100644 src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
 create mode 100644 src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts
 create mode 100644 src/components/image-editor/ImageCanvasGenerationPlacementModel.ts

diff --git a/.hermes/shared-memory/decision-log.md b/.hermes/shared-memory/decision-log.md
index 5ccebe0e..a34f90af 100644
--- a/.hermes/shared-memory/decision-log.md
+++ b/.hermes/shared-memory/decision-log.md
@@ -2263,13 +2263,13 @@
 - 验证方式：新增或增删素材描述项时，面板宽度应随项数变化；图标素材规范入口应呈现参考卡视觉而非纯文本按钮；移动端下仍应固定在底部锚定，不出现内部滚动条。
 - 关联文档：`docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
 
-## 2026-06-16 图片画布图标素材采用 nanobanana2 spritesheet + 后端连通域拆分
+## 2026-06-16 图片画布图标素材与角色生成支持双图片模型
 
-- 背景：图片画布需要一次生成多枚 UI 图标素材，并保证生成后能按用户输入顺序命名、拆成独立透明素材铺回画布。
-- 决策：底部 `生成图标素材` 入口创建一叠空白图标占位和独立面板；图标规范参考图只允许绑定 `assetKind="icon-spec"`。前端提交 `/api/editor/icon-spritesheets/generations`，后端固定使用 VectorEngine `gemini-3.1-flash-image-preview`，`<=25` 个描述用 `512x512`，`>25` 个描述用 `1024x1024`，先生成绿幕 1:1 spritesheet，再由 `platform-image` 绿幕去背并按 8 邻域连通域从上到下、从左到右拆分。成品图标图层写入 `assetKind="icon"`。
-- 影响范围：`src/components/image-editor/ImageCanvasEditorView.tsx`、`src/services/image-editor/editorProjectClient.ts`、`server-rs/crates/api-server/src/editor_project.rs`、`server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs`、图片画布技术方案。
-- 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/services/image-editor/editorProjectClient.test.ts`、`cargo test --manifest-path server-rs/Cargo.toml -p platform-image generated_asset_sheets::sheet::tests -- --nocapture`、`cargo test --manifest-path server-rs/Cargo.toml -p api-server editor_project -- --nocapture`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
-- 关联文档：`docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+- 背景：图片画布需要一次生成多枚 UI 图标素材，并保证生成后能按用户输入顺序命名、拆成独立透明素材铺回画布；角色形象生成也需要和图标素材共用同一套图片模型选择、比例和大小口径。
+- 决策：底部 `生成图标素材` 入口创建一叠空白图标占位和独立面板；图标规范参考图只允许绑定 `assetKind="icon-spec"`。`生成角色形象` 与 `生成图标素材` 均支持 VectorEngine `gemini-3.1-flash-image-preview`（UI 显示 `nanobanana2`）和 `gpt-image-2`，默认 `nanobanana2`，用户在两类面板中切换过模型后下一次打开继续沿用上次模型。前端提交 `model`、`aspectRatio`、`imageSize`；后端不再按图标数量分 `512x512/1024x1024`，而是按模型归一尺寸：`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，把参考图写成 `inline_data`，并在 `generationConfig.imageConfig` 写入比例和大小，`0.5K` 传 `"512"`；`gpt-image-2` 无参考图走 generations，有参考图走 edits，按文档支持的 `size` 字符串映射。图标素材仍先生成绿幕 spritesheet，再由 `platform-image` 绿幕去背并按 8 邻域连通域从上到下、从左到右拆分。成品图标图层写入 `assetKind="icon"`，角色图层写入 `assetKind="character"`。
+- 影响范围：`src/components/image-editor/ImageCanvasEditorView.tsx`、`src/components/image-editor/useImageCanvasGenerationWorkflow.ts`、`src/services/image-editor/editorProjectClient.ts`、`server-rs/crates/api-server/src/editor_project.rs`、`server-rs/crates/platform-image/src/vector_engine/*`、`server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs`、图片画布技术方案。
+- 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts src/services/image-editor/editorProjectClient.test.ts`、`cargo test -p api-server editor_generation_dimensions_follow_model_options --manifest-path server-rs/Cargo.toml`、`cargo test -p platform-image nanobanana_generate_content --manifest-path server-rs/Cargo.toml`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
+- 关联文档：`docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md`、`docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
 
 ## 2026-06-16 图片画布生成面板与浮层层级收口
 
@@ -2294,3 +2294,11 @@
 - 影响范围：`src/components/image-editor/ImageCanvasEditorView.tsx`、图片画布 layout hydrate、新建 / 上传 / 生成 / 快速编辑 / 图标素材生成结果铺回画布逻辑，以及图片画布技术方案。
 - 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "hydrates canvas images from Resolution instead of saved Size|opens generated image info from the corner button and creates a real right-side edit result|shows image resolution on hover"`。
 - 关联文档：`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+
+## 2026-06-17 图片画布底部生成视频接入 Lovart 面板
+
+- 背景：编辑器画板底部工具栏需要新增 `生成视频`，并和现有 Lovart 式生成类面板、泥点展示、占位图和画布结果图层保持一致。
+- 决策：`生成视频` 点击后创建独立视频生成占位和极简面板，提交 `POST /api/editor/videos/generations`；首期支持 `seedance2.0`、`seedance2.0-fast`、`kling3.0`、`kling3.0-omni`、`veo3.1`、`veo3.1-fast`，固定文字转视频、`16:9`、标准模式和静音。后端复用 Ark / VectorEngine content generation task 轮询链路，下载视频后持久化到 OSS。生成结果在画布中写入 `mediaType="video"` 与 `assetKind="video"`，图片信息弹窗按视频显示为 `视频信息` / `视频类型`。生成类泥点价格统一走 `editor_generation_config`，视频和角色动画均为 480p 每秒 10 泥点、720p 每秒 20 泥点。
+- 影响范围：图片画布生成工作流、前端 editorProjectClient、`shared-contracts`、`api-server` 视频生成 BFF、编辑器技术方案和生成类面板方案。
+- 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "opens the bottom generate video panel"`、`npm run test -- src/components/image-editor/ImageCanvasMetadataModalView.test.tsx`、`npm run test -- src/services/image-editor/editorProjectClient.test.ts`、`cargo test -p shared-contracts editor_video --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server editor_video --manifest-path server-rs/Cargo.toml`、`npm run check:encoding`、`git diff --check`。
+- 关联文档：`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
diff --git a/.hermes/shared-memory/pitfalls.md b/.hermes/shared-memory/pitfalls.md
index 0be1a973..0ac3c3ea 100644
--- a/.hermes/shared-memory/pitfalls.md
+++ b/.hermes/shared-memory/pitfalls.md
@@ -55,6 +55,14 @@
 - 验证：测试断言菜单不包含在底部工具栏 / 参考图行里，并且生成面板打开时底部 `AI画布工具栏` 仍存在。
 - 关联：`src/components/image-editor/ImageCanvasEditorView.tsx`、`src/components/image-editor/ImageCanvasEditorView.test.tsx`。
 
+## 图片编辑器规范图片面板不要脱离统一生成 shell
+
+- 现象：生成 UI 设计图或新建图标素材规范时，面板参考图、输入区和底部生成按钮相对生成图片 / 生成角色 / 生成视频错位；图标素材规范甚至可能缺少首行参考图入口。
+- 原因：规范、UI 设计图等面板虽然都属于生成类入口，但 JSX 和 CSS 曾各自维护 `spec-footer`、局部 field wrapper 或缺省参考区，导致后续改造只覆盖普通图片 / 角色 / 视频，规范图片类面板结构漂移。
+- 处理：生成规范下的角色形象规范、UI 素材规范、图标素材规范、自定义规范，以及生成 UI 设计图，都必须复用 `image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image` 外层 shell；首行统一 `image-canvas-editor__generation-ref`，底部统一 `image-canvas-editor__generation-composer-footer` + `image-canvas-editor__generation-submit`。多字段内容只在中央字段区保持紧凑，不单独发明 footer 或省略参考区。
+- 验证：`npm test -- src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx -t "生成UI设计图|生成规范|visible titles|图标素材规范|character spec"`。
+- 关联：`src/components/image-editor/ImageCanvasGenerationComposerView.tsx`、`src/index.css`、`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`。
+
 ## 图片编辑器生成占位图在生成中也要使用最新拖拽位置
 
 - 现象：用户在图片编辑器里提交生成后继续拖动画布占位图，预览框可以移动，但生成完成后的真实图片仍落回提交瞬间的旧位置。
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 5c882f3a..67c0ecec 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -12,13 +12,13 @@
 - 编辑器左侧为图片素材栏，可展开 / 收起；移动端优先保持素材栏可折叠。
 - 中央画布支持背景拖拽平移、滚轮缩放、缩放百分比菜单、显示所有元素和固定比例缩放。
 - 画布左下角提供 Lovart 式状态控件：背景色圆点、素材 / 图层入口、小地图开关；小地图显示图层缩略分布和当前视口框，点击小地图执行显示所有元素。
-- 画布中的图片可展示、悬浮显示图片 Resolution 尺寸与边框，点击后在图片上方显示浮动工具栏；图片不再维护独立展示 `Size` 字段，画布显示宽高统一取 `originalWidth/originalHeight`（图片信息中的 `Resolution`）。
+- 画布中的图片可展示、悬浮显示图片 Resolution 尺寸与边框，点击后在图片上方显示浮动工具栏；图片右上角素材类型标签、查看信息按钮和悬浮尺寸标签在画布缩小时必须按 viewport 反向缩放，保持屏幕可读尺寸；查看信息按钮使用圆形 `i` 图标，不使用中括号或花括号样式。图片不再维护独立展示 `Size` 字段，画布显示宽高统一取 `originalWidth/originalHeight`（图片信息中的 `Resolution`）。
 - 默认工具为选择模式；底部工具栏采用 AI 画布工作流工具组：选择、抓手、上传、生成、局部修改 / 蒙版、文字、形状 / 标注、导出。
 - 鼠标中键拖拽始终平移画布；长按 Space 临时进入抓手模式，松开后恢复原工具。
 - 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层或画板的边缘与中心线。
 - 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、修改要求，以及角色形象规范 / 常规参考图 / 图标素材规范 / 修改参考图等参考图卡片。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
 - 对生成资源执行修改时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图。
-- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine `gpt-image-2`：纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成工具后先在画布中心创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图落在最新占位框位置，输入框继续跟随新生成图；点击所有图片生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和修改图片在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
+- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和快速编辑保留既有 `gpt-image-2` 路径；`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。`生成视频` 走 `/api/editor/videos/generations`，支持 Seedance 2.0 / Seedance 2.0 Fast / Kling 3.0 / Kling 3.0 Omni / Veo 3.1 / Veo 3.1 Fast，首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成工具后先在画布中心创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和修改图片在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
 - 底部生成类按钮每次点击都必须创建独立的画布生成对象；新建规范、角色形象或图标素材时，只切换当前编辑面板，不得销毁此前尚未生成或已生成后的其它生成对象状态。归档为非当前编辑对象的生成占位仍可拖动、删除和等待异步完成，完成 / 失败回写必须按生成对象 ID 读取最新占位状态，不能使用提交瞬间的旧快照。
 
 ## 交互规则
@@ -62,8 +62,10 @@
 - `POST /api/editor/assets`：批量或单个创建账号级素材，支持按钮上传和拖拽上传后的 data URL / 后续 OSS 元数据。
 - `PATCH /api/editor/assets/{assetId}`：重命名素材或移动素材到文件夹。
 - `DELETE /api/editor/assets/{assetId}`：删除素材。已放入画布的 project resource 不被级联删除，避免旧画布丢图。
-- `POST /api/editor/images/generations`：按提示词调用 VectorEngine `gpt-image-2` 生成图片；携带参考图的快速编辑也走该接口，前端必须把参考图源预读成图片 Data URL 后放入 `referenceImageSrcs`；接口返回 data URL、尺寸、prompt、model、provider 和 taskId。
+- `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`；`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/images/edits`：按提示词和当前图片 Data URL 调用 VectorEngine edits，返回新的生成图片元数据。
+- `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音和泥点价格生成视频。请求模型支持 `seedance2.0`、`seedance2.0-fast`、`kling3.0`、`kling3.0-omni`、`veo3.1`、`veo3.1-fast`；后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS，返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
 
 所有写接口都必须校验 Bearer 登录态和 owner；接口只返回当前用户有权读取的工程与资源。
 
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
new file mode 100644
index 00000000..d617fa79
--- /dev/null
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -0,0 +1,101 @@
+# 生成类面板 Lovart 统一改造方案
+
+日期：`2026-06-17`
+
+## 范围
+
+图片画布编辑器内以下生成类面板统一对齐 Lovart 式极简创作工具风格：
+
+- `生成图片`
+- `生成规范`
+- `生成角色形象`
+- `生成图标素材`
+- `生成UI设计图`
+- `生成视频`
+- `角色动画生成面板`
+
+## 统一布局
+
+1. 参考图区域永远位于面板第一行。
+2. 参考图使用统一参考图卡片：
+   - 普通参考图：灰蓝色图片图标。
+   - 规范参考图：紫色剪贴板图标。
+   - 图标素材规范：绿色图标图标。
+   - UI 图标规范：琥珀色图标图标。
+   - 视频参考图 / 角色视频源图：深色视频或角色图标。
+3. 参考图卡片尽量少文字；必要文字写在图标块内或短标签内，不写规则说明。
+4. 普通参考图支持连续追加：已有图缩略图后始终保留一个 `+` 入口。点击入口只弹出“从画布中选择 / 上传图片”来源选项，不再直接打开系统文件选择器；生成图片、生成视频、角色常规参考图等同类参考图入口都遵循同一交互。
+5. 单文本输入面板不显示文本框标题，用问题式 placeholder：
+   - 生成图片：`今天想生成什么画面？`
+   - 生成角色：`你希望角色如何设计？`
+   - 生成 UI：`你希望这个 UI 长什么样？`
+   - 生成视频：`你希望生成什么视频？`
+   - 角色动画：`你希望角色做什么动作？`
+6. 多输入框面板必须保留每个字段标题和输入框边界，例如生成规范、图标素材多描述。
+7. 生成规范下的角色形象规范、UI素材规范、图标素材规范和自定义规范都使用同一生成类 shell：首行参考图区域、中央字段区、底部生成按钮区，不再出现缺首行参考区或单独 footer 样式。
+
+## 参数交互
+
+画面比例、大小尺寸、模型、分辨率、时长等生成参数统一为 Lovart 式底部胶囊按钮：
+
+```text
+左下：[比例 · 尺寸 ˄]          右下：[模型 ˄] [生成 · 图标 12]
+```
+
+- 面板内不显示 `画面比例`、`大小尺寸`、`模型` 等字段标题，只显示当前选择值。
+- 图片类面板把画面比例和大小尺寸合并成一个左下角选项框；视频 / 角色动画把比例、时长、清晰度合并成一个左下角选项框。
+- 模型选项框和生成按钮位于右下角。
+- 点击后在父级生成面板内向上弹出子面板；父级面板隐藏或销毁时，子面板同步销毁。
+- 子面板展示时，点击父级面板中除当前子面板和选项触发器以外的任意区域即可收起，不额外显示右上角关闭按钮。
+- 弹出面板内可分组展示字段，点击某个选项只更新当前字段和选中样式，不关闭弹出面板，方便连续修改。
+- 模型子面板每行固定一个模型，不用方框包裹模型名；模型名不换行，前置对应模型类型图标，选中项在模型名后用对号标记。
+- 比例选项卡片内展示对应比例的线框。
+- 父级面板、底部选项框、弹出子面板字号保持一致。
+- 底部组合值使用 `·` 分隔，例如 `16:9 · 4秒 · 480p`。
+- 底部参数热区与生成按钮等高，默认不显示阴影；悬停显示轻量阴影；箭头默认向下，展开后旋转向上。
+- 生成图片和生成视频文本输入框紧贴参考图下方，取消旧网格预留导致的空白高度。
+- 不再在底部常驻展开全部可选项。
+
+## 泥点显示
+
+- 本次消耗泥点必须显示在生成按钮内部。
+- `泥点` 文本不在 UI 中显示，改用图标 + 数值，例如 `生成  ✦ 12`。
+- 泥点配置统一收口到 `api-server` 的编辑器生成配置模块；前端只保留与后端配置同名的展示兜底，后续可接接口动态下发。
+
+## 第一版计费配置
+
+```text
+生成图片：12 泥点
+生成规范：5 泥点
+生成角色形象：12 泥点
+生成图标素材：12 泥点
+生成UI设计图：12 泥点
+生成视频：480p 每秒 10 泥点，720p 每秒 20 泥点
+角色动画：480p 每秒 10 泥点，720p 每秒 20 泥点
+```
+
+## 生成视频模型与接口
+
+- 底部 `生成视频` 面板提交到 `POST /api/editor/videos/generations`。
+- 首期只开放文字生成视频，固定 `16:9`、静音、标准模式；结果作为 `mediaType="video"`、`assetKind="video"` 的视频图层加入画布。
+- 支持模型：
+  - `seedance2.0`
+  - `seedance2.0-fast`
+  - `kling3.0`
+  - `kling3.0-omni`
+- 不展示 Veo 模型入口。
+  - `veo3.1`
+  - `veo3.1-fast`
+- 后端复用现有 Ark / VectorEngine content generation task 轮询链路，并把生成视频持久化到 OSS；缺少 `ARK_CHARACTER_VIDEO_BASE_URL` 或 `ARK_CHARACTER_VIDEO_API_KEY` 时 fail-closed 返回配置错误。
+
+## 验收
+
+- 所有生成类面板首行都是参考图区域。
+- 比例 / 尺寸 / 模型不再平铺全部选项；比例与尺寸合并为左下角当前值按钮，模型与生成按钮位于右下角。
+- 单文本输入面板不显示字段标题，placeholder 是问题式文案。
+- 多文本输入面板字段标题和边界仍清晰。
+- 生成按钮内能看到图标化泥点消耗数值。
+- 弹出选项面板点击选项后保持打开，可连续修改多个字段。
+- 规范面板比图片生成面板更紧凑，字段间距和输入高度更小，但外层 shell、首行参考图和底部按钮区必须继续对齐生成图片 / 生成角色 / 生成视频。
+- 后端存在独立编辑器生成计费配置文件，角色动画价格校验使用该配置。
+- 生成视频结果以视频图层加入画布，画布媒体元素标记为 `画布视频：生成视频 N`。
diff --git a/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md b/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
new file mode 100644
index 00000000..5244dcfd
--- /dev/null
+++ b/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
@@ -0,0 +1,53 @@
+# 【编辑器】画板UI设计图生成入口设计
+
+日期：2026-06-17
+
+## 入口与画布状态
+
+- 底部 AI 画布工具栏新增 `生成UI设计图`。
+- 点击后立即在画布中新建 `UI设计图生成占位图`，不复用普通新建图片的空白样式。
+- 占位图默认 16:9 展示，生成成功后替换为 `assetKind: "ui-design"` 的画布图层。
+
+## 生成面板
+
+- 占位图下方打开独立生成面板，标题为 `生成UI设计图`。
+- 面板复用普通 `生成图片` / `生成角色形象` / `生成视频` 的生成类 shell：首行参考图区域、中央单文本输入、底部参数与生成按钮区。
+- 面板第一个模块为 `图标素材规范`，并放在首行参考图区域。
+- 点击图标素材规范卡片后，在卡片旁弹出来源菜单：
+  - `从画布中选择`
+  - `新建图标素材规范`
+  - `上传图片`
+- `从画布中选择` 只接受 `assetKind: "icon-spec"` 的图层；普通图片、其他类别图层和不携带标签的图片不绑定。
+- `新建图标素材规范` 复用现有图标素材规范生成表单。
+- `上传图片` 仅绑定到当前 UI 设计面板的图标素材规范参考，不自动添加为画布图层。
+
+## 生成参数
+
+- 支持自定义画面比例和大小尺寸。
+- 模型固定为 `gpt-image-2`，面板不提供切换到其他模型的能力。
+- 默认画面比例为 `16:9`，默认大小为 `1K`。
+
+## 提示词契约
+
+后端收到 `kind: "ui-design"` 时固定拼接：
+
+```text
+生成玩法UI原型图
+【用户输入】<用户输入>
+```
+
+如果用户设置了图标素材规范参考图，则追加：
+
+```text
+参考图1为图标素材规范，请在UI图标、按钮符号、描边、材质、圆角、阴影和状态层级上严格遵循参考图1的素材规范。
+```
+
+生成请求固定使用 `gpt-image-2`。有参考图时走图片编辑请求；无参考图时走图片生成请求。
+
+## 验收点
+
+- 点击 `生成UI设计图` 后出现 UI 设计占位图和独立生成面板。
+- 面板第一模块为图标素材规范，来源菜单包含三个动作。
+- 从画布选择时只能绑定图标素材规范图片。
+- 请求参数包含 `kind: "ui-design"`、`model: "gpt-image-2"`、比例、大小与可选参考图。
+- 生成图层信息面板展示 `用户输入` 与 `图标素材规范`。
diff --git a/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md b/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
index b49d87ae..2ecd4187 100644
--- a/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
@@ -39,11 +39,13 @@
 - 请求字段：
   - `referenceImageSrc`：图标素材规范 Data URL。
   - `iconDescriptions`：过滤空文本后的图标描述数组，`1..100`。
-  - `model`：固定 `gemini-3.1-flash-image-preview`。
-- 后端根据图标数量选择尺寸：
-  - `<=25` 个：`512x512`，即 0.5K 1:1。
-  - `>25` 个：`1024x1024`，即 1K 1:1。
-- 后端使用 VectorEngine 图片编辑接口，把 `referenceImageSrc` 作为参考图 1，模型固定传 `gemini-3.1-flash-image-preview`。
+  - `model`：支持 `gemini-3.1-flash-image-preview`（UI 显示 `nanobanana2`）和 `gpt-image-2`，默认 `nanobanana2`。
+  - `aspectRatio`：按 `x:y` 展示，选项跟随模型。
+  - `imageSize`：按 `0.5K / 1K / 2K` 展示，选项跟随模型。
+- 模型与尺寸选项：
+  - `nanobanana2`：比例 `1:1 / 2:3 / 3:2 / 9:16 / 16:9`；大小 `0.5K / 1K / 2K`。后端走 `/v1beta/models/{model}:generateContent`，把图标素材规范图作为 `inline_data`，并把 `aspectRatio` / `imageSize` 写入 `generationConfig.imageConfig`；`0.5K` 按 VectorEngine 文档传 `"512"`。
+  - `gpt-image-2`：比例 `1:1 / 2:3 / 3:2 / 9:16 / 16:9`；大小 `1K / 2K`。后端走 `/v1/images/edits`，把图标素材规范图作为 multipart `image`，按 `size` 映射：`1K 1:1 -> 1024x1024`、`1K 2:3/9:16 -> 1024x1536`、`1K 3:2/16:9 -> 1536x1024`、`2K 1:1 -> 2048x2048`、`2K 3:2/16:9 -> 2048x1152`；文档未列出 `2K` 竖版，`2K 2:3/9:16` 后端回落到 `1024x1536`。
+- 用户在角色或图标素材面板中切换过模型后，下一次打开这两类面板继续使用上次模型。
 - Prompt 固定为：
 
 ```text
@@ -72,6 +74,6 @@
 - 点击 `生成图标素材` 后出现一叠空白图标占位和图标素材面板。
 - `图标素材规范 -> 从画布中选择` 只能选择图标素材规范图，点击普通图片或角色规范图不会绑定。
 - 默认 6 个素材描述会进入 prompt；新增描述最多到 100 个。
-- `<=25` 个描述提交时后端请求尺寸为 `512x512`；`>25` 个描述提交时后端请求尺寸为 `1024x1024`。
-- VectorEngine 请求体的 `model` 为 `gemini-3.1-flash-image-preview`。
+- 默认打开图标素材面板时选中 `nanobanana2 / 1:1 / 1K`；模型切换后，角色和图标素材面板之间沿用上次选择的模型。
+- 图标素材生成请求必须带 `model`、`aspectRatio` 和 `imageSize`；`nanobanana2` 请求体必须包含 `generationConfig.imageConfig.aspectRatio/imageSize`，`gpt-image-2` 请求必须包含文档映射后的 `size`。
 - 生成成功后画布出现按描述命名的多个透明图标素材图层，图层之间不重叠。
diff --git a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
index b67d3218..9ac63ce6 100644
--- a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
@@ -32,6 +32,16 @@
 4. 左下角展示画面比例和大小选择按钮。
 5. 右下角展示模型选择和生成按钮。
 
+## 普通生成面板视觉口径
+
+普通 `生成图片`、`生成角色形象`、`生成UI设计图` 等锚定在图片下方的生成面板统一采用 Lovart 式极简创作工具风格：
+
+- PC 端优先保持面板锚定在占位图或目标图片下方，宽度允许比旧版略宽，避免比例、尺寸、模型和生成按钮挤成一行难以阅读。
+- 面板只展示创作必需输入：参考图、提示词、比例、大小、模型和生成按钮；不在 UI 内铺说明性规则文案。
+- 视觉以白色半透明面板、轻边框、低阴影、低饱和选项按钮和清晰黑色主按钮为主，减少游戏式厚重装饰，贴近 Lovart 的极简画布工具感。
+- 普通 `生成图片` 面板的比例、大小和模型必须使用真实选项按钮，不再使用占位式参数按钮或弹出“建设中”提示。
+- 移动端仍可固定在底部工具栏上方并允许内部滚动，保证不遮挡底部 AI 工具栏和画布操作。
+
 ## 生成与参考图契约
 
 - 前端提交角色生成时，使用 `POST /api/editor/images/generations`。
@@ -39,8 +49,14 @@
 - 角色形象规范与常规参考图作为 `referenceImageSrcs` 传入，顺序固定为：
   1. 角色形象规范图。
   2. 常规参考图列表。
-- 当前请求尺寸沿用编辑器普通生成默认值；比例和大小按钮先复用现有占位交互。
-- 后端如果收到参考图，则走带多参考图的图片编辑/参考图生成链路；没有参考图时走纯文本生成链路。
+- 请求同时提交 `model`、`aspectRatio` 和 `imageSize`：
+  - `model` 支持 `gemini-3.1-flash-image-preview`（UI 显示 `nanobanana2`）和 `gpt-image-2`，默认 `nanobanana2`。
+  - 用户在角色或图标素材面板中切换过模型后，下一次打开这两类面板继续使用上次模型。
+  - 比例按 `x:y` 展示；大小按 `0.5K / 1K / 2K` 展示。
+- 尺寸选项来源以 VectorEngine 接入文档为准：
+  - `nanobanana2`：比例 `1:1 / 2:3 / 3:2 / 9:16 / 16:9`；大小 `0.5K / 1K / 2K`。后端走 `/v1beta/models/{model}:generateContent`，把比例写入 `generationConfig.imageConfig.aspectRatio`，把大小写入 `generationConfig.imageConfig.imageSize`；其中 `0.5K` 按文档传 `"512"`。
+  - `gpt-image-2`：比例 `1:1 / 2:3 / 3:2 / 9:16 / 16:9`；大小 `1K / 2K`。后端走 `/v1/images/generations` 或 `/v1/images/edits`，按文档尺寸映射：`1K 1:1 -> 1024x1024`、`1K 2:3/9:16 -> 1024x1536`、`1K 3:2/16:9 -> 1536x1024`、`2K 1:1 -> 2048x2048`、`2K 3:2/16:9 -> 2048x1152`；文档未列出 `2K` 竖版，`2K 2:3/9:16` 后端回落到 `1024x1536`。
+- 后端如果收到参考图，`nanobanana2` 把参考图作为 `inline_data` 传入原生 `generateContent`；`gpt-image-2` 走带多参考图的图片编辑链路。没有参考图时按所选模型走纯文本生成链路。
 - `kind = "character"` 时，后端不直接把前端文本当完整生图提示词，而是把文本作为 `角色设定` 填入固定提示词骨架：
 
 ```text
@@ -52,11 +68,18 @@
 
 ## 生成规范参考图
 
-- `生成规范 -> 角色形象规范`、`UI素材规范`、`自定义规范` 的设定面板支持上传 1 张参考图；`图标素材规范` 继续使用后续图标素材生成面板里的专用规范图链路，不在这里重复新增入口。
+- `生成规范 -> 角色形象规范`、`UI素材规范`、`图标素材规范`、`自定义规范` 的设定面板都支持上传 1 张参考图，并统一放在面板首行参考图区域。
 - 参考图入口只展示字段标题、缩略图或上传图标、文件名，不把参考规则说明铺在 UI 上。
 - 提交生成规范时，若存在参考图，前端必须把参考图作为 `referenceImageSrcs[0]` 提交到 `/api/editor/images/generations`，并在生图提示词开头自动追加“参考图生成规范”语义：要求模型参考图 1 的构图、风格、材质、色彩、形状语言和视觉层级生成规范图，但不要复制参考图中的文字、水印或无关背景。
 - 生成结果的信息快照必须记录该参考图，标题为 `参考图`，便于后续在图片信息面板回看生成输入。
 
+## 新建生成图落点避让
+
+- 普通生成、生成规范、生成角色形象和生成图标素材在创建画布占位图前，必须先检测占位图矩形是否与画布中已有可见图片图层或已有生成占位图重叠。
+- 若当前屏幕中心对应的画板位置可用，则占位图仍创建在该中心；若重叠，则以当前屏幕中心对应画板位置为原点，按距离由近到远查找不重叠候选位置。
+- 候选占位图与相邻图片或占位图之间保留 `32px` 画板间距；隐藏图层不阻挡新建落点。
+- 选中落点后保持当前缩放比例不变，将视口中心移动到新占位图中心，确保用户创建后立即看到新图和生成面板。
+
 ## 图片信息展示
 
 - 图片信息弹窗标题固定为 `图片信息`，不拼接图片 / 图层名称。
@@ -78,13 +101,16 @@
 - `角色形象规范` 与 `上传常规参考图` 入口是带预览视觉块的参考图卡片，不是无样式文字。
 - `从画布中选择` 后点击已有画布图片可绑定为角色形象规范，`Esc` 可退出点选状态。
 - 上传常规参考图后缩略图右下角显示序号。
-- 输入角色设定并生成时，请求包含 `kind: "character"`、角色设定 prompt 和参考图数组。
+- 输入角色设定并生成时，请求包含 `kind: "character"`、角色设定 prompt、参考图数组、`model`、`aspectRatio` 和 `imageSize`。
+- 默认打开角色生成面板时选中 `nanobanana2 / 1:1 / 1K`；切换到 `gpt-image-2` 后再次打开角色或图标素材面板应沿用该模型。
 - 生成成功后在占位图位置创建 `assetKind: "character"` 图层，右上角显示 `角色` 标签，布局保存包含该字段。
 
 ## 当前落地记录
 
 - 前端画板已接入 `生成角色形象` 底部入口、角色占位图、角色面板、画布点选规范图、上传规范图、上传常规参考图和序号角标。
+- 画布生成类入口已统一接入新建占位图落点避让：优先使用当前屏幕中心对应画板位置，重叠时自动选择最近的不重叠位置，并将视口中心移动到新占位图。
 - 角色生成提交统一走 `/api/editor/images/generations`，按 `角色形象规范 -> 常规参考图` 顺序传 `referenceImageSrcs`，并写入 `assetKind: "character"`。
+- 角色和图标素材生成已接入 `nanobanana2` / `gpt-image-2` 模型切换、上次模型记忆，以及按模型归一的比例 / 大小尺寸；`nanobanana2` 使用原生 `generateContent` 的 `imageConfig.aspectRatio/imageSize`，`gpt-image-2` 使用文档列出的 `size` 字符串。
 - 角色生成后端已按固定 prompt 骨架补入 `角色设定`，并在生成成功后自动执行绿幕去背、写入 `generated-character-drafts/editor/character-images/<taskId>/image.png` 路径下的 OSS 私有对象，返回的 `objectKey` / `assetObjectId` 会随画板资源记录保存。
 - `Esc` 只退出角色规范画布点选状态，不关闭角色生成面板。
 - 已补充回归测试覆盖角色形象生成、点选退出、角色动画入口隔离和快速编辑入口。
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index 8740d379..26ee14cc 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -42,7 +42,8 @@ use shared_contracts::assets::{
     CharacterVisualDraftPayload, CharacterWorkflowCacheGetResponse, CharacterWorkflowCachePayload,
     CharacterWorkflowCacheSaveRequest, CharacterWorkflowCacheSaveResponse,
     EditorCharacterAnimationFramePayload, EditorCharacterAnimationGenerateRequest,
-    EditorCharacterAnimationGenerateResponse,
+    EditorCharacterAnimationGenerateResponse, EditorVideoGenerateRequest,
+    EditorVideoGenerateResponse,
 };
 use spacetime_client::SpacetimeClientError;
 
@@ -87,6 +88,15 @@ const ARK_VIDEO_TASK_POLL_INTERVAL_MS: u64 = 5_000;
 const EDITOR_CHARACTER_ANIMATION_MODEL: &str = "seedance2.0";
 const EDITOR_CHARACTER_ANIMATION_ASSET_KIND: &str = "editor_character_animation";
 const EDITOR_CHARACTER_ANIMATION_PROMPT_PREFIX: &str = "生成游戏角色动画，参考图作为首帧和尾帧，画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。背景固定为纯绿色绿幕，只作为抠像底色，禁止出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。\n动作描述：";
+const EDITOR_VIDEO_ASSET_KIND: &str = "editor_video";
+const EDITOR_VIDEO_ENTITY_KIND: &str = "editor_canvas";
+const EDITOR_VIDEO_SLOT: &str = "video_preview";
+const EDITOR_VIDEO_MODEL_SEEDANCE_2: &str = "seedance2.0";
+const EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST: &str = "seedance2.0-fast";
+const EDITOR_VIDEO_MODEL_KLING_3: &str = "kling3.0";
+const EDITOR_VIDEO_MODEL_KLING_3_OMNI: &str = "kling3.0-omni";
+const EDITOR_VIDEO_MODEL_VEO_3_1: &str = "veo3.1";
+const EDITOR_VIDEO_MODEL_VEO_3_1_FAST: &str = "veo3.1-fast";
 
 const BUILT_IN_MOTION_TEMPLATES: [MotionTemplate; 4] = [
     MotionTemplate {
@@ -575,6 +585,63 @@ pub async fn generate_editor_character_animation(
     ))
 }
 
+pub async fn generate_editor_video(
+    State(state): State<AppState>,
+    Extension(request_context): Extension<RequestContext>,
+    payload: Result<Json<EditorVideoGenerateRequest>, JsonRejection>,
+) -> Result<Json<Value>, Response> {
+    let Json(payload) = payload.map_err(|error| {
+        editor_video_error_response(
+            &request_context,
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "editor-video",
+                "message": error.body_text(),
+            })),
+        )
+    })?;
+
+    let normalized =
+        normalize_editor_video_request(payload).map_err(|error| {
+            editor_video_error_response(&request_context, error)
+        })?;
+    let settings = require_editor_video_settings(&state, normalized.model.as_str()).map_err(
+        |error| editor_video_error_response(&request_context, error),
+    )?;
+    let http_client = build_upstream_http_client(settings.ark.request_timeout_ms)
+        .map_err(|error| editor_video_error_response(&request_context, error))?;
+    let task_id = generate_ai_task_id(current_utc_micros());
+
+    let generated = request_editor_video_preview(
+        &state,
+        &http_client,
+        &settings,
+        "editor-video",
+        task_id.as_str(),
+        &normalized,
+    )
+    .await
+    .map_err(|error| editor_video_error_response(&request_context, error))?;
+
+    Ok(json_success_body(
+        Some(&request_context),
+        EditorVideoGenerateResponse {
+            ok: true,
+            video_src: generated.preview_video_path,
+            width: normalized.width,
+            height: normalized.height,
+            source_type: "generated".to_string(),
+            prompt: normalized.prompt,
+            actual_prompt: Some(generated.submitted_prompt),
+            model: normalized.model,
+            provider: "VectorEngine".to_string(),
+            task_id,
+            duration_seconds: normalized.duration_seconds,
+            resolution: normalized.resolution,
+            price_mud_points: normalized.price_mud_points,
+        },
+    ))
+}
+
 pub async fn get_character_animation_job(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
@@ -1371,6 +1438,114 @@ async fn request_editor_character_animation_preview(
     })
 }
 
+async fn request_editor_video_preview(
+    state: &AppState,
+    http_client: &reqwest::Client,
+    settings: &EditorVideoSettings,
+    owner_user_id: &str,
+    task_id: &str,
+    request: &NormalizedEditorVideoRequest,
+) -> Result<GeneratedAnimationPreview, AppError> {
+    let upstream_task_id =
+        create_editor_text_to_video_task(http_client, settings, request).await?;
+    let video_url =
+        wait_for_ark_content_generation_task(http_client, &settings.ark, upstream_task_id.as_str())
+            .await?;
+    let preview_payload =
+        download_generated_video(http_client, video_url.as_str(), "下载画板生成视频失败。").await?;
+    let preview_video_path =
+        put_generated_editor_video(state, owner_user_id, task_id, request, preview_payload).await?;
+
+    Ok(GeneratedAnimationPreview {
+        preview_video_path,
+        upstream_task_id,
+        submitted_prompt: request.prompt.clone(),
+        moderation_fallback_applied: false,
+    })
+}
+
+async fn create_editor_text_to_video_task(
+    http_client: &reqwest::Client,
+    settings: &EditorVideoSettings,
+    request: &NormalizedEditorVideoRequest,
+) -> Result<String, AppError> {
+    let response = http_client
+        .post(format!("{}/contents/generations/tasks", settings.ark.base_url))
+        .header(
+            reqwest::header::AUTHORIZATION,
+            format!("Bearer {}", settings.ark.api_key),
+        )
+        .header(reqwest::header::CONTENT_TYPE, "application/json")
+        .json(&json!({
+            "model": request.provider_model,
+            "content": [
+                {
+                    "type": "text",
+                    "text": request.prompt,
+                }
+            ],
+            "resolution": request.resolution,
+            "ratio": request.aspect_ratio,
+            "duration": request.duration_seconds,
+            "mode": "std",
+            "watermark": false,
+        }))
+        .send()
+        .await
+        .map_err(|error| {
+            map_character_animation_upstream_error(format!("请求画板视频服务失败：{error}"))
+        })?;
+
+    let status = response.status();
+    let body = response.text().await.map_err(|error| {
+        map_character_animation_upstream_error(format!("读取画板视频任务响应失败：{error}"))
+    })?;
+    if !status.is_success() {
+        return Err(parse_animation_upstream_error(
+            body.as_str(),
+            "创建画板视频任务失败。",
+        ));
+    }
+    let payload = parse_animation_json_payload(body.as_str(), "创建画板视频任务失败。")?;
+    extract_animation_task_id(&payload.payload).ok_or_else(|| {
+        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": "editor-video",
+            "message": "画板视频任务未返回任务 id。",
+        }))
+    })
+}
+
+async fn put_generated_editor_video(
+    state: &AppState,
+    owner_user_id: &str,
+    task_id: &str,
+    request: &NormalizedEditorVideoRequest,
+    preview_payload: MediaPayload,
+) -> Result<String, AppError> {
+    let put_result = put_character_animation_object(
+        state,
+        LegacyAssetPrefix::CharacterDrafts,
+        vec![
+            "editor-videos".to_string(),
+            sanitize_storage_segment(request.model.as_str(), "model"),
+            task_id.to_string(),
+        ],
+        format!("preview.{}", preview_payload.extension),
+        preview_payload.mime_type,
+        preview_payload.bytes,
+        build_asset_metadata(
+            EDITOR_VIDEO_ASSET_KIND,
+            owner_user_id,
+            EDITOR_VIDEO_ENTITY_KIND,
+            task_id,
+            EDITOR_VIDEO_SLOT,
+            request.model.as_str(),
+        ),
+    )
+    .await?;
+    Ok(put_result.legacy_public_path)
+}
+
 async fn create_editor_ark_image_to_video_task(
     http_client: &reqwest::Client,
     settings: &EditorCharacterAnimationSettings,
@@ -2131,7 +2306,10 @@ fn normalize_editor_character_animation_request(
     let frame_count = normalize_editor_character_animation_frame_count(payload.frame_count)?;
     let duration_seconds =
         normalize_editor_character_animation_duration(payload.duration_seconds, frame_count)?;
-    let expected_price = calculate_editor_character_animation_price(resolution, duration_seconds);
+    let expected_price = crate::editor_generation_config::editor_character_animation_mud_points(
+        resolution,
+        duration_seconds,
+    );
     if payload.price_mud_points != expected_price {
         return Err(editor_character_animation_bad_request(format!(
             "priceMudPoints 与分辨率和时长不一致，应为 {expected_price}。"
@@ -2212,6 +2390,145 @@ fn require_editor_character_animation_settings(
     })
 }
 
+fn normalize_editor_video_request(
+    payload: EditorVideoGenerateRequest,
+) -> Result<NormalizedEditorVideoRequest, AppError> {
+    let prompt = payload.prompt.trim().chars().take(4000).collect::<String>();
+    if prompt.is_empty() {
+        return Err(editor_video_bad_request("视频描述不能为空。"));
+    }
+    let model = normalize_editor_video_model(payload.model.as_str())?;
+    let aspect_ratio = normalize_editor_video_aspect_ratio(payload.aspect_ratio.as_str())?;
+    let resolution = normalize_editor_video_resolution(payload.resolution.as_str())?;
+    let duration_seconds = normalize_editor_video_duration(payload.duration_seconds)?;
+    if payload.mode.trim() != "std" {
+        return Err(editor_video_bad_request("mode 只支持 std。"));
+    }
+    if payload.sound.trim() != "off" {
+        return Err(editor_video_bad_request("sound 只支持 off。"));
+    }
+    let expected_price = crate::editor_generation_config::editor_video_generation_mud_points(
+        resolution,
+        duration_seconds,
+    );
+    if payload.price_mud_points != expected_price {
+        return Err(editor_video_bad_request(format!(
+            "priceMudPoints 与分辨率和时长不一致，应为 {expected_price}。"
+        )));
+    }
+    let (width, height) = resolve_editor_video_size(aspect_ratio, resolution);
+
+    Ok(NormalizedEditorVideoRequest {
+        prompt,
+        model: model.to_string(),
+        provider_model: resolve_editor_video_provider_model(model).to_string(),
+        aspect_ratio: aspect_ratio.to_string(),
+        resolution: resolution.to_string(),
+        duration_seconds,
+        price_mud_points: expected_price,
+        width,
+        height,
+    })
+}
+
+fn normalize_editor_video_model(value: &str) -> Result<&'static str, AppError> {
+    match value.trim() {
+        EDITOR_VIDEO_MODEL_SEEDANCE_2 => Ok(EDITOR_VIDEO_MODEL_SEEDANCE_2),
+        EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST => Ok(EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST),
+        EDITOR_VIDEO_MODEL_KLING_3 => Ok(EDITOR_VIDEO_MODEL_KLING_3),
+        EDITOR_VIDEO_MODEL_KLING_3_OMNI => Ok(EDITOR_VIDEO_MODEL_KLING_3_OMNI),
+        EDITOR_VIDEO_MODEL_VEO_3_1 => Ok(EDITOR_VIDEO_MODEL_VEO_3_1),
+        EDITOR_VIDEO_MODEL_VEO_3_1_FAST => Ok(EDITOR_VIDEO_MODEL_VEO_3_1_FAST),
+        _ => Err(editor_video_bad_request(
+            "model 只支持 seedance2.0、seedance2.0-fast、kling3.0、kling3.0-omni、veo3.1、veo3.1-fast。",
+        )),
+    }
+}
+
+fn resolve_editor_video_provider_model(model: &str) -> &str {
+    match model {
+        // 中文注释：Seedance 2.0 Fast 复用平台已有 fast seedance 上游模型；标准版按产品 ID 透传。
+        EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST => CHARACTER_ANIMATION_MODEL,
+        _ => model,
+    }
+}
+
+fn normalize_editor_video_aspect_ratio(value: &str) -> Result<&'static str, AppError> {
+    match value.trim() {
+        "16:9" => Ok("16:9"),
+        _ => Err(editor_video_bad_request("aspectRatio 只支持 16:9。")),
+    }
+}
+
+fn normalize_editor_video_resolution(value: &str) -> Result<&'static str, AppError> {
+    match value.trim() {
+        "480p" => Ok("480p"),
+        "720p" => Ok("720p"),
+        _ => Err(editor_video_bad_request("resolution 只支持 480p 或 720p。")),
+    }
+}
+
+fn normalize_editor_video_duration(value: u32) -> Result<u32, AppError> {
+    match value {
+        4 | 5 => Ok(value),
+        _ => Err(editor_video_bad_request("durationSeconds 只支持 4 或 5。")),
+    }
+}
+
+fn resolve_editor_video_size(aspect_ratio: &str, resolution: &str) -> (u32, u32) {
+    match (aspect_ratio, resolution) {
+        ("16:9", "720p") => (1280, 720),
+        _ => (854, 480),
+    }
+}
+
+fn require_editor_video_settings(
+    state: &AppState,
+    model: &str,
+) -> Result<EditorVideoSettings, AppError> {
+    let base_url = state
+        .config
+        .ark_character_video_base_url
+        .trim()
+        .trim_end_matches('/');
+    if base_url.is_empty() {
+        return Err(
+            AppError::from_status(StatusCode::SERVICE_UNAVAILABLE).with_details(json!({
+                "provider": "ark",
+                "reason": "ARK_CHARACTER_VIDEO_BASE_URL 未配置",
+            })),
+        );
+    }
+    let api_key = state
+        .config
+        .ark_character_video_api_key
+        .as_deref()
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .ok_or_else(|| {
+            AppError::from_status(StatusCode::SERVICE_UNAVAILABLE).with_details(json!({
+                "provider": "ark",
+                "reason": "ARK_CHARACTER_VIDEO_API_KEY 未配置",
+            }))
+        })?;
+
+    Ok(EditorVideoSettings {
+        ark: ArkVideoSettings {
+            base_url: base_url.to_string(),
+            api_key: api_key.to_string(),
+            request_timeout_ms: state.config.ark_character_video_request_timeout_ms.max(1),
+            model: resolve_editor_video_provider_model(model).to_string(),
+        },
+    })
+}
+
+fn editor_video_bad_request(message: impl Into<String>) -> AppError {
+    AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+        "provider": "editor-video",
+        "message": message.into(),
+    }))
+}
+
 fn build_editor_character_animation_prompt(prompt_text: &str) -> String {
     format!(
         "{}\n{}",
@@ -2272,11 +2589,6 @@ fn normalize_editor_character_animation_duration(
     }
 }
 
-fn calculate_editor_character_animation_price(resolution: &str, duration_seconds: u32) -> u32 {
-    let per_second = if resolution == "720p" { 20 } else { 10 };
-    per_second * duration_seconds
-}
-
 fn resolve_editor_character_animation_provider_ratio(
     ratio: &str,
     source_width: u32,
@@ -3792,6 +4104,10 @@ fn character_animation_error_response(
     error.into_response_with_context(Some(request_context))
 }
 
+fn editor_video_error_response(request_context: &RequestContext, error: AppError) -> Response {
+    error.into_response_with_context(Some(request_context))
+}
+
 pub(crate) struct MotionTemplate {
     pub(crate) id: &'static str,
     pub(crate) label: &'static str,
@@ -3836,6 +4152,10 @@ struct EditorCharacterAnimationSettings {
     duration_seconds: u32,
 }
 
+struct EditorVideoSettings {
+    ark: ArkVideoSettings,
+}
+
 #[derive(Debug)]
 struct NormalizedEditorCharacterAnimationRequest {
     source_layer_id: String,
@@ -3851,6 +4171,19 @@ struct NormalizedEditorCharacterAnimationRequest {
     fps: u32,
 }
 
+#[derive(Debug)]
+struct NormalizedEditorVideoRequest {
+    prompt: String,
+    model: String,
+    provider_model: String,
+    aspect_ratio: String,
+    resolution: String,
+    duration_seconds: u32,
+    price_mud_points: u32,
+    width: u32,
+    height: u32,
+}
+
 struct GeneratedAnimationPreview {
     preview_video_path: String,
     upstream_task_id: String,
@@ -4112,7 +4445,71 @@ mod tests {
 
     #[test]
     fn editor_character_animation_price_depends_on_resolution_and_duration() {
-        assert_eq!(calculate_editor_character_animation_price("480p", 4), 40);
-        assert_eq!(calculate_editor_character_animation_price("720p", 6), 120);
+        assert_eq!(
+            crate::editor_generation_config::editor_character_animation_mud_points("480p", 4),
+            40
+        );
+        assert_eq!(
+            crate::editor_generation_config::editor_character_animation_mud_points("720p", 6),
+            120
+        );
+    }
+
+    #[test]
+    fn editor_video_normalizes_lovart_model_contract() {
+        let normalized = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: " 让角色向镜头挥手 ".to_string(),
+            model: EDITOR_VIDEO_MODEL_KLING_3_OMNI.to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 5,
+            resolution: "480p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 50,
+        })
+        .expect("editor video request should normalize");
+
+        assert_eq!(normalized.prompt, "让角色向镜头挥手");
+        assert_eq!(normalized.model, EDITOR_VIDEO_MODEL_KLING_3_OMNI);
+        assert_eq!(normalized.provider_model, EDITOR_VIDEO_MODEL_KLING_3_OMNI);
+        assert_eq!(normalized.width, 854);
+        assert_eq!(normalized.height, 480);
+        assert_eq!(normalized.price_mud_points, 50);
+    }
+
+    #[test]
+    fn editor_video_seedance_fast_uses_existing_fast_seedance_model() {
+        let normalized = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: "快速生成镜头推进。".to_string(),
+            model: EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST.to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 4,
+            resolution: "720p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 80,
+        })
+        .expect("seedance fast request should normalize");
+
+        assert_eq!(normalized.provider_model, CHARACTER_ANIMATION_MODEL);
+        assert_eq!(normalized.width, 1280);
+        assert_eq!(normalized.height, 720);
+    }
+
+    #[test]
+    fn editor_video_rejects_price_mismatch() {
+        let error = normalize_editor_video_request(EditorVideoGenerateRequest {
+            prompt: "生成镜头。".to_string(),
+            model: EDITOR_VIDEO_MODEL_VEO_3_1.to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 5,
+            resolution: "480p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 40,
+        })
+        .expect_err("wrong price should fail");
+
+        assert!(error.body_text().contains("priceMudPoints"));
     }
 }
diff --git a/server-rs/crates/api-server/src/editor_generation_config.rs b/server-rs/crates/api-server/src/editor_generation_config.rs
new file mode 100644
index 00000000..1fb6ad58
--- /dev/null
+++ b/server-rs/crates/api-server/src/editor_generation_config.rs
@@ -0,0 +1,72 @@
+/// 图片画布编辑器生成类能力的泥点配置。
+///
+/// 中文注释：先用 api-server 静态配置收口价格事实源，避免继续把价格散落在
+/// 前端常量和具体 handler 内；后续若接后台配置，可只替换本模块读取来源。
+const EDITOR_IMAGE_GENERATION_MUD_POINTS: u32 = 12;
+const EDITOR_SPEC_GENERATION_MUD_POINTS: u32 = 5;
+const EDITOR_CHARACTER_IMAGE_GENERATION_MUD_POINTS: u32 = 12;
+const EDITOR_ICON_SPRITESHEET_GENERATION_MUD_POINTS: u32 = 12;
+const EDITOR_UI_DESIGN_GENERATION_MUD_POINTS: u32 = 12;
+
+pub(crate) const EDITOR_VIDEO_GENERATION_480P_MUD_POINTS_PER_SECOND: u32 = 10;
+pub(crate) const EDITOR_VIDEO_GENERATION_720P_MUD_POINTS_PER_SECOND: u32 = 20;
+
+pub(crate) const EDITOR_CHARACTER_ANIMATION_480P_MUD_POINTS_PER_SECOND: u32 = 10;
+pub(crate) const EDITOR_CHARACTER_ANIMATION_720P_MUD_POINTS_PER_SECOND: u32 = 20;
+
+pub(crate) fn editor_image_generation_mud_points(kind: Option<&str>) -> u32 {
+    match kind.map(str::trim) {
+        Some("spec") => EDITOR_SPEC_GENERATION_MUD_POINTS,
+        Some("character") => EDITOR_CHARACTER_IMAGE_GENERATION_MUD_POINTS,
+        Some("icon") => EDITOR_ICON_SPRITESHEET_GENERATION_MUD_POINTS,
+        Some("ui-design") => EDITOR_UI_DESIGN_GENERATION_MUD_POINTS,
+        _ => EDITOR_IMAGE_GENERATION_MUD_POINTS,
+    }
+}
+
+pub(crate) fn editor_video_generation_mud_points(resolution: &str, duration_seconds: u32) -> u32 {
+    let per_second = if resolution == "720p" {
+        EDITOR_VIDEO_GENERATION_720P_MUD_POINTS_PER_SECOND
+    } else {
+        EDITOR_VIDEO_GENERATION_480P_MUD_POINTS_PER_SECOND
+    };
+    per_second * duration_seconds
+}
+
+pub(crate) fn editor_character_animation_mud_points(
+    resolution: &str,
+    duration_seconds: u32,
+) -> u32 {
+    let per_second = if resolution == "720p" {
+        EDITOR_CHARACTER_ANIMATION_720P_MUD_POINTS_PER_SECOND
+    } else {
+        EDITOR_CHARACTER_ANIMATION_480P_MUD_POINTS_PER_SECOND
+    };
+    per_second * duration_seconds
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn editor_character_animation_price_uses_configured_resolution_rates() {
+        assert_eq!(editor_character_animation_mud_points("480p", 4), 40);
+        assert_eq!(editor_character_animation_mud_points("720p", 6), 120);
+    }
+
+    #[test]
+    fn editor_video_generation_price_uses_configured_resolution_rates() {
+        assert_eq!(editor_video_generation_mud_points("480p", 4), 40);
+        assert_eq!(editor_video_generation_mud_points("720p", 5), 100);
+    }
+
+    #[test]
+    fn editor_image_generation_price_uses_configured_kind_rates() {
+        assert_eq!(editor_image_generation_mud_points(None), 12);
+        assert_eq!(editor_image_generation_mud_points(Some("spec")), 5);
+        assert_eq!(editor_image_generation_mud_points(Some("character")), 12);
+        assert_eq!(editor_image_generation_mud_points(Some("icon")), 12);
+        assert_eq!(editor_image_generation_mud_points(Some("ui-design")), 12);
+    }
+}
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index 5e002c9a..b979116b 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -42,7 +42,8 @@ use crate::{
     openai_image_generation::{
         DownloadedOpenAiImage, GPT_IMAGE_2_MODEL, OpenAiReferenceImage,
         build_openai_image_http_client, create_openai_image_edit_with_references,
-        create_openai_image_edit_with_references_and_model, create_openai_image_generation,
+        create_openai_image_edit_with_references_and_model,
+        create_openai_image_generation_with_model, create_openai_nanobanana_generate_content,
         require_openai_image_settings,
     },
     platform_errors::map_oss_error,
@@ -57,9 +58,7 @@ const EDITOR_ASSET_ID_PREFIX: &str = "editor-asset-";
 const EDITOR_LAYOUT_MAX_BYTES: usize = 256 * 1024;
 const EDITOR_PROJECT_DEFAULT_TITLE: &str = "未命名画布";
 const EDITOR_IMAGE_GENERATION_SIZE: &str = "1024x1024";
-const EDITOR_ICON_SPRITESHEET_MODEL: &str = "gemini-3.1-flash-image-preview";
-const EDITOR_ICON_SPRITESHEET_SMALL_SIZE: &str = "512x512";
-const EDITOR_ICON_SPRITESHEET_LARGE_SIZE: &str = "1024x1024";
+const EDITOR_IMAGE_MODEL_NANOBANANA2: &str = "gemini-3.1-flash-image-preview";
 const EDITOR_ICON_DESCRIPTION_LIMIT: usize = 100;
 const EDITOR_CHARACTER_IMAGE_ASSET_KIND: &str = "editor_character_image";
 const EDITOR_CHARACTER_IMAGE_ENTITY_KIND: &str = "editor_project";
@@ -155,6 +154,8 @@ pub struct EditorImageGenerationRequest {
     size: Option<String>,
     kind: Option<String>,
     model: Option<String>,
+    aspect_ratio: Option<String>,
+    image_size: Option<String>,
     reference_image_srcs: Option<Vec<String>>,
 }
 
@@ -171,6 +172,8 @@ pub struct EditorIconSpritesheetGenerationRequest {
     reference_image_src: String,
     icon_descriptions: Vec<String>,
     model: Option<String>,
+    aspect_ratio: Option<String>,
+    image_size: Option<String>,
 }
 
 #[derive(Debug, Serialize)]
@@ -238,7 +241,7 @@ pub struct EditorImageGenerationResponse {
     source_type: &'static str,
     prompt: String,
     actual_prompt: Option<String>,
-    model: &'static str,
+    model: String,
     provider: &'static str,
     task_id: String,
 }
@@ -757,12 +760,33 @@ pub async fn generate_editor_image(
         );
     }
 
-    let image_size = normalize_editor_image_generation_size(payload.size.as_deref());
-    let _requested_model = payload.model.as_deref();
+    let generation_options = normalize_editor_generation_options(
+        payload.model.as_deref(),
+        payload.aspect_ratio.as_deref(),
+        payload.image_size.as_deref(),
+    );
+    let has_dimension_options = payload.aspect_ratio.is_some() || payload.image_size.is_some();
+    let legacy_size = normalize_editor_image_generation_size(payload.size.as_deref());
+    let image_size = if has_dimension_options {
+        Cow::Owned(generation_options.size.clone())
+    } else {
+        legacy_size
+    };
     let normalized_kind = payload.kind.as_deref().map(str::trim);
+    let _configured_price_mud_points =
+        crate::editor_generation_config::editor_image_generation_mud_points(normalized_kind);
     let is_character_generation = matches!(normalized_kind, Some("character"));
+    let is_ui_design_generation = matches!(normalized_kind, Some("ui-design"));
     let submitted_prompt = if is_character_generation {
         build_editor_character_image_prompt(role_setting.as_str())
+    } else if is_ui_design_generation {
+        build_editor_ui_design_prompt(
+            role_setting.as_str(),
+            payload
+                .reference_image_srcs
+                .as_ref()
+                .is_some_and(|references| references.iter().any(|source| !source.trim().is_empty())),
+        )
     } else {
         role_setting.clone()
     };
@@ -770,6 +794,7 @@ pub async fn generate_editor_image(
         Some("character") => "图片画布生成角色形象",
         Some("spec") => "图片画布生成规范",
         Some("quick-edit") => "图片画布快速编辑图片",
+        Some("ui-design") => "图片画布生成UI设计图",
         _ => "图片画布生成图片",
     };
     let reference_sources = payload
@@ -787,10 +812,46 @@ pub async fn generate_editor_image(
     );
     let http_client = build_openai_image_http_client(&settings)?;
     let negative_prompt = Some("文字、水印、边框、按钮、UI 控件、低清晰度、变形主体");
-    let generated = if reference_sources.is_empty() {
-        create_openai_image_generation(
+    let reference_images = if reference_sources.is_empty() {
+        Vec::new()
+    } else {
+        reference_sources
+            .iter()
+            .map(|source| parse_editor_reference_image(source.as_str()))
+            .collect::<Result<Vec<_>, _>>()?
+    };
+    let generation_options = if is_ui_design_generation {
+        normalize_editor_generation_options(
+            Some(GPT_IMAGE_2_MODEL),
+            payload.aspect_ratio.as_deref(),
+            payload.image_size.as_deref(),
+        )
+    } else {
+        generation_options
+    };
+    let image_size = if is_ui_design_generation {
+        Cow::Owned(generation_options.size.clone())
+    } else {
+        image_size
+    };
+    let generated = if generation_options.model == EDITOR_IMAGE_MODEL_NANOBANANA2 {
+        create_openai_nanobanana_generate_content(
             &http_client,
             &settings,
+            generation_options.model,
+            submitted_prompt.as_str(),
+            negative_prompt,
+            generation_options.aspect_ratio,
+            generation_options.provider_image_size,
+            reference_images.as_slice(),
+            failure_context,
+        )
+        .await?
+    } else if reference_images.is_empty() {
+        create_openai_image_generation_with_model(
+            &http_client,
+            &settings,
+            generation_options.model,
             submitted_prompt.as_str(),
             negative_prompt,
             image_size.as_ref(),
@@ -800,13 +861,10 @@ pub async fn generate_editor_image(
         )
         .await?
     } else {
-        let reference_images = reference_sources
-            .iter()
-            .map(|source| parse_editor_reference_image(source.as_str()))
-            .collect::<Result<Vec<_>, _>>()?;
-        create_openai_image_edit_with_references(
+        create_openai_image_edit_with_references_and_model(
             &http_client,
             &settings,
+            generation_options.model,
             submitted_prompt.as_str(),
             negative_prompt,
             image_size.as_ref(),
@@ -863,7 +921,7 @@ pub async fn generate_editor_image(
             source_type: "generated",
             prompt: role_setting,
             actual_prompt: generated.actual_prompt,
-            model: GPT_IMAGE_2_MODEL,
+            model: generation_options.model.to_string(),
             provider: "VectorEngine",
             task_id: generated.task_id,
         },
@@ -895,6 +953,96 @@ fn is_editor_custom_image_size(value: &str) -> bool {
     (64..=4096).contains(&width) && (64..=4096).contains(&height)
 }
 
+fn normalize_editor_generation_options(
+    model: Option<&str>,
+    aspect_ratio: Option<&str>,
+    image_size: Option<&str>,
+) -> EditorGenerationOptions {
+    let normalized_model = match model.map(str::trim).filter(|value| !value.is_empty()) {
+        Some(GPT_IMAGE_2_MODEL) => GPT_IMAGE_2_MODEL,
+        Some(EDITOR_IMAGE_MODEL_NANOBANANA2) => EDITOR_IMAGE_MODEL_NANOBANANA2,
+        // 中文注释：未显式传模型的旧普通生成、快速编辑和生成规范继续走 gpt-image-2；
+        // 角色 / 图标素材入口由前端显式传入 nanobanana2 默认值。
+        None => GPT_IMAGE_2_MODEL,
+        _ => EDITOR_IMAGE_MODEL_NANOBANANA2,
+    };
+    let aspect_ratio = normalize_editor_generation_aspect_ratio(aspect_ratio);
+    let image_size = normalize_editor_generation_image_size(normalized_model, image_size);
+    let size = editor_generation_size_for_model(normalized_model, aspect_ratio, image_size);
+    let provider_image_size =
+        editor_generation_provider_image_size_for_model(normalized_model, image_size);
+
+    EditorGenerationOptions {
+        model: normalized_model,
+        aspect_ratio,
+        image_size,
+        size,
+        provider_image_size,
+    }
+}
+
+fn normalize_editor_generation_aspect_ratio(aspect_ratio: Option<&str>) -> &'static str {
+    match aspect_ratio
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+    {
+        Some("2:3") => "2:3",
+        Some("3:2") => "3:2",
+        Some("9:16") => "9:16",
+        Some("16:9") => "16:9",
+        _ => "1:1",
+    }
+}
+
+fn normalize_editor_generation_image_size(model: &str, image_size: Option<&str>) -> &'static str {
+    match (
+        model,
+        image_size.map(str::trim).filter(|value| !value.is_empty()),
+    ) {
+        (EDITOR_IMAGE_MODEL_NANOBANANA2, Some("0.5K")) => "0.5K",
+        (_, Some("2K")) => "2K",
+        _ => "1K",
+    }
+}
+
+fn editor_generation_size_for_model(model: &str, aspect_ratio: &str, image_size: &str) -> String {
+    if model == EDITOR_IMAGE_MODEL_NANOBANANA2 {
+        return match image_size {
+            // 中文注释：VectorEngine 的 nanobanana2 文档要求 0.5K 传入 512。
+            "0.5K" => "512",
+            "2K" => "2048",
+            _ => "1024",
+        }
+        .to_string();
+    }
+
+    match (image_size, aspect_ratio) {
+        ("2K", "1:1") => "2048x2048",
+        // 中文注释：gpt-image-2 文档未列出 2K 竖版，竖版选择回落到文档明确支持的 1K 竖版。
+        ("2K", "2:3") | ("2K", "9:16") => "1024x1536",
+        ("2K", "16:9") | ("2K", "3:2") => "2048x1152",
+        ("1K", "2:3") | ("1K", "9:16") => "1024x1536",
+        ("1K", "3:2") | ("1K", "16:9") => "1536x1024",
+        _ => "1024x1024",
+    }
+    .to_string()
+}
+
+fn editor_generation_provider_image_size_for_model(
+    model: &str,
+    image_size: &'static str,
+) -> &'static str {
+    if model == EDITOR_IMAGE_MODEL_NANOBANANA2 {
+        return match image_size {
+            "0.5K" => "512",
+            "2K" => "2K",
+            _ => "1K",
+        };
+    }
+
+    image_size
+}
+
 pub async fn edit_editor_image(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
@@ -955,7 +1103,7 @@ pub async fn edit_editor_image(
             source_type: "generated",
             prompt,
             actual_prompt: generated.actual_prompt,
-            model: GPT_IMAGE_2_MODEL,
+            model: GPT_IMAGE_2_MODEL.to_string(),
             provider: "VectorEngine",
             task_id: generated.task_id,
         },
@@ -977,14 +1125,12 @@ pub async fn generate_editor_icon_spritesheet(
                 "message": "图标素材规范必须是图片 Data URL。",
             }))
         })?;
-    let model = payload
-        .model
-        .as_deref()
-        .map(str::trim)
-        .filter(|value| !value.is_empty())
-        .unwrap_or(EDITOR_ICON_SPRITESHEET_MODEL)
-        .to_string();
-    let size = editor_icon_spritesheet_size_for_count(icon_descriptions.len());
+    let generation_options = normalize_editor_generation_options(
+        payload.model.as_deref(),
+        payload.aspect_ratio.as_deref(),
+        payload.image_size.as_deref(),
+    );
+    let size = generation_options.size.as_str();
     let prompt = build_editor_icon_spritesheet_prompt(&icon_descriptions);
 
     let settings = require_openai_image_settings(&state)?.with_external_api_audit_context(
@@ -993,18 +1139,33 @@ pub async fn generate_editor_icon_spritesheet(
         None,
     );
     let http_client = build_openai_image_http_client(&settings)?;
-    let generated = create_openai_image_edit_with_references_and_model(
-        &http_client,
-        &settings,
-        model.as_str(),
-        prompt.as_str(),
-        None,
-        size,
-        1,
-        &[reference_image],
-        "图片画布生成图标素材 spritesheet",
-    )
-    .await?;
+    let generated = if generation_options.model == EDITOR_IMAGE_MODEL_NANOBANANA2 {
+        create_openai_nanobanana_generate_content(
+            &http_client,
+            &settings,
+            generation_options.model,
+            prompt.as_str(),
+            None,
+            generation_options.aspect_ratio,
+            generation_options.provider_image_size,
+            &[reference_image],
+            "图片画布生成图标素材 spritesheet",
+        )
+        .await?
+    } else {
+        create_openai_image_edit_with_references_and_model(
+            &http_client,
+            &settings,
+            generation_options.model,
+            prompt.as_str(),
+            None,
+            size,
+            1,
+            &[reference_image],
+            "图片画布生成图标素材 spritesheet",
+        )
+        .await?
+    };
     let image = generated.images.into_iter().next().ok_or_else(|| {
         AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
             "provider": "vector-engine",
@@ -1045,7 +1206,7 @@ pub async fn generate_editor_icon_spritesheet(
             icon_image_srcs,
             prompt,
             actual_prompt: generated.actual_prompt,
-            model,
+            model: generation_options.model.to_string(),
             provider: "VectorEngine",
             task_id: generated.task_id,
         },
@@ -1249,6 +1410,17 @@ fn build_editor_icon_spritesheet_prompt(icon_descriptions: &[String]) -> String
     )
 }
 
+fn build_editor_ui_design_prompt(user_input: &str, has_icon_spec_reference: bool) -> String {
+    let mut prompt = vec![
+        "生成玩法UI原型图".to_string(),
+        format!("【用户输入】{}", user_input.trim()),
+    ];
+    if has_icon_spec_reference {
+        prompt.push("参考图1为图标素材规范，请在UI图标、按钮符号、描边、材质、圆角、阴影和状态层级上严格遵循参考图1的素材规范。".to_string());
+    }
+    prompt.join("\n")
+}
+
 fn build_editor_character_image_prompt(role_setting: &str) -> String {
     vec![
         "严格基于图1的角色美术视觉规范指导中的美术风格、角色头身比、角色朝向等特征生成游戏角色形象图。画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。背景固定为纯绿色绿幕，只作为抠像底色，禁止生成美术视觉规范、出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。".to_string(),
@@ -1295,14 +1467,6 @@ fn prepare_editor_character_image_for_response(
     }
 }
 
-fn editor_icon_spritesheet_size_for_count(icon_count: usize) -> &'static str {
-    if icon_count <= 25 {
-        EDITOR_ICON_SPRITESHEET_SMALL_SIZE
-    } else {
-        EDITOR_ICON_SPRITESHEET_LARGE_SIZE
-    }
-}
-
 fn data_url_from_image_bytes(mime_type: &str, bytes: &[u8]) -> String {
     format!(
         "data:{};base64,{}",
@@ -1322,6 +1486,15 @@ fn editor_icon_response_from_slice(
     }
 }
 
+#[derive(Debug, Clone, PartialEq, Eq)]
+struct EditorGenerationOptions {
+    model: &'static str,
+    aspect_ratio: &'static str,
+    image_size: &'static str,
+    size: String,
+    provider_image_size: &'static str,
+}
+
 struct PersistedEditorGeneratedImage {
     object_key: String,
     asset_object_id: String,
@@ -1548,6 +1721,68 @@ mod tests {
         );
     }
 
+    #[test]
+    fn editor_generation_dimensions_follow_model_options() {
+        let default_generation = normalize_editor_generation_options(None, Some("1:1"), Some("1K"));
+        assert_eq!(default_generation.model, GPT_IMAGE_2_MODEL);
+        assert_eq!(default_generation.size, "1024x1024");
+
+        let nanobanana = normalize_editor_generation_options(
+            Some(EDITOR_IMAGE_MODEL_NANOBANANA2),
+            Some("1:1"),
+            Some("0.5K"),
+        );
+        assert_eq!(nanobanana.model, EDITOR_IMAGE_MODEL_NANOBANANA2);
+        assert_eq!(nanobanana.size, "512");
+        assert_eq!(nanobanana.aspect_ratio, "1:1");
+        assert_eq!(nanobanana.image_size, "0.5K");
+        assert_eq!(nanobanana.provider_image_size, "512");
+
+        let gpt = normalize_editor_generation_options(Some("gpt-image-2"), Some("2:3"), Some("1K"));
+        assert_eq!(gpt.model, GPT_IMAGE_2_MODEL);
+        assert_eq!(gpt.size, "1024x1536");
+        assert_eq!(gpt.aspect_ratio, "2:3");
+        assert_eq!(gpt.image_size, "1K");
+        assert_eq!(gpt.provider_image_size, "1K");
+
+        let gpt_landscape_2k =
+            normalize_editor_generation_options(Some("gpt-image-2"), Some("16:9"), Some("2K"));
+        assert_eq!(gpt_landscape_2k.model, GPT_IMAGE_2_MODEL);
+        assert_eq!(gpt_landscape_2k.size, "2048x1152");
+        assert_eq!(gpt_landscape_2k.aspect_ratio, "16:9");
+        assert_eq!(gpt_landscape_2k.image_size, "2K");
+
+        let gpt_portrait_2k_fallback =
+            normalize_editor_generation_options(Some("gpt-image-2"), Some("9:16"), Some("2K"));
+        assert_eq!(gpt_portrait_2k_fallback.model, GPT_IMAGE_2_MODEL);
+        assert_eq!(gpt_portrait_2k_fallback.size, "1024x1536");
+        assert_eq!(gpt_portrait_2k_fallback.aspect_ratio, "9:16");
+        assert_eq!(gpt_portrait_2k_fallback.image_size, "2K");
+
+        let fallback = normalize_editor_generation_options(
+            Some("unknown-model"),
+            Some("bad-ratio"),
+            Some("bad-size"),
+        );
+        assert_eq!(fallback.model, EDITOR_IMAGE_MODEL_NANOBANANA2);
+        assert_eq!(fallback.size, "1024");
+        assert_eq!(fallback.aspect_ratio, "1:1");
+        assert_eq!(fallback.image_size, "1K");
+        assert_eq!(fallback.provider_image_size, "1K");
+    }
+
+    #[test]
+    fn editor_ui_design_prompt_uses_fixed_user_input_block_and_optional_icon_spec() {
+        let prompt = build_editor_ui_design_prompt("二消玩法，主界面和结算弹窗", true);
+
+        assert!(prompt.contains("生成玩法UI原型图"));
+        assert!(prompt.contains("【用户输入】二消玩法，主界面和结算弹窗"));
+        assert!(prompt.contains("参考图1为图标素材规范"));
+
+        let no_reference_prompt = build_editor_ui_design_prompt("只要战斗HUD", false);
+        assert!(!no_reference_prompt.contains("参考图1为图标素材规范"));
+    }
+
     #[test]
     fn editor_character_image_prompt_appends_user_role_setting() {
         let prompt = build_editor_character_image_prompt("菜市场卖菜大妈");
@@ -1631,8 +1866,6 @@ mod tests {
         assert!(prompt.contains("参考图1的图标素材规范"));
         assert!(prompt.contains("纯绿幕背景方便扣除背景"));
         assert!(prompt.contains("返回按钮、设置按钮、下一关按钮"));
-        assert_eq!(editor_icon_spritesheet_size_for_count(25), "512x512");
-        assert_eq!(editor_icon_spritesheet_size_for_count(26), "1024x1024");
     }
 
     #[test]
diff --git a/server-rs/crates/api-server/src/main.rs b/server-rs/crates/api-server/src/main.rs
index ec6d4451..7f51e5a6 100644
--- a/server-rs/crates/api-server/src/main.rs
+++ b/server-rs/crates/api-server/src/main.rs
@@ -36,6 +36,7 @@ mod custom_world_asset_prompts;
 mod custom_world_foundation_draft;
 mod custom_world_result_prompts;
 mod custom_world_rpg_draft_prompts;
+mod editor_generation_config;
 mod editor_project;
 mod edutainment_baby_drawing;
 mod edutainment_baby_object;
diff --git a/server-rs/crates/api-server/src/modules/play_flow.rs b/server-rs/crates/api-server/src/modules/play_flow.rs
index bc800e29..f8060975 100644
--- a/server-rs/crates/api-server/src/modules/play_flow.rs
+++ b/server-rs/crates/api-server/src/modules/play_flow.rs
@@ -16,7 +16,7 @@ use crate::{
     assets::get_asset_history,
     auth::require_bearer_auth,
     character_animation_assets::{
-        generate_character_animation, generate_editor_character_animation,
+        generate_character_animation, generate_editor_character_animation, generate_editor_video,
         get_character_animation_job, get_character_workflow_cache, import_character_animation_video,
         list_character_animation_templates,
         publish_character_animation, put_role_asset_workflow, resolve_role_asset_workflow,
@@ -461,6 +461,13 @@ fn play_flow_support_router(state: AppState) -> Router<AppState> {
                 EDITOR_CHARACTER_ANIMATION_BODY_LIMIT_BYTES,
             )),
         )
+        .route(
+            "/api/editor/videos/generations",
+            post(generate_editor_video).route_layer(middleware::from_fn_with_state(
+                state.clone(),
+                require_bearer_auth,
+            )),
+        )
         .route(
             "/api/assets/character-animation/jobs/{task_id}",
             get(get_character_animation_job),
diff --git a/server-rs/crates/api-server/src/openai_image_generation.rs b/server-rs/crates/api-server/src/openai_image_generation.rs
index 987896fb..3742350c 100644
--- a/server-rs/crates/api-server/src/openai_image_generation.rs
+++ b/server-rs/crates/api-server/src/openai_image_generation.rs
@@ -3,7 +3,9 @@ use platform_image::{
     DownloadedImage, GeneratedImages, PlatformImageError, PlatformImageStatusHint, ReferenceImage,
     VECTOR_ENGINE_PROVIDER, VectorEngineImageSettings, build_vector_engine_image_http_client,
     create_vector_engine_image_edit, create_vector_engine_image_edit_with_references,
-    create_vector_engine_image_edit_with_references_and_model, create_vector_engine_image_generation,
+    create_vector_engine_image_edit_with_references_and_model,
+    create_vector_engine_image_generation, create_vector_engine_image_generation_with_model,
+    create_vector_engine_nanobanana_generate_content,
 };
 #[cfg(test)]
 use platform_image::{
@@ -159,6 +161,94 @@ pub(crate) async fn create_openai_image_generation(
     .await
 }
 
+#[allow(clippy::too_many_arguments)]
+pub(crate) async fn create_openai_image_generation_with_model(
+    http_client: &reqwest::Client,
+    settings: &OpenAiImageSettings,
+    model: &str,
+    prompt: &str,
+    negative_prompt: Option<&str>,
+    size: &str,
+    candidate_count: u32,
+    reference_images: &[String],
+    failure_context: &str,
+) -> Result<OpenAiGeneratedImages, AppError> {
+    let started_at_micros = current_utc_micros();
+    let request_payload = json!({
+        "model": model,
+        "size": size,
+        "candidateCount": candidate_count,
+        "promptChars": prompt.chars().count(),
+        "negativePromptChars": negative_prompt.map(str::chars).map(Iterator::count),
+        "referenceImageCount": reference_images.len(),
+    });
+    let result = create_vector_engine_image_generation_with_model(
+        http_client,
+        &settings.provider_settings(),
+        model,
+        prompt,
+        negative_prompt,
+        size,
+        candidate_count,
+        reference_images,
+        failure_context,
+    )
+    .await;
+    map_platform_image_result(
+        settings,
+        result,
+        "image_generation",
+        failure_context,
+        request_payload,
+        started_at_micros,
+    )
+    .await
+}
+
+#[allow(clippy::too_many_arguments)]
+pub(crate) async fn create_openai_nanobanana_generate_content(
+    http_client: &reqwest::Client,
+    settings: &OpenAiImageSettings,
+    model: &str,
+    prompt: &str,
+    negative_prompt: Option<&str>,
+    aspect_ratio: &str,
+    image_size: &str,
+    reference_images: &[OpenAiReferenceImage],
+    failure_context: &str,
+) -> Result<OpenAiGeneratedImages, AppError> {
+    let started_at_micros = current_utc_micros();
+    let request_payload = json!({
+        "model": model,
+        "aspectRatio": aspect_ratio,
+        "imageSize": image_size,
+        "promptChars": prompt.chars().count(),
+        "negativePromptChars": negative_prompt.map(str::chars).map(Iterator::count),
+        "referenceImageCount": reference_images.len(),
+    });
+    let result = create_vector_engine_nanobanana_generate_content(
+        http_client,
+        &settings.provider_settings(),
+        model,
+        prompt,
+        negative_prompt,
+        aspect_ratio,
+        image_size,
+        reference_images,
+        failure_context,
+    )
+    .await;
+    map_platform_image_result(
+        settings,
+        result,
+        "nanobanana_generate_content",
+        failure_context,
+        request_payload,
+        started_at_micros,
+    )
+    .await
+}
+
 pub(crate) async fn create_openai_image_edit(
     http_client: &reqwest::Client,
     settings: &OpenAiImageSettings,
diff --git a/server-rs/crates/platform-image/src/lib.rs b/server-rs/crates/platform-image/src/lib.rs
index 267a0849..4e7aaa89 100644
--- a/server-rs/crates/platform-image/src/lib.rs
+++ b/server-rs/crates/platform-image/src/lib.rs
@@ -7,8 +7,11 @@ pub use vector_engine::{
     PlatformImageFailureAudit, PlatformImageStatusHint, ReferenceImage,
     VECTOR_ENGINE_GPT_IMAGE_2_MODEL, VECTOR_ENGINE_PROVIDER, VectorEngineImageSettings,
     build_vector_engine_image_http_client, build_vector_engine_image_request_body,
-    create_vector_engine_image_edit, create_vector_engine_image_edit_with_references,
+    build_vector_engine_nanobanana_generate_content_request_body, create_vector_engine_image_edit,
+    create_vector_engine_image_edit_with_references,
     create_vector_engine_image_edit_with_references_and_model,
     create_vector_engine_image_generation, create_vector_engine_image_generation_with_model,
-    download_remote_image, vector_engine_images_edit_url, vector_engine_images_generation_url,
+    create_vector_engine_nanobanana_generate_content, download_remote_image,
+    vector_engine_images_edit_url, vector_engine_images_generation_url,
+    vector_engine_nanobanana_generate_content_url,
 };
diff --git a/server-rs/crates/platform-image/src/vector_engine/client.rs b/server-rs/crates/platform-image/src/vector_engine/client.rs
index e65d08ee..e5024124 100644
--- a/server-rs/crates/platform-image/src/vector_engine/client.rs
+++ b/server-rs/crates/platform-image/src/vector_engine/client.rs
@@ -14,9 +14,10 @@ use super::{
     image_source::resolve_reference_images,
     request::{
         build_vector_engine_image_edit_request_log_params,
-        build_vector_engine_image_request_body_with_model, normalize_image_size,
+        build_vector_engine_image_request_body_with_model,
+        build_vector_engine_nanobanana_generate_content_request_body, normalize_image_size,
         normalize_vector_engine_image_model, vector_engine_images_edit_url,
-        vector_engine_images_generation_url,
+        vector_engine_images_generation_url, vector_engine_nanobanana_generate_content_url,
     },
     response::handle_vector_engine_response,
     types::{GeneratedImages, ReferenceImage, VectorEngineImageSettings},
@@ -181,6 +182,144 @@ pub async fn create_vector_engine_image_generation_with_model(
     .await
 }
 
+#[allow(clippy::too_many_arguments)]
+pub async fn create_vector_engine_nanobanana_generate_content(
+    http_client: &reqwest::Client,
+    settings: &VectorEngineImageSettings,
+    model: &str,
+    prompt: &str,
+    negative_prompt: Option<&str>,
+    aspect_ratio: &str,
+    image_size: &str,
+    reference_images: &[ReferenceImage],
+    failure_context: &str,
+) -> Result<GeneratedImages, PlatformImageError> {
+    let model = normalize_vector_engine_image_model(model);
+    let request_url = vector_engine_nanobanana_generate_content_url(settings, model);
+    let request_body = build_vector_engine_nanobanana_generate_content_request_body(
+        prompt,
+        negative_prompt,
+        aspect_ratio,
+        image_size,
+        reference_images,
+    );
+    let reference_image_count = reference_images.iter().take(14).count();
+    let reference_image_bytes_total: usize = reference_images
+        .iter()
+        .take(14)
+        .map(|image| image.bytes.len())
+        .sum();
+    let request_params = serde_json::json!({
+        "model": model,
+        "promptChars": prompt.trim().chars().count(),
+        "negativePromptChars": negative_prompt
+            .map(str::trim)
+            .filter(|value| !value.is_empty())
+            .map(str::chars)
+            .map(Iterator::count)
+            .unwrap_or_default(),
+        "aspectRatio": aspect_ratio,
+        "imageSize": image_size,
+        "referenceImageCount": reference_image_count,
+        "referenceImageBytesTotal": reference_image_bytes_total,
+    });
+    let started_at = std::time::Instant::now();
+    let mut attempt = 1;
+    let response = loop {
+        match send_vector_engine_json_request_with_curl(
+            request_url.as_str(),
+            settings.api_key.as_str(),
+            &request_body,
+            settings.request_timeout_ms,
+        )
+        .await
+        {
+            Ok(response) => {
+                if should_retry_vector_engine_upstream_status(response.status, attempt) {
+                    retry_vector_engine_upstream_status_after_delay(
+                        "nanobanana_generate_content",
+                        request_url.as_str(),
+                        attempt,
+                        response.status,
+                        response.body.as_str(),
+                        started_at.elapsed().as_millis() as u64,
+                        Some(prompt.chars().count()),
+                        Some(reference_image_count),
+                        Some(&request_params),
+                    )
+                    .await;
+                    attempt += 1;
+                    continue;
+                }
+                break response;
+            }
+            Err(error) => {
+                if should_retry_vector_engine_curl_send_error(&error, attempt) {
+                    retry_vector_engine_send_after_delay(
+                        "nanobanana_generate_content",
+                        request_url.as_str(),
+                        "request_send",
+                        attempt,
+                        error.is_timeout(),
+                        error.is_connect() || error.is_transient_transport(),
+                        true,
+                        false,
+                        error.to_string().as_str(),
+                        started_at.elapsed().as_millis() as u64,
+                        Some(prompt.chars().count()),
+                        Some(reference_image_count),
+                        Some(&request_params),
+                    )
+                    .await;
+                    attempt += 1;
+                    continue;
+                }
+                return Err(map_curl_error(
+                    format!("{failure_context}：创建 nanobanana2 图片生成任务失败").as_str(),
+                    request_url.as_str(),
+                    "request_send",
+                    error,
+                    started_at.elapsed().as_millis() as u64,
+                    Some(prompt.chars().count()),
+                    Some(reference_image_count),
+                    Some(&request_params),
+                ));
+            }
+        }
+    };
+    let response_status = response.status;
+    tracing::info!(
+        provider = VECTOR_ENGINE_PROVIDER,
+        endpoint = %request_url,
+        status = response_status,
+        image_model = model,
+        prompt_chars = prompt.chars().count(),
+        aspect_ratio,
+        image_size,
+        reference_image_count,
+        reference_image_bytes_total,
+        request_params = %request_params,
+        attempt,
+        elapsed_ms = started_at.elapsed().as_millis() as u64,
+        failure_context,
+        "VectorEngine nanobanana2 图片生成 HTTP 返回"
+    );
+    let response_text = response.body;
+    handle_vector_engine_response(
+        http_client,
+        request_url.as_str(),
+        response_status,
+        response_text.as_str(),
+        failure_context,
+        started_at.elapsed().as_millis() as u64,
+        Some(prompt.chars().count()),
+        Some(reference_image_count),
+        1,
+        "vector-engine-nanobanana",
+    )
+    .await
+}
+
 pub async fn create_vector_engine_image_edit(
     http_client: &reqwest::Client,
     settings: &VectorEngineImageSettings,
diff --git a/server-rs/crates/platform-image/src/vector_engine/mod.rs b/server-rs/crates/platform-image/src/vector_engine/mod.rs
index 698be30b..f8d953e8 100644
--- a/server-rs/crates/platform-image/src/vector_engine/mod.rs
+++ b/server-rs/crates/platform-image/src/vector_engine/mod.rs
@@ -16,13 +16,16 @@ pub use client::{
     create_vector_engine_image_edit, create_vector_engine_image_edit_with_references,
     create_vector_engine_image_edit_with_references_and_model,
     create_vector_engine_image_generation, create_vector_engine_image_generation_with_model,
+    create_vector_engine_nanobanana_generate_content,
 };
 pub use constants::{GPT_IMAGE_2_MODEL, VECTOR_ENGINE_GPT_IMAGE_2_MODEL, VECTOR_ENGINE_PROVIDER};
 pub use error::{PlatformImageError, PlatformImageStatusHint};
 pub use image_source::download_remote_image;
 pub use request::{
     build_vector_engine_image_request_body, build_vector_engine_image_request_body_with_model,
-    normalize_image_size, vector_engine_images_edit_url, vector_engine_images_generation_url,
+    build_vector_engine_nanobanana_generate_content_request_body, normalize_image_size,
+    vector_engine_images_edit_url, vector_engine_images_generation_url,
+    vector_engine_nanobanana_generate_content_url,
 };
 pub use transport::build_vector_engine_image_http_client;
 pub use types::{DownloadedImage, GeneratedImages, ReferenceImage, VectorEngineImageSettings};
diff --git a/server-rs/crates/platform-image/src/vector_engine/payload.rs b/server-rs/crates/platform-image/src/vector_engine/payload.rs
index f7b4a8e6..9f5130a6 100644
--- a/server-rs/crates/platform-image/src/vector_engine/payload.rs
+++ b/server-rs/crates/platform-image/src/vector_engine/payload.rs
@@ -88,9 +88,48 @@ pub(super) fn extract_image_urls(payload: &Value) -> Vec<String> {
 pub(super) fn extract_b64_images(payload: &Value) -> Vec<String> {
     let mut values = Vec::new();
     collect_strings_by_key(payload, "b64_json", &mut values);
+    collect_inline_image_data(payload, &mut values);
     values
 }
 
+fn collect_inline_image_data(value: &Value, results: &mut Vec<String>) {
+    match value {
+        Value::Array(entries) => {
+            for entry in entries {
+                collect_inline_image_data(entry, results);
+            }
+        }
+        Value::Object(object) => {
+            for key in ["inlineData", "inline_data"] {
+                if let Some(Value::Object(inline_data)) = object.get(key) {
+                    let mime_type = inline_data
+                        .get("mimeType")
+                        .or_else(|| inline_data.get("mime_type"))
+                        .and_then(Value::as_str)
+                        .map(str::trim)
+                        .unwrap_or("image/png")
+                        .to_ascii_lowercase();
+                    if !mime_type.is_empty() && !mime_type.starts_with("image/") {
+                        continue;
+                    }
+                    if let Some(data) = inline_data
+                        .get("data")
+                        .and_then(Value::as_str)
+                        .map(str::trim)
+                        .filter(|value| !value.is_empty())
+                    {
+                        results.push(data.to_string());
+                    }
+                }
+            }
+            for nested_value in object.values() {
+                collect_inline_image_data(nested_value, results);
+            }
+        }
+        _ => {}
+    }
+}
+
 pub(super) fn parse_api_error_message(raw_text: &str, fallback_message: &str) -> String {
     if raw_text.trim().is_empty() {
         return fallback_message.to_string();
diff --git a/server-rs/crates/platform-image/src/vector_engine/request.rs b/server-rs/crates/platform-image/src/vector_engine/request.rs
index 26219012..930dc159 100644
--- a/server-rs/crates/platform-image/src/vector_engine/request.rs
+++ b/server-rs/crates/platform-image/src/vector_engine/request.rs
@@ -32,10 +32,7 @@ pub fn build_vector_engine_image_request_body_with_model(
 ) -> Value {
     let model = normalize_vector_engine_image_model(model);
     let body = Map::from_iter([
-        (
-            "model".to_string(),
-            Value::String(model.to_string()),
-        ),
+        ("model".to_string(), Value::String(model.to_string())),
         (
             "prompt".to_string(),
             Value::String(build_prompt_with_negative(prompt, negative_prompt)),
@@ -50,6 +47,42 @@ pub fn build_vector_engine_image_request_body_with_model(
     Value::Object(body)
 }
 
+pub fn build_vector_engine_nanobanana_generate_content_request_body(
+    prompt: &str,
+    negative_prompt: Option<&str>,
+    aspect_ratio: &str,
+    image_size: &str,
+    reference_images: &[ReferenceImage],
+) -> Value {
+    let prompt = build_prompt_with_negative(prompt, negative_prompt);
+    let mut parts = vec![json!({ "text": prompt })];
+    for reference_image in reference_images.iter().take(14) {
+        parts.push(json!({
+            "inline_data": {
+                "mime_type": reference_image.mime_type,
+                "data": base64::Engine::encode(
+                    &base64::engine::general_purpose::STANDARD,
+                    reference_image.bytes.as_slice()
+                ),
+            },
+        }));
+    }
+
+    json!({
+        "contents": [{
+            "role": "user",
+            "parts": parts,
+        }],
+        "generationConfig": {
+            "responseModalities": ["IMAGE"],
+            "imageConfig": {
+                "aspectRatio": normalize_nanobanana_aspect_ratio(aspect_ratio),
+                "imageSize": normalize_nanobanana_image_size(image_size),
+            },
+        },
+    })
+}
+
 pub fn normalize_vector_engine_image_model(model: &str) -> &str {
     match model.trim() {
         "" => GPT_IMAGE_2_MODEL,
@@ -71,6 +104,31 @@ pub fn normalize_image_size(size: &str) -> String {
     .to_string()
 }
 
+fn normalize_nanobanana_aspect_ratio(aspect_ratio: &str) -> &str {
+    match aspect_ratio.trim() {
+        "2:3" => "2:3",
+        "3:2" => "3:2",
+        "3:4" => "3:4",
+        "4:3" => "4:3",
+        "4:5" => "4:5",
+        "5:4" => "5:4",
+        "9:16" => "9:16",
+        "16:9" => "16:9",
+        "21:9" => "21:9",
+        _ => "1:1",
+    }
+}
+
+fn normalize_nanobanana_image_size(image_size: &str) -> &str {
+    match image_size.trim() {
+        // 中文注释：nanobanana / Gemini 3.1 的 0.5K 在 VectorEngine 文档中要求传 512。
+        "512" | "0.5K" => "512",
+        "2K" => "2K",
+        "4K" => "4K",
+        _ => "1K",
+    }
+}
+
 pub fn vector_engine_images_generation_url(settings: &VectorEngineImageSettings) -> String {
     if settings.base_url.ends_with("/v1") {
         format!("{}/images/generations", settings.base_url)
@@ -87,6 +145,21 @@ pub fn vector_engine_images_edit_url(settings: &VectorEngineImageSettings) -> St
     }
 }
 
+pub fn vector_engine_nanobanana_generate_content_url(
+    settings: &VectorEngineImageSettings,
+    model: &str,
+) -> String {
+    let base_url = settings
+        .base_url
+        .trim_end_matches("/v1")
+        .trim_end_matches('/');
+    format!(
+        "{}/v1beta/models/{}:generateContent",
+        base_url,
+        normalize_vector_engine_image_model(model)
+    )
+}
+
 pub(crate) fn build_vector_engine_image_edit_request_log_params(
     model: &str,
     prompt: &str,
diff --git a/server-rs/crates/platform-image/src/vector_engine/tests.rs b/server-rs/crates/platform-image/src/vector_engine/tests.rs
index 1f1d6691..dc9a37ea 100644
--- a/server-rs/crates/platform-image/src/vector_engine/tests.rs
+++ b/server-rs/crates/platform-image/src/vector_engine/tests.rs
@@ -66,8 +66,10 @@ mod tests {
         assert_eq!(reference.mime_type, "image/png");
         assert_eq!(reference.bytes, b"\x89PNG\r\n\x1A\nrest");
 
-        let image = decode_generated_image_base64(BASE64_STANDARD.encode(b"\x89PNG\r\n\x1A\nrest").as_str())
-            .expect("base64 image should decode");
+        let image = decode_generated_image_base64(
+            BASE64_STANDARD.encode(b"\x89PNG\r\n\x1A\nrest").as_str(),
+        )
+        .expect("base64 image should decode");
         assert_eq!(image.extension, "png");
         assert_eq!(image.mime_type, "image/png");
         assert_eq!(image.bytes, b"\x89PNG\r\n\x1A\nrest");
@@ -121,10 +123,22 @@ mod tests {
             audit: Some(audit.clone()),
         };
 
-        assert_eq!(invalid_config.status_hint(), PlatformImageStatusHint::ServiceUnavailable);
-        assert_eq!(invalid_request.status_hint(), PlatformImageStatusHint::BadRequest);
-        assert_eq!(request_error.status_hint(), PlatformImageStatusHint::GatewayTimeout);
-        assert_eq!(upstream_timeout.status_hint(), PlatformImageStatusHint::GatewayTimeout);
+        assert_eq!(
+            invalid_config.status_hint(),
+            PlatformImageStatusHint::ServiceUnavailable
+        );
+        assert_eq!(
+            invalid_request.status_hint(),
+            PlatformImageStatusHint::BadRequest
+        );
+        assert_eq!(
+            request_error.status_hint(),
+            PlatformImageStatusHint::GatewayTimeout
+        );
+        assert_eq!(
+            upstream_timeout.status_hint(),
+            PlatformImageStatusHint::GatewayTimeout
+        );
         assert_eq!(
             PlatformImageError::MissingImage {
                 provider: VECTOR_ENGINE_PROVIDER,
@@ -137,7 +151,10 @@ mod tests {
 
         let audit_ref = upstream_timeout.audit().expect("audit should be preserved");
         assert_eq!(audit_ref.provider, VECTOR_ENGINE_PROVIDER);
-        assert_eq!(audit_ref.endpoint, "https://vector.example/v1/images/generations");
+        assert_eq!(
+            audit_ref.endpoint,
+            "https://vector.example/v1/images/generations"
+        );
         assert_eq!(audit_ref.status_code, Some(504));
         assert_eq!(audit_ref.status_class, Some("5xx"));
         assert!(audit_ref.timeout);
@@ -158,7 +175,27 @@ mod tests {
                 {"url": "https://example.com/b.png"}
             ],
             "nested": {
-                "b64_json": ["YWJj", "ZGVm"]
+                "b64_json": ["YWJj", "ZGVm"],
+                "parts": [
+                    {
+                        "inlineData": {
+                            "mimeType": "image/png",
+                            "data": "aW1hZ2UtMQ=="
+                        }
+                    },
+                    {
+                        "inline_data": {
+                            "mime_type": "image/jpeg",
+                            "data": "aW1hZ2UtMg=="
+                        }
+                    },
+                    {
+                        "inlineData": {
+                            "mimeType": "text/plain",
+                            "data": "bm90LWltYWdl"
+                        }
+                    }
+                ]
             }
         });
 
@@ -171,7 +208,12 @@ mod tests {
         );
         assert_eq!(
             extract_b64_images(&payload),
-            vec!["YWJj".to_string(), "ZGVm".to_string()]
+            vec![
+                "YWJj".to_string(),
+                "ZGVm".to_string(),
+                "aW1hZ2UtMQ==".to_string(),
+                "aW1hZ2UtMg==".to_string(),
+            ]
         );
     }
 }
diff --git a/server-rs/crates/platform-image/tests/vector_engine.rs b/server-rs/crates/platform-image/tests/vector_engine.rs
index 208a3b9b..ec757c68 100644
--- a/server-rs/crates/platform-image/tests/vector_engine.rs
+++ b/server-rs/crates/platform-image/tests/vector_engine.rs
@@ -1,9 +1,11 @@
 use platform_image::vector_engine::{
     GPT_IMAGE_2_MODEL, ReferenceImage, VECTOR_ENGINE_PROVIDER, VectorEngineImageSettings,
     build_vector_engine_image_http_client, build_vector_engine_image_request_body,
-    build_vector_engine_image_request_body_with_model, create_vector_engine_image_edit,
-    create_vector_engine_image_generation,
+    build_vector_engine_image_request_body_with_model,
+    build_vector_engine_nanobanana_generate_content_request_body, create_vector_engine_image_edit,
+    create_vector_engine_image_generation, create_vector_engine_nanobanana_generate_content,
     vector_engine_images_edit_url, vector_engine_images_generation_url,
+    vector_engine_nanobanana_generate_content_url,
 };
 use std::{
     sync::{
@@ -69,6 +71,60 @@ fn vector_engine_request_body_can_use_nanobanana2_model() {
     assert_eq!(body["n"], 1);
 }
 
+#[test]
+fn vector_engine_request_body_can_use_nanobanana2_half_k() {
+    let body = build_vector_engine_image_request_body_with_model(
+        "gemini-3.1-flash-image-preview",
+        "生成图标 spritesheet",
+        None,
+        "512",
+        1,
+        &[],
+    );
+
+    assert_eq!(body["model"], "gemini-3.1-flash-image-preview");
+    assert_eq!(body["size"], "512");
+}
+
+#[test]
+fn nanobanana_generate_content_body_carries_aspect_ratio_and_image_size() {
+    let body = build_vector_engine_nanobanana_generate_content_request_body(
+        "生成角色图",
+        Some("文字、水印"),
+        "2:3",
+        "512",
+        &[],
+    );
+
+    assert_eq!(body["contents"][0]["role"], "user");
+    assert_eq!(
+        body["contents"][0]["parts"][0]["text"],
+        "生成角色图\n避免：文字、水印"
+    );
+    assert_eq!(body["generationConfig"]["responseModalities"][0], "IMAGE");
+    assert_eq!(
+        body["generationConfig"]["imageConfig"]["aspectRatio"],
+        "2:3"
+    );
+    assert_eq!(body["generationConfig"]["imageConfig"]["imageSize"], "512");
+    assert!(body.get("model").is_none());
+    assert!(body.get("n").is_none());
+}
+
+#[test]
+fn nanobanana_generate_content_url_uses_model_path() {
+    let settings = VectorEngineImageSettings {
+        base_url: "https://vector.example/v1".to_string(),
+        api_key: "test-key".to_string(),
+        request_timeout_ms: 1_000,
+    };
+
+    assert_eq!(
+        vector_engine_nanobanana_generate_content_url(&settings, "gemini-3.1-flash-image-preview"),
+        "https://vector.example/v1beta/models/gemini-3.1-flash-image-preview:generateContent"
+    );
+}
+
 #[tokio::test]
 async fn vector_engine_image_edit_retries_send_timeout_once_and_succeeds() {
     let listener = TcpListener::bind("127.0.0.1:0")
@@ -136,6 +192,73 @@ async fn vector_engine_image_edit_retries_send_timeout_once_and_succeeds() {
     server.abort();
 }
 
+#[tokio::test]
+async fn nanobanana_generate_content_posts_native_body_and_reads_inline_data() {
+    let listener = TcpListener::bind("127.0.0.1:0")
+        .await
+        .expect("mock server should bind");
+    let server_addr = listener
+        .local_addr()
+        .expect("mock server address should be readable");
+    let server = tokio::spawn(async move {
+        let Ok((mut stream, _)) = listener.accept().await else {
+            return;
+        };
+        let mut request = Vec::new();
+        let mut buffer = [0_u8; 4096];
+        loop {
+            let Ok(read) = stream.read(&mut buffer).await else {
+                return;
+            };
+            if read == 0 {
+                return;
+            }
+            request.extend_from_slice(&buffer[..read]);
+            if request.windows(4).any(|window| window == b"\r\n\r\n") {
+                break;
+            }
+        }
+        let request_text = String::from_utf8_lossy(request.as_slice());
+        assert!(
+            request_text.contains("/v1beta/models/gemini-3.1-flash-image-preview:generateContent")
+        );
+        assert!(request_text.contains("\"aspectRatio\":\"2:3\""));
+        assert!(request_text.contains("\"imageSize\":\"512\""));
+
+        let body = r#"{"candidates":[{"content":{"parts":[{"inlineData":{"mimeType":"image/png","data":"iVBORw0KGgpyZXN0"}}]}}]}"#;
+        let response = format!(
+            "HTTP/1.1 200 OK\r\nContent-Type: application/json\r\nContent-Length: {}\r\n\r\n{}",
+            body.len(),
+            body
+        );
+        let _ = stream.write_all(response.as_bytes()).await;
+    });
+    let settings = VectorEngineImageSettings {
+        base_url: format!("http://{}", server_addr),
+        api_key: "test-key".to_string(),
+        request_timeout_ms: 1_000,
+    };
+    let client = build_vector_engine_image_http_client(&settings).expect("client should build");
+
+    let generated = create_vector_engine_nanobanana_generate_content(
+        &client,
+        &settings,
+        "gemini-3.1-flash-image-preview",
+        "生成角色图",
+        Some("文字、水印"),
+        "2:3",
+        "512",
+        &[],
+        "测试 nanobanana",
+    )
+    .await
+    .expect("nanobanana response should parse");
+
+    assert_eq!(generated.images.len(), 1);
+    assert_eq!(generated.images[0].mime_type, "image/png");
+    server.abort();
+}
+
 #[tokio::test]
 async fn vector_engine_image_generation_retries_upstream_502_once_and_succeeds() {
     let listener = TcpListener::bind("127.0.0.1:0")
diff --git a/server-rs/crates/shared-contracts/src/assets.rs b/server-rs/crates/shared-contracts/src/assets.rs
index b414eb1d..a07cc8f8 100644
--- a/server-rs/crates/shared-contracts/src/assets.rs
+++ b/server-rs/crates/shared-contracts/src/assets.rs
@@ -346,6 +346,38 @@ pub struct EditorCharacterAnimationGenerateResponse {
     pub price_mud_points: u32,
 }
 
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorVideoGenerateRequest {
+    pub prompt: String,
+    pub model: String,
+    pub aspect_ratio: String,
+    pub duration_seconds: u32,
+    pub resolution: String,
+    pub mode: String,
+    pub sound: String,
+    pub price_mud_points: u32,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorVideoGenerateResponse {
+    pub ok: bool,
+    pub video_src: String,
+    pub width: u32,
+    pub height: u32,
+    pub source_type: String,
+    pub prompt: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub actual_prompt: Option<String>,
+    pub model: String,
+    pub provider: String,
+    pub task_id: String,
+    pub duration_seconds: u32,
+    pub resolution: String,
+    pub price_mud_points: u32,
+}
+
 #[derive(Clone, Debug, Serialize, Deserialize, PartialEq)]
 #[serde(rename_all = "camelCase")]
 pub struct CharacterAnimationDraftPayload {
@@ -908,6 +940,53 @@ mod tests {
         assert_eq!(payload["fps"], json!(8));
     }
 
+    #[test]
+    fn editor_video_request_supports_lovart_model_contract() {
+        let payload = serde_json::to_value(EditorVideoGenerateRequest {
+            prompt: "让角色向镜头挥手".to_string(),
+            model: "kling3.0-omni".to_string(),
+            aspect_ratio: "16:9".to_string(),
+            duration_seconds: 5,
+            resolution: "480p".to_string(),
+            mode: "std".to_string(),
+            sound: "off".to_string(),
+            price_mud_points: 50,
+        })
+        .expect("request should serialize");
+
+        assert_eq!(payload["aspectRatio"], json!("16:9"));
+        assert_eq!(payload["durationSeconds"], json!(5));
+        assert_eq!(payload["priceMudPoints"], json!(50));
+        assert_eq!(payload["model"], json!("kling3.0-omni"));
+    }
+
+    #[test]
+    fn editor_video_response_uses_canvas_video_shape() {
+        let payload = serde_json::to_value(EditorVideoGenerateResponse {
+            ok: true,
+            video_src: "/generated-editor-videos/task-1/preview.mp4".to_string(),
+            width: 1280,
+            height: 720,
+            source_type: "generated".to_string(),
+            prompt: "让角色向镜头挥手".to_string(),
+            actual_prompt: Some("让角色向镜头挥手".to_string()),
+            model: "kling3.0-omni".to_string(),
+            provider: "VectorEngine".to_string(),
+            task_id: "task-1".to_string(),
+            duration_seconds: 5,
+            resolution: "480p".to_string(),
+            price_mud_points: 50,
+        })
+        .expect("response should serialize");
+
+        assert_eq!(
+            payload["videoSrc"],
+            json!("/generated-editor-videos/task-1/preview.mp4")
+        );
+        assert_eq!(payload["sourceType"], json!("generated"));
+        assert_eq!(payload["durationSeconds"], json!(5));
+    }
+
     #[test]
     fn character_workflow_cache_response_keeps_legacy_shape() {
         let payload = serde_json::to_value(CharacterWorkflowCacheSaveResponse {
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index 9e85e6fc..c2dde13b 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -150,6 +150,7 @@ export function serializeLayer(
     originalHeight: layer.originalHeight,
     zIndex: layer.zIndex,
     sourceType: layer.sourceType,
+    mediaType: layer.mediaType,
     prompt: layer.prompt,
     actualPrompt: layer.actualPrompt,
     model: layer.model,
@@ -207,6 +208,7 @@ export function hydrateLayer(
     sourceType: isCanvasSourceType(snapshot.sourceType)
       ? snapshot.sourceType
       : 'uploaded',
+    mediaType: snapshot.mediaType === 'video' ? 'video' : 'image',
     prompt: stringOrNull(snapshot.prompt),
     actualPrompt: stringOrNull(snapshot.actualPrompt),
     model: stringOrNull(snapshot.model),
@@ -406,7 +408,9 @@ export function canvasAssetKindOrNull(value: unknown): CanvasAssetKind | null {
   return value === 'spec' ||
     value === 'character' ||
     value === 'icon' ||
-    value === 'icon-spec'
+    value === 'icon-spec' ||
+    value === 'ui-design' ||
+    value === 'video'
     ? value
     : null;
 }
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index 30bc6820..a0a56d24 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -7,12 +7,21 @@ import type {
 
 export type CanvasSourceType = 'uploaded' | 'generated' | 'mock_generated';
 
-export type CanvasAssetKind = 'spec' | 'character' | 'icon' | 'icon-spec';
+export type CanvasAssetKind =
+  | 'spec'
+  | 'character'
+  | 'icon'
+  | 'icon-spec'
+  | 'ui-design'
+  | 'video';
+
+export type CanvasMediaType = 'image' | 'video';
 
 export type EditorAsset = {
   id: string;
   label: string;
   src: string;
+  mediaType?: CanvasMediaType;
   width: number;
   height: number;
   folderId: string;
@@ -52,6 +61,7 @@ export type CanvasLayer = {
   resourceId: string;
   title: string;
   src: string;
+  mediaType?: CanvasMediaType;
   x: number;
   y: number;
   width: number;
@@ -89,9 +99,11 @@ export type CanvasTool =
   | 'hand'
   | 'upload'
   | 'generate'
+  | 'video'
   | 'spec'
   | 'character'
   | 'icon'
+  | 'ui-design'
   | 'text'
   | 'shape'
   | 'export';
@@ -124,7 +136,14 @@ export type CharacterReferenceImage = {
 
 export type GenerateDialogState = {
   id?: string;
-  mode: 'generate' | 'edit' | 'spec' | 'character' | 'icon';
+  mode:
+    | 'generate'
+    | 'edit'
+    | 'spec'
+    | 'character'
+    | 'icon'
+    | 'ui-design'
+    | 'video';
   prompt: string;
   status: 'idle' | 'generating' | 'failed';
   composerOpen?: boolean;
@@ -133,11 +152,19 @@ export type GenerateDialogState = {
   specType?: SpecGenerationType;
   specValues?: SpecFormValues;
   specReference?: CharacterReferenceImage | null;
+  generationReferences?: CharacterReferenceImage[];
   characterSpecReference?: CharacterReferenceImage | null;
   characterReferences?: CharacterReferenceImage[];
   iconSpecReference?: CharacterReferenceImage | null;
   iconDescriptions?: string[];
+  uiDesignSpecReference?: CharacterReferenceImage | null;
   imageModel?: string;
+  videoModel?: string;
+  videoAspectRatio?: string;
+  videoResolution?: string;
+  videoDurationSeconds?: 4 | 5;
+  videoMode?: 'std';
+  videoSound?: 'off';
   aspectRatio?: string;
   imageSize?: string;
   errorMessage?: string;
@@ -219,10 +246,12 @@ export type CharacterAnimationPanelState = {
 
 export type UploadTarget =
   | 'asset'
+  | 'generation-reference'
   | 'spec-reference'
   | 'character-spec'
   | 'character-reference'
-  | 'icon-spec';
+  | 'icon-spec'
+  | 'ui-design-icon-spec';
 
 export type SnapGuide = {
   vertical?: number;
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
new file mode 100644
index 00000000..23089a2f
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
@@ -0,0 +1,296 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import {
+  createRef,
+  type ComponentProps,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { GenerateDialogState } from './ImageCanvasEditorTypes';
+import { ImageCanvasGenerationComposerView } from './ImageCanvasGenerationComposerView';
+
+function mockStateSetter<T>() {
+  return vi.fn() as unknown as Dispatch<SetStateAction<T>>;
+}
+
+function renderComposer(
+  generateDialog: GenerateDialogState,
+  overrides: Partial<
+    ComponentProps<typeof ImageCanvasGenerationComposerView>
+  > = {},
+) {
+  const props: ComponentProps<typeof ImageCanvasGenerationComposerView> = {
+    specToolWrapRef: createRef(),
+    characterSpecButtonRef: createRef(),
+    characterReferenceButtonRef: createRef(),
+    generationReferenceButtonRef: createRef(),
+    iconSpecButtonRef: createRef(),
+    isSpecMenuOpen: false,
+    isCharacterSpecMenuOpen: false,
+    isCharacterReferenceMenuOpen: false,
+    isGenerationReferenceMenuOpen: false,
+    isIconSpecMenuOpen: false,
+    isUiDesignSpecMenuOpen: false,
+    isPickingCharacterSpecFromCanvas: false,
+    isPickingCharacterReferenceFromCanvas: false,
+    isPickingGenerationReferenceFromCanvas: false,
+    isPickingIconSpecFromCanvas: false,
+    isPickingUiDesignSpecFromCanvas: false,
+    generateDialog,
+    generationComposerStyle: { left: 320, top: 240 },
+    iconComposerStyle: { left: 320, top: 240, width: '32rem' },
+    quickEditPanel: null,
+    quickEditSourceLayer: null,
+    quickEditPanelStyle: null,
+    quickEditSizeOptions: ['1024x1024'],
+    quickEditModelOptions: [{ label: 'gpt-image-2', value: 'gpt-image-2' }],
+    characterAnimationPanel: null,
+    characterAnimationSourceLayer: null,
+    characterAnimationPanelStyle: null,
+    characterAnimationPrice: 40,
+    setGenerateDialog: mockStateSetter<GenerateDialogState | null>(),
+    setQuickEditPanel:
+      mockStateSetter<
+        ComponentProps<
+          typeof ImageCanvasGenerationComposerView
+        >['quickEditPanel']
+      >(),
+    setCharacterAnimationPanel:
+      mockStateSetter<
+        ComponentProps<
+          typeof ImageCanvasGenerationComposerView
+        >['characterAnimationPanel']
+      >(),
+    setIsCharacterSpecMenuOpen: mockStateSetter<boolean>(),
+    setIsCharacterReferenceMenuOpen: mockStateSetter<boolean>(),
+    setIsGenerationReferenceMenuOpen: mockStateSetter<boolean>(),
+    setIsIconSpecMenuOpen: mockStateSetter<boolean>(),
+    setIsUiDesignSpecMenuOpen: mockStateSetter<boolean>(),
+    setIsPickingCharacterSpecFromCanvas: mockStateSetter<boolean>(),
+    setIsPickingCharacterReferenceFromCanvas: mockStateSetter<boolean>(),
+    setIsPickingGenerationReferenceFromCanvas: mockStateSetter<boolean>(),
+    setIsPickingIconSpecFromCanvas: mockStateSetter<boolean>(),
+    setIsPickingUiDesignSpecFromCanvas: mockStateSetter<boolean>(),
+    onOpenSpecDialog: vi.fn(),
+    onRequestUpload: vi.fn(),
+    onSubmitImageGeneration: vi.fn(),
+    onSubmitIconSpritesheetGeneration: vi.fn(),
+    onSubmitQuickEdit: vi.fn(),
+    onSubmitCharacterAnimation: vi.fn(),
+    onCloseGenerateComposer: vi.fn(),
+    onUpdateSpecFormValue: vi.fn(),
+    onUpdateIconDescription: vi.fn(),
+    onAddIconDescription: vi.fn(),
+    onUpdateCharacterAnimationDuration: vi.fn(),
+    onRememberImageModel: vi.fn(),
+    ...overrides,
+  };
+
+  return render(<ImageCanvasGenerationComposerView {...props} />);
+}
+
+describe('ImageCanvasGenerationComposerView', () => {
+  it('让生成UI设计图面板复用普通图片生成面板的纵向结构', () => {
+    renderComposer({
+      mode: 'ui-design',
+      prompt: '',
+      status: 'idle',
+      composerOpen: true,
+      uiDesignSpecReference: null,
+      imageModel: 'gpt-image-2',
+      aspectRatio: '16:9',
+      imageSize: '1K',
+    });
+
+    const panel = screen.getByRole('dialog', { name: '生成UI设计图' });
+    expect(panel.className).toContain(
+      'image-canvas-editor__generation-composer',
+    );
+    expect(panel.className).toContain(
+      'image-canvas-editor__generation-composer--image',
+    );
+    expect(
+      within(panel).getByRole('button', { name: 'UI设计图标素材规范' })
+        .parentElement?.className,
+    ).toContain('image-canvas-editor__generation-ref');
+    expect(
+      within(panel).getByRole('textbox', { name: 'UI设计要求' }).className,
+    ).toContain('image-canvas-editor__generation-prompt');
+    expect(
+      panel.querySelector('.image-canvas-editor__generation-composer-footer'),
+    ).toBeTruthy();
+  });
+
+  it('让生成规范图片面板复用生成类面板 shell 和底部按钮结构', () => {
+    renderComposer({
+      mode: 'spec',
+      prompt: '',
+      status: 'idle',
+      composerOpen: true,
+      specType: 'character',
+      specValues: {
+        playSetting: '战棋类RPG玩法',
+        artStyle: '像素风',
+        bodyRatio: '3',
+        characterView: '右向斜侧身站姿',
+        customPrompt: '',
+      },
+      specReference: null,
+    });
+
+    const panel = screen.getByRole('dialog', { name: '生成规范' });
+    expect(panel.className).toContain(
+      'image-canvas-editor__generation-composer',
+    );
+    expect(panel.className).toContain(
+      'image-canvas-editor__generation-composer--image',
+    );
+    expect(
+      within(panel).getByRole('button', { name: '参考图' }).parentElement
+        ?.className,
+    ).toContain('image-canvas-editor__generation-ref');
+    expect(
+      panel.querySelector('.image-canvas-editor__generation-composer-footer'),
+    ).toBeTruthy();
+    expect(
+      within(panel).getByRole('button', { name: '提交生成规范' }).className,
+    ).toContain('image-canvas-editor__generation-submit');
+  });
+
+  it('让图标素材规范生成面板也保留首行参考区', () => {
+    renderComposer({
+      mode: 'spec',
+      prompt: '',
+      status: 'idle',
+      composerOpen: true,
+      specType: 'icon',
+      specValues: {
+        playSetting: '休闲小游戏',
+        artStyle: '清爽卡通',
+        bodyRatio: '3',
+        characterView: '右向斜侧身站姿',
+        customPrompt: '',
+      },
+      specReference: null,
+    });
+
+    const panel = screen.getByRole('dialog', { name: '生成规范' });
+    expect(
+      within(panel).getByRole('button', { name: '参考图' }).parentElement
+        ?.className,
+    ).toContain('image-canvas-editor__generation-ref');
+  });
+  it('生成图片参考图点击先弹来源菜单，不直接打开上传', () => {
+    const onRequestUpload = vi.fn();
+    const setIsGenerationReferenceMenuOpen = vi.fn();
+
+    renderComposer(
+      {
+        mode: 'generate',
+        prompt: '',
+        status: 'idle',
+        composerOpen: true,
+        generationReferences: [],
+      },
+      {
+        isGenerationReferenceMenuOpen: true,
+        onRequestUpload,
+        setIsGenerationReferenceMenuOpen,
+      },
+    );
+
+    const panel = screen.getByRole('dialog', { name: '生成图片' });
+    fireEvent.click(within(panel).getByRole('button', { name: '添加参考图' }));
+
+    expect(onRequestUpload).not.toHaveBeenCalled();
+    expect(setIsGenerationReferenceMenuOpen).toHaveBeenCalled();
+    const menu = screen.getByRole('menu', { name: '参考图来源' });
+    expect(
+      within(menu).getByRole('menuitem', { name: '从画布中选择' }),
+    ).toBeTruthy();
+    expect(
+      within(menu).getByRole('menuitem', { name: '上传图片' }),
+    ).toBeTruthy();
+  });
+
+  it('生成视频参考图点击先弹来源菜单，不直接打开上传', () => {
+    const onRequestUpload = vi.fn();
+    const setIsGenerationReferenceMenuOpen = vi.fn();
+
+    renderComposer(
+      {
+        mode: 'video',
+        prompt: '',
+        status: 'idle',
+        composerOpen: true,
+        generationReferences: [],
+        videoModel: 'seedance2.0',
+        videoAspectRatio: '16:9',
+        videoDurationSeconds: 4,
+        videoResolution: '480p',
+        videoMode: 'std',
+        videoSound: 'off',
+      },
+      {
+        isGenerationReferenceMenuOpen: true,
+        onRequestUpload,
+        setIsGenerationReferenceMenuOpen,
+      },
+    );
+
+    const panel = screen.getByRole('dialog', { name: '生成视频' });
+    fireEvent.click(
+      within(panel).getByRole('button', { name: '添加视频参考图' }),
+    );
+
+    expect(onRequestUpload).not.toHaveBeenCalled();
+    expect(setIsGenerationReferenceMenuOpen).toHaveBeenCalled();
+    const menu = screen.getByRole('menu', { name: '参考图来源' });
+    expect(
+      within(menu).getByRole('menuitem', { name: '从画布中选择' }),
+    ).toBeTruthy();
+    expect(
+      within(menu).getByRole('menuitem', { name: '上传图片' }),
+    ).toBeTruthy();
+  });
+  it('生成规范参考图点击先弹来源菜单，不直接打开上传', () => {
+    const onRequestUpload = vi.fn();
+    const setIsGenerationReferenceMenuOpen = vi.fn();
+
+    renderComposer(
+      {
+        mode: 'spec',
+        prompt: '',
+        status: 'idle',
+        composerOpen: true,
+        specType: 'character',
+        specValues: {
+          playSetting: '战棋类RPG玩法',
+          artStyle: '像素风',
+          bodyRatio: '3',
+          characterView: '右向斜侧身站姿',
+          customPrompt: '',
+        },
+        specReference: null,
+      },
+      {
+        isGenerationReferenceMenuOpen: true,
+        onRequestUpload,
+        setIsGenerationReferenceMenuOpen,
+      },
+    );
+
+    const panel = screen.getByRole('dialog', { name: '生成规范' });
+    fireEvent.click(within(panel).getByRole('button', { name: '参考图' }));
+
+    expect(onRequestUpload).not.toHaveBeenCalled();
+    expect(setIsGenerationReferenceMenuOpen).toHaveBeenCalled();
+    const menu = screen.getByRole('menu', { name: '参考图来源' });
+    expect(within(menu).getByRole('menuitem', { name: '从画布中选择' })).toBeTruthy();
+    expect(within(menu).getByRole('menuitem', { name: '上传图片' })).toBeTruthy();
+  });
+});
+
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
index 6ad7874a..af77efbc 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
@@ -2,6 +2,7 @@ import type {
   EditorIconSpritesheetGenerationResult,
   EditorIconSpritesheetIconResult,
   EditorImageGenerationResult,
+  EditorVideoGenerationResult,
 } from '../../services/image-editor/editorProjectClient';
 import { resolveLayerResolutionSize } from './ImageCanvasEditorModel';
 import { ICON_FRAME_DISPLAY_SIZE } from './ImageCanvasGenerationModel';
@@ -43,6 +44,16 @@ type IconSpritesheetResultLayerOptions = {
   frame?: GenerateDialogState['placeholder'];
 };
 
+type VideoResultLayerOptions = {
+  generated: EditorVideoGenerationResult;
+  generatedIndex: number;
+  title: string;
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+  generationInputs: CanvasGenerationInputs;
+  frame?: GenerateDialogState['placeholder'];
+};
+
 function getViewportWorldCenter({
   canvasSize,
   viewport,
@@ -235,3 +246,53 @@ export function createIconSpritesheetResultLayers({
     return layer;
   });
 }
+
+export function createVideoResultLayer({
+  generated,
+  generatedIndex,
+  title,
+  canvasSize,
+  viewport,
+  generationInputs,
+  frame,
+}: VideoResultLayerOptions): CanvasLayer {
+  const originalWidth = generated.width || 1280;
+  const originalHeight = generated.height || 720;
+  const { width, height } = resolveLayerResolutionSize(
+    originalWidth,
+    originalHeight,
+    { width: 560, height: 315 },
+  );
+  const worldCenter = getViewportWorldCenter({ canvasSize, viewport });
+  const frameX =
+    frame && frame.width > 0
+      ? frame.x + frame.width / 2 - width / 2
+      : undefined;
+  const frameY =
+    frame && frame.height > 0
+      ? frame.y + frame.height / 2 - height / 2
+      : undefined;
+
+  return {
+    id: `layer-video-${generatedIndex}`,
+    resourceId: `local-resource-video-${generatedIndex}`,
+    title,
+    src: generated.videoSrc,
+    mediaType: 'video',
+    assetKind: 'video',
+    x: frameX ?? worldCenter.x - width / 2,
+    y: frameY ?? worldCenter.y - height / 2,
+    width,
+    height,
+    originalWidth,
+    originalHeight,
+    zIndex: generatedIndex + 10,
+    sourceType: generated.sourceType,
+    prompt: generated.prompt,
+    actualPrompt: generated.actualPrompt ?? generated.prompt,
+    model: generated.model,
+    provider: generated.provider,
+    taskId: generated.taskId,
+    generationInputs,
+  };
+}
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index 7a119efc..34e942e8 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -15,7 +15,23 @@ import type {
 } from './ImageCanvasEditorTypes';
 import { isGeneratedLayer } from './ImageCanvasEditorModel';
 
-export const SPEC_GENERATION_COST = 5;
+// 中文注释：与 api-server/src/editor_generation_config.rs 保持同名语义，当前作为前端展示兜底。
+export const EDITOR_GENERATION_MUD_POINT_CONFIG = {
+  image: 12,
+  spec: 5,
+  character: 12,
+  icon: 12,
+  uiDesign: 12,
+  videoPerSecond: {
+    '480p': 10,
+    '720p': 20,
+  },
+  characterAnimationPerSecond: {
+    '480p': 10,
+    '720p': 20,
+  },
+} as const;
+export const SPEC_GENERATION_COST = EDITOR_GENERATION_MUD_POINT_CONFIG.spec;
 export const SPEC_GENERATION_SIZE = '2048x1152';
 export const SPEC_FRAME_ORIGINAL_SIZE = { width: 2048, height: 1152 };
 export const SPEC_FRAME_DISPLAY_SIZE = { width: 560, height: 315 };
@@ -23,6 +39,8 @@ export const CHARACTER_FRAME_ORIGINAL_SIZE = { width: 2048, height: 2048 };
 export const CHARACTER_FRAME_DISPLAY_SIZE = { width: 420, height: 420 };
 export const ICON_FRAME_ORIGINAL_SIZE = { width: 512, height: 512 };
 export const ICON_FRAME_DISPLAY_SIZE = { width: 360, height: 360 };
+export const UI_DESIGN_FRAME_ORIGINAL_SIZE = { width: 2048, height: 1152 };
+export const UI_DESIGN_FRAME_DISPLAY_SIZE = { width: 560, height: 315 };
 export const IMAGE_MODEL_GPT_IMAGE_2 = 'gpt-image-2';
 export const IMAGE_MODEL_NANOBANANA2 = 'gemini-3.1-flash-image-preview';
 export const DEFAULT_IMAGE_MODEL = IMAGE_MODEL_NANOBANANA2;
@@ -86,6 +104,18 @@ export const CHARACTER_ANIMATION_DURATION_OPTIONS = [
   { label: '40帧·5秒', frameCount: 40, durationSeconds: 5 },
   { label: '48帧·6秒', frameCount: 48, durationSeconds: 6 },
 ] as const;
+export const VIDEO_FRAME_ORIGINAL_SIZE = { width: 1280, height: 720 };
+export const VIDEO_FRAME_DISPLAY_SIZE = { width: 560, height: 315 };
+export const EDITOR_VIDEO_MODEL_OPTIONS = [
+  { label: 'Seedance 2.0', value: 'seedance2.0' },
+  { label: 'Seedance 2.0 Fast', value: 'seedance2.0-fast' },
+  { label: 'Kling 3.0', value: 'kling3.0' },
+  { label: 'Kling 3.0 Omni', value: 'kling3.0-omni' },
+] as const;
+export const EDITOR_VIDEO_DURATION_OPTIONS = [
+  { label: '4秒', value: '4' },
+  { label: '5秒', value: '5' },
+] as const;
 
 export const DEFAULT_SPEC_FORM_VALUES: Record<
   SpecGenerationType,
@@ -215,6 +245,12 @@ export function getLayerKindLabel(layer: CanvasLayer) {
   if (layer.assetKind === 'icon-spec') {
     return '图标规范';
   }
+  if (layer.assetKind === 'ui-design') {
+    return 'UI设计';
+  }
+  if (layer.assetKind === 'video' || layer.mediaType === 'video') {
+    return '视频';
+  }
   return null;
 }
 
@@ -231,6 +267,12 @@ export function formatLayerImageType(layer: CanvasLayer) {
   if (layer.assetKind === 'icon-spec') {
     return '图标素材规范图片';
   }
+  if (layer.assetKind === 'ui-design') {
+    return 'UI设计图';
+  }
+  if (layer.assetKind === 'video' || layer.mediaType === 'video') {
+    return '生成视频';
+  }
   return isGeneratedLayer(layer) ? '生成图片' : '上传图片';
 }
 
@@ -238,7 +280,20 @@ export function calculateCharacterAnimationPrice(
   resolution: EditorCharacterAnimationResolution,
   durationSeconds: number,
 ) {
-  return (resolution === '720p' ? 20 : 10) * durationSeconds;
+  return (
+    EDITOR_GENERATION_MUD_POINT_CONFIG.characterAnimationPerSecond[resolution] *
+    durationSeconds
+  );
+}
+
+export function calculateEditorVideoPrice(
+  resolution: '480p' | '720p',
+  durationSeconds: number,
+) {
+  return (
+    EDITOR_GENERATION_MUD_POINT_CONFIG.videoPerSecond[resolution] *
+    durationSeconds
+  );
 }
 
 export function resolveCharacterAnimationSourceImageSrc(layer: CanvasLayer) {
@@ -264,10 +319,31 @@ export function createGenerationInputField(
   return normalizedValue ? [{ title, value: normalizedValue }] : [];
 }
 
-export function buildImageGenerationInputs(prompt: string): CanvasGenerationInputs {
+export function buildImageGenerationInputs(
+  prompt: string,
+  references?: CharacterReferenceImage[],
+): CanvasGenerationInputs {
   return {
     fields: createGenerationInputField('生成提示词', prompt),
-    references: [],
+    references: (references ?? []).map((reference, index) => ({
+      title: `参考图 ${index + 1}`,
+      label: reference.label,
+      src: reference.src,
+    })),
+  };
+}
+
+export function buildVideoGenerationInputs(
+  prompt: string,
+  references?: CharacterReferenceImage[],
+): CanvasGenerationInputs {
+  return {
+    fields: createGenerationInputField('视频描述', prompt),
+    references: (references ?? []).map((reference, index) => ({
+      title: `参考图 ${index + 1}`,
+      label: reference.label,
+      src: reference.src,
+    })),
   };
 }
 
@@ -328,6 +404,24 @@ export function buildCharacterGenerationInputs(
   };
 }
 
+export function buildUiDesignGenerationInputs(
+  prompt: string,
+  specReference: CharacterReferenceImage | null | undefined,
+): CanvasGenerationInputs {
+  return {
+    fields: createGenerationInputField('用户输入', prompt),
+    references: specReference
+      ? [
+          {
+            title: '图标素材规范',
+            label: specReference.label,
+            src: specReference.src,
+          },
+        ]
+      : [],
+  };
+}
+
 export function buildIconGenerationInputs(
   iconDescriptions: string[],
   specReference: CharacterReferenceImage,
@@ -372,7 +466,9 @@ export function isCanvasGenerationDialog(
       (dialog.mode === 'generate' ||
         dialog.mode === 'spec' ||
         dialog.mode === 'character' ||
-        dialog.mode === 'icon'),
+        dialog.mode === 'icon' ||
+        dialog.mode === 'ui-design' ||
+        dialog.mode === 'video'),
   );
 }
 
@@ -388,6 +484,12 @@ export function getGenerationFrameAriaLabel(
   if (dialog.mode === 'icon') {
     return '图标素材生成占位图';
   }
+  if (dialog.mode === 'ui-design') {
+    return 'UI设计图生成占位图';
+  }
+  if (dialog.mode === 'video') {
+    return '视频生成占位图';
+  }
   return '图像生成占位图';
 }
 
@@ -401,6 +503,12 @@ export function getGenerationFrameLabel(dialog: CanvasGenerationDialogState) {
   if (dialog.mode === 'icon') {
     return 'Icon Generator';
   }
+  if (dialog.mode === 'ui-design') {
+    return 'UI Design Generator';
+  }
+  if (dialog.mode === 'video') {
+    return 'Video Generator';
+  }
   return 'Image Generator';
 }
 
diff --git a/src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts b/src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts
new file mode 100644
index 00000000..c3b81995
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts
@@ -0,0 +1,113 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  chooseGenerationPlacement,
+  centerViewportOnPlacement,
+} from './ImageCanvasGenerationPlacementModel';
+import type { CanvasLayer, CanvasViewport } from './ImageCanvasEditorTypes';
+
+const canvasSize = { width: 900, height: 640 };
+const viewport: CanvasViewport = { x: 10, y: 20, scale: 2 };
+const frame = {
+  x: 0,
+  y: 0,
+  width: 420,
+  height: 420,
+  originalWidth: 2048,
+  originalHeight: 2048,
+};
+
+function layer(overrides: Partial<CanvasLayer>): CanvasLayer {
+  return {
+    id: 'layer-1',
+    resourceId: 'resource-1',
+    title: '图片',
+    src: '/image.png',
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100,
+    originalWidth: 100,
+    originalHeight: 100,
+    zIndex: 1,
+    sourceType: 'uploaded',
+    ...overrides,
+  };
+}
+
+describe('ImageCanvasGenerationPlacementModel', () => {
+  it('places an empty-canvas generation frame at the current viewport center', () => {
+    const placement = chooseGenerationPlacement({
+      canvasSize,
+      viewport,
+      frame,
+      layers: [],
+      generationDialogs: [],
+    });
+
+    expect(placement).toEqual({
+      x: 10,
+      y: -60,
+      width: 420,
+      height: 420,
+      originalWidth: 2048,
+      originalHeight: 2048,
+    });
+  });
+
+  it('keeps the nearest non-overlapping gap from visible layers and generation placeholders', () => {
+    const placement = chooseGenerationPlacement({
+      canvasSize,
+      viewport,
+      frame: { ...frame, width: 100, height: 100 },
+      layers: [
+        layer({ id: 'center', x: 170, y: 110, width: 120, height: 120 }),
+        layer({ id: 'right', x: 322, y: 110, width: 100, height: 120 }),
+        layer({
+          id: 'hidden',
+          hidden: true,
+          x: 18,
+          y: 118,
+          width: 100,
+          height: 100,
+        }),
+      ],
+      generationDialogs: [
+        {
+          id: 'dialog-left',
+          mode: 'generate',
+          prompt: '',
+          status: 'idle',
+          placeholder: {
+            x: 18,
+            y: 118,
+            width: 100,
+            height: 100,
+            originalWidth: 2048,
+            originalHeight: 2048,
+          },
+        },
+      ],
+    });
+
+    expect(placement.x).toBe(170);
+    expect(placement.y).toBe(-22);
+  });
+
+  it('centers the viewport on the chosen placement without changing zoom', () => {
+    const nextViewport = centerViewportOnPlacement({
+      canvasSize,
+      viewport,
+      placement: {
+        x: 170,
+        y: 262,
+        width: 100,
+        height: 100,
+        originalWidth: 2048,
+        originalHeight: 2048,
+      },
+    });
+
+    expect(nextViewport).toEqual({ x: 10, y: -304, scale: 2 });
+  });
+});
diff --git a/src/components/image-editor/ImageCanvasGenerationPlacementModel.ts b/src/components/image-editor/ImageCanvasGenerationPlacementModel.ts
new file mode 100644
index 00000000..d7a85b84
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasGenerationPlacementModel.ts
@@ -0,0 +1,257 @@
+import type {
+  CanvasGenerationDialogState,
+  CanvasLayer,
+  CanvasViewport,
+  GenerateDialogState,
+} from './ImageCanvasEditorTypes';
+
+type CanvasSize = { width: number; height: number };
+type GenerationFrame = NonNullable<GenerateDialogState['placeholder']>;
+type Rect = { x: number; y: number; width: number; height: number };
+
+const GENERATION_PLACEMENT_GAP = 32;
+const MAX_PLACEMENT_RING = 12;
+
+function getViewportWorldCenter({
+  canvasSize,
+  viewport,
+}: {
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+}) {
+  const safeScale = viewport.scale > 0 ? viewport.scale : 1;
+  return {
+    x: (canvasSize.width / 2 - viewport.x) / safeScale,
+    y: (canvasSize.height / 2 - viewport.y) / safeScale,
+  };
+}
+
+function expandRect(rect: Rect, gap: number): Rect {
+  return {
+    x: rect.x - gap,
+    y: rect.y - gap,
+    width: rect.width + gap * 2,
+    height: rect.height + gap * 2,
+  };
+}
+
+function rectsOverlap(a: Rect, b: Rect) {
+  return (
+    a.x < b.x + b.width &&
+    a.x + a.width > b.x &&
+    a.y < b.y + b.height &&
+    a.y + a.height > b.y
+  );
+}
+
+function distanceSquared(
+  a: { x: number; y: number },
+  b: { x: number; y: number },
+) {
+  const dx = a.x - b.x;
+  const dy = a.y - b.y;
+  return dx * dx + dy * dy;
+}
+
+function buildBlockingRects({
+  layers,
+  generationDialogs,
+}: {
+  layers: CanvasLayer[];
+  generationDialogs: CanvasGenerationDialogState[];
+}) {
+  return [
+    ...layers
+      .filter((layer) => !layer.hidden)
+      .map((layer) => ({
+        x: layer.x,
+        y: layer.y,
+        width: layer.width,
+        height: layer.height,
+      })),
+    ...generationDialogs.flatMap((dialog) =>
+      dialog.placeholder
+        ? [
+            {
+              x: dialog.placeholder.x,
+              y: dialog.placeholder.y,
+              width: dialog.placeholder.width,
+              height: dialog.placeholder.height,
+            },
+          ]
+        : [],
+    ),
+  ].map((rect) => expandRect(rect, GENERATION_PLACEMENT_GAP));
+}
+
+function isFree(candidate: Rect, blockingRects: Rect[]) {
+  return !blockingRects.some((rect) => rectsOverlap(candidate, rect));
+}
+
+function createCandidate({
+  center,
+  frame,
+  offsetX,
+  offsetY,
+}: {
+  center: { x: number; y: number };
+  frame: Pick<GenerationFrame, 'width' | 'height'>;
+  offsetX: number;
+  offsetY: number;
+}): Rect {
+  return {
+    x: center.x - frame.width / 2 + offsetX,
+    y: center.y - frame.height / 2 + offsetY,
+    width: frame.width,
+    height: frame.height,
+  };
+}
+
+function pushUniqueCandidate(candidates: Rect[], candidate: Rect) {
+  if (
+    candidates.some(
+      (current) => current.x === candidate.x && current.y === candidate.y,
+    )
+  ) {
+    return;
+  }
+  candidates.push(candidate);
+}
+
+function buildPlacementCandidates({
+  center,
+  frame,
+  blockingRects,
+}: {
+  center: { x: number; y: number };
+  frame: Pick<GenerationFrame, 'width' | 'height'>;
+  blockingRects: Rect[];
+}) {
+  const baseX = center.x - frame.width / 2;
+  const baseY = center.y - frame.height / 2;
+  const stepX = frame.width + GENERATION_PLACEMENT_GAP;
+  const stepY = frame.height + GENERATION_PLACEMENT_GAP;
+  const candidates: Rect[] = [];
+  pushUniqueCandidate(candidates, {
+    x: baseX,
+    y: baseY,
+    width: frame.width,
+    height: frame.height,
+  });
+
+  blockingRects.forEach((rect) => {
+    [
+      { x: rect.x + rect.width, y: baseY },
+      { x: baseX, y: rect.y + rect.height },
+      { x: rect.x - frame.width, y: baseY },
+      { x: baseX, y: rect.y - frame.height },
+      { x: rect.x + rect.width, y: rect.y + rect.height },
+      { x: rect.x - frame.width, y: rect.y + rect.height },
+      { x: rect.x + rect.width, y: rect.y - frame.height },
+      { x: rect.x - frame.width, y: rect.y - frame.height },
+    ].forEach((candidate) =>
+      pushUniqueCandidate(candidates, {
+        ...candidate,
+        width: frame.width,
+        height: frame.height,
+      }),
+    );
+  });
+
+  for (let ring = 1; ring <= MAX_PLACEMENT_RING; ring += 1) {
+    const offsets = [
+      { x: ring, y: 0 },
+      { x: 0, y: ring },
+      { x: -ring, y: 0 },
+      { x: 0, y: -ring },
+      { x: ring, y: ring },
+      { x: -ring, y: ring },
+      { x: ring, y: -ring },
+      { x: -ring, y: -ring },
+    ];
+    offsets.forEach((offset) =>
+      pushUniqueCandidate(
+        candidates,
+        createCandidate({
+          center,
+          frame,
+          offsetX: offset.x * stepX,
+          offsetY: offset.y * stepY,
+        }),
+      ),
+    );
+  }
+
+  return candidates.sort((a, b) => {
+    const aDistance = distanceSquared(
+      { x: a.x + a.width / 2, y: a.y + a.height / 2 },
+      center,
+    );
+    const bDistance = distanceSquared(
+      { x: b.x + b.width / 2, y: b.y + b.height / 2 },
+      center,
+    );
+    if (aDistance !== bDistance) {
+      return aDistance - bDistance;
+    }
+    const aDownBias = a.y >= baseY ? 0 : 1;
+    const bDownBias = b.y >= baseY ? 0 : 1;
+    if (aDownBias !== bDownBias) {
+      return aDownBias - bDownBias;
+    }
+    if (a.x !== b.x) {
+      return a.x - b.x;
+    }
+    return a.y - b.y;
+  });
+}
+
+export function chooseGenerationPlacement({
+  canvasSize,
+  viewport,
+  frame,
+  layers,
+  generationDialogs,
+}: {
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+  frame: GenerationFrame;
+  layers: CanvasLayer[];
+  generationDialogs: CanvasGenerationDialogState[];
+}): GenerationFrame {
+  const center = getViewportWorldCenter({ canvasSize, viewport });
+  const blockingRects = buildBlockingRects({ layers, generationDialogs });
+  const candidates = buildPlacementCandidates({ center, frame, blockingRects });
+  const fallbackPlacement = createCandidate({
+    center,
+    frame,
+    offsetX: 0,
+    offsetY: 0,
+  });
+  const placement =
+    candidates.find((candidate) => isFree(candidate, blockingRects)) ??
+    fallbackPlacement;
+
+  return {
+    ...frame,
+    x: placement.x,
+    y: placement.y,
+  };
+}
+
+export function centerViewportOnPlacement({
+  canvasSize,
+  viewport,
+  placement,
+}: {
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+  placement: GenerationFrame;
+}): CanvasViewport {
+  const scale = viewport.scale > 0 ? viewport.scale : 1;
+  return {
+    x: canvasSize.width / 2 - (placement.x + placement.width / 2) * scale,
+    y: canvasSize.height / 2 - (placement.y + placement.height / 2) * scale,
+    scale,
+  };
+}
diff --git a/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx b/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
index 2263bdf0..1b4837d7 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.test.tsx
@@ -95,6 +95,42 @@ describe('ImageCanvasMetadataModalView', () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
+  it('renders generated video metadata with video labels and close action', () => {
+    const onClose = vi.fn();
+    render(
+      <ImageCanvasMetadataModalView
+        layer={createLayer({
+          title: '生成视频 1',
+          src: '/generated-editor-videos/video-task-1/preview.mp4',
+          mediaType: 'video',
+          assetKind: 'video',
+          originalWidth: 1280,
+          originalHeight: 720,
+          model: 'kling3.0-omni',
+          taskId: 'video-task-1',
+          generationInputs: {
+            fields: [{ title: '视频描述', value: '让角色向镜头挥手' }],
+            references: [],
+          },
+        })}
+        onClose={onClose}
+      />,
+    );
+
+    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('kling3.0-omni')).toBeTruthy();
+    expect(within(dialog).getByText('1280 x 720 px')).toBeTruthy();
+
+    fireEvent.click(within(dialog).getByRole('button', { name: '关闭视频信息' }));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
   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 628ea40b..c66dc037 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
@@ -19,16 +19,16 @@ export function ImageCanvasMetadataModalView({
   return (
     <UnifiedModal
       open={Boolean(layer)}
-      title="图片信息"
+      title={layer?.mediaType === 'video' ? '视频信息' : '图片信息'}
       size="sm"
-      closeLabel="关闭图片信息"
+      closeLabel={layer?.mediaType === 'video' ? '关闭视频信息' : '关闭图片信息'}
       onClose={onClose}
       panelClassName="image-canvas-editor__metadata-dialog"
       bodyClassName="image-canvas-editor__metadata-body"
     >
       {layer ? (
         <dl className="image-canvas-editor__metadata-grid">
-          <dt>图片类型</dt>
+          <dt>{layer.mediaType === 'video' ? '视频类型' : '图片类型'}</dt>
           <dd>{formatLayerImageType(layer)}</dd>
           <dt>生成输入</dt>
           <dd className="image-canvas-editor__metadata-inputs">
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 6569c380..ef29319e 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -1,6 +1,12 @@
 /* @vitest-environment jsdom */
 
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import { useRef, useState } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -72,10 +78,13 @@ function createGenerated(overrides = {}) {
 
 function GenerationWorkflowHarness({
   initialLayers = [createLayer()],
+  initialViewport = { x: 10, y: 20, scale: 2 },
 }: {
   initialLayers?: CanvasLayer[];
+  initialViewport?: { x: number; y: number; scale: number };
 }) {
   const [layers, setLayers] = useState<CanvasLayer[]>(initialLayers);
+  const [viewport, setViewport] = useState(initialViewport);
   const [activeTool, setActiveTool] = useState<CanvasTool>('select');
   const [activeSidebarPanel, setActiveSidebarPanel] =
     useState<SidebarPanel | null>('assets');
@@ -93,7 +102,9 @@ function GenerationWorkflowHarness({
   const workflow = useImageCanvasGenerationWorkflow({
     layers,
     canvasSize: { width: 900, height: 640 },
-    viewport: { x: 10, y: 20, scale: 2 },
+    viewport,
+    setViewport,
+    canvasGenerationDialogs: dialogs.canvasGenerationDialogs,
     layerCounterRef,
     generateDialog: dialogs.generateDialog,
     setGenerateDialog: dialogs.setGenerateDialog,
@@ -126,6 +137,12 @@ function GenerationWorkflowHarness({
       <span data-testid="selected">{selectedLayerId ?? '-'}</span>
       <span data-testid="metadata">{metadataLayer?.id ?? '-'}</span>
       <span data-testid="image-context">{imageContextMenu ? 'open' : '-'}</span>
+      <span data-testid="viewport">{`${viewport.x}:${viewport.y}:${viewport.scale}`}</span>
+      <span data-testid="placeholder">
+        {activeDialog?.placeholder
+          ? `${activeDialog.placeholder.x}:${activeDialog.placeholder.y}:${activeDialog.placeholder.width}:${activeDialog.placeholder.height}`
+          : '-'}
+      </span>
       <span data-testid="layers">
         {layers
           .map(
@@ -139,6 +156,11 @@ function GenerationWorkflowHarness({
           ? `${activeDialog.mode}:${activeDialog.status}:${activeDialog.composerOpen !== false ? 'open' : 'closed'}:${activeDialog.generatedLayerId ?? '-'}:${activeDialog.placeholder ? 'placeholder' : '-'}`
           : '-'}
       </span>
+      <span data-testid="generation-references">
+        {activeDialog?.generationReferences
+          ?.map((reference) => reference.label)
+          .join('|') ?? '-'}
+      </span>
       <span data-testid="quick-edit">
         {workflow.quickEditPanel
           ? `${workflow.quickEditPanel.sourceLayerId}:${workflow.quickEditPanel.status}:${workflow.quickEditPanel.prompt || '-'}`
@@ -190,7 +212,9 @@ function GenerationWorkflowHarness({
       <button
         type="button"
         onClick={() =>
-          workflow.openCharacterAnimationPanel(createLayer({ id: 'layer-plain' }))
+          workflow.openCharacterAnimationPanel(
+            createLayer({ id: 'layer-plain' }),
+          )
         }
       >
         打开普通动画
@@ -217,6 +241,16 @@ function GenerationWorkflowHarness({
       >
         提交生成
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.pickGenerationReferenceFromLayer(
+            createLayer({ id: 'layer-reference', title: '画布参考图' }),
+          )
+        }
+      >
+        选择画布参考图
+      </button>
       <button
         type="button"
         onClick={() =>
@@ -240,21 +274,22 @@ function GenerationWorkflowHarness({
         type="button"
         onClick={() =>
           workflow.setQuickEditPanel((currentPanel) =>
-            currentPanel ? { ...currentPanel, prompt: '快速修图' } : currentPanel,
+            currentPanel
+              ? { ...currentPanel, prompt: '快速修图' }
+              : currentPanel,
           )
         }
       >
         填写快速编辑
       </button>
-      <button
-        type="button"
-        onClick={() => void workflow.submitQuickEdit()}
-      >
+      <button type="button" onClick={() => void workflow.submitQuickEdit()}>
         提交快速编辑
       </button>
       <button
         type="button"
-        onClick={() => workflow.clearDeletedLayerGenerationState('layer-source')}
+        onClick={() =>
+          workflow.clearDeletedLayerGenerationState('layer-source')
+        }
       >
         清理源图状态
       </button>
@@ -298,6 +333,29 @@ describe('useImageCanvasGenerationWorkflow', () => {
     );
   });
 
+  it('places a new generation placeholder away from existing canvas images and centers the viewport on it', () => {
+    render(
+      <GenerationWorkflowHarness
+        initialLayers={[
+          createLayer({
+            id: 'center-layer',
+            x: 0,
+            y: -80,
+            width: 460,
+            height: 460,
+          }),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '打开生成' }));
+
+    expect(screen.getByTestId('placeholder').textContent).toBe(
+      '-452:-60:420:420',
+    );
+    expect(screen.getByTestId('viewport').textContent).toBe('934:20:2');
+  });
+
   it('submits a normal generation, appends the generated layer, and keeps the composer anchored', async () => {
     generateEditorImageMock.mockResolvedValueOnce(
       createGenerated({ prompt: '一张生成图' }),
@@ -329,6 +387,30 @@ describe('useImageCanvasGenerationWorkflow', () => {
     );
   });
 
+  it('adds picked canvas layers as normal generation references and submits them', async () => {
+    generateEditorImageMock.mockResolvedValueOnce(
+      createGenerated({ prompt: '参考生成图' }),
+    );
+    render(<GenerationWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '打开生成' }));
+    fireEvent.click(screen.getByRole('button', { name: '选择画布参考图' }));
+
+    expect(screen.getByTestId('generation-references').textContent).toBe(
+      '画布参考图',
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '填写生成提示词' }));
+    fireEvent.click(screen.getByRole('button', { name: '提交生成' }));
+
+    await waitFor(() => {
+      expect(generateEditorImageMock).toHaveBeenCalledWith({
+        prompt: '一张生成图',
+        referenceImageSrcs: ['data:image/png;base64,source'],
+      });
+    });
+  });
+
   it('submits spec generation with reference image and reference prompt semantics', async () => {
     generateEditorImageMock.mockResolvedValueOnce(
       createGenerated({ prompt: 'UI规范图' }),
@@ -344,6 +426,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
         expect.objectContaining({
           size: '2048x1152',
           kind: 'spec',
+          model: 'gpt-image-2',
           referenceImageSrcs: ['data:image/png;base64,ref'],
           prompt: expect.stringContaining('参考图生成规范'),
         }),
diff --git a/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx b/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
index 1f44b871..e246a899 100644
--- a/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
+++ b/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
@@ -78,6 +78,8 @@ function KeyboardShortcutsHarness({
   const [imageContextMenuOpen, setImageContextMenuOpen] = useState(true);
   const [contextMenuOpen, setContextMenuOpen] = useState(true);
   const [isSpecMenuOpen, setIsSpecMenuOpen] = useState(true);
+  const [, setIsGenerationReferenceMenuOpen] = useState(true);
+  const [, setIsPickingGenerationReferenceFromCanvas] = useState(true);
   const [isCharacterSpecMenuOpen, setIsCharacterSpecMenuOpen] = useState(true);
   const [isCharacterReferenceMenuOpen, setIsCharacterReferenceMenuOpen] =
     useState(true);
@@ -90,6 +92,9 @@ function KeyboardShortcutsHarness({
   const [isIconSpecMenuOpen, setIsIconSpecMenuOpen] = useState(true);
   const [isPickingIconSpecFromCanvas, setIsPickingIconSpecFromCanvas] =
     useState(true);
+  const [, setIsUiDesignSpecMenuOpen] = useState(true);
+  const [, setIsPickingUiDesignSpecFromCanvas] =
+    useState(true);
   const [isSpacePanning, setIsSpacePanning] = useState(false);
   const [shiftPressed, setShiftPressed] = useState(false);
   const generateDialogRef = useRef<GenerateDialogState | null>(generateDialog);
@@ -116,12 +121,16 @@ function KeyboardShortcutsHarness({
       ),
     closeEditorChromePanels,
     setIsSpecMenuOpen,
+    setIsGenerationReferenceMenuOpen,
+    setIsPickingGenerationReferenceFromCanvas,
     setIsCharacterSpecMenuOpen,
     setIsCharacterReferenceMenuOpen,
     setIsPickingCharacterSpecFromCanvas,
     setIsPickingCharacterReferenceFromCanvas,
     setIsIconSpecMenuOpen,
     setIsPickingIconSpecFromCanvas,
+    setIsUiDesignSpecMenuOpen,
+    setIsPickingUiDesignSpecFromCanvas,
     setIsSpacePanning,
     setShiftPressed,
   });
diff --git a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
index ed2fd479..982f6636 100644
--- a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
+++ b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
@@ -30,12 +30,16 @@ type UseImageCanvasKeyboardShortcutsOptions = {
   ) => void;
   closeEditorChromePanels: () => void;
   setIsSpecMenuOpen: (open: boolean) => void;
+  setIsGenerationReferenceMenuOpen: (open: boolean) => void;
+  setIsPickingGenerationReferenceFromCanvas: (picking: boolean) => void;
   setIsCharacterSpecMenuOpen: (open: boolean) => void;
   setIsCharacterReferenceMenuOpen: (open: boolean) => void;
   setIsPickingCharacterSpecFromCanvas: (picking: boolean) => void;
   setIsPickingCharacterReferenceFromCanvas: (picking: boolean) => void;
   setIsIconSpecMenuOpen: (open: boolean) => void;
   setIsPickingIconSpecFromCanvas: (picking: boolean) => void;
+  setIsUiDesignSpecMenuOpen: (open: boolean) => void;
+  setIsPickingUiDesignSpecFromCanvas: (picking: boolean) => void;
   setIsSpacePanning: (panning: boolean) => void;
   setShiftPressed: (pressed: boolean) => void;
 };
@@ -61,7 +65,8 @@ function isCanvasGenerationPlaceholderDialog(
     (dialog?.mode === 'generate' ||
       dialog?.mode === 'spec' ||
       dialog?.mode === 'character' ||
-      dialog?.mode === 'icon')
+      dialog?.mode === 'icon' ||
+      dialog?.mode === 'ui-design')
   );
 }
 
@@ -78,12 +83,16 @@ export function useImageCanvasKeyboardShortcuts({
   setQuickEditPanel,
   closeEditorChromePanels,
   setIsSpecMenuOpen,
+  setIsGenerationReferenceMenuOpen,
+  setIsPickingGenerationReferenceFromCanvas,
   setIsCharacterSpecMenuOpen,
   setIsCharacterReferenceMenuOpen,
   setIsPickingCharacterSpecFromCanvas,
   setIsPickingCharacterReferenceFromCanvas,
   setIsIconSpecMenuOpen,
   setIsPickingIconSpecFromCanvas,
+  setIsUiDesignSpecMenuOpen,
+  setIsPickingUiDesignSpecFromCanvas,
   setIsSpacePanning,
   setShiftPressed,
 }: UseImageCanvasKeyboardShortcutsOptions) {
@@ -91,6 +100,8 @@ export function useImageCanvasKeyboardShortcuts({
     const closeTransientEditorPanels = () => {
       closeEditorChromePanels();
       setIsSpecMenuOpen(false);
+      setIsGenerationReferenceMenuOpen(false);
+      setIsPickingGenerationReferenceFromCanvas(false);
       setImageContextMenu(null);
       setContextMenu(null);
       setQuickEditPanel((currentPanel) =>
@@ -102,6 +113,8 @@ export function useImageCanvasKeyboardShortcuts({
       setIsPickingCharacterReferenceFromCanvas(false);
       setIsIconSpecMenuOpen(false);
       setIsPickingIconSpecFromCanvas(false);
+      setIsUiDesignSpecMenuOpen(false);
+      setIsPickingUiDesignSpecFromCanvas(false);
       setGenerateDialog((currentDialog) => {
         if (!currentDialog || currentDialog.status === 'generating') {
           return currentDialog;
@@ -118,6 +131,9 @@ export function useImageCanvasKeyboardShortcuts({
         if (currentDialog.mode === 'icon') {
           return currentDialog;
         }
+        if (currentDialog.mode === 'ui-design') {
+          return currentDialog;
+        }
         return null;
       });
     };
@@ -154,6 +170,8 @@ export function useImageCanvasKeyboardShortcuts({
           event.preventDefault();
           setGenerateDialog(null);
           setActiveTool('select');
+          setIsGenerationReferenceMenuOpen(false);
+          setIsPickingGenerationReferenceFromCanvas(false);
           setIsCharacterSpecMenuOpen(false);
           setIsCharacterReferenceMenuOpen(false);
           setIsPickingCharacterSpecFromCanvas(false);
@@ -200,6 +218,8 @@ export function useImageCanvasKeyboardShortcuts({
     setContextMenu,
     setGenerateDialog,
     setImageContextMenu,
+    setIsGenerationReferenceMenuOpen,
+    setIsPickingGenerationReferenceFromCanvas,
     setIsCharacterSpecMenuOpen,
     setIsCharacterReferenceMenuOpen,
     setIsIconSpecMenuOpen,
diff --git a/src/components/image-editor/useImageCanvasStageInteractions.test.tsx b/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
index df67f505..8b8fe15f 100644
--- a/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
+++ b/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
@@ -108,13 +108,17 @@ function asCanvasGenerationDialog(
 
 function StageInteractionsHarness({
   pickCharacterSpecFromLayer = vi.fn(),
+  pickGenerationReferenceFromLayer = vi.fn(),
   pickIconSpecFromLayer = vi.fn(),
+  isPickingGenerationReferenceFromCanvas = false,
   activateCanvasGenerationDialog = vi.fn(),
   moveViewportFromMinimapPointer = vi.fn(),
   updateViewportFromMinimapDrag = vi.fn(),
 }: {
   pickCharacterSpecFromLayer?: (layer: CanvasLayer) => void;
+  pickGenerationReferenceFromLayer?: (layer: CanvasLayer) => void;
   pickIconSpecFromLayer?: (layer: CanvasLayer) => void;
+  isPickingGenerationReferenceFromCanvas?: boolean;
   activateCanvasGenerationDialog?: (
     dialog: CanvasGenerationDialogState,
   ) => void;
@@ -175,16 +179,20 @@ function StageInteractionsHarness({
     generateDialog,
     setGenerateDialog,
     isPickingCharacterSpecFromCanvas: false,
+    isPickingGenerationReferenceFromCanvas,
     isPickingCharacterReferenceFromCanvas: false,
     isPickingIconSpecFromCanvas: false,
+    isPickingUiDesignSpecFromCanvas: false,
     clearCanvasFocus: () => {
       setSelectedLayerId(null);
       setSelectedLayerIds([]);
       setClearCount((currentCount) => currentCount + 1);
     },
     pickCharacterSpecFromLayer,
+    pickGenerationReferenceFromLayer,
     pickCharacterReferenceFromLayer: vi.fn(),
     pickIconSpecFromLayer,
+    pickUiDesignSpecFromLayer: vi.fn(),
     activateCanvasGenerationDialog,
     updateCanvasGenerationDialogById: (dialogId, updater) => {
       setGenerateDialog((currentDialog) => {
diff --git a/src/components/image-editor/useImageCanvasStageInteractions.ts b/src/components/image-editor/useImageCanvasStageInteractions.ts
index 865a27cb..6d967a6f 100644
--- a/src/components/image-editor/useImageCanvasStageInteractions.ts
+++ b/src/components/image-editor/useImageCanvasStageInteractions.ts
@@ -54,12 +54,16 @@ type UseImageCanvasStageInteractionsOptions = {
   generateDialog: GenerateDialogState | null;
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
   isPickingCharacterSpecFromCanvas: boolean;
+  isPickingGenerationReferenceFromCanvas: boolean;
   isPickingCharacterReferenceFromCanvas: boolean;
   isPickingIconSpecFromCanvas: boolean;
+  isPickingUiDesignSpecFromCanvas: boolean;
   clearCanvasFocus: () => void;
   pickCharacterSpecFromLayer: (layer: CanvasLayer) => void;
+  pickGenerationReferenceFromLayer: (layer: CanvasLayer) => void;
   pickCharacterReferenceFromLayer: (layer: CanvasLayer) => void;
   pickIconSpecFromLayer: (layer: CanvasLayer) => void;
+  pickUiDesignSpecFromLayer: (layer: CanvasLayer) => void;
   activateCanvasGenerationDialog: (
     dialog: CanvasGenerationDialogState,
   ) => void;
@@ -92,12 +96,16 @@ export function useImageCanvasStageInteractions({
   generateDialog,
   setGenerateDialog,
   isPickingCharacterSpecFromCanvas,
+  isPickingGenerationReferenceFromCanvas,
   isPickingCharacterReferenceFromCanvas,
   isPickingIconSpecFromCanvas,
+  isPickingUiDesignSpecFromCanvas,
   clearCanvasFocus,
   pickCharacterSpecFromLayer,
+  pickGenerationReferenceFromLayer,
   pickCharacterReferenceFromLayer,
   pickIconSpecFromLayer,
+  pickUiDesignSpecFromLayer,
   activateCanvasGenerationDialog,
   updateCanvasGenerationDialogById,
   moveViewportFromMinimapPointer,
@@ -190,6 +198,18 @@ export function useImageCanvasStageInteractions({
         event.stopPropagation();
         return;
       }
+      if (
+        isPickingGenerationReferenceFromCanvas &&
+        (generateDialog?.mode === 'generate' ||
+          generateDialog?.mode === 'video' ||
+          generateDialog?.mode === 'spec')
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        suppressNextLayerClickRef.current = true;
+        pickGenerationReferenceFromLayer(layer);
+        return;
+      }
       if (
         isPickingCharacterSpecFromCanvas &&
         generateDialog?.mode === 'character'
@@ -217,6 +237,16 @@ export function useImageCanvasStageInteractions({
         pickIconSpecFromLayer(layer);
         return;
       }
+      if (
+        isPickingUiDesignSpecFromCanvas &&
+        generateDialog?.mode === 'ui-design'
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        suppressNextLayerClickRef.current = true;
+        pickUiDesignSpecFromLayer(layer);
+        return;
+      }
 
       event.preventDefault();
       event.stopPropagation();
@@ -244,12 +274,15 @@ export function useImageCanvasStageInteractions({
       effectiveTool,
       generateDialog?.mode,
       isPickingCharacterSpecFromCanvas,
+      isPickingGenerationReferenceFromCanvas,
       isPickingCharacterReferenceFromCanvas,
       isPickingIconSpecFromCanvas,
       layers,
+      pickGenerationReferenceFromLayer,
       pickCharacterReferenceFromLayer,
       pickCharacterSpecFromLayer,
       pickIconSpecFromLayer,
+      pickUiDesignSpecFromLayer,
       selectedLayerIds,
       setGenerateDialog,
       setSelectedLayerId,
@@ -271,6 +304,9 @@ export function useImageCanvasStageInteractions({
       if (isPickingCharacterSpecFromCanvas) {
         return;
       }
+      if (isPickingGenerationReferenceFromCanvas) {
+        return;
+      }
       if (isPickingCharacterReferenceFromCanvas) {
         return;
       }
@@ -289,6 +325,7 @@ export function useImageCanvasStageInteractions({
     },
     [
       isPickingCharacterSpecFromCanvas,
+      isPickingGenerationReferenceFromCanvas,
       isPickingCharacterReferenceFromCanvas,
       isPickingIconSpecFromCanvas,
       onCloseImageContextMenu,
diff --git a/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx b/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
index 3696420e..210792b0 100644
--- a/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
@@ -1,6 +1,12 @@
 /* @vitest-environment jsdom */
 
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import { useRef, useState } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -130,7 +136,7 @@ function UploadWorkflowHarness({
       <span data-testid="selected-layer">{selectedLayerId ?? '-'}</span>
       <span data-testid="dialog">
         {generateDialog
-          ? `${generateDialog.mode}:${generateDialog.status}:${generateDialog.characterSpecReference?.label ?? '-'}:${generateDialog.characterReferences?.length ?? 0}:${generateDialog.iconSpecReference?.label ?? '-'}:${generateDialog.specReference?.label ?? '-'}`
+          ? `${generateDialog.mode}:${generateDialog.status}:${generateDialog.characterSpecReference?.label ?? '-'}:${generateDialog.characterReferences?.length ?? 0}:${generateDialog.iconSpecReference?.label ?? '-'}:${generateDialog.specReference?.label ?? '-'}:${generateDialog.generationReferences?.length ?? 0}:${generateDialog.generationReferences?.[0]?.label ?? '-'}`
           : '-'}
       </span>
       <button
@@ -153,6 +159,19 @@ function UploadWorkflowHarness({
       >
         上传到画布
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          setGenerateDialog({
+            mode: 'generate',
+            prompt: '',
+            status: 'failed',
+            errorMessage: '旧错误',
+          })
+        }
+      >
+        准备图片生成
+      </button>
       <button
         type="button"
         onClick={() =>
@@ -180,6 +199,12 @@ function UploadWorkflowHarness({
       >
         准备规范生成
       </button>
+      <button
+        type="button"
+        onClick={() => workflow.setUploadTarget('generation-reference')}
+      >
+        选择生成参考图
+      </button>
       <button
         type="button"
         onClick={() => workflow.setUploadTarget('spec-reference')}
@@ -262,7 +287,9 @@ describe('useImageCanvasUploadWorkflow', () => {
         openEditorLoginModal={openEditorLoginModal}
       />,
     );
-    const uploadInput = screen.getByLabelText('上传图片文件') as HTMLInputElement;
+    const uploadInput = screen.getByLabelText(
+      '上传图片文件',
+    ) as HTMLInputElement;
     const clickUploadInput = vi.spyOn(uploadInput, 'click');
 
     fireEvent.click(screen.getByRole('button', { name: '请求素材上传' }));
@@ -279,7 +306,9 @@ describe('useImageCanvasUploadWorkflow', () => {
         openEditorLoginModal={openEditorLoginModal}
       />,
     );
-    const uploadInput = screen.getByLabelText('上传图片文件') as HTMLInputElement;
+    const uploadInput = screen.getByLabelText(
+      '上传图片文件',
+    ) as HTMLInputElement;
     const clickUploadInput = vi.spyOn(uploadInput, 'click');
 
     fireEvent.click(screen.getByRole('button', { name: '请求角色规范上传' }));
@@ -370,7 +399,7 @@ describe('useImageCanvasUploadWorkflow', () => {
     fireEvent.click(screen.getByRole('button', { name: '选择角色规范' }));
     await waitFor(() => {
       expect(screen.getByTestId('dialog').textContent).toBe(
-        'character:failed:-:0:-:-',
+        'character:failed:-:0:-:-:0:-',
       );
     });
 
@@ -388,6 +417,25 @@ describe('useImageCanvasUploadWorkflow', () => {
     expect(createEditorAssetMock).not.toHaveBeenCalled();
   });
 
+  it('dispatches file input uploads to normal generation references', async () => {
+    render(<UploadWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '准备图片生成' }));
+    fireEvent.click(screen.getByRole('button', { name: '选择生成参考图' }));
+    fireEvent.change(screen.getByLabelText('上传图片文件'), {
+      target: {
+        files: [createTestFile('普通参考.png')],
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('dialog').textContent).toContain(
+        'generate:idle:-:0:-:-:1:普通参考.png',
+      );
+    });
+    expect(createEditorAssetMock).not.toHaveBeenCalled();
+  });
+
   it('dispatches file input uploads to spec reference images', async () => {
     render(<UploadWorkflowHarness />);
 
diff --git a/src/index.css b/src/index.css
index 12106d6e..2a4cd8fa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3758,7 +3758,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .image-canvas-editor__asset-meta span + span {
   color: #64748b;
-  font-size: 0.72rem;
+  font-size: 0.82rem;
   font-weight: 760;
 }
 
@@ -3913,7 +3913,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   max-width: 10rem;
   overflow: hidden;
   color: #dc2626;
-  font-size: 0.72rem;
+  font-size: 0.82rem;
   font-weight: 760;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4063,17 +4063,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   z-index: 6;
   display: grid;
   place-items: center;
-  border: 2px solid #2f7df6;
+  border: 2px solid transparent;
   background: #eeeeee;
   color: #9ca3af;
   cursor: move;
   box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
 }
 
+.image-canvas-editor__generation-frame--focused {
+  border-color: #2f7df6;
+}
+
 .image-canvas-editor__generation-frame-label,
 .image-canvas-editor__generation-frame-size {
   position: absolute;
-  top: -1.35rem;
+  top: var(--image-canvas-editor-frame-label-offset, -1.35rem);
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -4082,14 +4086,17 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   font-weight: 850;
   line-height: 1;
   white-space: nowrap;
+  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
 }
 
 .image-canvas-editor__generation-frame-label {
   left: 0;
+  transform-origin: bottom left;
 }
 
 .image-canvas-editor__generation-frame-size {
   right: 0;
+  transform-origin: bottom right;
 }
 
 .image-canvas-editor__generation-frame-icon {
@@ -4100,7 +4107,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .image-canvas-editor__generation-frame--generating {
   overflow: hidden;
-  border-color: rgba(47, 125, 246, 0.72);
   background: radial-gradient(
       circle at 50% 38%,
       rgba(255, 255, 255, 0.96),
@@ -4206,7 +4212,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__generation-frame--icon {
-  border-color: #10b981;
   background: linear-gradient(
       135deg,
       rgba(255, 255, 255, 0.72),
@@ -4215,6 +4220,10 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
     #ecfdf5;
 }
 
+.image-canvas-editor__generation-frame--icon.image-canvas-editor__generation-frame--focused {
+  border-color: #10b981;
+}
+
 .image-canvas-editor__generation-frame--icon::before,
 .image-canvas-editor__generation-frame--icon::after {
   content: '';
@@ -4248,14 +4257,30 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 16px 28px rgba(16, 185, 129, 0.16);
 }
 
-.image-canvas-editor__generation-frame--icon.image-canvas-editor__generation-frame--generating {
-  border-color: rgba(16, 185, 129, 0.75);
+.image-canvas-editor__generation-frame--ui-design {
+  background: linear-gradient(
+      90deg,
+      rgba(245, 158, 11, 0.12) 1px,
+      transparent 1px
+    ),
+    linear-gradient(0deg, rgba(245, 158, 11, 0.1) 1px, transparent 1px),
+    rgba(255, 251, 235, 0.82);
+  background-size: 42px 42px;
+}
+
+.image-canvas-editor__generation-frame--ui-design.image-canvas-editor__generation-frame--focused {
+  border-color: rgba(245, 158, 11, 0.72);
+}
+
+.image-canvas-editor__generation-frame--ui-design
+  .image-canvas-editor__generation-frame-icon {
+  color: #d97706;
 }
 
 .image-canvas-editor__metadata-corner {
   position: absolute;
-  right: 0.35rem;
-  top: 0.35rem;
+  right: var(--image-canvas-editor-corner-offset, 0.35rem);
+  top: var(--image-canvas-editor-corner-offset, 0.35rem);
   z-index: 2;
   display: grid;
   width: 1.35rem;
@@ -4264,6 +4289,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   border-radius: 999px;
   background: rgba(16, 15, 14, 0.78);
   color: #ffffff;
+  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
+  transform-origin: top right;
 }
 
 .image-canvas-editor__metadata-corner:hover {
@@ -4271,11 +4298,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__metadata-corner--beside-spec {
-  right: 3.95rem;
+  right: var(--image-canvas-editor-beside-kind-offset, 3.95rem);
 }
 
 .image-canvas-editor__metadata-corner--beside-kind {
-  right: 3.95rem;
+  right: var(--image-canvas-editor-beside-kind-offset, 3.95rem);
 }
 
 .image-canvas-editor__spec-badge {
@@ -4300,8 +4327,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .image-canvas-editor__kind-badge {
   position: absolute;
-  right: 0.38rem;
-  top: 0.38rem;
+  right: var(--image-canvas-editor-kind-offset, 0.38rem);
+  top: var(--image-canvas-editor-kind-offset, 0.38rem);
   z-index: 3;
   display: inline-flex;
   align-items: center;
@@ -4314,6 +4341,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   line-height: 1;
   letter-spacing: 0.04em;
   pointer-events: none;
+  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
+  transform-origin: top right;
 }
 
 .image-canvas-editor__kind-badge--spec {
@@ -4336,15 +4365,22 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 8px 18px rgba(13, 148, 136, 0.24);
 }
 
+.image-canvas-editor__kind-badge--ui-design {
+  background: rgba(245, 158, 11, 0.94);
+  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.24);
+}
+
 .image-canvas-editor__size-badge {
   position: absolute;
-  left: 0.35rem;
-  top: 0.35rem;
+  left: var(--image-canvas-editor-corner-offset, 0.35rem);
+  top: var(--image-canvas-editor-corner-offset, 0.35rem);
   z-index: 2;
   border-color: rgba(255, 255, 255, 0.16);
   background: rgba(16, 15, 14, 0.82);
   color: #ffffff;
   white-space: nowrap;
+  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
+  transform-origin: top left;
 }
 
 .image-canvas-editor__floating-toolbar {
@@ -4541,10 +4577,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   overflow: hidden;
   border: 1px solid #e2e8f0;
   border-radius: 0.58rem;
-  background:
-    linear-gradient(to top, #000000, transparent),
-    linear-gradient(to right, #ffffff, transparent),
-    #ef4444;
+  background: linear-gradient(to top, #000000, transparent),
+    linear-gradient(to right, #ffffff, transparent), #ef4444;
 }
 
 .image-canvas-editor__background-spectrum input,
@@ -4560,8 +4594,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 .image-canvas-editor__background-spectrum-surface {
   position: absolute;
   inset: 0;
-  background:
-    linear-gradient(to top, #000000, transparent),
+  background: linear-gradient(to top, #000000, transparent),
     linear-gradient(to right, #ffffff, transparent);
   pointer-events: none;
 }
@@ -4627,7 +4660,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   background: #e0f2fe;
 }
 
-.image-canvas-editor__background-preset .image-canvas-editor__background-swatch {
+.image-canvas-editor__background-preset
+  .image-canvas-editor__background-swatch {
   width: 1.55rem;
   height: 1.55rem;
   border-color: #e2e8f0;
@@ -4660,9 +4694,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   border: 0;
   background: transparent;
   color: #475569;
-  font-family:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-    'Courier New', monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
   font-size: 0.78rem;
   font-weight: 820;
   outline: none;
@@ -4745,60 +4778,84 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   display: grid;
   grid-template-columns: 3.8rem minmax(0, 1fr);
   grid-template-rows: minmax(5.9rem, auto) auto auto;
-  width: min(34rem, calc(100% - 1.5rem));
-  min-height: 11.2rem;
-  gap: 0.45rem 0.75rem;
-  border: 1px solid #cfd6df;
-  border-radius: 1.35rem;
-  background: #ffffff;
-  padding: 0.5rem 0.65rem 0.65rem;
+  width: min(38rem, calc(100% - 1.5rem));
+  min-height: 10.4rem;
+  gap: 0.38rem 0.72rem;
+  border: 1px solid rgba(15, 23, 42, 0.09);
+  border-radius: 1.45rem;
+  background: rgba(255, 255, 255, 0.97);
+  padding: 0.72rem 0.82rem 0.82rem;
   color: #1f2937;
-  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
+  font-size: 0.82rem;
+  box-shadow:
+    0 22px 60px rgba(15, 23, 42, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.94);
   transform: translateX(-50%);
+  backdrop-filter: blur(18px);
+}
+
+.image-canvas-editor__generation-composer--image {
+  grid-template-columns: 4rem minmax(0, 1fr);
+  grid-template-rows: auto auto auto;
+  width: min(42rem, calc(100% - 1.5rem));
+  gap: 0.18rem 0.72rem;
+}
+
+.image-canvas-editor__generation-composer--video {
+  grid-template-rows: auto auto auto;
+  gap: 0.18rem 0.72rem;
 }
 
 .image-canvas-editor__generation-ref {
-  display: grid;
-  width: 3.5rem;
-  height: 4.25rem;
-  place-items: center;
+  display: flex;
+  width: auto;
+  height: auto;
+  min-width: 0;
   align-self: start;
-  border: 0;
-  border-radius: 1rem;
-  background: #f2f2f2;
-  color: #a3a3a3;
-  font-size: 0.72rem;
-  font-weight: 760;
-  box-shadow: none;
+  grid-column: 1 / -1;
 }
 
 .image-canvas-editor__generation-ref span {
-  margin-top: -0.4rem;
+  margin-top: 0;
 }
 
 .image-canvas-editor__generation-prompt {
-  min-height: 5.8rem;
+  grid-column: 1 / -1;
+  min-height: 4.1rem;
   resize: none;
-  border: 0;
-  background: transparent;
-  padding: 1.2rem 0.2rem 0.2rem;
-  color: #1f2937;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 1.05rem;
+  background: #f8fafc;
+  padding: 0.64rem 0.9rem;
+  color: #0f172a;
   font: inherit;
-  font-size: 0.9rem;
-  font-weight: 720;
+  font-size: 0.88rem;
+  font-weight: 680;
+  line-height: 1.55;
   outline: none;
 }
 
 .image-canvas-editor__generation-prompt::placeholder {
-  color: #b5b5b5;
+  color: #94a3b8;
+}
+
+.image-canvas-editor__video-prompt {
+  grid-column: 1 / -1;
+  min-height: 4.1rem;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 1.05rem;
+  background: #f8fafc;
+  padding: 0.64rem 0.9rem;
 }
 
 .image-canvas-editor__generation-composer-footer {
   grid-column: 1 / -1;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.46rem;
+  border-top: 1px solid rgba(15, 23, 42, 0.06);
+  padding-top: 0.44rem;
 }
 
 .image-canvas-editor__generation-close {
@@ -4819,36 +4876,397 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .image-canvas-editor__generation-model {
   gap: 0.25rem;
-  max-width: 7.2rem;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.image-canvas-editor__generation-submit {
-  min-width: 3.55rem;
-  height: 2.55rem;
-  border: 0;
-  background: #f0f0f0;
-  color: #b6b6b6;
+.image-canvas-editor__inline-option-group {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.28rem;
+}
+
+.image-canvas-editor__reference-strip {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.4rem;
+  overflow-x: auto;
+  padding: 0.02rem 2.2rem 0.08rem 0;
+  scrollbar-width: thin;
+}
+
+.image-canvas-editor__reference-chip {
+  display: inline-flex;
+  min-width: 4.4rem;
+  max-width: 8.8rem;
+  height: 3.25rem;
+  align-items: center;
+  gap: 0.4rem;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 1rem;
+  background: #f8fafc;
+  padding: 0.32rem 0.52rem 0.32rem 0.36rem;
+  color: #475569;
+  font-size: 0.72rem;
+  font-weight: 780;
+  text-align: left;
+  box-shadow: none;
+}
+
+.image-canvas-editor__reference-chip-icon {
+  display: grid;
+  width: 2.28rem;
+  height: 2.28rem;
+  flex: 0 0 auto;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 0.78rem;
+  background: rgba(148, 163, 184, 0.13);
+}
+
+.image-canvas-editor__reference-chip-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.image-canvas-editor__reference-chip-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__reference-chip--spec
+  .image-canvas-editor__reference-chip-icon {
+  background: rgba(147, 51, 234, 0.12);
+  color: #7e22ce;
+}
+
+.image-canvas-editor__reference-chip--icon
+  .image-canvas-editor__reference-chip-icon {
+  background: rgba(16, 185, 129, 0.13);
+  color: #059669;
+}
+
+.image-canvas-editor__reference-chip--ui
+  .image-canvas-editor__reference-chip-icon {
+  background: rgba(245, 158, 11, 0.15);
+  color: #d97706;
+}
+
+.image-canvas-editor__reference-chip--character
+  .image-canvas-editor__reference-chip-icon {
+  background: rgba(15, 23, 42, 0.08);
+  color: #0f172a;
+}
+
+.image-canvas-editor__option-picker {
+  width: 100%;
+  min-height: 2rem;
+  justify-content: space-between;
+  border: 1px solid transparent;
+  border-radius: 0.85rem;
+  background: transparent;
+  padding: 0 0.6rem;
+  color: #0f172a;
+  box-shadow: none;
+}
+
+.image-canvas-editor__option-cluster {
+  min-height: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: transparent;
+  padding: 0 0.72rem;
+  color: #0f172a;
+  box-shadow: none;
+}
+
+.image-canvas-editor__option-cluster:hover:not(:disabled),
+.image-canvas-editor__option-cluster[aria-expanded='true'] {
+  border-color: rgba(15, 23, 42, 0.08);
+  background: #f8fafc;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
+
+.image-canvas-editor__option-cluster .platform-inline-option-button__trailing {
+  transition: transform 160ms ease;
+}
+
+.image-canvas-editor__option-cluster[aria-expanded='true']
+  .platform-inline-option-button__trailing {
+  transform: rotate(180deg);
+}
+
+.image-canvas-editor__option-cluster--dimensions {
+  justify-self: start;
+  gap: 0.42rem;
+}
+
+.image-canvas-editor__option-cluster--dimensions span {
+  font-variant-numeric: tabular-nums;
+}
+
+.image-canvas-editor__option-cluster--model {
+  grid-column: 3;
+  max-width: min(15.5rem, 32vw);
+  justify-self: end;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__model-trigger-label {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  align-items: center;
+  gap: 0.32rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__model-trigger-label svg,
+.image-canvas-editor__model-icon svg {
+  width: 0.88rem;
+  height: 0.88rem;
+}
+
+.image-canvas-editor__model-trigger-label span:last-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__model-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  color: #334155;
+}
+
+.image-canvas-editor__option-popover {
+  min-width: 16rem;
+  max-width: min(23rem, calc(100vw - 1.5rem));
+  border-radius: 1.05rem;
+  padding: 0.95rem;
   font-size: 0.82rem;
-  font-weight: 800;
+}
+
+.image-canvas-editor__option-popover-sections {
+  display: grid;
+  gap: 1rem;
+}
+
+.image-canvas-editor__option-popover-section {
+  display: grid;
+  gap: 0.58rem;
+}
+
+.image-canvas-editor__option-popover-title {
+  color: #2f2f35;
+  font-size: 0.82rem;
+  font-weight: 760;
+}
+
+.image-canvas-editor__option-popover-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.46rem;
+}
+
+.image-canvas-editor__option-popover-items--card {
+  gap: 0.62rem;
+}
+
+.image-canvas-editor__option-popover:has(
+    .image-canvas-editor__option-popover-choice--model
+  ) {
+  min-width: 13.5rem;
+}
+
+.image-canvas-editor__option-popover-choice {
+  display: inline-flex;
+  min-width: 4.5rem;
+  min-height: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  border-radius: 999px;
+  background: #ffffff;
+  padding: 0 0.85rem;
+  color: #111827;
+  font-size: 0.82rem;
+  font-weight: 720;
+}
+
+.image-canvas-editor__option-popover-items--card
+  .image-canvas-editor__option-popover-choice {
+  min-width: 5.25rem;
+  min-height: 4.6rem;
+  border-radius: 1rem;
+  font-size: 0.82rem;
+}
+
+.image-canvas-editor__option-popover-choice[aria-pressed='true'] {
+  border-color: #202124;
+  box-shadow: inset 0 0 0 1px #202124;
+}
+
+.image-canvas-editor__option-popover-choice--model {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 1rem minmax(0, 1fr) 1rem;
+  justify-content: stretch;
+  column-gap: 0.44rem;
+  border-color: transparent;
+  background: transparent;
+  padding: 0.18rem 0.2rem;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__option-popover-choice--model span:nth-child(2) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__option-popover-choice--model
+  .image-canvas-editor__model-icon {
+  justify-self: start;
+}
+
+.image-canvas-editor__option-popover-choice--model[aria-pressed='true'] {
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.image-canvas-editor__option-popover-choice--model:hover {
+  background: #f8fafc;
+}
+
+.image-canvas-editor__option-selected-check {
+  width: 0.92rem;
+  height: 0.92rem;
+  justify-self: end;
+  color: #111827;
+  stroke-width: 3;
+}
+
+.image-canvas-editor__option-popover-choice--ratio {
+  flex-direction: column;
+  gap: 0.42rem;
+}
+
+.image-canvas-editor__ratio-wireframe {
+  display: block;
+  width: 1.65rem;
+  height: 1.08rem;
+  border: 2px solid currentColor;
+  border-radius: 0.24rem;
+}
+
+.image-canvas-editor__ratio-wireframe[data-ratio='9:16'] {
+  width: 1.02rem;
+  height: 1.74rem;
+}
+
+.image-canvas-editor__ratio-wireframe[data-ratio='3:4'],
+.image-canvas-editor__ratio-wireframe[data-ratio='2:3'] {
+  width: 1.12rem;
+  height: 1.58rem;
+}
+
+.image-canvas-editor__ratio-wireframe[data-ratio='4:3'],
+.image-canvas-editor__ratio-wireframe[data-ratio='3:2'] {
+  width: 1.74rem;
+  height: 1.16rem;
+}
+
+.image-canvas-editor__ratio-wireframe[data-ratio='1:1'] {
+  width: 1.36rem;
+  height: 1.36rem;
+}
+
+.image-canvas-editor__mud-point-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.18rem;
+  color: currentColor;
+  font-size: 0.74rem;
+  font-weight: 850;
+  line-height: 1;
+}
+
+.image-canvas-editor__generation-composer .image-canvas-editor__option-field {
+  min-width: 0;
+}
+
+.image-canvas-editor__generation-composer .image-canvas-editor__field-title {
+  color: #94a3b8;
+  font-size: 0.66rem;
+  font-weight: 760;
+  letter-spacing: 0.06em;
+}
+
+.image-canvas-editor__generation-composer .platform-inline-option-button {
+  min-height: 2.25rem;
+  border-color: transparent;
+  background: transparent;
+  color: #475569;
+  font-size: 0.82rem;
+  font-weight: 760;
+  box-shadow: none;
+}
+
+.image-canvas-editor__generation-composer
+  .platform-inline-option-button[aria-pressed='true'] {
+  border-color: rgba(15, 23, 42, 0.14);
+  background: #0f172a;
+  color: #ffffff;
+}
+
+.image-canvas-editor__generation-submit {
+  grid-column: 4;
+  min-width: 5.45rem;
+  height: 2.25rem;
+  gap: 0.4rem;
+  border: 0;
+  background: #0f172a;
+  color: #ffffff;
+  font-size: 0.82rem;
+  font-weight: 820;
 }
 
 .image-canvas-editor__generation-submit:not(:disabled) {
-  color: #7f7f7f;
+  color: #ffffff;
 }
 
 .image-canvas-editor__generation-submit:disabled {
   cursor: wait;
+  background: #e2e8f0;
+  color: #94a3b8;
 }
 
 .image-canvas-editor__generation-close {
   position: absolute;
-  right: 0.6rem;
-  top: 0.55rem;
+  right: 0.62rem;
+  top: 0.58rem;
   width: 2rem;
   height: 2rem;
+  color: #94a3b8;
 }
 
 .image-canvas-editor__generation-composer
@@ -5357,35 +5775,28 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 .image-canvas-editor__spec-composer {
   grid-template-columns: minmax(0, 1fr);
   min-height: 0;
-  width: min(28rem, calc(100% - 1.5rem));
-  padding: 0.72rem;
+}
+
+.image-canvas-editor__spec-composer.image-canvas-editor__generation-composer--image {
+  grid-template-rows: auto auto auto;
 }
 
 .image-canvas-editor__spec-fields {
+  grid-column: 1 / -1;
   display: grid;
-  gap: 0.5rem;
+  gap: 0.38rem;
 }
 
 .image-canvas-editor__spec-input {
-  min-height: 2.45rem;
+  min-height: 2.16rem;
 }
 
 .image-canvas-editor__spec-textarea {
-  min-height: 5.4rem;
+  min-height: 4.55rem;
 }
 
 .image-canvas-editor__spec-textarea--view {
-  min-height: 4.3rem;
-}
-
-.image-canvas-editor__spec-footer {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.image-canvas-editor__spec-submit {
-  min-width: 7.8rem;
-  color: #5f4b00;
+  min-height: 3.55rem;
 }
 
 .image-canvas-editor__context-menu {
@@ -5527,6 +5938,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   border-radius: 1.1rem;
   background: rgba(255, 255, 255, 0.96);
   padding: 0.76rem;
+  font-size: 0.82rem;
   box-shadow: 0 22px 48px rgba(15, 23, 42, 0.22);
 }
 
@@ -5558,36 +5970,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   font-size: 0.78rem;
 }
 
-.image-canvas-editor__character-animation-grid {
+.image-canvas-editor__character-animation-footer {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
   gap: 0.46rem;
 }
 
-.image-canvas-editor__character-animation-summary {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.7rem;
-  border-radius: 0.82rem;
-  background: #f8fafc;
-  padding: 0.48rem 0.64rem;
-  color: #475569;
-  font-size: 0.78rem;
-  font-weight: 850;
-}
-
-.image-canvas-editor__character-animation-summary-text {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .image-canvas-editor__character-animation-submit {
-  justify-self: end;
-  min-width: 6.8rem;
+  grid-column: 3;
+  min-width: 5.45rem;
+  height: 2.25rem;
+  gap: 0.4rem;
+  border: 0;
+  background: #0f172a;
+  color: #ffffff;
 }
 
 .image-canvas-editor__snap-guide {
@@ -5789,6 +6186,39 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
     transform: none;
   }
 
+  .image-canvas-editor__generation-composer {
+    position: fixed;
+    left: 0.75rem !important;
+    right: 0.75rem;
+    top: auto !important;
+    bottom: 3.85rem;
+    width: auto;
+    max-height: min(72vh, 31rem);
+    grid-template-columns: 3.55rem minmax(0, 1fr);
+    overflow: auto;
+    transform: none;
+  }
+
+  .image-canvas-editor__generation-composer-footer,
+  .image-canvas-editor__character-animation-footer {
+    grid-template-columns: minmax(0, 1fr);
+    align-items: stretch;
+  }
+
+  .image-canvas-editor__option-cluster--dimensions,
+  .image-canvas-editor__option-cluster--model,
+  .image-canvas-editor__generation-submit,
+  .image-canvas-editor__character-animation-submit {
+    grid-column: auto;
+    width: 100%;
+    max-width: none;
+    justify-self: stretch;
+  }
+
+  .image-canvas-editor__generation-submit {
+    width: 100%;
+  }
+
   .image-canvas-editor__character-composer {
     position: fixed;
     left: 0.75rem !important;
@@ -5841,10 +6271,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
     border-radius: 0.9rem;
   }
 
-  .image-canvas-editor__character-animation-grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
   .image-canvas-editor__main {
     min-height: 0;
     flex: 1;
@@ -12998,3 +13424,18 @@ button {
   color: #1f2937 !important;
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18) !important;
 }
+
+.image-canvas-editor__generation-composer .image-canvas-editor__option-cluster {
+  min-height: 2.25rem;
+  background: transparent;
+  border-color: transparent;
+}
+
+.image-canvas-editor__generation-composer
+  .image-canvas-editor__option-cluster:hover:not(:disabled),
+.image-canvas-editor__generation-composer
+  .image-canvas-editor__option-cluster[aria-expanded='true'] {
+  border-color: rgba(15, 23, 42, 0.08);
+  background: #f8fafc;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index 9e56d01d..de787e19 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -12,6 +12,7 @@ import {
   generateEditorCharacterAnimation,
   generateEditorIconSpritesheet,
   generateEditorImage,
+  generateEditorVideo,
   listEditorProjects,
   loadEditorAssetLibrary,
   loadEditorProject,
@@ -760,6 +761,58 @@ describe('editorProjectClient', () => {
     );
   });
 
+  it('generates editor videos through the backend BFF', async () => {
+    requestJsonMock.mockResolvedValueOnce({
+      videoSrc: '/generated-editor-videos/video-task-1/preview.mp4',
+      width: 1280,
+      height: 720,
+      sourceType: 'generated',
+      prompt: '让角色向镜头挥手',
+      actualPrompt: '让角色向镜头挥手',
+      model: 'kling3.0-omni',
+      provider: 'VectorEngine',
+      taskId: 'video-task-1',
+      durationSeconds: 5,
+      resolution: '480p',
+      priceMudPoints: 50,
+    });
+
+    const result = await generateEditorVideo({
+      prompt: '让角色向镜头挥手',
+      model: 'kling3.0-omni',
+      aspectRatio: '16:9',
+      durationSeconds: 5,
+      resolution: '480p',
+      mode: 'std',
+      sound: 'off',
+      priceMudPoints: 50,
+    });
+
+    expect(result.taskId).toBe('video-task-1');
+    expect(requestJsonMock).toHaveBeenCalledWith(
+      '/api/editor/videos/generations',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          prompt: '让角色向镜头挥手',
+          model: 'kling3.0-omni',
+          aspectRatio: '16:9',
+          durationSeconds: 5,
+          resolution: '480p',
+          mode: 'std',
+          sound: 'off',
+          priceMudPoints: 50,
+        }),
+      }),
+      '生成视频失败',
+      expect.objectContaining({
+        timeoutMs: 1_200_000,
+        retry: { maxRetries: 0 },
+      }),
+    );
+  });
+
   it('edits editor images through the backend BFF', async () => {
     requestJsonMock.mockResolvedValueOnce({
       imageSrc: 'data:image/png;base64,edited',
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index 5a7fc6c7..985bfdfb 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -8,6 +8,7 @@ const EDITOR_ICON_SPRITESHEET_GENERATION_API =
   '/api/editor/icon-spritesheets/generations';
 const EDITOR_CHARACTER_ANIMATION_GENERATION_API =
   '/api/editor/character-animations/generations';
+const EDITOR_VIDEO_GENERATION_API = '/api/editor/videos/generations';
 const EDITOR_IMAGE_MODEL_NANOBANANA2 = 'gemini-3.1-flash-image-preview';
 const DEFAULT_PROJECT_TITLE = '未命名画布';
 
@@ -83,7 +84,7 @@ export type EditorAssetLibrarySnapshot = {
 export type EditorImageGenerationInput = {
   prompt: string;
   size?: string;
-  kind?: 'spec' | 'character' | 'quick-edit';
+  kind?: 'spec' | 'character' | 'quick-edit' | 'ui-design';
   model?: string;
   aspectRatio?: string;
   imageSize?: string;
@@ -185,6 +186,38 @@ export type EditorCharacterAnimationGenerationResult = {
   priceMudPoints: number;
 };
 
+export type EditorVideoModel =
+  | 'seedance2.0'
+  | 'seedance2.0-fast'
+  | 'kling3.0'
+  | 'kling3.0-omni'
+  | 'veo3.1'
+  | 'veo3.1-fast';
+
+export type EditorVideoGenerationInput = {
+  prompt: string;
+  model: EditorVideoModel;
+  aspectRatio: '16:9';
+  durationSeconds: 4 | 5;
+  resolution: '480p' | '720p';
+  mode: 'std';
+  sound: 'off';
+  priceMudPoints: number;
+};
+
+export type EditorVideoGenerationResult = {
+  videoSrc: string;
+  width: number;
+  height: number;
+  sourceType: 'generated';
+  prompt: string;
+  actualPrompt?: string | null;
+  model: string;
+  provider: string;
+  taskId: string;
+  priceMudPoints?: number;
+};
+
 export type EditorProjectSnapshot = {
   projectId: string;
   title: string;
@@ -281,6 +314,7 @@ type EditorAssetResponse = {
 type EditorImageGenerationResponse = EditorImageGenerationResult;
 type EditorIconSpritesheetGenerationResponse =
   EditorIconSpritesheetGenerationResult;
+type EditorVideoGenerationResponse = EditorVideoGenerationResult;
 
 function jsonRequest(method: 'POST' | 'PATCH', body: Record<string, unknown>) {
   return {
@@ -534,3 +568,17 @@ export async function generateEditorCharacterAnimation(
     },
   );
 }
+
+export async function generateEditorVideo(input: EditorVideoGenerationInput) {
+  return requestJson<EditorVideoGenerationResponse>(
+    EDITOR_VIDEO_GENERATION_API,
+    jsonRequest('POST', input),
+    '生成视频失败',
+    {
+      timeoutMs: 1_200_000,
+      retry: {
+        maxRetries: 0,
+      },
+    },
+  );
+}