diff --git a/docs/asset-library-ui-spec.md b/docs/asset-library-ui-spec.md
new file mode 100644
index 0000000..ef19eb8
--- /dev/null
+++ b/docs/asset-library-ui-spec.md
@@ -0,0 +1,228 @@
+# 资产库 UI 层级验证 · 实现说明
+
+面向实现者的一次性说明。目标是把资产库的信息层级做成能在浏览器里点开的界面，用来验证层级本身是否成立。
+
+**分层、模块边界、依赖方向、接口调用方式一律按真实架构写，只有数据是 mock。** 这轮做出来的东西要能在接口实现落地后直接换掉数据源继续用，不是丢弃式原型。
+
+读之前先读 `frontend-architecture-v3.md`，分层与依赖规则以它为准。
+
+---
+
+## 一、这轮验证什么
+
+一句话：**用户打开一个项目，看到的这棵树对不对。**
+
+具体要能回答四个问题：
+
+1. 项目下的角色以什么粒度成卡，一屏能不能看明白这个项目有什么。
+2. 造型该不该单独占一层。本期每个角色只有一套造型，那这一层是多余的，还是不摆出来用户就理解不了「同一个人换装还是同一个人」。
+3. 动作列表以动作实例为行，帧作为行内的一排缩略图——这个粒度够不够看，还是帧需要自己的地方。
+4. 三个入口（加角色、加动作、项目级导出）分别摆在哪一层才自然。
+
+这四个问题都靠看和点得出结论，不需要真实接口返回真实数据。
+
+## 二、这轮不做什么
+
+- 不接后端，不写 `entities/*/api.ts`（原因见第七节第 3 条）。
+- 不做生成、不做导出、不写后端。动作模板保存只进入本地验证状态。
+- 不做响应式细调、不做动效打磨。桌面宽度下层级清楚即可。
+- 不做权限、登录、分页交互（分页形状仍按接口声明保留，见第六节）。
+
+---
+
+## 三、事实基线
+
+不要凭印象假设，以下都是仓库当前状态。
+
+**路由**（`frontend/src/app/app.tsx`，全部在 `AppShellRoute` 内）：
+
+```
+/projects                        ProjectsPage        占位
+/projects/:projectId             ProjectDetailPage   占位
+/projects/:projectId/assets      AssetLibraryPage    占位
+/playtest/:characterId/:outfitId PlaytestPage
+```
+
+本轮要改成嵌套结构，见 5.1。
+
+**领域类型**（`frontend/src/entities/`，只有类型与接口，无实现）：
+
+- `Project` — `id / ownerId / name / perspective / directionalMovement / spriteSize / gameStyle / sampleImageUrl / createdAt / updatedAt`。`CHARACTER_PERSPECTIVE`、`DIRECTIONAL_MOVEMENT`、`SPRITE_SIZES` 是现成的页面文案常量，直接用，不要另写一份中文映射。
+- `Character` — `id / projectId / outfits[] / createdAt / updatedAt`，**本轮新增 `name`，见第七节第 1 条**。
+- `Outfit` — `id / characterId / name / candidateCharacterTemplates[] / characterTemplateUrl / baseFrames / actions[]`。ID 只在所属 Character 内唯一。
+- `Action` — `id / outfitId / name / kind / type / fps / keyFrameIndex / frames[]`。ID 只在所属 Outfit 内唯一。
+- `Frame` — `imageUrl / durationMs / rootMotion`。
+
+接口：`ProjectApis`（`list / get / create / update / remove`，`list` 返回 `Paged<Project>`）、`CharacterApis`（`get / listByProject / create / update`）。
+
+一律从 `@/entities` 导入，不要深入子路径。分页形状在 `@/shared/pagination`。
+
+**后端现状**（`backend/packages/app/src/windup_app/server/character/model.py`）：整棵资产树存在 `character_data` 这一个 JSONB 字段里，`outfits[] → actions[] → frames[]`，造型和动作都没有独立表。前后端差异清单见 `frontend/API_CONTRACT.md`。
+
+**分层**：`pages -> features -> entities -> shared`。这轮的东西基本都落在 `pages/` 下；只有确实要被第二个页面复用的展示组件才下沉到 `shared/ui`，下沉前先问一句是不是真有第二个用处。
+
+---
+
+## 四、信息层级
+
+这轮要摆出来的就是这棵树，不多也不少：
+
+```
+项目 Project                    ← 常驻外框，任何一层都看得见自己在哪个项目里
+└── 角色 Character              ← 资产库主页的卡片粒度
+    └── 造型 Outfit             ← 角色详情页的一层，本期只有一套
+        ├── 母版 characterTemplateUrl
+        └── 动作 Action         ← 动作列表的一行
+            └── 帧 Frame        ← 行内的一排缩略图
+```
+
+**资产库是项目的下属，不独立存在。** 这是本轮的硬约束，落在路由与布局上，见 5.1。
+
+**08-04 当前定义：保留造型层，但不向用户暴露穿戴。** 本期造型直接代表人物的视觉资产，不建立 Wearable 分类、卡片、提取或复用入口。
+
+**动作模板是当前唯一可复用资产。** 角色动作可以保存为 ActionTemplate；模板未来由 WorkflowEditor 的「增加节点」读取并成为可选节点卡片。当前 WorkflowEditor 尚未实现这段能力，只保留 `ActionTemplateApis.listAvailable(projectId)` 接口边界，角色详情不直接应用模板。
+
+---
+
+## 五、页面
+
+### 5.1 项目详情：资产库的外框 `/projects/:projectId`
+
+**资产库不能脱离项目打开。** 把 `ProjectDetailPage` 改成项目的常驻外框（布局路由），资产库与角色详情都作为它的子路由渲染在 `<Outlet />` 里：
+
+```
+/projects/:projectId                        ProjectDetailPage   项目外框
+  index                                     → 重定向到 assets
+  /projects/:projectId/assets               AssetLibraryPage    资产库主页
+  /projects/:projectId/assets/:characterId  CharacterDetailPage 角色详情
+```
+
+外框固定渲染：项目名，以及视角、朝向数、精灵尺寸、画风这四项约束。这四项决定了下面所有角色长什么样，用户在任何一层都必须看得见。只读，本轮不做编辑入口。文案走 `CHARACTER_PERSPECTIVE` / `DIRECTIONAL_MOVEMENT`。
+
+外框内再给一条面包屑或返回路径，让用户从角色详情能回到资产库。
+
+**直接在地址栏敲子路由也必须带着项目外框出现**——这是这条约束成立与否的判据，验收要按这个走。
+
+### 5.2 资产库主页 `/projects/:projectId/assets`
+
+替换 `frontend/src/pages/asset-library/index.tsx` 现有的占位内容。它只渲染资产库主体，项目那一层由外框负责，不要在这里重复画一遍项目名。
+
+**角色卡片网格。** 每张卡：
+
+- 封面 —— 第一套造型的 `characterTemplateUrl`；为 `null` 时给明确的未定稿占位，不要用灰块糊过去。
+- 标题 —— `Character.name`。
+- 副信息 —— 造型数、动作总数。
+- 整卡是链接，指向角色详情。
+
+**空态。** 新项目进来就是空的，这是这个页面的主要形态之一，要认真做：一句说明加一个「新建角色」。
+
+**两个动作按钮**（都是占位，点击不产生任何副作用，但必须在页面上）：
+
+- 新建角色 —— 项目下已有角色后再加角色，从资产库加。
+- 导出全部角色资产 —— 项目级一键导出，摆在项目这一层而不是角色卡上。
+
+### 5.3 角色详情 `/projects/:projectId/assets/:characterId`
+
+新增页面 `frontend/src/pages/character-detail/`。
+
+**造型层。** 即使本期每个角色只有一套造型，也把这一层摆出来——`Outfit` 的类型注释明确要求 MVP 页面保留这层。做成可切换的造型条，当前只有一项时也照样显示。选中造型后右侧显示它的母版图。
+
+**动作列表。** 一行一个动作实例，行内包含：
+
+- 动作名与业务类型（`type`，中文文案在页面里定，别改 `entities`）。
+- `fps` 与帧数。
+- 一排帧缩略图，按 `frames` 数组顺序，下标即帧序号。
+- 行尾一个「重新生成」占位按钮。
+
+**列表末尾一个加号：「加动作」。** 它只说明新动作由生成工作流产出；动作模板的复用入口属于未来 WorkflowEditor 的「增加节点」，不在角色详情重复实现。
+
+动作展开后提供「保存为动作模板」。保存后模板进入项目的动作模板分类；当前只做本地验证状态，不写后端。
+
+**帧不单独开页面。** 缩略图铺在行内，够看即可。要看动画播放就跳已有的 `/playtest/:characterId/:outfitId`，在动作行上给一个「预览」链接过去，不要在资产库里再造一个播放器。
+
+---
+
+## 六、数据：真接口，假实现
+
+**架构按真实的写，只有数据源是 mock。** 具体要求：
+
+页面不得直接 import 一个写死的数组。页面调用的是 `ProjectApis` / `CharacterApis` 这两个接口，拿到的是 Promise，因此页面必须处理加载中与空结果两种状态——这些状态在接口实现落地后同样存在，现在跳过去，到时候要重写。
+
+Mock 实现放在 `frontend/src/pages/asset-library/mock/` 下，**必须标注为接口类型**：
+
+```ts
+export const mockCharacterApis: CharacterApis = { ... }
+export const mockProjectApis: ProjectApis = { ... }
+```
+
+靠 `tsc` 保证它和真实现是同一个形状。`ProjectApis.list` 照常返回 `Paged<Project>`（`items / total / page / pageSize`），即使这轮页面不做分页交互。写操作（`create` / `update` / `remove`）返回 rejected Promise 或抛出未实现错误即可，本轮不会被调用。
+
+**不要在 `entities/` 下建 `api.ts`。** 原因见第七节第 3 条。
+
+假数据本身放 `mock/fixtures.ts`，标注为 `Project[]` / `Character[]` 等真实类型，**不允许出现类型上没有的字段**。
+
+要覆盖到的形态，缺一个这轮就验不全：
+
+1. 空项目 —— 一个角色都没有。
+2. 只有母版、没有任何动作的角色 —— 刚建完的状态。
+3. `characterTemplateUrl` 为 `null` 的造型 —— 母版还没选定。
+4. 有多个动作、每个动作帧数不同的角色 —— 至少一个动作帧数上到 8 帧以上，用来看缩略图排布会不会塌。
+5. 某个动作的 `keyFrameIndex` 非 null、某些帧 `durationMs` 为 null —— 这两种取值页面要能安全渲染，不能崩。
+
+图片用可离线打开的占位（纯色 data URI 或 `public/` 下的本地文件均可），不要引外链。
+
+---
+
+## 七、三条真实问题
+
+**1. `Character` 增加 `name` 字段。** 已定，按有 name 实现。
+
+在 `frontend/src/entities/character/index.ts` 的 `Character` 上加：
+
+```ts
+/**
+ * 角色的显示名，跨造型稳定。
+ * 07-30 评审曾按后端当时无此字段删除过一次，08-04 因资产库卡片无标题可用重新加回；
+ * 后端 windup_character 表目前只有 description，映射方式待对齐，见 API_CONTRACT.md。
+ */
+name: string
+```
+
+同时把 `CreateCharacterInput` 加上 `name`，并把 `frontend/API_CONTRACT.md`「已分工」里那条 `[x] 前端删除 Character.name` 改写成当前结论、在「待确认」里补一条后端落点——那份文档是三方对齐的记录，留着旧结论会误导后端。
+
+注意 `entities/character/index.ts` 在未合并的 PR #96、#90 里也被改过，这一处大概率会冲突，提 PR 时说明一句。
+
+**2.「加动作」无法定位。** 按 08-03 会议纪要第八节，加号应当带着该角色已有的 workflow run 打开画布并自动定位到身份模板节点。但 workflow run 与 character 的关联还在服务端待办里，现在拿不到。这轮加号只做占位按钮，不要接任何跳转，也不要造一个假的 run id。
+
+**3. `entities/character/api.ts` 归属未定。** main 上 `entities/character` 与 `entities/project` 只有 `index.ts`（类型与接口），实现在未合并的 PR #96 里。这轮的 mock 实现 `CharacterApis` 接口、放在 pages 层，不碰 `entities/`——避免和 #96 写出第二份实现。等 #96 合并后，换掉页面里注入的实现即可，其余代码不动。
+
+---
+
+## 八、验收
+
+**跑起来看。** 这是 UI 验证，不是写完就算。`npm run dev` 起本地服务，在浏览器里逐页走一遍，至少截四张图：资产库空态、资产库有角色、角色详情（有动作）、角色详情（无动作）。截图附进 PR。
+
+**项目外框始终在。** 直接在地址栏访问 `/projects/:projectId/assets/:characterId`，项目名与四项约束必须照常出现；从角色详情能返回资产库。
+
+**层级读得懂。** 找一个没参与讨论的人看截图，能说出「项目下有角色、角色下有造型、造型下有动作、动作由帧组成」，这轮就成立。
+
+**工程检查全过**（CI 会跑同样这几项）：
+
+```
+npm run format:check
+npm run lint
+npm run typecheck
+npm run test
+npm run build
+```
+
+**测试。** 两个页面各加一个渲染测试，断言层级关键元素在场（角色卡数量、造型条存在、动作行数、空态文案）；外框再加一个，断言子路由渲染时项目约束仍在。参照 `frontend/src/pages/home/index.test.tsx` 的写法。
+
+---
+
+## 九、交付
+
+- 从 `main` 切分支，与 PR #104（首页与顶栏）无关，不要基于它。
+- 按营方规范先立 issue 再提 PR，issue 标题带 `feat:` 前缀，PR 里写清 Why、改动说明、实现取舍、截图、测试。
+- 提交按 Angular 风格拆原子提交，commit message 用英文，不带任何 AI 署名或尾巴。
+- PR 里必须单独有一节交代第七节三条的处理结果，以及 `Character.name` 加上之后卡片标题是否真的够用——这轮的产出是结论，不只是页面。
diff --git a/frontend-architecture-v3.md b/frontend-architecture-v3.md
index 50f46bc..3d1e5bf 100644
--- a/frontend-architecture-v3.md
+++ b/frontend-architecture-v3.md
@@ -22,7 +22,7 @@
 
 能单独取，说明它需要自己的一套取数逻辑，才值得一个模块；取不到的，它只是别人身上的一个字段。
 
