diff --git a/spx-gui/.github/instructions/vue-coding.instructions.md b/spx-gui/.github/instructions/vue-coding.instructions.md
index 8afd891f4..8c5b95d77 100644
--- a/spx-gui/.github/instructions/vue-coding.instructions.md
+++ b/spx-gui/.github/instructions/vue-coding.instructions.md
@@ -7,3 +7,4 @@ Apply the [general coding guidelines](./general-coding.instructions.md) to all c
 Here are instructions for Vue Component development in spx-gui:
 
 * Generate accessibility info for interactive elements using `v-radar` directive.
+* Check `src/components/ui/tokens/` for all design tokens, they can be used as CSS variables. For example: `--ui-gap-middle`, `--ui-color-primary`.
diff --git a/spx-gui/src/apis/asset.ts b/spx-gui/src/apis/asset.ts
index bc61984db..19437c16f 100644
--- a/spx-gui/src/apis/asset.ts
+++ b/spx-gui/src/apis/asset.ts
@@ -1,5 +1,6 @@
 import type { FileCollection, ByPage, PaginationParams } from './common'
 import { client, Visibility } from './common'
+import type { ProjectSettings } from './project'
 
 export { Visibility }
 
@@ -9,6 +10,8 @@ export enum AssetType {
   Sound = 'sound'
 }
 
