diff --git a/spx-gui/src/apis/asset.ts b/spx-gui/src/apis/asset.ts
index 3d20e2d25c..c5fa240e15 100644
--- a/spx-gui/src/apis/asset.ts
+++ b/spx-gui/src/apis/asset.ts
@@ -93,8 +93,8 @@ export type ListAssetParams = PaginationParams & {
   sortOrder?: 'asc' | 'desc'
 }
 
-export function listAsset(params?: ListAssetParams) {
-  return client.get('/assets/list', params) as Promise<ByPage<AssetData>>
+export function listAsset(params?: ListAssetParams, signal?: AbortSignal) {
+  return client.get('/assets/list', params, { signal }) as Promise<ByPage<AssetData>>
 }
 
 export function getAsset(id: string) {
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
index e392130ae1..545973c221 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { UIButton } from '@/components/ui'
+import { AssetType } from '@/apis/asset'
 import type { Backdrop } from '@/models/spx/backdrop'
+import { asset2Backdrop } from '@/models/spx/common/asset'
 import type { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import { capture, useMessageHandle } from '@/utils/exception'
 import { humanizeTimeLeft } from '../common/time-left'
@@ -9,15 +11,25 @@ import BackdropSettingInput from './BackdropSettingsInput.vue'
 import LayoutWithPreview from '../common/LayoutWithPreview.vue'
 import ImagePreview from '../common/ImagePreview.vue'
 import ImageSelector from '../common/ImageSelector.vue'
+import AssetSuggestions from '../common/AssetSuggestions.vue'
+import { useAssetSuggestions } from '../common/use-asset-suggestions'
 import BackdropImageItem from './BackdropImageItem.vue'
+import BackdropItem from '@/components/asset/library/BackdropItem.vue'
 
-const props = defineProps<{
-  gen: BackdropGen
-  descriptionPlaceholder?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    gen: BackdropGen
+    descriptionPlaceholder?: string
+    librarySearchEnabled?: boolean
+  }>(),
+  {
+    descriptionPlaceholder: undefined,
+    librarySearchEnabled: false
+  }
+)
 
 const emit = defineEmits<{
-  finished: [Backdrop]
+  resolved: [Backdrop]
 }>()
 
 const canSubmit = computed(() => props.gen.image != null)
@@ -27,7 +39,7 @@ const handleSubmit = useMessageHandle(
     props.gen.recordAdoption().catch((err) => {
       capture(err, 'failed to record backdrop asset adoption')
     })
-    emit('finished', backdrop)
+    emit('resolved', backdrop)
   },
   {
     en: 'Failed to create backdrop',
@@ -43,6 +55,30 @@ function handleImageSelect(index: number) {
   props.gen.setImageIndex(index)
   hasPreview.value = true
 }
+
+const isLibrarySearchEnabled = computed(
+  () => props.librarySearchEnabled && props.gen.imagesGenState.status === 'initial'
+)
+
+const {
+  keyword,
+  suggestions,
+  isLoading: isSuggestionsLoading,
+  selected: selectedAsset,
+  toggle: toggleSelectedAsset
+} = useAssetSuggestions(AssetType.Backdrop, () => props.gen.settings.description, isLibrarySearchEnabled)
+
+const handleUseAsset = useMessageHandle(
+  async () => {
+    if (selectedAsset.value == null) throw new Error('no asset selected')
+    const backdrop = await asset2Backdrop(selectedAsset.value)
+    emit('resolved', backdrop)
+  },
+  {
+    en: 'Failed to use asset',
+    zh: '使用素材失败'
+  }
+)
 </script>
 
 <template>
@@ -58,33 +94,48 @@ function handleImageSelect(index: number) {
         :disabled="handleSubmit.isLoading.value"
         :description-placeholder="descriptionPlaceholder"
       />
-      <ImageSelector
-        :state="gen.imagesGenState"
-        :selected="gen.imageIndex"
-        :disabled="handleSubmit.isLoading.value"
-        @select="handleImageSelect"
-      >
-        <template #loading-item>
-          <BackdropImageItem loading />
-        </template>
-        <template #item="{ file, active, onClick }">
-          <BackdropImageItem :file="file" :active="active" @click="onClick" />
-        </template>
-        <template #tip>
-          <template v-if="gen.imagesGenState.status === 'running'">
-            {{ $t({ en: `Generating backdrops... `, zh: `正在生成背景...` }) }}
-            {{ gen.imagesGenState.timeLeft != null ? $t(humanizeTimeLeft(gen.imagesGenState.timeLeft)) : '' }}
+      <div class="select-area">
+        <AssetSuggestions
+          v-if="isLibrarySearchEnabled"
+          :type="AssetType.Backdrop"
+          :loading="isSuggestionsLoading"
+          :keyword="keyword"
+          :suggestions="suggestions"
+          :selected="selectedAsset"
+          @toggle="toggleSelectedAsset"
+        >
+          <template #item="{ asset, selected, onClick }">
+            <BackdropItem :asset="asset" :selected="selected" @click="onClick" />
+          </template>
+        </AssetSuggestions>
+        <ImageSelector
+          :state="gen.imagesGenState"
+          :selected="gen.imageIndex"
+          :disabled="handleSubmit.isLoading.value"
+          @select="handleImageSelect"
+        >
+          <template #loading-item>
+            <BackdropImageItem loading />
           </template>
-          <template v-else-if="gen.imagesGenState.status === 'finished'">
-            {{
-              $t({
-                en: 'Select the backdrop you like the most, or generate new ones.',
-                zh: '选择你最喜欢的一个背景，或者重新生成。'
-              })
-            }}
+          <template #item="{ file, active, onClick }">
+            <BackdropImageItem :file="file" :active="active" @click="onClick" />
           </template>
-        </template>
-      </ImageSelector>
+          <template #tip>
+            <template v-if="gen.imagesGenState.status === 'running'">
+              {{ $t({ en: `Generating backdrops... `, zh: `正在生成背景...` }) }}
+              {{ gen.imagesGenState.timeLeft != null ? $t(humanizeTimeLeft(gen.imagesGenState.timeLeft)) : '' }}
+            </template>
+            <template v-else-if="gen.imagesGenState.status === 'finished'">
+              {{
+                $t({
+                  en: 'Select the backdrop you like the most, or generate new ones.',
+                  zh: '选择你最喜欢的一个背景，或者重新生成。'
+                })
+              }}
+            </template>
+          </template>
+        </ImageSelector>
+      </div>
 
       <template #preview>
         <ImagePreview :file="gen.image" />
@@ -92,6 +143,19 @@ function handleImageSelect(index: number) {
     </LayoutWithPreview>
     <footer class="footer">
       <UIButton
+        v-if="selectedAsset != null"
+        v-radar="{
+          name: 'Use',
+          desc: 'Click to use the selected library asset'
+        }"
+        color="primary"
+        size="large"
+        @click="handleUseAsset.fn"
+      >
+        {{ $t({ en: 'Use', zh: '采用' }) }}
+      </UIButton>
+      <UIButton
+        v-else
         v-radar="{
           name: 'Use',
           desc: 'Finish and use the generated backdrop in the project'
@@ -129,6 +193,9 @@ function handleImageSelect(index: number) {
       height: 300px;
     }
   }
+  .select-area {
+    height: 170px; // Fixed height to prevent layout shift when suggestions appear/disappear
+  }
 }
 
 .footer {
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
new file mode 100644
index 0000000000..8119e50b2f
--- /dev/null
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { UIModal, UIModalClose, useConfirmDialog } from '@/components/ui'
+import { useI18n } from '@/utils/i18n'
+import { useMessageHandle } from '@/utils/exception'
+import { AssetType } from '@/apis/asset'
+import type { Backdrop } from '@/models/spx/backdrop'
+import type { BackdropGen as BackdropGenModel } from '@/models/spx/gen/backdrop-gen'
+import type { SpxProject } from '@/models/spx/project'
+import { useAssetGen } from '../use-asset-gen'
+import BackdropGenComp from './BackdropGen.vue'
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean
+    project: SpxProject
+    // Currently no use case for providing an external gen, but we keep this prop
+    // for consistency with SpriteGenModal and potential future use cases.
+    gen?: BackdropGenModel
+  }>(),
+  {
+    gen: undefined
+  }
+)
+
+const emit = defineEmits<{
+  resolved: [Backdrop]
+  cancelled: []
+}>()
+
+const i18n = useI18n()
+const confirm = useConfirmDialog()
+
+const typeRef = computed(() => (props.gen != null ? null : AssetType.Backdrop))
+const { assetGen: internalGen } = useAssetGen(props.project, typeRef)
+const activeGen = computed(() => props.gen ?? internalGen.value)
+
+const handleModalClose = useMessageHandle(
+  async () => {
+    if (props.gen == null) {
+      await confirm({
+        title: i18n.t({ zh: '退出背景生成？', en: 'Exit backdrop generation?' }),
+        content: i18n.t({
+          zh: '当前内容不会被保存，确定要退出吗？',
+          en: 'Current progress will not be saved. Are you sure to exit?'
+        }),
+        confirmText: i18n.t({ en: 'Exit', zh: '退出' })
+      })
+    }
+    emit('cancelled')
+  },
+  { en: 'Failed to exit modal', zh: '退出失败' }
+).fn
+</script>
+
+<template>
+  <UIModal
+    :radar="{ name: 'Backdrop generation modal', desc: 'Modal for backdrop generation' }"
+    style="width: 1076px; height: 800px"
+    :visible="visible"
+    mask-closable
+    @update:visible="handleModalClose"
+  >
+    <header class="header">
+      <h2 class="title">{{ $t({ zh: '生成背景', en: 'Backdrop Generator' }) }}</h2>
+      <UIModalClose class="close" @click="handleModalClose" />
+    </header>
+
+    <BackdropGenComp
+      v-if="activeGen != null"
+      class="backdrop-gen"
+      :gen="activeGen"
+      library-search-enabled
+      @resolved="emit('resolved', $event)"
+    />
+  </UIModal>
+</template>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  height: 56px;
+  border-bottom: 1px solid var(--ui-color-grey-400);
+
+  .title {
+    font-size: 16px;
+    color: var(--ui-color-title);
+  }
+}
+
+.backdrop-gen {
+  flex: 1 1 0;
+  min-height: 0;
+}
+</style>
diff --git a/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue b/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue
new file mode 100644
index 0000000000..c99bad064f
--- /dev/null
+++ b/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AssetType, type AssetData } from '@/apis/asset'
+import { UILoading } from '@/components/ui'
+
+const props = defineProps<{
+  type: AssetType
+  loading: boolean
+  keyword: string
+  suggestions: AssetData[]
+  selected: AssetData | null
+}>()
+
+const emit = defineEmits<{
+  toggle: [AssetData]
+}>()
+
+function isSelected(asset: AssetData) {
+  return props.selected?.id === asset.id
+}
+
+const entityMessages = {
+  [AssetType.Backdrop]: { en: 'backdrop', zh: '背景' },
+  [AssetType.Sprite]: { en: 'sprite', zh: '精灵' },
+  [AssetType.Sound]: { en: 'sound', zh: '声音' }
+}
+const entityMessage = computed(() => entityMessages[props.type])
+</script>
+
+<template>
+  <UILoading v-if="loading" />
+  <div v-else class="asset-suggestions">
+    <template v-if="suggestions.length > 0">
+      <ul class="list">
+        <template v-for="asset in suggestions" :key="asset.id">
+          <slot name="item" :asset="asset" :selected="isSelected(asset)" :on-click="() => emit('toggle', asset)"></slot>
+        </template>
+      </ul>
+      <p class="tip">
+        {{
+          $t({
+            en: `There are related ${entityMessage.en}s in the asset library. You can choose the one you like or continue generating.`,
+            zh: `素材库中已有相关的${entityMessage.zh}，可以选择你喜欢的${entityMessage.zh}直接使用，或者继续生成。`
+          })
+        }}
+      </p>
+    </template>
+    <p v-else-if="keyword.length > 0" class="tip" style="margin-top: 56px">
+      {{
+        $t({
+          en: `No matching ${entityMessage.en}s found in the asset library. You can continue generating.`,
+          zh: `素材库中未找到匹配的${entityMessage.zh}，你可以继续生成。`
+        })
+      }}
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.asset-suggestions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+  justify-content: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.tip {
+  text-align: center;
+  font-size: 12px;
+  color: var(--ui-color-hint-2);
+}
+</style>
diff --git a/spx-gui/src/components/asset/gen/common/use-asset-suggestions.ts b/spx-gui/src/components/asset/gen/common/use-asset-suggestions.ts
new file mode 100644
index 0000000000..d29c3aae42
--- /dev/null
+++ b/spx-gui/src/components/asset/gen/common/use-asset-suggestions.ts
@@ -0,0 +1,63 @@
+import { ref, shallowRef, watch, type WatchSource } from 'vue'
+import { debounce } from 'lodash'
+import { listAsset, Visibility, type AssetData, type AssetType } from '@/apis/asset'
+import { ownerAll } from '@/apis/common'
+
+export function useAssetSuggestions(type: AssetType, keyword: WatchSource<string>, enabled: WatchSource<boolean>) {
+  const _keyword = ref('')
+  const suggestions = shallowRef<AssetData[]>([])
+  const isLoading = ref(false)
+  const selected = shallowRef<AssetData | null>(null)
+  let abortCtrl: AbortController | null = null
+
+  const doSearch = debounce(async (kw: string) => {
+    abortCtrl?.abort()
+    const ctrl = new AbortController()
+    abortCtrl = ctrl
+    isLoading.value = true
+    try {
+      const result = await listAsset(
+        {
+          keyword: kw,
+          type,
+          pageSize: 4,
+          pageIndex: 1,
+          visibility: Visibility.Public,
+          owner: ownerAll
+        },
+        ctrl.signal
+      )
+      _keyword.value = kw
+      suggestions.value = result.data
+      isLoading.value = false
+    } catch {
+      if (ctrl.signal.aborted) return
+      suggestions.value = []
+      isLoading.value = false
+    }
+  }, 500)
+
+  watch(
+    [keyword, enabled],
+    ([kw, isEnabled]) => {
+      _keyword.value = ''
+      suggestions.value = []
+      selected.value = null
+      if (!isEnabled || kw.trim() === '') {
+        doSearch.cancel()
+        abortCtrl?.abort()
+        abortCtrl = null
+        isLoading.value = false
+        return
+      }
+      doSearch(kw.trim())
+    },
+    { immediate: true }
+  )
+
+  function toggle(asset: AssetData) {
+    selected.value = selected.value?.id === asset.id ? null : asset
+  }
+
+  return { keyword: _keyword, suggestions, isLoading, selected, toggle }
+}
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
index ac70e8e221..daad6f32c0 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
@@ -3,8 +3,8 @@ import { computed } from 'vue'
 import { computedShallowReactive, useComputedDisposable } from '@/utils/utils'
 import { useI18n } from '@/utils/i18n'
 import { useNetwork } from '@/utils/network'
