diff --git a/.github/assets/playtest/playtest-entry-desktop.png b/.github/assets/playtest/playtest-entry-desktop.png
new file mode 100644
index 00000000..766a2e62
Binary files /dev/null and b/.github/assets/playtest/playtest-entry-desktop.png differ
diff --git a/.github/assets/playtest/playtest-entry-mobile.png b/.github/assets/playtest/playtest-entry-mobile.png
new file mode 100644
index 00000000..be0f7c97
Binary files /dev/null and b/.github/assets/playtest/playtest-entry-mobile.png differ
diff --git a/frontend/src/pages/asset-library/index.test.tsx b/frontend/src/pages/asset-library/index.test.tsx
index 58cb1bde..489a8140 100644
--- a/frontend/src/pages/asset-library/index.test.tsx
+++ b/frontend/src/pages/asset-library/index.test.tsx
@@ -40,7 +40,7 @@ describe('AssetLibraryPage', () => {
     expect(preview.getAttribute('decoding')).toBe('async')
     expect(preview.getAttribute('fetchpriority')).toBe('high')
     expect(screen.getAllByText('1 套造型')).toHaveLength(1)
-    expect(screen.getByText('2 个动作')).toBeTruthy()
+    expect(screen.getByText('3 个动作')).toBeTruthy()
     expect(screen.queryByRole('searchbox')).toBeNull()
     expect(screen.queryByRole('button', { name: '导出全部角色资产' })).toBeNull()
   })