+export type AssetSettings = ProjectSettings
+
 export type AssetData = {
   /** Unique identifier */
   id: string
diff --git a/spx-gui/src/apis/assets-gen/index.ts b/spx-gui/src/apis/assets-gen/index.ts
new file mode 100644
index 000000000..e55097e2e
--- /dev/null
+++ b/spx-gui/src/apis/assets-gen/index.ts
@@ -0,0 +1,487 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { AssetType } from '@/apis/asset'
+import type { AssetSettings } from '@/models/common/asset'
+import { timeout } from '@/utils/utils'
+
+// Mock data imports
+import defaultCostumeUrl from './mockdata/balrog/default_costume.png'
+import idleFrameUrl from './mockdata/balrog/idle_frame.png'
+import walkFrameUrl from './mockdata/balrog/walk_frame.png'
+import attackStartUrl from './mockdata/balrog/attack_start.png'
+import attackEndUrl from './mockdata/balrog/attack_end.png'
+import idleVideoUrl from './mockdata/balrog/idle.mp4'
+import walkVideoUrl from './mockdata/balrog/walk.mp4'
+import attackVideoUrl from './mockdata/balrog/attack.mp4'
+import soundUrl from './mockdata/sound.mp3'
+import backdropUrl from './mockdata/backdrop.png'
+
+/**
+ * Base settings type that can be enriched
+ */
+export type BaseSettings = Partial<AssetSettings>
+
+/**
+ * Settings specific to sprite generation
+ */
+export type SpriteSettings = AssetSettings & {
+  name?: string
+}
+
+/**
+ * Settings specific to costume generation
+ */
+export type CostumeSettings = AssetSettings & {
+  spriteName?: string
+  name?: string
+}
+
+/**
+ * Settings specific to animation generation
+ */
+export type AnimationSettings = AssetSettings & {
+  spriteName?: string
+  name?: string
+}
+
+/**
+ * Settings specific to backdrop generation
+ */
+export type BackdropSettings = AssetSettings & {
+  name?: string
+}
+
+/**
+ * Settings specific to sound generation
+ */
+export type SoundSettings = AssetSettings & {
+  name?: string
+  duration?: number
+}
+
+/**
+ * Union type for all settings
+ */
+export type Settings = SpriteSettings | CostumeSettings | AnimationSettings | BackdropSettings | SoundSettings
+
+/**
+ * Enriches initial settings with AI-generated details based on asset type
+ * @param initialSettings Partial settings to enrich
+ * @param assetType Type of asset being generated
+ * @returns Promise resolving to enriched settings
+ */
+export async function enrichSettings(
+  initialSettings: BaseSettings,
+  assetType: AssetType | 'costume' | 'animation'
+): Promise<Settings> {
+  // Simulate AI processing delay
+  await timeout(800)
+
+  const baseEnriched: AssetSettings = {
+    ...initialSettings,
+    description: null,
+    projectDescription: null,
+    artStyle: initialSettings.artStyle ?? 'pixel-art',
+    perspective: initialSettings.perspective ?? 'side-view',
+    category: null
+  }
+
+  switch (assetType) {
+    case AssetType.Sprite:
+      return {
+        ...baseEnriched,
+        name: '炎魔',
+        description:
+          initialSettings.description +
+          '一个由深灰色像素块组成的高大魁梧身影。肌肉发达的躯干和四肢上布满了橙黄色余烬般的发光裂纹。',
+        category: 'character'
+      } satisfies SpriteSettings
+
+    case 'costume':
+      return {
+        ...baseEnriched,
+        name: '战士装扮',
+        description:
+          initialSettings.description + '一套像素风格的角色服装，具有精细的细节和鲜艳的色彩'
+      } satisfies CostumeSettings
+
+    case 'animation':
+      return {
+        ...baseEnriched,
+        name: '行走循环',
+        description:
+          initialSettings.description + '一段流畅的动画序列，展示角色的自然移动'
+      } satisfies AnimationSettings
+
+    case AssetType.Backdrop:
+      return {
+        ...baseEnriched,
+        name: '森林空地',
+        description: initialSettings.description + '一幅精细的像素风格背景场景，具有丰富的氛围元素',
+        category: 'scene'
+      } satisfies BackdropSettings
+
+    case AssetType.Sound:
+      return {
+        ...baseEnriched,
+        name: '风声呼啸',
+        description: initialSettings.description + '一段清晰的氛围音效',
+        duration: 3,
+        category: 'effect'
+      } satisfies SoundSettings
+
+    default:
+      throw new Error(`Unknown asset type: ${assetType}`)
+  }
+}
+
+export type AnimationDescription = {
+  name: string
+  description: string
+}
+
+/**
+ * Description for a costume to be generated
+ */
+export type CostumeDescription = {
+  name: string
+  description: string
+}
+
+/**
+ * Sprite content descriptions including costumes and animations
+ */
+export type SpriteContentDescriptions = {
+  costumes: CostumeDescription[]
+  animations: AnimationDescription[]
+}
+
+/**
+ * Generates costume and animation descriptions for a sprite
+ * @param settings Sprite settings
+ * @returns Promise resolving to costume and animation descriptions
+ */
+export async function generateSpriteContentDescriptions(_settings: SpriteSettings): Promise<SpriteContentDescriptions> {
+  // Simulate AI processing delay
+  await timeout(1500)
+
+  // Return mock descriptions based on Balrog example
+  return {
+    costumes: [
+      {
+        name: '默认',
+        description: '默认站立姿势，身体上可见发光的余烬裂纹'
+      }
+    ],
+    animations: [
+      {
+        name: '待机',
+        description:
+          '角色静止站立，有轻微的呼吸动画，身体上的余烬轻轻闪烁'
+      },
+      {
+        name: '行走',
+        description: '角色向前迈着有力的步伐，身体随着每一步轻轻摇摆'
+      },
+      {
+        name: '攻击',
+        description: '角色猛然向前冲刺，释放出强力的攻击动作'
+      }
+    ]
+  }
+}
+
+/**
+ * Generates animation type descriptions based on sprite settings
+ * @param settings Sprite settings
+ * @returns Promise resolving to array of animation descriptions
+ */
+export async function generateAnimationDescriptions(_settings: SpriteSettings): Promise<AnimationDescription[]> {
+  // Simulate AI processing delay
+  await timeout(1000)
+
+  // Return mock animation descriptions based on Balrog example
+  return [
+    {
+      name: '待机',
+      description:
+        '角色静止站立，有轻微的呼吸动画，身体上的余烬轻轻闪烁'
+    },
+    { name: '行走', description: '角色向前迈着有力的步伐，身体随着每一步轻轻摇摆' },
+    {
+      name: '攻击',
+      description: '角色猛然向前冲刺，释放出强力的攻击动作'
+    }
+  ]
+}
+
+/**
+ * Generates a single costume image based on settings
+ * @param settings Costume settings
+ * @returns Promise resolving to image URL
+ */
+export async function generateCostumeImage(_settings: CostumeSettings): Promise<string> {
+  // Simulate image generation delay
+  await timeout(2000)
+
+  // Return mock costume image from balrog mockdata
+  return defaultCostumeUrl
+}
+
+/**
+ * Modifies an existing costume image based on user instructions
+ * @param imageUrl URL of the existing image
+ * @param instruction User's modification instructions
+ * @param settings Current costume settings
+ * @returns Promise resolving to modified image URL
+ */
+export async function modifyCostumeImage(
+  _imageUrl: string,
+  _instruction: string,
+  _settings: CostumeSettings
+): Promise<string> {
+  // Simulate image modification delay
+  await timeout(2000)
+
+  // Return mock modified image (in reality, this would call an AI service)
+  return defaultCostumeUrl
+}
+
+/**
+ * Generates a reference frame image for an animation based on a costume reference
+ * @param settings Animation settings
+ * @param referenceImageUrl URL of the reference costume image
+ * @returns Promise resolving to frame image URL
+ */
+export async function generateAnimationFrame(
+  _settings: AnimationSettings,
+  _referenceImageUrl: string
+): Promise<string> {
+  // Simulate frame generation delay
+  await timeout(2000)
+
+  // Return mock frame image
+  return idleFrameUrl
+}
+
+/**
+ * Modifies an existing animation frame image based on user instructions
+ * @param imageUrl URL of the existing image
+ * @param instruction User's modification instructions
+ * @param settings Current animation settings
+ * @returns Promise resolving to modified image URL
+ */
+export async function modifyAnimationFrame(
+  _imageUrl: string,
+  _instruction: string,
+  _settings: AnimationSettings
+): Promise<string> {
+  // Simulate image modification delay
+  await timeout(2000)
+
+  // Return mock modified image
+  return idleFrameUrl
+}
+
+/**
+ * Generates start and end frame images for an animation
+ * @param settings Animation settings
+ * @returns Promise resolving to start and end frame URLs
+ */
+export async function generateAnimationFrames(settings: AnimationSettings): Promise<{
+  startFrameUrl: string
+  endFrameUrl: string
+}> {
+  // Simulate frame generation delay
+  await timeout(2500)
+
+  const animType = settings.name?.toLowerCase() || 'idle'
+
+  // Return appropriate mock frames based on animation type
+  const frameMap: Record<string, { start: string; end: string }> = {
+    idle: {
+      start: idleFrameUrl,
+      end: idleFrameUrl
+    },
+    walk: {
+      start: walkFrameUrl,
+      end: walkFrameUrl
+    },
+    attack: {
+      start: attackStartUrl,
+      end: attackEndUrl
+    }
+  }
+
+  const frames = frameMap[animType] || frameMap.idle
+
+  return {
+    startFrameUrl: frames.start,
+    endFrameUrl: frames.end
+  }
+}
+
+/**
+ * Task status for video generation
+ */
+export type VideoTaskStatus = {
+  status: 'pending' | 'processing' | 'completed' | 'failed'
+  /** Result video URL, only available when status is 'completed' */
+  resultUrl?: string
+  /** Error message, only available when status is 'failed' */
+  error?: string
+}
+
+// Mock task storage for simulating async video generation
+const mockVideoTasks = new Map<
+  string,
+  {
+    status: VideoTaskStatus['status']
+    resultUrl?: string
+    createdAt: number
+    settings: AnimationSettings
+  }
+>()
+
+// Video generation takes 30 seconds in mock
+const VIDEO_GENERATION_DURATION = 30_000
+
+/**
+ * Submits an animation video generation task
+ * @param settings Animation settings
+ * @param referenceFrameUrl URL of the reference frame
+ * @returns Promise resolving to task ID
+ */
+export async function submitAnimationVideoTask(
+  settings: AnimationSettings,
+  _referenceFrameUrl: string
+): Promise<string> {
+  // Simulate network delay for task submission
+  await timeout(500)
+
+  // Generate a mock task ID
+  const taskId = `video-task-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+
+  // Store the task
+  mockVideoTasks.set(taskId, {
+    status: 'processing',
+    createdAt: Date.now(),
+    settings
+  })
+
+  return taskId
+}
+
+/**
+ * Gets the status of an animation video generation task
+ * @param taskId The task ID returned from submitAnimationVideoTask
+ * @returns Promise resolving to task status
+ */
+export async function getAnimationVideoTaskStatus(taskId: string): Promise<VideoTaskStatus> {
+  // Simulate network delay
+  await timeout(200)
+
+  const task = mockVideoTasks.get(taskId)
+  if (task == null) {
+    return {
+      status: 'failed',
+      error: 'Task not found'
+    }
+  }
+
+  // Check if the task has been processing long enough
+  const elapsed = Date.now() - task.createdAt
+  if (elapsed >= VIDEO_GENERATION_DURATION && task.status === 'processing') {
+    // Task is complete, determine the result URL
+    const animType = task.settings.name?.toLowerCase() || 'idle'
+    const videoMap: Record<string, string> = {
+      idle: idleVideoUrl,
+      walk: walkVideoUrl,
+      attack: attackVideoUrl
+    }
+    const resultUrl = videoMap[animType] || videoMap.idle
+
+    // Update task status
+    task.status = 'completed'
+    task.resultUrl = resultUrl
+  }
+
+  return {
+    status: task.status,
+    resultUrl: task.resultUrl
+  }
+}
+
+/**
+ * Extracts frames from a video at specified intervals
+ * @param videoUrl URL of the video
+ * @param interval Interval between frames in milliseconds
+ * @returns Promise resolving to array of frame URLs
+ */
+export async function getFramesFromVideo(videoUrl: string, _interval: number = 100): Promise<string[]> {
+  // Simulate frame extraction delay
+  await timeout(1500)
+
+  // Determine which animation type based on video URL
+  const animType = videoUrl.includes('walk')
+    ? 'walk'
+    : videoUrl.includes('attack')
+      ? 'attack'
+      : videoUrl.includes('idle')
+        ? 'idle'
+        : 'idle'
+
+  // Return mock frames from appropriate directory
+  // Note: In production, these would be dynamically loaded from the video
+  const frameCount = 7
+
+  const framePromises = Array.from({ length: frameCount }, async (_, i) => {
+    const frameNum = String(i).padStart(4, '0')
+    const frameModule = await import(`./mockdata/balrog/${animType}_frames/${animType}_${frameNum}.png`)
+    return frameModule.default
+  })
+
+  return Promise.all(framePromises)
+}
+
+/**
+ * Generates a backdrop image based on settings
+ * @param settings Backdrop settings
+ * @returns Promise resolving to image URL
+ */
+export async function generateBackdropImage(_settings: BackdropSettings): Promise<string> {
+  // Simulate image generation delay
+  await timeout(2000)
+
+  return backdropUrl
+}
+
+/**
+ * Modifies an existing backdrop image based on user instructions
+ * @param imageUrl URL of the existing image
+ * @param instruction User's modification instructions
+ * @param settings Current backdrop settings
+ * @returns Promise resolving to modified image URL
+ */
+export async function modifyBackdropImage(
+  _imageUrl: string,
+  _instruction: string,
+  _settings: BackdropSettings
+): Promise<string> {
+  // Simulate image modification delay
+  await timeout(2000)
+
+  return backdropUrl
+}
+
+/**
+ * Generates sound audio based on settings
+ * @param settings Sound settings
+ * @returns Promise resolving to audio URL
+ */
+export async function generateSoundAudio(_settings: SoundSettings): Promise<string> {
+  // Simulate audio generation delay
+  await timeout(2000)
+
+  // Return mock sound file
+  return soundUrl
+}
diff --git a/spx-gui/src/apis/assets-gen/mockdata/backdrop.png b/spx-gui/src/apis/assets-gen/mockdata/backdrop.png
new file mode 100644
index 000000000..fae6c723a
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/backdrop.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/attack.mp4 b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack.mp4
new file mode 100644
index 000000000..67d0175cb
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack.mp4 differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_end.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_end.png
new file mode 100644
index 000000000..69b6bf53c
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_end.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_end_prompt.txt b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_end_prompt.txt
new file mode 100644
index 000000000..ffd6df676
--- /dev/null
+++ b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_end_prompt.txt
@@ -0,0 +1 @@
+Ending frame of an attack animation. Balrog in a powerful, recoiling pose after its whip strike, feet planted wide. Perfect right side view. The figure is composed of dark, charcoal-gray pixel clusters with glowing orange cracks. It has massive horns, tattered fiery wings, and holds a smoldering whip. Face is a shadow with two piercing white-hot eyes. Empty white background, no ground or shadows.
\ No newline at end of file
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0000.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0000.png
new file mode 100644
index 000000000..50a81f1e2
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0000.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0001.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0001.png
new file mode 100644
index 000000000..35f5763f9
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0001.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0002.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0002.png
new file mode 100644
index 000000000..fd70fdf70
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0002.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0003.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0003.png
new file mode 100644
index 000000000..5dee49058
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0003.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0004.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0004.png
new file mode 100644
index 000000000..be906cf84
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0004.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0005.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0005.png
new file mode 100644
index 000000000..6fa6ba7b8
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0005.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0006.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0006.png
new file mode 100644
index 000000000..0d043b325
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_frames/attack_0006.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_start.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_start.png
new file mode 100644
index 000000000..d4c407adb
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_start.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_start_prompt.txt b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_start_prompt.txt
new file mode 100644
index 000000000..f59eadc21
--- /dev/null
+++ b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_start_prompt.txt
@@ -0,0 +1 @@
+A towering Balrog in a perfect right side view. Its muscular pixel-art form is coiled in a starting stance, one arm drawn back holding a smoldering fiery whip. Glowing embers pulse across its dark torso, and its tattered wings are slightly unfurled. Empty white background.
\ No newline at end of file
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_video_prompt.txt b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_video_prompt.txt
new file mode 100644
index 000000000..08d9482f3
--- /dev/null
+++ b/spx-gui/src/apis/assets-gen/mockdata/balrog/attack_video_prompt.txt
@@ -0,0 +1 @@
+A towering, pixel-art Balrog of Moria stands tall in a white void. It roars, a wave of fiery energy pulsing from its core, causing the embers on its body to flare brightly. It leans forward aggressively, then charges across the empty space with powerful, ground-shaking strides, its tattered wings stretching wide. It violently cracks its long, fiery whip, sending a ripple of orange and yellow pixels snapping through the air. The creature continues its relentless charge towards the viewer, its piercing white eyes fixed ahead, before it unleashes a final, immense roar, engulfing the screen in fire and smoke.
\ No newline at end of file
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/default_costume.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/default_costume.png
new file mode 100644
index 000000000..2f9fe9ddf
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/default_costume.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/idle.mp4 b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle.mp4
new file mode 100644
index 000000000..1b115c308
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle.mp4 differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frame.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frame.png
new file mode 100644
index 000000000..f2cfe2f83
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frame.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frame_prompt.txt b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frame_prompt.txt
new file mode 100644
index 000000000..bddcace89
--- /dev/null
+++ b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frame_prompt.txt
@@ -0,0 +1 @@
+Perfect right side view of a towering pixel-art Balrog in a classic idle stance, standing broad-shouldered with its head slightly forward. Its massive, bat-like wings are half-furled at its back, and it holds a smoldering whip loosely coiled at its side. Glowing embers crackle across its dark, muscular form. Isolated on a plain white background.
\ No newline at end of file
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0000.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0000.png
new file mode 100644
index 000000000..0c3854e00
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0000.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0001.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0001.png
new file mode 100644
index 000000000..2b88ccfca
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0001.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0002.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0002.png
new file mode 100644
index 000000000..302fccc1e
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0002.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0003.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0003.png
new file mode 100644
index 000000000..ac9117f5b
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0003.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0004.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0004.png
new file mode 100644
index 000000000..427292613
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0004.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0005.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0005.png
new file mode 100644
index 000000000..8c0539fd8
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0005.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0006.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0006.png
new file mode 100644
index 000000000..3ebeec820
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_frames/idle_0006.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_video_prompt.txt b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_video_prompt.txt
new file mode 100644
index 000000000..7743f1daa
--- /dev/null
+++ b/spx-gui/src/apis/assets-gen/mockdata/balrog/idle_video_prompt.txt
@@ -0,0 +1 @@
+A towering pixel-art Balrog stands centered in an empty white void. Its massive, charcoal-gray chest slowly rises and falls with deep, rhythmic breathing. Glowing embers within its form pulse with a soft, fiery light. The creature's horned head tilts slightly, its piercing white eyes slowly scanning the emptiness. Its tattered, bat-like wings gently rustle and shift, as if stirred by an unseen heat haze. In one hand, the Balrog loosely holds its whip; the fiery tip of the whip slowly undulates and curls, coiling and uncoiling in a lazy, hypnotic rhythm. The entire sequence is a seamless, looping idle animation.
\ No newline at end of file
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/settings_description.txt b/spx-gui/src/apis/assets-gen/mockdata/balrog/settings_description.txt
new file mode 100644
index 000000000..0dfb3c904
--- /dev/null
+++ b/spx-gui/src/apis/assets-gen/mockdata/balrog/settings_description.txt
@@ -0,0 +1 @@
+A towering, broad-shouldered figure composed of dark, charcoal-gray pixel clusters. Glowing cracks of orange and yellow embers cover its muscular torso and limbs. Two massive, horn-like obsidian protrusions curve from its head. Its wings are tattered, bat-like shapes of deep crimson and black, edged with a fiery glow. It clutches a fiery whip, a serpentine line of bright red and yellow pixels that smolders at its tip. The face is a shadowy recess with two piercing white-hot points for eyes.
\ No newline at end of file
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/walk.mp4 b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk.mp4
new file mode 100644
index 000000000..3e717bf85
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk.mp4 differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frame.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frame.png
new file mode 100644
index 000000000..cc8bdc3d0
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frame.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frame_prompt.txt b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frame_prompt.txt
new file mode 100644
index 000000000..75eb55694
--- /dev/null
+++ b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frame_prompt.txt
@@ -0,0 +1 @@
+Perfect right side view of the Balrog of Moria in a powerful, striding pose. Its muscular torso and limbs, made of charcoal-gray pixel clusters with glowing ember cracks, are captured mid-walk. One massive leg is forward, the other back, with its tattered, fiery-edged wings partially unfurled. Its head, with obsidian horns, is turned slightly forward, shadowy face illuminated by two piercing white-hot eyes. It clutches a long, serpentine fiery whip that arcs behind it, smoldering at the tip. Empty white background.
\ No newline at end of file
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0000.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0000.png
new file mode 100644
index 000000000..1d7ae625c
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0000.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0001.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0001.png
new file mode 100644
index 000000000..bfa70a094
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0001.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0002.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0002.png
new file mode 100644
index 000000000..91b8b2a30
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0002.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0003.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0003.png
new file mode 100644
index 000000000..9a7027e31
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0003.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0004.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0004.png
new file mode 100644
index 000000000..773f81c47
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0004.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0005.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0005.png
new file mode 100644
index 000000000..9fab0df74
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0005.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0006.png b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0006.png
new file mode 100644
index 000000000..214fe4c3f
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_frames/walk_0006.png differ
diff --git a/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_video_prompt.txt b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_video_prompt.txt
new file mode 100644
index 000000000..a2b2dd6ad
--- /dev/null
+++ b/spx-gui/src/apis/assets-gen/mockdata/balrog/walk_video_prompt.txt
@@ -0,0 +1 @@
+A towering, charcoal-gray Balrog with glowing ember cracks across its muscular body and massive horns. It walks with a powerful, heavy, bipedal stride, its broad shoulders rolling with each step. Its tattered, bat-like wings shift and settle slightly with the movement. In one hand, it casually swings a long, fiery whip in a slow, sinuous, figure-eight motion. The entire walk cycle is seamless and loopable on a plain white background.
\ No newline at end of file
diff --git a/spx-gui/src/apis/assets-gen/mockdata/sound.mp3 b/spx-gui/src/apis/assets-gen/mockdata/sound.mp3
new file mode 100644
index 000000000..16d039076
Binary files /dev/null and b/spx-gui/src/apis/assets-gen/mockdata/sound.mp3 differ
diff --git a/spx-gui/src/apis/project.ts b/spx-gui/src/apis/project.ts
index 3317353d3..baa26a5cb 100644
--- a/spx-gui/src/apis/project.ts
+++ b/spx-gui/src/apis/project.ts
@@ -12,6 +12,12 @@ export enum ProjectDataType {
   Sound = 2
 }
 
+export type ProjectSettings = {
+  artStyle: string | null
+  perspective: string | null
+  description: string | null
+}
+
 export type ProjectData = {
   /** Unique identifier */
   id: string
@@ -47,6 +53,7 @@ export type ProjectData = {
   releaseCount: number
   /** Number of remixes associated with the project */
   remixCount: number
+  settings: ProjectSettings
 }
 
 export type AddProjectByRemixParams = Pick<ProjectData, 'name' | 'visibility'> & {
@@ -56,6 +63,18 @@ export type AddProjectByRemixParams = Pick<ProjectData, 'name' | 'visibility'> &
 
 export type AddProjectParams = Pick<ProjectData, 'name' | 'files' | 'visibility' | 'thumbnail'>
 
+async function polyfillProjectSettings(p: ProjectData | Promise<ProjectData>): Promise<ProjectData> {
+  const project = p instanceof Promise ? await p : p
+  if (project.settings == null) {
+    project.settings = {
+      artStyle: 'pixel',
+      perspective: 'side',
+      description: 'A fighting game among ninjas.'
+    }
+  }
+  return project as ProjectData
+}
+
 export async function addProject(params: AddProjectParams | AddProjectByRemixParams, signal?: AbortSignal) {
   return client.post('/project', params, { signal }) as Promise<ProjectData>
 }
@@ -64,9 +83,9 @@ export type UpdateProjectParams = Pick<ProjectData, 'files' | 'visibility'> &
   Partial<Pick<ProjectData, 'description' | 'instructions' | 'thumbnail'>>
 
 export async function updateProject(owner: string, name: string, params: UpdateProjectParams, signal?: AbortSignal) {
-  return client.put(`/project/${encodeURIComponent(owner)}/${encodeURIComponent(name)}`, params, {
+  return polyfillProjectSettings(client.put(`/project/${encodeURIComponent(owner)}/${encodeURIComponent(name)}`, params, {
     signal
-  }) as Promise<ProjectData>
+  }) as Promise<ProjectData>)
 }
 
 export function deleteProject(owner: string, name: string) {
@@ -102,13 +121,15 @@ export type ListProjectParams = PaginationParams & {
 }
 
 export async function listProject(params?: ListProjectParams) {
-  return client.get('/projects/list', params) as Promise<ByPage<ProjectData>>
+  const result = (await client.get('/projects/list', params)) as ByPage<ProjectData>
+  result.data = await Promise.all(result.data.map(polyfillProjectSettings))
+  return result
 }
 
 export async function getProject(owner: string, name: string, signal?: AbortSignal) {
-  return client.get(`/project/${encodeURIComponent(owner)}/${encodeURIComponent(name)}`, undefined, {
+  return polyfillProjectSettings(client.get(`/project/${encodeURIComponent(owner)}/${encodeURIComponent(name)}`, undefined, {
     signal
-  }) as Promise<ProjectData>
+  }) as Promise<ProjectData>)
 }
 
 export enum ExploreOrder {
diff --git a/spx-gui/src/components/asset/index.ts b/spx-gui/src/components/asset/index.ts
index 2830019ab..6c5ba368e 100644
--- a/spx-gui/src/components/asset/index.ts
+++ b/spx-gui/src/components/asset/index.ts
@@ -23,16 +23,19 @@ import { useEditorCtx } from '../editor/EditorContextProvider.vue'
 import { useCodeEditorCtx, useRenameWarning } from '../editor/code-editor/context'
 import { getResourceIdentifier } from '../editor/code-editor/common'
 import AssetLibraryModal from './library/AssetLibraryModal.vue'
+import { type SpriteGeneration, isSpriteGeneration } from './library/generators/SpriteGeneratorModal.vue'
 import AssetSaveModal from './library/AssetSaveModal.vue'
 import LoadFromScratchModal from './scratch/LoadFromScratchModal.vue'
 import PreprocessModal from './preprocessing/PreprocessModal.vue'
 import GroupCostumesModal from './animation/GroupCostumesModal.vue'
 import AssetLibraryManagementModal from './library/management/AssetLibraryManagementModal.vue'
 
+export { isSpriteGeneration, type SpriteGeneration }
+
 export function useAddAssetFromLibrary() {
   const invokeAssetLibraryModal = useModal(AssetLibraryModal)
   return async function addAssetFromLibrary<T extends AssetType>(project: Project, type: T) {
-    return (await invokeAssetLibraryModal({ project, type })) as Array<AssetModel<T>>
+    return (await invokeAssetLibraryModal({ project, type })) as Array<T extends AssetType.Sprite ? AssetModel<T> | SpriteGeneration : AssetModel<T>>
   }
 }
 
diff --git a/spx-gui/src/components/asset/library/AssetLibraryModal.vue b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
index 9e3cedecd..850bcda03 100644
--- a/spx-gui/src/components/asset/library/AssetLibraryModal.vue
+++ b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
@@ -1,64 +1,124 @@
 <template>
   <UISearchableModal
     :radar="{ name: 'Asset library modal', desc: `Modal for choosing ${entityMessage.en}s from the asset library` }"
-    style="width: 1096px"
+    style="width: 928px"
     :visible="props.visible"
-    :title="$t({ en: `Choose a ${entityMessage.en}`, zh: `选择${entityMessage.zh}` })"
-    @update:visible="emit('cancelled')"
+    :title="$t(modalTitle)"
+    @update:visible="handleModalClose"
   >
-    <template #input>
-      <UITextInput
-        v-model:value="searchInput"
-        v-radar="{ name: 'Search input', desc: 'Input to search assets' }"
-        class="search-input"
-        clearable
-        :placeholder="$t({ en: 'Search', zh: '搜索' })"
-        @keypress.enter="handleSearch"
-      >
-        <template #prefix><UIIcon class="search-icon" type="search" /></template>
-      </UITextInput>
+    <template v-if="!isGenerating" #input>
+      <UITabRadioGroup v-model:value="libraryType" class="library-type-selector">
+        <UITabRadio :value="LibraryType.Personal">
+          {{ $t(personalLibraryMessage) }}
+        </UITabRadio>
+        <UITabRadio :value="LibraryType.Public">
+          {{ $t({ en: 'Public Library', zh: '公开素材库' }) }}
+        </UITabRadio>
+      </UITabRadioGroup>
     </template>
-    <section class="body">
-      <div class="sider">
-        <UITag
-          :type="category.value === categoryPersonal.value ? 'primary' : 'boring'"
-          @click="handleSelectCategory(categoryPersonal)"
-        >
-          {{ $t(categoryPersonal.message) }}
-        </UITag>
-        <UIDivider />
-        <UITag
-          v-for="c in categories"
-          :key="c.value"
-          :type="c.value === category.value ? 'primary' : 'boring'"
-          @click="handleSelectCategory(c)"
-        >
-          {{ $t(c.message) }}
-        </UITag>
-      </div>
+
+    <!-- Generator View -->
+    <section v-if="isGenerating" class="generator-body">
+      <SpriteGenerator
+        v-if="props.type === AssetType.Sprite"
+        ref="spriteGeneratorRef"
+        :project="props.project"
+        :settings="generatorSettings"
+        :brief="generateDescription"
+        @generated="handleSpriteGenerated"
+        @hide="handleSpriteGeneratorHide"
+      />
+      <BackdropGenerator
+        v-else-if="props.type === AssetType.Backdrop"
+        :project="props.project"
+        :settings="generatorSettings"
+        :brief="generateDescription"
+        @generated="handleBackdropGenerated"
+      />
+      <SoundGenerator
+        v-else-if="props.type === AssetType.Sound"
+        :project="props.project"
+        :settings="generatorSettings"
+        :brief="generateDescription"
+        @generated="handleSoundGenerated"
+      />
+    </section>
+
+    <!-- Library View -->
+    <section v-else class="body">
       <main class="main">
-        <h3 class="title">{{ $t(category.message) }}</h3>
-        <div
-          v-radar="{
-            name: 'Asset list',
-            desc: `List of ${entityMessage.en}s in the selected category`
-          }"
-          class="content"
-        >
-          <ListResultWrapper v-slot="slotProps" :query-ret="queryRet" :height="436">
-            <!-- fixed asset-list height to keep the layout stable -->
-            <ul class="asset-list" style="height: 436px">
-              <ItemComponent
-                v-for="asset in slotProps.data.data"
-                :key="asset.id"
-                :asset="asset"
-                :selected="isSelected(asset)"
-                @click="handleAssetClick(asset)"
-              />
-            </ul>
-          </ListResultWrapper>
-          <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+        <div v-if="libraryType === LibraryType.Public && !hasSearched" class="search-initial">
+          <form class="search-form" @submit.prevent="handleSearch">
+            <UITextInput
+              v-model:value="searchInput"
+              v-radar="{ name: 'Search input', desc: 'Input to search assets' }"
+              class="search-input"
+              clearable
+              :placeholder="$t({ en: 'Search public assets...', zh: '搜索公开素材...' })"
+            >
+              <template #prefix><UIIcon class="search-icon" type="search" /></template>
+            </UITextInput>
+            <UIButton type="primary" html-type="submit">
+              {{ $t({ en: 'Search', zh: '搜索' }) }}
+            </UIButton>
+          </form>
         </div>
+        <template v-else>
+          <form class="search-bar" @submit.prevent="handleSearch">
+            <UITextInput
+              v-model:value="searchInput"
+              v-radar="{ name: 'Search input', desc: 'Input to search assets' }"
+              class="search-input"
+              clearable
+              :placeholder="$t(searchPlaceholder)"
+            >
+              <template #prefix><UIIcon class="search-icon" type="search" /></template>
+            </UITextInput>
+            <UIButton type="primary" html-type="submit">
+              {{ $t({ en: 'Search', zh: '搜索' }) }}
+            </UIButton>
+          </form>
+          <div
+            v-radar="{
+              name: 'Asset list',
+              desc: `List of ${entityMessage.en}s in the selected category`
+            }"
+            class="content"
+          >
+            <ListResultWrapper :query-ret="queryRet" :height="436">
+              <template #empty>
+                <div class="no-results">
+                  <div class="no-results-content">
+                    <p class="no-results-title">
+                      {{ $t({ en: 'No assets found', zh: '没有找到素材' }) }}
+                    </p>
+                    <p class="no-results-description">
+                      {{ $t({ en: 'Try generating one with AI!', zh: '试试用 AI 生成一个吧！' }) }}
+                    </p>
+                    <div class="generate-form">
+                      <UITextInput v-model:value="generateDescription" class="generate-input" />
+                      <UIButton type="primary" size="medium" @click="handleOpenGenerator">
+                        {{ $t(generateButtonText) }}
+                      </UIButton>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template #default="slotProps">
+                <ul class="asset-list" style="height: 436px">
+                  <ItemComponent
+                    v-for="asset in slotProps.data.data"
+                    :key="asset.id"
+                    :asset="asset"
+                    :selected="isSelected(asset)"
+                    @click="handleAssetClick(asset)"
+                  />
+                </ul>
+              </template>
+            </ListResultWrapper>
+            <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+          </div>
+        </template>
         <footer class="footer">
           <span v-show="selected.length > 0">
             {{
@@ -85,18 +145,40 @@
 
 <script lang="ts" setup>
 import { computed, ref, shallowReactive, shallowRef, watch } from 'vue'
-import { UITextInput, UIIcon, UITag, UIPagination, UIButton, UISearchableModal, UIDivider } from '@/components/ui'
+import {
+  UITextInput,
+  UIIcon,
+  UIPagination,
+  UIButton,
+  UISearchableModal,
+  UITabRadioGroup,
+  UITabRadio,
+  useConfirmDialog
+} from '@/components/ui'
 import { listAsset, AssetType, type AssetData, Visibility } from '@/apis/asset'
-import { debounce } from 'lodash'
 import { useMessageHandle } from '@/utils/exception'
 import { useQuery } from '@/utils/query'
 import { type Project } from '@/models/project'
-import { asset2Backdrop, asset2Sound, asset2Sprite, type AssetModel } from '@/models/common/asset'
+import { asset2Backdrop, asset2Sound, asset2Sprite, type AssetModel, type AssetSettings } from '@/models/common/asset'
+import type { Sprite } from '@/models/sprite'
+import type { Backdrop } from '@/models/backdrop'
+import type { Sound } from '@/models/sound'
+import { useI18n } from '@/utils/i18n'
 import ListResultWrapper from '@/components/common/ListResultWrapper.vue'
-import { type Category, getAssetCategories, categoryAll } from './category'
 import SoundItem from './SoundItem.vue'
 import SpriteItem from './SpriteItem.vue'
 import BackdropItem from './BackdropItem.vue'
+import SpriteGenerator from './generators/SpriteGenerator.vue'
+import { type SpriteGeneration } from './generators/SpriteGeneratorModal.vue'
+import BackdropGenerator from './generators/BackdropGenerator.vue'
+import SoundGenerator from './generators/SoundGenerator.vue'
+
+const { t } = useI18n()
+
+enum LibraryType {
+  Personal = 'personal',
+  Public = 'public'
+}
 
 const props = defineProps<{
   type: AssetType
@@ -106,14 +188,9 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   cancelled: []
-  resolved: [AssetModel[]]
+  resolved: [Array<AssetModel | SpriteGeneration>]
 }>()
 
-const categories = computed(() => {
-  const categoriesWithoutAll = getAssetCategories(props.type)
-  return [categoryAll, ...categoriesWithoutAll]
-})
-
 const ItemComponent = computed(
   () =>
     ({
@@ -131,46 +208,160 @@ const entityMessages = {
 
 const entityMessage = computed(() => entityMessages[props.type])
 
-const searchInput = ref('')
-const keyword = ref('')
+const generateButtonText = computed(
+  () =>
+    ({
+      [AssetType.Sprite]: { en: 'Generate Sprite', zh: '生成精灵' },
+      [AssetType.Backdrop]: { en: 'Generate Backdrop', zh: '生成背景' },
+      [AssetType.Sound]: { en: 'Generate Sound', zh: '生成声音' }
+    })[props.type]
+)
 
-// do search (with a delay) when search-input changed
-watch(
-  searchInput,
-  debounce(() => {
-    keyword.value = searchInput.value
-  }, 500)
+const isGenerating = ref(false)
+
+const baseTitle = computed(
+  () =>
+    ({
+      [AssetType.Sprite]: { en: 'Choose Sprite', zh: '选择精灵' },
+      [AssetType.Backdrop]: { en: 'Choose Backdrop', zh: '选择背景' },
+      [AssetType.Sound]: { en: 'Choose Sound', zh: '选择声音' }
+    })[props.type]
+)
+
+const generatingTitle = computed(
+  () =>
+    ({
+      [AssetType.Sprite]: { en: 'Generate Sprite', zh: '生成精灵' },
+      [AssetType.Backdrop]: { en: 'Generate Backdrop', zh: '生成背景' },
+      [AssetType.Sound]: { en: 'Generate Sound', zh: '生成声音' }
+    })[props.type]
 )
 
-// "personal" is not actually a category. Define it as a category for convenience
-const categoryPersonal = computed<Category>(() => ({
-  value: 'personal',
-  message: { en: `Your ${entityMessage.value.en}s`, zh: `你的${entityMessage.value.zh}` }
+const modalTitle = computed(() => (isGenerating.value ? generatingTitle.value : baseTitle.value))
+
+const generatorSettings = computed<AssetSettings>(() => ({
+  ...props.project.settings,
+  projectDescription: props.project.description ?? props.project.aiDescription ?? null,
+  description: generateDescription.value,
+  category: null
+}))
+
+const confirm = useConfirmDialog()
+
+async function handleModalClose(visible: boolean) {
+  if (visible) return
+
+  if (isGenerating.value && props.type === AssetType.Sprite) {
+    try {
+      await confirm({
+        title: t({ en: 'Hide generation?', zh: '收起生成？' }),
+        content: t({
+          en: 'The sprite is being generated. Do you want to hide and continue in the background?',
+          zh: '精灵正在生成中，是否收起并在后台继续？'
+        }),
+        confirmText: t({ en: 'Hide', zh: '收起' }),
+        cancelText: t({ en: 'Discard', zh: '丢弃' })
+      })
+      // User clicked "Hide"
+      handleSpriteGeneratorHide()
+    } catch {
+      // User clicked "Discard" or closed the dialog
+      emit('cancelled')
+    }
+  } else {
+    emit('cancelled')
+  }
+}
+
+function handleOpenGenerator() {
+  isGenerating.value = true
+}
+
+async function handleSpriteGenerated(sprite: Sprite) {
+  props.project.addSprite(sprite)
+  await sprite.autoFit()
+  emit('resolved', [sprite])
+}
+
+const spriteGeneratorRef = ref<InstanceType<typeof SpriteGenerator>>()
+
+function handleSpriteGeneratorHide() {
+  const state = spriteGeneratorRef.value?.getState()
+  if (state == null) return
+  const generation: SpriteGeneration = {
+    type: 'sprite-generation',
+    state
+  }
+  emit('resolved', [generation])
+}
+
+function handleBackdropGenerated(backdrop: Backdrop) {
+  props.project.stage.addBackdrop(backdrop)
+  emit('resolved', [backdrop])
+}
+
+function handleSoundGenerated(sound: Sound) {
+  props.project.addSound(sound)
+  emit('resolved', [sound])
+}
+
+const libraryType = ref(LibraryType.Public)
+const searchInput = ref('')
+const keyword = ref('')
+const hasSearched = ref(false)
+const generateDescription = ref('')
+
+const personalLibraryMessage = computed(() => ({
+  en: `Your ${entityMessage.value.en}s`,
+  zh: `你的${entityMessage.value.zh}`
 }))
-const category = ref(categoryAll)
+
+const searchPlaceholder = computed(() =>
+  libraryType.value === LibraryType.Personal
+    ? { en: 'Search your assets...', zh: '搜索你的素材...' }
+    : { en: 'Search public assets...', zh: '搜索公开素材...' }
+)
 
 const page = shallowRef(1)
 const pageSize = 18 // 6 * 3
 const pageTotal = computed(() => Math.ceil((queryRet.data.value?.total ?? 0) / pageSize))
 
 watch(
-  () => [keyword.value, category.value],
+  () => [keyword.value, libraryType.value],
   () => (page.value = 1)
 )
 
+// Reset search state when switching library type
+watch(libraryType, () => {
+  searchInput.value = ''
+  keyword.value = ''
+  hasSearched.value = false
+})
+
+// For personal library, auto-search with empty keyword
+watch(
+  libraryType,
+  (type) => {
+    if (type === LibraryType.Personal) {
+      hasSearched.value = true
+    }
+  },
+  { immediate: true }
+)
+
 const queryRet = useQuery(
   () => {
-    const c = category.value.value
-    const cPersonal = categoryPersonal.value.value
+    if (libraryType.value === LibraryType.Public && !hasSearched.value) {
+      return Promise.resolve({ data: [], total: 0 })
+    }
     return listAsset({
       pageSize,
       pageIndex: page.value,
       type: props.type,
       keyword: keyword.value,
       orderBy: 'displayName',
-      category: c === categoryAll.value || c === cPersonal ? undefined : c,
-      owner: c === cPersonal ? undefined : '*',
-      visibility: c === cPersonal ? undefined : Visibility.Public
+      owner: libraryType.value === LibraryType.Personal ? undefined : '*',
+      visibility: libraryType.value === LibraryType.Personal ? undefined : Visibility.Public
     })
   },
   {
@@ -181,10 +372,8 @@ const queryRet = useQuery(
 
 function handleSearch() {
   keyword.value = searchInput.value
-}
-
-function handleSelectCategory(c: Category) {
-  category.value = c
+  hasSearched.value = true
+  generateDescription.value = searchInput.value
 }
 
 const selected = shallowReactive<AssetData[]>([])
@@ -235,49 +424,74 @@ async function handleAssetClick(asset: AssetData) {
 </script>
 
 <style lang="scss" scoped>
+.library-type-selector {
+  margin-left: var(--ui-gap-middle);
+  white-space: nowrap;
+}
+
 .search-input {
   width: 320px;
 }
+
 .search-icon {
   color: var(--ui-color-grey-700);
 }
+
+.generator-body {
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+}
+
 .body {
   display: flex;
   justify-content: stretch;
 }
-.sider {
-  flex: 0 0 168px;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  padding: var(--ui-gap-middle);
-  gap: 12px;
 
-  border-right: 1px solid var(--ui-color-grey-400);
-}
 .main {
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
 }
-.title {
-  padding: 20px 24px 0;
-  color: var(--ui-color-grey-900);
+
+.search-initial {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 500px;
+}
+
+.search-form {
+  display: flex;
+  gap: var(--ui-gap-middle);
+  align-items: center;
 }
+
+.search-bar {
+  display: flex;
+  gap: var(--ui-gap-middle);
+  align-items: center;
+  justify-content: center;
+  padding: 20px 24px 12px;
+}
+
 .content {
   padding: 8px 24px 0;
 }
+
 .asset-list {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   align-content: flex-start;
 }
+
 .pagination {
   justify-content: center;
   margin: 36px 0 12px;
 }
+
 .footer {
   padding: 20px 24px;
   display: flex;
@@ -285,4 +499,42 @@ async function handleAssetClick(asset: AssetData) {
   align-items: center;
   gap: var(--ui-gap-middle);
 }
+
+.no-results {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 436px;
+  background: var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-2);
+}
+
+.no-results-content {
+  text-align: center;
+  max-width: 400px;
+}
+
+.no-results-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--ui-color-title);
+  margin: 0 0 8px 0;
+}
+
+.no-results-description {
+  font-size: 14px;
+  color: var(--ui-color-grey-700);
+  margin: 0 0 24px 0;
+}
+
+.generate-form {
+  display: flex;
+  gap: var(--ui-gap-middle);
+  align-items: center;
+  justify-content: center;
+}
+
+.generate-input {
+  width: 280px;
+}
 </style>
diff --git a/spx-gui/src/components/asset/library/generators/AnimationGenerator.vue b/spx-gui/src/components/asset/library/generators/AnimationGenerator.vue
new file mode 100644
index 000000000..477cc8945
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/AnimationGenerator.vue
@@ -0,0 +1,1127 @@
+<template>
+  <div class="animation-generator">
+    <!-- Back button -->
+    <div v-if="showBack" class="back-header">
+      <button class="back-button" @click="emit('back')">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M10 12L6 8L10 4"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        {{ $t({ en: 'Back', zh: '返回' }) }}
+      </button>
+    </div>
+
+    <!-- Step header -->
+    <div class="step-header">
+      <template v-if="stage === 'input-brief' || stage === 'enriching'">
+        <span class="step-number">{{ $t({ en: 'Step 1', zh: '第 1 步' }) }}</span>
+        <span class="step-title">{{ $t({ en: 'Describe the Animation', zh: '描述动画' }) }}</span>
+      </template>
+      <template v-else-if="stage === 'editing' || stage === 'generating-frame'">
+        <span class="step-number">{{ $t({ en: 'Step 2', zh: '第 2 步' }) }}</span>
+        <span class="step-title">{{ $t({ en: 'Edit Animation Details', zh: '编辑动画细节' }) }}</span>
+      </template>
+      <template v-else-if="stage === 'preview-frame'">
+        <span class="step-number">{{ $t({ en: 'Step 3', zh: '第 3 步' }) }}</span>
+        <span class="step-title">{{ $t({ en: 'Preview Reference Frame', zh: '预览参考帧' }) }}</span>
+      </template>
+      <template v-else-if="stage === 'generating-video'">
+        <span class="step-number">{{ $t({ en: 'Step 4', zh: '第 4 步' }) }}</span>
+        <span class="step-title">{{ $t({ en: 'Generate Animation Video', zh: '生成动画视频' }) }}</span>
+      </template>
+      <template v-else-if="stage === 'preview-video'">
+        <span class="step-number">{{ $t({ en: 'Step 5', zh: '第 5 步' }) }}</span>
+        <span class="step-title">{{ $t({ en: 'Preview & Trim Video', zh: '预览并裁剪视频' }) }}</span>
+      </template>
+    </div>
+
+    <!-- Brief input (shown in input-brief and enriching stages) -->
+    <form
+      v-if="stage === 'input-brief' || stage === 'enriching'"
+      class="settings-section settings-section--centered"
+      @submit.prevent="handleSubmitBrief"
+    >
+      <div class="form-group">
+        <UITextInput
+          v-model:value="brief"
+          :placeholder="$t({ en: 'Briefly describe the animation...', zh: '简要描述动画...' })"
+          :disabled="stage === 'enriching'"
+        />
+      </div>
+
+      <!-- Reference costume selector -->
+      <div v-if="props.sprite.costumes.length > 0" class="form-group">
+        <label>{{ $t({ en: 'Reference Costume', zh: '参考造型' }) }}</label>
+        <div class="costume-selector">
+          <div
+            v-for="costume in props.sprite.costumes"
+            :key="costume.id"
+            class="costume-option"
+            :class="{ 'costume-option--selected': selectedCostumeId === costume.id }"
+            @click="selectedCostumeId = costume.id"
+          >
+            <CostumePreview :costume="costume" class="costume-preview" />
+            <span class="costume-name">{{ costume.name }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="form-row-actions">
+          <UIButton v-if="stage === 'input-brief'" type="primary" size="medium" html-type="submit">
+            {{ $t({ en: 'Next', zh: '下一步' }) }}
+          </UIButton>
+        </div>
+      </div>
+      <UILoading v-if="stage === 'enriching'" cover />
+    </form>
+
+    <!-- Detailed settings form (shown in editing, generating-frame, preview-frame, generating-video stages) -->
+    <div
+      v-else-if="stage !== 'preview-video'"
+      class="settings-section"
+      :class="{ 'settings-section--compact': isGenerating }"
+    >
+      <div class="form-group">
+        <UITextInput
+          v-model:value="description"
+          type="textarea"
+          :placeholder="$t({ en: 'Describe the animation...', zh: '描述动画...' })"
+          :disabled="isGenerating"
+          :rows="2"
+        />
+      </div>
+      <div class="form-row">
+        <div v-if="selectedCostume" class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Reference', zh: '参考' }) }}</label>
+            <div class="reference-costume-display">
+              <CostumePreview :costume="selectedCostume" class="reference-costume-preview" />
+            </div>
+          </div>
+        </div>
+        <div class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Name', zh: '名称' }) }}</label>
+            <UITextInput v-model:value="animationName" :disabled="isGenerating" style="width: 120px" />
+          </div>
+        </div>
+        <div class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Art Style', zh: '艺术风格' }) }}</label>
+            <ArtStyleInput v-model:value="artStyle" :disabled="isGenerating" />
+          </div>
+        </div>
+        <div class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Perspective', zh: '游戏视角' }) }}</label>
+            <PerspectiveInput v-model:value="perspective" :disabled="isGenerating" />
+          </div>
+        </div>
+        <div class="form-row-actions">
+          <UIButton
+            v-if="stage === 'editing' || stage === 'preview-frame'"
+            type="primary"
+            size="medium"
+            @click="handleGenerateFrame"
+          >
+            {{ stage === 'editing' ? $t({ en: 'Generate', zh: '生成' }) : $t({ en: 'Regenerate', zh: '重新生成' }) }}
+          </UIButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- Preview container (shown in all stages except enriching) -->
+    <div v-if="stage !== 'input-brief' && stage !== 'enriching'" class="preview-container">
+      <!-- Generating frame -->
+      <div v-if="stage === 'generating-frame'" class="preview-loading">
+        <UILoading />
+        <p class="stage-message">
+          {{ $t({ en: 'Generating reference frame...', zh: '正在生成参考帧...' }) }}
+        </p>
+      </div>
+
+      <!-- Preview frame -->
+      <template v-else-if="stage === 'preview-frame'">
+        <img :src="referenceFrameUrl" alt="Reference frame" class="preview-image" />
+      </template>
+
+      <!-- Generating video -->
+      <div v-if="stage === 'generating-video'" class="preview-loading">
+        <UILoading />
+        <p class="stage-message">
+          {{ $t({ en: 'Generating animation video...', zh: '正在生成动画视频...' }) }}
+        </p>
+        <UIButton type="boring" size="medium" @click="handleHide">
+          {{ $t({ en: 'Hide', zh: '收起' }) }}
+        </UIButton>
+      </div>
+
+      <!-- Preview video with trimming -->
+      <template v-else-if="stage === 'preview-video'">
+        <div class="video-preview-wrapper">
+          <video
+            ref="videoRef"
+            :src="generatedVideoUrl"
+            class="preview-video"
+            @loadedmetadata="handleVideoLoaded"
+            @timeupdate="handleTimeUpdate"
+          />
+          <div class="video-controls">
+            <button class="play-button" @click="togglePlayPause">
+              <svg
+                v-if="!isPlaying"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <polygon points="5 3 19 12 5 21 5 3" />
+              </svg>
+              <svg
+                v-else
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <rect x="6" y="4" width="4" height="16" />
+                <rect x="14" y="4" width="4" height="16" />
+              </svg>
+            </button>
+            <div class="trim-slider-container">
+              <div class="trim-slider">
+                <div class="trim-track" :style="trimTrackStyle" />
+                <input
+                  type="range"
+                  class="trim-handle trim-handle--start"
+                  :min="0"
+                  :max="videoDuration"
+                  :step="0.01"
+                  :value="trimStart"
+                  @input="handleTrimStartChange"
+                />
+                <input
+                  type="range"
+                  class="trim-handle trim-handle--end"
+                  :min="0"
+                  :max="videoDuration"
+                  :step="0.01"
+                  :value="trimEnd"
+                  @input="handleTrimEndChange"
+                />
+                <div class="playhead" :style="playheadStyle" />
+              </div>
+              <div class="trim-time-labels">
+                <span>{{ formatTime(trimStart) }}</span>
+                <span>{{ formatTime(trimEnd) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Placeholder -->
+      <div v-else-if="stage === 'editing'" class="preview-placeholder">
+        <span class="preview-placeholder-text">{{ $t({ en: 'Preview', zh: '预览' }) }}</span>
+      </div>
+
+      <!-- Edit button for frame preview -->
+      <button
+        v-if="stage === 'preview-frame' && referenceFrameUrl && !showModificationForm"
+        class="preview-edit-button"
+        @click="showModificationForm = true"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+        </svg>
+      </button>
+
+      <!-- Modification form (floating over preview) -->
+      <div v-if="showModificationForm && stage === 'preview-frame'" class="modification-form-overlay">
+        <div class="modification-form">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Modification Instructions', zh: '修改指令' }) }}</label>
+            <UITextInput
+              v-model:value="modificationInstruction"
+              type="textarea"
+              :placeholder="$t({ en: 'Describe what you want to modify...', zh: '描述您想要修改的内容...' })"
+              :rows="3"
+            />
+          </div>
+          <div class="modification-actions">
+            <UIButton type="boring" size="medium" @click="cancelModification">
+              {{ $t({ en: 'Cancel', zh: '取消' }) }}
+            </UIButton>
+            <UIButton
+              type="primary"
+              size="medium"
+              :disabled="!modificationInstruction.trim()"
+              @click="submitModification"
+            >
+              {{ $t({ en: 'Submit', zh: '提交' }) }}
+            </UIButton>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Action buttons -->
+    <div v-if="stage === 'preview-frame'" class="stage-actions">
+      <UIButton type="primary" size="large" @click="handleContinueToVideo">
+        {{ $t({ en: 'Continue', zh: '继续' }) }}
+      </UIButton>
+    </div>
+
+    <div v-if="stage === 'preview-video'" class="stage-actions">
+      <UIButton type="boring" size="large" @click="handleBackToFrame">
+        {{ $t({ en: 'Back', zh: '返回' }) }}
+      </UIButton>
+      <UIButton type="primary" size="large" :loading="isCreating" @click="handleConfirm">
+        {{ $t({ en: 'Adopt', zh: '采用' }) }}
+      </UIButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { UIButton, UITextInput, UILoading } from '@/components/ui'
+import {
+  enrichSettings,
+  generateAnimationFrame,
+  modifyAnimationFrame,
+  submitAnimationVideoTask,
+  getAnimationVideoTaskStatus,
+  getFramesFromVideo,
+  type AnimationSettings
+} from '@/apis/assets-gen'
+import type { Sprite } from '@/models/sprite'
+import { Animation } from '@/models/animation'
+import { Costume } from '@/models/costume'
+import type { AssetSettings } from '@/models/common/asset'
+import { createFileWithWebUrl } from '@/models/common/cloud'
+import { getAnimationName } from '@/models/common/asset-name'
+import { useFileUrl } from '@/utils/file'
+import ArtStyleInput from './ArtStyleInput.vue'
+import PerspectiveInput from './PerspectiveInput.vue'
+import CostumePreview from './CostumePreview.vue'
+
+export type AnimationGeneratorState = {
+  stage: Stage
+  brief: string
+  settings: AnimationSettings
+  selectedCostumeId: string | null
+  referenceFrameUrl: string
+  generatedVideoUrl: string
+  videoTaskId: string | null
+  trimStart: number
+  trimEnd: number
+  videoDuration: number
+}
+
+const props = defineProps<{
+  sprite: Sprite
+  settings?: AssetSettings
+  /** Brief description */
+  brief?: string
+  /** Animation name (when used within SpriteGenerator) */
+  initialAnimationName?: string
+  /** Whether to show the back button */
+  showBack?: boolean
+  /** Saved state for restoration */
+  savedState?: AnimationGeneratorState
+}>()
+
+const emit = defineEmits<{
+  generated: [animation: Animation]
+  back: []
+  hide: [state: AnimationGeneratorState]
+}>()
+
+type Stage =
+  | 'input-brief'
+  | 'enriching'
+  | 'editing'
+  | 'generating-frame'
+  | 'preview-frame'
+  | 'generating-video'
+  | 'preview-video'
+
+const stage = ref<Stage>(props.brief ? 'enriching' : 'input-brief')
+const brief = ref(props.brief ?? '')
+const editableSettings = reactive<AnimationSettings>({
+  artStyle: props.settings?.artStyle ?? null,
+  perspective: props.settings?.perspective ?? null,
+  projectDescription: props.settings?.projectDescription ?? null,
+  description: props.settings?.description ?? null,
+  category: props.settings?.category ?? null,
+  spriteName: props.sprite.name,
+  name: props.initialAnimationName ?? undefined
+})
+
+// Reference costume selection - default to sprite's default costume
+const selectedCostumeId = ref<string | null>(props.sprite.defaultCostume?.id ?? null)
+
+const selectedCostume = computed(() => {
+  if (selectedCostumeId.value == null) return null
+  return props.sprite.costumes.find((c) => c.id === selectedCostumeId.value) ?? null
+})
+
+// Get URL for selected costume image
+const [selectedCostumeImageUrl] = useFileUrl(() => selectedCostume.value?.img ?? null)
+
+const referenceFrameUrl = ref<string>('')
+const generatedVideoUrl = ref<string>('')
+const videoTaskId = ref<string | null>(null)
+const isCreating = ref(false)
+const showModificationForm = ref(false)
+const modificationInstruction = ref('')
+
+// Video playback and trimming state
+const videoRef = ref<HTMLVideoElement | null>(null)
+const videoDuration = ref(0)
+const currentTime = ref(0)
+const trimStart = ref(0)
+const trimEnd = ref(0)
+const isPlaying = ref(false)
+
+const isGenerating = computed(() => stage.value === 'generating-frame' || stage.value === 'generating-video')
+
+const description = computed({
+  get: () => editableSettings.description ?? '',
+  set: (value: string) => {
+    editableSettings.description = value
+  }
+})
+
+const animationName = computed({
+  get: () => editableSettings.name ?? '',
+  set: (value: string) => {
+    editableSettings.name = value
+  }
+})
+
+const artStyle = computed({
+  get: () => editableSettings.artStyle,
+  set: (value: string) => {
+    editableSettings.artStyle = value
+  }
+})
+
+const perspective = computed({
+  get: () => editableSettings.perspective,
+  set: (value: string) => {
+    editableSettings.perspective = value
+  }
+})
+
+const trimTrackStyle = computed(() => {
+  if (videoDuration.value === 0) return {}
+  const left = (trimStart.value / videoDuration.value) * 100
+  const width = ((trimEnd.value - trimStart.value) / videoDuration.value) * 100
+  return {
+    left: `${left}%`,
+    width: `${width}%`
+  }
+})
+
+const playheadStyle = computed(() => {
+  if (videoDuration.value === 0) return {}
+  const left = (currentTime.value / videoDuration.value) * 100
+  return {
+    left: `${left}%`
+  }
+})
+
+function formatTime(seconds: number): string {
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  const ms = Math.floor((seconds % 1) * 100)
+  return `${mins}:${secs.toString().padStart(2, '0')}.${ms.toString().padStart(2, '0')}`
+}
+
+async function handleSubmitBrief() {
+  stage.value = 'enriching'
+  await enrichSettingsWithBrief()
+}
+
+async function enrichSettingsWithBrief() {
+  const settingsToEnrich = {
+    ...props.settings,
+    description: brief.value || props.brief
+  }
+  const enriched = await enrichSettings(settingsToEnrich, 'animation')
+  Object.assign(editableSettings, enriched)
+  stage.value = 'editing'
+}
+
+async function handleGenerateFrame() {
+  stage.value = 'generating-frame'
+  try {
+    // Get reference image URL from selected costume
+    const referenceImageUrl = selectedCostumeImageUrl.value ?? ''
+
+    // Generate animation frame using the reference costume image
+    referenceFrameUrl.value = await generateAnimationFrame(
+      {
+        ...editableSettings,
+        spriteName: props.sprite.name
+      },
+      referenceImageUrl
+    )
+    stage.value = 'preview-frame'
+    showModificationForm.value = false
+    modificationInstruction.value = ''
+  } catch (error) {
+    console.error('Failed to generate reference frame:', error)
+    stage.value = 'editing'
+    throw error
+  }
+}
+
+function cancelModification() {
+  showModificationForm.value = false
+  modificationInstruction.value = ''
+}
+
+async function submitModification() {
+  if (!modificationInstruction.value.trim()) return
+
+  stage.value = 'generating-frame'
+  showModificationForm.value = false
+
+  try {
+    referenceFrameUrl.value = await modifyAnimationFrame(referenceFrameUrl.value, modificationInstruction.value, {
+      ...editableSettings,
+      spriteName: props.sprite.name
+    })
+    stage.value = 'preview-frame'
+    modificationInstruction.value = ''
+  } catch (error) {
+    console.error('Failed to modify reference frame:', error)
+    stage.value = 'preview-frame'
+    showModificationForm.value = true
+    throw error
+  }
+}
+
+// Flag to stop polling when hidden
+const isPollingActive = ref(false)
+
+async function handleContinueToVideo() {
+  stage.value = 'generating-video'
+  try {
+    // Submit video generation task (only if we don't have a task already)
+    if (videoTaskId.value == null) {
+      videoTaskId.value = await submitAnimationVideoTask(editableSettings, referenceFrameUrl.value)
+    }
+
+    // Start polling
+    await pollVideoTaskStatus()
+  } catch (error) {
+    console.error('Failed to generate animation video:', error)
+    stage.value = 'preview-frame'
+    throw error
+  }
+}
+
+async function pollVideoTaskStatus() {
+  if (videoTaskId.value == null) return
+
+  isPollingActive.value = true
+  const pollInterval = 2000 // Poll every 2 seconds
+
+  while (isPollingActive.value) {
+    const status = await getAnimationVideoTaskStatus(videoTaskId.value)
+
+    if (status.status === 'completed' && status.resultUrl != null) {
+      generatedVideoUrl.value = status.resultUrl
+      videoTaskId.value = null
+      stage.value = 'preview-video'
+      isPollingActive.value = false
+      return
+    } else if (status.status === 'failed') {
+      videoTaskId.value = null
+      isPollingActive.value = false
+      throw new Error(status.error || 'Video generation failed')
+    } else {
+      // Wait before polling again
+      await new Promise((resolve) => setTimeout(resolve, pollInterval))
+    }
+  }
+}
+
+function handleBackToFrame() {
+  stage.value = 'preview-frame'
+  // Reset video state
+  isPlaying.value = false
+  if (videoRef.value) {
+    videoRef.value.pause()
+  }
+}
+
+function handleVideoLoaded() {
+  if (videoRef.value) {
+    videoDuration.value = videoRef.value.duration
+    trimEnd.value = videoRef.value.duration
+  }
+}
+
+function handleTimeUpdate() {
+  if (videoRef.value) {
+    currentTime.value = videoRef.value.currentTime
+    // Loop within trim range
+    if (currentTime.value >= trimEnd.value) {
+      videoRef.value.currentTime = trimStart.value
+    }
+  }
+}
+
+function togglePlayPause() {
+  if (!videoRef.value) return
+
+  if (isPlaying.value) {
+    videoRef.value.pause()
+    isPlaying.value = false
+  } else {
+    // Start from trim start if current time is outside trim range
+    if (videoRef.value.currentTime < trimStart.value || videoRef.value.currentTime >= trimEnd.value) {
+      videoRef.value.currentTime = trimStart.value
+    }
+    videoRef.value.play()
+    isPlaying.value = true
+  }
+}
+
+function handleTrimStartChange(event: Event) {
+  const value = parseFloat((event.target as HTMLInputElement).value)
+  trimStart.value = Math.min(value, trimEnd.value - 0.1)
+  if (videoRef.value && videoRef.value.currentTime < trimStart.value) {
+    videoRef.value.currentTime = trimStart.value
+  }
+}
+
+function handleTrimEndChange(event: Event) {
+  const value = parseFloat((event.target as HTMLInputElement).value)
+  trimEnd.value = Math.max(value, trimStart.value + 0.1)
+  if (videoRef.value && videoRef.value.currentTime > trimEnd.value) {
+    videoRef.value.currentTime = trimEnd.value
+  }
+}
+
+function getCurrentState(): AnimationGeneratorState {
+  return {
+    stage: stage.value,
+    brief: brief.value,
+    settings: { ...editableSettings },
+    selectedCostumeId: selectedCostumeId.value,
+    referenceFrameUrl: referenceFrameUrl.value,
+    generatedVideoUrl: generatedVideoUrl.value,
+    videoTaskId: videoTaskId.value,
+    trimStart: trimStart.value,
+    trimEnd: trimEnd.value,
+    videoDuration: videoDuration.value
+  }
+}
+
+function handleHide() {
+  // Stop polling but don't cancel the task
+  isPollingActive.value = false
+  emit('hide', getCurrentState())
+}
+
+async function handleConfirm() {
+  isCreating.value = true
+  try {
+    // Calculate frame interval based on trim duration
+    const trimDuration = trimEnd.value - trimStart.value
+    const targetFrameCount = Math.max(4, Math.min(30, Math.ceil(trimDuration * 10)))
+    const interval = (trimDuration * 1000) / targetFrameCount
+
+    // Get frames from video
+    const frameUrls = await getFramesFromVideo(generatedVideoUrl.value, interval)
+
+    // Create costumes from frames
+    const costumes: Costume[] = []
+    for (let i = 0; i < frameUrls.length; i++) {
+      const frameUrl = frameUrls[i]
+      const file = createFileWithWebUrl(frameUrl)
+      const costume = await Costume.create(`frame${i}`, file)
+      await costume.autoFit()
+      costumes.push(costume)
+    }
+
+    // Create animation with costumes
+    const name = getAnimationName(props.sprite, editableSettings.name || 'animation')
+    const animation = Animation.create(name, costumes, {
+      duration: trimDuration
+    })
+
+    emit('generated', animation)
+  } catch (error) {
+    console.error('Failed to create animation:', error)
+    throw error
+  } finally {
+    isCreating.value = false
+  }
+}
+
+// Initialize from savedState or brief
+function initializeFromSavedState() {
+  if (props.savedState == null) return false
+
+  const saved = props.savedState
+  stage.value = saved.stage
+  brief.value = saved.brief
+  Object.assign(editableSettings, saved.settings)
+  selectedCostumeId.value = saved.selectedCostumeId
+  referenceFrameUrl.value = saved.referenceFrameUrl
+  generatedVideoUrl.value = saved.generatedVideoUrl
+  videoTaskId.value = saved.videoTaskId
+  trimStart.value = saved.trimStart
+  trimEnd.value = saved.trimEnd
+  videoDuration.value = saved.videoDuration
+
+  // If we were generating video, resume polling
+  if (saved.stage === 'generating-video' && saved.videoTaskId != null) {
+    pollVideoTaskStatus()
+  }
+
+  return true
+}
+
+// Initialize
+if (!initializeFromSavedState()) {
+  // No saved state, initialize normally
+  if (props.brief) {
+    enrichSettingsWithBrief()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.animation-generator {
+  display: flex;
+  flex-direction: column;
+  min-height: 436px;
+  gap: var(--ui-gap-middle);
+}
+
+.back-header {
+  display: flex;
+  align-items: center;
+}
+
+.back-button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: none;
+  border: none;
+  border-radius: var(--ui-border-radius-1);
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--ui-color-grey-700);
+  transition: all 0.2s;
+
+  &:hover {
+    background: var(--ui-color-grey-100);
+    color: var(--ui-color-grey-900);
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+.step-header {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-gap-small);
+  padding-bottom: var(--ui-gap-small);
+}
+
+.step-number {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ui-color-primary-main);
+  background: var(--ui-color-primary-100);
+  padding: 2px 8px;
+  border-radius: var(--ui-border-radius-1);
+}
+
+.step-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ui-color-title);
+}
+
+.settings-section {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-gap-middle);
+
+  &--compact {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &--centered {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+.stage-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-gap-middle);
+}
+
+.stage-message {
+  font-size: 14px;
+  color: var(--ui-color-grey-700);
+  margin: 0;
+}
+
+.form-row {
+  display: flex;
+  gap: var(--ui-gap-middle);
+
+  .form-row-item {
+    flex: 0 0 auto;
+
+    .form-group {
+      flex-direction: row;
+      align-items: center;
+
+      label {
+        flex-shrink: 0;
+        margin-right: var(--ui-gap-small);
+      }
+    }
+  }
+
+  .form-row-actions {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--ui-color-title);
+  }
+}
+
+.costume-selector {
+  display: flex;
+  gap: var(--ui-gap-small);
+  flex-wrap: wrap;
+}
+
+.costume-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px;
+  border: 2px solid transparent;
+  border-radius: var(--ui-border-radius-1);
+  cursor: pointer;
+  transition: all 0.2s;
+  background: var(--ui-color-grey-100);
+
+  &:hover {
+    border-color: var(--ui-color-grey-400);
+  }
+
+  &--selected {
+    border-color: var(--ui-color-primary-main);
+    background: var(--ui-color-primary-100);
+  }
+
+  .costume-preview {
+    width: 48px;
+    height: 48px;
+  }
+
+  .costume-name {
+    font-size: 12px;
+    color: var(--ui-color-grey-700);
+    max-width: 64px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+}
+
+.reference-costume-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-1);
+  overflow: hidden;
+}
+
+.reference-costume-preview {
+  width: 100%;
+  height: 100%;
+}
+
+.preview-container {
+  position: relative;
+  width: 100%;
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--ui-gap-large);
+  background: var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-2);
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 300px;
+  object-fit: contain;
+}
+
+.preview-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.preview-placeholder-text {
+  font-size: 16px;
+  color: var(--ui-color-grey-500);
+}
+
+.preview-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ui-gap-middle);
+}
+
+.preview-edit-button {
+  position: absolute;
+  top: var(--ui-gap-middle);
+  right: var(--ui-gap-middle);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ui-color-white);
+  border: 1px solid var(--ui-color-grey-300);
+  border-radius: var(--ui-border-radius-1);
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--ui-color-grey-700);
+
+  &:hover {
+    background: var(--ui-color-grey-50);
+    border-color: var(--ui-color-grey-400);
+    color: var(--ui-color-grey-900);
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.modification-form-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: var(--ui-border-radius-2);
+  padding: var(--ui-gap-large);
+}
+
+.modification-form {
+  width: 100%;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-gap-middle);
+  padding: var(--ui-gap-large);
+  background: var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.modification-actions {
+  display: flex;
+  gap: var(--ui-gap-middle);
+  justify-content: flex-end;
+}
+
+.stage-actions {
+  display: flex;
+  gap: var(--ui-gap-middle);
+  justify-content: flex-end;
+}
+
+// Video preview styles
+.video-preview-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--ui-gap-middle);
+}
+
+.preview-video {
+  max-width: 100%;
+  max-height: 240px;
+  object-fit: contain;
+  border-radius: var(--ui-border-radius-1);
+}
+
+.video-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-gap-middle);
+  width: 100%;
+}
+
+.play-button {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ui-color-primary-main);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  color: white;
+  transition: background 0.2s;
+  flex-shrink: 0;
+
+  &:hover {
+    background: var(--ui-color-primary-600);
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.trim-slider-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.trim-slider {
+  position: relative;
+  height: 24px;
+  background: var(--ui-color-grey-300);
+  border-radius: 4px;
+}
+
+.trim-track {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background: var(--ui-color-primary-200);
+  border-radius: 4px;
+}
+
+.trim-handle {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  appearance: none;
+  background: transparent;
+  pointer-events: none;
+  margin: 0;
+
+  &::-webkit-slider-thumb {
+    appearance: none;
+    width: 12px;
+    height: 24px;
+    background: var(--ui-color-primary-main);
+    border-radius: 2px;
+    cursor: ew-resize;
+    pointer-events: auto;
+  }
+
+  &::-moz-range-thumb {
+    width: 12px;
+    height: 24px;
+    background: var(--ui-color-primary-main);
+    border: none;
+    border-radius: 2px;
+    cursor: ew-resize;
+    pointer-events: auto;
+  }
+}
+
+.playhead {
+  position: absolute;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  background: var(--ui-color-grey-900);
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.trim-time-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--ui-color-grey-600);
+}
+</style>
diff --git a/spx-gui/src/components/asset/library/generators/AnimationGeneratorModal.vue b/spx-gui/src/components/asset/library/generators/AnimationGeneratorModal.vue
new file mode 100644
index 000000000..ed805a7d5
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/AnimationGeneratorModal.vue
@@ -0,0 +1,41 @@
+<template>
+  <UIFormModal
+    :title="$t({ en: 'Generate Animation', zh: '生成动画' })"
+    :visible="props.visible"
+    style="width: 928px"
+    @update:visible="emit('cancelled')"
+  >
+    <div class="generator-content">
+      <AnimationGenerator :sprite="props.sprite" :settings="props.settings" @generated="handleGenerated" />
+    </div>
+  </UIFormModal>
+</template>
+
+<script setup lang="ts">
+import { UIFormModal } from '@/components/ui'
+import type { Sprite } from '@/models/sprite'
+import type { Animation } from '@/models/animation'
+import type { AssetSettings } from '@/models/common/asset'
+import AnimationGenerator from './AnimationGenerator.vue'
+
+const props = defineProps<{
+  visible: boolean
+  sprite: Sprite
+  settings?: AssetSettings
+}>()
+
+const emit = defineEmits<{
+  cancelled: []
+  resolved: [animation: Animation]
+}>()
+
+function handleGenerated(animation: Animation) {
+  emit('resolved', animation)
+}
+</script>
+
+<style lang="scss" scoped>
+.generator-content {
+  min-height: 400px;
+}
+</style>
diff --git a/spx-gui/src/components/asset/library/generators/ArtStyleInput.vue b/spx-gui/src/components/asset/library/generators/ArtStyleInput.vue
new file mode 100644
index 000000000..2a62887b1
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/ArtStyleInput.vue
@@ -0,0 +1,29 @@
+<template>
+  <UISelect :value="value" @update:value="handleUpdate">
+    <UISelectOption v-for="option in artStyleOptions" :key="option.value" :value="option.value">
+      {{ $t(option.label) }}
+    </UISelectOption>
+  </UISelect>
+</template>
+
+<script setup lang="ts">
+import { UISelect, UISelectOption } from '@/components/ui'
+import { artStyleOptions } from '@/components/project/types'
+
+defineProps<{
+  value: string | null
+}>()
+
+const emit = defineEmits<{
+  'update:value': [string]
+}>()
+
+function handleUpdate(value: string | null) {
+  if (value) {
+    emit('update:value', value)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/spx-gui/src/components/asset/library/generators/BackdropCategoryInput.vue b/spx-gui/src/components/asset/library/generators/BackdropCategoryInput.vue
new file mode 100644
index 000000000..ff2ebdca5
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/BackdropCategoryInput.vue
@@ -0,0 +1,28 @@
+<template>
+  <UISelect :value="value" @update:value="handleUpdate">
+    <UISelectOption v-for="option in backdropCategoryOptions" :key="option.value" :value="option.value">
+      {{ $t(option.label) }}
+    </UISelectOption>
+  </UISelect>
+</template>
+
+<script setup lang="ts">
+import { UISelect, UISelectOption } from '@/components/ui'
+import { backdropCategoryOptions } from '@/components/project/types'
+
+defineProps<{
+  value: string | null
+}>()
+
+const emit = defineEmits<{
+  'update:value': [string]
+}>()
+
+function handleUpdate(value: string | null) {
+  if (value) {
+    emit('update:value', value)
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/library/generators/BackdropGenerator.vue b/spx-gui/src/components/asset/library/generators/BackdropGenerator.vue
new file mode 100644
index 000000000..98e7c4383
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/BackdropGenerator.vue
@@ -0,0 +1,471 @@
+<template>
+  <div class="backdrop-generator">
+    <!-- Brief input (shown in input-brief and enriching stages) -->
+    <form
+      v-if="stage === 'input-brief' || stage === 'enriching'"
+      class="settings-section settings-section--centered"
+      @submit.prevent="handleSubmitBrief"
+    >
+      <div class="form-group">
+        <UITextInput
+          v-model:value="brief"
+          :placeholder="$t({ en: 'Briefly describe the backdrop...', zh: '简要描述背景...' })"
+          :disabled="stage === 'enriching'"
+        />
+      </div>
+      <div class="form-row">
+        <div class="form-row-actions">
+          <UIButton v-if="stage === 'input-brief'" type="primary" size="medium" html-type="submit">
+            {{ $t({ en: 'Next', zh: '下一步' }) }}
+          </UIButton>
+        </div>
+      </div>
+      <UILoading v-if="stage === 'enriching'" cover />
+    </form>
+
+    <!-- Detailed settings form (shown in editing, generating, preview stages) -->
+    <div v-else class="settings-section" :class="{ 'settings-section--compact': stage === 'generating' }">
+      <div class="form-group">
+        <UITextInput
+          v-model:value="description"
+          type="textarea"
+          :placeholder="$t({ en: 'Describe the backdrop scene...', zh: '描述背景场景...' })"
+          :disabled="stage === 'generating'"
+          :rows="2"
+        />
+      </div>
+      <div class="form-row">
+        <div class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Name', zh: '名称' }) }}</label>
+            <UITextInput v-model:value="backdropName" :disabled="stage === 'generating'" />
+          </div>
+        </div>
+        <div class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Art Style', zh: '艺术风格' }) }}</label>
+            <ArtStyleInput v-model:value="artStyle" :disabled="stage === 'generating'" />
+          </div>
+        </div>
+        <div class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Perspective', zh: '游戏视角' }) }}</label>
+            <PerspectiveInput v-model:value="perspective" :disabled="stage === 'generating'" />
+          </div>
+        </div>
+        <div class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Category', zh: '类别' }) }}</label>
+            <BackdropCategoryInput v-model:value="category" :disabled="stage === 'generating'" />
+          </div>
+        </div>
+        <div class="form-row-actions">
+          <UIButton v-if="stage === 'editing'" type="primary" size="medium" @click="handleGenerate">
+            {{ $t({ en: 'Generate', zh: '生成' }) }}
+          </UIButton>
+          <UIButton v-else-if="stage === 'preview'" type="primary" size="medium" @click="handleGenerate">
+            {{ $t({ en: 'Regenerate', zh: '重新生成' }) }}
+          </UIButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- Preview container (shown in all stages except enriching) -->
+    <div v-if="stage !== 'input-brief' && stage !== 'enriching'" class="preview-container">
+      <div v-if="stage === 'generating'" class="preview-loading">
+        <UILoading />
+        <p class="stage-message">
+          {{ $t({ en: 'Generating backdrop image...', zh: '正在生成背景图片...' }) }}
+        </p>
+      </div>
+      <img v-else-if="generatedImageUrl" :src="generatedImageUrl" alt="Generated backdrop" class="preview-image" />
+      <div v-else class="preview-placeholder">
+        <span class="preview-placeholder-text">{{ $t({ en: 'Preview', zh: '预览' }) }}</span>
+      </div>
+
+      <!-- Edit button (shown when image is generated) -->
+      <button
+        v-if="stage === 'preview' && generatedImageUrl && !showModificationForm"
+        class="preview-edit-button"
+        @click="showModificationForm = true"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+        </svg>
+      </button>
+
+      <!-- Modification form (floating over preview) -->
+      <div v-if="showModificationForm && stage === 'preview'" class="modification-form-overlay">
+        <div class="modification-form">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Modification Instructions', zh: '修改指令' }) }}</label>
+            <UITextInput
+              v-model:value="modificationInstruction"
+              type="textarea"
+              :placeholder="$t({ en: 'Describe what you want to modify...', zh: '描述您想要修改的内容...' })"
+              :rows="3"
+            />
+          </div>
+          <div class="modification-actions">
+            <UIButton type="boring" size="medium" @click="cancelModification">
+              {{ $t({ en: 'Cancel', zh: '取消' }) }}
+            </UIButton>
+            <UIButton
+              type="primary"
+              size="medium"
+              :disabled="!modificationInstruction.trim()"
+              @click="submitModification"
+            >
+              {{ $t({ en: 'Submit', zh: '提交' }) }}
+            </UIButton>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Step 4: Preview and confirm -->
+    <div v-if="stage === 'preview'" class="stage-actions">
+      <UIButton type="primary" size="large" :loading="isCreating" @click="handleConfirm">
+        {{ $t({ en: 'Adopt', zh: '采用' }) }}
+      </UIButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { UIButton, UITextInput, UILoading } from '@/components/ui'
+import { enrichSettings, generateBackdropImage, modifyBackdropImage, type BackdropSettings } from '@/apis/assets-gen'
+import { AssetType } from '@/apis/asset'
+import type { Project } from '@/models/project'
+import { Backdrop } from '@/models/backdrop'
+import type { AssetSettings, BackdropCategory } from '@/models/common/asset'
+import { createFileWithWebUrl } from '@/models/common/cloud'
+import ArtStyleInput from './ArtStyleInput.vue'
+import PerspectiveInput from './PerspectiveInput.vue'
+import BackdropCategoryInput from './BackdropCategoryInput.vue'
+
+const props = defineProps<{
+  project: Project
+  settings?: AssetSettings
+  /** Brief description */
+  brief?: string
+}>()
+
+const emit = defineEmits<{
+  generated: [backdrop: Backdrop]
+}>()
+
+type Stage = 'input-brief' | 'enriching' | 'editing' | 'generating' | 'preview'
+
+const stage = ref<Stage>(props.brief ? 'enriching' : 'input-brief')
+const brief = ref(props.brief ?? '')
+const editableSettings = reactive<BackdropSettings>({
+  artStyle: props.settings?.artStyle ?? null,
+  perspective: props.settings?.perspective ?? null,
+  projectDescription: props.settings?.projectDescription ?? null,
+  description: props.settings?.description ?? null,
+  category: props.settings?.category ?? null,
+  name: undefined
+})
+const generatedImageUrl = ref<string>('')
+const isCreating = ref(false)
+const showModificationForm = ref(false)
+const modificationInstruction = ref('')
+
+const description = computed({
+  get: () => editableSettings.description ?? '',
+  set: (value: string) => {
+    editableSettings.description = value
+  }
+})
+
+const backdropName = computed({
+  get: () => editableSettings.name ?? '',
+  set: (value: string) => {
+    editableSettings.name = value
+  }
+})
+
+const artStyle = computed({
+  get: () => editableSettings.artStyle,
+  set: (value: string) => {
+    editableSettings.artStyle = value
+  }
+})
+
+const perspective = computed({
+  get: () => editableSettings.perspective,
+  set: (value: string) => {
+    editableSettings.perspective = value
+  }
+})
+
+const category = computed({
+  get: () => editableSettings.category,
+  set: (value: string) => {
+    editableSettings.category = value as BackdropCategory
+  }
+})
+
+async function handleSubmitBrief() {
+  stage.value = 'enriching'
+  await enrichSettingsWithBrief()
+}
+
+async function enrichSettingsWithBrief() {
+  const settingsToEnrich = {
+    ...props.settings,
+    description: brief.value || props.brief
+  }
+  const enriched = await enrichSettings(settingsToEnrich, AssetType.Backdrop)
+  Object.assign(editableSettings, enriched)
+  stage.value = 'editing'
+}
+
+async function handleGenerate() {
+  stage.value = 'generating'
+  try {
+    generatedImageUrl.value = await generateBackdropImage(editableSettings)
+    stage.value = 'preview'
+    showModificationForm.value = false
+    modificationInstruction.value = ''
+  } catch (error) {
+    console.error('Failed to generate backdrop image:', error)
+    stage.value = 'editing'
+    throw error
+  }
+}
+
+function cancelModification() {
+  showModificationForm.value = false
+  modificationInstruction.value = ''
+}
+
+async function submitModification() {
+  if (!modificationInstruction.value.trim()) return
+
+  stage.value = 'generating'
+  showModificationForm.value = false
+
+  try {
+    generatedImageUrl.value = await modifyBackdropImage(
+      generatedImageUrl.value,
+      modificationInstruction.value,
+      editableSettings
+    )
+    stage.value = 'preview'
+    modificationInstruction.value = ''
+  } catch (error) {
+    console.error('Failed to modify backdrop image:', error)
+    stage.value = 'preview'
+    showModificationForm.value = true
+    throw error
+  }
+}
+
+async function handleConfirm() {
+  isCreating.value = true
+  try {
+    const file = createFileWithWebUrl(generatedImageUrl.value)
+    const backdrop = await Backdrop.create(backdropName.value || 'backdrop', file)
+
+    emit('generated', backdrop)
+  } catch (error) {
+    console.error('Failed to create backdrop:', error)
+    throw error
+  } finally {
+    isCreating.value = false
+  }
+}
+
+// Initialize if brief is provided
+if (props.brief) {
+  enrichSettingsWithBrief()
+}
+</script>
+
+<style lang="scss" scoped>
+.backdrop-generator {
+  display: flex;
+  flex-direction: column;
+  min-height: 436px;
+  gap: var(--ui-gap-middle);
+}
+
+.settings-section {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-gap-middle);
+
+  &--compact {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &--centered {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+.stage-message {
+  font-size: 14px;
+  color: var(--ui-color-grey-700);
+  margin: 0;
+}
+
+.form-row {
+  display: flex;
+  gap: var(--ui-gap-middle);
+
+  .form-row-item {
+    flex: 0 0 auto;
+
+    .form-group {
+      flex-direction: row;
+      align-items: center;
+
+      label {
+        flex-shrink: 0;
+        margin-right: var(--ui-gap-small);
+      }
+    }
+  }
+
+  .form-row-actions {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--ui-color-title);
+  }
+}
+
+.preview-container {
+  position: relative;
+  width: 100%;
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--ui-gap-large);
+  background: var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-2);
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 300px;
+  object-fit: contain;
+}
+
+.preview-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.preview-placeholder-text {
+  font-size: 16px;
+  color: var(--ui-color-grey-500);
+}
+
+.preview-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ui-gap-middle);
+}
+
+.preview-edit-button {
+  position: absolute;
+  top: var(--ui-gap-middle);
+  right: var(--ui-gap-middle);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ui-color-white);
+  border: 1px solid var(--ui-color-grey-300);
+  border-radius: var(--ui-border-radius-1);
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--ui-color-grey-700);
+
+  &:hover {
+    background: var(--ui-color-grey-50);
+    border-color: var(--ui-color-grey-400);
+    color: var(--ui-color-grey-900);
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.modification-form-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: var(--ui-border-radius-2);
+  padding: var(--ui-gap-large);
+}
+
+.modification-form {
+  width: 100%;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-gap-middle);
+  padding: var(--ui-gap-large);
+  background: var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.modification-actions {
+  display: flex;
+  gap: var(--ui-gap-middle);
+  justify-content: flex-end;
+}
+
+.stage-actions {
+  display: flex;
+  gap: var(--ui-gap-middle);
+  justify-content: flex-end;
+}
+</style>
diff --git a/spx-gui/src/components/asset/library/generators/BackdropGeneratorModal.vue b/spx-gui/src/components/asset/library/generators/BackdropGeneratorModal.vue
new file mode 100644
index 000000000..b5912ccd3
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/BackdropGeneratorModal.vue
@@ -0,0 +1,41 @@
+<template>
+  <UIFormModal
+    :title="$t({ en: 'Generate Backdrop', zh: '生成背景' })"
+    :visible="props.visible"
+    style="width: 928px"
+    @update:visible="emit('cancelled')"
+  >
+    <div class="generator-content">
+      <BackdropGenerator :project="props.project" :settings="props.settings" @generated="handleGenerated" />
+    </div>
+  </UIFormModal>
+</template>
+
+<script setup lang="ts">
+import { UIFormModal } from '@/components/ui'
+import type { Project } from '@/models/project'
+import type { Backdrop } from '@/models/backdrop'
+import type { AssetSettings } from '@/models/common/asset'
+import BackdropGenerator from './BackdropGenerator.vue'
+
+const props = defineProps<{
+  visible: boolean
+  project: Project
+  settings?: AssetSettings
+}>()
+
+const emit = defineEmits<{
+  cancelled: []
+  resolved: [backdrop: Backdrop]
+}>()
+
+function handleGenerated(backdrop: Backdrop) {
+  emit('resolved', backdrop)
+}
+</script>
+
+<style lang="scss" scoped>
+.generator-content {
+  min-height: 400px;
+}
+</style>
diff --git a/spx-gui/src/components/asset/library/generators/CostumeGenerator.vue b/spx-gui/src/components/asset/library/generators/CostumeGenerator.vue
new file mode 100644
index 000000000..4eb9445ef
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/CostumeGenerator.vue
@@ -0,0 +1,526 @@
+<template>
+  <div class="costume-generator">
+    <!-- Back button -->
+    <div v-if="showBack" class="back-header">
+      <button class="back-button" @click="emit('back')">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M10 12L6 8L10 4"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        {{ $t({ en: 'Back', zh: '返回' }) }}
+      </button>
+    </div>
+
+    <!-- Brief input (shown in input-brief and enriching stages) -->
+    <form
+      v-if="stage === 'input-brief' || stage === 'enriching'"
+      class="settings-section settings-section--centered"
+      @submit.prevent="handleSubmitBrief"
+    >
+      <div class="form-group">
+        <UITextInput
+          v-model:value="brief"
+          :placeholder="$t({ en: 'Briefly describe the costume...', zh: '简要描述造型...' })"
+          :disabled="stage === 'enriching'"
+        />
+      </div>
+      <div class="form-row">
+        <div class="form-row-actions">
+          <UIButton v-if="stage === 'input-brief'" type="primary" size="medium" html-type="submit">
+            {{ $t({ en: 'Next', zh: '下一步' }) }}
+          </UIButton>
+        </div>
+      </div>
+      <UILoading v-if="stage === 'enriching'" cover />
+    </form>
+
+    <!-- Detailed settings form (shown in editing, generating, preview stages) -->
+    <div v-else class="settings-section" :class="{ 'settings-section--compact': stage === 'generating' }">
+      <div class="form-group">
+        <UITextInput
+          v-model:value="description"
+          type="textarea"
+          :placeholder="$t({ en: 'Describe the costume appearance...', zh: '描述造型外观...' })"
+          :disabled="stage === 'generating'"
+          :rows="2"
+        />
+      </div>
+      <div class="form-row">
+        <div class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Name', zh: '名称' }) }}</label>
+            <UITextInput v-model:value="costumeName" :disabled="stage === 'generating'" />
+          </div>
+        </div>
+        <div class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Art Style', zh: '艺术风格' }) }}</label>
+            <ArtStyleInput v-model:value="artStyle" :disabled="stage === 'generating'" />
+          </div>
+        </div>
+        <div class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Perspective', zh: '游戏视角' }) }}</label>
+            <PerspectiveInput v-model:value="perspective" :disabled="stage === 'generating'" />
+          </div>
+        </div>
+        <div class="form-row-actions">
+          <UIButton v-if="stage === 'editing'" type="primary" size="medium" @click="handleGenerate">
+            {{ $t({ en: 'Generate', zh: '生成' }) }}
+          </UIButton>
+          <UIButton v-else-if="stage === 'preview'" type="primary" size="medium" @click="handleGenerate">
+            {{ $t({ en: 'Regenerate', zh: '重新生成' }) }}
+          </UIButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- Preview container (shown in all stages except enriching) -->
+    <div v-if="stage !== 'input-brief' && stage !== 'enriching'" class="preview-container">
+      <div v-if="stage === 'generating'" class="preview-loading">
+        <UILoading />
+        <p class="stage-message">
+          {{ $t({ en: 'Generating costume image...', zh: '正在生成造型图片...' }) }}
+        </p>
+      </div>
+      <img v-else-if="generatedImageUrl" :src="generatedImageUrl" alt="Generated costume" class="preview-image" />
+      <div v-else class="preview-placeholder">
+        <span class="preview-placeholder-text">{{ $t({ en: 'Preview', zh: '预览' }) }}</span>
+      </div>
+
+      <!-- Edit button (shown when image is generated) -->
+      <button
+        v-if="stage === 'preview' && generatedImageUrl && !showModificationForm"
+        class="preview-edit-button"
+        @click="showModificationForm = true"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+        </svg>
+      </button>
+
+      <!-- Modification form (floating over preview) -->
+      <div v-if="showModificationForm && stage === 'preview'" class="modification-form-overlay">
+        <div class="modification-form">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Modification Instructions', zh: '修改指令' }) }}</label>
+            <UITextInput
+              v-model:value="modificationInstruction"
+              type="textarea"
+              :placeholder="$t({ en: 'Describe what you want to modify...', zh: '描述您想要修改的内容...' })"
+              :rows="3"
+            />
+          </div>
+          <div class="modification-actions">
+            <UIButton type="boring" size="medium" @click="cancelModification">
+              {{ $t({ en: 'Cancel', zh: '取消' }) }}
+            </UIButton>
+            <UIButton
+              type="primary"
+              size="medium"
+              :disabled="!modificationInstruction.trim()"
+              @click="submitModification"
+            >
+              {{ $t({ en: 'Submit', zh: '提交' }) }}
+            </UIButton>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Step 1: Enriching settings -->
+    <!-- <div v-else-if="stage === 'enriching'" class="stage-container">
+      <UILoading />
+      <p class="stage-message">
+        {{ $t({ en: 'Enriching settings...', zh: '正在丰富设置...' }) }}
+      </p>
+    </div> -->
+
+    <!-- Step 4: Preview and confirm -->
+    <div v-if="stage === 'preview'" class="stage-actions">
+      <UIButton type="primary" size="large" :loading="isCreating" @click="handleConfirm">
+        {{ $t({ en: 'Adopt', zh: '采用' }) }}
+      </UIButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { UIButton, UITextInput, UILoading } from '@/components/ui'
+import { enrichSettings, generateCostumeImage, modifyCostumeImage, type CostumeSettings } from '@/apis/assets-gen'
+import type { Sprite } from '@/models/sprite'
+import { Costume } from '@/models/costume'
+import type { AssetSettings } from '@/models/common/asset'
+import { createFileWithWebUrl } from '@/models/common/cloud'
+import ArtStyleInput from './ArtStyleInput.vue'
+import PerspectiveInput from './PerspectiveInput.vue'
+
+const props = defineProps<{
+  sprite: Sprite
+  settings?: AssetSettings
+  /** Brief description */
+  brief?: string
+  /** Costume name (when used within SpriteGenerator) */
+  initialCostumeName?: string
+  /** Whether to show the back button */
+  showBack?: boolean
+}>()
+
+const emit = defineEmits<{
+  generated: [costume: Costume]
+  back: []
+}>()
+
+type Stage = 'input-brief' | 'enriching' | 'editing' | 'generating' | 'preview'
+
+const stage = ref<Stage>(props.brief ? 'enriching' : 'input-brief')
+const brief = ref(props.brief ?? '')
+const editableSettings = reactive<CostumeSettings>({
+  artStyle: props.settings?.artStyle ?? null,
+  perspective: props.settings?.perspective ?? null,
+  projectDescription: props.settings?.projectDescription ?? null,
+  description: props.settings?.description ?? null,
+  category: props.settings?.category ?? null,
+  spriteName: props.sprite.name,
+  name: props.initialCostumeName ?? undefined
+})
+const generatedImageUrl = ref<string>('')
+const isCreating = ref(false)
+const showModificationForm = ref(false)
+const modificationInstruction = ref('')
+
+const description = computed({
+  get: () => editableSettings.description ?? '',
+  set: (value: string) => {
+    editableSettings.description = value
+  }
+})
+
+const costumeName = computed({
+  get: () => editableSettings.name ?? '',
+  set: (value: string) => {
+    editableSettings.name = value
+  }
+})
+
+const artStyle = computed({
+  get: () => editableSettings.artStyle,
+  set: (value: string) => {
+    editableSettings.artStyle = value
+  }
+})
+
+const perspective = computed({
+  get: () => editableSettings.perspective,
+  set: (value: string) => {
+    editableSettings.perspective = value
+  }
+})
+
+async function handleSubmitBrief() {
+  stage.value = 'enriching'
+  await enrichSettingsWithBrief()
+}
+
+async function enrichSettingsWithBrief() {
+  const settingsToEnrich = {
+    ...props.settings,
+    description: brief.value || props.brief
+  }
+  const enriched = await enrichSettings(settingsToEnrich, 'costume')
+  Object.assign(editableSettings, enriched)
+  stage.value = 'editing'
+}
+
+async function handleGenerate() {
+  stage.value = 'generating'
+  try {
+    // Step 3: Generate image
+    generatedImageUrl.value = await generateCostumeImage(editableSettings)
+    stage.value = 'preview'
+    showModificationForm.value = false
+    modificationInstruction.value = ''
+  } catch (error) {
+    console.error('Failed to generate costume image:', error)
+    stage.value = 'editing'
+    throw error
+  }
+}
+
+function cancelModification() {
+  showModificationForm.value = false
+  modificationInstruction.value = ''
+}
+
+async function submitModification() {
+  if (!modificationInstruction.value.trim()) return
+
+  stage.value = 'generating'
+  showModificationForm.value = false
+
+  try {
+    generatedImageUrl.value = await modifyCostumeImage(
+      generatedImageUrl.value,
+      modificationInstruction.value,
+      editableSettings
+    )
+    stage.value = 'preview'
+    modificationInstruction.value = ''
+  } catch (error) {
+    console.error('Failed to modify costume image:', error)
+    stage.value = 'preview'
+    showModificationForm.value = true
+    throw error
+  }
+}
+
+async function handleConfirm() {
+  isCreating.value = true
+  try {
+    // Step 5: Create costume from generated image
+    const file = createFileWithWebUrl(generatedImageUrl.value)
+    const costume = await Costume.create(costumeName.value || 'costume', file)
+    await costume.autoFit()
+
+    emit('generated', costume)
+  } catch (error) {
+    console.error('Failed to create costume:', error)
+    throw error
+  } finally {
+    isCreating.value = false
+  }
+}
+
+// Initialize if brief is provided
+if (props.brief) {
+  enrichSettingsWithBrief()
+}
+</script>
+
+<style lang="scss" scoped>
+.costume-generator {
+  display: flex;
+  flex-direction: column;
+  min-height: 436px;
+  gap: var(--ui-gap-middle);
+}
+
+.back-header {
+  display: flex;
+  align-items: center;
+}
+
+.back-button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: none;
+  border: none;
+  border-radius: var(--ui-border-radius-1);
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--ui-color-grey-700);
+  transition: all 0.2s;
+
+  &:hover {
+    background: var(--ui-color-grey-100);
+    color: var(--ui-color-grey-900);
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+.settings-section {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-gap-middle);
+
+  &--compact {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &--centered {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+.stage-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-gap-middle);
+}
+
+.stage-message {
+  font-size: 14px;
+  color: var(--ui-color-grey-700);
+  margin: 0;
+}
+
+.form-row {
+  display: flex;
+  gap: var(--ui-gap-middle);
+
+  .form-row-item {
+    flex: 0 0 auto;
+
+    .form-group {
+      flex-direction: row;
+      align-items: center;
+
+      label {
+        flex-shrink: 0;
+        margin-right: var(--ui-gap-small);
+      }
+    }
+  }
+
+  .form-row-actions {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--ui-color-title);
+  }
+}
+
+.preview-container {
+  position: relative;
+  width: 100%;
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--ui-gap-large);
+  background: var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-2);
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 300px;
+  object-fit: contain;
+}
+
+.preview-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.preview-placeholder-text {
+  font-size: 16px;
+  color: var(--ui-color-grey-500);
+}
+
+.preview-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ui-gap-middle);
+}
+
+.preview-edit-button {
+  position: absolute;
+  top: var(--ui-gap-middle);
+  right: var(--ui-gap-middle);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ui-color-white);
+  border: 1px solid var(--ui-color-grey-300);
+  border-radius: var(--ui-border-radius-1);
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--ui-color-grey-700);
+
+  &:hover {
+    background: var(--ui-color-grey-50);
+    border-color: var(--ui-color-grey-400);
+    color: var(--ui-color-grey-900);
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.modification-form-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: var(--ui-border-radius-2);
+  padding: var(--ui-gap-large);
+}
+
+.modification-form {
+  width: 100%;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-gap-middle);
+  padding: var(--ui-gap-large);
+  background: var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.modification-actions {
+  display: flex;
+  gap: var(--ui-gap-middle);
+  justify-content: flex-end;
+}
+
+.stage-actions {
+  display: flex;
+  gap: var(--ui-gap-middle);
+  justify-content: flex-end;
+}
+</style>
diff --git a/spx-gui/src/components/asset/library/generators/CostumeGeneratorModal.vue b/spx-gui/src/components/asset/library/generators/CostumeGeneratorModal.vue
new file mode 100644
index 000000000..2a2d29715
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/CostumeGeneratorModal.vue
@@ -0,0 +1,41 @@
+<template>
+  <UIFormModal
+    :title="$t({ en: 'Generate Costume', zh: '生成造型' })"
+    :visible="props.visible"
+    style="width: 928px"
+    @update:visible="emit('cancelled')"
+  >
+    <div class="generator-content">
+      <CostumeGenerator :sprite="props.sprite" :settings="props.settings" @generated="handleGenerated" />
+    </div>
+  </UIFormModal>
+</template>
+
+<script setup lang="ts">
+import { UIFormModal } from '@/components/ui'
+import type { Sprite } from '@/models/sprite'
+import type { Costume } from '@/models/costume'
+import type { AssetSettings } from '@/models/common/asset'
+import CostumeGenerator from './CostumeGenerator.vue'
+
+const props = defineProps<{
+  visible: boolean
+  sprite: Sprite
+  settings?: AssetSettings
+}>()
+
+const emit = defineEmits<{
+  cancelled: []
+  resolved: [costume: Costume]
+}>()
+
+function handleGenerated(costume: Costume) {
+  emit('resolved', costume)
+}
+</script>
+
+<style lang="scss" scoped>
+.generator-content {
+  min-height: 400px;
+}
+</style>
diff --git a/spx-gui/src/components/asset/library/generators/CostumePreview.vue b/spx-gui/src/components/asset/library/generators/CostumePreview.vue
new file mode 100644
index 000000000..b6ce2b181
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/CostumePreview.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="costume-preview">
+    <UILoading v-if="imgLoading" />
+    <img v-else-if="imgSrc" :src="imgSrc" :alt="costume.name" class="costume-image" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UILoading } from '@/components/ui'
+import { useFileUrl } from '@/utils/file'
+import type { Costume } from '@/models/costume'
+
+const props = defineProps<{
+  costume: Costume
+}>()
+
+const [imgSrc, imgLoading] = useFileUrl(() => props.costume.img)
+</script>
+
+<style lang="scss" scoped>
+.costume-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.costume-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+</style>
diff --git a/spx-gui/src/components/asset/library/generators/PerspectiveInput.vue b/spx-gui/src/components/asset/library/generators/PerspectiveInput.vue
new file mode 100644
index 000000000..f4b7636f6
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/PerspectiveInput.vue
@@ -0,0 +1,29 @@
+<template>
+  <UISelect :value="value" @update:value="handleUpdate">
+    <UISelectOption v-for="option in perspectiveOptions" :key="option.value" :value="option.value">
+      {{ $t(option.label) }}
+    </UISelectOption>
+  </UISelect>
+</template>
+
+<script setup lang="ts">
+import { UISelect, UISelectOption } from '@/components/ui'
+import { perspectiveOptions } from '@/components/project/types'
+
+defineProps<{
+  value: string | null
+}>()
+
+const emit = defineEmits<{
+  'update:value': [string]
+}>()
+
+function handleUpdate(value: string | null) {
+  if (value) {
+    emit('update:value', value)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/spx-gui/src/components/asset/library/generators/SoundCategoryInput.vue b/spx-gui/src/components/asset/library/generators/SoundCategoryInput.vue
new file mode 100644
index 000000000..17d1c11db
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/SoundCategoryInput.vue
@@ -0,0 +1,28 @@
+<template>
+  <UISelect :value="value" @update:value="handleUpdate">
+    <UISelectOption v-for="option in soundCategoryOptions" :key="option.value" :value="option.value">
+      {{ $t(option.label) }}
+    </UISelectOption>
+  </UISelect>
+</template>
+
+<script setup lang="ts">
+import { UISelect, UISelectOption } from '@/components/ui'
+import { soundCategoryOptions } from '@/components/project/types'
+
+defineProps<{
+  value: string | null
+}>()
+
+const emit = defineEmits<{
+  'update:value': [string]
+}>()
+
+function handleUpdate(value: string | null) {
+  if (value) {
+    emit('update:value', value)
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/library/generators/SoundGenerator.vue b/spx-gui/src/components/asset/library/generators/SoundGenerator.vue
new file mode 100644
index 000000000..cb835e6dc
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/SoundGenerator.vue
@@ -0,0 +1,382 @@
+<template>
+  <div class="sound-generator">
+    <!-- Step header -->
+    <div class="step-header">
+      <template v-if="stage === 'input-brief' || stage === 'enriching'">
+        <span class="step-number">{{ $t({ en: 'Step 1', zh: '第 1 步' }) }}</span>
+        <span class="step-title">{{ $t({ en: 'Describe the Sound', zh: '描述声音' }) }}</span>
+      </template>
+      <template v-else-if="stage === 'editing' || stage === 'generating'">
+        <span class="step-number">{{ $t({ en: 'Step 2', zh: '第 2 步' }) }}</span>
+        <span class="step-title">{{ $t({ en: 'Edit Sound Details', zh: '编辑声音细节' }) }}</span>
+      </template>
+      <template v-else-if="stage === 'preview'">
+        <span class="step-number">{{ $t({ en: 'Step 3', zh: '第 3 步' }) }}</span>
+        <span class="step-title">{{ $t({ en: 'Preview & Confirm', zh: '预览并确认' }) }}</span>
+      </template>
+    </div>
+
+    <!-- Brief input (shown in input-brief and enriching stages) -->
+    <form
+      v-if="stage === 'input-brief' || stage === 'enriching'"
+      class="settings-section settings-section--centered"
+      @submit.prevent="handleSubmitBrief"
+    >
+      <div class="form-group">
+        <UITextInput
+          v-model:value="brief"
+          :placeholder="$t({ en: 'Briefly describe the sound...', zh: '简要描述声音...' })"
+          :disabled="stage === 'enriching'"
+        />
+      </div>
+      <div class="form-row">
+        <div class="form-row-actions">
+          <UIButton v-if="stage === 'input-brief'" type="primary" size="medium" html-type="submit">
+            {{ $t({ en: 'Next', zh: '下一步' }) }}
+          </UIButton>
+        </div>
+      </div>
+      <UILoading v-if="stage === 'enriching'" cover />
+    </form>
+
+    <!-- Detailed settings form (shown in editing, generating, preview stages) -->
+    <div v-else class="settings-section" :class="{ 'settings-section--compact': stage === 'generating' }">
+      <div class="form-group">
+        <UITextInput
+          v-model:value="description"
+          type="textarea"
+          :placeholder="$t({ en: 'Describe the sound effect or music...', zh: '描述声音效果或音乐...' })"
+          :disabled="stage === 'generating'"
+          :rows="2"
+        />
+      </div>
+      <div class="form-row">
+        <div class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Name', zh: '名称' }) }}</label>
+            <UITextInput v-model:value="soundName" :disabled="stage === 'generating'" style="width: 120px" />
+          </div>
+        </div>
+        <div class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Duration', zh: '时长' }) }}</label>
+            <UITextInput v-model:value="durationStr" :disabled="stage === 'generating'" style="width: 80px" />
+          </div>
+        </div>
+        <div class="form-row-item">
+          <div class="form-group">
+            <label>{{ $t({ en: 'Category', zh: '类别' }) }}</label>
+            <SoundCategoryInput v-model:value="category" :disabled="stage === 'generating'" />
+          </div>
+        </div>
+        <div class="form-row-actions">
+          <UIButton v-if="stage === 'editing'" type="primary" size="medium" @click="handleGenerate">
+            {{ $t({ en: 'Generate', zh: '生成' }) }}
+          </UIButton>
+          <UIButton v-else-if="stage === 'preview'" type="primary" size="medium" @click="handleGenerate">
+            {{ $t({ en: 'Regenerate', zh: '重新生成' }) }}
+          </UIButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- Preview container (shown in all stages except input-brief and enriching) -->
+    <div v-if="stage !== 'input-brief' && stage !== 'enriching'" class="preview-container">
+      <div v-if="stage === 'generating'" class="preview-loading">
+        <UILoading />
+        <p class="stage-message">
+          {{ $t({ en: 'Generating sound...', zh: '正在生成声音...' }) }}
+        </p>
+      </div>
+      <div v-else-if="generatedAudioUrl" class="preview-audio-wrapper">
+        <audio ref="audioRef" :src="generatedAudioUrl" controls class="preview-audio" />
+      </div>
+      <div v-else class="preview-placeholder">
+        <span class="preview-placeholder-text">{{ $t({ en: 'Preview', zh: '预览' }) }}</span>
+      </div>
+    </div>
+
+    <!-- Action buttons -->
+    <div v-if="stage === 'preview'" class="stage-actions">
+      <UIButton type="primary" size="large" :loading="isCreating" @click="handleConfirm">
+        {{ $t({ en: 'Adopt', zh: '采用' }) }}
+      </UIButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { UIButton, UITextInput, UILoading } from '@/components/ui'
+import { enrichSettings, generateSoundAudio, type SoundSettings } from '@/apis/assets-gen'
+import { AssetType } from '@/apis/asset'
+import type { Project } from '@/models/project'
+import { Sound } from '@/models/sound'
+import type { AssetSettings, SoundCategory } from '@/models/common/asset'
+import { fromBlob } from '@/models/common/file'
+import { getSoundName } from '@/models/common/asset-name'
+import SoundCategoryInput from './SoundCategoryInput.vue'
+
+const props = defineProps<{
+  project: Project
+  settings?: AssetSettings
+  /** Brief description */
+  brief?: string
+}>()
+
+const emit = defineEmits<{
+  generated: [sound: Sound]
+}>()
+
+type Stage = 'input-brief' | 'enriching' | 'editing' | 'generating' | 'preview'
+
+const stage = ref<Stage>(props.brief ? 'enriching' : 'input-brief')
+const brief = ref(props.brief ?? '')
+const editableSettings = reactive<SoundSettings>({
+  artStyle: null,
+  perspective: null,
+  projectDescription: props.settings?.projectDescription ?? null,
+  description: props.settings?.description ?? null,
+  category: props.settings?.category ?? null,
+  name: undefined,
+  duration: 3
+})
+const generatedAudioUrl = ref<string>('')
+const isCreating = ref(false)
+const audioRef = ref<HTMLAudioElement>()
+
+const description = computed({
+  get: () => editableSettings.description ?? '',
+  set: (value: string) => {
+    editableSettings.description = value
+  }
+})
+
+const soundName = computed({
+  get: () => editableSettings.name ?? '',
+  set: (value: string) => {
+    editableSettings.name = value
+  }
+})
+
+const durationStr = computed({
+  get: () => (editableSettings.duration ? `${editableSettings.duration}s` : ''),
+  set: (value: string) => {
+    const numStr = value.replace(/s$/, '')
+    const parsed = parseFloat(numStr)
+    if (!isNaN(parsed) && parsed > 0) {
+      editableSettings.duration = parsed
+    }
+  }
+})
+
+const category = computed({
+  get: () => editableSettings.category,
+  set: (value: string) => {
+    editableSettings.category = value as SoundCategory
+  }
+})
+
+async function handleSubmitBrief() {
+  stage.value = 'enriching'
+  await enrichSettingsWithBrief()
+}
+
+async function enrichSettingsWithBrief() {
+  const settingsToEnrich = {
+    ...props.settings,
+    description: brief.value || props.brief
+  }
+  const enriched = await enrichSettings(settingsToEnrich, AssetType.Sound)
+  Object.assign(editableSettings, enriched)
+  stage.value = 'editing'
+}
+
+async function handleGenerate() {
+  stage.value = 'generating'
+  try {
+    generatedAudioUrl.value = await generateSoundAudio(editableSettings)
+    stage.value = 'preview'
+  } catch (error) {
+    console.error('Failed to generate sound:', error)
+    stage.value = 'editing'
+    throw error
+  }
+}
+
+async function handleConfirm() {
+  isCreating.value = true
+  try {
+    const response = await fetch(generatedAudioUrl.value)
+    const blob = await response.blob()
+    const finalName = editableSettings.name || getSoundName(props.project)
+
+    // Determine file extension from blob type
+    const extension = blob.type.includes('mp3')
+      ? 'mp3'
+      : blob.type.includes('wav')
+        ? 'wav'
+        : blob.type.includes('ogg')
+          ? 'ogg'
+          : 'mp3'
+
+    const file = fromBlob(`${finalName}.${extension}`, blob)
+    const sound = await Sound.create(finalName, file)
+
+    emit('generated', sound)
+  } catch (error) {
+    console.error('Failed to create sound:', error)
+    throw error
+  } finally {
+    isCreating.value = false
+  }
+}
+
+// Initialize if brief is provided
+if (props.brief) {
+  enrichSettingsWithBrief()
+}
+</script>
+
+<style lang="scss" scoped>
+.sound-generator {
+  display: flex;
+  flex-direction: column;
+  min-height: 436px;
+  gap: var(--ui-gap-middle);
+}
+
+.step-header {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-gap-small);
+  padding-bottom: var(--ui-gap-small);
+}
+
+.step-number {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ui-color-primary-main);
+  background: var(--ui-color-primary-100);
+  padding: 2px 8px;
+  border-radius: var(--ui-border-radius-1);
+}
+
+.step-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ui-color-title);
+}
+
+.settings-section {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-gap-middle);
+
+  &--compact {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &--centered {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+.stage-message {
+  font-size: 14px;
+  color: var(--ui-color-grey-700);
+  margin: 0;
+}
+
+.form-row {
+  display: flex;
+  gap: var(--ui-gap-middle);
+
+  .form-row-item {
+    flex: 0 0 auto;
+
+    .form-group {
+      flex-direction: row;
+      align-items: center;
+
+      label {
+        flex-shrink: 0;
+        margin-right: var(--ui-gap-small);
+      }
+    }
+  }
+
+  .form-row-actions {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--ui-color-title);
+  }
+}
+
+.preview-container {
+  position: relative;
+  flex: 1;
+  width: 100%;
+  min-height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--ui-gap-large);
+  background: var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-2);
+}
+
+.preview-audio-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.preview-audio {
+  width: 100%;
+  max-width: 500px;
+}
+
+.preview-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.preview-placeholder-text {
+  font-size: 16px;
+  color: var(--ui-color-grey-500);
+}
+
+.preview-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ui-gap-middle);
+}
+
+.stage-actions {
+  display: flex;
+  gap: var(--ui-gap-middle);
+  justify-content: flex-end;
+}
+</style>
diff --git a/spx-gui/src/components/asset/library/generators/SoundGeneratorModal.vue b/spx-gui/src/components/asset/library/generators/SoundGeneratorModal.vue
new file mode 100644
index 000000000..0ffcde92c
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/SoundGeneratorModal.vue
@@ -0,0 +1,41 @@
+<template>
+  <UIFormModal
+    :title="$t({ en: 'Generate Sound', zh: '生成声音' })"
+    :visible="props.visible"
+    style="width: 928px"
+    @update:visible="emit('cancelled')"
+  >
+    <div class="generator-content">
+      <SoundGenerator :project="props.project" :settings="props.settings" @generated="handleGenerated" />
+    </div>
+  </UIFormModal>
+</template>
+
+<script setup lang="ts">
+import { UIFormModal } from '@/components/ui'
+import type { Project } from '@/models/project'
+import type { Sound } from '@/models/sound'
+import type { AssetSettings } from '@/models/common/asset'
+import SoundGenerator from './SoundGenerator.vue'
+
+const props = defineProps<{
+  visible: boolean
+  project: Project
+  settings?: AssetSettings
+}>()
+
+const emit = defineEmits<{
+  cancelled: []
+  resolved: [sound: Sound]
+}>()
+
+function handleGenerated(sound: Sound) {
+  emit('resolved', sound)
+}
+</script>
+
+<style lang="scss" scoped>
+.generator-content {
+  min-height: 400px;
+}
+</style>
diff --git a/spx-gui/src/components/asset/library/generators/SpriteCategoryInput.vue b/spx-gui/src/components/asset/library/generators/SpriteCategoryInput.vue
new file mode 100644
index 000000000..dc42d4207
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/SpriteCategoryInput.vue
@@ -0,0 +1,28 @@
+<template>
+  <UISelect :value="value" @update:value="handleUpdate">
+    <UISelectOption v-for="option in spriteCategoryOptions" :key="option.value" :value="option.value">
+      {{ $t(option.label) }}
+    </UISelectOption>
+  </UISelect>
+</template>
+
+<script setup lang="ts">
+import { UISelect, UISelectOption } from '@/components/ui'
+import { spriteCategoryOptions } from '@/components/project/types'
+
+defineProps<{
+  value: string | null
+}>()
+
+const emit = defineEmits<{
+  'update:value': [string]
+}>()
+
+function handleUpdate(value: string | null) {
+  if (value) {
+    emit('update:value', value)
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/library/generators/SpriteGenerator.vue b/spx-gui/src/components/asset/library/generators/SpriteGenerator.vue
new file mode 100644
index 000000000..fec504e23
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/SpriteGenerator.vue
@@ -0,0 +1,1040 @@
+<template>
+  <div class="sprite-generator">
+    <!-- Costume Generator View (when editing a specific costume) -->
+    <template v-if="editingCostumeIndex != null">
+      <div class="step-header">
+        <span class="step-number">{{ $t({ en: 'Step 3', zh: '第 3 步' }) }}</span>
+        <span class="step-title">{{
+          $t({ en: 'Generate Costume', zh: '生成造型' }) + ': ' + (editingCostumeName ?? '')
+        }}</span>
+      </div>
+      <CostumeGenerator
+        :sprite="sprite"
+        :settings="costumeGeneratorSettings"
+        :brief="editingCostumeBrief"
+        :initial-costume-name="editingCostumeName"
+        show-back
+        @generated="handleCostumeGenerated"
+        @back="handleCostumeGeneratorBack"
+      />
+    </template>
+
+    <!-- Animation Generator View (when editing a specific animation) -->
+    <template v-else-if="editingAnimationIndex != null">
+      <div class="step-header">
+        <span class="step-number">{{ $t({ en: 'Step 3', zh: '第 3 步' }) }}</span>
+        <span class="step-title">{{
+          $t({ en: 'Generate Animation', zh: '生成动画' }) + ': ' + (editingAnimationName ?? '')
+        }}</span>
+      </div>
+      <AnimationGenerator
+        :sprite="sprite"
+        :settings="animationGeneratorSettings"
+        :brief="editingAnimationBrief"
+        :initial-animation-name="editingAnimationName"
+        :saved-state="editingAnimationSavedState"
+        show-back
+        @generated="handleAnimationGenerated"
+        @back="handleAnimationGeneratorBack"
+        @hide="handleAnimationGeneratorHide"
+      />
+    </template>
+
+    <!-- Main Sprite Generator View -->
+    <template v-else>
+      <!-- Step header -->
+      <div class="step-header">
+        <template v-if="stage === 'input-brief' || stage === 'enriching'">
+          <span class="step-number">{{ $t({ en: 'Step 1', zh: '第 1 步' }) }}</span>
+          <span class="step-title">{{ $t({ en: 'Describe the Sprite', zh: '描述精灵' }) }}</span>
+        </template>
+        <template v-else-if="stage === 'editing' || stage === 'generating'">
+          <span class="step-number">{{ $t({ en: 'Step 2', zh: '第 2 步' }) }}</span>
+          <span class="step-title">{{ $t({ en: 'Edit Sprite Details', zh: '编辑精灵细节' }) }}</span>
+        </template>
+        <template v-else-if="stage === 'preview'">
+          <span class="step-number">{{ $t({ en: 'Step 3', zh: '第 3 步' }) }}</span>
+          <span class="step-title">{{ $t({ en: 'Generate Costumes & Animations', zh: '生成造型和动画' }) }}</span>
+        </template>
+      </div>
+
+      <!-- Brief input (shown in input-brief and enriching stages) -->
+      <form
+        v-if="stage === 'input-brief' || stage === 'enriching'"
+        class="settings-section settings-section--centered"
+        @submit.prevent="handleSubmitBrief"
+      >
+        <div class="form-group">
+          <UITextInput
+            v-model:value="brief"
+            :placeholder="$t({ en: 'Briefly describe the sprite...', zh: '简要描述精灵...' })"
+            :disabled="stage === 'enriching'"
+          />
+        </div>
+        <div class="form-row">
+          <div class="form-row-actions">
+            <UIButton v-if="stage === 'input-brief'" type="primary" size="medium" html-type="submit">
+              {{ $t({ en: 'Next', zh: '下一步' }) }}
+            </UIButton>
+          </div>
+        </div>
+        <UILoading v-if="stage === 'enriching'" cover />
+      </form>
+
+      <!-- Detailed settings form (shown in editing and later stages) -->
+      <div v-else class="settings-section" :class="{ 'settings-section--compact': isGenerating }">
+        <div class="form-group">
+          <UITextInput
+            v-model:value="description"
+            type="textarea"
+            :placeholder="$t({ en: 'Describe the sprite appearance and behaviors...', zh: '描述精灵的外观和行为...' })"
+            :disabled="isGenerating"
+            :rows="2"
+          />
+        </div>
+        <div class="form-row">
+          <div class="form-row-item">
+            <div class="form-group">
+              <label>{{ $t({ en: 'Name', zh: '名称' }) }}</label>
+              <UITextInput v-model:value="spriteName" :disabled="isGenerating" style="width: 120px" />
+            </div>
+          </div>
+          <div class="form-row-item">
+            <div class="form-group">
+              <label>{{ $t({ en: 'Art Style', zh: '艺术风格' }) }}</label>
+              <ArtStyleInput v-model:value="artStyle" :disabled="isGenerating" />
+            </div>
+          </div>
+          <div class="form-row-item">
+            <div class="form-group">
+              <label>{{ $t({ en: 'Perspective', zh: '游戏视角' }) }}</label>
+              <PerspectiveInput v-model:value="perspective" :disabled="isGenerating" />
+            </div>
+          </div>
+          <div class="form-row-item">
+            <div class="form-group">
+              <label>{{ $t({ en: 'Category', zh: '类别' }) }}</label>
+              <SpriteCategoryInput v-model:value="category" :disabled="isGenerating" />
+            </div>
+          </div>
+          <div class="form-row-actions">
+            <UIButton v-if="stage === 'editing'" type="primary" size="medium" @click="handleGenerate">
+              {{ $t({ en: 'Generate', zh: '生成' }) }}
+            </UIButton>
+            <UIButton v-else-if="stage === 'preview'" type="primary" size="medium" @click="handleGenerate">
+              {{ $t({ en: 'Regenerate', zh: '重新生成' }) }}
+            </UIButton>
+          </div>
+        </div>
+      </div>
+
+      <!-- Preview container (shown in all stages except input-brief and enriching) -->
+      <div v-if="stage !== 'input-brief' && stage !== 'enriching'" class="preview-container">
+        <div v-if="stage === 'generating'" class="preview-loading">
+          <UILoading />
+          <p class="stage-message">
+            {{ $t({ en: 'Generating sprite content descriptions...', zh: '正在生成精灵内容描述...' }) }}
+          </p>
+        </div>
+        <div v-else-if="stage === 'editing'" class="preview-placeholder">
+          <span class="preview-placeholder-text">{{ $t({ en: 'Preview', zh: '预览' }) }}</span>
+        </div>
+        <div v-else class="preview-content">
+          <!-- Costumes section -->
+          <div class="content-section">
+            <h4 class="section-title">{{ $t({ en: 'Costumes', zh: '造型' }) }}</h4>
+            <div class="content-list">
+              <div
+                v-for="(item, index) in costumeItems"
+                :key="`costume-${index}`"
+                class="content-item"
+                :class="{ 'content-item--pending': !item.generated }"
+                @click="handleCostumeClick(index)"
+              >
+                <button
+                  v-if="index !== 0"
+                  class="content-item-delete"
+                  :title="$t({ en: 'Delete', zh: '删除' })"
+                  @click.stop="handleDeleteCostume(index)"
+                >
+                  ×
+                </button>
+                <div class="content-item-preview">
+                  <img v-if="item.imageUrl" :src="item.imageUrl" :alt="item.name" class="content-item-image" />
+                  <div v-else class="content-item-placeholder">
+                    <span class="content-item-placeholder-icon">🎨</span>
+                  </div>
+                </div>
+                <div class="content-item-info">
+                  <span class="content-item-name">{{ item.name }}</span>
+                  <span v-if="!item.generated" class="content-item-status">{{
+                    $t({ en: 'Click to generate', zh: '点击生成' })
+                  }}</span>
+                </div>
+              </div>
+              <div class="content-item content-item--add" @click="handleAddCostume">
+                <div class="content-item-preview">
+                  <div class="content-item-placeholder">
+                    <span class="content-item-add-icon">+</span>
+                  </div>
+                </div>
+                <div class="content-item-info">
+                  <span class="content-item-name">{{ $t({ en: 'Add', zh: '添加' }) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Animations section -->
+          <div class="content-section">
+            <h4 class="section-title">{{ $t({ en: 'Animations', zh: '动画' }) }}</h4>
+            <div class="content-list">
+              <div
+                v-for="(item, index) in animationItems"
+                :key="`animation-${index}`"
+                class="content-item"
+                :class="{
+                  'content-item--pending': !item.generated && !item.savedState,
+                  'content-item--generating': !item.generated && item.savedState != null,
+                  'content-item--disabled': !canGenerateAnimation && !item.savedState
+                }"
+                :title="
+                  !canGenerateAnimation && !item.savedState
+                    ? $t({ en: 'Generate default costume first', zh: '请先生成默认造型' })
+                    : ''
+                "
+                @click="handleAnimationClick(index)"
+              >
+                <button
+                  class="content-item-delete"
+                  :title="$t({ en: 'Delete', zh: '删除' })"
+                  @click.stop="handleDeleteAnimation(index)"
+                >
+                  ×
+                </button>
+                <div class="content-item-preview">
+                  <div v-if="item.thumbnailUrl" class="content-item-thumbnail">
+                    <img :src="item.thumbnailUrl" :alt="item.name" class="content-item-image" />
+                    <span class="content-item-play-icon">▶</span>
+                  </div>
+                  <div
+                    v-else-if="item.savedState"
+                    class="content-item-placeholder content-item-placeholder--generating"
+                  >
+                    <UILoading :size="24" />
+                  </div>
+                  <div v-else class="content-item-placeholder">
+                    <span class="content-item-placeholder-icon">🎬</span>
+                  </div>
+                </div>
+                <div class="content-item-info">
+                  <span class="content-item-name">{{ item.name }}</span>
+                  <span v-if="item.savedState" class="content-item-status content-item-status--generating">{{
+                    $t({ en: 'Generating...', zh: '生成中...' })
+                  }}</span>
+                  <span v-else-if="!item.generated" class="content-item-status">{{
+                    $t({ en: 'Click to generate', zh: '点击生成' })
+                  }}</span>
+                </div>
+              </div>
+              <div
+                class="content-item content-item--add"
+                :class="{ 'content-item--disabled': !canGenerateAnimation }"
+                :title="
+                  !canGenerateAnimation ? $t({ en: 'Generate default costume first', zh: '请先生成默认造型' }) : ''
+                "
+                @click="handleAddAnimation"
+              >
+                <div class="content-item-preview">
+                  <div class="content-item-placeholder">
+                    <span class="content-item-add-icon">+</span>
+                  </div>
+                </div>
+                <div class="content-item-info">
+                  <span class="content-item-name">{{ $t({ en: 'Add', zh: '添加' }) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Action buttons -->
+      <div v-if="stage === 'preview'" class="stage-actions">
+        <UIButton v-if="hasGeneratingAnimation" type="primary" size="large" @click="handleHide">
+          {{ $t({ en: 'Hide', zh: '收起' }) }}
+        </UIButton>
+        <UIButton
+          v-else
+          type="primary"
+          size="large"
+          :loading="isCreating"
+          :disabled="!canConfirm"
+          @click="handleConfirm"
+        >
+          {{ $t({ en: 'Adopt', zh: '采用' }) }}
+        </UIButton>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { UIButton, UITextInput, UILoading } from '@/components/ui'
+import { AssetType } from '@/apis/asset'
+import {
+  enrichSettings,
+  generateSpriteContentDescriptions,
+  type SpriteSettings,
+  type CostumeDescription,
+  type AnimationDescription
+} from '@/apis/assets-gen'
+import type { Project } from '@/models/project'
+import { Sprite } from '@/models/sprite'
+import { Costume } from '@/models/costume'
+import { Animation } from '@/models/animation'
+import type { AssetSettings, SpriteCategory } from '@/models/common/asset'
+import { getSpriteName } from '@/models/common/asset-name'
+import ArtStyleInput from './ArtStyleInput.vue'
+import PerspectiveInput from './PerspectiveInput.vue'
+import SpriteCategoryInput from './SpriteCategoryInput.vue'
+import CostumeGenerator from './CostumeGenerator.vue'
+import AnimationGenerator, { type AnimationGeneratorState } from './AnimationGenerator.vue'
+
+type CostumeItem = CostumeDescription & {
+  generated: boolean
+  imageUrl: string | null
+  costume: Costume | null
+}
+
+type AnimationItem = AnimationDescription & {
+  generated: boolean
+  thumbnailUrl: string | null
+  animation: Animation | null
+  savedState: AnimationGeneratorState | null
+}
+
+export type SpriteGeneratorState = {
+  stage: Stage
+  brief: string
+  editableSettings: SpriteSettings
+  costumeItems: CostumeItem[]
+  animationItems: AnimationItem[]
+  sprite: Sprite
+}
+
+const props = defineProps<{
+  project: Project
+  settings?: AssetSettings
+  /** Brief description */
+  brief?: string
+  /** Saved state for restoration */
+  savedState?: SpriteGeneratorState
+}>()
+
+const emit = defineEmits<{
+  generated: [sprite: Sprite]
+  hide: []
+}>()
+
+type Stage = 'input-brief' | 'enriching' | 'editing' | 'generating' | 'preview'
+
+function getInitialStage(): Stage {
+  if (props.savedState) return props.savedState.stage
+  if (props.brief) return 'enriching'
+  return 'input-brief'
+}
+
+const stage = ref<Stage>(getInitialStage())
+const brief = ref(props.savedState?.brief ?? props.brief ?? '')
+const editableSettings = reactive<SpriteSettings>(
+  props.savedState?.editableSettings ?? {
+    artStyle: props.settings?.artStyle ?? null,
+    perspective: props.settings?.perspective ?? null,
+    projectDescription: props.settings?.projectDescription ?? null,
+    description: props.settings?.description ?? null,
+    category: props.settings?.category ?? null,
+    name: undefined
+  }
+)
+const isCreating = ref(false)
+
+const costumeItems = ref<CostumeItem[]>(props.savedState?.costumeItems ?? [])
+const animationItems = ref<AnimationItem[]>(props.savedState?.animationItems ?? [])
+
+// Single sprite instance used for costume generation, animation generation, and final submit
+const sprite = props.savedState?.sprite ?? Sprite.create(editableSettings.name || 'Sprite')
+
+// For costume generation within SpriteGenerator
+const editingCostumeIndex = ref<number | null>(null)
+
+// For animation generation within SpriteGenerator
+const editingAnimationIndex = ref<number | null>(null)
+
+const costumeGeneratorSettings = computed<AssetSettings>(() => ({
+  artStyle: editableSettings.artStyle,
+  perspective: editableSettings.perspective,
+  projectDescription: editableSettings.projectDescription,
+  description: editableSettings.description,
+  category: editableSettings.category
+}))
+
+const animationGeneratorSettings = computed<AssetSettings>(() => ({
+  artStyle: editableSettings.artStyle,
+  perspective: editableSettings.perspective,
+  projectDescription: editableSettings.projectDescription,
+  description: editableSettings.description,
+  category: editableSettings.category
+}))
+
+const editingAnimationBrief = computed(() => {
+  if (editingAnimationIndex.value == null) return undefined
+  const item = animationItems.value[editingAnimationIndex.value]
+  return item?.description ?? undefined
+})
+
+const editingAnimationName = computed(() => {
+  if (editingAnimationIndex.value == null) return undefined
+  const item = animationItems.value[editingAnimationIndex.value]
+  return item?.name ?? undefined
+})
+
+const editingAnimationSavedState = computed(() => {
+  if (editingAnimationIndex.value == null) return undefined
+  const item = animationItems.value[editingAnimationIndex.value]
+  return item?.savedState ?? undefined
+})
+
+const editingCostumeBrief = computed(() => {
+  if (editingCostumeIndex.value == null) return undefined
+  const item = costumeItems.value[editingCostumeIndex.value]
+  return item?.description ?? undefined
+})
+
+const editingCostumeName = computed(() => {
+  if (editingCostumeIndex.value == null) return undefined
+  const item = costumeItems.value[editingCostumeIndex.value]
+  return item?.name ?? undefined
+})
+
+const isGenerating = computed(() => stage.value === 'generating')
+
+// Animation generation requires the default costume (first costume) to be generated
+const canGenerateAnimation = computed(() => {
+  const defaultCostumeItem = costumeItems.value[0]
+  return defaultCostumeItem?.generated === true && defaultCostumeItem.costume != null
+})
+
+const canConfirm = computed(() => {
+  // At least one costume must be generated
+  return costumeItems.value.some((item) => item.generated)
+})
+
+const hasGeneratingAnimation = computed(() => {
+  return animationItems.value.some((item) => item.savedState != null)
+})
+
+const description = computed({
+  get: () => editableSettings.description ?? '',
+  set: (value: string) => {
+    editableSettings.description = value
+  }
+})
+
+const spriteName = computed({
+  get: () => editableSettings.name ?? '',
+  set: (value: string) => {
+    editableSettings.name = value
+  }
+})
+
+const artStyle = computed({
+  get: () => editableSettings.artStyle,
+  set: (value: string) => {
+    editableSettings.artStyle = value
+  }
+})
+
+const perspective = computed({
+  get: () => editableSettings.perspective,
+  set: (value: string) => {
+    editableSettings.perspective = value
+  }
+})
+
+const category = computed({
+  get: () => editableSettings.category,
+  set: (value: string) => {
+    editableSettings.category = value as SpriteCategory
+  }
+})
+
+async function handleSubmitBrief() {
+  stage.value = 'enriching'
+  await enrichSettingsWithBrief()
+}
+
+async function enrichSettingsWithBrief() {
+  const settingsToEnrich = {
+    ...props.settings,
+    description: brief.value || props.brief
+  }
+  const enriched = await enrichSettings(settingsToEnrich, AssetType.Sprite)
+  Object.assign(editableSettings, enriched)
+  stage.value = 'editing'
+}
+
+async function handleGenerate() {
+  stage.value = 'generating'
+  try {
+    const descriptions = await generateSpriteContentDescriptions(editableSettings)
+
+    // Convert descriptions to items with pending state
+    costumeItems.value = descriptions.costumes.map((desc) => ({
+      ...desc,
+      generated: false,
+      imageUrl: null,
+      costume: null
+    }))
+
+    animationItems.value = descriptions.animations.map((desc) => ({
+      ...desc,
+      generated: false,
+      thumbnailUrl: null,
+      animation: null,
+      savedState: null
+    }))
+
+    stage.value = 'preview'
+
+    // Automatically start generating the default costume (first costume)
+    if (costumeItems.value.length > 0) {
+      editingCostumeIndex.value = 0
+    }
+  } catch (error) {
+    console.error('Failed to generate sprite content descriptions:', error)
+    stage.value = 'editing'
+    throw error
+  }
+}
+
+function handleCostumeClick(index: number) {
+  const item = costumeItems.value[index]
+  if (item.generated) {
+    // Already generated - allow re-generation by opening the generator
+    editingCostumeIndex.value = index
+  } else {
+    // Open costume generator for this item
+    editingCostumeIndex.value = index
+  }
+}
+
+function handleCostumeGenerated(costume: Costume) {
+  if (editingCostumeIndex.value == null) return
+
+  const index = editingCostumeIndex.value
+  const item = costumeItems.value[index]
+
+  // Update the costume item with generated data
+  item.generated = true
+  item.costume = costume
+
+  // Add costume to sprite
+  sprite.addCostume(costume)
+
+  // Get image URL asynchronously
+  costume.img
+    .url(() => {
+      // Store cleanup for later (when component unmounts or item is removed)
+      // For now, we'll let it clean up when the file is garbage collected
+    })
+    .then((url) => {
+      item.imageUrl = url
+    })
+
+  // Return to sprite preview
+  editingCostumeIndex.value = null
+}
+
+function handleCostumeGeneratorBack() {
+  editingCostumeIndex.value = null
+}
+
+function handleAnimationClick(index: number) {
+  const item = animationItems.value[index]
+
+  // If animation has saved state (generating in background), allow resuming
+  if (item.savedState != null) {
+    editingAnimationIndex.value = index
+    return
+  }
+
+  // Only allow new animation generation if default costume is generated
+  if (!canGenerateAnimation.value) {
+    return
+  }
+
+  // Open animation generator for this item
+  editingAnimationIndex.value = index
+}
+
+function handleAnimationGenerated(animation: Animation) {
+  if (editingAnimationIndex.value == null) return
+
+  const index = editingAnimationIndex.value
+  const item = animationItems.value[index]
+
+  // Update the animation item with generated data
+  item.generated = true
+  item.animation = animation
+  item.savedState = null
+
+  // Add animation to sprite
+  sprite.addAnimation(animation)
+
+  // Get thumbnail URL from the first frame of animation
+  const firstFrame = animation.costumes[0]
+  if (firstFrame) {
+    firstFrame.img
+      .url(() => {
+        // Cleanup handler
+      })
+      .then((url) => {
+        item.thumbnailUrl = url
+      })
+  }
+
+  // Return to sprite preview
+  editingAnimationIndex.value = null
+}
+
+function handleAnimationGeneratorHide(state: AnimationGeneratorState) {
+  if (editingAnimationIndex.value == null) return
+
+  const index = editingAnimationIndex.value
+  const item = animationItems.value[index]
+
+  // Save the state for later restoration
+  item.savedState = state
+
+  // Return to sprite preview
+  editingAnimationIndex.value = null
+}
+
+function handleAnimationGeneratorBack() {
+  editingAnimationIndex.value = null
+}
+
+function handleAddCostume() {
+  // Add a new costume item and open the generator
+  const newIndex = costumeItems.value.length
+  costumeItems.value.push({
+    name: `Costume${newIndex + 1}`,
+    description: '',
+    generated: false,
+    imageUrl: null,
+    costume: null
+  })
+  editingCostumeIndex.value = newIndex
+}
+
+function handleAddAnimation() {
+  if (!canGenerateAnimation.value) return
+
+  // Add a new animation item and open the generator
+  const newIndex = animationItems.value.length
+  animationItems.value.push({
+    name: `Animation${newIndex + 1}`,
+    description: '',
+    generated: false,
+    thumbnailUrl: null,
+    animation: null,
+    savedState: null
+  })
+  editingAnimationIndex.value = newIndex
+}
+
+function handleDeleteCostume(index: number) {
+  if (index === 0) return // Cannot delete default costume
+
+  const item = costumeItems.value[index]
+  // Remove costume from sprite if it was generated
+  if (item.costume) {
+    sprite.removeCostume(item.costume.name)
+  }
+  costumeItems.value.splice(index, 1)
+}
+
+function handleDeleteAnimation(index: number) {
+  const item = animationItems.value[index]
+  // Remove animation from sprite if it was generated
+  if (item.animation) {
+    sprite.removeAnimation(item.animation.name)
+  }
+  animationItems.value.splice(index, 1)
+}
+
+function getState(): SpriteGeneratorState {
+  return {
+    stage: stage.value,
+    brief: brief.value,
+    editableSettings: { ...editableSettings },
+    costumeItems: costumeItems.value as CostumeItem[],
+    animationItems: animationItems.value as AnimationItem[],
+    sprite
+  }
+}
+
+function handleHide() {
+  emit('hide')
+}
+
+defineExpose({
+  getState,
+  hasGeneratingAnimation
+})
+
+async function handleConfirm() {
+  isCreating.value = true
+  try {
+    const finalName = getSpriteName(props.project, editableSettings.name || 'Sprite')
+
+    // Rename the sprite to the final name
+    sprite.setName(finalName)
+
+    emit('generated', sprite)
+  } catch (error) {
+    console.error('Failed to create sprite:', error)
+    throw error
+  } finally {
+    isCreating.value = false
+  }
+}
+
+// Initialize if brief is provided and no saved state
+if (props.brief && !props.savedState) {
+  enrichSettingsWithBrief()
+}
+</script>
+
+<style lang="scss" scoped>
+.sprite-generator {
+  display: flex;
+  flex-direction: column;
+  min-height: 436px;
+  gap: var(--ui-gap-middle);
+}
+
+.step-header {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-gap-small);
+  padding-bottom: var(--ui-gap-small);
+}
+
+.step-number {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ui-color-primary-main);
+  background: var(--ui-color-primary-100);
+  padding: 2px 8px;
+  border-radius: var(--ui-border-radius-1);
+}
+
+.step-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ui-color-title);
+}
+
+.settings-section {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-gap-middle);
+
+  &--compact {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &--centered {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+.stage-message {
+  font-size: 14px;
+  color: var(--ui-color-grey-700);
+  margin: 0;
+}
+
+.form-row {
+  display: flex;
+  gap: var(--ui-gap-middle);
+
+  .form-row-item {
+    flex: 0 0 auto;
+
+    .form-group {
+      flex-direction: row;
+      align-items: center;
+
+      label {
+        flex-shrink: 0;
+        margin-right: var(--ui-gap-small);
+      }
+    }
+  }
+
+  .form-row-actions {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--ui-color-title);
+  }
+}
+
+.preview-container {
+  position: relative;
+  flex: 1;
+  width: 100%;
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--ui-gap-large);
+  background: var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-2);
+}
+
+.preview-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.preview-placeholder-text {
+  font-size: 16px;
+  color: var(--ui-color-grey-500);
+}
+
+.preview-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ui-gap-middle);
+}
+
+.preview-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-gap-large);
+}
+
+.content-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-gap-middle);
+}
+
+.section-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ui-color-title);
+}
+
+.content-list {
+  display: flex;
+  gap: var(--ui-gap-middle);
+  flex-wrap: wrap;
+}
+
+.content-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+  cursor: pointer;
+  border-radius: var(--ui-border-radius-1);
+  overflow: hidden;
+  background: var(--ui-color-white);
+  border: 2px solid transparent;
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: var(--ui-color-primary-main);
+  }
+
+  &--pending {
+    opacity: 0.7;
+
+    .content-item-preview {
+      background: var(--ui-color-grey-200);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: transparent;
+    }
+  }
+
+  &--generating {
+    border-color: var(--ui-color-primary-200);
+
+    .content-item-preview {
+      background: var(--ui-color-primary-100);
+    }
+  }
+}
+
+.content-item-preview {
+  width: 100%;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ui-color-grey-100);
+  position: relative;
+}
+
+.content-item-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.content-item-thumbnail {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content-item-play-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 20px;
+  color: var(--ui-color-white);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.content-item-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  &--generating {
+    background: var(--ui-color-primary-100);
+  }
+}
+
+.content-item-placeholder-icon {
+  font-size: 24px;
+  opacity: 0.5;
+}
+
+.content-item-add-icon {
+  font-size: 32px;
+  color: var(--ui-color-grey-500);
+}
+
+.content-item--add {
+  border: 2px dashed var(--ui-color-grey-300);
+  background: transparent;
+
+  &:hover:not(.content-item--disabled) {
+    border-color: var(--ui-color-primary-main);
+
+    .content-item-add-icon {
+      color: var(--ui-color-primary-main);
+    }
+  }
+}
+
+.content-item-delete {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--ui-color-grey-800);
+  color: var(--ui-color-white);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 1;
+
+  &:hover {
+    background: var(--ui-color-danger-main);
+  }
+}
+
+.content-item:hover .content-item-delete {
+  opacity: 1;
+}
+
+.content-item-preview {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.content-item-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ui-color-title);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.content-item-status {
+  font-size: 10px;
+  color: var(--ui-color-grey-600);
+
+  &--generating {
+    color: var(--ui-color-primary-main);
+  }
+}
+
+.stage-actions {
+  display: flex;
+  gap: var(--ui-gap-middle);
+  justify-content: flex-end;
+}
+</style>
diff --git a/spx-gui/src/components/asset/library/generators/SpriteGeneratorModal.vue b/spx-gui/src/components/asset/library/generators/SpriteGeneratorModal.vue
new file mode 100644
index 000000000..a8c12ceb1
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/SpriteGeneratorModal.vue
@@ -0,0 +1,98 @@
+<template>
+  <UIFormModal
+    :title="$t({ en: 'Generate Sprite', zh: '生成精灵' })"
+    :visible="props.visible"
+    style="width: 928px"
+    @update:visible="handleModalClose"
+  >
+    <div class="generator-content">
+      <SpriteGenerator
+        ref="generatorRef"
+        :project="props.project"
+        :settings="props.settings"
+        :saved-state="props.savedState"
+        @generated="handleGenerated"
+        @hide="handleHide"
+      />
+    </div>
+  </UIFormModal>
+</template>
+
+<script lang="ts">
+import type { Sprite } from '@/models/sprite'
+import type { SpriteGeneratorState } from './SpriteGenerator.vue'
+
+export type SpriteGeneration = {
+  type: 'sprite-generation'
+  state: SpriteGeneratorState
+}
+
+export function isSpriteGeneration(value: Sprite | SpriteGeneration): value is SpriteGeneration {
+  return (value as SpriteGeneration).type === 'sprite-generation'
+}
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UIFormModal, useConfirmDialog } from '@/components/ui'
+import { useI18n } from '@/utils/i18n'
+import type { Project } from '@/models/project'
+import type { AssetSettings } from '@/models/common/asset'
+import SpriteGenerator from './SpriteGenerator.vue'
+
+const props = defineProps<{
+  visible: boolean
+  project: Project
+  settings?: AssetSettings
+  savedState?: SpriteGeneratorState
+}>()
+
+const emit = defineEmits<{
+  cancelled: []
+  resolved: [result: Sprite | SpriteGeneration]
+}>()
+
+const { t } = useI18n()
+const confirm = useConfirmDialog()
+
+const generatorRef = ref<InstanceType<typeof SpriteGenerator>>()
+
+async function handleModalClose(visible: boolean) {
+  if (visible) return
+
+  try {
+    await confirm({
+      title: t({ en: 'Hide generation?', zh: '收起生成？' }),
+      content: t({
+        en: 'The sprite is being generated. Do you want to hide and continue in the background?',
+        zh: '精灵正在生成中，是否收起并在后台继续？'
+      }),
+      confirmText: t({ en: 'Hide', zh: '收起' }),
+      cancelText: t({ en: 'Discard', zh: '丢弃' })
+    })
+    handleHide()
+  } catch {
+    emit('cancelled')
+  }
+}
+
+function handleGenerated(sprite: Sprite) {
+  emit('resolved', sprite)
+}
+
+function handleHide() {
+  const state = generatorRef.value?.getState()
+  if (state == null) return
+  const generation: SpriteGeneration = {
+    type: 'sprite-generation',
+    state
+  }
+  emit('resolved', generation)
+}
+</script>
+
+<style lang="scss" scoped>
+.generator-content {
+  min-height: 400px;
+}
+</style>
diff --git a/spx-gui/src/components/asset/library/generators/index.ts b/spx-gui/src/components/asset/library/generators/index.ts
new file mode 100644
index 000000000..a3a0affb2
--- /dev/null
+++ b/spx-gui/src/components/asset/library/generators/index.ts
@@ -0,0 +1,74 @@
+import { useModal } from '@/components/ui'
+import type { Project } from '@/models/project'
+import type { Sprite } from '@/models/sprite'
+import type { AssetSettings } from '@/models/common/asset'
+import SpriteGeneratorModal, { isSpriteGeneration, type SpriteGeneration } from './SpriteGeneratorModal.vue'
+import CostumeGeneratorModal from './CostumeGeneratorModal.vue'
+import AnimationGeneratorModal from './AnimationGeneratorModal.vue'
+import BackdropGeneratorModal from './BackdropGeneratorModal.vue'
+import SoundGeneratorModal from './SoundGeneratorModal.vue'
+import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
+
+export type { AnimationGeneratorState } from './AnimationGenerator.vue'
+export type { SpriteGeneratorState } from './SpriteGenerator.vue'
+export { isSpriteGeneration, type SpriteGeneration } from './SpriteGeneratorModal.vue'
+
+export function useSpriteGeneratorModal() {
+  const generate = useModal(SpriteGeneratorModal)
+  return async function openSpriteGeneratorModal(
+    project: Project,
+    settings?: AssetSettings,
+    savedState?: SpriteGeneration['state']
+  ): Promise<Sprite | SpriteGeneration> {
+    const result = await generate({ project, settings, savedState })
+    if (isSpriteGeneration(result)) {
+      return result
+    }
+    await project.history.doAction({ name: { en: 'Generate sprite', zh: '生成精灵' } }, () => project.addSprite(result))
+    return result
+  }
+}
+
+export function useCostumeGeneratorModal() {
+  const project = useEditorCtx().project
+  const generate = useModal(CostumeGeneratorModal)
+  return async function openCostumeGeneratorModal(sprite: Sprite, settings?: AssetSettings) {
+    const costume = await generate({ sprite, settings })
+    await project.history.doAction({ name: { en: 'Generate costume', zh: '生成造型' } }, () =>
+      sprite.addCostume(costume)
+    )
+    return costume
+  }
+}
+
+export function useAnimationGeneratorModal() {
+  const project = useEditorCtx().project
+  const generate = useModal(AnimationGeneratorModal)
+  return async function openAnimationGeneratorModal(sprite: Sprite, settings?: AssetSettings) {
+    const animation = await generate({ sprite, settings })
+    await project.history.doAction({ name: { en: 'Generate animation', zh: '生成动画' } }, () =>
+      sprite.addAnimation(animation)
+    )
+    return animation
+  }
+}
+
+export function useBackdropGeneratorModal() {
+  const generate = useModal(BackdropGeneratorModal)
+  return async function openBackdropGeneratorModal(project: Project, settings?: AssetSettings) {
+    const backdrop = await generate({ project, settings })
+    await project.history.doAction({ name: { en: 'Generate backdrop', zh: '生成背景' } }, () =>
+      project.stage.addBackdrop(backdrop)
+    )
+    return backdrop
+  }
+}
+
+export function useSoundGeneratorModal() {
+  const generate = useModal(SoundGeneratorModal)
+  return async function openSoundGeneratorModal(project: Project, settings?: AssetSettings) {
+    const sound = await generate({ project, settings })
+    await project.history.doAction({ name: { en: 'Generate sound', zh: '生成声音' } }, () => project.addSound(sound))
+    return sound
+  }
+}
diff --git a/spx-gui/src/components/editor/code-editor/ui/resource/resource-selector.ts b/spx-gui/src/components/editor/code-editor/ui/resource/resource-selector.ts
index a3413d927..dff4ab38a 100644
--- a/spx-gui/src/components/editor/code-editor/ui/resource/resource-selector.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/resource/resource-selector.ts
@@ -86,7 +86,7 @@ class SpriteSelector implements IResourceSelector<Sprite> {
       },
       {
         label: { en: 'Choose from asset library', zh: '从素材库选择' },
-        handler: () => addFromAssetLibrary(this.project, AssetType.Sprite)
+        handler: () => addFromAssetLibrary(this.project, AssetType.Sprite) as Promise<Sprite[]>
       }
     ]
   }
diff --git a/spx-gui/src/components/editor/map-editor/SpriteList.vue b/spx-gui/src/components/editor/map-editor/SpriteList.vue
index 10e887bc9..98298f51e 100644
--- a/spx-gui/src/components/editor/map-editor/SpriteList.vue
+++ b/spx-gui/src/components/editor/map-editor/SpriteList.vue
@@ -70,7 +70,7 @@ const addAssetFromLibrary = useAddAssetFromLibrary()
 const handleAddFromAssetLibrary = useMessageHandle(
   async () => {
     const sprites = await addAssetFromLibrary(props.project, AssetType.Sprite)
-    handleSpriteClick(sprites[0])
+    handleSpriteClick(sprites[0] as Sprite) // TODO: handle sprite generations
   },
   {
     en: 'Failed to add sprite from asset library',
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index cab2419d3..b19b38f98 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -26,6 +26,12 @@
               {{ $t({ en: 'Export project file', zh: '导出项目文件' }) }}
             </UIMenuItem>
           </UIMenuGroup>
+          <UIMenuGroup :disabled="project == null">
+            <UIMenuItem @click="handleProjectSettings">
+              <template #icon><UIIcon type="setting" /></template>
+              {{ $t({ en: 'Project Settings', zh: '项目设置' }) }}
+            </UIMenuItem>
+          </UIMenuGroup>
           <UIMenuGroup :disabled="project == null">
             <UIMenuItem @click="handleImportFromScratch">
               <template #icon><img :src="importScratchSvg" /></template>
@@ -152,7 +158,7 @@ import { getSignedInUsername, useUser } from '@/stores/user'
 import { Visibility } from '@/apis/common'
 import { getProjectPageRoute } from '@/router'
 import { showTutorialsEntry } from '@/utils/env'
-import { usePublishProject, useRemoveProject, useUnpublishProject } from '@/components/project'
+import { usePublishProject, useRemoveProject, useUnpublishProject, useProjectSettingsModal } from '@/components/project'
 import { useLoadFromScratchModal } from '@/components/asset'
 import NavbarWrapper from '@/components/navbar/NavbarWrapper.vue'
 import NavbarDropdown from '@/components/navbar/NavbarDropdown.vue'
@@ -323,6 +329,12 @@ const handleRemoveProject = useMessageHandle(
   { en: 'Failed to remove project', zh: '删除项目失败' }
 ).fn
 
+const projectSettingsModal = useProjectSettingsModal()
+const handleProjectSettings = useMessageHandle(
+  () => projectSettingsModal(props.project!),
+  { en: 'Failed to open project settings', zh: '打开项目设置失败' }
+).fn
+
 const undoAction = computed(() => props.project?.history.getUndoAction() ?? null)
 
 const undoText = computed(() => ({
diff --git a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
index 8e9a32e18..20caa9536 100644
--- a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
@@ -19,13 +19,24 @@
           @click="handleAddFromAssetLibrary"
           >{{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}</UIMenuItem
         >
+        <!-- <UIMenuItem
+          v-radar="{ name: 'Generate with AI', desc: 'Click to generate sprite with AI' }"
+          @click="handleGenerateSprite"
+          >{{ $t({ en: 'Generate with AI', zh: 'AI 生成' }) }}</UIMenuItem
+        > -->
       </UIMenu>
     </template>
     <template #details>
       <PanelList :sortable="{ list: sprites }" @sorted="handleSorted">
-        <UIEmpty v-if="sprites.length === 0" size="medium">
+        <UIEmpty v-if="sprites.length === 0 && spriteGenerations.length === 0" size="medium">
           {{ $t({ en: 'Click + to add sprite', zh: '点击 + 号添加精灵' }) }}
         </UIEmpty>
+        <SpriteGenerationItem
+          v-for="generation in spriteGenerations"
+          :key="generation.state.sprite.id"
+          :generation="generation"
+          @click="handleGenerationClick(generation)"
+        />
         <SpriteItem
           v-for="sprite in sprites"
           :key="sprite.id"
@@ -73,13 +84,23 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, shallowReactive } from 'vue'
 import { Sprite } from '@/models/sprite'
-import { useAddAssetFromLibrary, useAddSpriteFromLocalFile } from '@/components/asset'
+import {
+  useAddAssetFromLibrary,
+  useAddSpriteFromLocalFile,
+  isSpriteGeneration as isSpriteGenerationAsset
+} from '@/components/asset'
+import {
+  useSpriteGeneratorModal,
+  isSpriteGeneration,
+  type SpriteGeneration
+} from '@/components/asset/library/generators'
 import { AssetType } from '@/apis/asset'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import { UIMenu, UIMenuItem, UIEmpty, UIIcon, UITooltip } from '@/components/ui'
 import SpriteItem from '@/components/editor/sprite/SpriteItem.vue'
+import SpriteGenerationItem from '@/components/editor/sprite/SpriteGenerationItem.vue'
 import CommonPanel from '../common/CommonPanel.vue'
 import PanelList from '../common/PanelList.vue'
 import PanelSummaryList, { useSummaryList } from '../common/PanelSummaryList.vue'
@@ -101,6 +122,7 @@ const editorCtx = useEditorCtx()
 const footerExpanded = ref(false)
 
 const sprites = computed(() => editorCtx.project.sprites)
+const spriteGenerations = shallowReactive<SpriteGeneration[]>([])
 const summaryList = ref<InstanceType<typeof PanelSummaryList>>()
 const summaryListData = useSummaryList(sprites, () => summaryList.value?.listWrapper ?? null)
 
@@ -131,8 +153,12 @@ const addAssetFromLibrary = useAddAssetFromLibrary()
 
 const handleAddFromAssetLibrary = useMessageHandle(
   async () => {
-    const sprites = await addAssetFromLibrary(editorCtx.project, AssetType.Sprite)
-    editorCtx.state.selectSprite(sprites[0].id)
+    const results = await addAssetFromLibrary(editorCtx.project, AssetType.Sprite)
+    for (const result of results) {
+      if (isSpriteGenerationAsset(result)) {
+        spriteGenerations.push(result)
+      }
+    }
   },
   {
     en: 'Failed to add sprite from asset library',
@@ -140,6 +166,48 @@ const handleAddFromAssetLibrary = useMessageHandle(
   }
 ).fn
 
+const generateSprite = useSpriteGeneratorModal()
+
+async function doGenerateSprite(savedState?: SpriteGeneration['state']) {
+  const settings = {
+    ...editorCtx.project.settings,
+    projectDescription: editorCtx.project.description ?? editorCtx.project.aiDescription ?? null,
+    category: null
+  }
+  const result = await generateSprite(editorCtx.project, settings, savedState)
+  if (isSpriteGeneration(result)) {
+    // Remove existing generation with same sprite id if resuming
+    if (savedState) {
+      const index = spriteGenerations.findIndex((g) => g.state.sprite.id === savedState.sprite.id)
+      if (index >= 0) {
+        spriteGenerations.splice(index, 1)
+      }
+    }
+    spriteGenerations.push(result)
+  } else {
+    editorCtx.state.selectSprite(result.id)
+  }
+}
+
+// const handleGenerateSprite = useMessageHandle(
+//   async () => {
+//     await doGenerateSprite()
+//   },
+//   {
+//     en: 'Failed to generate sprite',
+//     zh: '生成精灵失败'
+//   }
+// ).fn
+
+function handleGenerationClick(generation: SpriteGeneration) {
+  // Remove the generation from the list and resume
+  const index = spriteGenerations.indexOf(generation)
+  if (index >= 0) {
+    spriteGenerations.splice(index, 1)
+  }
+  doGenerateSprite(generation.state)
+}
+
 const handleSorted = useMessageHandle(
   async (oldIdx: number, newIdx: number) => {
     const action = { name: { en: 'Update sprite order', zh: '更新精灵顺序' } }
diff --git a/spx-gui/src/components/editor/sprite/AnimationEditor.vue b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
index 5757eb861..977c156ec 100644
--- a/spx-gui/src/components/editor/sprite/AnimationEditor.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
@@ -13,6 +13,17 @@
         </template>
         {{ $t({ en: 'Group costumes as animation', zh: '将造型合并为动画' }) }}
       </UIButton>
+      <!-- <UIButton
+        v-radar="{ name: 'Generate animation button', desc: 'Click to generate animation with AI' }"
+        type="boring"
+        size="large"
+        @click="handleGenerateAnimation"
+      >
+        <template #icon>
+          <img :src="galleryIcon" />
+        </template>
+        {{ $t({ en: 'Generate animation', zh: '生成动画' }) }}
+      </UIButton> -->
     </template>
   </UIEmpty>
   <EditorList
@@ -39,6 +50,11 @@
           @click="handleGroupCostumes"
           >{{ $t({ en: 'Group costumes as animation', zh: '将造型合并为动画' }) }}</UIMenuItem
         >
+        <!-- <UIMenuItem
+          v-radar="{ name: 'Generate animation option', desc: 'Click to generate animation with AI' }"
+          @click="handleGenerateAnimation"
+          >{{ $t({ en: 'Generate animation', zh: '生成动画' }) }}</UIMenuItem
+        > -->
       </UIMenu>
     </template>
     <template #detail>
@@ -133,6 +149,24 @@ const handleGroupCostumes = useMessageHandle(
   }
 ).fn
 
+// const generateAnimation = useAnimationGeneratorModal()
+// const handleGenerateAnimation = useMessageHandle(
+//   async () => {
+//     const settings: AssetSettings = {
+//       ...editorCtx.project.settings,
+//       projectDescription: editorCtx.project.description ?? editorCtx.project.aiDescription ?? null,
+//       description: null,
+//       category: 'other'
+//     }
+//     const animation = await generateAnimation(props.sprite, settings)
+//     props.state.select(animation.id)
+//   },
+//   {
+//     en: 'Failed to generate animation',
+//     zh: '生成动画失败'
+//   }
+// ).fn
+
 const handleSorted = useMessageHandle(
   async (oldIdx: number, newIdx: number) => {
     const action = { name: { en: 'Update animation order', zh: '更新动画顺序' } }
diff --git a/spx-gui/src/components/editor/sprite/CostumesEditor.vue b/spx-gui/src/components/editor/sprite/CostumesEditor.vue
index bd45a2614..28971a8a3 100644
--- a/spx-gui/src/components/editor/sprite/CostumesEditor.vue
+++ b/spx-gui/src/components/editor/sprite/CostumesEditor.vue
@@ -1,5 +1,22 @@
 <template>
+  <UIEmpty v-if="sprite.costumes.length === 0" size="extra-large">
+    {{ $t({ en: 'No costumes', zh: '没有造型' }) }}
+    <!-- <template #op>
+      <UIButton
+        v-radar="{ name: 'Generate costume button', desc: 'Click to generate costume with AI' }"
+        type="boring"
+        size="large"
+        @click="handleGenerateCostume"
+      >
+        <template #icon>
+          <img :src="galleryIcon" />
+        </template>
+        {{ $t({ en: 'Generate costume', zh: '生成造型' }) }}
+      </UIButton>
+    </template> -->
+  </UIEmpty>
   <EditorList
+    v-else
     v-radar="{ name: 'Costumes management', desc: 'Managing costumes of current sprite' }"
     color="sprite"
     resource-type="costume"
@@ -21,6 +38,11 @@
           @click="handleAddFromLocalFile"
           >{{ $t({ en: 'Select local file', zh: '选择本地文件' }) }}</UIMenuItem
         >
+        <!-- <UIMenuItem
+          v-radar="{ name: 'Generate costume option', desc: 'Click to generate costume with AI' }"
+          @click="handleGenerateCostume"
+          >{{ $t({ en: 'Generate costume', zh: '生成造型' }) }}</UIMenuItem
+        > -->
       </UIMenu>
     </template>
     <template #detail>
@@ -62,7 +84,7 @@ export class CostumesEditorState {
 </script>
 
 <script setup lang="ts">
-import { UIMenu, UIMenuItem } from '@/components/ui'
+import { UIMenu, UIMenuItem, UIEmpty } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 import { shiftPath, type PathSegments } from '@/utils/route'
 import type { Sprite } from '@/models/sprite'
@@ -91,6 +113,24 @@ const handleAddFromLocalFile = useMessageHandle(() => addFromLocalFile(props.spr
   zh: '从本地文件添加失败'
 }).fn
 
+// const generateCostume = useCostumeGeneratorModal()
+// const handleGenerateCostume = useMessageHandle(
+//   async () => {
+//     const settings: AssetSettings = {
+//       ...editorCtx.project.settings,
+//       projectDescription: editorCtx.project.description ?? editorCtx.project.aiDescription ?? null,
+//       description: null,
+//       category: 'other'
+//     }
+//     const costume = await generateCostume(props.sprite, settings)
+//     props.state.select(costume.id)
+//   },
+//   {
+//     en: 'Failed to generate costume',
+//     zh: '生成造型失败'
+//   }
+// ).fn
+
 const handleSorted = useMessageHandle(
   async (oldIdx: number, newIdx: number) => {
     const action = { name: { en: 'Update costume order', zh: '更新造型顺序' } }
diff --git a/spx-gui/src/components/editor/sprite/SpriteGenerationItem.vue b/spx-gui/src/components/editor/sprite/SpriteGenerationItem.vue
new file mode 100644
index 000000000..aa779ffed
--- /dev/null
+++ b/spx-gui/src/components/editor/sprite/SpriteGenerationItem.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useFileUrl } from '@/utils/file'
+import { UIImg, UIEditorSpriteItem, UILoading } from '@/components/ui'
+import type { SpriteGeneration } from '@/components/asset/library/generators'
+
+const props = withDefaults(
+  defineProps<{
+    generation: SpriteGeneration
+    color?: 'sprite' | 'primary'
+    selectable?: false | { selected: boolean }
+  }>(),
+  {
+    color: 'sprite',
+    selectable: false
+  }
+)
+
+const sprite = computed(() => props.generation.state.sprite)
+const [imgSrc, imgLoading] = useFileUrl(() => sprite.value.defaultCostume?.img)
+
+const radarNodeMeta = computed(() => {
+  const name = `Sprite generation "${sprite.value.name}"`
+  const desc = 'Click to continue generating the sprite'
+  return { name, desc }
+})
+</script>
+
+<template>
+  <UIEditorSpriteItem
+    v-radar="radarNodeMeta"
+    :name="sprite.name"
+    :selectable="selectable"
+    :color="color"
+    class="sprite-generation-item"
+  >
+    <template #img="{ style }">
+      <div class="generating-overlay" :style="style">
+        <UIImg :style="style" :src="imgSrc" :loading="imgLoading" class="generating-img" />
+        <div class="generating-indicator">
+          <UILoading :size="20" />
+        </div>
+      </div>
+    </template>
+    <template #status>
+      <span class="generating-status">{{ $t({ en: 'Generating...', zh: '生成中...' }) }}</span>
+    </template>
+  </UIEditorSpriteItem>
+</template>
+
+<style scoped lang="scss">
+.sprite-generation-item {
+  opacity: 0.8;
+}
+
+.generating-overlay {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.generating-img {
+  opacity: 0.6;
+}
+
+.generating-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.generating-status {
+  font-size: 10px;
+  color: var(--ui-color-primary-main);
+}
+</style>
diff --git a/spx-gui/src/components/project/ProjectSettingsModal.vue b/spx-gui/src/components/project/ProjectSettingsModal.vue
new file mode 100644
index 000000000..f02f8cd7c
--- /dev/null
+++ b/spx-gui/src/components/project/ProjectSettingsModal.vue
@@ -0,0 +1,80 @@
+<template>
+  <UIFormModal
+    :title="$t({ en: 'Project Settings', zh: '项目设置' })"
+    :visible="props.visible"
+    @update:visible="emit('cancelled')"
+  >
+    <UIForm :form="form" @submit="handleSubmit.fn">
+      <UIFormItem :label="$t({ en: 'Art Style', zh: '美术风格' })" path="artStyle">
+        <ArtStyleInput v-model:value="form.value.artStyle" />
+      </UIFormItem>
+
+      <UIFormItem :label="$t({ en: 'Perspective', zh: '游戏视角' })" path="perspective">
+        <PerspectiveInput v-model:value="form.value.perspective" />
+      </UIFormItem>
+
+      <footer class="footer">
+        <UIButton type="boring" @click="emit('cancelled')">
+          {{ $t({ en: 'Cancel', zh: '取消' }) }}
+        </UIButton>
+        <UIButton type="primary" html-type="submit" :loading="handleSubmit.isLoading.value">
+          {{ $t({ en: 'Save', zh: '保存' }) }}
+        </UIButton>
+      </footer>
+    </UIForm>
+  </UIFormModal>
+</template>
+
+<script setup lang="ts">
+import {
+  UIForm,
+  UIFormItem,
+  UIFormModal,
+  UIButton,
+  useForm
+} from '@/components/ui'
+import { useMessageHandle } from '@/utils/exception'
+import type { Project } from '@/models/project'
+import ArtStyleInput from '../asset/library/generators/ArtStyleInput.vue'
+import PerspectiveInput from '../asset/library/generators/PerspectiveInput.vue'
+
+const props = defineProps<{
+  visible: boolean
+  project: Project
+}>()
+
+const emit = defineEmits<{
+  cancelled: []
+  resolved: []
+}>()
+
+const form = useForm({
+  artStyle: [props.project.settings?.artStyle ?? null],
+  perspective: [props.project.settings?.perspective ?? null]
+})
+
+const handleSubmit = useMessageHandle(
+  async () => {
+    props.project.settings = {
+      artStyle: form.value.artStyle || null,
+      perspective: form.value.perspective || null,
+      description: null
+    }
+
+    await props.project.saveToCloud()
+
+    emit('resolved')
+  },
+  { en: 'Failed to save settings', zh: '保存设置失败' },
+  { en: 'Settings saved', zh: '设置已保存' }
+)
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  margin-top: 40px;
+  display: flex;
+  gap: var(--ui-gap-middle);
+  justify-content: flex-end;
+}
+</style>
diff --git a/spx-gui/src/components/project/index.ts b/spx-gui/src/components/project/index.ts
index 35b58fbc1..6d4310308 100644
--- a/spx-gui/src/components/project/index.ts
+++ b/spx-gui/src/components/project/index.ts
@@ -7,6 +7,7 @@ import ProjectOpenModal from './ProjectOpenModal.vue'
 import ProjectSharingLinkModal from './ProjectSharingLinkModal.vue'
 import ProjectPublishModal from './ProjectPublishModal.vue'
 import ProjectPublishedModal from './ProjectPublishedModal.vue'
+import ProjectSettingsModal from './ProjectSettingsModal.vue'
 /**
  * How to update the default project:
  * 1. Use XBuilder to create / open a project.
@@ -98,3 +99,11 @@ export function useUnpublishProject() {
     })
   }
 }
+
+export function useProjectSettingsModal() {
+  const modal = useModal(ProjectSettingsModal)
+
+  return function openProjectSettingsModal(project: Project) {
+    return modal({ project })
+  }
+}
diff --git a/spx-gui/src/components/project/types.ts b/spx-gui/src/components/project/types.ts
new file mode 100644
index 000000000..fdad1e38e
--- /dev/null
+++ b/spx-gui/src/components/project/types.ts
@@ -0,0 +1,42 @@
+import type { LocaleMessage } from '@/utils/i18n'
+
+export type SettingOption = {
+  value: string
+  label: LocaleMessage
+}
+
+export const artStyleOptions: SettingOption[] = [
+  { value: 'realistic', label: { en: 'Realistic', zh: '写实' } },
+  { value: 'cartoon', label: { en: 'Cartoon', zh: '卡通' } },
+  { value: 'pixel', label: { en: 'Pixel Art', zh: '像素风' } },
+  { value: 'watercolor', label: { en: 'Watercolor', zh: '水彩' } },
+  { value: 'anime', label: { en: 'Anime', zh: '动漫' } },
+  { value: 'sketch', label: { en: 'Sketch', zh: '素描' } }
+]
+
+export const perspectiveOptions: SettingOption[] = [
+  { value: 'front', label: { en: 'Front View', zh: '正面' } },
+  { value: 'side', label: { en: 'Side View', zh: '侧面' } },
+  { value: 'top-down', label: { en: 'Top-Down', zh: '俯视' } },
+  { value: 'isometric', label: { en: 'Isometric', zh: '等距' } },
+  { value: '3d', label: { en: '3D View', zh: '3D视角' } }
+]
+
+export const spriteCategoryOptions: SettingOption[] = [
+  { value: 'character', label: { en: 'Character', zh: '角色' } },
+  { value: 'prop', label: { en: 'Prop', zh: '道具' } },
+  { value: 'other', label: { en: 'Other', zh: '其他' } }
+]
+
+export const backdropCategoryOptions: SettingOption[] = [
+  { value: 'scene', label: { en: 'Scene', zh: '场景' } },
+  { value: 'ui', label: { en: 'UI', zh: '界面' } },
+  { value: 'other', label: { en: 'Other', zh: '其他' } }
+]
+
+export const soundCategoryOptions: SettingOption[] = [
+  { value: 'music', label: { en: 'Music', zh: '音乐' } },
+  { value: 'effect', label: { en: 'Effect', zh: '音效' } },
+  { value: 'voice', label: { en: 'Voice', zh: '人声' } },
+  { value: 'other', label: { en: 'Other', zh: '其他' } }
+]
diff --git a/spx-gui/src/components/ui/UITag.vue b/spx-gui/src/components/ui/UITag.vue
index bb68ce7e0..589e32537 100644
--- a/spx-gui/src/components/ui/UITag.vue
+++ b/spx-gui/src/components/ui/UITag.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="ui-tag" :class="`type-${type}`">
+  <button class="ui-tag" type="button" :class="`type-${type}`">
     <slot></slot>
   </button>
 </template>
diff --git a/spx-gui/src/models/common/asset.ts b/spx-gui/src/models/common/asset.ts
index 5c3c1a573..247e0ad49 100644
--- a/spx-gui/src/models/common/asset.ts
+++ b/spx-gui/src/models/common/asset.ts
@@ -6,11 +6,24 @@ import { Backdrop, type BackdropInits } from '../backdrop'
 import { getFiles, saveFiles } from './cloud'
 import { fromBlob } from '@/models/common/file'
 import { Costume } from '@/models/costume'
+import type { ProjectSettings } from '@/apis/project'
 
 export type PartialAssetData = Pick<AssetData, 'type' | 'files' | 'filesHash'>
 
 export type AssetMetadata = Omit<AssetData, 'files'>
 
+export type SpriteCategory = 'character' | 'prop' | 'other'
+export type BackdropCategory = 'scene' | 'ui' | 'other'
+export type SoundCategory = 'music' | 'effect' | 'voice' | 'other'
+
+export type AssetCategory = SpriteCategory | BackdropCategory | SoundCategory
+
+export type AssetSettings = ProjectSettings & {
+  projectDescription: string | null
+  description: string | null
+  category: AssetCategory | null
+}
+
 export type AssetModel<T extends AssetType = AssetType> = T extends AssetType.Sound
   ? Sound
   : T extends AssetType.Sprite
diff --git a/spx-gui/src/models/project/index.ts b/spx-gui/src/models/project/index.ts
index 8346f62b0..98f6f9c43 100644
--- a/spx-gui/src/models/project/index.ts
+++ b/spx-gui/src/models/project/index.ts
@@ -11,7 +11,7 @@ import { Disposable, getCleanupSignal } from '@/utils/disposable'
 import Mutex from '@/utils/mutex'
 import { Cancelled } from '@/utils/exception'
 import { ProgressCollector, type ProgressReporter } from '@/utils/progress'
-import { Visibility, type ProjectData } from '@/apis/project'
+import { Visibility, type ProjectData, type ProjectSettings } from '@/apis/project'
 import { toConfig, type Files, fromConfig, File, toText, getImageSize } from '../common/file'
 import * as cloudHelper from '../common/cloud'
 import * as localHelper from '../common/local'
@@ -132,8 +132,9 @@ export class Project extends Disposable {
   sounds: Sound[]
   zorder: string[]
 
-  private aiDescription: string | null
+  aiDescription: string | null
   private aiDescriptionHash: string | null
+  settings: ProjectSettings
 
   removeSprite(id: string) {
     const idx = this.sprites.findIndex((s) => s.id === id)
@@ -381,6 +382,11 @@ export class Project extends Disposable {
     this.aiDescription = null
     this.aiDescriptionHash = null
     this.exportGameFilesComputed = computed(() => reactiveThis.exportGameFilesWithoutMemo())
+    this.settings = {
+      artStyle: null,
+      perspective: null,
+      description: null
+    }
     return reactiveThis
   }
 
@@ -401,7 +407,8 @@ export class Project extends Disposable {
       instructions: this.instructions,
       thumbnail: this.thumbnail,
       aiDescription: this.aiDescription,
-      aiDescriptionHash: this.aiDescriptionHash
+      aiDescriptionHash: this.aiDescriptionHash,
+      settings: this.settings
     }
   }