-import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import type { Sprite } from '@/models/spx/sprite'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { getSignedInUsername } from '@/stores/user'
 import { cloudHelpers } from '@/models/common/cloud'
 import { provideLocalEditorCtx } from '@/components/editor/EditorContextProvider.vue'
@@ -16,11 +16,12 @@ import SpriteGenPhaseContent from './SpriteGenPhaseContent.vue'
 const props = defineProps<{
   gen: SpriteGen
   descriptionPlaceholder?: string
+  librarySearchEnabled?: boolean
 }>()
 
 const emit = defineEmits<{
   collapse: []
-  finished: [Sprite]
+  resolved: [Sprite]
 }>()
 
 const i18n = useI18n()
@@ -49,9 +50,15 @@ provideLocalEditorCtx(editorCtxInGen)
     v-if="gen.contentPreparingState.status === 'finished'"
     :gen="gen"
     @collapse="emit('collapse')"
-    @finished="emit('finished', $event)"
+    @resolved="emit('resolved', $event)"
+  />
+  <SpriteGenPhaseSettings
+    v-else
+    :gen="gen"
+    :description-placeholder="descriptionPlaceholder"
+    :library-search-enabled="librarySearchEnabled"
+    @resolved="emit('resolved', $event)"
   />
-  <SpriteGenPhaseSettings v-else :gen="gen" :description-placeholder="descriptionPlaceholder" />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
index 1904bfe9e2..bd743a8cd2 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
@@ -1,31 +1,118 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+import { UIModal, UIModalClose, useConfirmDialog, type ModalTransformOrigin } from '@/components/ui'
+import { useI18n } from '@/utils/i18n'
+import { useMessageHandle } from '@/utils/exception'
+import { AssetType } from '@/apis/asset'
 import type { Sprite } from '@/models/spx/sprite'