-按这条判据，`Outfit`、`Action`、`Frame` 没有独立模块——它们不能脱离 `Character` 被取到，所以是 `character` 内部的类型。`ActionTemplate` 有独立模块，因为它能被不同角色复用。
+按这条判据，`Outfit`、`Action`、`Frame` 没有独立模块——它们不能脱离 `Character` 被取到，所以是 `character` 内部的类型。当前唯一独立复用资产是 `ActionTemplate`；穿戴不在本期产品定义中暴露。
 
 ---
 
@@ -89,9 +89,7 @@ Controller 围绕同一份 WorkflowRun 提供推进、更新、重启和中断
 ## 5. 尚未包含
 
 - 真实请求与数据获取，`XxxApis` 目前只有接口
-- 首页之外的页面实现，其余七个路由仍是占位外壳
 - 图片上传模块（体量太小，不单独体现）
-- 穿戴道具相关（产品侧未设计）
 - 第三方登录
 
 首页已按本文的分层落地：它不依赖 `entities` 与 `features`，两张入口卡片只做路由跳转。首屏那三段制作路径是 `WORKFLOW_STEP_ORDER` 八步的粗粒度概括，写死在页面文案里，改流程时要一并改。
diff --git a/frontend/API_CONTRACT.md b/frontend/API_CONTRACT.md
index ed90e36..728d13e 100644
--- a/frontend/API_CONTRACT.md
+++ b/frontend/API_CONTRACT.md
@@ -2,14 +2,16 @@
 
 前端各模块的 `XxxApis` 与后端 2026-07-30 接口文档逐条比对结果。
 
-后端现有四个相关模块：`project`、`character`、`generation`、`media`。`asset` 与 `wearable` 已按 07-30 评审要求删除。
+这份清单保留 07-30 的差异记录；08-04 当前产品定义只向用户暴露 ActionTemplate，不展示或预留 Wearable 入口。
 
 ---
 
 ## 一、已经确认的边界
 
 - `WorkflowRun` 是前端固定工作流的运行态。后端不读取、不推进、也不持久化，前端不声明 `WorkflowRunApis`。
-- `Character` 不使用独立 `name` 字段；前端已删除。
+- `Character` 使用独立 `name` 字段，作为跨造型稳定的角色显示名；08-04 已确认由前后端共同保留。
+- `Outfit` 层继续保留，但当前 UI 中造型就是人物的视觉资产，不拆解穿戴组成。
+- `ActionTemplate` 是当前唯一可复用资产；未来由 WorkflowEditor 的「增加节点」读取，角色详情不直接应用模板。
 - 前端保留 `jump` 动作类型，由后端补充对应枚举。
 - 查询生成任务统一携带 `projectId + taskId`。
 - 前端工作流节点不与后端 `GenerationType` 一一对应，按下表调用：
@@ -30,7 +32,6 @@
 
 | 前端接口 | 后端情况 |
 |---|---|
-| `ActionTemplateApis.listAvailable` | 没有 action template 模块 |
 | `ProjectApis.update` | 没有 `PATCH /projects/{project_id}` |
 
 前端已按服务端现状去掉生成任务的 `cancel`——后端没有取消能力，不声明前端用不到的接口。
@@ -105,7 +106,7 @@ frames[]  → index / image_url / duration_ms
 
 ## 待确认
 
-- [ ] `ActionTemplateApis` 由后端提供还是前端内置
+- [x] `ActionTemplateApis` 由后端提供，前端可同时展示系统预设与项目自定义模板
 - [ ] 母版候选几张
 - [ ] 参考图与角色图是一个字段还是两个
 - [ ] `Character.description` 前端要不要跟着存
@@ -115,5 +116,5 @@ frames[]  → index / image_url / duration_ms
 ## 已分工
 
 - [x] 前端删除 `WorkflowRunApis`，WorkflowRun 全程由前端管理
-- [x] 前端删除 `Character.name`
+- [x] 前后端保留 `Character.name`
 - [ ] 后端增加 `jump` 动作类型
diff --git a/frontend/public/livedemo/characters/boy/base-transparent.png b/frontend/public/livedemo/characters/boy/base-transparent.png
new file mode 100644
index 0000000..f9314d0
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/base-transparent.png differ
diff --git a/frontend/public/livedemo/characters/boy/base.png b/frontend/public/livedemo/characters/boy/base.png
new file mode 100644
index 0000000..1e20bd9
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/base.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/idle-01.png b/frontend/public/livedemo/characters/boy/views/side/idle-01.png
new file mode 100644
index 0000000..7755f3c
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/idle-01.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/idle-02.png b/frontend/public/livedemo/characters/boy/views/side/idle-02.png
new file mode 100644
index 0000000..4cc3e9b
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/idle-02.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/idle-03.png b/frontend/public/livedemo/characters/boy/views/side/idle-03.png
new file mode 100644
index 0000000..649ba1b
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/idle-03.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/idle-04.png b/frontend/public/livedemo/characters/boy/views/side/idle-04.png
new file mode 100644
index 0000000..b998e0b
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/idle-04.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/idle-05.png b/frontend/public/livedemo/characters/boy/views/side/idle-05.png
new file mode 100644
index 0000000..cdd4e01
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/idle-05.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/idle-06.png b/frontend/public/livedemo/characters/boy/views/side/idle-06.png
new file mode 100644
index 0000000..0b1ccb7
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/idle-06.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/idle-07.png b/frontend/public/livedemo/characters/boy/views/side/idle-07.png
new file mode 100644
index 0000000..23a0356
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/idle-07.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/idle-08.png b/frontend/public/livedemo/characters/boy/views/side/idle-08.png
new file mode 100644
index 0000000..67936b2
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/idle-08.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/idle-preview.gif b/frontend/public/livedemo/characters/boy/views/side/idle-preview.gif
new file mode 100644
index 0000000..eefd18d
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/idle-preview.gif differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/walk-01.png b/frontend/public/livedemo/characters/boy/views/side/walk-01.png
new file mode 100644
index 0000000..a481f30
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/walk-01.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/walk-02.png b/frontend/public/livedemo/characters/boy/views/side/walk-02.png
new file mode 100644
index 0000000..c493a71
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/walk-02.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/walk-03.png b/frontend/public/livedemo/characters/boy/views/side/walk-03.png
new file mode 100644
index 0000000..11bb3db
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/walk-03.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/walk-04.png b/frontend/public/livedemo/characters/boy/views/side/walk-04.png
new file mode 100644
index 0000000..21345a9
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/walk-04.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/walk-05.png b/frontend/public/livedemo/characters/boy/views/side/walk-05.png
new file mode 100644
index 0000000..7f50a3e
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/walk-05.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/walk-06.png b/frontend/public/livedemo/characters/boy/views/side/walk-06.png
new file mode 100644
index 0000000..1632210
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/walk-06.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/walk-07.png b/frontend/public/livedemo/characters/boy/views/side/walk-07.png
new file mode 100644
index 0000000..9c84fc9
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/walk-07.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/walk-08.png b/frontend/public/livedemo/characters/boy/views/side/walk-08.png
new file mode 100644
index 0000000..3f9ec75
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/walk-08.png differ
diff --git a/frontend/public/livedemo/characters/boy/views/side/walk-preview.gif b/frontend/public/livedemo/characters/boy/views/side/walk-preview.gif
new file mode 100644
index 0000000..3d67f3e
Binary files /dev/null and b/frontend/public/livedemo/characters/boy/views/side/walk-preview.gif differ
diff --git a/frontend/public/livedemo/characters/lirael/base-transparent.png b/frontend/public/livedemo/characters/lirael/base-transparent.png
new file mode 100644
index 0000000..fc15d02
Binary files /dev/null and b/frontend/public/livedemo/characters/lirael/base-transparent.png differ
diff --git a/frontend/public/livedemo/characters/lirael/base.png b/frontend/public/livedemo/characters/lirael/base.png
new file mode 100644
index 0000000..6b70c1f
Binary files /dev/null and b/frontend/public/livedemo/characters/lirael/base.png differ
diff --git a/frontend/public/livedemo/characters/lirael/views/side/walk-01.png b/frontend/public/livedemo/characters/lirael/views/side/walk-01.png
new file mode 100644
index 0000000..73a0c1c
Binary files /dev/null and b/frontend/public/livedemo/characters/lirael/views/side/walk-01.png differ
diff --git a/frontend/public/livedemo/characters/lirael/views/side/walk-02.png b/frontend/public/livedemo/characters/lirael/views/side/walk-02.png
new file mode 100644
index 0000000..279100e
Binary files /dev/null and b/frontend/public/livedemo/characters/lirael/views/side/walk-02.png differ
diff --git a/frontend/public/livedemo/characters/lirael/views/side/walk-03.png b/frontend/public/livedemo/characters/lirael/views/side/walk-03.png
new file mode 100644
index 0000000..8df6660
Binary files /dev/null and b/frontend/public/livedemo/characters/lirael/views/side/walk-03.png differ
diff --git a/frontend/public/livedemo/characters/lirael/views/side/walk-04.png b/frontend/public/livedemo/characters/lirael/views/side/walk-04.png
new file mode 100644
index 0000000..c20affe
Binary files /dev/null and b/frontend/public/livedemo/characters/lirael/views/side/walk-04.png differ
diff --git a/frontend/public/livedemo/characters/lirael/views/side/walk-preview.gif b/frontend/public/livedemo/characters/lirael/views/side/walk-preview.gif
new file mode 100644
index 0000000..d171109
Binary files /dev/null and b/frontend/public/livedemo/characters/lirael/views/side/walk-preview.gif differ
diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx
index 06268ea..e83e48e 100644
--- a/frontend/src/app/app.tsx
+++ b/frontend/src/app/app.tsx
@@ -1,6 +1,7 @@
-import { BrowserRouter, Route, Routes } from 'react-router'
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router'
 
 import { AssetLibraryPage } from '@/pages/asset-library'
+import { CharacterDetailPage } from '@/pages/character-detail'
 import { HomePage } from '@/pages/home'
 import { NotFoundPage } from '@/pages/not-found'
 import { PlaytestPage } from '@/pages/playtest'
