diff --git a/docs/screenshots/quick-start-continuity-desktop.jpg b/docs/screenshots/quick-start-continuity-desktop.jpg
new file mode 100644
index 00000000..bd395892
Binary files /dev/null and b/docs/screenshots/quick-start-continuity-desktop.jpg differ
diff --git a/docs/screenshots/quick-start-continuity-mobile.jpg b/docs/screenshots/quick-start-continuity-mobile.jpg
new file mode 100644
index 00000000..157bc943
Binary files /dev/null and b/docs/screenshots/quick-start-continuity-mobile.jpg differ
diff --git a/frontend/src/app/app.test.tsx b/frontend/src/app/app.test.tsx
index 166a14c9..c85cfd89 100644
--- a/frontend/src/app/app.test.tsx
+++ b/frontend/src/app/app.test.tsx
@@ -89,7 +89,7 @@ describe('AppRoutes authentication boundary', () => {
     )
   })
 
-  it('redirects a guest before rendering a protected product page and preserves its return path', async () => {
+  it('redirects a guest before rendering Quick Start and preserves its return path', async () => {
     render(
       <GuestAuthSession>
         <MemoryRouter initialEntries={['/quick-start?draft=1#setup']}>
@@ -104,7 +104,7 @@ describe('AppRoutes authentication boundary', () => {
         '/?account=login&returnTo=%2Fquick-start%3Fdraft%3D1%23setup',
       ),
     )
-    expect(screen.queryByRole('heading', { name: /开始一条可追踪的制作流程/ })).toBeNull()
+    expect(screen.queryByRole('heading', { name: '想做一个什么角色？' })).toBeNull()
   })
 
   it('redirects a guest from the PlayTest entry and preserves that return path', async () => {
@@ -161,13 +161,13 @@ describe('AppRoutes authentication boundary', () => {
       </AuthSessionProvider>,
     )
 
-    expect(screen.queryByRole('heading', { name: /开始一条可追踪的制作流程/ })).toBeNull()
+    expect(screen.queryByRole('heading', { name: '想做一个什么角色？' })).toBeNull()
     expect(screen.getByTestId('location').textContent).toBe('/quick-start')
 
     const restoredTokens = await baseApis.refresh('stored-refresh-token')
     await act(async () => resolveRefresh(restoredTokens))
 
-    expect(await screen.findByRole('heading', { name: /开始一条可追踪的制作流程/ })).toBeTruthy()
+    expect(await screen.findByRole('heading', { name: '想做一个什么角色？' })).toBeTruthy()
   })
 
   it('renders protected product pages for an authenticated session', async () => {
@@ -179,7 +179,7 @@ describe('AppRoutes authentication boundary', () => {
       </AuthenticatedAuthSession>,
     )
 
-    expect(await screen.findByRole('heading', { name: /开始一条可追踪的制作流程/ })).toBeTruthy()
+    expect(await screen.findByRole('heading', { name: '想做一个什么角色？' })).toBeTruthy()
   })
 
   it('tells the user when restoring the session fails instead of becoming a silent guest', async () => {
diff --git a/frontend/src/pages/quick-start/index.test.tsx b/frontend/src/pages/quick-start/index.test.tsx
index 626a3907..9868b59a 100644
--- a/frontend/src/pages/quick-start/index.test.tsx
+++ b/frontend/src/pages/quick-start/index.test.tsx
@@ -1,5 +1,5 @@
 import { StrictMode } from 'react'
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { MemoryRouter, Route, Routes, useLocation } from 'react-router'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
@@ -8,7 +8,10 @@ import type { WorkflowRun } from '@/entities'
 import type { ExportPackageModel } from '@/features/export-package'
 import { QuickStartPage } from './index'
 
-afterEach(cleanup)
+afterEach(() => {
+  cleanup()
+  vi.useRealTimers()
+})
 
 function workflow(nodes: WorkflowRun['nodes'], id = 'run-1'): WorkflowRun {
   return { id, projectId: 'project-1', version: 1, storageStatus: 'active', nodes }
@@ -144,14 +147,76 @@ function renderAt(path: string, service: QuickStartEntryService) {
       <Routes>
         <Route path="/quick-start" element={<QuickStartPage service={service} />} />
         <Route path="/quick-start/:runId" element={<QuickStartPage service={service} />} />
+        <Route path="/projects/:projectId/assets" element={<PlaytestLocation />} />
         <Route path="/playtest/:characterId/:outfitId" element={<PlaytestLocation />} />
       </Routes>
     </MemoryRouter>,
   )
 }
 
+function renderStateFixture(
+  state:
+    | 'template-generating'
+    | 'template-selecting'
+    | 'first-generating'
+    | 'first-selecting'
+    | 'action-generating'
+    | 'complete',
+) {
+  const candidateUrls = [
+    'https://example.test/character-1.png',
+    'https://example.test/character-2.png',
+    'https://example.test/character-3.png',
+  ]
+  const firstFrames = candidateUrls.map((_, index) => ({
+    index,
+    imageUrl: `https://example.test/first-${index + 1}.png`,
+    durationMs: 80,
+  }))
+  const actionFrames = Array.from({ length: 8 }, (_, index) => ({
+    index,
+    imageUrl: `https://example.test/action-${index + 1}.png`,
+    durationMs: 80,
+  }))
+
+  if (state === 'template-generating') {
+    return renderAt(
+      '/quick-start/run-1',
+      serviceFor(workflow(setupAndTemplate({ phase: 'generating' }))),
+    )
+  }
+  if (state === 'template-selecting') {
+    const run = workflow(setupAndTemplate())
+    return renderAt(
+      '/quick-start/run-1',
+      serviceFor(run, { getTemplateCandidates: vi.fn(async () => candidateUrls) }),
+    )
+  }
+  if (state === 'first-generating') {
+    return renderAt(
+      '/quick-start/run-1',
+      serviceFor(actionWorkflow({ firstStatus: 'active', firstPhase: 'generating' })),
+    )
+  }
+  if (state === 'first-selecting') {
+    const run = actionWorkflow({ firstStatus: 'active', firstPhase: 'selecting' })
+    return renderAt(
+      '/quick-start/run-1',
+      serviceFor(run, { getFirstFrameCandidates: vi.fn(async () => firstFrames) }),
+    )
+  }
+  if (state === 'action-generating') {
+    return renderAt('/quick-start/run-1', serviceFor(actionWorkflow({ fullStatus: 'active' })))
+  }
+  const run = actionWorkflow({ fullStatus: 'passed', reviewStatus: 'passed' })
+  return renderAt(
+    '/quick-start/run-1',
+    serviceFor(run, { getActionFrames: vi.fn(async () => actionFrames) }),
+  )
+}
+
 describe('QuickStartPage', () => {
-  it('按当前 Run 完成度显示统一导出入口', async () => {
+  it('keeps the main export capability available in the conversation UI', async () => {
     const run = workflow(setupAndTemplate({ selectedImageUrl: '/master.png' }))
     const model: ExportPackageModel = {
       stage: 'character',
@@ -171,18 +236,507 @@ describe('QuickStartPage', () => {
     expect(await screen.findByRole('button', { name: '导出角色母版' })).toBeTruthy()
   })
 
-  it('keeps the entry and run canvases at least viewport height', async () => {
+  it('reserves the fixed app header height before the creation entry', () => {
     const entry = renderAt('/quick-start', serviceFor(null))
+    const entrySection = entry.getByLabelText('创作指令').closest('section')
+
+    expect(entrySection?.className).toContain('min-h-[100dvh]')
+    expect(entrySection?.className).toContain('pt-14')
+  })
+
+  it('uses a centered creation desk with style prompts before the composer', () => {
+    const entry = renderAt('/quick-start', serviceFor(null))
+    const entrySection = entry.getByLabelText('创作指令').closest('section')
+    const entryLayout = entrySection?.querySelector('[data-layout="quick-start-entry"]')
+    const composer = entrySection?.querySelector('[data-layout="quick-start-composer"]')
+    const starters = entrySection?.querySelector('[data-layout="quick-start-starters"]')
+
+    expect(entryLayout?.className).toContain('min-h-[calc(100dvh-3.5rem)]')
+    expect(entryLayout?.className).toContain('grid-rows-[1fr_auto]')
+    expect(composer?.className).toContain('max-w-3xl')
+    expect(composer?.querySelector('form')).toBeTruthy()
+    expect(composer?.querySelector('form')?.className).toContain('sm:grid-cols-[1fr_auto_auto]')
+    expect(starters).toBeTruthy()
     expect(
-      entry.getByRole('heading', { name: /用一句角色设定/u }).closest('section')?.className,
-    ).toContain('min-h-screen')
+      Boolean(
+        starters &&
+        composer &&
+        starters.compareDocumentPosition(composer) & Node.DOCUMENT_POSITION_FOLLOWING,
+      ),
+    ).toBe(true)
+  })
+
+  it('removes non-actionable explanatory copy from the creation workspace', () => {
+    renderAt('/quick-start', serviceFor(null))
+
+    expect(screen.queryByText('QUICK START / CREATE CHARACTER')).toBeNull()
+    expect(screen.queryByText(/用一句角色设定/u)).toBeNull()
+    expect(screen.queryByText('AI 快捷创作')).toBeNull()
+    expect(screen.queryByText('文字创建')).toBeNull()
+    expect(screen.queryByText('角色图生成后仍需人工选择候选')).toBeNull()
+  })
+
+  it('reuses the shared subtitle exit-before-enter timing in the original heading', () => {
+    vi.useFakeTimers()
+    const entry = renderAt('/quick-start', serviceFor(null))
+    const heading = screen.getByRole('heading', { name: '想做一个什么角色？' })
+    const cycle = () => entry.container.querySelector<HTMLElement>('[data-copy-phase]')
+
+    expect(entry.container.querySelector('[data-layout="quick-start-role-idea"]')).toBeNull()
+    expect(heading.textContent).toBe('想做一个什么角色？')
+
+    act(() => vi.advanceTimersByTime(2_399))
+    expect(heading.textContent).toBe('想做一个什么角色？')
+
+    act(() => vi.advanceTimersByTime(1))
+    expect(cycle()?.dataset.copyPhase).toBe('exiting')
+    expect(heading.textContent).toBe('想做一个什么角色？')
+
+    act(() => vi.advanceTimersByTime(460))
+    expect(cycle()?.dataset.copyPhase).toBe('entering')
+    expect(heading.textContent).toBe('试试银色卷发、戴星形单片眼镜的裁缝')
+
+    act(() => vi.advanceTimersByTime(4_200))
+    expect(heading.textContent).toContain('长着鹿角、披苔藓斗篷的邮差')
+
+    act(() => vi.advanceTimersByTime(4_200 * 7))
+    expect(heading.textContent).toBe('试试银色卷发、戴星形单片眼镜的裁缝')
+    expect(heading.textContent).not.toContain('想做一个什么角色？')
+  })
+
+  it('animates back to the persistent default heading while the user writes', () => {
+    vi.useFakeTimers()
+    const entry = renderAt('/quick-start', serviceFor(null))
+    const heading = screen.getByRole('heading', { name: '想做一个什么角色？' })
+    const cycle = () => entry.container.querySelector<HTMLElement>('[data-copy-phase]')
+
+    act(() => vi.advanceTimersByTime(3_400))
+    expect(heading.textContent).toContain('银色卷发、戴星形单片眼镜的裁缝')
+
+    fireEvent.change(screen.getByRole('textbox', { name: '创作指令' }), {
+      target: { value: '戴银色面具的游侠' },
+    })
+    expect(cycle()?.dataset.copyMotionMode).toBe('characters')
+    expect(cycle()?.dataset.copyPhase).toBe('exiting')
+    expect(heading.textContent).toContain('银色卷发、戴星形单片眼镜的裁缝')
+
+    act(() => vi.advanceTimersByTime(460))
+    expect(cycle()?.dataset.copyPhase).toBe('entering')
+    expect(heading.textContent).toBe('用文字塑造你的角色……')
+
+    act(() => vi.advanceTimersByTime(10_000))
+    expect(heading.textContent).toBe('用文字塑造你的角色……')
+  })
+
+  it('keeps style prompt space stable while dissolving the cards once creation begins', () => {
+    const entry = renderAt('/quick-start', serviceFor(null))
+    const entrySection = entry.getByLabelText('创作指令').closest('section')
+    const starters = entrySection?.querySelector('[data-layout="quick-start-starters"]')
+
+    expect(screen.getByRole('heading', { name: '想做一个什么角色？' })).toBeTruthy()
+    expect(starters?.querySelectorAll('img')).toHaveLength(0)
+    expect(screen.getByRole('button', { name: /16-bit 日式 RPG/u })).toBeTruthy()
+    expect(screen.getByRole('button', { name: /暗黑哥特像素/u })).toBeTruthy()
+    expect(screen.getByRole('button', { name: /温暖手绘像素/u })).toBeTruthy()
+    expect(screen.getByRole('button', { name: '像素守夜人' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: '轻装信使' })).toBeTruthy()
+
+    fireEvent.change(screen.getByRole('textbox', { name: '创作指令' }), {
+      target: { value: '戴银色面具的游侠' },
+    })
+    expect(entrySection?.querySelector('[data-layout="quick-start-starters"]')).toBe(starters)
+    expect(starters?.getAttribute('data-presence')).toBe('hidden')
+    expect(starters?.getAttribute('aria-hidden')).toBe('true')
+    expect(screen.queryByRole('button', { name: /暗黑哥特像素/u })).toBeNull()
+  })
+
+  it('keeps the original Quick Start prompt shortcuts functional', () => {
+    const view = renderAt('/quick-start', serviceFor(null))
+    fireEvent.click(screen.getByRole('button', { name: '像素守夜人' }))
+    expect((screen.getByRole('textbox', { name: '创作指令' }) as HTMLTextAreaElement).value).toBe(
+      '一位提着风灯、披深色斗篷的像素守夜人',
+    )
+
+    view.unmount()
+    renderAt('/quick-start', serviceFor(null))
+    fireEvent.click(screen.getByRole('button', { name: '轻装信使' }))
+    expect((screen.getByRole('textbox', { name: '创作指令' }) as HTMLTextAreaElement).value).toBe(
+      '轻装信使，侧视像素风，轮廓清晰，动作轻快',
+    )
+  })
+
+  it('keeps the entry and run canvases at least viewport height', async () => {
+    const entry = renderAt('/quick-start', serviceFor(null))
+    expect(entry.getByLabelText('创作指令').closest('section')?.className).toContain(
+      'min-h-[100dvh]',
+    )
 
     entry.unmount()
     const run = workflow(setupAndTemplate())
     const runView = renderAt('/quick-start/run-1', serviceFor(run))
+    expect((await runView.findByTestId('quick-start-run')).closest('section')?.className).toContain(
+      'min-h-screen',
+    )
+  })
+
+  it('continues the creation desk instead of switching to a workflow dashboard', async () => {
+    renderAt('/quick-start/run-1', serviceFor(workflow(setupAndTemplate())))
+
+    const runLayout = await screen.findByTestId('quick-start-run')
+    expect(runLayout.getAttribute('data-layout')).toBe('agent-shell')
+    expect(runLayout.querySelector('[data-layout="quick-start-scroll-region"]')).toBeTruthy()
+    expect(screen.getByTestId('quick-start-composer').getAttribute('data-position')).toBe(
+      'floating',
+    )
+    expect(runLayout.querySelector('aside')).toBeNull()
+    expect(screen.getByRole('textbox', { name: '继续描述你的想法' })).toBeTruthy()
+    expect(screen.queryByText(/QUICK START \/ RUN/u)).toBeNull()
+    expect(screen.queryByText('CURRENT STATUS')).toBeNull()
+    expect(screen.queryByText('WORKFLOW RUN')).toBeNull()
+    expect(screen.queryByText(/STEPS PASSED/u)).toBeNull()
+    expect(screen.getByRole('button', { name: '中断自动制作' })).toBeTruthy()
+  })
+
+  it('presents Agent replies as restrained product copy without display typography or avatars', async () => {
+    renderStateFixture('action-generating')
+
+    const transcript = await screen.findByTestId('quick-start-transcript')
+    const agentCopies = Array.from(transcript.querySelectorAll<HTMLElement>('[data-agent-copy]'))
+    const standaloneAvatar = Array.from(transcript.querySelectorAll('span')).find(
+      (element) => element.textContent === 'W',
+    )
+
+    expect(agentCopies.length).toBeGreaterThan(0)
+    expect(
+      agentCopies.every((copy) => {
+        return (
+          copy.className.includes('font-sans') && !copy.querySelector('[data-copy-motion-mode]')
+        )
+      }),
+    ).toBe(true)
+    expect(standaloneAvatar).toBeUndefined()
+  })
+
+  it('keeps one persistent Agent shell with a floating composer outside the scrolling transcript', async () => {
+    renderStateFixture('first-selecting')
+
+    const runLayout = await screen.findByTestId('quick-start-run')
+    const transcript = await screen.findByTestId('quick-start-transcript')
+    const composer = screen.getByTestId('quick-start-composer')
+    const scrollRegion = transcript.closest('[data-layout="quick-start-scroll-region"]')
+    const agentTurns = Array.from(transcript.querySelectorAll<HTMLElement>('[data-agent-turn]'))
+    const userTurns = Array.from(transcript.querySelectorAll<HTMLElement>('[data-user-turn]'))
+
+    expect(runLayout.getAttribute('data-layout')).toBe('agent-shell')
+    expect(scrollRegion).toBeTruthy()
+    expect(scrollRegion?.contains(composer)).toBe(false)
+    expect(composer.getAttribute('data-position')).toBe('floating')
+    expect(composer.className).toContain('absolute')
+    expect(agentTurns.length).toBeGreaterThanOrEqual(2)
+    expect(userTurns.length).toBeGreaterThanOrEqual(2)
+    expect(transcript.querySelector('[data-agent-identity]')).toBeNull()
+  })
+
+  it('keeps the composer shape stable while the Agent is working', async () => {
+    renderStateFixture('action-generating')
+
+    const composer = await screen.findByTestId('quick-start-composer')
+    const send = screen.getByRole('button', { name: '发送' })
+
+    expect(composer).toBeTruthy()
+    expect(send.hasAttribute('disabled')).toBe(true)
+  })
+
+  it('scrolls only the transcript region when new Agent output arrives', async () => {
+    const scrollTo = vi.fn()
+    const scrollIntoView = vi.fn()
+    const previousScrollTo = HTMLElement.prototype.scrollTo
+    const previousScrollIntoView = HTMLElement.prototype.scrollIntoView
+    HTMLElement.prototype.scrollTo = scrollTo
+    HTMLElement.prototype.scrollIntoView = scrollIntoView
+
+    try {
+      renderStateFixture('template-selecting')
+      await screen.findAllByRole('button', { name: /选择角色方案/u })
+
+      expect(scrollTo).toHaveBeenCalled()
+      expect(scrollIntoView).not.toHaveBeenCalled()
+    } finally {
+      HTMLElement.prototype.scrollTo = previousScrollTo
+      HTMLElement.prototype.scrollIntoView = previousScrollIntoView
+    }
+  })
+
+  it('keeps each generated artifact inside the Agent turn that describes it', async () => {
+    renderStateFixture('template-selecting')
+
+    const transcript = await screen.findByTestId('quick-start-transcript')
+    await screen.findAllByRole('button', { name: /选择角色方案/u })
+    const roleTurn = transcript.querySelector<HTMLElement>('[data-agent-turn="character-template"]')
+    const choices = Array.from(roleTurn?.querySelectorAll('[data-asset-choice="true"]') ?? [])
+
+    expect(roleTurn).toBeTruthy()
+    expect(roleTurn?.querySelector('[data-agent-identity]')).toBeNull()
+    expect(roleTurn?.querySelector('[data-agent-copy]')).toBeTruthy()
+    expect(choices).toHaveLength(3)
     expect(
-      (await runView.findByRole('heading', { name: '像素骑士' })).closest('section')?.className,
-    ).toContain('min-h-screen')
+      Array.from(transcript.querySelectorAll('[data-asset-choice="true"]')).every((asset) =>
+        Boolean(asset.closest('[data-agent-turn]')),
+      ),
+    ).toBe(true)
+  })
+
+  it.each([
+    ['template-generating', '角色图生成画布'],
+    ['first-generating', '动作首帧生成画布'],
+    ['action-generating', '完整动作生成画布'],
+  ] as const)(
+    'reserves an animated dot-matrix canvas while %s is generating',
+    async (state, label) => {
+      renderStateFixture(state)
+
+      const canvas = await screen.findByRole('img', { name: label })
+      expect(canvas.getAttribute('data-generation-state')).toBe('generating')
+      expect(canvas.getAttribute('data-generation-motion')).toBe('continuous')
+      expect(canvas.querySelectorAll('[data-generation-dot]').length).toBeGreaterThan(20)
+      expect(canvas.querySelector('[data-generation-silhouette]')).toBeNull()
+    },
+  )
+
+  it.each([
+    [
+      workflow(setupAndTemplate({ phase: 'generating' })),
+      '角色生成进度',
+      ['勾勒角色轮廓', '给衣服配颜色', '把发型画清楚', '添上表情', '处理一下光影', '补齐画面细节'],
+    ],
+    [
+      actionWorkflow({ firstStatus: 'active', firstPhase: 'generating' }),
+      '动作首帧生成进度',
+      [
+        '摆好动作姿态',
+        '调整手脚位置',
+        '让重心自然一点',
+        '拉开姿态的区别',
+        '保持角色样子',
+        '补上动作细节',
+      ],
+    ],
+    [
+      actionWorkflow({ fullStatus: 'active' }),
+      '完整动作生成进度',
+      [
+        '把动作连起来',
+        '补上中间的变化',
+        '理顺每一帧的节奏',
+        '检查手脚的衔接',
+        '让起落自然一点',
+        '调整动作幅度',
+      ],
+    ],
+  ] as const)('cycles generation companionship copy for $label', async (run, label, messages) => {
+    vi.useFakeTimers()
+    const view = renderAt('/quick-start/run-1', serviceFor(run))
+
+    await act(async () => undefined)
+    const progress = screen.getByLabelText(label)
+    expect(progress.getAttribute('data-copy-motion-mode')).toBe('characters')
+    expect(progress.className).toContain('quick-start-generation-shimmer')
+    expect(progress.textContent).toBe(messages[0])
+    expect(progress.getAttribute('data-copy-phase')).toBe('entering')
+
+    await act(async () => vi.advanceTimersByTime(760))
+    expect(progress.getAttribute('data-copy-phase')).toBe('resting')
+
+    for (const [messageIndex, message] of messages.slice(1).entries()) {
+      const timeUntilNextMessage = messageIndex === 0 ? 7_239 : 7_999
+      await act(async () => vi.advanceTimersByTime(timeUntilNextMessage))
+      expect(progress.textContent).not.toBe(message)
+      await act(async () => vi.advanceTimersByTime(1))
+      expect(progress.textContent).toBe(message)
+    }
+
+    await act(async () => vi.advanceTimersByTime(8_000))
+    expect(progress.textContent).toBe(messages[0])
+
+    expect(
+      view.container.querySelector('[data-agent-turn][data-current-turn="true"] [data-agent-copy]'),
+    ).toBeNull()
+  })
+
+  it('keeps selection and completed replies static instead of cycling subtitles', async () => {
+    const selecting = renderStateFixture('template-selecting')
+    await screen.findAllByRole('button', { name: /选择角色方案/u })
+    expect(selecting.container.querySelector('[data-generation-progress]')).toBeNull()
+    selecting.unmount()
+
+    const complete = renderStateFixture('complete')
+    await screen.findByRole('img', { name: '完整动作预览' })
+    expect(complete.container.querySelector('[data-generation-progress]')).toBeNull()
+  })
+
+  it('reveals generated candidate frames with staggered motion', async () => {
+    renderStateFixture('template-selecting')
+
+    const cards = await screen.findAllByRole('button', { name: /选择角色方案/u })
+    expect(cards).toHaveLength(3)
+    expect(cards.every((card) => card.dataset.assetChoice === 'true')).toBe(true)
+    expect(cards.every((card) => card.querySelectorAll('[data-asset-frame]').length === 1)).toBe(
+      true,
+    )
+    expect(cards.every((card) => card.dataset.reveal === 'card')).toBe(true)
+    expect(cards.map((card) => card.style.getPropertyValue('--reveal-index'))).toEqual([
+      '0',
+      '1',
+      '2',
+    ])
+    expect(cards.every((card) => card.querySelector('img'))).toBeTruthy()
+  })
+
+  it('matches generated cards to the composer radius and keeps image surfaces free of labels', async () => {
+    renderStateFixture('template-selecting')
+
+    const cards = await screen.findAllByRole('button', { name: /选择角色方案/u })
+
+    expect(cards.every((card) => card.className.includes('rounded-2xl'))).toBe(true)
+    expect(cards.every((card) => card.textContent === '')).toBe(true)
+  })
+
+  it('presents three equal candidate frames without inventing a preferred result', async () => {
+    renderStateFixture('template-selecting')
+
+    const choices = await screen.findAllByRole('button', { name: /选择角色方案/u })
+    const resultLayout = choices[0]?.parentElement
+
+    expect(resultLayout?.getAttribute('data-layout')).toBe('agent-result-set')
+    expect(resultLayout?.className).toContain('grid-cols-3')
+    expect(choices.every((choice) => choice.getAttribute('data-result-priority') === null)).toBe(
+      true,
+    )
+    expect(choices.every((choice) => !choice.className.includes('row-span-2'))).toBe(true)
+  })
+
+  it.each([
+    ['template-generating', '角色图生成画布'],
+    ['first-selecting', '动作首帧候选 1'],
+    ['complete', '完整动作预览'],
+  ] as const)('keeps %s on the first-round asset frame grid', async (state, label) => {
+    const view = renderStateFixture(state)
+    const asset = await screen.findByRole('img', { name: label })
+    const frameGrid = asset.closest('[data-layout="agent-result-set"]')
+
+    expect(frameGrid?.className).toContain('max-w-2xl')
+    expect(frameGrid?.className).toContain('grid-cols-3')
+    view.unmount()
+  })
+
+  it('grows a short conversation from the persistent composer and distinguishes the current turn', async () => {
+    renderStateFixture('action-generating')
+
+    const transcript = await screen.findByTestId('quick-start-transcript')
+    const turns = Array.from(transcript.querySelectorAll<HTMLElement>('[data-agent-turn]'))
+
+    expect(transcript.className).toContain('min-h-full')
+    expect(transcript.className).toContain('content-end')
+    expect(turns.slice(0, -1).every((turn) => turn.dataset.currentTurn === 'false')).toBe(true)
+    expect(turns.at(-1)?.dataset.currentTurn).toBe('true')
+  })
+
+  it('hands the creation entry off to the generating canvas instead of hard-cutting routes', async () => {
+    vi.useFakeTimers()
+    const createdRun = workflow(setupAndTemplate({ phase: 'generating' }), 'run-created')
+    const service = serviceFor(null, {
+      runId: 'run-created',
+      getWorkflow: vi.fn(() => createdRun),
+      resume: vi.fn(async () => createdRun),
+    })
+    renderAt('/quick-start', service)
+
+    fireEvent.change(screen.getByLabelText('创作指令'), {
+      target: { value: '提着风灯的森林守夜人' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: '生成角色' }))
+    await act(async () => undefined)
+
+    const entry = screen.getByLabelText('创作指令').closest('[data-layout="quick-start-entry"]')
+    expect(entry?.getAttribute('data-transition')).toBe('leaving')
+    expect(
+      entry?.querySelector('[data-layout="quick-start-starters"]')?.getAttribute('data-presence'),
+    ).toBe('hidden')
+    expect(screen.queryByTestId('quick-start-transcript')).toBeNull()
+
+    await act(async () => vi.advanceTimersByTime(459))
+    expect(screen.queryByTestId('quick-start-transcript')).toBeNull()
+
+    await act(async () => vi.advanceTimersByTime(1))
+    expect(screen.getByRole('img', { name: '角色图生成画布' }).getAttribute('data-reveal')).toBe(
+      'generation-canvas',
+    )
+  })
+
+  it('keeps earlier turns visible while the agent conversation moves downward', async () => {
+    renderStateFixture('first-selecting')
+
+    await screen.findByLabelText(/已生成 3 个动作起始姿态。 选择一个起始姿态，随后生成完整动作。/u)
+    const transcript = await screen.findByTestId('quick-start-transcript')
+    const topLevelText = Array.from(transcript.children).map(
+      (element) =>
+        element.querySelector('[data-agent-copy] [aria-label]')?.getAttribute('aria-label') ??
+        element.textContent ??
+        '',
+    )
+    const roleTurnIndex = topLevelText.findIndex((text) => text.includes('角色方案已确认'))
+    const userActionIndex = topLevelText.findIndex((text) => text.includes('挥手'))
+    const firstFrameTurnIndex = topLevelText.findIndex((text) =>
+      text.includes('已生成 3 个动作起始姿态'),
+    )
+    expect(roleTurnIndex).toBeGreaterThanOrEqual(0)
+    expect(roleTurnIndex).toBeLessThan(userActionIndex)
+    expect(userActionIndex).toBeLessThan(firstFrameTurnIndex)
+    expect(screen.getByRole('img', { name: '已选择的角色' })).toBeTruthy()
+    expect(screen.getAllByRole('img', { name: /动作首帧候选/u })).toHaveLength(3)
+  })
+
+  it('keeps the candidate selected until the action description is sent', async () => {
+    vi.useFakeTimers()
+    const selectingRun = workflow(setupAndTemplate())
+    const nextRun = actionWorkflow({ firstStatus: 'active', firstPhase: 'generating' })
+    const service = serviceFor(selectingRun, {
+      getTemplateCandidates: vi.fn(async () => [
+        'https://example.test/character-1.png',
+        'https://example.test/character-2.png',
+        'https://example.test/character-3.png',
+      ]),
+      confirmCandidate: vi.fn(async () => nextRun),
+    })
+    renderAt('/quick-start/run-1', service)
+
+    await act(async () => undefined)
+    const candidate = screen.getByRole('button', { name: /选择角色方案 2/u })
+    fireEvent.click(candidate)
+    await act(async () => undefined)
+
+    expect(candidate.getAttribute('aria-pressed')).toBe('true')
+    expect(screen.getByTestId('quick-start-transcript').textContent).not.toContain(
+      '你选择了角色方案 2',
+    )
+    expect(screen.getByPlaceholderText('描述这个角色接下来要做的动作…')).toBeTruthy()
+    expect(
+      screen.getByRole('button', { name: '确认选择，继续下一步' }).hasAttribute('disabled'),
+    ).toBe(false)
+
+    fireEvent.change(screen.getByLabelText('继续描述你的想法'), {
+      target: { value: '转身挥动风灯' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: '确认选择，继续下一步' }))
+    await act(async () => undefined)
+
+    const transcript = screen.getByTestId('quick-start-transcript').textContent ?? ''
+    expect(transcript).not.toContain('你选择了')
+    expect(transcript).toContain('摆好动作姿态')
+    expect(service.confirmCandidate).toHaveBeenCalledWith(
+      'https://example.test/character-2.png',
+      '转身挥动风灯',
+    )
   })
 
   it('keeps the natural-language creation entry visible when no run is selected', () => {
@@ -192,11 +746,12 @@ describe('QuickStartPage', () => {
       </MemoryRouter>,
     )
 
-    expect(screen.getByRole('heading', { name: /用一句角色设定/u })).toBeTruthy()
-    fireEvent.click(screen.getByRole('button', { name: /像素守夜人/u }))
-    expect((screen.getByRole('textbox') as HTMLTextAreaElement).value).toContain('像素守夜人')
-    fireEvent.click(screen.getByRole('button', { name: '轻装信使' }))
-    expect((screen.getByRole('textbox') as HTMLTextAreaElement).value).toContain('轻装信使')
+    expect(screen.getByRole('textbox', { name: '创作指令' })).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: /16-bit 日式 RPG/u }))
+    expect((screen.getByRole('textbox') as HTMLTextAreaElement).value).toBe(
+      '16-bit 日式 RPG 像素风，清晰轮廓，明亮配色',
+    )
+    expect(screen.queryByRole('button', { name: /暗黑哥特像素/u })).toBeNull()
   })
 
   it('shows first-frame confirmation instead of stale character candidates after a template is confirmed', async () => {
@@ -209,9 +764,11 @@ describe('QuickStartPage', () => {
     })
     const view = renderAt('/quick-start/run-1', service)
 
-    await waitFor(() => {
-      expect(view.getByRole('heading', { name: '选择动作首帧' })).toBeTruthy()
-    })
+    await waitFor(() =>
+      expect(
+        view.container.querySelector('[data-agent-copy][aria-label^="已生成 3 个动作起始姿态"]'),
+      ).toBeTruthy(),
+    )
     const firstFrame = view.getByRole('img', { name: '动作首帧候选 1' })
     expect(firstFrame.getAttribute('loading')).toBe('eager')
     expect(firstFrame.getAttribute('decoding')).toBe('async')
@@ -223,21 +780,21 @@ describe('QuickStartPage', () => {
     const service = serviceFor(null)
     const view = renderAt('/quick-start', service)
 
-    fireEvent.click(screen.getByRole('button', { name: /像素守夜人/u }))
-    fireEvent.click(screen.getByRole('button', { name: '开始生成' }))
+    fireEvent.click(screen.getByRole('button', { name: /16-bit 日式 RPG/u }))
+    fireEvent.click(screen.getByRole('button', { name: '生成角色' }))
     await waitFor(() =>
-      expect(service.start).toHaveBeenCalledWith(expect.stringContaining('像素守夜人')),
+      expect(service.start).toHaveBeenCalledWith('16-bit 日式 RPG 像素风，清晰轮廓，明亮配色'),
     )
     expect(service.open).not.toHaveBeenCalled()
 
     view.unmount()
     renderAt('/quick-start', service)
     const file = new File(['pixels'], 'hero.png', { type: 'image/png' })
-    fireEvent.click(screen.getByRole('button', { name: '上传角色母版' }))
+    fireEvent.click(screen.getByRole('button', { name: '添加母版' }))
     fireEvent.change(screen.getByLabelText('上传角色母版'), { target: { files: [file] } })
     expect(screen.getByText('hero.png')).toBeTruthy()
     fireEvent.change(screen.getByLabelText('创作指令'), { target: { value: '挥手' } })
-    fireEvent.click(screen.getByRole('button', { name: '开始生成' }))
+    fireEvent.click(screen.getByRole('button', { name: '生成角色' }))
     await waitFor(() =>
       expect(service.startWithUploadedTemplate).toHaveBeenCalledWith(
         file,
@@ -261,7 +818,7 @@ describe('QuickStartPage', () => {
     )
 
     fireEvent.change(screen.getByLabelText('创作指令'), { target: { value: '像素骑士' } })
-    fireEvent.click(screen.getByRole('button', { name: '开始生成' }))
+    fireEvent.click(screen.getByRole('button', { name: '生成角色' }))
 
     await waitFor(() => expect(service.resume).toHaveBeenCalled())
     expect(service.open).not.toHaveBeenCalled()
@@ -278,10 +835,23 @@ describe('QuickStartPage', () => {
     fireEvent.click(screen.getByRole('button', { name: '移除图片' }))
     expect(screen.queryByText('hero.png')).toBeNull()
     fireEvent.change(screen.getByLabelText('创作指令'), { target: { value: '骑士' } })
-    fireEvent.click(screen.getByRole('button', { name: '开始生成' }))
+    fireEvent.click(screen.getByRole('button', { name: '生成角色' }))
     expect((await screen.findByRole('alert')).textContent).toContain('服务繁忙')
   })
 
+  it('keeps the uploaded template controls in the single-line composer', () => {
+    renderAt('/quick-start', serviceFor(null))
+    const file = new File(['pixels'], 'hero.png', { type: 'image/png' })
+
+    fireEvent.change(screen.getByLabelText('上传角色母版'), { target: { files: [file] } })
+
+    const composer = screen.getByLabelText('创作指令').closest('form')
+    expect(screen.getByLabelText('创作指令').tagName).toBe('TEXTAREA')
+    expect(composer?.textContent).toContain('hero.png')
+    expect(screen.getByRole('button', { name: '移除图片' }).closest('form')).toBe(composer)
+    expect(composer?.querySelector('[data-layout="quick-start-attachment-row"]')).toBeNull()
+  })
+
   it('adds an action to an existing character and reports submission errors', async () => {
     const service = serviceFor(null)
     const view = renderAt('/quick-start?characterId=character-1&outfitId=outfit-1', service)
@@ -309,7 +879,7 @@ describe('QuickStartPage', () => {
     renderAt('/quick-start/missing', service)
     expect(await screen.findByRole('heading', { name: '无法恢复这次创作' })).toBeTruthy()
     fireEvent.click(screen.getByRole('button', { name: '返回快速开始' }))
-    expect(screen.getByRole('heading', { name: /用一句角色设定/u })).toBeTruthy()
+    expect(screen.getByRole('textbox', { name: '创作指令' })).toBeTruthy()
   })
 
   it('opens a recoverable run once and accepts its session update', async () => {
@@ -325,7 +895,7 @@ describe('QuickStartPage', () => {
     expect(service.resume).toHaveBeenCalledWith()
   })
 
-  it('selects, confirms, and regenerates a character candidate', async () => {
+  it('selects a character first, then submits its action through the conversation composer', async () => {
     const run = workflow(setupAndTemplate())
     const service = serviceFor(run, {
       getTemplateCandidates: vi.fn(async () => ['https://example.test/candidate.png']),
@@ -335,7 +905,13 @@ describe('QuickStartPage', () => {
     renderAt('/quick-start/run-1', service)
     const candidate = await screen.findByRole('img', { name: '角色图候选 1' })
     fireEvent.click(candidate)
-    fireEvent.change(screen.getByLabelText(/动作描述/u), { target: { value: '挥手' } })
+
+    expect(service.confirmCandidate).not.toHaveBeenCalled()
+    expect(
+      screen.getByRole('button', { name: '选择角色方案 1' }).getAttribute('aria-pressed'),
+    ).toBe('true')
+
+    fireEvent.change(screen.getByLabelText('继续描述你的想法'), { target: { value: '挥手' } })
     fireEvent.click(screen.getByRole('button', { name: '确认选择，继续下一步' }))
     await waitFor(() =>
       expect(service.confirmCandidate).toHaveBeenCalledWith(
@@ -344,11 +920,23 @@ describe('QuickStartPage', () => {
       ),
     )
     expect((await screen.findByRole('alert')).textContent).toContain('候选确认失败')
-    fireEvent.click(screen.getByRole('button', { name: '重新生成' }))
+    expect(screen.getByTestId('quick-start-run')).toBeTruthy()
+  })
+
+  it('keeps the original regenerate and new-creation controls reachable', async () => {
+    const run = workflow(setupAndTemplate())
+    const service = serviceFor(run, {
+      getTemplateCandidates: vi.fn(async () => ['https://example.test/candidate.png']),
+      start: vi.fn(async () => Promise.reject(new Error('重新生成失败'))),
+    })
+    renderAt('/quick-start/run-1', service)
+
+    fireEvent.click(await screen.findByRole('button', { name: '重新生成' }))
     await waitFor(() => expect(service.start).toHaveBeenCalledWith('像素骑士'))
     expect((await screen.findByRole('alert')).textContent).toContain('重新生成失败')
+
     fireEvent.click(screen.getByRole('button', { name: '新建一次创作' }))
-    expect(screen.getByRole('heading', { name: /用一句角色设定/u })).toBeTruthy()
+    expect(screen.getByRole('textbox', { name: '创作指令' })).toBeTruthy()
   })
 
   it('confirms a generated first frame before starting the full animation', async () => {
@@ -361,6 +949,7 @@ describe('QuickStartPage', () => {
     })
     renderAt('/quick-start/run-1', service)
     fireEvent.click(await screen.findByRole('img', { name: '动作首帧候选 1' }))
+    expect(service.confirmFirstFrame).not.toHaveBeenCalled()
     fireEvent.click(screen.getByRole('button', { name: '确认首帧，生成完整动作' }))
     await waitFor(() =>
       expect(service.confirmFirstFrame).toHaveBeenCalledWith('https://example.test/first.png'),
@@ -370,20 +959,20 @@ describe('QuickStartPage', () => {
 
   it('renders generating and failed states for both first-frame and full animation tasks', async () => {
     const states = [
-      [actionWorkflow({ firstStatus: 'active', firstPhase: 'generating' }), '正在生成动作首帧'],
+      [actionWorkflow({ firstStatus: 'active', firstPhase: 'generating' }), '动作首帧生成进度'],
       [actionWorkflow({ firstStatus: 'failed', error: '首帧服务失败' }), '动作首帧生成失败'],
-      [actionWorkflow({ fullStatus: 'active' }), '正在生成动作'],
+      [actionWorkflow({ fullStatus: 'active' }), '完整动作生成进度'],
       [actionWorkflow({ fullStatus: 'failed', error: '动作服务失败' }), '动作生成失败'],
     ] as const
 
     for (const [run, label] of states) {
       const view = renderAt('/quick-start/run-1', serviceFor(run))
-      expect((await screen.findAllByText(label, { selector: 'b' })).length).toBeGreaterThan(0)
+      expect(await screen.findByLabelText(new RegExp(label, 'u'))).toBeTruthy()
       view.unmount()
     }
   })
 
-  it('automatically approves a completed animation and opens its Playtest action', async () => {
+  it('saves a completed animation without navigating and exposes both explicit destinations', async () => {
     const run = actionWorkflow({ fullStatus: 'passed', reviewStatus: 'active' })
     const approved = actionWorkflow({ fullStatus: 'passed', reviewStatus: 'passed' })
     const service = serviceFor(run, {
@@ -393,21 +982,51 @@ describe('QuickStartPage', () => {
         { index: 1, imageUrl: 'https://example.test/frame-1.png', durationMs: 80 },
       ]),
     })
-    renderAt('/quick-start/run-1', service)
+    const view = renderAt('/quick-start/run-1', service)
+    await waitFor(() => expect(service.approveReview).toHaveBeenCalledWith())
+    expect(screen.getByTestId('quick-start-run')).toBeTruthy()
+    expect(screen.getByRole('button', { name: '跳转到资产工作台' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: '跳转到 Play Test' })).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: '跳转到资产工作台' }))
+    expect(await screen.findByRole('heading', { name: '/projects/project-1/assets' })).toBeTruthy()
+
+    view.unmount()
+    const approvedService = serviceFor(approved, {
+      getActionFrames: vi.fn(async () => [
+        { index: 0, imageUrl: 'https://example.test/frame-0.png', durationMs: 80 },
+      ]),
+    })
+    renderAt('/quick-start/run-1', approvedService)
+    fireEvent.click(await screen.findByRole('button', { name: '跳转到 Play Test' }))
     expect(
       await screen.findByRole('heading', {
         name: '/playtest/character-1/outfit-1?actionId=action-full',
       }),
     ).toBeTruthy()
-    expect(service.approveReview).toHaveBeenCalledWith()
   })
 
-  it('keeps a completed run recoverable when its character binding is missing', async () => {
+  it('keeps a completed run recoverable when saving fails', async () => {
     const run = actionWorkflow({ fullStatus: 'passed', reviewStatus: 'active' })
+    const approved = actionWorkflow({ fullStatus: 'passed', reviewStatus: 'passed' })
+    const service = serviceFor(run, {
+      approveReview: vi
+        .fn()
+        .mockRejectedValueOnce(new Error('保存失败'))
+        .mockResolvedValue(approved),
+      getActionFrames: vi.fn(async () => [
+        { index: 0, imageUrl: 'https://example.test/frame.png', durationMs: 80 },
+      ]),
+    })
+    renderAt('/quick-start/run-1', service)
+    expect((await screen.findByRole('alert')).textContent).toContain('保存失败')
+    fireEvent.click(screen.getByRole('button', { name: '重新保存' }))
+    await waitFor(() => expect(service.approveReview).toHaveBeenCalledTimes(2))
+  })
+
+  it('keeps the completed run open when Play Test cannot resolve the character binding', async () => {
+    const run = actionWorkflow({ fullStatus: 'passed', reviewStatus: 'passed' })
     const service = serviceFor(run, {
-      approveReview: vi.fn(async () =>
-        actionWorkflow({ fullStatus: 'passed', reviewStatus: 'passed' }),
-      ),
       getCharacterInfo: vi.fn(() => null),
       resolveCharacterInfo: vi.fn(async () => null),
       getActionFrames: vi.fn(async () => [
@@ -415,18 +1034,19 @@ describe('QuickStartPage', () => {
       ]),
     })
     renderAt('/quick-start/run-1', service)
+    fireEvent.click(await screen.findByRole('button', { name: '跳转到 Play Test' }))
     expect((await screen.findByRole('alert')).textContent).toContain('没有找到对应的角色资产')
-    fireEvent.click(screen.getByRole('button', { name: '重新导入预览台' }))
-    await waitFor(() => expect(service.approveReview).toHaveBeenCalledTimes(2))
+    expect(screen.getByTestId('quick-start-run')).toBeTruthy()
   })
 
-  it('interrupts an active run and surfaces interruption failures', async () => {
+  it('keeps the original workflow interruption control reachable in the conversation', async () => {
     const run = actionWorkflow({ fullStatus: 'active' })
     const service = serviceFor(run, {
       interrupt: vi.fn(async () => Promise.reject(new Error('无法中断'))),
     })
     renderAt('/quick-start/run-1', service)
     fireEvent.click(await screen.findByRole('button', { name: '中断自动制作' }))
+    await waitFor(() => expect(service.interrupt).toHaveBeenCalledWith())
     expect((await screen.findByRole('alert')).textContent).toContain('无法中断')
   })
 })
diff --git a/frontend/src/pages/quick-start/index.tsx b/frontend/src/pages/quick-start/index.tsx
index a4517396..7cf3e2ae 100644
--- a/frontend/src/pages/quick-start/index.tsx
+++ b/frontend/src/pages/quick-start/index.tsx
@@ -4,25 +4,28 @@ import {
   useMemo,
   useRef,
   useState,
+  type CSSProperties,
   type ChangeEvent,
   type FormEvent,
+  type ReactNode,
 } from 'react'
+import { ArrowUp, ImageSquare, X } from '@phosphor-icons/react'
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router'
 
 import {
   type ActionFirstFrameWorkflowNode,
   type CharacterTemplateWorkflowNode,
   type WorkflowRun,
-  type WorkflowNode,
-  type WorkflowNodeType,
 } from '@/entities'
 import { ExportButton, type ExportPackageModel } from '@/features/export-package'
+import { KineticCopyCycle, type KineticCopyMessage } from './kinetic-copy-cycle'
 import {
   quickStartService,
   type QuickStartEntryService,
   type QuickStartFrame,
   type QuickStartSession,
 } from './service'
+import './quick-start-motion.css'
 
 export type {
   CreateQuickStartServiceOptions,
@@ -31,26 +34,79 @@ export type {
   QuickStartSession,
 } from './service'
 
-const STEP_LABELS: Record<WorkflowNodeType, string> = {
-  'character-setup': '角色设定',
-  'character-template': '角色图',
-  'action-first-frame': '候选选择',
-  'action-generation-method': '生成路线',
-  'action-full-frame': '动作生成',
-  review: '审核',
-}
-
-const EXAMPLES = [
+const STYLE_PROMPTS = [
+  {
+    title: '16-bit 日式 RPG',
+    detail: '清晰轮廓 · 明亮配色',
+    prompt: '16-bit 日式 RPG 像素风，清晰轮廓，明亮配色',
+  },
   {
-    label: '像素守夜人',
-    prompt: '一位提着风灯、披深色斗篷的像素守夜人',
+    title: '暗黑哥特像素',
+    detail: '低饱和 · 强烈明暗',
+    prompt: '暗黑哥特像素风，低饱和配色，强烈明暗对比',
   },
   {
-    label: '轻装信使',
-    prompt: '轻装信使，侧视像素风，轮廓清晰，动作轻快',
+    title: '温暖手绘像素',
+    detail: '柔和色彩 · 纸张质感',
+    prompt: '温暖手绘像素风，柔和配色，细腻纸张质感',
   },
 ] as const
 
+const ROLE_IDEAS = [
+  '银色卷发、戴星形单片眼镜的裁缝',
+  '长着鹿角、披苔藓斗篷的邮差',
+  '戴透明水母帽、穿蓝色雨衣的药剂师',
+  '蓬松白胡子、背黄铜工具箱的机械师',
+  '紫色短发、戴猫耳耳机的情报员',
+  '披白羽斗篷、戴月牙面具的占星师',
+  '红色双辫、穿宽大飞行夹克的小飞行员',
+  '黑色卷发、戴珊瑚项链的海洋祭司',
+] as const
+
+const ROLE_IDEA_MESSAGES: readonly KineticCopyMessage[] = [
+  { lines: ['想做一个什么角色？'], className: 'text-app-ink' },
+  ...ROLE_IDEAS.map((idea) => ({
+    prefix: '试试',
+    prefixClassName:
+      'mr-3 font-mono text-[10px] font-bold tracking-[0.14em] text-app-faint sm:text-[11px]',
+    lines: [idea],
+    className: 'text-app-accent',
+  })),
+]
+
+const ROLE_DEFAULT_MESSAGE: readonly KineticCopyMessage[] = [
+  { lines: ['用文字塑造你的角色……'], className: 'text-app-ink' },
+]
+
+const TEMPLATE_GENERATION_MESSAGES: readonly KineticCopyMessage[] = [
+  { lines: ['勾勒角色轮廓'] },
+  { lines: ['给衣服配颜色'] },
+  { lines: ['把发型画清楚'] },
+  { lines: ['添上表情'] },
+  { lines: ['处理一下光影'] },
+  { lines: ['补齐画面细节'] },
+]
+
+const FIRST_FRAME_GENERATION_MESSAGES: readonly KineticCopyMessage[] = [
+  { lines: ['摆好动作姿态'] },
+  { lines: ['调整手脚位置'] },
+  { lines: ['让重心自然一点'] },
+  { lines: ['拉开姿态的区别'] },
+  { lines: ['保持角色样子'] },
+  { lines: ['补上动作细节'] },
+]
+
+const ACTION_GENERATION_MESSAGES: readonly KineticCopyMessage[] = [
+  { lines: ['把动作连起来'] },
+  { lines: ['补上中间的变化'] },
+  { lines: ['理顺每一帧的节奏'] },
+  { lines: ['检查手脚的衔接'] },
+  { lines: ['让起落自然一点'] },
+  { lines: ['调整动作幅度'] },
+]
+
+const ENTRY_HANDOFF_MS = 460
+
 function playtestPath(characterId: string, outfitId: string, actionId?: string): string {
   const path = `/playtest/${encodeURIComponent(characterId)}/${encodeURIComponent(outfitId)}`
   return actionId ? `${path}?${new URLSearchParams({ actionId })}` : path
@@ -74,7 +130,6 @@ export function QuickStartPage({ service }: QuickStartPageProps) {
   const [createdSession, setCreatedSession] = useState<QuickStartSession | null>(null)
   const characterId = searchParams.get('characterId')
   const outfitId = searchParams.get('outfitId')
-
   return runId ? (
     <QuickStartRun
       service={activeService}
@@ -177,14 +232,30 @@ function QuickStartInput({
   const [prompt, setPrompt] = useState('')
   const [templateFile, setTemplateFile] = useState<File | null>(null)
   const [submitting, setSubmitting] = useState(false)
+  const [entryTransition, setEntryTransition] = useState<'idle' | 'leaving'>('idle')
   const [error, setError] = useState<string | null>(null)
   const fileInput = useRef<HTMLInputElement>(null)
   const submitAbortController = useRef<AbortController | null>(null)
+  const handoffTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   const unavailableReason = service.unavailableReason
+  const hasPrompt = Boolean(prompt.trim())
+  const showStylePrompts = !hasPrompt && !templateFile
+
+  const originalPromptShortcuts = [
+    {
+      label: '像素守夜人',
+      prompt: '一位提着风灯、披深色斗篷的像素守夜人',
+    },
+    {
+      label: '轻装信使',
+      prompt: '轻装信使，侧视像素风，轮廓清晰，动作轻快',
+    },
+  ] as const
 
   useEffect(
     () => () => {
       submitAbortController.current?.abort()
+      if (handoffTimer.current) clearTimeout(handoffTimer.current)
     },
     [],
   )
@@ -208,19 +279,26 @@ function QuickStartInput({
     const abortController = new AbortController()
     submitAbortController.current = abortController
     setSubmitting(true)
+    setEntryTransition('leaving')
     setError(null)
     try {
-      const session = templateFile
-        ? await service.startWithUploadedTemplate(
-            templateFile,
-            normalizedPrompt,
-            abortController.signal,
-          )
-        : await service.start(normalizedPrompt)
+      const sessionPromise = templateFile
+        ? service.startWithUploadedTemplate(templateFile, normalizedPrompt, abortController.signal)
+        : service.start(normalizedPrompt)
+      const handoffPromise = new Promise<void>((resolve) => {
+        handoffTimer.current = setTimeout(() => {
+          handoffTimer.current = null
+          resolve()
+        }, ENTRY_HANDOFF_MS)
+      })
+      const [session] = await Promise.all([sessionPromise, handoffPromise])
       onSessionCreated(session)
       navigate(`/quick-start/${encodeURIComponent(session.runId)}`)
     } catch (cause) {
       if (!abortController.signal.aborted) {
+        if (handoffTimer.current) clearTimeout(handoffTimer.current)
+        handoffTimer.current = null
+        setEntryTransition('idle')
         setError(errorMessage(cause, '创建失败，请稍后重试'))
       }
     } finally {
@@ -232,78 +310,87 @@ function QuickStartInput({
   }
 
   return (
-    <section className="relative min-h-screen overflow-hidden border border-app-line bg-app-canvas text-app-ink shadow-app-page">
+    <section className="relative min-h-[100dvh] overflow-hidden border border-app-line bg-app-canvas pt-14 text-app-ink shadow-app-page">
       <AmbientGrid />
 
-      <div className="relative z-10 grid min-h-screen grid-rows-[auto_1fr_auto] p-5 sm:p-8">
-        <header className="flex items-start justify-between gap-6">
-          <div>
-            <p className="font-mono text-[10px] font-bold tracking-[0.16em] text-app-muted">
-              QUICK START / CREATE CHARACTER
-            </p>
-            <h1 className="mt-3 max-w-3xl font-serif text-3xl leading-tight tracking-[-0.035em] sm:text-5xl">
-              用一句角色设定，
-              <br />
-              开始一条可追踪的制作流程。
-            </h1>
-          </div>
-          <span className="hidden rounded-full border border-app-line-strong bg-app-surface/80 px-4 py-2 text-xs font-semibold text-app-accent sm:inline-flex">
-            AI 快捷创作
-          </span>
-        </header>
-
-        <div className="grid items-center gap-8 py-12 lg:grid-cols-[1fr_220px]">
-          <button
-            type="button"
-            onClick={() => setPrompt(EXAMPLES[0].prompt)}
-            className="group flex min-h-24 w-full items-center gap-4 rounded-full border border-app-line bg-app-surface-raised px-7 text-left shadow-app-card transition hover:-translate-y-0.5 hover:border-app-line-strong focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-app-accent motion-reduce:transform-none"
-          >
-            <span className="shrink-0 text-sm font-semibold text-app-faint">你可能想做：</span>
-            <strong className="text-base font-semibold text-app-accent sm:text-xl">
-              {EXAMPLES[0].prompt}
-            </strong>
-          </button>
+      <div
+        data-layout="quick-start-entry"
+        data-transition={entryTransition}
+        className="relative z-10 grid min-h-[calc(100dvh-3.5rem)] grid-rows-[1fr_auto] gap-6 px-5 py-6 sm:px-8 sm:pb-8 sm:pt-10"
+      >
+        <div
+          data-layout="quick-start-entry-stage"
+          className={`mx-auto grid w-full max-w-3xl content-center gap-5 pb-8 transition-[opacity,transform,filter] duration-[460ms] ease-[cubic-bezier(0.55,0,1,0.45)] motion-reduce:transition-none sm:gap-6 ${
+            entryTransition === 'leaving'
+              ? 'pointer-events-none -translate-y-3 scale-[0.985] opacity-0 blur-[7px]'
+              : 'translate-y-0 scale-100 opacity-100 blur-0'
+          }`}
+        >
+          <KineticCopyCycle
+            active={!templateFile && !submitting}
+            as="h1"
+            ariaLabel="想做一个什么角色？"
+            motionMode="characters"
+            firstCycleMs={2_400}
+            loopStartIndex={1}
+            messages={hasPrompt ? ROLE_DEFAULT_MESSAGE : ROLE_IDEA_MESSAGES}
+            className="min-h-12 text-center font-serif text-[clamp(1.75rem,4vw,2.65rem)] leading-none font-medium tracking-[-0.045em]"
+          />
 
           <div
-            className="mx-auto grid aspect-square w-44 grid-cols-7 gap-1 rounded-[1.4rem] border border-app-line bg-app-surface p-5 shadow-app-card"
-            aria-hidden="true"
+            data-layout="quick-start-starters"
+            data-presence={showStylePrompts ? 'visible' : 'hidden'}
+            aria-hidden={!showStylePrompts}
+            className={`grid gap-2 transition-[opacity,transform,filter] duration-[460ms] ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none sm:grid-cols-3 ${
+              showStylePrompts
+                ? 'translate-y-0 scale-100 opacity-100 blur-0'
+                : 'pointer-events-none -translate-y-2 scale-[0.985] opacity-0 blur-[6px]'
+            }`}
           >
-            {Array.from({ length: 49 }, (_, index) => {
-              const row = Math.floor(index / 7)
-              const column = index % 7
-              const active =
-                (row === 1 && column >= 2 && column <= 4) ||
-                (row >= 2 && row <= 4 && column >= 1 && column <= 5) ||
-                (row === 5 && (column === 2 || column === 4))
-              return (
-                <i
-                  key={index}
-                  className={`rounded-[2px] ${active ? 'bg-app-accent' : 'bg-app-line'}`}
-                />
-              )
-            })}
+            {STYLE_PROMPTS.map((stylePrompt) => (
+              <button
+                key={stylePrompt.title}
+                type="button"
+                disabled={!showStylePrompts}
+                aria-label={`${stylePrompt.title}：${stylePrompt.detail}`}
+                onClick={() => setPrompt(stylePrompt.prompt)}
+                className="group grid min-h-16 content-center gap-1 rounded-xl border border-app-line bg-app-surface/70 px-4 py-3 text-left transition duration-200 hover:-translate-y-0.5 hover:border-app-line-strong hover:bg-app-surface-raised hover:shadow-app-card focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent motion-reduce:transform-none"
+              >
+                <strong className="text-sm font-semibold text-app-ink">{stylePrompt.title}</strong>
+                <span className="text-[11px] text-app-muted">{stylePrompt.detail}</span>
+              </button>
+            ))}
           </div>
-        </div>
-
-        <div>
-          <div className="mb-3 flex flex-wrap gap-2">
-            {EXAMPLES.slice(1).map((example) => (
+          <div
+            data-layout="quick-start-original-shortcuts"
+            data-presence={showStylePrompts ? 'visible' : 'hidden'}
+            aria-hidden={!showStylePrompts}
+            className={`flex flex-wrap justify-center gap-2 transition-[opacity,transform,filter] duration-[460ms] motion-reduce:transition-none ${
+              showStylePrompts
+                ? 'translate-y-0 opacity-100 blur-0'
+                : 'pointer-events-none -translate-y-1 opacity-0 blur-[4px]'
+            }`}
+          >
+            {originalPromptShortcuts.map((shortcut) => (
               <button
-                key={example.label}
+                key={shortcut.label}
                 type="button"
-                onClick={() => setPrompt(example.prompt)}
-                className="rounded-full border border-app-line bg-app-surface px-3 py-1.5 text-[11px] font-medium text-app-muted hover:border-app-line-strong hover:text-app-accent"
+                disabled={!showStylePrompts}
+                onClick={() => setPrompt(shortcut.prompt)}
+                className="rounded-full border border-app-line px-3 py-1.5 text-xs font-medium text-app-muted transition hover:border-app-line-strong hover:text-app-accent"
               >
-                {example.label}
+                {shortcut.label}
               </button>
             ))}
           </div>
+        </div>
 
+        <div data-layout="quick-start-composer" className="mx-auto w-full max-w-3xl self-end">
           <form
             onSubmit={(event) => void submit(event)}
-            className="grid gap-3 rounded-[1.4rem] border border-app-line-strong bg-app-surface-raised p-4 shadow-app-panel sm:grid-cols-[1fr_auto]"
+            className="grid items-center gap-1.5 rounded-xl border border-app-line-strong bg-app-surface-raised p-1.5 shadow-app-panel transition-shadow focus-within:border-app-accent sm:grid-cols-[1fr_auto_auto]"
           >
-            <label className="grid gap-2" htmlFor="quick-start-prompt">
+            <label className="min-w-0" htmlFor="quick-start-prompt">
               <span className="sr-only">创作指令</span>
               <textarea
                 id="quick-start-prompt"
@@ -312,60 +399,60 @@ function QuickStartInput({
                 onChange={(event) => setPrompt(event.target.value)}
                 rows={2}
                 placeholder={
-                  templateFile
-                    ? '例如：挥手打招呼、提灯前行（可留空生成待机动作）'
-                    : '描述你想生成的角色、身份特征和视觉风格…'
+                  templateFile ? '描述动作，可留空生成待机动作…' : '描述角色的外形、身份和气质…'
                 }
-                className="min-h-16 w-full resize-none border-0 bg-transparent px-2 py-1 text-[15px] leading-relaxed text-app-ink outline-none placeholder:text-app-faint"
+                className="min-h-10 w-full min-w-0 resize-none border-0 bg-transparent px-3 py-2 text-[15px] leading-6 text-app-ink outline-none placeholder:text-app-faint"
               />
-              <span className="flex flex-wrap items-center gap-2 px-2 text-[10px] text-app-faint">
-                <b className="rounded-full border border-app-line bg-app-surface-muted px-2.5 py-1 font-medium text-app-ink-soft">
-                  文字创建
-                </b>
-                {templateFile
-                  ? '动作描述（可选）：留空生成待机动作'
-                  : '角色图生成后仍需人工选择候选'}
-              </span>
-              {templateFile ? (
-                <span className="flex flex-wrap items-center gap-2 px-2 text-[11px] text-app-ink-soft">
-                  <b className="max-w-full truncate font-medium">{templateFile.name}</b>
-                  <button
-                    type="button"
-                    onClick={removeTemplateFile}
-                    className="rounded-full border border-app-line-strong px-2 py-0.5 text-[10px] hover:border-app-line-strong hover:text-app-accent"
-                  >
-                    移除图片
-                  </button>
-                </span>
-              ) : null}
             </label>
 
-            <div className="flex min-w-32 flex-col gap-2">
-              <input
-                ref={fileInput}
-                type="file"
-                accept="image/*"
-                aria-label="上传角色母版"
-                className="sr-only"
-                onChange={selectTemplateFile}
-              />
+            <input
+              ref={fileInput}
+              type="file"
+              accept="image/*"
+              aria-label="上传角色母版"
+              className="sr-only"
+              onChange={selectTemplateFile}
+            />
+            {templateFile ? (
+              <span className="flex h-10 min-w-0 max-w-56 items-center rounded-lg bg-app-surface-muted text-xs text-app-ink-soft">
+                <button
+                  type="button"
+                  aria-label={`更换母版 ${templateFile.name}`}
+                  onClick={() => fileInput.current?.click()}
+                  className="inline-flex h-full min-w-0 items-center gap-2 rounded-l-lg px-2.5 font-semibold transition hover:bg-app-surface hover:text-app-accent focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-app-accent"
+                >
+                  <ImageSquare aria-hidden="true" size={16} weight="duotone" />
+                  <span className="max-w-32 truncate">{templateFile.name}</span>
+                </button>
+                <button
+                  type="button"
+                  aria-label="移除图片"
+                  onClick={removeTemplateFile}
+                  className="grid size-8 shrink-0 place-items-center rounded-md text-app-muted transition hover:bg-app-surface hover:text-app-accent focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-app-accent"
+                >
+                  <X aria-hidden="true" size={14} weight="bold" />
+                </button>
+              </span>
+            ) : (
               <button
                 type="button"
                 onClick={() => fileInput.current?.click()}
-                className="min-h-9 rounded-xl border border-app-line-strong bg-app-surface px-4 text-xs font-semibold text-app-ink-soft transition hover:border-app-line-strong hover:text-app-accent"
+                className="inline-flex h-10 items-center gap-2 rounded-lg px-3 text-xs font-semibold whitespace-nowrap text-app-muted transition hover:bg-app-surface-muted hover:text-app-accent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-app-accent"
               >
-                {templateFile ? '更换图片' : '上传角色母版'}
+                <ImageSquare aria-hidden="true" size={17} weight="duotone" />
+                添加母版
               </button>
-              <button
-                type="submit"
-                disabled={
-                  (!prompt.trim() && !templateFile) || submitting || Boolean(unavailableReason)
-                }
-                className="min-h-14 rounded-[1rem] bg-app-accent px-5 text-sm font-bold text-app-on-accent transition hover:bg-app-accent-hover disabled:cursor-not-allowed disabled:opacity-45"
-              >
-                {submitting ? '正在创建…' : '开始生成'}
-              </button>
-            </div>
+            )}
+            <button
+              type="submit"
+              disabled={
+                (!prompt.trim() && !templateFile) || submitting || Boolean(unavailableReason)
+              }
+              className="inline-flex h-10 items-center gap-2 rounded-lg bg-app-accent px-4 text-sm font-bold whitespace-nowrap text-app-on-accent transition hover:bg-app-accent-hover active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-45"
+            >
+              {submitting ? '正在创建…' : '生成角色'}
+              {!submitting ? <ArrowUp aria-hidden="true" size={16} weight="bold" /> : null}
+            </button>
           </form>
 
           {unavailableReason ? (
@@ -387,6 +474,149 @@ function QuickStartInput({
   )
 }
 
+function AgentCopy({
+  lines,
+  tone = 'default',
+}: {
+  lines: readonly string[]
+  tone?: 'default' | 'danger'
+}) {
+  return (
+    <div
+      data-agent-copy
+      aria-label={lines.join(' ')}
+      className={`quick-start-agent-copy font-sans ${
+        tone === 'danger' ? 'text-app-danger' : 'text-app-ink-soft'
+      }`}
+    >
+      <p className="text-sm leading-6 font-medium">{lines[0]}</p>
+      {lines.slice(1).map((line) => (
+        <p key={line} className="mt-0.5 max-w-2xl text-[13px] leading-5 text-app-muted">
+          {line}
+        </p>
+      ))}
+    </div>
+  )
+}
+
+function GenerationProgress({
+  label,
+  messages,
+}: {
+  label: string
+  messages: readonly KineticCopyMessage[]
+}) {
+  return (
+    <div data-generation-progress className="min-h-8 overflow-hidden">
+      <KineticCopyCycle
+        active
+        ariaLabel={label}
+        messages={messages}
+        motionMode="characters"
+        firstCycleMs={7_540}
+        cycleMs={8_000}
+        loopStartIndex={0}
+        className="quick-start-agent-copy quick-start-generation-shimmer justify-items-start text-left font-serif text-[17px] leading-7 font-medium tracking-[-0.025em] text-app-ink"
+      />
+    </div>
+  )
+}
+
+function UserTurn({ children }: { children: ReactNode }) {
+  return (
+    <div
+      data-user-turn
+      className="ml-auto max-w-[78%] rounded-[1.15rem] rounded-br-md bg-app-surface-muted px-4 py-2.5 text-left text-sm leading-6 text-app-ink-soft"
+    >
+      <span>{children}</span>
+    </div>
+  )
+}
+
+function AgentTurn({
+  step,
+  current,
+  children,
+}: {
+  step: 'character-template' | 'action-first-frame' | 'action-full-frame'
+  current: boolean
+  children: ReactNode
+}) {
+  return (
+    <section
+      data-agent-turn={step}
+      data-current-turn={String(current)}
+      className={`quick-start-agent-turn min-w-0 transition-opacity duration-200 ${
+        current ? 'opacity-100' : 'opacity-55'
+      }`}
+    >
+      <div className="grid min-w-0 gap-4">{children}</div>
+    </section>
+  )
+}
+
+function AssetVisual({
+  src,
+  alt,
+  className,
+  priority = false,
+}: {
+  src: string
+  alt: string
+  className: string
+  priority?: boolean
+}) {
+  return (
+    <img
+      src={src}
+      alt={alt}
+      loading={priority ? 'eager' : 'lazy'}
+      decoding="async"
+      fetchPriority={priority ? 'high' : 'auto'}
+      className={className}
+    />
+  )
+}
+
+const GENERATION_DOTS = Array.from({ length: 432 }, (_, index) => {
+  const column = index % 24
+  const row = Math.floor(index / 24)
+  const noise = ((column * 37 + row * 61 + index * 17) % 101) / 100
+  const wave = (Math.sin(column * 0.72 + row * 0.41) + 1) / 2
+  const level = 0.3 + (noise * 0.55 + wave * 0.45) * 0.7
+  const delay = Math.round(((column / 23) * 0.48 + (row / 17) * 0.3 + noise * 0.22) * 900)
+  return { delay, level: level.toFixed(2) }
+})
+
+function GenerationCanvas({ label }: { label: string }) {
+  return (
+    <div
+      role="img"
+      aria-label={label}
+      data-generation-state="generating"
+      data-generation-motion="continuous"
+      data-reveal="generation-canvas"
+      className="quick-start-generation-canvas"
+    >
+      <div className="quick-start-generation-dots" aria-hidden="true">
+        {GENERATION_DOTS.map(({ delay, level }, index) => (
+          <i
+            key={index}
+            data-generation-dot
+            className="quick-start-generation-dot"
+            style={
+              {
+                '--generation-delay': `${delay}ms`,
+                '--generation-level': level,
+              } as CSSProperties
+            }
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
 function QuickStartRun({
   service,
   runId,
@@ -414,6 +644,7 @@ function QuickStartRun({
   const [confirmingCandidate, setConfirmingCandidate] = useState(false)
   const [confirmingFirstFrame, setConfirmingFirstFrame] = useState(false)
   const automaticPublishAttempt = useRef<string | null>(null)
+  const transcriptScrollRegion = useRef<HTMLElement>(null)
 
   useEffect(() => {
     let active = true
@@ -474,9 +705,23 @@ function QuickStartRun({
     ])
       .then(([nextCandidates, nextFirstFrameCandidates, nextFrames, nextExportModel]) => {
         if (!active) return
-        setCandidates(nextCandidates)
-        setFirstFrameCandidates(nextFirstFrameCandidates)
-        setActionFrames(nextFrames)
+        const templateIsSelecting = run.nodes.some(
+          (node) =>
+            node.type === 'character-template' &&
+            node.status === 'active' &&
+            node.phase === 'selecting',
+        )
+        const firstFrameIsSelecting = run.nodes.some(
+          (node) =>
+            node.type === 'action-first-frame' &&
+            node.status === 'active' &&
+            node.phase === 'selecting',
+        )
+        if (templateIsSelecting && nextCandidates.length > 0) setCandidates(nextCandidates)
+        if (firstFrameIsSelecting && nextFirstFrameCandidates.length > 0) {
+          setFirstFrameCandidates(nextFirstFrameCandidates)
+        }
+        if (nextFrames.length > 0) setActionFrames(nextFrames)
         setExportModel(nextExportModel)
       })
       .catch((cause) => {
@@ -487,33 +732,32 @@ function QuickStartRun({
     }
   }, [run, session])
 
-  const publishToPlaytest = useCallback(async () => {
+  const saveCompletedAction = useCallback(async () => {
     if (publishing || !session) return
     setPublishing(true)
     setError(null)
     try {
       const approved = await session.approveReview()
       setRun(approved)
-      const info = session.getCharacterInfo() ?? (await session.resolveCharacterInfo())
-      if (!info) throw new Error('动作已生成，但没有找到对应的角色资产')
-      const approvedAction = latestActionStep(approved)
-      const actionId = approvedAction?.type === 'action-full-frame' ? approvedAction.id : undefined
-      navigate(playtestPath(info.characterId, info.outfitId, actionId))
     } catch (cause) {
-      setError(errorMessage(cause, '导入预览台失败'))
+      setError(errorMessage(cause, '保存角色失败，请稍后重试'))
     } finally {
       setPublishing(false)
     }
-  }, [navigate, publishing, session])
+  }, [publishing, session])
 
   useEffect(() => {
     const publishKey = run ? automaticPublishKey(run) : null
     if (publishKey === null || publishing || automaticPublishAttempt.current === publishKey) return
 
-    // 每个版本只自动尝试一次；失败后由页面保留的重试按钮交给用户明确触发。
     automaticPublishAttempt.current = publishKey
-    void publishToPlaytest()
-  }, [publishToPlaytest, publishing, run])
+    void saveCompletedAction()
+  }, [publishing, run, saveCompletedAction])
+
+  useEffect(() => {
+    const region = transcriptScrollRegion.current
+    region?.scrollTo?.({ top: region.scrollHeight, behavior: 'smooth' })
+  }, [actionFrames, candidates, firstFrameCandidates, run])
 
   if (!run) {
     return (
@@ -546,8 +790,6 @@ function QuickStartRun({
 
   const revision = run
   const status = describeRun(run, revision)
-  const passedCount = revision.nodes.filter((node) => node.status === 'passed').length
-
   const actionStep = latestActionStep(revision)
   const firstFrameStep = latestActionFirstFrame(revision)
   const templateStep = revision.nodes.find(
@@ -556,14 +798,14 @@ function QuickStartRun({
   const reviewStep = actionStep ? pairedReviewStep(revision, actionStep.id) : null
   const canPublish =
     actionFrames.length > 0 && (reviewStep?.status === 'active' || reviewStep?.status === 'passed')
-  const isActionActive = actionStep?.status === 'active'
+  const workflowIsActive =
+    revision.nodes.some((node) => !node.deletedAt && node.status === 'active') &&
+    !workflowHasFailure(revision)
   const isActionFailed = actionStep?.status === 'failed'
   const isTemplateSelecting =
     templateStep?.status === 'active' && templateStep.phase === 'selecting'
   const isFirstFrameSelecting =
     firstFrameStep?.status === 'active' && firstFrameStep.phase === 'selecting'
-  const isFirstFrameGenerating =
-    firstFrameStep?.status === 'active' && firstFrameStep.phase === 'generating'
   const isFirstFrameFailed = firstFrameStep?.status === 'failed'
 
   async function interrupt() {
@@ -575,6 +817,18 @@ function QuickStartRun({
     }
   }
 
+  async function openPlaytest() {
+    if (!session) return
+    setError(null)
+    try {
+      const info = session.getCharacterInfo() ?? (await session.resolveCharacterInfo())
+      if (!info) throw new Error('没有找到对应的角色资产')
+      navigate(playtestPath(info.characterId, info.outfitId, actionStep?.id))
+    } catch (cause) {
+      setError(errorMessage(cause, '打开 Play Test 失败'))
+    }
+  }
+
   async function confirmSelection() {
     if (!selectedCandidate || confirmingCandidate) return
     setConfirmingCandidate(true)
@@ -621,312 +875,414 @@ function QuickStartRun({
     }
   }
 
+  function continueConversation(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (isTemplateSelecting) {
+      void confirmSelection()
+      return
+    }
+    if (isFirstFrameSelecting) {
+      void confirmFirstFrame()
+      return
+    }
+  }
+
+  const composerPlaceholder = isTemplateSelecting
+    ? selectedCandidate
+      ? '描述这个角色接下来要做的动作…'
+      : '先从上面选择一个角色…'
+    : isFirstFrameSelecting
+      ? selectedFirstFrame
+        ? '按发送确认这张首帧…'
+        : '先从上面选择一个动作首帧…'
+      : workflowHasFailure(run)
+        ? '这次未完成，可以新建一次创作…'
+        : canPublish
+          ? '确认保存后，还可以继续描述修改…'
+          : '制作中，完成后可以继续修改…'
+
+  const composerCanSubmit =
+    (isTemplateSelecting && Boolean(selectedCandidate)) ||
+    (isFirstFrameSelecting && Boolean(selectedFirstFrame))
+  const selectedTemplateUrl = templateStep?.selectedImageUrl
+  const selectedFirstFrameUrl = firstFrameStep?.selectedFirstFrameUrl
+  const requestedAction = firstFrameStep?.input.prompt || firstFrameStep?.input.name
+  const chosenTemplateUrl = selectedTemplateUrl ?? selectedCandidate
+  const chosenFirstFrameUrl = selectedFirstFrameUrl ?? selectedFirstFrame
+  const characterTurnIsCurrent = !firstFrameStep
+  const firstFrameTurnIsCurrent = Boolean(firstFrameStep) && actionStep?.status === 'locked'
+  const actionTurnIsCurrent = Boolean(actionStep && actionStep.status !== 'locked')
+
   return (
-    <section className="relative min-h-screen overflow-hidden border border-app-line bg-app-canvas text-app-ink shadow-app-page">
-      <AmbientGrid />
-      <div className="relative z-10 grid min-h-screen grid-rows-[auto_1fr_auto] gap-6 p-5 sm:p-8">
-        <header className="flex flex-wrap items-start justify-between gap-4">
-          <div>
-            <p className="font-mono text-[10px] font-bold tracking-[0.16em] text-app-muted">
-              QUICK START / RUN {run.id}
-            </p>
-            <h1 className="mt-2 font-serif text-3xl tracking-[-0.03em] sm:text-4xl">
-              {workflowPrompt(run) || '未命名角色创作'}
-            </h1>
-          </div>
-          <div className="flex items-center gap-3">
-            {exportModel ? (
-              <ExportButton
-                model={exportModel}
-                className="border-app-accent bg-app-accent text-app-on-accent hover:bg-app-accent-hover"
-              />
-            ) : null}
-            <div
-              className="flex items-center gap-3 rounded-xl border border-app-line bg-app-surface-raised/90 px-4 py-3"
-              aria-live="polite"
-            >
-              <i
-                className={`h-2.5 w-2.5 rounded-full ${
-                  workflowIsActive(run) ? 'animate-pulse bg-app-accent' : 'bg-app-faint'
-                } motion-reduce:animate-none`}
-                aria-hidden="true"
-              />
-              <span>
-                <small className="block font-mono text-[8px] tracking-[0.12em] text-app-faint">
-                  CURRENT STATUS
-                </small>
-                <b className="text-sm text-app-accent">{status.title}</b>
-              </span>
-            </div>
-          </div>
-        </header>
-
-        <div className="grid min-h-0 gap-5 lg:grid-cols-[1.35fr_0.65fr]">
-          <section className="grid min-h-[340px] place-items-center overflow-hidden rounded-[1.4rem] border border-app-line bg-app-surface/90 p-5">
-            {actionFrames.length > 0 ? (
-              <div className="grid w-full grid-cols-4 gap-2 sm:grid-cols-8">
-                {actionFrames.map((frame, index) => (
-                  <img
-                    key={`${frame.imageUrl}:${index}`}
-                    src={frame.imageUrl}
-                    alt={`动作第 ${index + 1} 帧`}
-                    loading="lazy"
-                    decoding="async"
-                    className="aspect-square w-full border border-app-line bg-app-surface-muted object-contain [image-rendering:pixelated]"
+    <section className="relative min-h-screen overflow-hidden bg-app-canvas pt-14 text-app-ink">
+      <div
+        data-testid="quick-start-run"
+        data-layout="agent-shell"
+        className="relative h-[calc(100dvh-3.5rem)] overflow-hidden"
+      >
+        <span aria-live="polite" className="sr-only">
+          {status.title}
+        </span>
+
+        <main
+          ref={transcriptScrollRegion}
+          data-layout="quick-start-scroll-region"
+          className="absolute inset-0 overflow-y-auto px-5 pt-14 pb-32 sm:px-8 sm:pt-10 sm:pb-36"
+        >
+          <div
+            data-testid="quick-start-transcript"
+            className="mx-auto grid min-h-full w-full max-w-3xl content-end gap-7 pb-8 sm:gap-9"
+          >
+            <UserTurn>{workflowPrompt(run) || '未命名角色创作'}</UserTurn>
+
+            <AgentTurn step="character-template" current={characterTurnIsCurrent}>
+              {candidates.length ? (
+                <>
+                  <AgentCopy
+                    lines={[
+                      '已生成 3 个角色方向。',
+                      isTemplateSelecting
+                        ? '选择一个方案，再描述它接下来的动作。'
+                        : '角色方案已确认。',
+                    ]}
                   />
-                ))}
-              </div>
-            ) : isActionActive ? (
-              <div className="grid place-items-center gap-5 text-center">
-                <div className="relative grid h-44 w-44 place-items-center rounded-[1.4rem] border border-dashed border-app-line-strong bg-app-surface-muted">
-                  <i className="h-12 w-12 animate-pulse rounded-full border border-app-line-strong bg-app-accent-soft shadow-app-pulse motion-reduce:animate-none" />
-                </div>
-                <span>
-                  <b className="block text-base text-app-ink-soft">正在生成动作</b>
-                  <small className="mt-2 block max-w-md leading-6 text-app-muted">
-                    正在生成动作帧，请稍候…
-                  </small>
-                </span>
-              </div>
-            ) : isActionFailed ? (
-              <div className="grid place-items-center gap-5 text-center">
-                <b className="text-base text-app-danger">动作生成失败</b>
-                <small className="max-w-md leading-6 text-app-muted">
-                  {typeof actionStep?.error === 'string' ? actionStep.error : '动作生成失败'}
-                </small>
-              </div>
-            ) : isFirstFrameSelecting && firstFrameCandidates.length ? (
-              <div className="grid w-full gap-4">
-                <div className="mx-auto max-w-xl text-center">
-                  <h2 className="text-lg font-semibold text-app-ink-soft">选择动作首帧</h2>
-                  <p className="mt-2 text-sm leading-6 text-app-muted">
-                    确认首帧后，系统会自动使用视频裁剪路线生成 32 帧完整动作。
-                  </p>
-                </div>
-                <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
-                  {firstFrameCandidates.map((frame, index) => (
-                    <button
-                      key={`${frame.imageUrl}:${index}`}
-                      type="button"
-                      onClick={() => setSelectedFirstFrame(frame.imageUrl)}
-                      className={`overflow-hidden rounded-xl border-2 p-2 text-left transition ${
-                        selectedFirstFrame === frame.imageUrl
-                          ? 'border-app-accent bg-app-accent-soft'
-                          : 'border-app-line bg-app-surface-muted hover:border-app-line-strong'
-                      }`}
-                    >
-                      <img
-                        src={frame.imageUrl}
-                        alt={`动作首帧候选 ${index + 1}`}
-                        loading="eager"
-                        decoding="async"
-                        fetchPriority={index === 0 ? 'high' : 'auto'}
-                        className="aspect-square w-full object-contain [image-rendering:pixelated]"
-                      />
-                      <p className="mt-2 font-mono text-[9px] tracking-[0.1em] text-app-muted">
-                        FIRST FRAME {String(index + 1).padStart(2, '0')}
-                      </p>
-                    </button>
-                  ))}
-                </div>
-                <div className="flex justify-center">
-                  <button
-                    type="button"
-                    onClick={() => void confirmFirstFrame()}
-                    disabled={!selectedFirstFrame || confirmingFirstFrame}
-                    className="rounded-xl bg-app-accent px-6 py-3 text-sm font-bold text-app-on-accent transition hover:bg-app-accent-hover disabled:cursor-not-allowed disabled:opacity-50"
+                  <div
+                    data-layout="agent-result-set"
+                    className="grid w-full max-w-2xl grid-cols-3 gap-3"
                   >
-                    {confirmingFirstFrame ? '正在确认…' : '确认首帧，生成完整动作'}
-                  </button>
-                </div>
-              </div>
-            ) : isFirstFrameGenerating ? (
-              <div className="grid place-items-center gap-5 text-center">
-                <div className="relative grid h-44 w-44 place-items-center rounded-[1.4rem] border border-dashed border-app-line-strong bg-app-surface-muted">
-                  <i className="h-12 w-12 animate-pulse rounded-full border border-app-line-strong bg-app-accent-soft shadow-app-pulse motion-reduce:animate-none" />
-                </div>
-                <span>
-                  <b className="block text-base text-app-ink-soft">正在生成动作首帧</b>
-                  <small className="mt-2 block max-w-md leading-6 text-app-muted">
-                    首帧就绪后，需要确认一次，再自动生成 32 帧完整动作。
-                  </small>
-                </span>
-              </div>
-            ) : isFirstFrameFailed ? (
-              <div className="grid place-items-center gap-5 text-center">
-                <b className="text-base text-app-danger">动作首帧生成失败</b>
-                <small className="max-w-md leading-6 text-app-muted">
-                  {typeof firstFrameStep?.error === 'string'
-                    ? firstFrameStep.error
-                    : '动作首帧生成失败'}
-                </small>
-              </div>
-            ) : isTemplateSelecting && candidates.length ? (
-              <div className="grid w-full gap-4">
-                <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
-                  {candidates.map((candidateUrl, index) => (
-                    <button
-                      key={`${candidateUrl}:${index}`}
-                      type="button"
-                      onClick={() => setSelectedCandidate(candidateUrl)}
-                      className={`overflow-hidden rounded-xl border-2 p-2 text-left transition ${
-                        selectedCandidate === candidateUrl
-                          ? 'border-app-accent bg-app-accent-soft'
-                          : 'border-app-line bg-app-surface-muted hover:border-app-line-strong'
-                      }`}
-                    >
-                      <img
-                        src={candidateUrl}
-                        alt={`角色图候选 ${index + 1}`}
-                        loading="eager"
-                        decoding="async"
-                        fetchPriority={index === 0 ? 'high' : 'auto'}
-                        className="aspect-square w-full object-contain [image-rendering:pixelated]"
-                      />
-                      <p className="mt-2 font-mono text-[9px] tracking-[0.1em] text-app-muted">
-                        CANDIDATE {String(index + 1).padStart(2, '0')}
-                      </p>
-                    </button>
-                  ))}
-                </div>
-                <div className="mx-auto flex w-full max-w-xl flex-col gap-3">
-                  <label className="grid gap-1.5" htmlFor="quick-start-action-description">
-                    <span className="text-[11px] font-semibold text-app-ink-soft">
-                      动作描述（可选，留空生成待机动作）
-                    </span>
-                    <input
-                      id="quick-start-action-description"
-                      value={actionDescription}
-                      onChange={(event) => setActionDescription(event.target.value)}
-                      placeholder="例如：在画板上画画、挥舞灯笼、扫地…"
-                      className="rounded-xl border border-app-line bg-app-surface-raised px-4 py-2.5 text-sm text-app-ink outline-none placeholder:text-app-faint focus:border-app-line-strong"
-                    />
-                  </label>
-                  <div className="flex justify-center gap-3">
-                    <button
-                      type="button"
-                      onClick={() => void regenerate()}
-                      className="rounded-xl border border-app-line-strong px-5 py-3 text-sm font-semibold text-app-ink-soft transition hover:border-app-line-strong"
-                    >
-                      重新生成
-                    </button>
-                    {selectedCandidate ? (
+                    {candidates.map((candidateUrl, index) => (
                       <button
+                        key={`${candidateUrl}:${index}`}
                         type="button"
-                        onClick={() => void confirmSelection()}
-                        disabled={confirmingCandidate}
-                        className="rounded-xl bg-app-accent px-6 py-3 text-sm font-bold text-app-on-accent transition hover:bg-app-accent-hover"
+                        aria-label={`选择角色方案 ${index + 1}`}
+                        aria-pressed={chosenTemplateUrl === candidateUrl}
+                        disabled={!isTemplateSelecting || confirmingCandidate}
+                        onClick={() => setSelectedCandidate(candidateUrl)}
+                        data-asset-choice="true"
+                        data-reveal="card"
+                        style={{ '--reveal-index': index } as CSSProperties}
+                        className={`quick-start-reveal-card group/asset relative aspect-square overflow-hidden rounded-2xl border bg-app-surface-raised text-left transition duration-200 ${
+                          chosenTemplateUrl === candidateUrl
+                            ? 'border-app-accent ring-1 ring-app-accent'
+                            : 'border-app-line hover:border-app-line-strong'
+                        } disabled:cursor-default disabled:hover:border-app-line`}
                       >
-                        {confirmingCandidate ? '正在提交…' : '确认选择，继续下一步'}
+                        <span
+                          data-asset-frame
+                          className="block h-full min-h-0 bg-app-surface-muted"
+                        >
+                          <AssetVisual
+                            src={candidateUrl}
+                            alt={`角色图候选 ${index + 1}`}
+                            priority={index === 0}
+                            className="quick-start-generated-image aspect-square h-full w-full object-contain [image-rendering:pixelated]"
+                          />
+                        </span>
                       </button>
-                    ) : null}
+                    ))}
                   </div>
-                </div>
-              </div>
-            ) : (
-              <div className="grid place-items-center gap-5 text-center">
-                <div className="relative grid h-44 w-44 place-items-center rounded-[1.4rem] border border-dashed border-app-line-strong bg-app-surface-muted">
-                  <i className="h-12 w-12 animate-pulse rounded-full border border-app-line-strong bg-app-accent-soft shadow-app-pulse motion-reduce:animate-none" />
-                </div>
-                <span>
-                  <b className="block text-base text-app-ink-soft">{status.title}</b>
-                  <small className="mt-2 block max-w-md leading-6 text-app-muted">
-                    {status.description}
-                  </small>
-                </span>
-              </div>
-            )}
-          </section>
+                  <button
+                    type="button"
+                    onClick={() => void regenerate()}
+                    className="w-fit rounded-xl border border-app-line-strong px-4 py-2 text-xs font-semibold text-app-ink-soft transition hover:border-app-accent hover:text-app-accent"
+                  >
+                    重新生成
+                  </button>
+                </>
+              ) : templateStep?.status === 'passed' && selectedTemplateUrl ? (
+                <>
+                  <AgentCopy lines={['角色方案已确认。']} />
+                  <div
+                    data-layout="agent-result-set"
+                    className="grid w-full max-w-2xl grid-cols-3 gap-3"
+                  >
+                    <AssetVisual
+                      src={selectedTemplateUrl}
+                      alt="已选择的角色"
+                      className="aspect-square w-full rounded-2xl border border-app-line bg-app-surface-muted object-contain [image-rendering:pixelated]"
+                    />
+                  </div>
+                </>
+              ) : workflowHasFailure(revision) ? (
+                <>
+                  <AgentCopy
+                    tone="danger"
+                    lines={[
+                      '这次没有生成完成',
+                      '你的描述还在。换一种说法，或者补充新的要求后再试一次。',
+                    ]}
+                  />
+                </>
+              ) : (
+                <>
+                  <GenerationProgress
+                    label="角色生成进度"
+                    messages={TEMPLATE_GENERATION_MESSAGES}
+                  />
+                  <div
+                    data-layout="agent-result-set"
+                    className="grid w-full max-w-2xl grid-cols-3 gap-3"
+                  >
+                    <GenerationCanvas label="角色图生成画布" />
+                  </div>
+                </>
+              )}
+            </AgentTurn>
 
-          <aside className="rounded-[1.4rem] border border-app-line bg-app-surface-raised/95 p-5">
-            <p className="font-mono text-[9px] font-bold tracking-[0.13em] text-app-faint">
-              WORKFLOW RUN
-            </p>
-            <h2 className="mt-2 text-lg font-semibold">制作进度</h2>
-            <p className="mt-2 text-xs leading-6 text-app-muted">
-              Quick Start 隐藏节点操作，但每一步仍写入同一条 WorkflowRun。
-            </p>
+            {firstFrameStep ? (
+              <>
+                <UserTurn>{requestedAction || '待机'}</UserTurn>
+                <AgentTurn step="action-first-frame" current={firstFrameTurnIsCurrent}>
+                  {firstFrameCandidates.length ? (
+                    <>
+                      <AgentCopy
+                        lines={[
+                          isFirstFrameSelecting ? '已生成 3 个动作起始姿态。' : '动作首帧',
+                          isFirstFrameSelecting
+                            ? '选择一个起始姿态，随后生成完整动作。'
+                            : '动作起始姿态已确认。',
+                        ]}
+                      />
+                      <div
+                        data-layout="agent-result-set"
+                        className="grid w-full max-w-2xl grid-cols-3 gap-3"
+                      >
+                        {firstFrameCandidates.map((frame, index) => (
+                          <button
+                            key={`${frame.imageUrl}:${index}`}
+                            type="button"
+                            aria-label={`选择动作首帧 ${index + 1}`}
+                            aria-pressed={chosenFirstFrameUrl === frame.imageUrl}
+                            disabled={!isFirstFrameSelecting || confirmingFirstFrame}
+                            onClick={() => setSelectedFirstFrame(frame.imageUrl)}
+                            data-asset-choice="true"
+                            data-result-priority={index === 0 ? 'primary' : 'alternative'}
+                            data-reveal="card"
+                            style={{ '--reveal-index': index } as CSSProperties}
+                            className={`quick-start-reveal-card relative overflow-hidden rounded-2xl border bg-app-surface-raised text-left transition ${
+                              chosenFirstFrameUrl === frame.imageUrl
+                                ? 'border-app-accent ring-1 ring-app-accent'
+                                : 'border-app-line hover:border-app-line-strong'
+                            } disabled:cursor-default disabled:hover:border-app-line`}
+                          >
+                            <span
+                              data-asset-frame
+                              className="block aspect-square bg-app-surface-muted"
+                            >
+                              <AssetVisual
+                                src={frame.imageUrl}
+                                alt={`动作首帧候选 ${index + 1}`}
+                                priority={index === 0}
+                                className="quick-start-generated-image h-full w-full object-contain [image-rendering:pixelated]"
+                              />
+                            </span>
+                          </button>
+                        ))}
+                      </div>
+                      {selectedFirstFrame ? (
+                        <button
+                          type="button"
+                          onClick={() => void confirmFirstFrame()}
+                          disabled={confirmingFirstFrame}
+                          className="w-fit rounded-xl bg-app-accent px-5 py-2.5 text-sm font-bold text-app-on-accent disabled:opacity-50"
+                        >
+                          {confirmingFirstFrame ? '正在确认…' : '确认首帧，生成完整动作'}
+                        </button>
+                      ) : null}
+                    </>
+                  ) : firstFrameStep.status === 'passed' && selectedFirstFrameUrl ? (
+                    <>
+                      <AgentCopy lines={['动作起始姿态已确认。']} />
+                      <div
+                        data-layout="agent-result-set"
+                        className="grid w-full max-w-2xl grid-cols-3 gap-3"
+                      >
+                        <AssetVisual
+                          src={selectedFirstFrameUrl}
+                          alt="已选择的动作首帧"
+                          className="aspect-square w-full rounded-2xl border border-app-line bg-app-surface-muted object-contain [image-rendering:pixelated]"
+                        />
+                      </div>
+                    </>
+                  ) : isFirstFrameFailed ? (
+                    <>
+                      <AgentCopy
+                        tone="danger"
+                        lines={['动作首帧生成失败', '内容还在，可以在下面修改要求后重试。']}
+                      />
+                    </>
+                  ) : (
+                    <>
+                      <GenerationProgress
+                        label="动作首帧生成进度"
+                        messages={FIRST_FRAME_GENERATION_MESSAGES}
+                      />
+                      <div
+                        data-layout="agent-result-set"
+                        className="grid w-full max-w-2xl grid-cols-3 gap-3"
+                      >
+                        <GenerationCanvas label="动作首帧生成画布" />
+                      </div>
+                    </>
+                  )}
+                </AgentTurn>
+              </>
+            ) : null}
 
-            <ol className="mt-5 grid gap-2">
-              {revision.nodes.map((node, index) => (
-                <li
-                  key={node.id}
-                  className={`grid grid-cols-[28px_1fr_auto] items-center gap-3 rounded-lg border px-3 py-2 ${
-                    node.status === 'active'
-                      ? 'border-app-line-strong bg-app-accent-muted'
-                      : 'border-app-line bg-app-surface'
-                  }`}
-                >
-                  <i
-                    className={`grid h-7 w-7 place-items-center rounded-full text-[9px] not-italic ${
-                      node.status === 'passed'
-                        ? 'bg-app-accent text-app-on-accent'
-                        : node.status === 'active'
-                          ? 'border border-app-accent text-app-accent'
-                          : 'border border-app-line text-app-faint'
-                    }`}
-                  >
-                    {node.status === 'passed' ? '✓' : String(index + 1).padStart(2, '0')}
-                  </i>
-                  <span className="text-xs font-semibold text-app-ink-soft">
-                    {STEP_LABELS[node.type]}
-                  </span>
-                  <small className="text-[9px] text-app-faint">{nodeStatusLabel(node)}</small>
-                </li>
-              ))}
-            </ol>
-          </aside>
-        </div>
+            {actionStep && actionStep.status !== 'locked' ? (
+              <>
+                <AgentTurn step="action-full-frame" current={actionTurnIsCurrent}>
+                  {actionFrames.length > 0 ? (
+                    <>
+                      <AgentCopy lines={[`动作已完成，共 ${actionFrames.length} 帧。`]} />
+                      <div
+                        data-layout="agent-result-set"
+                        className="grid w-full max-w-2xl grid-cols-3 gap-3"
+                      >
+                        <AssetVisual
+                          src={actionFrames[0]!.imageUrl}
+                          alt="完整动作预览"
+                          priority
+                          className="quick-start-generated-image aspect-square w-full rounded-2xl border border-app-line bg-app-surface-muted object-contain [image-rendering:pixelated]"
+                        />
+                      </div>
+                      {reviewStep?.status === 'passed' ? (
+                        <div className="flex flex-wrap gap-2">
+                          <button
+                            type="button"
+                            onClick={() =>
+                              navigate(`/projects/${encodeURIComponent(revision.projectId)}/assets`)
+                            }
+                            className="rounded-lg border border-app-line-strong px-3 py-1.5 text-xs font-semibold text-app-ink-soft transition hover:border-app-accent hover:text-app-accent"
+                          >
+                            跳转到资产工作台
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => void openPlaytest()}
+                            className="rounded-lg border border-app-line-strong px-3 py-1.5 text-xs font-semibold text-app-ink-soft transition hover:border-app-accent hover:text-app-accent"
+                          >
+                            跳转到 Play Test
+                          </button>
+                        </div>
+                      ) : null}
+                      <div className="flex max-w-full gap-1.5 overflow-x-auto pb-1">
+                        {actionFrames.map((frame, index) => (
+                          <AssetVisual
+                            key={`${frame.imageUrl}:${index}`}
+                            src={frame.imageUrl}
+                            alt={`动作第 ${index + 1} 帧`}
+                            className="quick-start-generated-frame size-12 shrink-0 rounded-lg border border-app-line bg-app-surface-muted object-contain [image-rendering:pixelated]"
+                          />
+                        ))}
+                      </div>
+                      {reviewStep?.status === 'active' && canPublish && error ? (
+                        <button
+                          type="button"
+                          onClick={() => void saveCompletedAction()}
+                          disabled={publishing}
+                          className="w-fit rounded-xl bg-app-accent px-5 py-2.5 text-sm font-bold text-app-on-accent disabled:opacity-50"
+                        >
+                          {publishing ? '正在保存…' : '重新保存'}
+                        </button>
+                      ) : reviewStep?.status === 'passed' ? (
+                        <p className="text-sm font-medium text-app-accent">角色已经保存到资产库</p>
+                      ) : canPublish ? (
+                        <p className="text-sm text-app-muted">正在保存角色…</p>
+                      ) : null}
+                    </>
+                  ) : isActionFailed ? (
+                    <>
+                      <AgentCopy
+                        tone="danger"
+                        lines={['动作生成失败', '内容还在，可以在下面修改要求后重试。']}
+                      />
+                    </>
+                  ) : (
+                    <>
+                      <GenerationProgress
+                        label="完整动作生成进度"
+                        messages={ACTION_GENERATION_MESSAGES}
+                      />
+                      <div
+                        data-layout="agent-result-set"
+                        className="grid w-full max-w-2xl grid-cols-3 gap-3"
+                      >
+                        <GenerationCanvas label="完整动作生成画布" />
+                      </div>
+                    </>
+                  )}
+                </AgentTurn>
+              </>
+            ) : null}
 
-        <footer className="rounded-[1.3rem] border border-app-line bg-app-surface-raised/95 p-4 shadow-app-card">
-          <div className="flex flex-wrap items-center justify-between gap-4">
-            <span>
-              <small className="font-mono text-[8px] tracking-[0.12em] text-app-faint">
-                {passedCount} / {revision.nodes.length} STEPS PASSED
-              </small>
-              <b className="mt-1 block text-sm text-app-ink-soft">{status.title}</b>
-            </span>
-            <div className="flex flex-wrap gap-2">
-              {workflowIsActive(run) ? (
-                <button
-                  type="button"
-                  onClick={() => void interrupt()}
-                  className="rounded-xl border border-app-line-strong px-4 py-2 text-xs font-semibold text-app-ink-soft"
-                >
-                  中断自动制作
-                </button>
-              ) : null}
-              {canPublish && (publishing || error) ? (
-                <button
-                  type="button"
-                  onClick={() => void publishToPlaytest()}
-                  disabled={publishing}
-                  className="rounded-lg bg-app-info px-4 py-2 text-xs font-bold text-app-on-accent transition hover:bg-app-info-hover disabled:cursor-wait disabled:opacity-60"
-                >
-                  {publishing ? '正在自动导入…' : '重新导入预览台'}
-                </button>
-              ) : null}
-              {candidates.length || workflowHasFailure(run) ? (
-                <button
-                  type="button"
-                  onClick={() => navigate('/quick-start')}
-                  className="rounded-xl bg-app-accent px-4 py-2 text-xs font-semibold text-app-on-accent"
-                >
-                  新建一次创作
-                </button>
-              ) : null}
-            </div>
+            {error ? (
+              <p
+                role="alert"
+                className="ml-10 rounded-xl bg-app-danger/8 px-4 py-3 text-sm text-app-danger"
+              >
+                {error}
+              </p>
+            ) : null}
+            <div data-testid="quick-start-transcript-end" />
           </div>
-          {error ? (
-            <p role="alert" className="mt-3 text-sm text-app-danger">
-              {error}
-            </p>
-          ) : null}
-          {status.error ? (
-            <p role="alert" className="mt-3 text-sm text-app-danger">
-              {status.error}
-            </p>
-          ) : null}
+        </main>
+
+        <footer
+          data-testid="quick-start-composer"
+          data-position="floating"
+          className="absolute right-5 bottom-4 left-5 z-10 mx-auto w-auto max-w-3xl sm:right-8 sm:bottom-6 sm:left-8"
+        >
+          <div className="mb-2 flex flex-wrap items-center justify-end gap-2">
+            {exportModel ? (
+              <ExportButton
+                model={exportModel}
+                className="border-app-accent bg-app-accent text-app-on-accent hover:bg-app-accent-hover"
+              />
+            ) : null}
+            {workflowIsActive ? (
+              <button
+                type="button"
+                onClick={() => void interrupt()}
+                className="rounded-lg border border-app-line-strong bg-app-surface-raised/96 px-3 py-2 text-xs font-semibold text-app-ink-soft backdrop-blur-xl transition hover:border-app-accent hover:text-app-accent"
+              >
+                中断自动制作
+              </button>
+            ) : null}
+            {candidates.length || workflowHasFailure(revision) ? (
+              <button
+                type="button"
+                onClick={() => navigate('/quick-start')}
+                className="rounded-lg border border-app-line-strong bg-app-surface-raised/96 px-3 py-2 text-xs font-semibold text-app-ink-soft backdrop-blur-xl transition hover:border-app-accent hover:text-app-accent"
+              >
+                新建一次创作
+              </button>
+            ) : null}
+          </div>
+          <form
+            onSubmit={continueConversation}
+            className="grid grid-cols-[1fr_auto] items-center gap-1.5 rounded-2xl border border-app-line-strong bg-app-surface-raised/96 p-1.5 shadow-app-panel backdrop-blur-xl transition focus-within:border-app-accent"
+          >
+            <label htmlFor="quick-start-continuation" className="min-w-0">
+              <span className="sr-only">继续描述你的想法</span>
+              <input
+                id="quick-start-continuation"
+                aria-label="继续描述你的想法"
+                value={actionDescription}
+                onChange={(event) => setActionDescription(event.target.value)}
+                placeholder={composerPlaceholder}
+                className="h-10 w-full min-w-0 border-0 bg-transparent px-3 text-[15px] text-app-ink outline-none placeholder:text-app-faint"
+              />
+            </label>
+            <button
+              type="submit"
+              aria-label={isTemplateSelecting ? '确认选择，继续下一步' : '发送'}
+              disabled={!composerCanSubmit}
+              className="grid h-10 w-10 place-items-center rounded-lg bg-app-accent text-app-on-accent transition hover:bg-app-accent-hover active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-35"
+            >
+              <ArrowUp aria-hidden="true" size={16} weight="bold" />
+            </button>
+          </form>
         </footer>
       </div>
     </section>
@@ -953,7 +1309,7 @@ function describeRun(_run: WorkflowRun, workflow: WorkflowRun) {
   if (failedStep) {
     return {
       title: '生成失败',
-      description: '这次失败已保存在当前运行记录中，不会自动创建第二次任务。',
+      description: '你的描述仍然保留在这里，可以修改后重新尝试。',
       error: failedStep?.error || '角色图生成失败',
     }
   }
@@ -1001,6 +1357,13 @@ function describeRun(_run: WorkflowRun, workflow: WorkflowRun) {
     (n): n is CharacterTemplateWorkflowNode => n.type === 'character-template',
   )
   if (templateNode?.status === 'active') {
+    if (templateNode.phase === 'selecting') {
+      return {
+        title: '选择一个喜欢的角色',
+        description: '选择后可以继续描述这个角色接下来要做的动作。',
+        error: null,
+      }
+    }
     return {
       title: templateNode.generations.length > 0 ? '正在生成角色图' : '正在创建生成任务',
       description:
@@ -1018,7 +1381,12 @@ function describeRun(_run: WorkflowRun, workflow: WorkflowRun) {
   }
 }
 
-/** 只有完整动作和可审核状态同时具备时，才允许自动发布当前版本。 */
+function workflowPrompt(run: WorkflowRun): string {
+  const setup = run.nodes.find((node) => node.type === 'character-setup')
+  return setup?.type === 'character-setup' ? setup.input.prompt : ''
+}
+
+/** 完整动作进入可审核状态后沿用原有自动保存时机，只取消离开 Quick Start 的跳转。 */
 function automaticPublishKey(run: WorkflowRun): string | null {
   const actionStep = latestActionStep(run)
   const reviewStep = actionStep ? pairedReviewStep(run, actionStep.id) : null
@@ -1028,22 +1396,10 @@ function automaticPublishKey(run: WorkflowRun): string | null {
   return hasFrames && reviewReady && actionStep ? `${run.id}:${actionStep.id}` : null
 }
 
-function workflowPrompt(run: WorkflowRun): string {
-  const setup = run.nodes.find((node) => node.type === 'character-setup')
-  return setup?.type === 'character-setup' ? setup.input.prompt : ''
-}
-
 function workflowHasFailure(run: WorkflowRun): boolean {
   return run.nodes.some((node) => !node.deletedAt && node.status === 'failed')
 }
 
-function workflowIsActive(run: WorkflowRun): boolean {
-  return (
-    run.nodes.some((node) => !node.deletedAt && node.status === 'active') &&
-    !workflowHasFailure(run)
-  )
-}
-
 /** 返回当前 Run 最后追加且未删除的动作；旧动作只保留作历史结果。 */
 function latestActionStep(workflow: WorkflowRun) {
   return (
@@ -1071,14 +1427,6 @@ function pairedReviewStep(workflow: WorkflowRun, actionStepId: string) {
   )
 }
 
-function nodeStatusLabel(node: WorkflowNode) {
-  if (node.deletedAt) return '已删除'
-  if (node.status === 'passed') return '完成'
-  if (node.status === 'active') return '当前'
-  if (node.status === 'failed') return '失败'
-  return '等待'
-}
-
 function errorMessage(cause: unknown, fallback: string) {
   return cause instanceof Error && cause.message.trim() ? cause.message.trim() : fallback
 }
diff --git a/frontend/src/pages/quick-start/kinetic-copy-cycle.css b/frontend/src/pages/quick-start/kinetic-copy-cycle.css
new file mode 100644
index 00000000..bd5f574c
--- /dev/null
+++ b/frontend/src/pages/quick-start/kinetic-copy-cycle.css
@@ -0,0 +1,176 @@
+.kinetic-copy-cycle {
+  display: grid;
+  place-items: center;
+}
+
+.quick-start-agent-copy {
+  place-items: start;
+  text-align: left;
+}
+
+.quick-start-agent-copy .kinetic-copy-line-inner-prefixed {
+  justify-content: flex-start;
+}
+
+.kinetic-copy-line {
+  display: block;
+  overflow: hidden;
+  min-height: 1.55em;
+}
+
+.kinetic-copy-line-inner {
+  display: block;
+  opacity: 0;
+  letter-spacing: 0.075em;
+  transform: translate3d(0, 120%, 0);
+  animation: kinetic-copy-line-enter 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation-delay: calc(210ms + var(--kinetic-copy-line-index) * 90ms);
+  backface-visibility: hidden;
+  will-change: opacity, transform, letter-spacing;
+}
+
+.kinetic-copy-line-inner-prefixed {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.kinetic-copy-cycle-resting .kinetic-copy-line-inner {
+  opacity: 1;
+  letter-spacing: -0.01em;
+  transform: translate3d(0, 0, 0);
+  animation: none;
+}
+
+.kinetic-copy-cycle-exiting .kinetic-copy-line-inner {
+  opacity: 1;
+  letter-spacing: -0.01em;
+  transform: translate3d(0, 0, 0);
+  animation: kinetic-copy-line-exit 400ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
+  animation-delay: calc(var(--kinetic-copy-line-reverse-index) * 55ms);
+}
+
+.kinetic-copy-prefix {
+  display: inline-block;
+}
+
+.kinetic-copy-character {
+  display: inline-block;
+}
+
+.kinetic-copy-cycle-entering[data-copy-motion-mode='characters'] .kinetic-copy-line-inner {
+  opacity: 1;
+  letter-spacing: -0.01em;
+  transform: translate3d(0, 0, 0);
+  animation: none;
+}
+
+.kinetic-copy-cycle-entering[data-copy-motion-mode='characters'] .kinetic-copy-prefix {
+  opacity: 0;
+  transform: translate3d(0, 0.38em, 0);
+  filter: blur(4px);
+  animation: kinetic-copy-character-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) 90ms forwards;
+}
+
+.kinetic-copy-cycle-entering[data-copy-motion-mode='characters'] .kinetic-copy-character {
+  opacity: 0;
+  transform: translate3d(0, 0.42em, 0);
+  filter: blur(4px);
+  animation: kinetic-copy-character-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation-delay: calc(100ms + min(var(--kinetic-copy-character-index) * 24ms, 340ms));
+  will-change: opacity, transform, filter;
+}
+
+.kinetic-copy-cycle-exiting[data-copy-motion-mode='characters'] .kinetic-copy-line-inner {
+  opacity: 1;
+  letter-spacing: -0.01em;
+  transform: translate3d(0, -0.16em, 0);
+  animation: none;
+  transition: transform 420ms cubic-bezier(0.55, 0, 1, 0.45);
+}
+
+.kinetic-copy-cycle-exiting[data-copy-motion-mode='characters'] .kinetic-copy-prefix {
+  opacity: 1;
+  animation: kinetic-copy-character-exit 300ms cubic-bezier(0.55, 0, 1, 0.45) 140ms forwards;
+}
+
+.kinetic-copy-cycle-exiting[data-copy-motion-mode='characters'] .kinetic-copy-character {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+  filter: blur(0);
+  animation: kinetic-copy-character-exit 300ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
+  animation-delay: calc(min(var(--kinetic-copy-character-reverse-index) * 10ms, 140ms));
+  will-change: opacity, transform, filter;
+}
+
+@keyframes kinetic-copy-line-enter {
+  0% {
+    opacity: 0;
+    letter-spacing: 0.075em;
+    transform: translate3d(0, 120%, 0);
+  }
+  100% {
+    opacity: 1;
+    letter-spacing: -0.01em;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes kinetic-copy-line-exit {
+  0% {
+    opacity: 1;
+    letter-spacing: -0.01em;
+    transform: translate3d(0, 0, 0);
+  }
+  46% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    letter-spacing: 0.045em;
+    transform: translate3d(0, -118%, 0);
+  }
+}
+
+@keyframes kinetic-copy-character-enter {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 0.42em, 0);
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    filter: blur(0);
+  }
+}
+
+@keyframes kinetic-copy-character-exit {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(0, -0.42em, 0);
+    filter: blur(4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kinetic-copy-line-inner {
+    opacity: 1;
+    letter-spacing: -0.01em;
+    transform: none;
+    animation: none;
+  }
+
+  .kinetic-copy-prefix,
+  .kinetic-copy-character {
+    opacity: 1;
+    transform: none;
+    filter: none;
+    animation: none;
+  }
+}
diff --git a/frontend/src/pages/quick-start/kinetic-copy-cycle.test.tsx b/frontend/src/pages/quick-start/kinetic-copy-cycle.test.tsx
new file mode 100644
index 00000000..57465484
--- /dev/null
+++ b/frontend/src/pages/quick-start/kinetic-copy-cycle.test.tsx
@@ -0,0 +1,190 @@
+// @vitest-environment jsdom
+import { act, cleanup, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { KineticCopyCycle } from './kinetic-copy-cycle'
+
+afterEach(() => {
+  cleanup()
+  vi.unstubAllGlobals()
+  vi.useRealTimers()
+})
+
+describe('KineticCopyCycle', () => {
+  it('layers optional mirrored character motion over the shared transition', () => {
+    const characterView = render(
+      <KineticCopyCycle
+        active={false}
+        motionMode="characters"
+        messages={[
+          {
+            prefix: '试试',
+            lines: ['银色卷发的裁缝'],
+          },
+        ]}
+      />,
+    )
+
+    expect(
+      characterView.container
+        .querySelector('[data-copy-motion-mode]')
+        ?.getAttribute('data-copy-motion-mode'),
+    ).toBe('characters')
+    const characters =
+      characterView.container.querySelectorAll<HTMLElement>('.kinetic-copy-character')
+    expect(characters).toHaveLength(7)
+    expect(characters[0].style.getPropertyValue('--kinetic-copy-character-reverse-index')).toBe('6')
+    expect(characters[6].style.getPropertyValue('--kinetic-copy-character-reverse-index')).toBe('0')
+    expect(screen.getByText('试试').querySelector('.kinetic-copy-character')).toBeNull()
+    expect(characterView.container.textContent).toBe('试试银色卷发的裁缝')
+
+    characterView.unmount()
+    const lineView = render(
+      <KineticCopyCycle active={false} messages={[{ lines: ['登录页原动画'] }]} />,
+    )
+    expect(lineView.container.querySelectorAll('.kinetic-copy-character')).toHaveLength(0)
+    expect(lineView.container.textContent).toBe('登录页原动画')
+  })
+
+  it('vertically centers a compact prefix beside the main subtitle', () => {
+    render(
+      <KineticCopyCycle
+        active={false}
+        messages={[
+          {
+            prefix: '试试',
+            prefixClassName: 'text-[10px]',
+            lines: ['银色卷发、戴星形单片眼镜的裁缝'],
+          },
+        ]}
+      />,
+    )
+
+    expect(screen.getByText('试试').parentElement?.className).toContain(
+      'kinetic-copy-line-inner-prefixed',
+    )
+  })
+
+  it('lets the current subtitle leave before the next complete message enters', () => {
+    vi.useFakeTimers()
+    vi.stubGlobal('matchMedia', () => ({
+      matches: false,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }))
+
+    const { container } = render(
+      <KineticCopyCycle
+        as="h1"
+        ariaLabel="角色灵感"
+        firstCycleMs={2_400}
+        loopStartIndex={1}
+        messages={[
+          { lines: ['想做一个什么角色？'] },
+          { prefix: '试试', lines: ['银色卷发、戴星形单片眼镜的裁缝'] },
+          { prefix: '试试', lines: ['长着鹿角、披苔藓斗篷的邮差'] },
+        ]}
+      />,
+    )
+    const cycle = () => container.querySelector<HTMLElement>('[data-copy-phase]')
+    const heading = screen.getByRole('heading', { name: '角色灵感' })
+
+    expect(cycle()?.dataset.copyPhase).toBe('entering')
+    expect(heading.textContent).toBe('想做一个什么角色？')
+
+    act(() => vi.advanceTimersByTime(760))
+    expect(cycle()?.dataset.copyPhase).toBe('resting')
+
+    act(() => vi.advanceTimersByTime(1_640))
+    expect(cycle()?.dataset.copyPhase).toBe('exiting')
+    expect(heading.textContent).toBe('想做一个什么角色？')
+
+    act(() => vi.advanceTimersByTime(460))
+    expect(cycle()?.dataset.copyPhase).toBe('entering')
+    expect(heading.textContent).toBe('试试银色卷发、戴星形单片眼镜的裁缝')
+
+    act(() => vi.advanceTimersByTime(4_200))
+    expect(heading.textContent).toBe('试试长着鹿角、披苔藓斗篷的邮差')
+
+    act(() => vi.advanceTimersByTime(4_200))
+    expect(heading.textContent).toBe('试试银色卷发、戴星形单片眼镜的裁缝')
+    expect(heading.textContent).not.toContain('想做一个什么角色？')
+  })
+
+  it('lets the current subtitle exit before a replacement sequence enters', () => {
+    vi.useFakeTimers()
+    vi.stubGlobal('matchMedia', () => ({
+      matches: false,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }))
+    const ideas = [{ lines: ['想做一个什么角色？'] }, { lines: ['银色卷发的裁缝'] }] as const
+    const guidance = [
+      { lines: ['想做一个什么角色？'] },
+      { lines: ['先写身份，再补最醒目的外形'] },
+    ] as const
+    const { container, rerender } = render(
+      <KineticCopyCycle
+        ariaLabel="角色灵感"
+        firstCycleMs={2_400}
+        loopStartIndex={1}
+        messages={ideas}
+      />,
+    )
+    const cycle = () => container.querySelector<HTMLElement>('[data-copy-phase]')
+
+    act(() => vi.advanceTimersByTime(3_000))
+    expect(screen.getByLabelText('角色灵感').textContent).toBe('银色卷发的裁缝')
+
+    rerender(
+      <KineticCopyCycle
+        ariaLabel="角色灵感"
+        firstCycleMs={2_400}
+        loopStartIndex={1}
+        messages={guidance}
+      />,
+    )
+    expect(cycle()?.dataset.copyPhase).toBe('exiting')
+    expect(screen.getByLabelText('角色灵感').textContent).toBe('银色卷发的裁缝')
+
+    act(() => vi.advanceTimersByTime(460))
+    expect(cycle()?.dataset.copyPhase).toBe('entering')
+    expect(screen.getByLabelText('角色灵感').textContent).toBe('想做一个什么角色？')
+
+    act(() => vi.advanceTimersByTime(2_860))
+    expect(screen.getByLabelText('角色灵感').textContent).toBe('先写身份，再补最醒目的外形')
+  })
+
+  it('returns to a static first message when cycling is paused', () => {
+    vi.useFakeTimers()
+    vi.stubGlobal('matchMedia', () => ({
+      matches: false,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }))
+
+    const { rerender } = render(
+      <KineticCopyCycle
+        active
+        as="h1"
+        ariaLabel="角色灵感"
+        firstCycleMs={2_400}
+        messages={[{ lines: ['想做一个什么角色？'] }, { lines: ['银色卷发的裁缝'] }]}
+      />,
+    )
+
+    act(() => vi.advanceTimersByTime(3_000))
+    expect(screen.getByRole('heading', { name: '角色灵感' }).textContent).toBe('银色卷发的裁缝')
+
+    rerender(
+      <KineticCopyCycle
+        active={false}
+        as="h1"
+        ariaLabel="角色灵感"
+        firstCycleMs={2_400}
+        messages={[{ lines: ['想做一个什么角色？'] }, { lines: ['银色卷发的裁缝'] }]}
+      />,
+    )
+    expect(screen.getByRole('heading', { name: '角色灵感' }).textContent).toBe('想做一个什么角色？')
+  })
+})
diff --git a/frontend/src/pages/quick-start/kinetic-copy-cycle.tsx b/frontend/src/pages/quick-start/kinetic-copy-cycle.tsx
new file mode 100644
index 00000000..41eab7d4
--- /dev/null
+++ b/frontend/src/pages/quick-start/kinetic-copy-cycle.tsx
@@ -0,0 +1,162 @@
+import { useEffect, useState, type CSSProperties, type ElementType } from 'react'
+
+import './kinetic-copy-cycle.css'
+
+export type KineticCopyMessage =
+  | readonly string[]
+  | {
+      lines: readonly string[]
+      prefix?: string
+      className?: string
+      prefixClassName?: string
+    }
+
+export interface KineticCopyCycleProps {
+  messages: readonly KineticCopyMessage[]
+  active?: boolean
+  as?: ElementType
+  ariaLabel?: string
+  className?: string
+  firstCycleMs?: number
+  cycleMs?: number
+  loopStartIndex?: number
+  motionMode?: 'line' | 'characters'
+}
+
+type CopyPhase = 'entering' | 'resting' | 'exiting'
+
+const ENTER_DURATION_MS = 760
+const EXIT_DURATION_MS = 460
+const DEFAULT_CYCLE_MS = 4_200
+
+function messageParts(message: KineticCopyMessage) {
+  return Array.isArray(message)
+    ? { lines: message as readonly string[] }
+    : (message as Exclude<KineticCopyMessage, readonly string[]>)
+}
+
+/** Quick Start 的裁切字幕：完整退场后再换文案，避免重叠与跳字。 */
+export function KineticCopyCycle({
+  messages,
+  active = true,
+  as: Tag = 'div',
+  ariaLabel,
+  className = '',
+  firstCycleMs = DEFAULT_CYCLE_MS,
+  cycleMs = DEFAULT_CYCLE_MS,
+  loopStartIndex = 0,
+  motionMode = 'line',
+}: KineticCopyCycleProps) {
+  const [renderedMessages, setRenderedMessages] = useState(messages)
+  const [copyIndex, setCopyIndex] = useState(0)
+  const [phase, setPhase] = useState<CopyPhase>('entering')
+
+  useEffect(() => {
+    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false
+    if (messages === renderedMessages) return
+
+    if (!active || reduceMotion) {
+      setRenderedMessages(messages)
+      setCopyIndex(0)
+      setPhase('resting')
+      return
+    }
+
+    setPhase('exiting')
+    const replacementTimer = window.setTimeout(() => {
+      setRenderedMessages(messages)
+      setCopyIndex(0)
+      setPhase('entering')
+    }, EXIT_DURATION_MS)
+
+    return () => window.clearTimeout(replacementTimer)
+  }, [active, messages, renderedMessages])
+
+  useEffect(() => {
+    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false
+    if (messages !== renderedMessages) return
+
+    setCopyIndex(0)
+    setPhase(active && !reduceMotion ? 'entering' : 'resting')
+    if (!active || reduceMotion || renderedMessages.length < 2) return
+
+    let exitTimer: number | null = null
+    let swapTimer: number | null = null
+    let restTimer: number | null = window.setTimeout(() => setPhase('resting'), ENTER_DURATION_MS)
+
+    const scheduleExit = (delay: number) => {
+      exitTimer = window.setTimeout(() => {
+        setPhase('exiting')
+        swapTimer = window.setTimeout(() => {
+          setCopyIndex((current) =>
+            current + 1 < renderedMessages.length ? current + 1 : loopStartIndex,
+          )
+          setPhase('entering')
+          restTimer = window.setTimeout(() => setPhase('resting'), ENTER_DURATION_MS)
+          scheduleExit(Math.max(0, cycleMs - EXIT_DURATION_MS))
+        }, EXIT_DURATION_MS)
+      }, delay)
+    }
+
+    scheduleExit(firstCycleMs)
+
+    return () => {
+      if (exitTimer !== null) window.clearTimeout(exitTimer)
+      if (swapTimer !== null) window.clearTimeout(swapTimer)
+      if (restTimer !== null) window.clearTimeout(restTimer)
+    }
+  }, [active, cycleMs, firstCycleMs, loopStartIndex, messages, renderedMessages])
+
+  if (renderedMessages.length === 0) return null
+
+  const message = messageParts(renderedMessages[copyIndex % renderedMessages.length])
+
+  return (
+    <Tag
+      aria-hidden={ariaLabel ? undefined : true}
+      aria-label={ariaLabel}
+      data-copy-index={copyIndex}
+      data-copy-phase={phase}
+      data-copy-motion-mode={motionMode}
+      className={`kinetic-copy-cycle kinetic-copy-cycle-${phase} ${className}`}
+    >
+      {message.lines.map((line, lineIndex) => (
+        <span key={`${copyIndex}-${line}`} className="kinetic-copy-line">
+          <span
+            className={`kinetic-copy-line-inner ${message.prefix ? 'kinetic-copy-line-inner-prefixed' : ''} ${message.className ?? ''}`}
+            style={
+              {
+                '--kinetic-copy-line-index': lineIndex,
+                '--kinetic-copy-line-reverse-index': message.lines.length - lineIndex - 1,
+              } as CSSProperties
+            }
+          >
+            {lineIndex === 0 && message.prefix ? (
+              <span className={`kinetic-copy-prefix ${message.prefixClassName ?? ''}`}>
+                {message.prefix}
+              </span>
+            ) : null}
+            {motionMode === 'characters'
+              ? Array.from(line).map((character, characterIndex, characters) => (
+                  <span
+                    key={`${character}-${characterIndex}`}
+                    aria-hidden="true"
+                    className="kinetic-copy-character"
+                    style={
+                      {
+                        '--kinetic-copy-character-index': characterIndex,
+                        '--kinetic-copy-character-reverse-index':
+                          characters.length - characterIndex - 1,
+                      } as CSSProperties
+                    }
+                  >
+                    {character === ' ' ? '\u00a0' : character}
+                  </span>
+                ))
+              : line}
+          </span>
+        </span>
+      ))}
+    </Tag>
+  )
+}
diff --git a/frontend/src/pages/quick-start/quick-start-motion.css b/frontend/src/pages/quick-start/quick-start-motion.css
new file mode 100644
index 00000000..473de232
--- /dev/null
+++ b/frontend/src/pages/quick-start/quick-start-motion.css
@@ -0,0 +1,194 @@
+.quick-start-agent-turn {
+  width: 100%;
+}
+
+/* 逐字进入完成后再开高光，避免父层裁字与子层字符同时绘制同一句。 */
+.quick-start-generation-shimmer.kinetic-copy-cycle-resting .kinetic-copy-line-inner {
+  color: transparent;
+  background: var(--color-app-muted)
+    linear-gradient(
+      to right,
+      var(--color-app-muted) 0%,
+      rgb(255 255 255 / 75%) 40%,
+      rgb(255 255 255 / 75%) 60%,
+      var(--color-app-muted) 100%
+    );
+  background-position: -100% 0;
+  background-repeat: no-repeat;
+  background-size: 50% 200%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: quick-start-copy-shimmer 1.333s linear infinite;
+}
+
+.quick-start-generation-shimmer.kinetic-copy-cycle-entering .kinetic-copy-line-inner,
+.quick-start-generation-shimmer.kinetic-copy-cycle-exiting .kinetic-copy-line-inner {
+  color: var(--color-app-muted);
+  background: none;
+  -webkit-text-fill-color: currentColor;
+}
+
+@keyframes quick-start-copy-shimmer {
+  from {
+    background-position: -100% 0;
+  }
+  to {
+    background-position: 250% 0;
+  }
+}
+
+.quick-start-generation-canvas {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+  isolation: isolate;
+  border: 1px solid var(--color-app-line);
+  border-radius: 1rem;
+  background: var(--color-app-surface-raised);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 62%, transparent);
+  animation: quick-start-canvas-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation-delay: 100ms;
+}
+
+.quick-start-generation-dots {
+  position: absolute;
+  inset: 8%;
+  display: grid;
+  grid-template-columns: repeat(24, 1fr);
+  grid-template-rows: repeat(18, 1fr);
+}
+
+.quick-start-generation-dot {
+  align-self: center;
+  justify-self: center;
+  width: clamp(0.1rem, 0.34vw, 0.18rem);
+  aspect-ratio: 1;
+  border-radius: 0;
+  background: color-mix(in srgb, var(--color-app-ink) 78%, var(--color-app-accent));
+  opacity: 0.035;
+  transform: scale(0.45);
+  animation: quick-start-pixel-matrix 4.1s steps(9, end) infinite;
+  animation-delay: var(--generation-delay);
+}
+
+.quick-start-reveal-card {
+  opacity: 0;
+  filter: blur(7px);
+  transform: translate3d(0, 13px, 0) scale(0.982);
+  animation: quick-start-card-reveal 680ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation-delay: calc(70ms + var(--reveal-index, 0) * 105ms);
+  will-change: opacity, filter, transform;
+}
+
+.quick-start-generated-image {
+  opacity: 0;
+  filter: blur(13px) contrast(0.88);
+  transform: scale(1.018);
+  animation: quick-start-image-resolve 920ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation-delay: calc(150ms + var(--reveal-index, 0) * 70ms);
+  will-change: opacity, filter, transform;
+}
+
+.quick-start-generated-frame {
+  opacity: 0;
+  filter: blur(5px);
+  transform: translateY(4px);
+  animation: quick-start-frame-resolve 360ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation-delay: calc(110ms + var(--reveal-index, 0) * 38ms);
+}
+
+@keyframes quick-start-canvas-enter {
+  from {
+    opacity: 0;
+    filter: blur(10px);
+    transform: translate3d(0, 10px, 0) scale(0.988);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes quick-start-pixel-matrix {
+  0%,
+  8% {
+    opacity: 0.025;
+    transform: scale(0.4);
+  }
+  24% {
+    opacity: calc(0.1 + var(--generation-level) * 0.2);
+    transform: scale(0.72);
+  }
+  43% {
+    opacity: calc(0.22 + var(--generation-level) * 0.62);
+    transform: scale(1);
+  }
+  61% {
+    opacity: calc(0.08 + var(--generation-level) * 0.3);
+    transform: scale(0.68);
+  }
+  77% {
+    opacity: calc(0.17 + var(--generation-level) * 0.49);
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 0.045;
+    transform: scale(0.45);
+  }
+}
+
+@keyframes quick-start-card-reveal {
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes quick-start-image-resolve {
+  46% {
+    opacity: 0.78;
+    filter: blur(4px) contrast(0.94);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0) contrast(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes quick-start-frame-resolve {
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .quick-start-generation-shimmer.kinetic-copy-cycle-resting .kinetic-copy-line-inner {
+    color: var(--color-app-muted);
+    background: none;
+    -webkit-text-fill-color: currentColor;
+  }
+
+  .quick-start-generation-canvas,
+  .quick-start-generation-dot,
+  .quick-start-reveal-card,
+  .quick-start-generated-image {
+    opacity: 1;
+    filter: none;
+    transform: none;
+    animation: none;
+  }
+
+  .quick-start-generated-frame {
+    opacity: 1;
+    filter: none;
+    transform: none;
+    animation: none;
+  }
+}