-import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
-import { UIFormModal } from '@/components/ui'
+import type { SpriteGen as SpriteGenModel } from '@/models/spx/gen/sprite-gen'
+import type { SpxProject } from '@/models/spx/project'
+import type { AssetGenModel } from '@/models/spx/common/asset'
+import { useAssetGen } from '../use-asset-gen'
 import SpriteGenComp from './SpriteGen.vue'
 
-defineProps<{
-  visible: boolean
-  gen: SpriteGen
-}>()
+const props = withDefaults(
+  defineProps<{
+    visible: boolean
+    project: SpxProject
+    gen?: SpriteGenModel
+    genCollapseHandler: (gen: AssetGenModel, isNewGen?: boolean) => Promise<ModalTransformOrigin | null>
+  }>(),
+  {
+    gen: undefined
+  }
+)
 
 const emit = defineEmits<{
   resolved: [Sprite]
   cancelled: []
 }>()
+
+const i18n = useI18n()
+const confirm = useConfirmDialog()
+
+const typeRef = computed(() => (props.gen != null ? null : AssetType.Sprite))
+const { assetGen: internalGen, keepAlive } = useAssetGen(props.project, typeRef)
+const activeGen = computed(() => props.gen ?? internalGen.value)
+
+const modalRef = ref<InstanceType<typeof UIModal> | null>(null)
+
+async function handleGenCollapse() {
+  const gen = activeGen.value
+  if (gen == null) throw new Error('sprite gen expected')
+  if (props.gen == null) {
+    keepAlive(gen)
+  }
+  const transformOrigin = await props.genCollapseHandler(gen, props.gen == null)
+  if (modalRef.value != null && transformOrigin != null) {
+    modalRef.value.setTransformOrigin(transformOrigin)
+  }
+  emit('cancelled')
+}
+
+const handleModalClose = useMessageHandle(
+  async () => {
+    // If the gen is provided by props, it means the modal is controlled by an external gen,
+    // and closing the modal will not cancel the gen. So we only show confirmation when there
+    // is no external gen, which means closing the modal will cancel the gen and lose progress.
+    if (props.gen == null) {
+      await confirm({
+        title: i18n.t({ zh: '退出精灵生成？', en: 'Exit sprite generation?' }),
+        content: i18n.t({
+          zh: '当前内容不会被保存，确定要退出吗？',
+          en: 'Current progress will not be saved. Are you sure to exit?'
+        }),
+        confirmText: i18n.t({ en: 'Exit', zh: '退出' })
+      })
+    }
+    emit('cancelled')
+  },
+  { en: 'Failed to exit modal', zh: '退出失败' }
+).fn
 </script>
 
 <template>
-  <UIFormModal
+  <UIModal
+    ref="modalRef"
     :radar="{ name: 'Sprite generation modal', desc: 'Modal for sprite generation' }"
-    :title="$t({ zh: '生成精灵', en: 'Sprite Generator' })"
+    style="width: 1076px; height: 800px"
     :visible="visible"
-    :style="{ width: '1076px', height: '800px' }"
-    :body-style="{ flex: '1 1 0', padding: '0' }"
-    @update:visible="emit('cancelled')"
+    mask-closable
+    @update:visible="handleModalClose"
   >