@@ -18,20 +19,30 @@ import { AppShellRoute } from './layout'
 export function App() {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route element={<AppShellRoute />}>
-          <Route path="/quick-start" element={<QuickStartPage />} />
-          <Route path="/quick-start/:runId" element={<QuickStartPage />} />
-          <Route path="/projects" element={<ProjectsPage />} />
-          <Route path="/projects/:projectId" element={<ProjectDetailPage />} />
-          <Route path="/projects/:projectId/assets" element={<AssetLibraryPage />} />
-          <Route path="/workflow-editor/:runId" element={<WorkflowEditorPage />} />
-          <Route path="/workflow-editor/:runId/:stage" element={<WorkflowEditorPage />} />
-          <Route path="/playtest/:characterId/:outfitId" element={<PlaytestPage />} />
-          <Route path="*" element={<NotFoundPage />} />
-        </Route>
-      </Routes>
+      <AppRoutes />
     </BrowserRouter>
   )
 }
+
+/** 路由声明独立导出，测试用 MemoryRouter 验证直达地址，不再改写浏览器全局 history。 */
+export function AppRoutes() {
+  return (
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route element={<AppShellRoute />}>
+        <Route path="/quick-start" element={<QuickStartPage />} />
+        <Route path="/quick-start/:runId" element={<QuickStartPage />} />
+        <Route path="/projects" element={<ProjectsPage />} />
+        <Route path="/workflow-editor/:runId" element={<WorkflowEditorPage />} />
+        <Route path="/workflow-editor/:runId/:stage" element={<WorkflowEditorPage />} />
+        <Route path="/playtest/:characterId/:outfitId" element={<PlaytestPage />} />
+        <Route path="*" element={<NotFoundPage />} />
+      </Route>
+      <Route path="/projects/:projectId" element={<ProjectDetailPage />}>
+        <Route index element={<Navigate replace to="assets" />} />
+        <Route path="assets" element={<AssetLibraryPage />} />
+        <Route path="assets/:characterId" element={<CharacterDetailPage />} />
+      </Route>
+    </Routes>
+  )
+}
diff --git a/frontend/src/app/index.ts b/frontend/src/app/index.ts
index f1c81c7..c4279fd 100644
--- a/frontend/src/app/index.ts
+++ b/frontend/src/app/index.ts
@@ -1 +1 @@
-export { App } from './app'
+export { App, AppRoutes } from './app'
diff --git a/frontend/src/app/layout/index.tsx b/frontend/src/app/layout/index.tsx
index b797b33..7a84f8e 100644
--- a/frontend/src/app/layout/index.tsx
+++ b/frontend/src/app/layout/index.tsx
@@ -11,17 +11,32 @@ export interface AppShellProps {
 /** 全站外壳，全局导航常驻。 */
 export function AppShell({ children }: AppShellProps) {
   return (
-    <div className="min-h-screen bg-white text-slate-900">
-      <nav className="flex items-center justify-between border-b border-slate-200 px-6 py-3">
+    <div className="min-h-screen bg-[#fafbf8] text-slate-900">
+      <nav className="flex h-14 items-center justify-between border-b border-[#e0e3dd] bg-white px-6">
         {/* 首屏不带这条顶栏，站名是其余页面唯一的回程入口，必须是链接。 */}
-        <Link to="/" className="font-semibold tracking-tight hover:text-slate-600">
+        <Link
+          to="/"
+          className="flex items-center gap-2 font-semibold tracking-[-0.02em] hover:text-slate-600"
+        >
+          <span
+            aria-hidden="true"
+            className="grid h-7 w-7 place-items-center rounded-lg bg-[#263f2d] text-xs font-bold text-white"
+          >
+            W
+          </span>
           Windup
         </Link>
-        <div className="flex gap-4 text-sm text-slate-600">
-          <Link to="/quick-start" className="hover:text-slate-900">
+        <div className="flex items-center gap-1 text-sm text-[#5f685f]">
+          <Link
+            to="/quick-start"
+            className="rounded-lg px-3 py-2 hover:bg-[#f3f5f1] hover:text-slate-900"
+          >
             快速开始
           </Link>
-          <Link to="/projects" className="hover:text-slate-900">
+          <Link
+            to="/projects"
+            className="rounded-lg px-3 py-2 hover:bg-[#f3f5f1] hover:text-slate-900"
+          >
             项目
           </Link>
         </div>
diff --git a/frontend/src/entities/action-template/index.ts b/frontend/src/entities/action-template/index.ts
index 2dafa39..98cc819 100644
--- a/frontend/src/entities/action-template/index.ts
+++ b/frontend/src/entities/action-template/index.ts
@@ -2,13 +2,20 @@ interface ActionTemplateBase {
   id: string
   name: string
   prompt: string
+  type: 'walk' | 'idle' | 'attack' | 'jump' | 'custom'
+  fps: number
+  frameCount: number
+  loop: boolean
 }
 
 /** 系统内置模板没有项目归属；项目自定义模板必须携带所属 Project ID。 */
 export type ActionTemplate = ActionTemplateBase &
   ({ scope: 'system'; projectId: null } | { scope: 'project'; projectId: string })
 
-/** ActionTemplate 对应的一组后端接口。 */
+/**
+ * WorkflowEditor 的「增加节点」通过此接口读取可选动作模板。
+ * 当前资产库验证只负责保存与展示模板，不在角色详情中直接应用模板。
+ */
 export interface ActionTemplateApis {
   listAvailable(projectId: string): Promise<ActionTemplate[]>
 }
diff --git a/frontend/src/entities/character/index.ts b/frontend/src/entities/character/index.ts
index 616b5db..c46587d 100644
--- a/frontend/src/entities/character/index.ts
+++ b/frontend/src/entities/character/index.ts
@@ -61,6 +61,8 @@ export interface Action {
   id: string
   outfitId: Outfit['id']
   name: string
+  /** null 表示此动作不是从可复用模板创建。 */
+  actionTemplateId: string | null
   /** 定义来源方式；与 type 正交，不用于推断动作业务语义。 */
   kind: ActionKind
   /** 动作业务语义；与 kind 的 preset/custom 来源维度相互独立。 */
@@ -111,6 +113,12 @@ export interface Outfit {
 export interface Character {
   id: string
   projectId: string
+  /**
+   * 角色的显示名，跨造型稳定。
+   * 07-30 评审曾按后端当时无此字段删除过一次；08-04 前后端重新确认保留该字段，
+   * 资产库以它作为角色卡与角色详情的标题。
+   */
+  name: string
   /** 角色的全部独立造型；MVP 页面至少保留这一层，即使当前只有一个成员。 */
   outfits: Outfit[]
   createdAt: string
@@ -120,6 +128,8 @@ export interface Character {
 /** 创建角色并发起母版生成所需的入参。 */
 export interface CreateCharacterInput {
   projectId: string
+  /** 角色的显示名，创建后不随造型切换而变化。 */
+  name: string
   /** 交给模型生成母版。 */
   description: string
   referenceImageUrl?: string | null
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f80172a..27f6048 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -6,3 +6,16 @@ body,
 #root {
   height: 100%;
 }
+
+@keyframes action-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(-18px) scale(0.97);
+    clip-path: inset(0 8% 72% round 1.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    clip-path: inset(0 round 1.5rem);
+  }
+}
diff --git a/frontend/src/pages/asset-library/index.test.tsx b/frontend/src/pages/asset-library/index.test.tsx
new file mode 100644
index 0000000..5cec32b
--- /dev/null
+++ b/frontend/src/pages/asset-library/index.test.tsx
@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+import { MemoryRouter } from 'react-router'
+
+import { AppRoutes } from '@/app'
+
+afterEach(cleanup)
+
+describe('AssetLibraryPage', () => {
+  it('按角色成卡并保留项目级新建与导出入口', async () => {
+    render(
+      <MemoryRouter initialEntries={['/projects/project-ember/assets']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    )
+
+    expect(await screen.findByRole('heading', { name: '角色' })).toBeTruthy()
+    expect(await screen.findAllByRole('link', { name: /查看角色/ })).toHaveLength(3)
+    expect(screen.getByText('轻装信使')).toBeTruthy()
+    expect(screen.getByText('暗色游侠')).toBeTruthy()
+    expect(screen.getByText('待定角色')).toBeTruthy()
+    expect(screen.getByText('母版未定稿')).toBeTruthy()
+    expect(screen.getByRole('button', { name: '新建角色' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: '导出全部角色资产' })).toBeTruthy()
+  })
+
+  it('空项目说明资产归属并提供新建角色入口', async () => {
+    render(
+      <MemoryRouter initialEntries={['/projects/project-empty/assets']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    )
+
+    expect(await screen.findByText('这个项目还没有角色')).toBeTruthy()
+    expect(screen.getAllByRole('button', { name: '新建角色' })).toHaveLength(2)
+    expect(screen.queryByRole('link', { name: /查看角色/ })).toBeNull()
+  })
+
+  it('资产库一级只展示原始角色资产，不预设穿戴和动作模板分类', async () => {
+    render(
+      <MemoryRouter initialEntries={['/projects/project-ember/assets']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    )
+
+    expect(await screen.findByRole('heading', { name: '角色' })).toBeTruthy()
+    expect(screen.getByRole('navigation', { name: '资产分类' })).toBeTruthy()
+    expect(screen.getByRole('link', { name: '角色3' }).getAttribute('aria-current')).toBe('page')
+    expect(screen.queryByRole('link', { name: /穿戴/ })).toBeNull()
+    expect(screen.queryByRole('link', { name: /动作模板/ })).toBeNull()
+  })
+})
diff --git a/frontend/src/pages/asset-library/index.tsx b/frontend/src/pages/asset-library/index.tsx
index b90da65..ae2c875 100644
--- a/frontend/src/pages/asset-library/index.tsx
+++ b/frontend/src/pages/asset-library/index.tsx
@@ -1,13 +1,175 @@
-import { PageContainer } from '@/shared/ui'
+import { useEffect, useMemo, useState } from 'react'
+import { Link, useParams, useSearchParams } from 'react-router'
+
+import type { Character } from '@/entities'
+import { mockCharacterApis, useExtractedAssets, type ExtractedAsset } from './mock'
 
-/** 资产库。 */
 export function AssetLibraryPage() {
+  const { projectId } = useParams()
+  const [searchParams] = useSearchParams()
+  const { assets: extractedAssets } = useExtractedAssets()
+  const [characters, setCharacters] = useState<Character[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let active = true
+    if (!projectId) {
+      setError('缺少项目 ID')
+      return () => {
+        active = false
+      }
+    }
+
+    setCharacters(null)
+    setError(null)
+    void mockCharacterApis.listByProject(projectId).then(
+      (nextCharacters) => {
+        if (!active) return
+        setCharacters(nextCharacters)
+      },
+      () => {
+        if (active) setError('资产库暂时无法读取')
+      },
+    )
+    return () => {
+      active = false
+    }
+  }, [projectId])
+
+  const normalizedQuery = (searchParams.get('q') ?? '').trim().toLowerCase()
+  const requestedType = searchParams.get('type')
+  const type =
+    requestedType === 'actions' && extractedAssets.some((asset) => asset.kind === 'action')
+      ? 'actions'
+      : 'characters'
+  const filteredCharacters = useMemo(
+    () =>
+      (characters ?? []).filter((character) =>
+        character.name.toLowerCase().includes(normalizedQuery),
+      ),
+    [characters, normalizedQuery],
+  )
+  const filteredExtractedAssets = extractedAssets.filter(
+    (asset) => asset.kind === 'action' && asset.name.toLowerCase().includes(normalizedQuery),
+  )
+  const currentLabel = type === 'actions' ? '动作模板' : '角色'
+  return (
+    <section aria-labelledby="asset-library-title" className="min-h-full min-w-0">
+      <h2 id="asset-library-title" className="sr-only">
+        {currentLabel}
+      </h2>
+      <div className="p-6 lg:p-8">
+        {error ? (
+          <p
+            role="alert"
+            className="mt-6 rounded-xl border border-[#d8c7bd] bg-[#fff8f2] p-5 text-sm text-[#7a3f2a]"
+          >
+            {error}
+          </p>
+        ) : characters === null ? (
+          <p className="mt-8 text-sm text-[#70766f]">正在建立资产索引…</p>
+        ) : type === 'characters' ? (
+          <CharacterGrid projectId={projectId ?? ''} characters={filteredCharacters} />
+        ) : (
+          <ExtractedAssetGrid assets={filteredExtractedAssets} />
+        )}
+      </div>
+    </section>
+  )
+}
+
+function ExtractedAssetGrid({ assets }: { assets: ExtractedAsset[] }) {
+  return (
+    <div className="grid grid-cols-[repeat(auto-fill,minmax(13rem,1fr))] gap-4">
+      {assets.map((asset) => (
+        <article
+          key={asset.id}
+          aria-label={`动作模板 ${asset.name}`}
+          className="overflow-hidden rounded-[1.25rem] border border-[#d7dbd4] bg-white"
+        >
+          <div className="aspect-[4/3] bg-[#eef1ec] p-4">
+            <img
+              src={asset.previewImageUrl}
+              alt={`${asset.name}预览`}
+              className="h-full w-full object-contain [image-rendering:pixelated]"
+            />
+          </div>
+          <div className="p-4">
+            <p className="text-[0.65rem] font-semibold uppercase tracking-[0.12em] text-[#7a827a]">
+              动作模板
+            </p>
+            <h3 className="mt-1 font-semibold text-[#242a24]">{asset.name}</h3>
+            <p className="mt-2 text-xs text-[#737b73]">来源：{asset.source}</p>
+          </div>
+        </article>
+      ))}
+    </div>
+  )
+}
+
+function CharacterGrid({ projectId, characters }: { projectId: string; characters: Character[] }) {
+  if (characters.length === 0) return <EmptyState title="这个项目还没有角色" action="新建角色" />
+  return (
+    <div className="grid grid-cols-[repeat(auto-fill,minmax(13rem,1fr))] gap-4">
+      {characters.map((character) => {
+        const outfit = character.outfits[0]
+        const actionCount = character.outfits.reduce((sum, item) => sum + item.actions.length, 0)
+        return (
+          <Link
+            key={character.id}
+            to={`/projects/${projectId}/assets/${character.id}`}
+            aria-label={`查看角色 ${character.name}`}
+            className="group overflow-hidden rounded-[1.25rem] border border-[#d7dbd4] bg-white transition hover:border-[#9ca79c]"
+          >
+            <div className="relative aspect-[4/3] overflow-hidden bg-[#f0f2ed]">
+              {outfit?.characterTemplateUrl ? (
+                <img
+                  src={outfit.characterTemplateUrl}
+                  alt={`${character.name}的${outfit.name}母版`}
+                  className="h-full w-full object-contain p-5 [image-rendering:pixelated] transition group-hover:scale-[1.025]"
+                />
+              ) : (
+                <div className="grid h-full place-items-center bg-[linear-gradient(135deg,#eef0eb_25%,#f7f7f4_25%,#f7f7f4_50%,#eef0eb_50%,#eef0eb_75%,#f7f7f4_75%)] bg-[length:24px_24px]">
+                  <span className="rounded-full border border-[#d7dbd4] bg-white px-2.5 py-1 text-xs font-medium text-[#677068]">
+                    母版未定稿
+                  </span>
+                </div>
+              )}
+            </div>
+            <div className="p-4">
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <h4 className="font-semibold text-[#242a24]">{character.name}</h4>
+                  <p className="mt-1 text-xs text-[#767d75]">{outfit?.name ?? '尚未创建造型'}</p>
+                </div>
+                <span aria-hidden="true" className="text-[#899189]">
+                  ↗
+                </span>
+              </div>
+              <div className="mt-4 flex gap-2 border-t border-[#ecefe9] pt-3 text-xs text-[#697169]">
+                <span>{character.outfits.length} 套造型</span>
+                <span>·</span>
+                <span>{actionCount} 个动作</span>
+              </div>
+            </div>
+          </Link>
+        )
+      })}
+    </div>
+  )
+}
+
+function EmptyState({ title, action }: { title: string; action: string }) {
   return (
-    <PageContainer>
-      <section className="border border-dashed border-slate-300 p-6">
-        <h1 className="font-medium">资产库</h1>
-        <p className="mt-2 text-sm text-slate-500">本次只提交模块划分与接口，页面实现进后续 PR。</p>
-      </section>
-    </PageContainer>
+    <div className="mt-5 rounded-[1.25rem] border border-dashed border-[#cbd1c8] bg-[#f8f9f6] p-7">
+      <h4 className="font-semibold text-[#252a25]">{title}</h4>
+      <p className="mt-2 text-sm text-[#6d736c]">新建后会出现在当前项目的资产索引中。</p>
+      <button
+        type="button"
+        className="mt-5 rounded-lg bg-[#263f2d] px-3.5 py-2 text-sm font-medium text-white"
+      >
+        {action}
+      </button>
+    </div>
   )
 }
diff --git a/frontend/src/pages/asset-library/mock/extracted-assets-context.ts b/frontend/src/pages/asset-library/mock/extracted-assets-context.ts
new file mode 100644
index 0000000..e090690
--- /dev/null
+++ b/frontend/src/pages/asset-library/mock/extracted-assets-context.ts
@@ -0,0 +1,28 @@
+import { createContext, useContext } from 'react'
+
+import type { Action } from '@/entities'
+
+export type ExtractedAssetKind = 'action'
+
+export interface ExtractedAsset {
+  id: string
+  kind: ExtractedAssetKind
+  name: string
+  source: string
+  previewImageUrl: string
+  /** 动作模板保留来源动作定义，复用时才能沿用真实帧率、帧和业务类型。 */
+  sourceAction: Action
+}
+
+export interface ExtractedAssetsValue {
+  assets: ExtractedAsset[]
+  add: (asset: Omit<ExtractedAsset, 'id'>) => void
+}
+
+export const ExtractedAssetsContext = createContext<ExtractedAssetsValue | null>(null)
+
+export function useExtractedAssets() {
+  const value = useContext(ExtractedAssetsContext)
+  if (!value) throw new Error('useExtractedAssets must be used within ExtractedAssetsProvider')
+  return value
+}
diff --git a/frontend/src/pages/asset-library/mock/extracted-assets.tsx b/frontend/src/pages/asset-library/mock/extracted-assets.tsx
new file mode 100644
index 0000000..25af9d2
--- /dev/null
+++ b/frontend/src/pages/asset-library/mock/extracted-assets.tsx
@@ -0,0 +1,26 @@
+import { useMemo, useState, type ReactNode } from 'react'
+
+import {
+  ExtractedAssetsContext,
+  type ExtractedAsset,
+  type ExtractedAssetsValue,
+} from './extracted-assets-context'
+
+/** 层级验证专用的内存态：模拟提取成功后，派生资产分类即时出现在项目资产库。 */
+export function ExtractedAssetsProvider({ children }: { children: ReactNode }) {
+  const [assets, setAssets] = useState<ExtractedAsset[]>([])
+  const value = useMemo<ExtractedAssetsValue>(
+    () => ({
+      assets,
+      add(asset) {
+        setAssets((current) => [
+          ...current,
+          { ...asset, id: `extracted-${asset.kind}-${current.length + 1}` },
+        ])
+      },
+    }),
+    [assets],
+  )
+
+  return <ExtractedAssetsContext.Provider value={value}>{children}</ExtractedAssetsContext.Provider>
+}
diff --git a/frontend/src/pages/asset-library/mock/fixtures.ts b/frontend/src/pages/asset-library/mock/fixtures.ts
new file mode 100644
index 0000000..eb142f5
--- /dev/null
+++ b/frontend/src/pages/asset-library/mock/fixtures.ts
@@ -0,0 +1,168 @@
+import type { ActionTemplate, Character, Frame, Project } from '@/entities'
+
+function livedemoFrames(actionName: 'idle' | 'walk', count: number): Frame[] {
+  return Array.from({ length: count }, (_, index) => ({
+    imageUrl: `/livedemo/characters/boy/views/side/${actionName}-${String(index + 1).padStart(2, '0')}.png`,
+    durationMs: index % 3 === 0 ? null : 100,
+    rootMotion: index % 2 === 0 ? { dx: index * 2, dy: index === 4 ? 6 : 0 } : null,
+  }))
+}
+
+export const mockProjects: Project[] = [
+  {
+    id: 'project-ember',
+    ownerId: 'user-local',
+    name: '点灯人 · MVP',
+    perspective: 'side',
+    directionalMovement: 'four-way',
+    spriteSize: { width: 64, height: 64 },
+    gameStyle: '低饱和像素绘本',
+    sampleImageUrl: null,
+    createdAt: '2026-08-01T08:00:00.000Z',
+    updatedAt: '2026-08-04T05:00:00.000Z',
+  },
+  {
+    id: 'project-empty',
+    ownerId: 'user-local',
+    name: '空白海岸',
+    perspective: 'isometric',
+    directionalMovement: 'eight-way',
+    spriteSize: { width: 128, height: 128 },
+    gameStyle: '温和纸片质感',
+    sampleImageUrl: null,
+    createdAt: '2026-08-04T06:00:00.000Z',
+    updatedAt: '2026-08-04T06:00:00.000Z',
+  },
+]
+
+export const mockCharacters: Character[] = [
+  {
+    id: 'character-mist',
+    projectId: 'project-ember',
+    name: '轻装信使',
+    outfits: [
+      {
+        id: 'outfit-travel',
+        characterId: 'character-mist',
+        name: '常态造型',
+        candidateCharacterTemplates: [],
+        characterTemplateUrl: '/livedemo/characters/boy/base-transparent.png',
+        baseFrames: [{ imageUrl: '/livedemo/characters/boy/base-transparent.png' }],
+        actions: [
+          {
+            id: 'action-idle',
+            outfitId: 'outfit-travel',
+            name: '呼吸待机',
+            actionTemplateId: 'template-idle',
+            kind: 'preset',
+            type: 'idle',
+            fps: 8,
+            keyFrameIndex: null,
+            frames: livedemoFrames('idle', 4),
+          },
+          {
+            id: 'action-walk',
+            outfitId: 'outfit-travel',
+            name: '行走',
+            actionTemplateId: 'template-walk',
+            kind: 'preset',
+            type: 'walk',
+            fps: 10,
+            keyFrameIndex: 4,
+            frames: livedemoFrames('walk', 8),
+          },
+        ],
+      },
+    ],
+    createdAt: '2026-08-01T08:30:00.000Z',
+    updatedAt: '2026-08-04T05:30:00.000Z',
+  },
+  {
+    id: 'character-stone',
+    projectId: 'project-ember',
+    name: '暗色游侠',
+    outfits: [
+      {
+        id: 'outfit-starter',
+        characterId: 'character-stone',
+        name: '旅装',
+        candidateCharacterTemplates: [],
+        characterTemplateUrl: '/livedemo/characters/lirael/base-transparent.png',
+        baseFrames: [{ imageUrl: '/livedemo/characters/lirael/base-transparent.png' }],
+        actions: [
+          {
+            id: 'action-walk',
+            outfitId: 'outfit-starter',
+            name: '行走',
+            actionTemplateId: 'template-walk',
+            kind: 'preset',
+            type: 'walk',
+            fps: 10,
+            keyFrameIndex: null,
+            frames: Array.from({ length: 4 }, (_, index) => ({
+              imageUrl: `/livedemo/characters/lirael/views/side/walk-${String(index + 1).padStart(2, '0')}.png`,
+              durationMs: 100,
+              rootMotion: null,
+            })),
+          },
+        ],
+      },
+    ],
+    createdAt: '2026-08-03T03:20:00.000Z',
+    updatedAt: '2026-08-03T03:20:00.000Z',
+  },
+  {
+    id: 'character-draft',
+    projectId: 'project-ember',
+    name: '待定角色',
+    outfits: [
+      {
+        id: 'outfit-draft',
+        characterId: 'character-draft',
+        name: '未命名造型',
+        candidateCharacterTemplates: [],
+        characterTemplateUrl: null,
+        baseFrames: [],
+        actions: [],
+      },
+    ],
+    createdAt: '2026-08-04T04:20:00.000Z',
+    updatedAt: '2026-08-04T04:20:00.000Z',
+  },
+]
+
+export const mockActionTemplates: ActionTemplate[] = [
+  {
+    id: 'template-walk',
+    name: '基础行走',
+    prompt: '稳定、等速的横向行走循环',
+    type: 'walk',
+    fps: 10,
+    frameCount: 8,
+    loop: true,
+    scope: 'system',
+    projectId: null,
+  },
+  {
+    id: 'template-idle',
+    name: '呼吸待机',
+    prompt: '保持重心的轻微呼吸循环',
+    type: 'idle',
+    fps: 8,
+    frameCount: 4,
+    loop: true,
+    scope: 'project',
+    projectId: 'project-ember',
+  },
+  {
+    id: 'template-attack',
+    name: '短促攻击',
+    prompt: '清晰的蓄力、触点和收势',
+    type: 'attack',
+    fps: 12,
+    frameCount: 6,
+    loop: false,
+    scope: 'system',
+    projectId: null,
+  },
+]
diff --git a/frontend/src/pages/asset-library/mock/index.ts b/frontend/src/pages/asset-library/mock/index.ts
new file mode 100644
index 0000000..bf720d8
--- /dev/null
+++ b/frontend/src/pages/asset-library/mock/index.ts
@@ -0,0 +1,74 @@
+import type {
+  CharacterApis,
+  ActionTemplateApis,
+  CreateCharacterInput,
+  CreateProjectInput,
+  ProjectApis,
+  UpdateProjectInput,
+} from '@/entities'
+
+import { mockActionTemplates, mockCharacters, mockProjects } from './fixtures'
+
+function unavailable(operation: string): Promise<never> {
+  return Promise.reject(new Error(`${operation} is unavailable in the asset hierarchy validation`))
+}
+
+export const mockProjectApis: ProjectApis = {
+  async list(query = {}) {
+    const page = query.page ?? 1
+    const pageSize = query.pageSize ?? 20
+
+    return {
+      items: mockProjects.slice((page - 1) * pageSize, page * pageSize),
+      total: mockProjects.length,
+      page,
+      pageSize,
+    }
+  },
+  async get(id) {
+    const project = mockProjects.find((item) => item.id === id)
+    if (!project) throw new Error(`Project ${id} not found`)
+    return project
+  },
+  create(_input: CreateProjectInput) {
+    return unavailable('ProjectApis.create')
+  },
+  update(_id: string, _input: UpdateProjectInput) {
+    return unavailable('ProjectApis.update')
+  },
+  remove(_id: string) {
+    return unavailable('ProjectApis.remove')
+  },
+}
+
+export const mockCharacterApis: CharacterApis = {
+  async get(id) {
+    const character = mockCharacters.find((item) => item.id === id)
+    if (!character) throw new Error(`Character ${id} not found`)
+    return character
+  },
+  async listByProject(projectId) {
+    return mockCharacters.filter((character) => character.projectId === projectId)
+  },
+  create(_input: CreateCharacterInput) {
+    return unavailable('CharacterApis.create')
+  },
+  update(_character) {
+    return unavailable('CharacterApis.update')
+  },
+}
+
+export const mockActionTemplateApis: ActionTemplateApis = {
+  async listAvailable(projectId) {
+    return mockActionTemplates.filter(
+      (template) => template.scope === 'system' || template.projectId === projectId,
+    )
+  },
+}
+
+export { ExtractedAssetsProvider } from './extracted-assets'
+export {
+  useExtractedAssets,
+  type ExtractedAsset,
+  type ExtractedAssetKind,
+} from './extracted-assets-context'
diff --git a/frontend/src/pages/character-detail/index.test.tsx b/frontend/src/pages/character-detail/index.test.tsx
new file mode 100644
index 0000000..d3f0c40
--- /dev/null
+++ b/frontend/src/pages/character-detail/index.test.tsx
@@ -0,0 +1,70 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+import { MemoryRouter } from 'react-router'
+
+import { AppRoutes } from '@/app'
+
+afterEach(cleanup)
+
+describe('CharacterDetailPage', () => {
+  it('造型并入角色标题区，动作以带动画预览的堆叠卡片展示', async () => {
+    render(
+      <MemoryRouter initialEntries={['/projects/project-ember/assets/character-mist']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    )
+
+    expect(await screen.findByRole('heading', { name: '轻装信使' })).toBeTruthy()
+    expect(screen.getByRole('combobox', { name: '选择造型' })).toBeTruthy()
+    expect(screen.queryByRole('tablist', { name: '角色造型' })).toBeNull()
+    expect(screen.getAllByRole('article', { name: /动作/ })).toHaveLength(2)
+    expect(screen.getByRole('button', { name: '展开呼吸待机' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: '展开行走' })).toBeTruthy()
+    expect(screen.getByRole('img', { name: '呼吸待机动画预览' }).getAttribute('src')).toContain(
+      '.gif',
+    )
+    expect(screen.getByRole('img', { name: '行走动画预览' }).getAttribute('src')).toContain('.gif')
+    expect(screen.queryByRole('region', { name: /完整帧序列/ })).toBeNull()
+    expect(screen.getByRole('button', { name: '加动作' })).toBeTruthy()
+    expect(screen.queryByText('红色围巾')).toBeNull()
+    expect(screen.queryByRole('button', { name: '复用穿戴' })).toBeNull()
+    expect(screen.queryByRole('button', { name: '提取穿戴' })).toBeNull()
+    expect(screen.queryByText(/复用模板/)).toBeNull()
+  })
+
+  it('把选中的角色动作保存为供工作流节点读取的动作模板', async () => {
+    render(
+      <MemoryRouter initialEntries={['/projects/project-ember/assets/character-mist']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    )
+
+    expect(await screen.findByRole('heading', { name: '轻装信使' })).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: '展开行走' }))
+    expect(screen.getByText('轻装信使 / 常态造型 / 行走')).toBeTruthy()
+    expect(screen.getByRole('region', { name: '行走完整帧序列' })).toBeTruthy()
+    expect(screen.queryByRole('region', { name: '资产提取' })).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: '保存为动作模板' }))
+    expect(screen.getByRole('status').textContent).toContain('行走')
+    expect(screen.getByRole('status').textContent).toContain('动作模板')
+    expect(screen.getByRole('link', { name: /动作模板/ })).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: '加动作' }))
+    expect(screen.getByRole('dialog', { name: '生成新动作' })).toBeTruthy()
+    expect(screen.queryByRole('button', { name: '从动作模板复用' })).toBeNull()
+  })
+
+  it('只有母版的角色保留造型层与无动作入口', async () => {
+    render(
+      <MemoryRouter initialEntries={['/projects/project-ember/assets/character-draft']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    )
+
+    expect(await screen.findByRole('heading', { name: '待定角色' })).toBeTruthy()
+    expect(screen.getByRole('combobox', { name: '选择造型' })).toBeTruthy()
+    expect(screen.getByText('这个造型还没有动作')).toBeTruthy()
+    expect(screen.getByRole('button', { name: '加动作' })).toBeTruthy()
+  })
+})
diff --git a/frontend/src/pages/character-detail/index.tsx b/frontend/src/pages/character-detail/index.tsx
new file mode 100644
index 0000000..f0da50f
--- /dev/null
+++ b/frontend/src/pages/character-detail/index.tsx
@@ -0,0 +1,386 @@
+import { useEffect, useState } from 'react'
+import { Link, useParams } from 'react-router'
+
+import type { Action, ActionType, Character, Outfit } from '@/entities'
+import { mockCharacterApis, useExtractedAssets } from '@/pages/asset-library/mock'
+
+const ACTION_TYPE_LABELS: Record<ActionType, string> = {
+  walk: '行走',
+  idle: '待机',
+  attack: '攻击',
+  jump: '跳跃',
+  custom: '自定义',
+}
+
+function actionPreviewUrl(action: Action) {
+  const firstFrame = action.frames[0]?.imageUrl ?? ''
+  return firstFrame.replace(/(?:idle|walk)-01\.png$/, `${action.type}-preview.gif`)
+}
+
+export function CharacterDetailPage() {
+  const { projectId, characterId } = useParams()
+  const [character, setCharacter] = useState<Character | null>(null)
+  const [selectedOutfitId, setSelectedOutfitId] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let active = true
+
+    if (!projectId || !characterId) {
+      setError('缺少角色定位信息')
+      return () => {
+        active = false
+      }
+    }
+
+    setCharacter(null)
+    setSelectedOutfitId(null)
+    setError(null)
+    void mockCharacterApis.get(characterId).then(
+      (nextCharacter) => {
+        if (!active) return
+        if (nextCharacter.projectId !== projectId) {
+          setError('这个角色不属于当前项目')
+          return
+        }
+        setCharacter(nextCharacter)
+        setSelectedOutfitId(nextCharacter.outfits[0]?.id ?? null)
+      },
+      () => {
+        if (active) setError('这个角色不存在或暂时无法读取')
+      },
+    )
+
+    return () => {
+      active = false
+    }
+  }, [characterId, projectId])
+
+  if (error) {
+    return (
+      <p
+        role="alert"
+        className="m-6 rounded-xl border border-[#d8c7bd] bg-[#fff8f2] p-5 text-sm text-[#7a3f2a]"
+      >
+        {error}
+      </p>
+    )
+  }
+
+  if (!character) {
+    return <p className="p-6 text-sm text-[#70766f]">正在读取角色资产…</p>
+  }
+
+  const selectedOutfit =
+    character.outfits.find((outfit) => outfit.id === selectedOutfitId) ??
+    character.outfits[0] ??
+    null
+
+  return (
+    <section aria-labelledby="character-title" className="p-4 lg:px-6 lg:py-5">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <Link
+            to={`/projects/${projectId}/assets`}
+            className="text-xs font-semibold text-[#657066] underline decoration-[#b9c0b8] underline-offset-4 hover:text-[#263f2d]"
+          >
+            返回资产库
+          </Link>
+          <h2
+            id="character-title"
+            className="mt-2 text-2xl font-semibold tracking-[-0.035em] text-[#20241f]"
+          >
+            {character.name}
+          </h2>
+          <p className="mt-1 text-xs text-[#6d736c]">选择动作卡片，展开帧并直接提取资产。</p>
+        </div>
+        {selectedOutfit ? (
+          <label className="flex items-center gap-2 text-xs font-medium text-[#697169]">
+            <span>造型</span>
+            <select
+              aria-label="选择造型"
+              value={selectedOutfit.id}
+              onChange={(event) => setSelectedOutfitId(event.target.value)}
+              className="rounded-full border border-[#ccd2ca] bg-white px-3 py-2 text-sm font-semibold text-[#2e382f] outline-none focus:border-[#748478]"
+            >
+              {character.outfits.map((outfit) => (
+                <option key={outfit.id} value={outfit.id}>
+                  {outfit.name} · {outfit.actions.length} 动作
+                </option>
+              ))}
+            </select>
+          </label>
+        ) : null}
+      </div>
+
+      {character.outfits.length === 0 || !selectedOutfit ? (
+        <div className="mt-6 rounded-[1.5rem] border border-dashed border-[#cbd0c8] bg-[#f8f8f4] p-7">
+          <h3 className="font-semibold text-[#252a25]">这个角色还没有造型</h3>
+        </div>
+      ) : (
+        <>
+          <div className="mt-3">
+            <OutfitMaster character={character} outfit={selectedOutfit} />
+          </div>
+
+          <ActionList character={character} outfit={selectedOutfit} />
+        </>
+      )}
+    </section>
+  )
+}
+
+function OutfitMaster({ character, outfit }: { character: Character; outfit: Outfit }) {
+  return (
+    <section aria-labelledby="outfit-master-title" className="flex min-w-0 items-center gap-4 py-2">
+      <div className="h-28 w-28 shrink-0 sm:h-32 sm:w-32">
+        {outfit.characterTemplateUrl ? (
+          <img
+            src={outfit.characterTemplateUrl}
+            alt={`${character.name}的${outfit.name}母版`}
+            className="h-full w-full object-contain [image-rendering:pixelated]"
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center bg-[linear-gradient(135deg,#eceee7_25%,#f7f6f1_25%,#f7f6f1_50%,#eceee7_50%,#eceee7_75%,#f7f6f1_75%)] bg-[length:28px_28px]">
+            <span className="rounded-full border border-[#b7bdb4] bg-[#fbfaf6]/90 px-3 py-1 text-xs font-semibold text-[#5f685f]">
+              母版未定稿
+            </span>
+          </div>
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div>
+          <h3
+            id="outfit-master-title"
+            className="text-lg font-semibold tracking-[-0.03em] text-[#222722]"
+          >
+            {outfit.name}
+          </h3>
+          <p className="mt-1 text-xs leading-5 text-[#6a716a]">
+            母版是这套造型后续动作生成与一致性检查的视觉基准。
+          </p>
+        </div>
+        <p className="mt-2 text-[0.7rem] font-medium text-[#687068]">
+          母版{outfit.characterTemplateUrl ? '已确认' : '待确认'} · {outfit.actions.length} 个动作
+        </p>
+      </div>
+    </section>
+  )
+}
+
+function ActionList({ character, outfit }: { character: Character; outfit: Outfit }) {
+  const { add: addExtractedAsset } = useExtractedAssets()
+  const [pickerOpen, setPickerOpen] = useState(false)
+  const [selectedActionId, setSelectedActionId] = useState<string | null>(null)
+  const [extractionStatus, setExtractionStatus] = useState<string | null>(null)
+  const selectedAction = outfit.actions.find((action) => action.id === selectedActionId) ?? null
+
+  function saveActionTemplate(action: Action) {
+    addExtractedAsset({
+      kind: 'action',
+      name: `${action.name}模板`,
+      source: `${character.name} / ${outfit.name} / ${action.name}`,
+      previewImageUrl: actionPreviewUrl(action),
+      sourceAction: action,
+    })
+    setExtractionStatus(`已将「${action.name}」保存为动作模板（演示）`)
+  }
+
+  return (
+    <section aria-labelledby="action-list-title" className="mt-3">
+      <div className="flex items-end justify-between gap-4">
+        <div>
+          <p className="text-[0.66rem] font-semibold uppercase tracking-[0.18em] text-[#7a827a]">
+            Action instances
+          </p>
+          <h3 id="action-list-title" className="mt-0.5 text-lg font-semibold text-[#252a25]">
+            动作与帧
+          </h3>
+        </div>
+        <span className="text-[0.7rem] text-[#7c837b]">点击卡片展开完整帧</span>
+      </div>
+
+      {outfit.actions.length === 0 ? (
+        <div className="mt-4 rounded-[1.5rem] border border-dashed border-[#cbd0c8] bg-[#f8f8f4] p-7">
+          <h4 className="font-semibold text-[#252a25]">这个造型还没有动作</h4>
+          <p className="mt-2 text-sm leading-6 text-[#6d736c]">
+            母版已经就位，可以从这里继续补充第一个动作。
+          </p>
+        </div>
+      ) : (
+        <>
+          <div
+            aria-label="动作卡组"
+            className="mt-2 flex min-h-44 items-start overflow-x-auto px-2 pb-4 pt-3"
+          >
+            {outfit.actions.map((action, index) => {
+              const expanded = selectedAction?.id === action.id
+              return (
+                <article
+                  key={action.id}
+                  aria-label={`动作 ${action.name}`}
+                  className={`group relative w-44 shrink-0 transition-[transform,margin] duration-500 ease-[cubic-bezier(.2,.9,.25,1)] ${index ? '-ml-9' : ''} ${expanded ? '-translate-y-1 rotate-0' : index % 2 ? 'translate-y-1 rotate-[2deg]' : 'rotate-[-2deg]'}`}
+                  style={{ zIndex: expanded ? outfit.actions.length + 1 : index + 1 }}
+                >
+                  <button
+                    type="button"
+                    aria-label={`${expanded ? '收起' : '展开'}${action.name}`}
+                    aria-expanded={expanded}
+                    onClick={() => {
+                      setSelectedActionId(expanded ? null : action.id)
+                      setExtractionStatus(null)
+                    }}
+                    className={`block w-full overflow-hidden rounded-[1.4rem] border bg-white text-left transition duration-500 group-hover:-translate-y-2 ${expanded ? 'border-[#718876] ring-4 ring-[#dfe8df]' : 'border-[#cfd5cd]'}`}
+                  >
+                    <div className="relative aspect-[16/10] overflow-hidden bg-[#eef1ec]">
+                      <img
+                        src={actionPreviewUrl(action)}
+                        alt={`${action.name}动画预览`}
+                        className="h-full w-full object-contain p-2 [image-rendering:pixelated]"
+                      />
+                      <span className="absolute right-3 top-3 rounded-full bg-white/90 px-2 py-1 text-[0.62rem] font-semibold text-[#516054]">
+                        GIF
+                      </span>
+                    </div>
+                    <div className="p-3">
+                      <div className="flex items-center justify-between gap-3">
+                        <h4 className="font-semibold text-[#252b25]">{action.name}</h4>
+                        <span className="text-sm text-[#69756b]">{expanded ? '−' : '↗'}</span>
+                      </div>
+                      <p className="mt-1 text-xs text-[#747b73]">
+                        {ACTION_TYPE_LABELS[action.type]} · {action.fps} FPS ·{' '}
+                        {action.frames.length} 帧
+                      </p>
+                    </div>
+                  </button>
+                </article>
+              )
+            })}
+          </div>
+
+          {selectedAction ? (
+            <section
+              aria-label={`${selectedAction.name}完整帧序列`}
+              className="animate-[action-reveal_520ms_cubic-bezier(.2,.9,.25,1)] overflow-hidden rounded-[1.35rem] border border-[#d6dbd4] bg-white p-4"
+            >
+              <div className="flex flex-wrap items-start justify-between gap-4">
+                <div>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <h4 className="text-lg font-semibold text-[#242924]">{selectedAction.name}</h4>
+                    <span className="rounded-full bg-[#edf0ea] px-2.5 py-1 text-[0.68rem] font-semibold text-[#566258]">
+                      {ACTION_TYPE_LABELS[selectedAction.type]}
+                    </span>
+                    {selectedAction.keyFrameIndex !== null ? (
+                      <span className="rounded-full border border-[#d8c89e] bg-[#fff9e9] px-2.5 py-1 text-[0.68rem] font-semibold text-[#74613c]">
+                        关键帧 {selectedAction.keyFrameIndex + 1}
+                      </span>
+                    ) : null}
+                  </div>
+                  <p className="mt-2 text-xs text-[#747b73]">
+                    {selectedAction.fps} FPS · {selectedAction.frames.length} 帧
+                  </p>
+                </div>
+                <div className="flex flex-wrap justify-end gap-2">
+                  <button
+                    type="button"
+                    onClick={() => saveActionTemplate(selectedAction)}
+                    className="rounded-full bg-[#263f2d] px-3 py-1.5 text-xs font-semibold text-white"
+                  >
+                    保存为动作模板
+                  </button>
+                  <Link
+                    to={`/playtest/${character.id}/${outfit.id}`}
+                    className="rounded-full border border-[#bdc4ba] px-3 py-1.5 text-xs font-semibold text-[#435047] hover:border-[#6e796f]"
+                  >
+                    预览{selectedAction.name}
+                  </Link>
+                  <button
+                    type="button"
+                    className="rounded-full border border-[#bdc4ba] px-3 py-1.5 text-xs font-semibold text-[#435047] hover:border-[#6e796f]"
+                  >
+                    重新生成
+                  </button>
+                </div>
+              </div>
+              <p className="mt-2 text-[0.68rem] font-medium text-[#687068]">
+                {character.name} / {outfit.name} / {selectedAction.name}
+              </p>
+              <div className="mt-3 overflow-x-auto pb-1">
+                <ol className="flex min-w-max gap-2.5">
+                  {selectedAction.frames.map((frame, index) => (
+                    <li key={`${selectedAction.id}-${index}`} className="w-20 shrink-0">
+                      <div
+                        className={`overflow-hidden rounded-xl border ${index === selectedAction.keyFrameIndex ? 'border-[#a78a4f] ring-2 ring-[#ead9a5]/55' : 'border-[#dde0d9]'}`}
+                      >
+                        <img
+                          src={frame.imageUrl}
+                          alt={`${selectedAction.name}第 ${index + 1} 帧`}
+                          className="aspect-square w-full object-contain p-1 [image-rendering:pixelated]"
+                        />
+                      </div>
+                      <div className="mt-2 flex items-center justify-between gap-1 text-[0.65rem] text-[#7b827a]">
+                        <span>#{String(index + 1).padStart(2, '0')}</span>
+                        <span>
+                          {frame.durationMs === null
+                            ? `按 ${selectedAction.fps} FPS`
+                            : `${frame.durationMs} ms`}
+                        </span>
+                      </div>
+                    </li>
+                  ))}
+                </ol>
+              </div>
+              {extractionStatus ? (
+                <p role="status" className="mt-2 text-xs font-medium text-[#315039]">
+                  {extractionStatus}
+                </p>
+              ) : null}
+            </section>
+          ) : null}
+        </>
+      )}
+
+      <button
+        type="button"
+        onClick={() => setPickerOpen(true)}
+        className="mt-3 flex w-full items-center justify-center gap-2 rounded-[1.1rem] border border-dashed border-[#aeb6ac] px-4 py-2 text-xs font-semibold text-[#435047] transition hover:border-[#6e796f]"
+      >
+        <span aria-hidden="true" className="text-lg font-light">
+          ＋
+        </span>
+        加动作
+      </button>
+      {pickerOpen ? (
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-label="生成新动作"
+          className="mt-4 rounded-xl border border-[#cfd6ce] bg-white p-5 shadow-[0_18px_45px_rgba(35,44,36,0.12)]"
+        >
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h4 className="font-semibold text-[#252b25]">生成新动作</h4>
+              <p className="mt-1 text-xs text-[#727a72]">
+                新动作由生成工作流产出；动作模板复用将在 WorkflowEditor 的增加节点中提供。
+              </p>
+            </div>
+            <button
+              type="button"
+              aria-label="关闭新动作面板"
+              onClick={() => setPickerOpen(false)}
+              className="rounded-md px-2 py-1 text-[#6f786f] hover:bg-[#f1f3ef]"
+            >
+              ×
+            </button>
+          </div>
+          <button
+            type="button"
+            className="mt-4 rounded-full bg-[#263f2d] px-4 py-2 text-xs font-semibold text-white"
+          >
+            前往生成工作流
+          </button>
+        </div>
+      ) : null}
+    </section>
+  )
+}
diff --git a/frontend/src/pages/project-detail/index.test.tsx b/frontend/src/pages/project-detail/index.test.tsx
new file mode 100644
index 0000000..7f6f9b5
--- /dev/null
+++ b/frontend/src/pages/project-detail/index.test.tsx
@@ -0,0 +1,33 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+import { MemoryRouter } from 'react-router'
+
+import { AppRoutes } from '@/app'
+
+afterEach(cleanup)
+
+describe('ProjectDetailPage', () => {
+  it('直接访问角色子路由时仍保留项目名称与四项约束', async () => {
+    render(
+      <MemoryRouter initialEntries={['/projects/project-ember/assets/character-mist']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    )
+
+    expect(await screen.findByRole('heading', { name: '点灯人 · MVP' })).toBeTruthy()
+    expect(screen.getByText('横版视角')).toBeTruthy()
+    expect(screen.getByText('四向')).toBeTruthy()
+    expect(screen.getByText('64 × 64')).toBeTruthy()
+    expect(screen.getByText('低饱和像素绘本')).toBeTruthy()
+    expect(screen.getByRole('link', { name: '返回项目中心' }).getAttribute('href')).toBe(
+      '/projects',
+    )
+    expect(screen.getByRole('navigation', { name: '资产分类' })).toBeTruthy()
+    expect(screen.getByRole('link', { name: /角色/ }).getAttribute('aria-current')).toBe('page')
+    expect(await screen.findByRole('heading', { name: '轻装信使' })).toBeTruthy()
+    expect(screen.getByRole('link', { name: '返回资产库' }).getAttribute('href')).toBe(
+      '/projects/project-ember/assets',
+    )
+  })
+})
diff --git a/frontend/src/pages/project-detail/index.tsx b/frontend/src/pages/project-detail/index.tsx
index 911b1e4..04a0eb9 100644
--- a/frontend/src/pages/project-detail/index.tsx
+++ b/frontend/src/pages/project-detail/index.tsx
@@ -1,13 +1,202 @@
-import { PageContainer } from '@/shared/ui'
+import { useEffect, useState } from 'react'
+import { Link, Outlet, useLocation, useParams, useSearchParams } from 'react-router'
+
+import { CHARACTER_PERSPECTIVE, DIRECTIONAL_MOVEMENT, type Project } from '@/entities'
+import {
+  ExtractedAssetsProvider,
+  mockCharacterApis,
+  mockProjectApis,
+  useExtractedAssets,
+} from '@/pages/asset-library/mock'
 
-/** 项目详情。 */
 export function ProjectDetailPage() {
   return (
-    <PageContainer>
-      <section className="border border-dashed border-slate-300 p-6">
-        <h1 className="font-medium">项目详情</h1>
-        <p className="mt-2 text-sm text-slate-500">本次只提交模块划分与接口，页面实现进后续 PR。</p>
-      </section>
-    </PageContainer>
+    <ExtractedAssetsProvider>
+      <ProjectWorkspace />
+    </ExtractedAssetsProvider>
+  )
+}
+
+function ProjectWorkspace() {
+  const { projectId } = useParams()
+  const location = useLocation()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [project, setProject] = useState<Project | null>(null)
+  const [characterCount, setCharacterCount] = useState(0)
+  const [error, setError] = useState<string | null>(null)
+  const { assets: extractedAssets } = useExtractedAssets()
+
+  useEffect(() => {
+    let active = true
+    if (!projectId) {
+      setError('缺少项目 ID')
+      return () => {
+        active = false
+      }
+    }
+
+    setProject(null)
+    setError(null)
+    void Promise.all([
+      mockProjectApis.get(projectId),
+      mockCharacterApis.listByProject(projectId),
+    ]).then(
+      ([nextProject, characters]) => {
+        if (!active) return
+        setProject(nextProject)
+        setCharacterCount(characters.length)
+      },
+      () => {
+        if (active) setError('这个项目不存在或暂时无法读取')
+      },
+    )
+
+    return () => {
+      active = false
+    }
+  }, [projectId])
+
+  if (error)
+    return (
+      <p
+        role="alert"
+        className="m-6 rounded-lg border border-[#d8c7bd] bg-[#fff8f2] p-5 text-sm text-[#7a3f2a]"
+      >
+        {error}
+      </p>
+    )
+  if (!project) return <p className="p-6 text-sm text-[#6f746d]">正在读取项目…</p>
+
+  const constraints = [
+    ['视角', CHARACTER_PERSPECTIVE[project.perspective]],
+    ['朝向', DIRECTIONAL_MOVEMENT[project.directionalMovement]],
+    ['尺寸', `${project.spriteSize.width} × ${project.spriteSize.height}`],
+    ['画风', project.gameStyle ?? '尚未设定'],
+  ]
+  const isCharacterDetail = location.pathname.split('/').length > 5
+  const actionCount = extractedAssets.filter((asset) => asset.kind === 'action').length
+  const requestedType = searchParams.get('type')
+  const activeAsset = isCharacterDetail
+    ? 'characters'
+    : requestedType === 'actions' && actionCount
+      ? 'actions'
+      : 'characters'
+  const assets = [
+    {
+      id: 'characters',
+      label: '角色',
+      count: characterCount,
+      href: `/projects/${project.id}/assets`,
+    },
+    ...(actionCount
+      ? [
+          {
+            id: 'actions',
+            label: '动作模板',
+            count: actionCount,
+            href: `/projects/${project.id}/assets?type=actions`,
+          },
+        ]
+      : []),
+  ]
+  const activeLabel = activeAsset === 'actions' ? '动作模板' : '角色'
+  const query = searchParams.get('q') ?? ''
+
+  return (
+    <div className="grid h-screen gap-3 overflow-hidden bg-[#f7f8f5] p-3 md:grid-cols-[13rem_minmax(0,1fr)] xl:grid-cols-[14rem_minmax(0,1fr)]">
+      <aside className="flex min-h-0 flex-col overflow-hidden rounded-[1.35rem] border border-[#d9ddd6] bg-[#fbfbf8] text-[#222520]">
+        <div className="border-b border-[#dfe2dc] px-4 py-4">
+          <Link
+            to="/projects"
+            aria-label="返回项目中心"
+            className="text-xs font-medium text-[#687067] hover:text-[#242824]"
+          >
+            ‹ 项目中心
+          </Link>
+          <h1 className="mt-3 truncate text-sm font-semibold tracking-[-0.01em]">{project.name}</h1>
+        </div>
+
+        <nav aria-label="资产分类" className="p-2.5">
+          <p className="px-2 pb-2 pt-1 text-[0.65rem] font-semibold uppercase tracking-[0.12em] text-[#858c84]">
+            资产库
+          </p>
+          <div className="space-y-0.5">
+            {assets.map((item) => {
+              const active = item.id === activeAsset
+              return (
+                <Link
+                  key={item.id}
+                  to={item.href}
+                  aria-current={active ? 'page' : undefined}
+                  className={`flex h-9 items-center justify-between rounded-xl px-2.5 text-sm transition ${active ? 'bg-[#dfe7dd] font-semibold text-[#263f2d]' : 'text-[#59625a] hover:bg-[#e8ebe6] hover:text-[#2e352f]'}`}
+                >
+                  <span>{item.label}</span>
+                  <span className="text-xs tabular-nums text-[#7d857d]">{item.count}</span>
+                </Link>
+              )
+            })}
+          </div>
+        </nav>
+
+        {!isCharacterDetail ? (
+          <div className="border-t border-[#e3e6e0] p-3">
+            <label className="relative block">
+              <span className="sr-only">搜索当前资产</span>
+              <span aria-hidden="true" className="absolute left-3 top-2 text-[#899087]">
+                ⌕
+              </span>
+              <input
+                value={query}
+                onChange={(event) => {
+                  const next = new URLSearchParams(searchParams)
+                  if (event.target.value) next.set('q', event.target.value)
+                  else next.delete('q')
+                  setSearchParams(next, { replace: true })
+                }}
+                placeholder={`搜索${activeLabel}`}
+                className="h-9 w-full rounded-full border border-[#d5d9d2] bg-white pl-9 pr-3 text-xs outline-none placeholder:text-[#9a9f99] focus:border-[#7a887b]"
+              />
+            </label>
+            <div className="mt-2 grid grid-cols-[1fr_auto] gap-2">
+              <button
+                type="button"
+                aria-label="新建角色"
+                className="h-9 rounded-full bg-[#263f2d] px-3 text-xs font-semibold text-white hover:bg-[#315039]"
+              >
+                ＋ 新建角色
+              </button>
+              <button
+                type="button"
+                aria-label="导出全部角色资产"
+                className="h-9 rounded-full border border-[#cfd4cc] bg-white px-3 text-xs font-medium text-[#3e473f] hover:bg-[#f5f6f2]"
+              >
+                导出
+              </button>
+            </div>
+          </div>
+        ) : null}
+
+        <div className="mt-2 border-t border-[#e3e6e0] p-3">
+          <p className="px-2 pb-1 text-[0.65rem] font-semibold uppercase tracking-[0.12em] text-[#858c84]">
+            项目规格
+          </p>
+          <dl className="space-y-0.5">
+            {constraints.map(([label, value]) => (
+              <div
+                key={label}
+                className="flex min-w-0 items-center justify-between gap-2 px-2 py-1.5 text-[0.7rem]"
+              >
+                <dt className="text-[#858c84]">{label}</dt>
+                <dd className="truncate font-medium text-[#454b44]">{value}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </aside>
+
+      <div className="min-w-0 overflow-y-auto">
+        <Outlet />
+      </div>
+    </div>
   )
 }
diff --git a/frontend/src/pages/projects/index.test.tsx b/frontend/src/pages/projects/index.test.tsx
new file mode 100644
index 0000000..386c6ad
--- /dev/null
+++ b/frontend/src/pages/projects/index.test.tsx
@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+import { MemoryRouter } from 'react-router'
+
+import { AppRoutes } from '@/app'
+
+afterEach(cleanup)
+
+describe('ProjectsPage', () => {
+  it('先以项目为浏览粒度，再从整张项目卡进入该项目的资产库', async () => {
+    render(
+      <MemoryRouter initialEntries={['/projects']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    )
+
+    expect(await screen.findByRole('heading', { name: '项目中心' })).toBeTruthy()
+    expect(await screen.findAllByRole('link', { name: /打开项目/ })).toHaveLength(2)
+    expect(screen.getByRole('link', { name: '打开项目 点灯人 · MVP' }).getAttribute('href')).toBe(
+      '/projects/project-ember/assets',
+    )
+    expect(screen.queryByRole('link', { name: /查看角色/ })).toBeNull()
+    expect(screen.getAllByText(/个角色/).length).toBeGreaterThan(0)
+    expect(screen.getAllByText(/更新于/).length).toBeGreaterThan(0)
+  })
+
+  it('支持搜索、新建和删除项目的本地演示闭环', async () => {
+    render(
+      <MemoryRouter initialEntries={['/projects']}>
+        <AppRoutes />
+      </MemoryRouter>,
+    )
+
+    expect(await screen.findAllByRole('link', { name: /打开项目/ })).toHaveLength(2)
+    fireEvent.change(screen.getByRole('searchbox', { name: '搜索项目' }), {
+      target: { value: '海岸' },
+    })
+    expect(screen.getAllByRole('link', { name: /打开项目/ })).toHaveLength(1)
+    expect(screen.getByText('空白海岸')).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: '新建项目' }))
+    expect(screen.getByRole('dialog', { name: '新建项目' })).toBeTruthy()
+    fireEvent.change(screen.getByRole('textbox', { name: '项目名称' }), {
+      target: { value: '夜航测试' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: '创建项目' }))
+    expect(screen.getByRole('link', { name: '打开项目 夜航测试' })).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: '删除项目 夜航测试' }))
+    expect(screen.getByRole('dialog', { name: '删除项目' })).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: '确认删除项目' }))
+    expect(screen.queryByRole('link', { name: '打开项目 夜航测试' })).toBeNull()
+  })
+})
diff --git a/frontend/src/pages/projects/index.tsx b/frontend/src/pages/projects/index.tsx
index 6c252ea..f450af9 100644
--- a/frontend/src/pages/projects/index.tsx
+++ b/frontend/src/pages/projects/index.tsx
@@ -1,13 +1,436 @@
+import { useEffect, useMemo, useState, type FormEvent } from 'react'
+import { Link } from 'react-router'
+
+import {
+  CHARACTER_PERSPECTIVE,
+  DIRECTIONAL_MOVEMENT,
+  SPRITE_SIZES,
+  type CharacterPerspective,
+  type DirectionalMovement,
+  type Project,
+} from '@/entities'
+import { mockCharacterApis, mockProjectApis } from '@/pages/asset-library/mock'
 import { PageContainer } from '@/shared/ui'
 