diff --git a/frontend/src/pages/character-detail/index.test.tsx b/frontend/src/pages/character-detail/index.test.tsx
index 63e0b3c5..c114c12f 100644
--- a/frontend/src/pages/character-detail/index.test.tsx
+++ b/frontend/src/pages/character-detail/index.test.tsx
@@ -32,7 +32,7 @@ describe('CharacterDetailPage', () => {
 
     expect(await screen.findByRole('heading', { name: '轻装信使' })).toBeTruthy()
     expect(screen.getByRole('combobox', { name: '选择造型' })).toBeTruthy()
-    expect(screen.getAllByRole('article', { name: /动作/ })).toHaveLength(2)
+    expect(screen.getAllByRole('article', { name: /动作/ })).toHaveLength(3)
     expect(screen.getByRole('img', { name: '呼吸待机帧预览' }).getAttribute('src')).toBe(
       'https://cdn.windup.test/idle-01.png',
     )
diff --git a/frontend/src/pages/playtest/entry.test.tsx b/frontend/src/pages/playtest/entry.test.tsx
index 07e99c78..424f8381 100644
--- a/frontend/src/pages/playtest/entry.test.tsx
+++ b/frontend/src/pages/playtest/entry.test.tsx
@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { cleanup, render, screen } from '@testing-library/react'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -39,20 +39,38 @@ describe('PlaytestEntryPage', () => {
   it('links playable outfits to their concrete Playtest route', async () => {
     renderEntry()
 
-    expect(await screen.findByRole('heading', { name: '选择可预览资产' })).toBeTruthy()
-    expect(screen.getByTestId('playtest-pixel-stage').getAttribute('aria-hidden')).toBe('true')
+    expect(await screen.findByRole('heading', { name: '预览台' })).toBeTruthy()
+    expect(screen.queryByTestId('playtest-pixel-stage')).toBeNull()
     expect(
       (await screen.findByRole('link', { name: '预览 轻装信使 · 常态造型' })).getAttribute('href'),
     ).toBe('/playtest/51/outfit-default')
+    expect(screen.getAllByText('点灯人 · MVP').length).toBeGreaterThan(0)
+    expect(screen.getByText('呼吸待机 · 行走')).toBeTruthy()
     expect(screen.getByText('2 个动作 · 5 帧')).toBeTruthy()
     expect(screen.getByText('尚无可播放帧')).toBeTruthy()
   })
 
+  it('filters the global outfit gallery by project without starting a second picker flow', async () => {
+    renderEntry()
+
+    expect(await screen.findByRole('button', { name: '筛选项目 空白海岸' })).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: '筛选项目 空白海岸' }))
+
+    expect(screen.queryByRole('link', { name: '预览 轻装信使 · 常态造型' })).toBeNull()
+    expect(screen.getByText('这个项目还没有可预览造型')).toBeTruthy()
+    expect(screen.getByRole('button', { name: '筛选全部项目' }).getAttribute('aria-pressed')).toBe(
+      'false',
+    )
+  })
+
   it('directs an empty account back to character creation', async () => {
     renderEntry(0)
 
     expect(await screen.findByText('还没有可预览的角色')).toBeTruthy()
-    expect(screen.getByRole('link', { name: '开始创作' }).getAttribute('href')).toBe('/quick-start')
+    const createLink = screen.getByRole('link', { name: '开始创作' })
+    expect(createLink.getAttribute('href')).toBe('/quick-start')
+    expect(createLink.getAttribute('data-ui')).toBe('editorial-entry-card')
+    expect(createLink.querySelector('img')?.getAttribute('src')).toContain('playtest.png')
     expect(screen.getByRole('link', { name: '查看项目资产' }).getAttribute('href')).toBe(
       '/projects',
     )
diff --git a/frontend/src/pages/playtest/entry.tsx b/frontend/src/pages/playtest/entry.tsx
index 0805acbd..386c5b8f 100644
--- a/frontend/src/pages/playtest/entry.tsx
+++ b/frontend/src/pages/playtest/entry.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Link } from 'react-router'
 
 import {
@@ -10,9 +10,7 @@ import {
   type Project,
 } from '@/entities'
 import type { Paged } from '@/shared/pagination'
-import { PageContainer } from '@/shared/ui'
-
-import { PlaytestPixelStage } from './pixel-stage'
+import { EditorialEntryCard, PageContainer } from '@/shared/ui'
 
 interface ProjectCharacters {
   project: Project
@@ -48,6 +46,7 @@ function characterName(character: Character) {
  */
 export function PlaytestEntryPage() {
   const [state, setState] = useState<EntryState>(initialState)
+  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null)
 
   useEffect(() => {
     let active = true
@@ -78,39 +77,38 @@ export function PlaytestEntryPage() {
     }
   }, [])
 
-  const outfitCount =
-    state.groups?.reduce(
-      (total, group) =>
-        total + group.characters.reduce((sum, character) => sum + character.outfits.length, 0),
-      0,
-    ) ?? 0
+  const outfits = useMemo(
+    () =>
+      state.groups?.flatMap(({ project, characters }) =>
+        characters.flatMap((character) =>
+          character.outfits.map((outfit) => ({ project, character, outfit })),
+        ),
+      ) ?? [],
+    [state.groups],
+  )
+  const visibleOutfits = selectedProjectId
+    ? outfits.filter(({ project }) => project.id === selectedProjectId)
+    : outfits
+  const outfitCount = outfits.length
 
   return (
     <PageContainer>
       <section aria-labelledby="playtest-entry-title">
-        <header className="relative overflow-hidden border-b border-app-line bg-[linear-gradient(105deg,var(--color-app-surface-raised)_0%,var(--color-app-surface-raised)_54%,var(--color-app-surface)_100%)] pb-7 md:min-h-64 md:px-2 md:py-7">
-          <div className="relative z-10 max-w-xl">
-            <p className="font-mono text-[0.68rem] font-semibold tracking-[0.2em] text-app-faint uppercase">
-              Character field test
+        <header className="flex flex-col gap-4 border-b border-app-line pb-6 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h1
+              id="playtest-entry-title"
+              className="font-serif text-4xl font-medium tracking-[-0.045em] text-app-ink"
+            >
+              预览台
+            </h1>
+            <p className="mt-2 max-w-2xl text-sm leading-6 text-app-muted">
+              从已有造型进入操控测试，检查动作衔接、移动反馈和实际播放效果。
             </p>
-            <div className="mt-3">
-              <h1
-                id="playtest-entry-title"
-                className="font-serif text-4xl font-medium tracking-[-0.045em] text-app-ink"
-              >
-                选择可预览资产
-              </h1>
-              <p className="mt-2 max-w-2xl text-sm leading-6 text-app-muted">
-                选择一套已有造型，检查动作衔接、移动反馈和实际播放效果。
-              </p>
-            </div>
-            <div className="mt-5 flex items-center gap-3 font-mono text-[0.68rem] text-app-faint">
-              <span className="inline-block h-1.5 w-1.5 bg-app-accent" />
-              <span>{state.groups !== null ? `${outfitCount} 套造型已接入` : '正在接入资产'}</span>
-            </div>
           </div>
-
-          <PlaytestPixelStage />
+          <p className="shrink-0 pb-0.5 font-mono text-[0.68rem] text-app-faint">
+            {state.groups !== null ? `${outfitCount} 套造型已接入` : '正在接入资产'}
+          </p>
         </header>
 
         {state.error ? (
@@ -120,43 +118,59 @@ export function PlaytestEntryPage() {
         ) : outfitCount === 0 ? (
           <EmptyState />
         ) : (
-          <div className="mt-7 space-y-8">
-            {state.groups.map((group) => {
-              const charactersWithOutfits = group.characters.filter(
-                (character) => character.outfits.length > 0,
-              )
-              if (charactersWithOutfits.length === 0) return null
+          <div className="mt-5">
+            <div
+              className="flex flex-wrap items-center gap-2 border-b border-app-line pb-4"
+              aria-label="按项目筛选"
+            >
+              <button
+                type="button"
+                aria-label="筛选全部项目"
+                aria-pressed={selectedProjectId === null}
+                onClick={() => setSelectedProjectId(null)}
+                className={`min-h-9 rounded-full border px-4 text-xs font-medium transition ${
+                  selectedProjectId === null
+                    ? 'border-app-accent bg-app-accent text-app-on-accent'
+                    : 'border-app-line bg-app-surface text-app-muted hover:border-app-line-strong hover:text-app-ink'
+                }`}
+              >
+                全部
+              </button>
+              {state.groups.map(({ project }) => (
+                <button
+                  key={project.id}
+                  type="button"
+                  aria-label={`筛选项目 ${project.name}`}
+                  aria-pressed={selectedProjectId === project.id}
+                  onClick={() => setSelectedProjectId(project.id)}
+                  className={`min-h-9 rounded-full border px-4 text-xs font-medium transition ${
+                    selectedProjectId === project.id
+                      ? 'border-app-accent bg-app-accent text-app-on-accent'
+                      : 'border-app-line bg-app-surface text-app-muted hover:border-app-line-strong hover:text-app-ink'
+                  }`}
+                >
+                  {project.name}
+                </button>
+              ))}
+            </div>
 
-              return (
-                <section key={group.project.id} aria-labelledby={`project-${group.project.id}`}>
-                  <div className="flex items-center justify-between gap-4">
-                    <h2
-                      id={`project-${group.project.id}`}
-                      className="text-sm font-semibold text-app-ink-soft"
-                    >
-                      {group.project.name}
-                    </h2>
-                    <Link
-                      to={`/projects/${group.project.id}/assets`}
-                      className="text-xs font-medium text-app-muted underline decoration-app-line underline-offset-4 hover:text-app-accent"
-                    >
-                      查看项目资产
-                    </Link>
-                  </div>
-                  <div className="mt-3 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
-                    {charactersWithOutfits.flatMap((character) =>
-                      character.outfits.map((outfit) => (
-                        <OutfitCard
-                          key={`${character.id}:${outfit.id}`}
-                          character={character}
-                          outfit={outfit}
-                        />
-                      )),
-                    )}
-                  </div>
-                </section>
-              )
-            })}
+            {visibleOutfits.length === 0 ? (
+              <div className="py-16 text-center">
+                <p className="font-serif text-2xl text-app-ink">这个项目还没有可预览造型</p>
+                <p className="mt-2 text-sm text-app-muted">可以先去项目资产确认角色和造型。</p>
+              </div>
+            ) : (
+              <div className="mt-5 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+                {visibleOutfits.map(({ project, character, outfit }) => (
+                  <OutfitCard
+                    key={`${character.id}:${outfit.id}`}
+                    project={project}
+                    character={character}
+                    outfit={outfit}
+                  />
+                ))}
+              </div>
+            )}
           </div>
         )}
       </section>
@@ -164,12 +178,22 @@ export function PlaytestEntryPage() {
   )
 }
 
-function OutfitCard({ character, outfit }: { character: Character; outfit: Outfit }) {
+function OutfitCard({
+  project,
+  character,
+  outfit,
+}: {
+  project: Project
+  character: Character
+  outfit: Outfit
+}) {
   const { frameCount, playable } = getOutfitPlayback(outfit)
   const name = characterName(character)
+  const playableActions = outfit.actions.filter((action) => action.frames.length > 0)
+  const actionSummary = playableActions.map((action) => action.name).join(' · ')
   const content = (
     <article
-      className={`group overflow-hidden rounded-[1.4rem] border bg-app-surface ${
+      className={`group overflow-hidden rounded-[1.5rem] border bg-app-surface ${
         playable
           ? 'border-app-line transition duration-300 hover:-translate-y-0.5 hover:border-app-line-strong hover:bg-app-surface-raised'
           : 'border-app-line text-app-faint'
@@ -203,19 +227,31 @@ function OutfitCard({ character, outfit }: { character: Character; outfit: Outfi
           {playable ? '可预览' : '待补帧'}
         </span>
       </div>
-      <div className="p-4">
-        <p className="text-xs text-app-faint">{name}</p>
+      <div className="p-5">
+        <p className="text-xs text-app-faint">{project.name}</p>
         <div className="mt-1 flex items-start justify-between gap-3">
-          <h3 className="font-serif text-xl font-medium tracking-[-0.03em] text-app-ink">
-            {outfit.name}
-          </h3>
+          <div>
+            <h3 className="font-serif text-xl font-medium tracking-[-0.03em] text-app-ink">
+              {name}
+            </h3>
+            <p className="mt-1 text-xs font-medium text-app-muted">{outfit.name}</p>
+          </div>
           <span aria-hidden="true" className="text-app-faint">
             {playable ? '↗' : '—'}
           </span>
         </div>
-        <p className="mt-4 border-t border-app-line pt-3 text-xs text-app-muted">
-          {playable ? `${outfit.actions.length} 个动作 · ${frameCount} 帧` : '尚无可播放帧'}
-        </p>
+        <div className="mt-4 border-t border-app-line pt-3 text-xs">
+          {playable ? (
+            <>
+              <p className="truncate text-app-ink-soft">{actionSummary}</p>
+              <p className="mt-1.5 text-app-faint">
+                {playableActions.length} 个动作 · {frameCount} 帧
+              </p>
+            </>
+          ) : (
+            <p className="text-app-faint">尚无可播放帧</p>
+          )}
+        </div>
       </div>
     </article>
   )
@@ -226,7 +262,7 @@ function OutfitCard({ character, outfit }: { character: Character; outfit: Outfi
     <Link
       to={`/playtest/${character.id}/${outfit.id}`}
       aria-label={`预览 ${name} · ${outfit.name}`}
-      className="block rounded-[1.4rem] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
+      className="block rounded-[1.5rem] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
     >
       {content}
     </Link>
@@ -235,23 +271,19 @@ function OutfitCard({ character, outfit }: { character: Character; outfit: Outfi
 
 function EmptyState() {
   return (
-    <div className="mt-7 rounded-[1.5rem] border border-dashed border-app-line bg-app-surface-raised p-7 sm:p-9">
-      <h2 className="font-serif text-2xl font-medium tracking-[-0.03em] text-app-ink">
-        还没有可预览的角色
-      </h2>
-      <p className="mt-2 max-w-xl text-sm leading-6 text-app-muted">
-        完成角色与动作制作后，可以在这里检查移动和动画效果。
-      </p>
-      <div className="mt-6 flex flex-wrap gap-3">
-        <Link
-          to="/quick-start"
-          className="inline-flex min-h-10 items-center rounded-full bg-app-accent px-5 text-sm font-semibold text-app-on-accent hover:bg-app-accent-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
-        >
-          开始创作
-        </Link>
+    <div className="mt-5">
+      <EditorialEntryCard
+        to="/quick-start"
+        ariaLabel="开始创作"
+        artwork="playtest"
+        title="还没有可预览的角色"
+        description="完成角色与动作制作后，可以在这里检查移动和动画效果。"
+        action="开始创作"
+      />
+      <div className="mt-3 flex justify-end">
         <Link
           to="/projects"
-          className="inline-flex min-h-10 items-center rounded-full border border-app-line px-5 text-sm font-semibold text-app-ink-soft hover:border-app-line-strong hover:bg-app-surface-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent"
+          className="text-xs font-medium text-app-muted underline decoration-app-line underline-offset-4 hover:text-app-accent"
         >
           查看项目资产
         </Link>
diff --git a/frontend/src/pages/projects/index.test.tsx b/frontend/src/pages/projects/index.test.tsx
index 1f9036be..fab992cb 100644
--- a/frontend/src/pages/projects/index.test.tsx
+++ b/frontend/src/pages/projects/index.test.tsx
@@ -4,11 +4,13 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { MemoryRouter } from 'react-router'
 
 import { AppRoutes } from '@/app'
+import { characterApis } from '@/entities'
 import { AuthenticatedAuthSession } from '@/test/auth-session'
 import { createProjectAssetsBackend } from '@/test/project-assets-backend'
 
 afterEach(() => {
   cleanup()
+  vi.restoreAllMocks()
   vi.unstubAllEnvs()
   vi.unstubAllGlobals()
 })
@@ -22,8 +24,8 @@ function installBackend() {
 
 describe('ProjectsPage', () => {
   it('renders backend Projects as the first browsing level', async () => {
-    installBackend()
-    const { container } = render(
+    const backend = installBackend()
+    render(
       <AuthenticatedAuthSession>
         <MemoryRouter initialEntries={['/projects']}>
           <AppRoutes />
@@ -32,13 +34,52 @@ describe('ProjectsPage', () => {
     )
 
     expect(await screen.findByRole('heading', { name: '项目中心' })).toBeTruthy()
+    const createLink = await screen.findByRole('link', { name: '新建项目' })
+    expect(createLink.getAttribute('data-ui')).toBe('editorial-entry-card')
+    const artwork = createLink.querySelector('img')
+    expect(artwork).toBeTruthy()
+    if (!artwork) throw new Error('新建项目入口缺少资产装饰图')
+    expect(artwork.getAttribute('src')).toContain('asset-library.png')
+    expect(artwork.getAttribute('aria-hidden')).toBe('true')
+    expect(screen.queryByText('新的资产空间')).toBeNull()
+    expect(screen.queryByText('按最近更新排列')).toBeNull()
+    expect(screen.getAllByRole('link', { name: '新建项目' })).toHaveLength(1)
+    expect(createLink.getAttribute('href')).toBe('/projects/new')
     expect(await screen.findAllByRole('link', { name: /打开项目/ })).toHaveLength(2)
-    expect(screen.getByRole('link', { name: '打开项目 点灯人 · MVP' }).getAttribute('href')).toBe(
-      '/projects/42/assets',
+    const previewProject = screen.getByRole('link', { name: '打开项目 点灯人 · MVP' })
+    expect(previewProject.getAttribute('href')).toBe('/projects/42/assets')
+    expect(screen.getByRole('heading', { name: '最近项目 · 02' })).toBeTruthy()
+    expect(previewProject.querySelector('img')?.getAttribute('src')).toBe(
+      'https://cdn.windup.test/messenger-outfit.png',
     )
-    expect(screen.getByText('低饱和像素绘本')).toBeTruthy()
-    expect(container.querySelectorAll('[data-project-card]')).toHaveLength(2)
+    const emptyProject = screen.getByRole('link', { name: '打开项目 空白海岸' })
+    expect(emptyProject.querySelector('img')).toBeNull()
+    expect(emptyProject.textContent).toContain('等待第一份角色资产')
+    expect(previewProject.textContent).toContain('08/04')
+    expect(screen.queryByText('项目名称')).toBeNull()
+    expect(screen.queryByText('视角 / 朝向')).toBeNull()
     expect(screen.queryByRole('link', { name: /查看角色/ })).toBeNull()
+    expect(
+      backend.requests.every((request) =>
+        ['/projects', '/characters'].includes(new URL(request.url).pathname),
+      ),
+    ).toBe(true)
+    expect(
+      backend.requests.filter((request) => new URL(request.url).pathname === '/projects'),
+    ).toHaveLength(1)
+    const previewRequests = backend.requests.filter(
+      (request) => new URL(request.url).pathname === '/characters',
+    )
+    expect(previewRequests).toHaveLength(2)
+    expect(
+      previewRequests.map((request) => new URL(request.url).searchParams.get('project_id')),
+    ).toEqual(['42', '99'])
+    expect(
+      previewRequests.every((request) => {
+        const query = new URL(request.url).searchParams
+        return query.get('page') === '1' && query.get('page_size') === '1'
+      }),
+    ).toBe(true)
   })
 
   it('sends creation to the project create page and deletes through the Project API', async () => {
@@ -70,6 +111,52 @@ describe('ProjectsPage', () => {
     ).toBe(true)
   })
 
+  it('falls back through character preview sources without blocking the gallery', async () => {
+    const backend = createProjectAssetsBackend({ projectCount: 3 })
+    vi.stubEnv('VITE_API_BASE_URL', 'https://api.windup.test')
+    vi.stubGlobal('fetch', backend.fetch)
+    const character = await characterApis.get('51')
+    vi.spyOn(characterApis, 'listByProject').mockImplementation(async (projectId) => {
+      if (Number(projectId) === 1002) throw new Error('preview unavailable')
+      return {
+        items: [
+          {
+            ...character,
+            referenceImageUrl: Number(projectId) === 42 ? character.referenceImageUrl : null,
+            outfits: character.outfits.map((outfit) => ({ ...outfit, previewUrl: null })),
+          },
+        ],
+        total: 1,
+        page: 1,
+        pageSize: 1,
+      }
+    })
+    render(
+      <AuthenticatedAuthSession>
+        <MemoryRouter initialEntries={['/projects']}>
+          <AppRoutes />
+        </MemoryRouter>
+      </AuthenticatedAuthSession>,
+    )
+
+    expect(await screen.findAllByRole('link', { name: /打开项目/ })).toHaveLength(3)
+    await waitFor(() => {
+      expect(
+        screen
+          .getByRole('link', { name: '打开项目 点灯人 · MVP' })
+          .querySelector('img')
+          ?.getAttribute('src'),
+      ).toBe('https://cdn.windup.test/messenger-reference.png')
+      expect(
+        screen
+          .getByRole('link', { name: '打开项目 空白海岸' })
+          .querySelector('img')
+          ?.getAttribute('src'),
+      ).toBe('https://cdn.windup.test/idle-01.png')
+      expect(screen.getByText('等待第一份角色资产')).toBeTruthy()
+    })
+  })
+
   it('navigates every backend Project page instead of truncating after the first page', async () => {
     const backend = createProjectAssetsBackend({ projectCount: 13 })
     vi.stubEnv('VITE_API_BASE_URL', 'https://api.windup.test')
diff --git a/frontend/src/pages/projects/index.tsx b/frontend/src/pages/projects/index.tsx
index d549893a..d5e5caba 100644
--- a/frontend/src/pages/projects/index.tsx
+++ b/frontend/src/pages/projects/index.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState, type CSSProperties } from 'react'
 import { Link } from 'react-router'
 
-import { CHARACTER_PERSPECTIVE, DIRECTIONAL_MOVEMENT, projectApis, type Project } from '@/entities'
+import { characterApis, projectApis, type Character, type Project } from '@/entities'
 import type { Paged } from '@/shared/pagination'
-import { PageContainer, Pagination } from '@/shared/ui'
+import { EditorialEntryCard, Pagination } from '@/shared/ui'
 
 const PROJECT_PAGE_SIZE = 12
 
@@ -11,6 +11,7 @@ const PROJECT_PAGE_SIZE = 12
 export function ProjectsPage() {
   const [pageNumber, setPageNumber] = useState(1)
   const [projectsPage, setProjectsPage] = useState<Paged<Project> | null>(null)
+  const [projectPreviews, setProjectPreviews] = useState<Record<string, string | null>>({})
   const [deleteTarget, setDeleteTarget] = useState<Project | null>(null)
   const [deleting, setDeleting] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -32,6 +33,35 @@ export function ProjectsPage() {
     }
   }, [pageNumber])
 
+  useEffect(() => {
+    let active = true
+    if (!projectsPage)
+      return () => {
+        active = false
+      }
+
+    setProjectPreviews(
+      Object.fromEntries(projectsPage.items.map((project) => [project.id, project.sampleImageUrl])),
+    )
+    const projectsWithoutPreview = projectsPage.items.filter((project) => !project.sampleImageUrl)
+    void Promise.all(
+      projectsWithoutPreview.map(async (project) => {
+        try {
+          const page = await characterApis.listByProject(project.id, { page: 1, pageSize: 1 })
+          return [project.id, previewFromCharacter(page.items[0])] as const
+        } catch {
+          return [project.id, null] as const
+        }
+      }),
+    ).then((entries) => {
+      if (active) setProjectPreviews((current) => ({ ...current, ...Object.fromEntries(entries) }))
+    })
+
+    return () => {
+      active = false
+    }
+  }, [projectsPage])
+
   async function deleteProject(project: Project) {
     setDeleting(true)
     setError(null)
@@ -59,30 +89,18 @@ export function ProjectsPage() {
   }
 
   return (
-    <PageContainer>
+    <div className="mx-auto w-full max-w-[1560px] px-4 pb-8 pt-[clamp(4.75rem,11vh,7rem)] sm:px-6 xl:px-8">
       <section aria-labelledby="projects-title">
-        <header
-          data-projects-intro
-          className="projects-intro flex flex-col gap-4 border-b border-app-line pb-6 sm:flex-row sm:items-end sm:justify-between"
-        >
-          <div>
-            <h1
-              id="projects-title"
-              className="font-serif text-4xl font-medium tracking-[-0.045em] text-app-ink"
-            >
-              项目中心
-            </h1>
-            <p className="mt-2 max-w-2xl text-sm leading-6 text-app-muted">
-              项目隔离角色资产与生成规格；先选项目，再管理其资产。
-            </p>
-          </div>
-          <Link
-            to="/projects/new"
-            aria-label="新建项目"
-            className="rounded-full border border-app-line px-5 py-2.5 text-sm font-semibold text-app-ink-soft transition hover:border-app-line-strong hover:bg-app-surface-raised"
+        <header data-projects-intro className="projects-intro border-b border-app-line pb-6">
+          <h1
+            id="projects-title"
+            className="font-serif text-[clamp(2.15rem,4.5vw,4rem)] leading-none font-medium tracking-[-0.055em] text-app-ink"
           >
-            ＋ 新建项目
-          </Link>
+            项目中心
+          </h1>
+          <p className="mt-2 max-w-2xl text-sm leading-6 text-app-muted">
+            项目隔离角色资产与生成规格；先选项目，再管理其资产。
+          </p>
         </header>
 
         {error ? (
@@ -94,23 +112,17 @@ export function ProjectsPage() {
           </p>
         ) : projectsPage === null ? (
           <p className="mt-6 text-sm text-app-muted">正在读取项目…</p>
-        ) : projectsPage.total === 0 ? (
-          <div className="mt-6 rounded-2xl border border-dashed border-app-line p-7">
-            <h2 className="font-semibold text-app-ink">还没有项目</h2>
-            <p className="mt-2 text-sm text-app-muted">
-              从右上角新建一个项目，之后它会显示在这里。
-            </p>
-          </div>
         ) : (
-          <div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-            {projectsPage.items.map((project, index) => (
-              <ProjectCard
-                key={project.id}
-                project={project}
-                motionOrder={index}
-                onDelete={() => setDeleteTarget(project)}
+          <div className="mt-5">
+            <ProjectCreateCard />
+            {projectsPage.items.length > 0 ? (
+              <ProjectGallery
+                projects={projectsPage.items}
+                total={projectsPage.total}
+                previews={projectPreviews}
+                onDelete={setDeleteTarget}
               />
-            ))}
+            ) : null}
           </div>
         )}
         {projectsPage ? (
@@ -131,16 +143,82 @@ export function ProjectsPage() {
           onConfirm={() => deleteProject(deleteTarget)}
         />
       ) : null}
-    </PageContainer>
+    </div>
   )
 }
 
-function ProjectCard({
+function previewFromCharacter(character: Character | undefined): string | null {
+  if (!character) return null
+  for (const outfit of character.outfits) {
+    if (outfit.previewUrl) return outfit.previewUrl
+  }
+  if (character.referenceImageUrl) return character.referenceImageUrl
+  for (const outfit of character.outfits) {
+    for (const action of outfit.actions) {
+      const frame = action.frames.find((item) => item.imageUrl)
+      if (frame) return frame.imageUrl
+    }
+  }
+  return null
+}
+
+function ProjectCreateCard() {
+  return (
+    <EditorialEntryCard
+      to="/projects/new"
+      ariaLabel="新建项目"
+      artwork="asset-library"
+      title="新建一个项目"
+      description="建立角色资产与生成规格的独立生产空间。"
+      action="开始建立"
+    />
+  )
+}
+
+function ProjectGallery({
+  projects,
+  total,
+  previews,
+  onDelete,
+}: {
+  projects: Project[]
+  total: number
+  previews: Record<string, string | null>
+  onDelete: (project: Project) => void
+}) {
+  return (
+    <section aria-labelledby="project-gallery-title" className="mt-9">
+      <div className="mb-4">
+        <h2
+          id="project-gallery-title"
+          className="text-sm font-medium tracking-[0.04em] text-app-ink"
+        >
+          最近项目 · {String(total).padStart(2, '0')}
+        </h2>
+      </div>
+      <div className="grid gap-x-4 gap-y-7 md:grid-cols-2 xl:grid-cols-3">
+        {projects.map((project, index) => (
+          <ProjectGalleryTile
+            key={project.id}
+            project={project}
+            previewUrl={previews[project.id] ?? project.sampleImageUrl}
+            motionOrder={index}
+            onDelete={() => onDelete(project)}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function ProjectGalleryTile({
   project,
+  previewUrl,
   motionOrder,
   onDelete,
 }: {
   project: Project
+  previewUrl: string | null
   motionOrder: number
   onDelete: () => void
 }) {
@@ -151,48 +229,49 @@ function ProjectCard({
 
   return (
     <article
-      data-project-card
       style={{ '--project-card-order': motionOrder } as CSSProperties}
-      className="projects-card-enter relative min-h-64 rounded-[1.5rem] border border-app-line bg-app-surface transition duration-300 ease-out hover:-translate-y-0.5 hover:border-app-line-strong hover:bg-app-surface-raised"
+      className="projects-card-enter group/tile relative min-w-0"
     >
       <Link
         to={`/projects/${project.id}/assets`}
         aria-label={`打开项目 ${project.name}`}
-        className="flex h-full min-h-64 flex-col p-6 pr-14 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-ink"
+        className="block focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-ink"
       >
-        <div className="mt-auto pt-10">
-          <h2 className="font-serif text-2xl font-medium tracking-[-0.035em] text-app-ink">
-            {project.name}
-          </h2>
-          <p className="mt-2 text-xs text-app-faint">更新于 {updatedAt}</p>
-          <dl className="mt-4 grid grid-cols-2 gap-x-5 gap-y-3 border-t border-app-line pt-4 text-xs">
-            <div>
-              <dt className="text-app-faint">视角 / 朝向</dt>
-              <dd className="mt-1 font-medium text-app-ink-soft">
-                {CHARACTER_PERSPECTIVE[project.perspective]} ·{' '}
-                {DIRECTIONAL_MOVEMENT[project.directionalMovement]}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-app-faint">精灵尺寸</dt>
-              <dd className="mt-1 font-medium text-app-ink-soft">
-                {project.spriteSize.width} × {project.spriteSize.height}
-              </dd>
-            </div>
-            <div className="col-span-2">
-              <dt className="text-app-faint">画风约束</dt>
-              <dd className="mt-1 truncate font-medium text-app-ink-soft">
-                {project.gameStyle ?? '尚未设定'}
-              </dd>
+        <div className="relative aspect-[16/10] overflow-hidden rounded-[1.25rem] border border-app-line bg-app-surface-muted transition duration-300 group-hover/tile:-translate-y-0.5 group-hover/tile:border-app-line-strong">
+          {previewUrl ? (
+            <img
+              src={previewUrl}
+              alt={`${project.name}的项目预览`}
+              className="h-full w-full object-contain p-6 [image-rendering:pixelated] transition-transform duration-500 group-hover/tile:scale-[1.025]"
+            />
+          ) : (
+            <div className="relative h-full overflow-hidden bg-app-surface-muted">
+              <div
+                aria-hidden="true"
+                className="absolute inset-0 opacity-55"
+                style={{
+                  backgroundImage:
+                    'linear-gradient(to right, var(--color-app-line) 1px, transparent 1px), linear-gradient(to bottom, var(--color-app-line) 1px, transparent 1px)',
+                  backgroundPosition: 'center center',
+                  backgroundSize: '24px 24px',
+                }}
+              />
+              <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-app-surface/85 px-2 py-1 font-mono text-[10px] tracking-[0.06em] text-app-faint backdrop-blur-sm">
+                等待第一份角色资产
+              </span>
             </div>
-          </dl>
+          )}
+        </div>
+        <div className="mt-3 flex min-w-0 items-baseline justify-between gap-4 px-0.5">
+          <h3 className="min-w-0 truncate text-sm font-semibold text-app-ink">{project.name}</h3>
+          <span className="shrink-0 text-xs tabular-nums text-app-faint">{updatedAt}</span>
         </div>
       </Link>
       <button
         type="button"
         aria-label={`删除项目 ${project.name}`}
         onClick={onDelete}
-        className="absolute right-4 top-4 rounded-full px-2 py-1 text-sm text-app-faint hover:bg-app-surface hover:text-app-danger"
+        className="absolute right-3 top-3 rounded-full border border-app-line bg-app-surface/90 px-2.5 py-1.5 text-sm leading-none text-app-faint opacity-0 backdrop-blur-sm transition hover:text-app-danger group-hover/tile:opacity-100 focus-visible:opacity-100"
       >
         ⋯
       </button>
diff --git a/frontend/src/pages/workspace/index.test.tsx b/frontend/src/pages/workspace/index.test.tsx
index b62cffef..d98541f6 100644
--- a/frontend/src/pages/workspace/index.test.tsx
+++ b/frontend/src/pages/workspace/index.test.tsx
@@ -233,6 +233,7 @@ describe('WorkspacePage', () => {
     renderWorkspace()
 
     expect(screen.getByRole('heading', { name: '工作台' })).toBeTruthy()
+    expect(screen.getByText('从这里开始，去任何地方')).toBeTruthy()
     expect(screen.getByRole('link', { name: '进入快速开始' }).getAttribute('href')).toBe(
       '/quick-start',
     )
diff --git a/frontend/src/pages/workspace/index.tsx b/frontend/src/pages/workspace/index.tsx
index 659728d2..25781cc0 100644
--- a/frontend/src/pages/workspace/index.tsx
+++ b/frontend/src/pages/workspace/index.tsx
@@ -352,6 +352,7 @@ export function WorkspacePage() {
           <h1 className="font-serif text-[clamp(2.15rem,4.5vw,4rem)] leading-none font-medium tracking-[-0.055em] text-app-ink">
             工作台
           </h1>
+          <p className="mt-2 text-sm leading-6 text-app-muted">从这里开始，去任何地方</p>
         </header>
 
         <div className="workspace-layout grid min-h-0 flex-1 grid-cols-1 gap-[clamp(1rem,3vw,3rem)] md:grid-cols-[minmax(0,1.12fr)_minmax(16rem,0.88fr)]">
@@ -826,7 +827,7 @@ function OutfitSelection({
                   </strong>
                   <span className="mt-1 block text-[0.68rem] text-app-muted">
                     {playback.playable
-                      ? `${outfit.actions.length} 个动作 · ${playback.frameCount} 帧`
+                      ? `${outfit.actions.filter((action) => action.frames.length > 0).length} 个动作 · ${playback.frameCount} 帧`
                       : '尚无可播放帧'}
                   </span>
                 </span>
diff --git a/frontend/src/shared/ui/editorial-entry-card.tsx b/frontend/src/shared/ui/editorial-entry-card.tsx
new file mode 100644
index 00000000..e9a93776
--- /dev/null
+++ b/frontend/src/shared/ui/editorial-entry-card.tsx
@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react'
+import { Link } from 'react-router'
+
+import assetLibraryArtwork from '@/assets/workspace/asset-library.png'
+import playtestArtwork from '@/assets/workspace/playtest.png'
+
+export type EditorialEntryArtwork = 'asset-library' | 'playtest'
+
+export interface EditorialEntryCardProps {
+  action: ReactNode
+  ariaLabel: string
+  artwork: EditorialEntryArtwork
+  description: ReactNode
+  title: ReactNode
+  to: string
+}
+
+/** 产品内容页共用的横向入口卡；右侧像素物件只负责提示入口语义。 */
+export function EditorialEntryCard({
+  action,
+  ariaLabel,
+  artwork,
+  description,
+  title,
+  to,
+}: EditorialEntryCardProps) {
+  const artworkUrl = artwork === 'asset-library' ? assetLibraryArtwork : playtestArtwork
+
+  return (
+    <Link
+      to={to}
+      aria-label={ariaLabel}
+      data-ui="editorial-entry-card"
+      className="group relative block min-h-[13.5rem] overflow-hidden rounded-[1.5rem] border border-app-line bg-transparent p-6 transition duration-300 ease-out hover:-translate-y-0.5 hover:border-app-line-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-ink"
+    >
+      <div className="relative z-10 flex h-full max-w-[18rem] flex-col">
+        <h2 className="font-serif text-[clamp(1.7rem,3vw,2.5rem)] leading-none font-medium tracking-[-0.045em] text-app-ink">
+          {title}
+        </h2>
+        <p className="mt-3 text-sm leading-6 text-app-muted">{description}</p>
+        <span className="mt-auto inline-flex items-center gap-2 text-sm font-semibold text-app-ink-soft transition-colors group-hover:text-app-accent">
+          {action} <span aria-hidden="true">→</span>
+        </span>
+      </div>
+      <div className="pointer-events-none absolute -right-3 top-1/2 hidden h-[13.5rem] w-[17rem] -translate-y-1/2 overflow-hidden sm:block">
+        <img
+          data-testid={`${artwork}-entry-artwork`}
+          src={artworkUrl}
+          alt=""
+          aria-hidden="true"
+          draggable="false"
+          className="absolute h-[17.875rem] w-[17.875rem] max-w-none translate-x-8 rotate-[5deg] object-contain opacity-65 saturate-[0.48] transition duration-500 ease-out group-hover:translate-x-7 group-hover:rotate-[4deg] group-hover:scale-[1.015] group-hover:opacity-75"
+          style={{ imageRendering: 'pixelated', left: '-0.75rem', top: '-2.2rem' }}
+        />
+      </div>
+    </Link>
+  )
+}
diff --git a/frontend/src/shared/ui/index.ts b/frontend/src/shared/ui/index.ts
index 8aeaf703..b1b7dfbb 100644
--- a/frontend/src/shared/ui/index.ts
+++ b/frontend/src/shared/ui/index.ts
@@ -1,3 +1,5 @@
+export { EditorialEntryCard } from './editorial-entry-card'
+export type { EditorialEntryArtwork, EditorialEntryCardProps } from './editorial-entry-card'
 export { PageContainer } from './page-container'
 export type { PageContainerProps } from './page-container'
 export { Pagination } from './pagination'
diff --git a/frontend/src/test/project-assets-backend.ts b/frontend/src/test/project-assets-backend.ts
index b16ccc9e..fcb903bb 100644
--- a/frontend/src/test/project-assets-backend.ts
+++ b/frontend/src/test/project-assets-backend.ts
@@ -104,6 +104,15 @@ const characterDtos = [
                 },
               ],
             },
+            {
+              id: 'attack-draft',
+              type: 'attack',
+              name: '未完成攻击',
+              loop: false,
+              fps: 10,
+              frame_count: 0,
+              frames: [],
+            },
           ],
         },
       ],