-    <SpriteGenComp :gen="gen" @collapse="emit('cancelled')" @finished="emit('resolved', $event)" />
-  </UIFormModal>
+    <header class="header">
+      <h2 class="title">{{ $t({ zh: '生成精灵', en: 'Sprite Generator' }) }}</h2>
+      <UIModalClose class="close" @click="handleModalClose" />
+    </header>
+
+    <SpriteGenComp
+      v-if="activeGen != null"
+      class="sprite-gen"
+      :gen="activeGen"
+      library-search-enabled
+      @collapse="handleGenCollapse"
+      @resolved="emit('resolved', $event)"
+    />
+  </UIModal>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  height: 56px;
+  border-bottom: 1px solid var(--ui-color-grey-400);
+
+  .title {
+    font-size: 16px;
+    color: var(--ui-color-title);
+  }
+}
+
+.sprite-gen {
+  flex: 1 1 0;
+  min-height: 0;
+}
+</style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
index 35f05649a9..77bba979ec 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
@@ -29,7 +29,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   collapse: []
-  finished: [Sprite]
+  resolved: [Sprite]
 }>()
 
 const selected = computed(() => {
@@ -179,7 +179,7 @@ const handleSubmit = useMessageHandle(
     props.gen.recordAdoption().catch((err) => {
       capture(err, 'failed to record sprite asset adoption')
     })
-    emit('finished', sprite)
+    emit('resolved', sprite)
   },
   {
     en: 'Failed to create sprite',
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
index b2a6a421b8..e9aa678d4c 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
@@ -7,18 +7,35 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { UIButton } from '@/components/ui'
+import { AssetType } from '@/apis/asset'
+import type { Sprite } from '@/models/spx/sprite'
+import { asset2Sprite } from '@/models/spx/common/asset'
 import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { useMessageHandle } from '@/utils/exception'
 import { humanizeTimeLeft } from '../common/time-left'
 import LayoutWithPreview from '../common/LayoutWithPreview.vue'
 import ImagePreview from '../common/ImagePreview.vue'
 import ImageSelector from '../common/ImageSelector.vue'
+import AssetSuggestions from '../common/AssetSuggestions.vue'
+import { useAssetSuggestions } from '../common/use-asset-suggestions'
 import SpriteSettingsInput from './SpriteSettingsInput.vue'
 import SpriteImageItem from './SpriteImageItem.vue'
+import SpriteItem from '@/components/asset/library/SpriteItem.vue'
 
-const props = defineProps<{
-  gen: SpriteGen
-  descriptionPlaceholder?: string
+const props = withDefaults(
+  defineProps<{
+    gen: SpriteGen
+    descriptionPlaceholder?: string
+    librarySearchEnabled?: boolean
+  }>(),
+  {
+    descriptionPlaceholder: undefined,
+    librarySearchEnabled: false
+  }
+)
+
+const emit = defineEmits<{
+  resolved: [Sprite]
 }>()
 
 const canSubmit = computed(() => props.gen.image != null)
@@ -36,6 +53,30 @@ function handleImageSelect(index: number) {
   props.gen.setImageIndex(index)
   hasPreview.value = true
 }
+
+const isLibrarySearchEnabled = computed(
+  () => props.librarySearchEnabled && props.gen.imagesGenState.status === 'initial'
+)
+
+const {
+  keyword,
+  suggestions,
+  isLoading: isSuggestionsLoading,
+  selected: selectedAsset,
+  toggle: toggleSelectedAsset
+} = useAssetSuggestions(AssetType.Sprite, () => props.gen.settings.description, isLibrarySearchEnabled)
+
+const handleUseAsset = useMessageHandle(
+  async () => {
+    if (selectedAsset.value == null) throw new Error('no asset selected')
+    const sprite = await asset2Sprite(selectedAsset.value)
+    emit('resolved', sprite)
+  },
+  {
+    en: 'Failed to use asset',
+    zh: '使用素材失败'
+  }
+)
 </script>
 
 <template>
@@ -53,33 +94,48 @@ function handleImageSelect(index: number) {
         :gen="gen"
         :description-placeholder="descriptionPlaceholder"
       />
-      <ImageSelector
-        :state="gen.imagesGenState"
-        :selected="gen.imageIndex"
-        :disabled="handleSubmit.isLoading.value"
-        @select="handleImageSelect"
-      >
-        <template #loading-item>
-          <SpriteImageItem loading />
-        </template>
-        <template #item="{ file, active, onClick }">
-          <SpriteImageItem :file="file" :active="active" @click="onClick" />
-        </template>
-        <template #tip>
-          <template v-if="gen.imagesGenState.status === 'running'">
-            {{ $t({ en: `Generating sprites... `, zh: `正在生成精灵...` }) }}
-            {{ gen.imagesGenState.timeLeft != null ? $t(humanizeTimeLeft(gen.imagesGenState.timeLeft)) : '' }}
+      <div class="select-area">
+        <AssetSuggestions
+          v-if="isLibrarySearchEnabled"
+          :type="AssetType.Sprite"
+          :loading="isSuggestionsLoading"
+          :keyword="keyword"
+          :suggestions="suggestions"
+          :selected="selectedAsset"
+          @toggle="toggleSelectedAsset"
+        >
+          <template #item="{ asset, selected, onClick }">
+            <SpriteItem :asset="asset" :selected="selected" @click="onClick" />
+          </template>
+        </AssetSuggestions>
+        <ImageSelector
+          :state="gen.imagesGenState"
+          :selected="gen.imageIndex"
+          :disabled="handleSubmit.isLoading.value"
+          @select="handleImageSelect"
+        >
+          <template #loading-item>
+            <SpriteImageItem loading />
+          </template>
+          <template #item="{ file, active, onClick }">
+            <SpriteImageItem :file="file" :active="active" @click="onClick" />
           </template>
-          <template v-else-if="gen.imagesGenState.status === 'finished'">
-            {{
-              $t({
-                en: 'Select the sprite you like the most, or generate new ones.',
-                zh: '选择你最喜欢的一个精灵，或者重新生成。'
-              })
-            }}
+          <template #tip>
+            <template v-if="gen.imagesGenState.status === 'running'">
+              {{ $t({ en: `Generating sprites... `, zh: `正在生成精灵...` }) }}
+              {{ gen.imagesGenState.timeLeft != null ? $t(humanizeTimeLeft(gen.imagesGenState.timeLeft)) : '' }}
+            </template>
+            <template v-else-if="gen.imagesGenState.status === 'finished'">
+              {{
+                $t({
+                  en: 'Select the sprite you like the most, or generate new ones.',
+                  zh: '选择你最喜欢的一个精灵，或者重新生成。'
+                })
+              }}
+            </template>
           </template>
-        </template>
-      </ImageSelector>
+        </ImageSelector>
+      </div>
 
       <template #preview>
         <ImagePreview :file="gen.image" />
@@ -87,6 +143,19 @@ function handleImageSelect(index: number) {
     </LayoutWithPreview>
     <footer class="footer">
       <UIButton
+        v-if="selectedAsset != null"
+        v-radar="{
+          name: 'Use',
+          desc: 'Click to use the selected library asset'
+        }"
+        color="primary"
+        size="large"
+        @click="handleUseAsset.fn"
+      >
+        {{ $t({ en: 'Use', zh: '采用' }) }}
+      </UIButton>
+      <UIButton
+        v-else
         v-radar="{
           name: 'Next',
           desc: 'Click to proceed to the next phase of sprite generation (costume & animation generation)'
@@ -96,8 +165,9 @@ function handleImageSelect(index: number) {
         :disabled="!canSubmit"
         :loading="handleSubmit.isLoading.value"
         @click="handleSubmit.fn"
-        >{{ $t({ en: 'Next', zh: '下一步' }) }}</UIButton
       >
+        {{ $t({ en: 'Next', zh: '下一步' }) }}
+      </UIButton>
     </footer>
   </main>
 </template>
@@ -123,6 +193,10 @@ function handleImageSelect(index: number) {
       height: 300px;
     }
   }
+
+  .select-area {
+    min-height: 170px; // Fixed height to prevent layout shift when suggestions appear/disappear
+  }
 }
 .footer {
   width: 100%;
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue b/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
index 1db68f5efb..fa76ac2686 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
@@ -73,8 +73,9 @@ const submitText = computed(() => {
         :loading="imageGenerating"
         @enrich="handleEnrich"
         @submit="handleSubmit"
-        >{{ $t(submitText) }}</EnrichableSubmitButton
       >
+        {{ $t(submitText) }}
+      </EnrichableSubmitButton>
     </template>
   </SettingsInput>
 </template>
diff --git a/spx-gui/src/components/asset/gen/use-asset-gen.ts b/spx-gui/src/components/asset/gen/use-asset-gen.ts
new file mode 100644
index 0000000000..2ee51495a1
--- /dev/null
+++ b/spx-gui/src/components/asset/gen/use-asset-gen.ts
@@ -0,0 +1,48 @@
+import { type ShallowRef, shallowRef, watch, type Ref } from 'vue'
+import { useI18n } from '@/utils/i18n'
+import { AssetType } from '@/apis/asset'
+import type { SpxProject } from '@/models/spx/project'
+import type { AssetGenModel } from '@/models/spx/common/asset'
+import { SpriteGen } from '@/models/spx/gen/sprite-gen'
+import { BackdropGen } from '@/models/spx/gen/backdrop-gen'
+
+export function useAssetGen<T extends AssetType>(project: SpxProject, type: Ref<T | null>) {
+  const i18n = useI18n()
+  const assetGen = shallowRef(null) as ShallowRef<AssetGenModel<T> | null>
+
+  function createAssetGen(t: AssetType) {
+    if (t === AssetType.Sprite) return new SpriteGen(i18n, project)
+    if (t === AssetType.Backdrop) return new BackdropGen(i18n, project)
+    return null
+  }
+
+  watch(
+    type,
+    (t, _, onCleanup) => {
+      assetGen.value = (t != null ? createAssetGen(t) : null) as AssetGenModel<T> | null
+      onCleanup(() => {
+        assetGen.value?.cancel()
+        assetGen.value?.dispose()
+      })
+    },
+    { immediate: true }
+  )
+
+  /**
+   * Prevent assetGen from being canceled & disposed automatically.
+   * This is useful when the user chooses to collapse the generation process
+   * and we need to keep the assetGen instance alive and related tasks running.
+   */
+  function keepAlive(gen: AssetGenModel) {
+    if (assetGen.value !== gen) return
+    assetGen.value = null
+  }
+
+  function reset(t: AssetType) {
+    assetGen.value?.cancel()
+    assetGen.value?.dispose()
+    assetGen.value = createAssetGen(t) as AssetGenModel<T> | null
+  }
+
+  return { assetGen, keepAlive, reset }
+}
diff --git a/spx-gui/src/components/asset/index.ts b/spx-gui/src/components/asset/index.ts
index 3b31efef4d..152454563e 100644
--- a/spx-gui/src/components/asset/index.ts
+++ b/spx-gui/src/components/asset/index.ts
@@ -5,7 +5,7 @@ import { parseScratchFileAssets } from '@/utils/scratch'
 import { stripExt } from '@/utils/path'
 import { useI18n } from '@/utils/i18n'
 import { useNetwork } from '@/utils/network'
-import { type AssetModel } from '@/models/spx/common/asset'
+import { type AssetGenModel, type AssetModel } from '@/models/spx/common/asset'
 import { fromNativeFile } from '@/models/common/file'
 import { type SpxProject } from '@/models/spx/project'
 import { Backdrop } from '@/models/spx/backdrop'
@@ -19,7 +19,7 @@ import { Costume } from '@/models/spx/costume'
 import type { Widget } from '@/models/spx/widget'
 import RenameModal from '../common/RenameModal.vue'
 import SoundRecorderModal from '../editor/stage/sound/SoundRecorderModal.vue'
-import { useEditorCtx } from '../editor/EditorContextProvider.vue'
+import { useEditorCtx, type EditorCtx } from '../editor/EditorContextProvider.vue'
 import { useCodeEditor, useRenameWarning, getResourceIdentifier } from '../editor/code-editor/spx-code-editor'
 import AssetLibraryModal from './library/AssetLibraryModal.vue'
 import AssetSaveModal from './library/AssetSaveModal.vue'
@@ -28,29 +28,51 @@ import PreprocessModal from './preprocessing/PreprocessModal.vue'
 import GroupCostumesModal from './animation/GroupCostumesModal.vue'
 import AssetLibraryManagementModal from './library/management/AssetLibraryManagementModal.vue'
 import SpriteGenModal from './gen/sprite/SpriteGenModal.vue'
+import BackdropGenModal from './gen/backdrop/BackdropGenModal.vue'
 import { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import type { CostumeGen } from '@/models/spx/gen/costume-gen'
 import type { AnimationGen } from '@/models/spx/gen/animation-gen'
 
+function makeGenCollapseHandler(editorCtx: EditorCtx) {
+  return async (gen: AssetGenModel, isNewGen = true) => {
+    // Add the ongoing asset generation to the editor state when the generation is newly created and not yet added
+    if (gen instanceof SpriteGen) {
+      if (isNewGen) editorCtx.state.genState.addSprite(gen)
+      return editorCtx.state.genState.getSpritePos(gen)
+    } else if (gen instanceof BackdropGen) {
+      if (isNewGen) editorCtx.state.genState.addBackdrop(gen)
+      return editorCtx.state.genState.getBackdropPos(gen)
+    }
+    return null
+  }
+}
+
+export function useSpriteGenModal() {
+  const editorCtx = useEditorCtx()
+  const genCollapseHandler = makeGenCollapseHandler(editorCtx)
+  const invokeModal = useModal(SpriteGenModal)
+  return function invokeSpriteGenModal(project: SpxProject, gen?: SpriteGen) {
+    return invokeModal({ project, gen, genCollapseHandler })
+  }
+}
+
+export function useBackdropGenModal() {
+  const invokeModal = useModal(BackdropGenModal)
+  return function invokeBackdropGenModal(project: SpxProject, gen?: BackdropGen) {
+    return invokeModal({ project, gen })
+  }
+}
+
 export function useAddAssetFromLibrary() {
   const editorCtx = useEditorCtx()
+  const genCollapseHandler = makeGenCollapseHandler(editorCtx)
   const invokeAssetLibraryModal = useModal(AssetLibraryModal)
   return async function addAssetFromLibrary<T extends AssetType>(project: SpxProject, type: T) {
     return (await invokeAssetLibraryModal({
       project,
       type,
-      genCollapseHandler: async (gen) => {
-        // Add the ongoing asset generation to the editor state
-        if (gen instanceof SpriteGen) {
-          editorCtx.state.genState.addSprite(gen)
-          return editorCtx.state.genState.getSpritePos(gen)
-        } else if (gen instanceof BackdropGen) {
-          editorCtx.state.genState.addBackdrop(gen)
-          return editorCtx.state.genState.getBackdropPos(gen)
-        }
-        return null
-      }
+      genCollapseHandler
     })) as Array<AssetModel<T>>
   }
 }
@@ -368,13 +390,6 @@ export function useRenameWidget() {
   }
 }
 
-export function useSpriteGenModal() {
-  const invokeModal = useModal(SpriteGenModal)
-  return function spriteGenModal(spriteGen: SpriteGen) {
-    return invokeModal({ gen: spriteGen })
-  }
-}
-
 export function useRenameCostumeGen() {
   const invokeRenameModal = useModal(RenameModal)
   return async function renameCostumeGen(gen: CostumeGen) {
diff --git a/spx-gui/src/components/asset/library/AssetLibraryModal.vue b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
index 9a8733c267..de85e6339d 100644
--- a/spx-gui/src/components/asset/library/AssetLibraryModal.vue
+++ b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, h, ref, shallowReactive, shallowRef, watch, type Component, type CSSProperties } from 'vue'
+import { computed, ref, shallowReactive, shallowRef, watch, type Component, h } from 'vue'
 import {
   UITextInput,
   UIPagination,
@@ -18,13 +18,9 @@ import { useI18n } from '@/utils/i18n'
 import { useMessageHandle } from '@/utils/exception'
 import { useQuery } from '@/utils/query'
 import { type SpxProject } from '@/models/spx/project'
-import {
-  asset2Backdrop,
-  asset2Sound,
-  asset2Sprite,
-  type AssetGenModel,
-  type AssetModel
-} from '@/models/spx/common/asset'
+import { Sprite } from '@/models/spx/sprite'
+import { Backdrop } from '@/models/spx/backdrop'
+import { addAssetToProject, type AssetGenModel, type AssetModel } from '@/models/spx/common/asset'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import ListResultWrapper from '@/components/common/ListResultWrapper.vue'
 import { getAssetCategories } from './category'
@@ -38,6 +34,7 @@ import { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import { ownerAll } from '@/apis/common'
 import SpriteGenComp from '../gen/sprite/SpriteGen.vue'
 import BackdropGenComp from '../gen/backdrop/BackdropGen.vue'
+import { useAssetGen } from '../gen/use-asset-gen'
 
 import genAssetIcon from './gen-asset.svg?raw'
 import spriteBanner from './asset-library-sprite-banner.png'
@@ -91,36 +88,15 @@ const SettingsInput = computed<Component<{ gen: SpriteGen | BackdropGen }> | nul
     })[props.type]
 )
 
-const assetGen = shallowRef<AssetGenModel | null>(null)
-function createAssetGen(type: AssetType) {
-  return {
-    [AssetType.Sound]: null,
-    [AssetType.Sprite]: new SpriteGen(i18n, props.project),
-    [AssetType.Backdrop]: new BackdropGen(i18n, props.project)
-  }[type]
-}
-watch(
-  () => props.type,
-  (type, _, onCleanup) => {
-    assetGen.value = createAssetGen(type)
-    onCleanup(() => {
-      assetGen.value?.cancel()
-      assetGen.value?.dispose()
-    })
-  },
-  { immediate: true }
-)
+const typeRef = computed(() => props.type)
+const { assetGen, keepAlive, reset: resetAssetGen } = useAssetGen(props.project, typeRef)
 
-// Recreate assetGen when keyword changes to ensure fresh state for new searches.
+// When search results are empty, SettingsInput is shown inline and may modify assetGen state.
+// Reset assetGen on keyword change to avoid stale state if the user searches again without entering gen phase.
 // TODO: Recreating assetGen on every keyword change might be too frequent. Consider constructing it only when needed.
-watch(
-  () => keyword.value,
-  () => {
-    assetGen.value?.cancel()
-    assetGen.value?.dispose()
-    assetGen.value = createAssetGen(props.type)
-  }
-)
+watch(keyword, () => resetAssetGen(props.type))
+
+const backButtonVisible = computed(() => (assetGen.value != null ? assetGen.value.isPreparePhase : false))
 
 const headerStyle = computed(() => {
   const banner = {
@@ -133,40 +109,6 @@ const headerStyle = computed(() => {
   }
 })
 
-/**
- * Prevent assetGen from being cancelled & disposed automatically.
- * This is useful when the user chooses to collapse the generation process
- * and we need to keep the assetGen instance alive and related tasks running.
- */
-function keepAssetGenAlive(gen: AssetGenModel) {
-  if (assetGen.value !== gen) return
-  assetGen.value = null
-}
-
-const AssetGenComp = computed(() => {
-  const gen = assetGen.value
-  if (gen == null) return null
-  if (gen instanceof SpriteGen) {
-    return (props: CSSProperties) =>
-      h(SpriteGenComp, {
-        ...props,
-        gen,
-        descriptionPlaceholder: keyword.value.trim(),
-        onCollapse: handleGenCollapse,
-        onFinished: handleGenFinished
-      })
-  } else if (gen instanceof BackdropGen) {
-    return (props: CSSProperties) =>
-      h(BackdropGenComp, {
-        ...props,
-        gen: gen as BackdropGen,
-        descriptionPlaceholder: keyword.value.trim(),
-        onFinished: handleGenFinished
-      })
-  }
-  return null
-})
-
 const entityMessages = {
   [AssetType.Backdrop]: { en: 'backdrop', zh: '背景' },
   [AssetType.Sprite]: { en: 'sprite', zh: '精灵' },
@@ -236,36 +178,13 @@ const genSuggestionMessage = computed(() => {
 
 const selected = shallowReactive<AssetData[]>([])
 
-async function addAssetToProject(asset: AssetData) {
-  switch (asset.type) {
-    case AssetType.Sprite: {
-      const sprite = await asset2Sprite(asset)
-      props.project.addSprite(sprite)
-      await sprite.autoFit()
-      return sprite
-    }
-    case AssetType.Backdrop: {
-      const backdrop = await asset2Backdrop(asset)
-      props.project.stage.addBackdrop(backdrop)
-      return backdrop
-    }
-    case AssetType.Sound: {
-      const sound = await asset2Sound(asset)
-      props.project.addSound(sound)
-      return sound
-    }
-    default:
-      throw new Error('unknown asset type')
-  }
-}
-
 const handleConfirm = useMessageHandle(
   async () => {
     const action = {
       name: { en: `Add ${entityMessage.value.en}`, zh: `添加${entityMessage.value.zh}` }
     }
     const assetModels = await editorCtx.state.history.doAction(action, () =>
-      Promise.all(selected.map(addAssetToProject))
+      Promise.all(selected.map((asset) => addAssetToProject(asset, props.project)))
     )
     emit('resolved', assetModels)
   },
@@ -289,8 +208,6 @@ function handleGenStart() {
   isGenPhase.value = true
 }
 
-const backButtonVisible = computed(() => (assetGen.value != null ? assetGen.value.isPreparePhase : false))
-
 // Handle returning to the asset library: reset search criteria and recreate assetGen to prevent unexpected intermediate states.
 const handleBackToAssetLibrary = useMessageHandle(
   async () => {
@@ -306,9 +223,7 @@ const handleBackToAssetLibrary = useMessageHandle(
     searchInput.value = ''
     keyword.value = ''
     isGenPhase.value = false
-    assetGen.value?.cancel()
-    assetGen.value?.dispose()
-    assetGen.value = createAssetGen(props.type)
+    resetAssetGen(props.type)
   },
   {
     en: 'Failed to return to asset library',
@@ -320,7 +235,7 @@ const modalRef = ref<InstanceType<typeof UIModal> | null>()
 async function handleGenCollapse() {
   const gen = assetGen.value
   if (gen == null) throw new Error('asset gen expected')
-  keepAssetGenAlive(gen)
+  keepAlive(gen)
   const transformOrigin = await props.genCollapseHandler(gen)
   if (modalRef.value != null && transformOrigin != null) {
     modalRef.value.setTransformOrigin(transformOrigin)
@@ -328,41 +243,53 @@ async function handleGenCollapse() {
   emit('cancelled')
 }
 
-const handleGenFinished = useMessageHandle(
-  async () => {
-    const gen = assetGen.value
-    if (gen == null) throw new Error('asset gen expected')
+const handleGenResolved = useMessageHandle(
+  async (model: AssetModel) => {
     // Consider moving asset addition outside AssetLibraryModal for better separation of concerns.
     // However, this would introduce a delay between the modal close and assets addition, potentially degrading UX.
     // TODO: Review this trade-off
-    const added = await editorCtx.state.history.doAction(
-      {
-        name: { en: `Add ${entityMessage.value.en}`, zh: `添加${entityMessage.value.zh}` }
-      },
+    await editorCtx.state.history.doAction(
+      { name: { en: `Add ${entityMessage.value.en}`, zh: `添加${entityMessage.value.zh}` } },
       async () => {
-        if (gen instanceof SpriteGen) {
-          const sprite = gen.result
-          if (sprite == null) throw new Error('sprite generation not finished')
-          props.project.addSprite(sprite)
-          await sprite.autoFit()
-          return sprite
-        } else if (gen instanceof BackdropGen) {
-          const backdrop = gen.result
-          if (backdrop == null) throw new Error('backdrop generation not finished')
-          props.project.stage.addBackdrop(backdrop)
-          return backdrop
+        if (model instanceof Sprite) {
+          props.project.addSprite(model)
+          await model.autoFit()
+          return
+        }
+        if (model instanceof Backdrop) {
+          props.project.stage.addBackdrop(model)
         }
-        throw new Error('unknown asset type')
       }
     )
-    emit('resolved', [added])
+    emit('resolved', [model])
   },
-  {
-    en: 'Failed to generate asset',
-    zh: '素材生成失败'
-  }
+  { en: 'Failed to add asset', zh: '素材添加失败' }
 ).fn
 
+const AssetGenComp = computed(() => {
+  const gen = assetGen.value
+  if (gen == null) return null
+  if (gen instanceof SpriteGen) {
+    return (attrs: Record<string, unknown>) =>
+      h(SpriteGenComp, {
+        ...attrs,
+        gen,
+        descriptionPlaceholder: keyword.value.trim(),
+        onCollapse: handleGenCollapse,
+        onResolved: handleGenResolved
+      })
+  } else if (gen instanceof BackdropGen) {
+    return (attrs: Record<string, unknown>) =>
+      h(BackdropGenComp, {
+        ...attrs,
+        gen,
+        descriptionPlaceholder: keyword.value.trim(),
+        onResolved: handleGenResolved
+      })
+  }
+  return null
+})
+
 const confirm = useConfirmDialog()
 
 const handleModalClose = useMessageHandle(
@@ -431,8 +358,9 @@ const title = computed(() => {
               size="large"
               clearable
               :placeholder="$t({ zh: '搜索', en: 'Search' })"
-              ><template #prefix><UIIcon type="search" /></template
-            ></UITextInput>
+            >
+              <template #prefix><UIIcon type="search" /></template>
+            </UITextInput>
 
             <div class="recommended-buttons">
               <UIButton
@@ -442,8 +370,9 @@ const title = computed(() => {
                 color="white"
                 size="small"
                 @click="searchInput = [searchInput, $t(r.message)].filter(Boolean).join(' ')"
-                >{{ $t(r.message) }}</UIButton
               >
+                {{ $t(r.message) }}
+              </UIButton>
             </div>
           </header>
 
@@ -467,9 +396,14 @@ const title = computed(() => {
                     <div class="empty-tip">
                       <span>{{ $t({ zh: `没找到`, en: `No assets found for ` }) }}</span>
                       <span class="highlight">{{ $t({ zh: `“${keyword}”`, en: `"${keyword}"` }) }}</span>
-                      <span>{{
-                        $t({ zh: '相关的素材，不如让 AI 帮你生成一个？', en: '. Why not let AI generate one for you?' })
-                      }}</span>
+                      <span>
+                        {{
+                          $t({
+                            zh: '相关的素材，不如让 AI 帮你生成一个？',
+                            en: '. Why not let AI generate one for you?'
+                          })
+                        }}
+                      </span>
                     </div>
                     <SettingsInput
                       class="settings-input"
diff --git a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
index aa47cec234..252b0f7e71 100644
--- a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
@@ -3,13 +3,14 @@ import { computed, ref, watch } from 'vue'
 
 import type { SpxProject } from '@/models/spx/project'
 import type { Sprite } from '@/models/spx/sprite'
+import { AssetType } from '@/apis/asset'
 import { useMessageHandle } from '@/utils/exception'
 
 import { getCssVars, UICard, UIIcon, UIMenu, UIMenuItem, UITooltip, useUIVariables } from '@/components/ui'
-import SpriteList from '@/components/editor/sprite/SpriteList.vue'
+import { useAddAssetFromLibrary, useAddSpriteFromLocalFile, useSpriteGenModal } from '@/components/asset'
+import { useEditorCtx } from '../EditorContextProvider.vue'
+import SpriteList from '../sprite/SpriteList.vue'
 import PanelHeader from '../panels/common/PanelHeader.vue'
-import { useAddAssetFromLibrary, useAddSpriteFromLocalFile } from '@/components/asset'
-import { AssetType } from '@/apis/asset'
 import PanelFooter from '../panels/common/PanelFooter.vue'
 import SpriteBasicConfig from './SpriteBasicConfig.vue'
 
@@ -22,6 +23,8 @@ const emit = defineEmits<{
   'update:selectedSprite': [sprite: Sprite]
 }>()
 
+const editorCtx = useEditorCtx()
+
 const footerExpanded = ref(props.selectedSprite != null)
 watch(
   () => props.selectedSprite,
@@ -59,6 +62,22 @@ const handleAddFromAssetLibrary = useMessageHandle(
     zh: '从素材库添加失败'
   }
 ).fn
+
+const invokeSpriteGenModal = useSpriteGenModal()
+const handleGenerate = useMessageHandle(
+  async () => {
+    const sprite = await invokeSpriteGenModal(editorCtx.project)
+    await editorCtx.state.history.doAction({ name: { en: 'Add sprite', zh: '添加精灵' } }, async () => {
+      editorCtx.project.addSprite(sprite)
+      await sprite.autoFit()
+    })
+    handleSpriteClick(sprite)
+  },
+  {
+    en: 'Failed to generate sprite',
+    zh: '生成精灵失败'
+  }
+).fn
 </script>
 
 <template>
@@ -74,13 +93,21 @@ const handleAddFromAssetLibrary = useMessageHandle(
           <UIMenuItem
             v-radar="{ name: 'Add from local file', desc: 'Click to add sprite from local file' }"
             @click="handleAddFromLocalFile"
-            >{{ $t({ en: 'Select local file', zh: '选择本地文件' }) }}</UIMenuItem
           >
+            {{ $t({ en: 'Select local file', zh: '选择本地文件' }) }}
+          </UIMenuItem>
           <UIMenuItem
             v-radar="{ name: 'Add from asset library', desc: 'Click to add sprite from asset library' }"
             @click="handleAddFromAssetLibrary"
-            >{{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}</UIMenuItem
           >
+            {{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}
+          </UIMenuItem>
+          <UIMenuItem
+            v-radar="{ name: 'Generate sprite', desc: 'Click to generate sprite with AI' }"
+            @click="handleGenerate"
+          >
+            {{ $t({ en: 'Generate with AI', zh: '使用 AI 生成' }) }}
+          </UIMenuItem>
         </UIMenu>
       </template>
     </PanelHeader>
diff --git a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
index fa0f29af3c..b67c833eee 100644
--- a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
@@ -17,6 +17,12 @@
             >
               {{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}
             </UIMenuItem>
+            <UIMenuItem
+              v-radar="{ name: 'Generate sprite', desc: 'Click to generate sprite with AI' }"
+              @click="handleGenerate"
+            >
+              {{ $t({ en: 'Generate with AI', zh: '使用 AI 生成' }) }}
+            </UIMenuItem>
           </UIMenu>
         </template>
       </PanelHeader>
@@ -29,7 +35,7 @@
 import { computed } from 'vue'
 import { AssetType } from '@/apis/asset'
 import { useMessageHandle } from '@/utils/exception'
-import { useAddAssetFromLibrary, useAddSpriteFromLocalFile } from '@/components/asset'
+import { useAddAssetFromLibrary, useAddSpriteFromLocalFile, useSpriteGenModal } from '@/components/asset'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import { UIMenu, UIMenuItem, useUIVariables, getCssVars } from '@/components/ui'
 import SpriteList from '@/components/editor/sprite/SpriteList.vue'
@@ -66,6 +72,22 @@ const handleAddFromAssetLibrary = useMessageHandle(
     zh: '从素材库添加失败'
   }
 ).fn
+
+const invokeSpriteGenModal = useSpriteGenModal()
+const handleGenerate = useMessageHandle(
+  async () => {
+    const sprite = await invokeSpriteGenModal(editorCtx.project)
+    await editorCtx.state.history.doAction({ name: { en: 'Add sprite', zh: '添加精灵' } }, async () => {
+      editorCtx.project.addSprite(sprite)
+      await sprite.autoFit()
+    })
+    editorCtx.state.selectSprite(sprite.id)
+  },
+  {
+    en: 'Failed to generate sprite',
+    zh: '生成精灵失败'
+  }
+).fn
 </script>
 
 <style scoped lang="scss">
diff --git a/spx-gui/src/components/editor/sprite/SpriteList.vue b/spx-gui/src/components/editor/sprite/SpriteList.vue
index 8766964a3c..93f97b6ad0 100644
--- a/spx-gui/src/components/editor/sprite/SpriteList.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteList.vue
@@ -85,7 +85,7 @@ const invokeSpriteGenModal = useSpriteGenModal()
 
 const handleSpriteGenClick = useMessageHandle(
   async (gen: SpriteGen) => {
-    const result = await invokeSpriteGenModal(gen)
+    const result = await invokeSpriteGenModal(editorCtx.project, gen)
 
     // TODO: should disposal of gen be implemented in `useSpriteGenModal`?
     gen.dispose()
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue
index 35d4de398e..823430c0f0 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropsEditor.vue
@@ -19,13 +19,21 @@
         <UIMenuItem
           v-radar="{ name: 'Add from local file', desc: 'Click to add backdrop from local file' }"
           @click="handleAddFromLocalFile"
-          >{{ $t({ en: 'Select local file', zh: '选择本地文件' }) }}</UIMenuItem
         >
+          {{ $t({ en: 'Select local file', zh: '选择本地文件' }) }}
+        </UIMenuItem>
         <UIMenuItem
           v-radar="{ name: 'Add from asset library', desc: 'Click to add backdrop from asset library' }"
           @click="handleAddFromAssetLibrary"
-          >{{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}</UIMenuItem
         >
+          {{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}
+        </UIMenuItem>
+        <UIMenuItem
+          v-radar="{ name: 'Generate backdrop', desc: 'Click to generate backdrop with AI' }"
+          @click="handleGenerate"
+        >
+          {{ $t({ en: 'Generate with AI', zh: '使用 AI 生成' }) }}
+        </UIMenuItem>
       </UIMenu>
     </template>
     <template #detail>
@@ -76,7 +84,7 @@ import { capture, useMessageHandle } from '@/utils/exception'
 import { shiftPath, type PathSegments } from '@/utils/route'
 import type { Stage } from '@/models/spx/stage'
 import { Backdrop } from '@/models/spx/backdrop'
-import { useAddAssetFromLibrary, useAddBackdropFromLocalFile } from '@/components/asset'
+import { useAddAssetFromLibrary, useAddBackdropFromLocalFile, useBackdropGenModal } from '@/components/asset'
 import { AssetType } from '@/apis/asset'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
 import EditorList from '../../common/EditorList.vue'
@@ -121,6 +129,21 @@ const handleAddFromAssetLibrary = useMessageHandle(
   }
 ).fn
 
+const invokeBackdropGenModal = useBackdropGenModal()
+const handleGenerate = useMessageHandle(
+  async () => {
+    const backdrop = await invokeBackdropGenModal(editorCtx.project)
+    await editorCtx.state.history.doAction({ name: { en: 'Add backdrop', zh: '添加背景' } }, () => {
+      editorCtx.project.stage.addBackdrop(backdrop)
+    })
+    props.state.select(backdrop.id)
+  },
+  {
+    en: 'Failed to generate backdrop',
+    zh: '生成背景失败'
+  }
+).fn
+
 const handleSorted = useMessageHandle(
   async (oldIdx: number, newIdx: number) => {
     const action = { name: { en: 'Update backdrop order', zh: '更新背景顺序' } }
diff --git a/spx-gui/src/models/spx/common/asset.ts b/spx-gui/src/models/spx/common/asset.ts
index 30dfeb9b01..7a66b47a5b 100644
--- a/spx-gui/src/models/spx/common/asset.ts
+++ b/spx-gui/src/models/spx/common/asset.ts
@@ -8,6 +8,7 @@ import type { SpriteGen } from '../gen/sprite-gen'
 import type { BackdropGen } from '../gen/backdrop-gen'
 import { fromBlob, fromConfig, toConfig } from '../../common/file'
 import { getFiles, saveFiles } from '../../common/cloud'
+import type { SpxProject } from '@/models/spx/project'
 
 export type AssetMetadata = Partial<Omit<AssetData, 'files'>>
 
@@ -144,3 +145,26 @@ export async function genAssetFromCanvas(name: string, width: number, height: nu
   const file = fromBlob(filename, blob)
   return file
 }
+
+export async function addAssetToProject(asset: AssetData, project: SpxProject) {
+  switch (asset.type) {
+    case AssetType.Sprite: {
+      const sprite = await asset2Sprite(asset)
+      project.addSprite(sprite)
+      await sprite.autoFit()
+      return sprite
+    }
+    case AssetType.Backdrop: {
+      const backdrop = await asset2Backdrop(asset)
+      project.stage.addBackdrop(backdrop)
+      return backdrop
+    }
+    case AssetType.Sound: {
+      const sound = await asset2Sound(asset)
+      project.addSound(sound)
+      return sound
+    }
+    default:
+      throw new Error('unknown asset type')
+  }
+}