-/** 项目列表。 */
+/** 项目中心；项目是资产、生成规格与导出的隔离边界。 */
 export function ProjectsPage() {
+  const [projects, setProjects] = useState<Project[] | null>(null)
+  const [characterCounts, setCharacterCounts] = useState<Record<string, number>>({})
+  const [query, setQuery] = useState('')
+  const [createOpen, setCreateOpen] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<Project | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let active = true
+
+    void mockProjectApis.list().then(
+      async (page) => {
+        const counts = await Promise.all(
+          page.items.map(
+            async (project) =>
+              [project.id, (await mockCharacterApis.listByProject(project.id)).length] as const,
+          ),
+        )
+        if (!active) return
+        setProjects(page.items)
+        setCharacterCounts(Object.fromEntries(counts))
+      },
+      () => {
+        if (active) setError('项目暂时无法读取')
+      },
+    )
+
+    return () => {
+      active = false
+    }
+  }, [])
+
+  const normalizedQuery = query.trim().toLowerCase()
+  const filteredProjects = useMemo(
+    () =>
+      (projects ?? []).filter((project) =>
+        `${project.name}${project.gameStyle ?? ''}`.toLowerCase().includes(normalizedQuery),
+      ),
+    [normalizedQuery, projects],
+  )
+
+  function createProject(input: NewProjectInput) {
+    const now = new Date().toISOString()
+    const nextProject: Project = {
+      id: `project-local-${(projects?.length ?? 0) + 1}`,
+      ownerId: 'user-local',
+      name: input.name,
+      perspective: input.perspective,
+      directionalMovement: input.directionalMovement,
+      spriteSize: { width: input.spriteSize, height: input.spriteSize },
+      gameStyle: input.gameStyle || null,
+      sampleImageUrl: null,
+      createdAt: now,
+      updatedAt: now,
+    }
+    setProjects((current) => [...(current ?? []), nextProject])
+    setCharacterCounts((current) => ({ ...current, [nextProject.id]: 0 }))
+    setQuery('')
+    setCreateOpen(false)
+  }
+
   return (
     <PageContainer>
-      <section className="border border-dashed border-slate-300 p-6">
-        <h1 className="font-medium">项目列表</h1>
-        <p className="mt-2 text-sm text-slate-500">本次只提交模块划分与接口，页面实现进后续 PR。</p>
+      <section aria-labelledby="projects-title">
+        <header className="flex flex-col gap-4 border-b border-[#d8dbd4] pb-6 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <p className="font-mono text-[0.65rem] font-semibold tracking-[0.18em] text-[#7b8079]">
+              PROJECT WORKSPACE
+            </p>
+            <h1
+              id="projects-title"
+              className="mt-2 font-serif text-4xl font-medium tracking-[-0.045em] text-[#1f211e]"
+            >
+              项目中心
+            </h1>
+            <p className="mt-2 max-w-2xl text-sm leading-6 text-[#696e67]">
+              项目隔离角色、动作、生成规格与导出结果；先选项目，再管理其资产。
+            </p>
+          </div>
+          <button
+            type="button"
+            aria-label="新建项目"
+            onClick={() => setCreateOpen(true)}
+            className="rounded-full bg-[#263f2d] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#315039]"
+          >
+            ＋ 新建项目
+          </button>
+        </header>
+
+        <div className="mt-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <label className="relative block w-full max-w-md">
+            <span className="sr-only">搜索项目</span>
+            <span aria-hidden="true" className="absolute left-3 top-2.5 text-[#8b9189]">
+              ⌕
+            </span>
+            <input
+              type="search"
+              aria-label="搜索项目"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="搜索项目名称或画风"
+              className="h-10 w-full rounded-full border border-[#cfd4cc] bg-white pl-9 pr-4 text-sm outline-none placeholder:text-[#989e97] focus:border-[#718076]"
+            />
+          </label>
+          {projects ? (
+            <p className="text-xs font-medium text-[#737971]">
+              显示 {filteredProjects.length} / {projects.length} 个项目
+            </p>
+          ) : null}
+        </div>
+
+        {error ? (
+          <p
+            role="alert"
+            className="mt-6 rounded-2xl border border-[#d8c7bd] bg-[#fff8f2] p-5 text-sm text-[#7a3f2a]"
+          >
+            {error}
+          </p>
+        ) : projects === null ? (
+          <p className="mt-6 text-sm text-[#70766f]">正在读取项目…</p>
+        ) : filteredProjects.length === 0 ? (
+          <div className="mt-6 rounded-2xl border border-dashed border-[#c9cec6] p-7">
+            <h2 className="font-semibold text-[#252a25]">没有匹配的项目</h2>
+            <p className="mt-2 text-sm text-[#6d736c]">调整搜索词，或新建一个项目。</p>
+          </div>
+        ) : (
+          <div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+            {filteredProjects.map((project, index) => (
+              <ProjectCard
+                key={project.id}
+                project={project}
+                index={index}
+                characterCount={characterCounts[project.id] ?? 0}
+                onDelete={() => setDeleteTarget(project)}
+              />
+            ))}
+          </div>
+        )}
       </section>
+
+      {createOpen ? (
+        <NewProjectDialog onClose={() => setCreateOpen(false)} onCreate={createProject} />
+      ) : null}
+      {deleteTarget ? (
+        <DeleteProjectDialog
+          project={deleteTarget}
+          onClose={() => setDeleteTarget(null)}
+          onConfirm={() => {
+            setProjects((current) => (current ?? []).filter((item) => item.id !== deleteTarget.id))
+            setDeleteTarget(null)
+          }}
+        />
+      ) : null}
     </PageContainer>
   )
 }
