diff --git a/frontend/src/pages/projects/index.test.tsx b/frontend/src/pages/projects/index.test.tsx
index 1f9036be..d4462259 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,51 @@ describe('ProjectsPage', () => {
     )
 
     expect(await screen.findByRole('heading', { name: '项目中心' })).toBeTruthy()
+    const createLink = await screen.findByRole('link', { name: '新建项目' })
+    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 +110,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..84660947 100644
--- a/frontend/src/pages/projects/index.tsx
+++ b/frontend/src/pages/projects/index.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState, type CSSProperties } from 'react'
 import { Link } from 'react-router'
 
-import { CHARACTER_PERSPECTIVE, DIRECTIONAL_MOVEMENT, projectApis, type Project } from '@/entities'
+import assetLibraryArtwork from '@/assets/workspace/asset-library.png'
+import { characterApis, projectApis, type Character, type Project } from '@/entities'
 import type { Paged } from '@/shared/pagination'
-import { PageContainer, Pagination } from '@/shared/ui'
+import { Pagination } from '@/shared/ui'
 
 const PROJECT_PAGE_SIZE = 12
 
@@ -11,6 +12,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 +34,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 +90,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 +113,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 +144,106 @@ export function ProjectsPage() {
           onConfirm={() => deleteProject(deleteTarget)}
         />
       ) : null}
-    </PageContainer>
+    </div>
+  )
+}
+
+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 (
+    <Link
+      to="/projects/new"
+      aria-label="新建项目"
+      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">
+          新建一个项目
+        </h2>
+        <p className="mt-3 text-sm leading-6 text-app-muted">
+          建立角色资产与生成规格的独立生产空间。
+        </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">
+          开始建立 <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="projects-asset-artwork"
+          src={assetLibraryArtwork}
+          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>
+  )
+}
+
+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 ProjectCard({
+function ProjectGalleryTile({
   project,
+  previewUrl,
   motionOrder,
   onDelete,
 }: {
   project: Project
+  previewUrl: string | null
   motionOrder: number
   onDelete: () => void
 }) {
@@ -151,48 +254,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..607b389c 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)]">