+
+function ProjectCard({
+  project,
+  index,
+  characterCount,
+  onDelete,
+}: {
+  project: Project
+  index: number
+  characterCount: number
+  onDelete: () => void
+}) {
+  const updatedAt = new Intl.DateTimeFormat('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+  }).format(new Date(project.updatedAt))
+  return (
+    <article className="relative min-h-64 rounded-[1.5rem] border border-[#d8dbd4] bg-[#f4f5f1] transition hover:-translate-y-0.5 hover:border-[#9da59b] hover:bg-white">
+      <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-[#252825]"
+      >
+        <span className="font-mono text-[0.62rem] font-semibold tracking-[0.16em] text-[#8a8f87]">
+          PROJECT {String(index + 1).padStart(2, '0')}
+        </span>
+        <div className="mt-auto pt-10">
+          <h2 className="font-serif text-2xl font-medium tracking-[-0.035em] text-[#222520]">
+            {project.name}
+          </h2>
+          <p className="mt-2 text-xs text-[#747b73]">
+            {characterCount} 个角色 · 更新于 {updatedAt}
+          </p>
+          <dl className="mt-4 grid grid-cols-2 gap-x-5 gap-y-3 border-t border-[#dfe1dc] pt-4 text-xs">
+            <div>
+              <dt className="text-[#898e87]">视角 / 朝向</dt>
+              <dd className="mt-1 font-medium text-[#41473f]">
+                {CHARACTER_PERSPECTIVE[project.perspective]} ·{' '}
+                {DIRECTIONAL_MOVEMENT[project.directionalMovement]}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-[#898e87]">精灵尺寸</dt>
+              <dd className="mt-1 font-medium text-[#41473f]">
+                {project.spriteSize.width} × {project.spriteSize.height}
+              </dd>
+            </div>
+            <div className="col-span-2">
+              <dt className="text-[#898e87]">画风约束</dt>
+              <dd className="mt-1 truncate font-medium text-[#41473f]">
+                {project.gameStyle ?? '尚未设定'}
+              </dd>
+            </div>
+          </dl>
+        </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-[#7a8179] hover:bg-[#eceee9] hover:text-[#7a3f2a]"
+      >
+        ⋯
+      </button>
+    </article>
+  )
+}
+
+interface NewProjectInput {
+  name: string
+  perspective: CharacterPerspective
+  directionalMovement: DirectionalMovement
+  spriteSize: number
+  gameStyle: string
+}
+
+function NewProjectDialog({
+  onClose,
+  onCreate,
+}: {
+  onClose: () => void
+  onCreate: (input: NewProjectInput) => void
+}) {
+  const [name, setName] = useState('')
+  const [perspective, setPerspective] = useState<CharacterPerspective>('side')
+  const [directionalMovement, setDirectionalMovement] = useState<DirectionalMovement>('four-way')
+  const [spriteSize, setSpriteSize] = useState(64)
+  const [gameStyle, setGameStyle] = useState('')
+
+  function submit(event: FormEvent) {
+    event.preventDefault()
+    if (!name.trim()) return
+    onCreate({
+      name: name.trim(),
+      perspective,
+      directionalMovement,
+      spriteSize,
+      gameStyle: gameStyle.trim(),
+    })
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 grid place-items-center bg-[#1f241f]/20 p-4 backdrop-blur-sm">
+      <form
+        role="dialog"
+        aria-modal="true"
+        aria-label="新建项目"
+        onSubmit={submit}
+        className="w-full max-w-xl rounded-[1.5rem] border border-[#d4d9d1] bg-white p-6"
+      >
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h2 className="text-xl font-semibold text-[#252a25]">新建项目</h2>
+            <p className="mt-1 text-xs text-[#717971]">
+              这些设置将成为角色和动作生成的项目级约束。
+            </p>
+          </div>
+          <button type="button" aria-label="关闭新建项目" onClick={onClose}>
+            ×
+          </button>
+        </div>
+        <div className="mt-5 grid gap-4 sm:grid-cols-2">
+          <label className="sm:col-span-2 text-xs font-medium text-[#596159]">
+            项目名称
+            <input
+              aria-label="项目名称"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              required
+              className="mt-1.5 h-10 w-full rounded-xl border border-[#cfd4cc] px-3 text-sm outline-none focus:border-[#718076]"
+            />
+          </label>
+          <ProjectSelect
+            label="视角"
+            value={perspective}
+            onChange={setPerspective}
+            options={CHARACTER_PERSPECTIVE}
+          />
+          <ProjectSelect
+            label="朝向"
+            value={directionalMovement}
+            onChange={setDirectionalMovement}
+            options={DIRECTIONAL_MOVEMENT}
+          />
+          <label className="text-xs font-medium text-[#596159]">
+            精灵尺寸
+            <select
+              aria-label="精灵尺寸"
+              value={spriteSize}
+              onChange={(event) => setSpriteSize(Number(event.target.value))}
+              className="mt-1.5 h-10 w-full rounded-xl border border-[#cfd4cc] bg-white px-3 text-sm"
+            >
+              {SPRITE_SIZES.map((size) => (
+                <option key={size} value={size}>
+                  {size} × {size}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="text-xs font-medium text-[#596159]">
+            画风约束
+            <input
+              aria-label="画风约束"
+              value={gameStyle}
+              onChange={(event) => setGameStyle(event.target.value)}
+              placeholder="例如：低饱和像素绘本"
+              className="mt-1.5 h-10 w-full rounded-xl border border-[#cfd4cc] px-3 text-sm outline-none focus:border-[#718076]"
+            />
+          </label>
+        </div>
+        <div className="mt-6 flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-full border border-[#cfd4cc] px-4 py-2 text-sm"
+          >
+            取消
+          </button>
+          <button
+            type="submit"
+            aria-label="创建项目"
+            className="rounded-full bg-[#263f2d] px-4 py-2 text-sm font-semibold text-white"
+          >
+            创建项目
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+function ProjectSelect<T extends string>({
+  label,
+  value,
+  onChange,
+  options,
+}: {
+  label: string
+  value: T
+  onChange: (value: T) => void
+  options: Record<T, string>
+}) {
+  return (
+    <label className="text-xs font-medium text-[#596159]">
+      {label}
+      <select
+        aria-label={label}
+        value={value}
+        onChange={(event) => onChange(event.target.value as T)}
+        className="mt-1.5 h-10 w-full rounded-xl border border-[#cfd4cc] bg-white px-3 text-sm"
+      >
+        {(Object.entries(options) as [T, string][]).map(([optionValue, optionLabel]) => (
+          <option key={optionValue} value={optionValue}>
+            {optionLabel}
+          </option>
+        ))}
+      </select>
+    </label>
+  )
+}
+
+function DeleteProjectDialog({
+  project,
+  onClose,
+  onConfirm,
+}: {
+  project: Project
+  onClose: () => void
+  onConfirm: () => void
+}) {
+  return (
+    <div className="fixed inset-0 z-50 grid place-items-center bg-[#1f241f]/20 p-4 backdrop-blur-sm">
+      <section
+        role="dialog"
+        aria-modal="true"
+        aria-label="删除项目"
+        className="w-full max-w-md rounded-[1.5rem] border border-[#d9d5cf] bg-white p-6"
+      >
+        <h2 className="text-lg font-semibold text-[#292b27]">删除“{project.name}”？</h2>
+        <p className="mt-2 text-sm leading-6 text-[#6f716c]">
+          项目是资产隔离边界；删除后将无法从项目中心访问其角色、动作和导出结果。
+        </p>
+        <p className="mt-2 text-xs text-[#8a6a5e]">当前为本地演示，不会调用后端删除接口。</p>
+        <div className="mt-6 flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-full border border-[#cfd4cc] px-4 py-2 text-sm"
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            aria-label="确认删除项目"
+            onClick={onConfirm}
+            className="rounded-full bg-[#7a3f2a] px-4 py-2 text-sm font-semibold text-white"
+          >
+            删除项目
+          </button>
+        </div>
+      </section>
+    </div>
+  )
+}