From 756638a28a40d175284b34d1bff082e02b16b45f Mon Sep 17 00:00:00 2001
From: brother7 <7brother7@gmail.com>
Date: Wed, 2 Sep 2026 17:48:03 +0800
Subject: [PATCH] feat: simplify AI design for young creators

---
 .../20260902-design-youth-client-7c5e3a82.md  | 107 ++
 src/pages/ImageCanvas/CreativeChoiceGrid.tsx  |  96 ++
 .../ImageCanvas/DesignConversationPane.tsx    | 101 +-
 .../ImageCanvas/DesignProductionPanel.tsx     | 160 ++-
 src/pages/ImageCanvas/FineTuneDrawer.tsx      | 949 ++++++++++++++++++
 src/pages/ImageCanvas/YouthCreationCard.tsx   | 478 +++++++++
 src/pages/ImageCanvas/index.tsx               | 213 ++--
 .../ImageCanvas/youth-form-projection.ts      | 398 ++++++++
 src/pages/ImageCanvas/youth-issue-copy.ts     | 119 +++
 src/stores/image-workspace.ts                 |  36 +-
 tests/e2e/image-workspace-v2.spec.ts          |  81 +-
 tests/unit/fine-tune-drawer.test.tsx          | 277 +++++
 tests/unit/image-canvas-page.test.tsx         |  75 +-
 tests/unit/image-workspace-store.test.ts      | 120 +++
 tests/unit/youth-creation-card.test.tsx       | 343 +++++++
 tests/unit/youth-form-projection.test.ts      | 290 ++++++
 tests/unit/youth-issue-copy.test.ts           |  49 +
 17 files changed, 3595 insertions(+), 297 deletions(-)
 create mode 100644 .project-docs/30-worklog/tasks/20260902-design-youth-client-7c5e3a82.md
 create mode 100644 src/pages/ImageCanvas/CreativeChoiceGrid.tsx
 create mode 100644 src/pages/ImageCanvas/FineTuneDrawer.tsx
 create mode 100644 src/pages/ImageCanvas/YouthCreationCard.tsx
 create mode 100644 src/pages/ImageCanvas/youth-form-projection.ts
 create mode 100644 src/pages/ImageCanvas/youth-issue-copy.ts
 create mode 100644 tests/unit/fine-tune-drawer.test.tsx
 create mode 100644 tests/unit/youth-creation-card.test.tsx
 create mode 100644 tests/unit/youth-form-projection.test.ts
 create mode 100644 tests/unit/youth-issue-copy.test.ts

diff --git a/.project-docs/30-worklog/tasks/20260902-design-youth-client-7c5e3a82.md b/.project-docs/30-worklog/tasks/20260902-design-youth-client-7c5e3a82.md
new file mode 100644
index 00000000..6e7a1be3
--- /dev/null
+++ b/.project-docs/30-worklog/tasks/20260902-design-youth-client-7c5e3a82.md
@@ -0,0 +1,107 @@
+# Task: Implement youth-facing AI Design experience
+
+## Identity
+
+- Task ID: 20260902-design-youth-client-7c5e3a82
+- Mode: Feature
+- Branch: codex/20260902-design-youth-client-7c5e3a82-design-youth-client
+- Worktree: D:\Datas\OthersProjects\makelore-design-youth-client-7c5e3a82
+- Base commit: 841273b43354b2237a52a7081a9fceb647ef4e3f
+- Owner: codex-root
+- Status: Ready for integration
+
+## Scope
+
+- Replace the default comprehensive AI Design form with conversation plus a compact
+  “我的创作” Creation Card projected from the canonical Current Specification.
+- Add a reviewed A/B/C field-presentation catalog, pure youth projection, contextual
+  “精细调整” controls, responsive desktop/mobile composition, and youth-facing
+  conversation/Quote/Task/result copy.
+- Reuse the existing V2 typed reducer, Quote confirmation, Task/Asset reconciliation,
+  upload and local-draft behavior; do not add another state store or API contract.
+
+## Intent And Constraints
+
+- One understandable default serves creators aged 8-16; there are no age or expert
+  modes. Advanced control is contextual progressive disclosure.
+- Conversation is the default mobile surface. Desktop gives conversation visual
+  priority and keeps the concise Creation Card visible.
+- Direct choices use existing typed semantic commands and never synthesize chat
+  turns. Readiness is derived from concrete blockers/questions, not field counts.
+- Preserve Main ownership of Works credentials and V2 transport, Chinese-only UI,
+  existing light visual language, 44 px targets, keyboard focus and reduced motion.
+- No database/DTO change, second brief/store, compatibility layer, broad redesign,
+  package, deployment, publication, push or paid generation is in scope.
+
+## Concurrent Task Gate
+
+- Task ID: `20260902-design-youth-client-7c5e3a82`
+- Mode: Feature
+- Branch/worktree: `codex/20260902-design-youth-client-7c5e3a82-design-youth-client` /
+  `D:\Datas\OthersProjects\makelore-design-youth-client-7c5e3a82`
+- Base commit: `841273b43354b2237a52a7081a9fceb647ef4e3f`
+- Ownership result: Isolated and claimed by `codex-root`.
+- Other active work: Model Tools owns a separate integration worktree and Plugin/Pi
+  files; it does not own the ImageCanvas Design surface.
+- Gate result: Passed.
+
+## Project Context Loaded
+
+- Read the startup memory set, current state, architecture, business rules, success
+  criteria, ADR-007, commitments, peer task scope, and the accepted youth
+  experience/implementation specifications.
+- The Current Specification remains the single semantic authority; Renderer drafts,
+  Task events and assistant deltas cannot become Creation Card truth.
+- The UI reference library reinforced progressive disclosure and accessibility; its
+  parallax/dark-mode direction was rejected as inconsistent with MakeLore.
+- Planning Gate result: Passed.
+
+## Outcome
+
+- Replaced the default professional field matrix with a conversation-first AI Design
+  surface and one compact “我的创作” card. The card is a pure projection of the
+  canonical Workspace Specification, Quote, Task and Asset state; the existing V2
+  reducer and typed commands remain the only write path.
+- Added an exhaustive A/B/C presentation catalog for every current Specification
+  field, one active creative choice with an additional “你帮我选” option, contextual
+  “精细调整”, and a responsive single-mounted card that becomes a mobile bottom
+  sheet at narrow widths.
+- Reworded conversation, Quote, Task, recovery and result states for creators aged
+  8–16. Compiler and Provider issue messages now cross a code-based youth-copy
+  boundary with safe unknown fallbacks, so raw English or technical messages are
+  not rendered in the youth UI.
+- Kept video story editing on stable canonical Shot identities. The drawer supports
+  the server contract of up to 24 Shots and preserves timing, camera, framing,
+  motion, focus and transition data while a creator edits only a story beat.
+- Bound transient Quote blockers to the canonical Specification revision: same-
+  revision refreshes preserve useful feedback, while a successful semantic change
+  clears stale blockers and enables a fresh Quote check. A terminal
+  `design_quote_blocked` response or event also settles its pending operation, so an
+  old Quote request cannot remain as a misleading “unknown” recovery action.
+- No database migration, public DTO/API change, compatibility layer, second semantic
+  store, Provider activation or paid generation was added.
+
+## Verification
+
+- `pnpm exec vitest run tests/unit/youth-form-projection.test.ts tests/unit/youth-creation-card.test.tsx tests/unit/youth-issue-copy.test.ts tests/unit/fine-tune-drawer.test.tsx tests/unit/image-workspace-store.test.ts tests/unit/image-canvas-page.test.tsx` — 40 passed, including terminal Quote-blocked settlement, blocked-event recovery into a revised Quote, 24-Shot preservation, and explicit deletion of a cleared Shot.
+- Broad client suite — 1802 passed and 2 skipped; two Electron binary-preparation
+  cases initially reported transient Windows `spawn EBUSY`, then their focused
+  rerun passed 3/3. The separate pressure suite passed 1/1.
+- `pnpm exec tsc --noEmit` — passed.
+- Scoped ESLint over every changed/new source and test file — passed.
+- `pnpm run build:vite` — passed; only pre-existing chunk-size and mixed static/
+  dynamic import warnings were reported.
+- `pnpm exec playwright test tests/e2e/image-workspace-v2.spec.ts` — 2 passed,
+  covering 375 px, 768 px and desktop composition plus direct edit, chat, Quote,
+  confirmation and Task flow.
+
+## Follow-ups
+
+- Run moderated usability sessions with creators aged 8–16 after integration.
+- Paid Provider activation and live paid-generation acceptance remain a separate
+  release gate.
+
+## Promotion Candidates
+
+- None. This task implements the already accepted youth Design experience and does
+  not introduce a new canonical architecture or product decision.
diff --git a/src/pages/ImageCanvas/CreativeChoiceGrid.tsx b/src/pages/ImageCanvas/CreativeChoiceGrid.tsx
new file mode 100644
index 00000000..23e0bebe
--- /dev/null
+++ b/src/pages/ImageCanvas/CreativeChoiceGrid.tsx
@@ -0,0 +1,96 @@
+import { Check, Sparkles, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { YouthActiveChoice } from './youth-form-projection';
+
+export type CreativeChoiceGridProps = {
+  choice: YouthActiveChoice;
+  disabled?: boolean;
+  onSelect: (optionId: string) => void;
+  onReject?: () => void;
+};
+
+/**
+ * A small, keyboard-friendly surface for the one decision the creator needs
+ * to make next. The server-provided option label stays visible verbatim (so
+ * options such as “你帮我选” remain useful), while the first option gets a
+ * gentle recommendation marker.
+ */
+export function CreativeChoiceGrid({
+  choice,
+  disabled = false,
+  onSelect,
+  onReject,
+}: CreativeChoiceGridProps) {
+  if (choice.options.length === 0) return null;
+
+  return (
+    <section
+      data-testid="youth-creation-choice"
+      className="rounded-2xl border border-brand/20 bg-brand/[0.035] p-4"
+    >
+      <div className="flex items-start gap-2.5">
+        <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-brand/[0.1] text-brand">
+          <Sparkles className="h-4 w-4" aria-hidden="true" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h3 className="text-sm font-semibold text-foreground">{choice.title}</h3>
+          <p className="mt-1 text-xs leading-5 text-muted-foreground">{choice.body}</p>
+        </div>
+      </div>
+
+      <fieldset className="mt-3 space-y-2">
+        <legend className="sr-only">选择一个创作方向</legend>
+        {choice.options.map((option, index) => {
+          const descriptionId = `${choice.id}-${option.id}-description`;
+          return (
+            <button
+              key={option.id}
+              type="button"
+              disabled={disabled}
+              aria-describedby={option.description ? descriptionId : undefined}
+              className={cn(
+                'flex min-h-11 w-full items-center gap-3 rounded-xl border border-border/70 bg-background px-3 text-left transition-colors duration-150',
+                'hover:border-brand/35 hover:bg-brand/[0.04]',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 focus-visible:ring-offset-2',
+                'disabled:pointer-events-none disabled:opacity-55',
+              )}
+              onClick={() => onSelect(option.id)}
+            >
+              <span className="flex min-w-0 flex-1 flex-col justify-center gap-0.5 py-2">
+                <span className="flex flex-wrap items-center gap-2 text-sm font-medium text-foreground">
+                  <span>{option.label}</span>
+                  {index === 0 && (
+                    <span className="rounded-full bg-brand/[0.1] px-2 py-0.5 text-[11px] font-medium text-brand">
+                      推荐
+                    </span>
+                  )}
+                </span>
+                {option.description && (
+                  <span
+                    id={descriptionId}
+                    className="text-xs leading-5 text-muted-foreground"
+                  >
+                    {option.description}
+                  </span>
+                )}
+              </span>
+              <Check className="h-4 w-4 shrink-0 text-brand/75" aria-hidden="true" />
+            </button>
+          );
+        })}
+      </fieldset>
+
+      {onReject && (
+        <button
+          type="button"
+          disabled={disabled}
+          className="mt-2 inline-flex min-h-11 items-center gap-1.5 rounded-xl px-2.5 text-xs text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-55"
+          onClick={onReject}
+        >
+          <X className="h-3.5 w-3.5" aria-hidden="true" />
+          先跳过这题
+        </button>
+      )}
+    </section>
+  );
+}
diff --git a/src/pages/ImageCanvas/DesignConversationPane.tsx b/src/pages/ImageCanvas/DesignConversationPane.tsx
index e33f593e..0d145354 100644
--- a/src/pages/ImageCanvas/DesignConversationPane.tsx
+++ b/src/pages/ImageCanvas/DesignConversationPane.tsx
@@ -1,16 +1,17 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { Check, Loader2, MessageSquareText, Send, Sparkles, X } from 'lucide-react';
+import { Loader2, MessageSquareText, Send, Sparkles } from 'lucide-react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { cn } from '@/lib/utils';
 import { useImageWorkspaceStore } from '@/stores/image-workspace';
 import type { DesignWorkspace } from '../../../shared/image-workspace';
+import { CreativeChoiceGrid } from './CreativeChoiceGrid';
 
 const STARTER_MESSAGES = [
-  '帮我做一张新品发布主视觉，先问我最关键的问题',
-  '我有一个模糊想法，请帮我整理成专业的图片设计方案',
-  '我要做一段产品短视频，请先规划叙事和分镜',
+  '画一只会做饭的机器人',
+  '把我的涂鸦变成一段动画',
+  '做一张社团活动海报',
 ];
 
 export function DesignConversationPane({ workspace }: { workspace: DesignWorkspace }) {
@@ -28,6 +29,10 @@ export function DesignConversationPane({ workspace }: { workspace: DesignWorkspa
   const submittingChat = Object.values(pendingOperations).some(
     (operation) => operation.status === 'submitting' && operation.command.kind === 'apply_input',
   );
+  const activeDecisionPrompt = workspace.form.decisionPrompts
+    .find((prompt) => prompt.options.length > 0)
+    ?? workspace.form.decisionPrompts[0]
+    ?? null;
 
   useEffect(() => {
     const scrollAnchor = scrollAnchorRef.current;
@@ -38,8 +43,8 @@ export function DesignConversationPane({ workspace }: { workspace: DesignWorkspa
 
   const submit = () => {
     if (!chatDraft.trim() || submittingChat) return;
-    void sendChat().catch((error) => {
-      toast.error(error instanceof Error ? error.message : '消息发送失败');
+    void sendChat().catch(() => {
+      toast.error('消息没有发出去，请再试一次');
     });
   };
 
@@ -51,10 +56,10 @@ export function DesignConversationPane({ workspace }: { workspace: DesignWorkspa
       <header className="border-b border-border/70 bg-background px-5 py-4">
         <div className="flex items-center gap-2">
           <Sparkles className="h-4 w-4 text-brand" />
-          <h2 className="text-sm font-semibold text-foreground">与设计 Agent 对话</h2>
+          <h2 className="text-sm font-semibold text-foreground">一起做作品</h2>
         </div>
         <p className="mt-1 text-xs leading-5 text-muted-foreground">
-          你说的每句话都会先进入设计规格，再由服务端编译成专业生成方案。
+          先说一个想法就好，我会一次只问一个重要问题。
         </p>
       </header>
 
@@ -64,16 +69,16 @@ export function DesignConversationPane({ workspace }: { workspace: DesignWorkspa
             <div className="mb-5 flex h-11 w-11 items-center justify-center rounded-2xl bg-brand/[0.09] text-brand">
               <MessageSquareText className="h-5 w-5" />
             </div>
-            <h3 className="text-lg font-semibold text-foreground">从自然语言开始</h3>
+            <h3 className="text-lg font-semibold text-foreground">你想创作什么？</h3>
             <p className="mt-2 text-sm leading-6 text-muted-foreground">
-              不需要一次把需求说完整。Agent 会把信息写入右侧表单，并把关键取舍留给你确认。
+              可以说一个想法，也可以先放一张图片。不用一次想完整。
             </p>
             <div className="mt-5 space-y-2">
               {STARTER_MESSAGES.map((message) => (
                 <button
                   key={message}
                   type="button"
-                  className="w-full rounded-xl border border-border/70 bg-background px-3 py-2.5 text-left text-xs leading-5 text-foreground transition-colors hover:border-brand/30 hover:bg-brand/[0.03] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30"
+                  className="min-h-11 w-full rounded-xl border border-border/70 bg-background px-3 py-2.5 text-left text-xs leading-5 text-foreground transition-colors hover:border-brand/30 hover:bg-brand/[0.03] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30"
                   onClick={() => setChatDraft(message)}
                 >
                   {message}
@@ -109,57 +114,22 @@ export function DesignConversationPane({ workspace }: { workspace: DesignWorkspa
             </div>
           ))}
 
-          {workspace.form.decisionPrompts.map((prompt) => (
-            <article key={prompt.id} className="rounded-2xl border border-brand/20 bg-background p-4 shadow-sm">
-              <div className="flex items-start gap-2.5">
-                <div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-brand/[0.09] text-brand">
-                  <Sparkles className="h-3.5 w-3.5" />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <h3 className="text-sm font-semibold text-foreground">{prompt.title}</h3>
-                  <p className="mt-1 text-xs leading-5 text-muted-foreground">{prompt.body}</p>
-                </div>
-              </div>
-              <div className="mt-3 space-y-2">
-                {prompt.options.map((option) => (
-                  <button
-                    key={option.id}
-                    type="button"
-                    disabled={submittingChat}
-                    className="flex w-full items-start gap-2 rounded-xl border border-border/70 px-3 py-2.5 text-left transition-colors hover:border-brand/30 hover:bg-brand/[0.03] disabled:opacity-50"
-                    onClick={() => {
-                      void resolveDecisionPrompt(prompt.id, 'select', option.id).catch((error) => {
-                        toast.error(error instanceof Error ? error.message : '决策提交失败');
-                      });
-                    }}
-                  >
-                    <Check className="mt-0.5 h-3.5 w-3.5 shrink-0 text-brand" />
-                    <span>
-                      <span className="block text-sm font-medium text-foreground">{option.label}</span>
-                      {option.description && (
-                        <span className="mt-0.5 block text-xs leading-5 text-muted-foreground">
-                          {option.description}
-                        </span>
-                      )}
-                    </span>
-                  </button>
-                ))}
-              </div>
-              <button
-                type="button"
-                disabled={submittingChat}
-                className="mt-2 inline-flex items-center gap-1 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:bg-surface-subtle hover:text-foreground disabled:opacity-50"
-                onClick={() => {
-                  void resolveDecisionPrompt(prompt.id, 'reject').catch((error) => {
-                    toast.error(error instanceof Error ? error.message : '决策提交失败');
-                  });
-                }}
-              >
-                <X className="h-3.5 w-3.5" />
-                暂不采用
-              </button>
-            </article>
-          ))}
+          {activeDecisionPrompt && (
+            <CreativeChoiceGrid
+              choice={activeDecisionPrompt}
+              disabled={submittingChat}
+              onSelect={(optionId) => {
+                void resolveDecisionPrompt(activeDecisionPrompt.id, 'select', optionId).catch(() => {
+                  toast.error('这个选择没有保存，请再试一次');
+                });
+              }}
+              onReject={() => {
+                void resolveDecisionPrompt(activeDecisionPrompt.id, 'reject').catch(() => {
+                  toast.error('这个选择没有保存，请再试一次');
+                });
+              }}
+            />
+          )}
         </div>
         <div ref={scrollAnchorRef} />
       </div>
@@ -170,11 +140,12 @@ export function DesignConversationPane({ workspace }: { workspace: DesignWorkspa
           submittingChat && 'opacity-80',
         )}>
           <Textarea
-            aria-label="给设计 Agent 留言"
+            id="design-chat-composer"
+            aria-label="告诉 AI 你想创作什么"
             value={chatDraft}
             rows={3}
             disabled={submittingChat}
-            placeholder="描述想法、补充信息，或要求 Agent 调整右侧表单…"
+            placeholder="比如：画一只在月球踢球的熊猫……"
             className="min-h-[72px] resize-none border-0 bg-transparent px-2 py-1.5 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
             onChange={(event) => setChatDraft(event.currentTarget.value)}
             onKeyDown={(event) => {
@@ -189,7 +160,7 @@ export function DesignConversationPane({ workspace }: { workspace: DesignWorkspa
             <Button
               type="button"
               size="icon"
-              className="h-9 w-9 rounded-xl"
+              className="h-11 w-11 rounded-xl"
               disabled={!chatDraft.trim() || submittingChat}
               aria-label="发送消息"
               onClick={submit}
diff --git a/src/pages/ImageCanvas/DesignProductionPanel.tsx b/src/pages/ImageCanvas/DesignProductionPanel.tsx
index f084277c..3c19e961 100644
--- a/src/pages/ImageCanvas/DesignProductionPanel.tsx
+++ b/src/pages/ImageCanvas/DesignProductionPanel.tsx
@@ -23,42 +23,35 @@ import { cn } from '@/lib/utils';
 import { useImageWorkspaceStore } from '@/stores/image-workspace';
 import type {
   DesignAsset,
-  DesignGenerationQuote,
   DesignGenerationTask,
   DesignWorkspace,
 } from '../../../shared/image-workspace';
+import {
+  youthCompilationIssueMessage,
+  youthTaskIssueMessage,
+} from './youth-issue-copy';
 
 const TASK_STATUS_LABELS: Record<DesignGenerationTask['status'], string> = {
-  queued: '排队中',
-  running: '生成中',
-  succeeded: '已完成',
+  queued: '正在准备',
+  running: '正在制作',
+  succeeded: '完成了',
   failed: '未完成',
   cancelled: '已取消',
 };
 
 const TASK_STAGE_LABELS: Record<DesignGenerationTask['progress']['stage'], string> = {
-  queued: '等待开始',
-  preparing: '准备素材',
-  submitting: '提交生成',
-  generating: '生成内容',
-  composing: '合成结果',
-  validating: '检查结果',
-  finalizing: '保存资产',
-  completed: '生成完成',
-  failed: '生成失败',
+  queued: '正在准备画面',
+  preparing: '正在准备画面',
+  submitting: '正在准备画面',
+  generating: '正在制作',
+  composing: '正在制作',
+  validating: '正在检查结果',
+  finalizing: '正在检查结果',
+  completed: '完成了',
+  failed: '这次没有完成',
   cancelled: '已取消',
 };
 
-const EXECUTION_HEALTH_LABELS: Record<DesignGenerationTask['executionHealth'], string> = {
-  normal: '正常',
-  recovering: '自动恢复中',
-  operator_required: '平台处理中',
-};
-
-function quoteTitle(quote: DesignGenerationQuote): string {
-  return quote.medium === 'video' ? '视频生成方案' : '图片生成方案';
-}
-
 function formatExpiry(value: string): string {
   const timestamp = Date.parse(value);
   if (!Number.isFinite(timestamp)) return value;
@@ -116,7 +109,7 @@ function AssetPreview({ asset }: { asset: DesignAsset }) {
   return (
     <img
       src={currentResolution.source}
-      alt={asset.role === 'uploaded' ? '上传的设计参考素材' : 'AI 生成的设计结果'}
+      alt={asset.role === 'uploaded' ? '我上传的图片' : 'AI 完成的作品'}
       className="aspect-square w-full bg-surface-subtle object-cover"
       loading="lazy"
     />
@@ -145,34 +138,36 @@ export function DesignQuotePanel({ workspace }: { workspace: DesignWorkspace })
           <div className="max-w-xl">
             <div className="flex items-center gap-2">
               <WandSparkles className="h-4 w-4 text-brand" />
-              <h3 className="text-sm font-semibold text-foreground">生成方案与报价</h3>
+              <h3 className="text-sm font-semibold text-foreground">看看制作方案</h3>
             </div>
             <p className="mt-1.5 text-xs leading-5 text-muted-foreground">
-              服务端会冻结当前设计版本，编译专业提示词、输出计划与最高扣费。
+              我们会先告诉你要用多少设计点，确认后才开始制作。
             </p>
           </div>
           <Button
             type="button"
-            className="shrink-0 rounded-xl"
+            className="min-h-11 shrink-0 rounded-xl"
             disabled={requesting}
             onClick={() => {
-              void requestQuote().catch((error) => {
-                toast.error(error instanceof Error ? error.message : '生成方案编译失败');
+              void requestQuote().catch(() => {
+                toast.error('制作方案还没准备好，请稍后再试');
               });
             }}
           >
             {requesting
               ? <Loader2 className="mr-2 h-4 w-4 animate-spin" />
               : <WandSparkles className="mr-2 h-4 w-4" />}
-            编译生成方案
+            准备制作方案
           </Button>
         </div>
         {quoteBlockers.length > 0 && (
           <div className="mt-4 rounded-xl border border-destructive/20 bg-destructive/[0.04] p-3">
-            <p className="text-xs font-medium text-destructive">还需要补充以下内容</p>
+            <p className="text-xs font-medium text-destructive">开始前还需要</p>
             <ul className="mt-2 space-y-1.5 text-xs leading-5 text-foreground">
               {quoteBlockers.map((blocker) => (
-                <li key={`${blocker.code}-${blocker.path ?? ''}`}>{blocker.message}</li>
+                <li key={`${blocker.code}-${blocker.path ?? ''}`}>
+                  {youthCompilationIssueMessage(blocker)}
+                </li>
               ))}
             </ul>
           </div>
@@ -186,38 +181,31 @@ export function DesignQuotePanel({ workspace }: { workspace: DesignWorkspace })
       <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <div className="flex flex-wrap items-center gap-2">
-            <h3 className="text-sm font-semibold text-foreground">{quoteTitle(quote)}</h3>
-            <Badge variant="success">报价已冻结</Badge>
+            <h3 className="text-sm font-semibold text-foreground">制作方案准备好了</h3>
           </div>
           <p className="mt-1.5 text-xs leading-5 text-muted-foreground">
-            对应规格版本 {quote.specificationRevision}，确认后不会再读取当前表单的新修改。
+            开始后会按现在的想法制作；如果再改想法，需要重新准备方案。
           </p>
         </div>
         <div className="text-left sm:text-right">
           <p className="text-2xl font-semibold tabular-nums text-foreground">
             {quote.quotedDesignPoints}
           </p>
-          <p className="text-xs text-muted-foreground">设计点</p>
+          <p className="text-xs text-muted-foreground">需要的设计点</p>
         </div>
       </div>
 
-      <div className="mt-4 grid gap-3 rounded-xl bg-surface-subtle/75 p-3 sm:grid-cols-2 lg:grid-cols-4">
+      <div className="mt-4 grid gap-3 rounded-xl bg-surface-subtle/75 p-3 sm:grid-cols-3">
         <div>
-          <p className="text-[11px] text-muted-foreground">画幅</p>
+          <p className="text-[11px] text-muted-foreground">作品形状</p>
           <p className="mt-1 text-sm font-medium text-foreground">{quote.outputSummary.aspectRatio}</p>
         </div>
         <div>
-          <p className="text-[11px] text-muted-foreground">数量</p>
-          <p className="mt-1 text-sm font-medium text-foreground">{quote.outputSummary.outputCount} 个输出</p>
+          <p className="text-[11px] text-muted-foreground">作品数量</p>
+          <p className="mt-1 text-sm font-medium text-foreground">{quote.outputSummary.outputCount} 个</p>
         </div>
         <div>
-          <p className="text-[11px] text-muted-foreground">生成方式</p>
-          <p className="mt-1 text-sm font-medium text-foreground">
-            {quote.outputSummary.strategy === 'direct' ? '直接生成' : '多步骤生成'}
-          </p>
-        </div>
-        <div>
-          <p className="text-[11px] text-muted-foreground">有效期</p>
+          <p className="text-[11px] text-muted-foreground">方案保留到</p>
           <p className="mt-1 text-sm font-medium text-foreground">{formatExpiry(quote.expiresAt)}</p>
         </div>
       </div>
@@ -227,7 +215,7 @@ export function DesignQuotePanel({ workspace }: { workspace: DesignWorkspace })
           {quote.warnings.map((warning) => (
             <p key={`${warning.code}-${warning.path ?? ''}`} className="flex items-start gap-2">
               <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-              {warning.message}
+              {youthCompilationIssueMessage(warning)}
             </p>
           ))}
         </div>
@@ -235,22 +223,22 @@ export function DesignQuotePanel({ workspace }: { workspace: DesignWorkspace })
 
       <div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
         <p className="text-xs text-muted-foreground">
-          确认即按此不可变报价创建任务，不会在客户端拼接或改写提示词。
+          开始后可以离开这个页面，作品会继续制作。
         </p>
         <Button
           type="button"
-          className="shrink-0 rounded-xl"
+          className="min-h-11 shrink-0 rounded-xl"
           disabled={confirming}
           onClick={() => {
-            void confirmGeneration(quote.quoteId).catch((error) => {
-              toast.error(error instanceof Error ? error.message : '确认生成失败');
+            void confirmGeneration(quote.quoteId).catch(() => {
+              toast.error('这次没有开始制作，请稍后再试');
             });
           }}
         >
           {confirming
             ? <Loader2 className="mr-2 h-4 w-4 animate-spin" />
             : <Check className="mr-2 h-4 w-4" />}
-          确认生成
+          花 {quote.quotedDesignPoints} 设计点开始制作
         </Button>
       </div>
     </section>
@@ -267,30 +255,30 @@ export function DesignPendingOperationsPanel() {
       <div className="flex items-start gap-2.5">
         <Clock3 className="mt-0.5 h-4 w-4 shrink-0 text-amber-700" />
         <div className="min-w-0 flex-1">
-          <h3 className="text-sm font-semibold text-amber-950">有操作结果尚未确认</h3>
+          <h3 className="text-sm font-semibold text-amber-950">还在确认刚才的操作</h3>
           <p className="mt-1 text-xs leading-5 text-amber-900/80">
-            重试会使用原操作标识，服务端会返回原结果，不会创建重复设计或重复任务。
+            可以放心查看原来的结果，不会重复制作或重复扣费。
           </p>
           <div className="mt-3 space-y-2">
             {unknown.map((operation) => (
               <div key={operation.id} className="flex items-center justify-between gap-3 rounded-xl bg-background/80 px-3 py-2">
                 <div className="min-w-0">
                   <p className="truncate text-xs font-medium text-foreground">{operation.label}</p>
-                  <p className="mt-0.5 truncate text-[11px] text-muted-foreground">{operation.error}</p>
+                  <p className="mt-0.5 text-[11px] text-muted-foreground">网络可能刚刚中断</p>
                 </div>
                 <Button
                   type="button"
                   variant="outline"
                   size="sm"
-                  className="shrink-0"
+                  className="min-h-11 shrink-0 rounded-xl"
                   onClick={() => {
-                    void retryOperation(operation.id).catch((error) => {
-                      toast.error(error instanceof Error ? error.message : '操作重试失败');
+                    void retryOperation(operation.id).catch(() => {
+                      toast.error('暂时没能查到结果，请稍后再试');
                     });
                   }}
                 >
                   <RefreshCw className="mr-1 h-3.5 w-3.5" />
-                  安全重试
+                  查看原来的结果
                 </Button>
               </div>
             ))}
@@ -306,8 +294,8 @@ export function DesignTaskPanel({ tasks }: { tasks: DesignGenerationTask[] }) {
   return (
     <section className="space-y-3">
       <div>
-        <h3 className="text-sm font-semibold text-foreground">生成任务</h3>
-        <p className="mt-1 text-xs text-muted-foreground">任务持续在云端执行，关闭页面不会取消。</p>
+        <h3 className="text-sm font-semibold text-foreground">作品进度</h3>
+        <p className="mt-1 text-xs text-muted-foreground">关闭页面也没关系，作品会继续制作。</p>
       </div>
       <div className="grid gap-3 lg:grid-cols-2">
         {tasks.map((task) => {
@@ -321,11 +309,11 @@ export function DesignTaskPanel({ tasks }: { tasks: DesignGenerationTask[] }) {
                       ? <Film className="h-4 w-4 text-brand" />
                       : <ImageIcon className="h-4 w-4 text-brand" />}
                     <h4 className="text-sm font-medium text-foreground">
-                      {task.medium === 'video' ? '视频任务' : '图片任务'}
+                      {task.medium === 'video' ? '我的视频' : '我的图片'}
                     </h4>
                   </div>
                   <p className="mt-1 text-[11px] text-muted-foreground">
-                    规格版本 {task.specificationRevision} · {task.outputSummary.aspectRatio}
+                    {task.outputSummary.aspectRatio} · {task.outputSummary.outputCount} 个作品
                   </p>
                 </div>
                 <Badge
@@ -348,22 +336,17 @@ export function DesignTaskPanel({ tasks }: { tasks: DesignGenerationTask[] }) {
                 </span>
               </div>
 
-              <div className="mt-3 grid grid-cols-2 gap-3 text-xs">
-                <div>
-                  <p className="text-muted-foreground">执行状态</p>
-                  <p className="mt-1 font-medium text-foreground">
-                    {EXECUTION_HEALTH_LABELS[task.executionHealth]}
-                  </p>
-                </div>
-                <div>
-                  <p className="text-muted-foreground">结果资产</p>
-                  <p className="mt-1 font-medium tabular-nums text-foreground">{task.resultAssetIds.length}</p>
-                </div>
-              </div>
+              {task.executionHealth !== 'normal' && (
+                <p className="mt-3 rounded-xl bg-amber-50/70 p-3 text-xs leading-5 text-amber-950">
+                  平台正在处理，不会重复制作或重复扣费。
+                </p>
+              )}
 
               {task.issues.length > 0 && (
                 <div className="mt-3 space-y-1 rounded-xl bg-destructive/[0.04] p-3 text-xs leading-5 text-destructive">
-                  {task.issues.map((issue) => <p key={issue.code}>{issue.message}</p>)}
+                  {task.issues.map((issue) => (
+                    <p key={issue.code}>{youthTaskIssueMessage(issue)}</p>
+                  ))}
                 </div>
               )}
             </article>
@@ -388,9 +371,9 @@ export function DesignAssetsPanel({ workspace }: { workspace: DesignWorkspace })
     try {
       await uploadImageWorkspaceAsset(workspace.workspace.workspaceId, file);
       await refreshWorkspace();
-      toast.success('参考素材已上传');
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : '素材上传失败');
+      toast.success('图片已上传');
+    } catch {
+      toast.error('图片没有上传成功，请再试一次');
     } finally {
       setUploading(false);
       if (inputRef.current) inputRef.current.value = '';
@@ -401,13 +384,14 @@ export function DesignAssetsPanel({ workspace }: { workspace: DesignWorkspace })
     <section className="space-y-3">
       <div className="flex items-center justify-between gap-3">
         <div>
-          <h3 className="text-sm font-semibold text-foreground">项目资产</h3>
-          <p className="mt-1 text-xs text-muted-foreground">上传素材后，可在表单中指定参考角色、源图或视频首帧。</p>
+          <h3 className="text-sm font-semibold text-foreground">我的图片和作品</h3>
+          <p className="mt-1 text-xs text-muted-foreground">上传图片后，可以告诉 AI 想保留和改变什么。</p>
         </div>
         <Button
           type="button"
           variant="outline"
           size="sm"
+          className="min-h-11 rounded-xl"
           disabled={uploading}
           onClick={() => inputRef.current?.click()}
         >
@@ -435,7 +419,7 @@ export function DesignAssetsPanel({ workspace }: { workspace: DesignWorkspace })
           onClick={() => inputRef.current?.click()}
         >
           <Upload className="h-4 w-4" />
-          上传第一张参考图
+          上传第一张图片
         </button>
       ) : (
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-4">
@@ -445,7 +429,7 @@ export function DesignAssetsPanel({ workspace }: { workspace: DesignWorkspace })
               <div className="flex items-center justify-between gap-2 px-3 py-2.5">
                 <div className="min-w-0">
                   <p className="truncate text-xs font-medium text-foreground">
-                    {asset.role === 'uploaded' ? '上传素材' : '生成作品'}
+                    {asset.role === 'uploaded' ? '我的图片' : '完成的作品'}
                   </p>
                   <p className="mt-0.5 truncate text-[10px] text-muted-foreground">
                     {asset.width} × {asset.height}
@@ -453,14 +437,14 @@ export function DesignAssetsPanel({ workspace }: { workspace: DesignWorkspace })
                 </div>
                 <button
                   type="button"
-                  aria-label="保存资产到电脑"
+                  aria-label="保存作品到电脑"
                   className={cn(
-                    'rounded-lg p-1.5 text-muted-foreground transition-colors',
+                    'flex h-11 w-11 items-center justify-center rounded-xl text-muted-foreground transition-colors',
                     'hover:bg-surface-subtle hover:text-foreground',
                   )}
                   onClick={() => {
-                    void saveImageWorkspaceAsset(asset).catch((error) => {
-                      toast.error(error instanceof Error ? error.message : '资产保存失败');
+                    void saveImageWorkspaceAsset(asset).catch(() => {
+                      toast.error('作品没有保存成功，请再试一次');
                     });
                   }}
                 >
diff --git a/src/pages/ImageCanvas/FineTuneDrawer.tsx b/src/pages/ImageCanvas/FineTuneDrawer.tsx
new file mode 100644
index 00000000..1f5fce9b
--- /dev/null
+++ b/src/pages/ImageCanvas/FineTuneDrawer.tsx
@@ -0,0 +1,949 @@
+import { useEffect, useId, useMemo, useState, type ReactNode } from 'react';
+import {
+  Check,
+  ChevronRight,
+  ImageIcon,
+  Loader2,
+  Palette,
+  Plus,
+  SlidersHorizontal,
+  Trash2,
+  Type,
+  Video,
+  X,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Select } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+import { useImageWorkspaceStore } from '@/stores/image-workspace';
+import type {
+  DesignAsset,
+  DesignCompilationIssue,
+  DesignSpecificationValues,
+  DesignUserFieldOperation,
+  DesignWorkspace,
+} from '../../../shared/image-workspace';
+import { YOUTH_DESTINATIONS } from './youth-form-projection';
+import { youthCompilationIssueMessage } from './youth-issue-copy';
+
+type FineTuneDrawerProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  workspace: DesignWorkspace;
+  quoteBlockers: DesignCompilationIssue[];
+};
+
+type Choice = {
+  value: string;
+  label: string;
+  description?: string;
+};
+
+const STYLE_CHOICES: Choice[] = [
+  { value: '有趣的卡通', label: '有趣的卡通', description: '夸张、轻松、颜色明快' },
+  { value: '手绘故事书', label: '手绘故事书', description: '温暖、有笔触、像绘本' },
+  { value: '像电影一样', label: '像电影一样', description: '有故事感和戏剧氛围' },
+  { value: '梦幻奇想', label: '梦幻奇想', description: '大胆想象、神奇光影' },
+  { value: '清爽简洁', label: '清爽简洁', description: '重点清楚、留白舒服' },
+  { value: '像真的一样', label: '像真的一样', description: '自然、细节真实' },
+];
+
+const VIDEO_PACING: Choice[] = [
+  { value: '慢慢展开', label: '慢慢展开' },
+  { value: '自然流畅', label: '自然流畅' },
+  { value: '很有活力', label: '很有活力' },
+];
+
+function useDesktopSheet(): boolean {
+  const [desktop, setDesktop] = useState(false);
+  useEffect(() => {
+    if (typeof window.matchMedia !== 'function') return;
+    const query = window.matchMedia('(min-width: 1024px)');
+    const update = () => setDesktop(query.matches);
+    update();
+    query.addEventListener?.('change', update);
+    return () => query.removeEventListener?.('change', update);
+  }, []);
+  return desktop;
+}
+
+function readPath(values: DesignSpecificationValues, path: string): unknown {
+  let current: unknown = values;
+  for (const segment of path.split('.')) {
+    if (!current || typeof current !== 'object' || Array.isArray(current)) return null;
+    current = (current as Record<string, unknown>)[segment];
+  }
+  return current;
+}
+
+function createItemId(prefix: string): string {
+  const random = globalThis.crypto?.randomUUID?.()
+    ?? `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+  return `${prefix}-${random}`.slice(0, 64);
+}
+
+function pendingMutation(): boolean {
+  return Object.values(useImageWorkspaceStore.getState().pendingOperations)
+    .some((operation) => operation.status === 'submitting');
+}
+
+function runOperations(
+  operations: DesignUserFieldOperation[],
+  clearDraftPaths: string[] = [],
+): void {
+  void useImageWorkspaceStore.getState().applyFieldOperations(operations, clearDraftPaths)
+    .catch(() => {
+      toast.error('修改没有保存，请再试一次');
+    });
+}
+
+function Section({
+  icon,
+  title,
+  description,
+  children,
+}: {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="rounded-2xl border border-border/70 bg-background p-4 sm:p-5">
+      <div className="flex items-start gap-3">
+        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand/[0.08] text-brand">
+          {icon}
+        </div>
+        <div>
+          <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+          <p className="mt-1 text-xs leading-5 text-muted-foreground">{description}</p>
+        </div>
+      </div>
+      <div className="mt-4 space-y-5">{children}</div>
+    </section>
+  );
+}
+
+function ChoiceGrid({
+  label,
+  value,
+  choices,
+  disabled,
+  onChoose,
+  columns = 2,
+}: {
+  label: string;
+  value: string | null;
+  choices: readonly Choice[];
+  disabled: boolean;
+  onChoose: (value: string) => void;
+  columns?: 2 | 3;
+}) {
+  return (
+    <fieldset>
+      <legend className="mb-2 text-sm font-medium text-foreground">{label}</legend>
+      <div className={cn('grid gap-2', columns === 3 ? 'sm:grid-cols-3' : 'grid-cols-2')}>
+        {choices.map((choice) => {
+          const selected = value === choice.value;
+          return (
+            <button
+              key={choice.value}
+              type="button"
+              aria-pressed={selected}
+              disabled={disabled}
+              className={cn(
+                'min-h-11 rounded-xl border px-3 py-2.5 text-left transition-colors duration-150',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 focus-visible:ring-offset-2',
+                selected
+                  ? 'border-brand/45 bg-brand/[0.08] text-foreground'
+                  : 'border-border/70 bg-background text-foreground hover:border-brand/30 hover:bg-brand/[0.03]',
+              )}
+              onClick={() => onChoose(choice.value)}
+            >
+              <span className="flex items-center justify-between gap-2 text-sm font-medium">
+                {choice.label}
+                {selected && <Check className="h-4 w-4 shrink-0 text-brand" />}
+              </span>
+              {choice.description && (
+                <span className="mt-1 block text-[11px] leading-4 text-muted-foreground">
+                  {choice.description}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </fieldset>
+  );
+}
+
+function TextField({
+  workspace,
+  path,
+  label,
+  placeholder,
+  rows = 3,
+  list = false,
+}: {
+  workspace: DesignWorkspace;
+  path: string;
+  label: string;
+  placeholder: string;
+  rows?: number;
+  list?: boolean;
+}) {
+  const fieldDrafts = useImageWorkspaceStore((state) => state.fieldDrafts);
+  const setFieldDraft = useImageWorkspaceStore((state) => state.setFieldDraft);
+  const discardFieldDraft = useImageWorkspaceStore((state) => state.discardFieldDraft);
+  const pendingOperations = useImageWorkspaceStore((state) => state.pendingOperations);
+  const canonical = readPath(workspace.form.specification.values, path);
+  const dirty = Object.hasOwn(fieldDrafts, path);
+  const draft = dirty
+    ? String(fieldDrafts[path] ?? '')
+    : list && Array.isArray(canonical)
+      ? canonical.join('\n')
+      : typeof canonical === 'string'
+        ? canonical
+        : '';
+  const locked = workspace.form.specification.field_decisions[path]?.locked === true;
+  const submitting = Object.values(pendingOperations)
+    .some((operation) => operation.status === 'submitting');
+
+  const save = () => {
+    const trimmed = draft.trim();
+    const value = list
+      ? draft.split('\n').map((item) => item.trim()).filter(Boolean)
+      : trimmed;
+    const operation: DesignUserFieldOperation = value.length === 0
+      ? { kind: 'clear', path }
+      : { kind: 'set', path, value };
+    runOperations([operation], [path]);
+  };
+
+  return (
+    <div className="space-y-2">
+      <label className="text-sm font-medium text-foreground" htmlFor={`fine-${path}`}>
+        {label}
+      </label>
+      <Textarea
+        id={`fine-${path}`}
+        value={draft}
+        rows={rows}
+        placeholder={placeholder}
+        disabled={locked || submitting}
+        onChange={(event) => setFieldDraft(path, event.currentTarget.value)}
+      />
+      {dirty && (
+        <div className="flex justify-end gap-2">
+          <Button
+            type="button"
+            variant="ghost"
+            className="min-h-11 rounded-xl"
+            onClick={() => discardFieldDraft(path)}
+          >
+            撤销
+          </Button>
+          <Button
+            type="button"
+            className="min-h-11 rounded-xl"
+            disabled={locked || submitting}
+            onClick={save}
+          >
+            保存
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ExactTextEditor({ workspace }: { workspace: DesignWorkspace }) {
+  const path = 'content.exact_content';
+  const fieldDrafts = useImageWorkspaceStore((state) => state.fieldDrafts);
+  const setFieldDraft = useImageWorkspaceStore((state) => state.setFieldDraft);
+  const discardFieldDraft = useImageWorkspaceStore((state) => state.discardFieldDraft);
+  const canonical = workspace.form.specification.values.content.exact_content;
+  const dirty = Object.hasOwn(fieldDrafts, path);
+  const draft = dirty
+    ? String(fieldDrafts[path] ?? '')
+    : canonical.map((item) => item.text).filter(Boolean).join('\n');
+  const locked = workspace.form.specification.field_decisions[path]?.locked === true;
+
+  const save = () => {
+    const lines = draft.split('\n').map((line) => line.trim()).filter(Boolean);
+    const value = lines.map((text, index) => ({
+      ...(canonical[index] ?? {}),
+      id: canonical[index]?.id ?? createItemId('copy'),
+      text,
+      role: canonical[index]?.role ?? (index === 0 ? '画面文字' : null),
+      language: canonical[index]?.language ?? '简体中文',
+      hierarchy: canonical[index]?.hierarchy ?? null,
+      exact: true,
+    }));
+    runOperations(
+      value.length > 0 ? [{ kind: 'set', path, value }] : [{ kind: 'clear', path }],
+      [path],
+    );
+  };
+
+  return (
+    <div className="space-y-2">
+      <label className="text-sm font-medium text-foreground" htmlFor="fine-exact-text">
+        画面上要写什么？
+      </label>
+      <Textarea
+        id="fine-exact-text"
+        value={draft}
+        rows={3}
+        placeholder={'每行一句需要准确出现的文字\n例如：周五科学社开放日'}
+        disabled={locked || pendingMutation()}
+        onChange={(event) => setFieldDraft(path, event.currentTarget.value)}
+      />
+      <p className="text-[11px] leading-4 text-muted-foreground">这些文字会按原文保留。</p>
+      {dirty && (
+        <div className="flex justify-end gap-2">
+          <Button type="button" variant="ghost" className="min-h-11" onClick={() => discardFieldDraft(path)}>
+            撤销
+          </Button>
+          <Button type="button" className="min-h-11" disabled={locked || pendingMutation()} onClick={save}>
+            保存文字
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function AssetSelect({
+  label,
+  value,
+  assets,
+  disabled,
+  onChange,
+}: {
+  label: string;
+  value: string | null;
+  assets: DesignAsset[];
+  disabled: boolean;
+  onChange: (assetId: string | null) => void;
+}) {
+  const selectId = useId();
+  return (
+    <div className="space-y-2">
+      <label htmlFor={selectId} className="text-sm font-medium text-foreground">{label}</label>
+      <Select
+        id={selectId}
+        value={value ?? ''}
+        disabled={disabled}
+        className="min-h-11"
+        onChange={(event) => onChange(event.currentTarget.value || null)}
+      >
+        <option value="">不使用图片</option>
+        {assets.filter((asset) => asset.mediaType === 'image').map((asset) => (
+          <option key={asset.assetId} value={asset.assetId}>
+            {asset.role === 'uploaded' ? '我上传的图片' : '完成的作品'} · {asset.width}×{asset.height}
+          </option>
+        ))}
+      </Select>
+    </div>
+  );
+}
+
+function ReferenceEditor({ workspace }: { workspace: DesignWorkspace }) {
+  const path = 'references';
+  const fieldDrafts = useImageWorkspaceStore((state) => state.fieldDrafts);
+  const setFieldDraft = useImageWorkspaceStore((state) => state.setFieldDraft);
+  const discardFieldDraft = useImageWorkspaceStore((state) => state.discardFieldDraft);
+  const canonical = workspace.form.specification.values.references;
+  const dirty = Object.hasOwn(fieldDrafts, path);
+  const references = dirty && Array.isArray(fieldDrafts[path])
+    ? fieldDrafts[path] as typeof canonical
+    : canonical;
+  const available = workspace.assets.filter((asset) => (
+    asset.mediaType === 'image'
+    && !references.some((reference) => reference.asset_id === asset.assetId)
+  ));
+  const locked = workspace.form.specification.field_decisions[path]?.locked === true;
+
+  const change = (index: number, key: 'preserve' | 'adapt' | 'do_not_copy', raw: string) => {
+    const value = raw.split('\n').map((item) => item.trim()).filter(Boolean);
+    setFieldDraft(path, references.map((reference, itemIndex) => (
+      itemIndex === index ? { ...reference, [key]: value } : reference
+    )));
+  };
+  const add = (assetId: string) => {
+    if (!assetId) return;
+    setFieldDraft(path, [...references, {
+      id: createItemId('reference'),
+      asset_id: assetId,
+      asset_revision: null,
+      role: 'inspiration',
+      preserve: [],
+      adapt: [],
+      do_not_copy: [],
+      reviewed_observations: [],
+    }]);
+  };
+  const save = () => runOperations(
+    references.length > 0 ? [{ kind: 'set', path, value: references }] : [{ kind: 'clear', path }],
+    [path],
+  );
+
+  return (
+    <div className="space-y-3">
+      {references.map((reference, index) => {
+        const asset = workspace.assets.find((item) => item.assetId === reference.asset_id);
+        return (
+          <article key={reference.id} className="rounded-xl bg-surface-subtle/70 p-3">
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex min-w-0 items-center gap-2">
+                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-background text-brand">
+                  <ImageIcon className="h-4 w-4" />
+                </div>
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-medium text-foreground">参考图 {index + 1}</p>
+                  <p className="text-[11px] text-muted-foreground">
+                    {asset ? `${asset.width}×${asset.height}` : '图片正在同步'}
+                  </p>
+                </div>
+              </div>
+              <button
+                type="button"
+                aria-label={`移除参考图 ${index + 1}`}
+                disabled={locked || pendingMutation()}
+                className="flex h-11 w-11 items-center justify-center rounded-xl text-muted-foreground hover:bg-background hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35 disabled:opacity-50"
+                onClick={() => setFieldDraft(path, references.filter((_, itemIndex) => itemIndex !== index))}
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+            <div className="mt-3 grid gap-3">
+              <Textarea
+                aria-label={`参考图 ${index + 1} 最想保留什么`}
+                value={reference.preserve.join('\n')}
+                rows={2}
+                placeholder="最想保留什么？例如：圆脸和红围巾"
+                disabled={locked || pendingMutation()}
+                onChange={(event) => change(index, 'preserve', event.currentTarget.value)}
+              />
+              <div className="grid gap-3 sm:grid-cols-2">
+                <Textarea
+                  aria-label={`参考图 ${index + 1} 哪里可以改变`}
+                  value={reference.adapt.join('\n')}
+                  rows={2}
+                  placeholder="哪里可以改变？"
+                  disabled={locked || pendingMutation()}
+                  onChange={(event) => change(index, 'adapt', event.currentTarget.value)}
+                />
+                <Textarea
+                  aria-label={`参考图 ${index + 1} 哪些地方不要照着画`}
+                  value={reference.do_not_copy.join('\n')}
+                  rows={2}
+                  placeholder="哪些地方不要照着画？"
+                  disabled={locked || pendingMutation()}
+                  onChange={(event) => change(index, 'do_not_copy', event.currentTarget.value)}
+                />
+              </div>
+            </div>
+          </article>
+        );
+      })}
+
+      {available.length > 0 && (
+        <div className="flex gap-2">
+          <Select
+            aria-label="添加参考图"
+            className="min-h-11 flex-1"
+            value=""
+            disabled={locked || pendingMutation()}
+            onChange={(event) => add(event.currentTarget.value)}
+          >
+            <option value="">选择一张图片作为参考</option>
+            {available.map((asset) => (
+              <option key={asset.assetId} value={asset.assetId}>
+                {asset.role === 'uploaded' ? '我上传的图片' : '完成的作品'} · {asset.width}×{asset.height}
+              </option>
+            ))}
+          </Select>
+        </div>
+      )}
+
+      {workspace.assets.length === 0 && references.length === 0 && (
+        <p className="rounded-xl border border-dashed border-border px-3 py-4 text-xs leading-5 text-muted-foreground">
+          先在作品区上传一张图片，再告诉 AI 最想保留和想改变的地方。
+        </p>
+      )}
+
+      {dirty && (
+        <div className="flex justify-end gap-2">
+          <Button type="button" variant="ghost" className="min-h-11" onClick={() => discardFieldDraft(path)}>
+            撤销
+          </Button>
+          <Button type="button" className="min-h-11" disabled={locked || pendingMutation()} onClick={save}>
+            保存参考图
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StoryboardEditor({ workspace }: { workspace: DesignWorkspace }) {
+  const path = 'video.shots';
+  const fieldDrafts = useImageWorkspaceStore((state) => state.fieldDrafts);
+  const setFieldDraft = useImageWorkspaceStore((state) => state.setFieldDraft);
+  const discardFieldDraft = useImageWorkspaceStore((state) => state.discardFieldDraft);
+  const canonical = workspace.form.specification.values.video.shots;
+  const dirty = Object.hasOwn(fieldDrafts, path);
+  const storedDraft = fieldDrafts[path];
+  const draft = dirty && Array.isArray(storedDraft)
+    ? storedDraft as DesignSpecificationValues['video']['shots']
+    : canonical;
+  const locked = workspace.form.specification.field_decisions[path]?.locked === true;
+
+  const updateBeat = (index: number, storyBeat: string) => {
+    setFieldDraft(path, draft.map((shot, shotIndex) => (
+      shotIndex === index ? { ...shot, story_beat: storyBeat } : shot
+    )));
+  };
+
+  const addShot = () => {
+    if (draft.length >= 24) return;
+    setFieldDraft(path, [...draft, {
+      id: createItemId('shot'),
+      start_milliseconds: null,
+      end_milliseconds: null,
+      story_beat: '',
+      framing: null,
+      camera: null,
+      subject_motion: null,
+      environment_motion: null,
+      focus_behavior: null,
+      transition: null,
+    }]);
+  };
+
+  const removeShot = (index: number) => {
+    setFieldDraft(path, draft.filter((_, shotIndex) => shotIndex !== index));
+  };
+
+  const save = () => {
+    const shots = draft
+      .map((shot) => ({ ...shot, story_beat: shot.story_beat?.trim() || null }))
+      .filter((shot) => Boolean(shot.story_beat));
+    runOperations(
+      shots.length > 0 ? [{ kind: 'set', path, value: shots }] : [{ kind: 'clear', path }],
+      [path],
+    );
+  };
+
+  return (
+    <div className="space-y-2">
+      <p className="text-sm font-medium text-foreground">
+        开始、接着、最后发生什么？
+      </p>
+      <div className="space-y-2">
+        {draft.map((shot, index) => (
+          <div key={shot.id} className="flex items-start gap-2 rounded-xl border border-border/70 bg-background p-2.5">
+            <div className="min-w-0 flex-1">
+              <label htmlFor={`fine-storyboard-${shot.id}`} className="text-xs font-medium text-muted-foreground">
+                画面 {index + 1}
+              </label>
+              <Textarea
+                id={`fine-storyboard-${shot.id}`}
+                value={shot.story_beat ?? ''}
+                rows={2}
+                className="mt-1"
+                placeholder={index === 0 ? '例如：机器人找到面粉' : '接下来发生什么？'}
+                disabled={locked || pendingMutation()}
+                onChange={(event) => updateBeat(index, event.currentTarget.value)}
+              />
+            </div>
+            <button
+              type="button"
+              aria-label={`删除画面 ${index + 1}`}
+              className="mt-5 flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-muted-foreground hover:bg-destructive/[0.08] hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35"
+              disabled={locked || pendingMutation()}
+              onClick={() => removeShot(index)}
+            >
+              <Trash2 className="h-4 w-4" aria-hidden="true" />
+            </button>
+          </div>
+        ))}
+      </div>
+      <p className="text-xs leading-5 text-muted-foreground">
+        清空文字后保存，会删除这个画面。
+      </p>
+      <Button
+        type="button"
+        variant="outline"
+        className="min-h-11 w-full rounded-xl"
+        disabled={locked || pendingMutation() || draft.length >= 24}
+        onClick={addShot}
+      >
+        <Plus className="mr-2 h-4 w-4" aria-hidden="true" />
+        {draft.length >= 24 ? '最多 24 个画面' : '添加一个画面'}
+      </Button>
+      {dirty && (
+        <div className="flex justify-end gap-2">
+          <Button type="button" variant="ghost" className="min-h-11" onClick={() => discardFieldDraft(path)}>
+            撤销
+          </Button>
+          <Button type="button" className="min-h-11" disabled={locked || pendingMutation()} onClick={save}>
+            保存故事
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function FineTuneDrawer({
+  open,
+  onOpenChange,
+  workspace,
+  quoteBlockers,
+}: FineTuneDrawerProps) {
+  const desktop = useDesktopSheet();
+  const pendingOperations = useImageWorkspaceStore((state) => state.pendingOperations);
+  const submitting = Object.values(pendingOperations)
+    .some((operation) => operation.status === 'submitting');
+  const values = workspace.form.specification.values;
+  const media = values.intent.media;
+  const imageAssets = useMemo(
+    () => workspace.assets.filter((asset) => asset.mediaType === 'image'),
+    [workspace.assets],
+  );
+  const blockers = quoteBlockers.filter((issue) => issue.severity === 'blocker');
+  const imageEditRelevant = media === 'image' && Boolean(
+    values.image.source_asset_id
+    || ['edit', 'vary', 'composite', 'extend'].includes(values.intent.creation_intent ?? '')
+    || values.image.preserve_instructions.length > 0
+    || values.image.change_instructions.length > 0
+    || values.image.background_behavior
+    || typeof values.image.transparency_required === 'boolean',
+  );
+  const exactTextRelevant = media === 'image' || values.content.exact_content.length > 0;
+
+  const fieldLocked = (path: string) => (
+    workspace.form.specification.field_decisions[path]?.locked === true
+  );
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side={desktop ? 'right' : 'bottom'}
+        className={cn(
+          'flex flex-col overflow-hidden p-0',
+          desktop
+            ? 'h-full w-[min(520px,100vw)] sm:max-w-[520px]'
+            : 'max-h-[88vh] rounded-t-3xl',
+        )}
+      >
+        <SheetHeader className="shrink-0 border-b border-border/70 px-5 py-4 text-left">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <SheetTitle className="flex items-center gap-2">
+                <SlidersHorizontal className="h-5 w-5 text-brand" />
+                精细调整
+              </SheetTitle>
+              <SheetDescription className="mt-1 leading-5">
+                只调整这次作品真正用得到的内容，其他细节交给 AI。
+              </SheetDescription>
+            </div>
+            <SheetClose asChild>
+              <button
+                type="button"
+                aria-label="关闭精细调整"
+                className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-muted-foreground hover:bg-surface-subtle hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </SheetClose>
+          </div>
+        </SheetHeader>
+
+        <div className="min-h-0 flex-1 overflow-y-auto bg-surface-subtle/35 px-4 py-4 sm:px-5">
+          <div className="space-y-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
+            {blockers.length > 0 && (
+              <section className="rounded-2xl border border-amber-200 bg-amber-50/70 p-4">
+                <h3 className="text-sm font-semibold text-amber-950">开始前还需要</h3>
+                <ul className="mt-2 space-y-1 text-xs leading-5 text-amber-900">
+                  {blockers.map((blocker) => (
+                    <li key={`${blocker.code}-${blocker.path ?? ''}`}>
+                      {youthCompilationIssueMessage(blocker)}
+                    </li>
+                  ))}
+                </ul>
+              </section>
+            )}
+
+            <Section
+              icon={<Palette className="h-4 w-4" />}
+              title="作品的样子"
+              description="选择作品类型、使用位置和大致感觉。"
+            >
+              <ChoiceGrid
+                label="想做图片还是视频？"
+                value={media}
+                choices={[
+                  { value: 'image', label: '图片' },
+                  { value: 'video', label: '视频' },
+                ]}
+                disabled={submitting || fieldLocked('intent.media')}
+                onChoose={(value) => runOperations([{
+                  kind: 'set',
+                  path: 'intent.media',
+                  value,
+                }])}
+              />
+              <ChoiceGrid
+                label="准备用在哪里？"
+                value={values.output.aspect_ratio}
+                choices={YOUTH_DESTINATIONS.map((destination) => ({
+                  value: destination.aspectRatio,
+                  label: destination.label,
+                }))}
+                disabled={submitting
+                  || fieldLocked('output.aspect_ratio')
+                  || fieldLocked('output.orientation')}
+                onChoose={(aspectRatio) => {
+                  const destination = YOUTH_DESTINATIONS.find((item) => item.aspectRatio === aspectRatio);
+                  if (!destination) return;
+                  runOperations([
+                    { kind: 'set', path: 'output.aspect_ratio', value: destination.aspectRatio },
+                    { kind: 'set', path: 'output.orientation', value: destination.orientation },
+                  ]);
+                }}
+              />
+              <ChoiceGrid
+                label="想要什么感觉？"
+                value={values.visual.art_direction}
+                choices={STYLE_CHOICES}
+                columns={3}
+                disabled={submitting || fieldLocked('visual.art_direction')}
+                onChoose={(value) => runOperations([
+                  { kind: 'set', path: 'visual.art_direction', value },
+                ])}
+              />
+            </Section>
+
+            {exactTextRelevant && (
+              <Section
+                icon={<Type className="h-4 w-4" />}
+                title="画面上的文字"
+                description="只有必须准确出现的文字才需要填写。"
+              >
+                <ExactTextEditor workspace={workspace} />
+              </Section>
+            )}
+
+            {(imageAssets.length > 0 || values.references.length > 0) && (
+              <Section
+                icon={<ImageIcon className="h-4 w-4" />}
+                title="参考图片"
+                description="说清楚最想保留、可以改变和不要照搬的地方。"
+              >
+                <ReferenceEditor workspace={workspace} />
+                {media === 'image' && (
+                  <AssetSelect
+                    label="从哪张图开始修改？"
+                    value={values.image.source_asset_id}
+                    assets={imageAssets}
+                    disabled={submitting || fieldLocked('image.source_asset_id')}
+                    onChange={(assetId) => runOperations([
+                      assetId
+                        ? { kind: 'set', path: 'image.source_asset_id', value: assetId }
+                        : { kind: 'clear', path: 'image.source_asset_id' },
+                    ])}
+                  />
+                )}
+                {media === 'video' && (
+                  <AssetSelect
+                    label="视频从哪张图开始？"
+                    value={values.video.first_frame_asset_id}
+                    assets={imageAssets}
+                    disabled={submitting || fieldLocked('video.first_frame_asset_id')}
+                    onChange={(assetId) => runOperations([
+                      assetId
+                        ? { kind: 'set', path: 'video.first_frame_asset_id', value: assetId }
+                        : { kind: 'clear', path: 'video.first_frame_asset_id' },
+                    ])}
+                  />
+                )}
+              </Section>
+            )}
+
+            {imageEditRelevant && (
+              <Section
+                icon={<ImageIcon className="h-4 w-4" />}
+                title="图片调整"
+                description="需要改原图或处理背景时，再补充这些内容。"
+              >
+                <TextField
+                  workspace={workspace}
+                  path="image.preserve_instructions"
+                  label="这些地方别变"
+                  placeholder="每行一项"
+                  list
+                />
+                <TextField
+                  workspace={workspace}
+                  path="image.change_instructions"
+                  label="想改哪里？"
+                  placeholder="每行一项"
+                  list
+                />
+                <TextField
+                  workspace={workspace}
+                  path="image.background_behavior"
+                  label="背景怎么办？"
+                  placeholder="例如：换成夜晚的月球基地"
+                  rows={2}
+                />
+                <ChoiceGrid
+                  label="需要透明背景吗？"
+                  value={values.image.transparency_required === null
+                    ? null
+                    : String(values.image.transparency_required)}
+                  choices={[
+                    { value: 'false', label: '保留背景' },
+                    { value: 'true', label: '透明背景' },
+                  ]}
+                  disabled={submitting || fieldLocked('image.transparency_required')}
+                  onChoose={(value) => runOperations([{
+                    kind: 'set',
+                    path: 'image.transparency_required',
+                    value: value === 'true',
+                  }])}
+                />
+              </Section>
+            )}
+
+            {media === 'video' && (
+              <Section
+                icon={<Video className="h-4 w-4" />}
+                title="视频故事"
+                description="只决定时长、快慢和故事顺序，镜头细节交给 AI。"
+              >
+                <ChoiceGrid
+                  label="视频大约多长？"
+                  value={values.video.total_duration_seconds === null
+                    ? null
+                    : String(values.video.total_duration_seconds)}
+                  choices={[
+                    { value: '5', label: '5 秒' },
+                    { value: '10', label: '10 秒' },
+                    { value: '15', label: '15 秒' },
+                  ]}
+                  columns={3}
+                  disabled={submitting || fieldLocked('video.total_duration_seconds')}
+                  onChoose={(value) => runOperations([{
+                    kind: 'set',
+                    path: 'video.total_duration_seconds',
+                    value: Number(value),
+                  }])}
+                />
+                <ChoiceGrid
+                  label="故事怎么展开？"
+                  value={values.video.pacing}
+                  choices={VIDEO_PACING}
+                  columns={3}
+                  disabled={submitting || fieldLocked('video.pacing')}
+                  onChoose={(value) => runOperations([{
+                    kind: 'set',
+                    path: 'video.pacing',
+                    value,
+                  }])}
+                />
+                <StoryboardEditor workspace={workspace} />
+                <TextField
+                  workspace={workspace}
+                  path="video.end_state"
+                  label="最后看到什么？"
+                  placeholder="例如：机器人端出一盘星星饼干"
+                  rows={2}
+                />
+              </Section>
+            )}
+
+            <details className="group rounded-2xl border border-border/70 bg-background">
+              <summary className="flex min-h-11 cursor-pointer list-none items-center gap-3 rounded-2xl px-4 py-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35">
+                <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand/[0.08] text-brand">
+                  <SlidersHorizontal className="h-4 w-4" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block text-sm font-semibold text-foreground">其他小调整</span>
+                  <span className="mt-1 block text-xs leading-5 text-muted-foreground">
+                    颜色、画面位置和作品数量。
+                  </span>
+                </span>
+                <ChevronRight className="h-4 w-4 text-muted-foreground transition-transform group-open:rotate-90" />
+              </summary>
+              <div className="space-y-5 border-t border-border/60 px-4 py-4">
+                <TextField
+                  workspace={workspace}
+                  path="visual.palette"
+                  label="喜欢哪些颜色？"
+                  placeholder="例如：蓝紫色和一点亮黄色；也可以留空让 AI 搭配"
+                  rows={2}
+                />
+                <TextField
+                  workspace={workspace}
+                  path="visual.composition"
+                  label="画面怎么摆？"
+                  placeholder="例如：主角放中间，上方留一点空"
+                  rows={2}
+                />
+                <div className="space-y-2">
+                  <label htmlFor="fine-variant-count" className="text-sm font-medium text-foreground">
+                    做几个版本？
+                  </label>
+                  <Select
+                    id="fine-variant-count"
+                    className="min-h-11"
+                    value={String(values.output.variant_count ?? 1)}
+                    disabled={submitting || fieldLocked('output.variant_count')}
+                    onChange={(event) => runOperations([{
+                      kind: 'set',
+                      path: 'output.variant_count',
+                      value: Number(event.currentTarget.value),
+                    }])}
+                  >
+                    {[1, 2, 3, 4].map((count) => (
+                      <option key={count} value={count}>{count} 个版本</option>
+                    ))}
+                  </Select>
+                </div>
+              </div>
+            </details>
+
+            <SheetClose asChild>
+              <Button type="button" variant="outline" className="min-h-11 w-full rounded-xl">
+                完成调整
+                <ChevronRight className="ml-2 h-4 w-4" />
+              </Button>
+            </SheetClose>
+
+            {submitting && (
+              <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground" role="status">
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                正在保存你的选择
+              </div>
+            )}
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/src/pages/ImageCanvas/YouthCreationCard.tsx b/src/pages/ImageCanvas/YouthCreationCard.tsx
new file mode 100644
index 00000000..6450e7a3
--- /dev/null
+++ b/src/pages/ImageCanvas/YouthCreationCard.tsx
@@ -0,0 +1,478 @@
+import {
+  Ban,
+  Check,
+  Film,
+  ImageIcon,
+  Lightbulb,
+  ListChecks,
+  Loader2,
+  MessageCircle,
+  Palette,
+  Play,
+  SlidersHorizontal,
+  Sparkles,
+  WandSparkles,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { useImageWorkspaceStore } from '@/stores/image-workspace';
+import type {
+  DesignCompilationIssue,
+  DesignWorkspace,
+} from '../../../shared/image-workspace';
+import {
+  projectYouthCreationCard,
+  type YouthCreationCardModel,
+} from './youth-form-projection';
+import { CreativeChoiceGrid } from './CreativeChoiceGrid';
+
+export type YouthCreationCardProps = {
+  workspace: DesignWorkspace;
+  quoteBlockers: DesignCompilationIssue[];
+  generationAvailable: boolean;
+  onOpenFineTune: () => void;
+  onFocusComposer: () => void;
+};
+
+function formatDuration(seconds: number): string {
+  if (!Number.isFinite(seconds)) return `${seconds} 秒`;
+  if (Number.isInteger(seconds)) return `${seconds} 秒`;
+  return `${seconds.toFixed(1)} 秒`;
+}
+
+function MediumIcon({ medium }: { medium: 'image' | 'video' }) {
+  return medium === 'video'
+    ? <Film className="h-3.5 w-3.5" aria-hidden="true" />
+    : <ImageIcon className="h-3.5 w-3.5" aria-hidden="true" />;
+}
+
+function Chip({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="inline-flex min-h-8 items-center gap-1.5 rounded-full border border-border/70 bg-background px-2.5 py-1 text-xs font-medium text-foreground">
+      {children}
+    </span>
+  );
+}
+
+function TagSection({
+  title,
+  items,
+  icon,
+  tone = 'default',
+}: {
+  title: string;
+  items: string[];
+  icon: React.ReactNode;
+  tone?: 'default' | 'avoid';
+}) {
+  if (items.length === 0) return null;
+  return (
+    <section>
+      <div className="flex items-center gap-2 text-xs font-semibold text-foreground">
+        <span className={cn('text-brand', tone === 'avoid' && 'text-rose-600')}>
+          {icon}
+        </span>
+        <h3>{title}</h3>
+      </div>
+      <ul className="mt-2 flex flex-wrap gap-2">
+        {items.map((item, index) => (
+          <li
+            key={`${item}-${index}`}
+            className={cn(
+              'rounded-xl border px-2.5 py-1.5 text-xs leading-5',
+              tone === 'avoid'
+                ? 'border-rose-200/80 bg-rose-50/70 text-rose-900'
+                : 'border-border/70 bg-background text-foreground',
+            )}
+          >
+            {item}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function Readiness({ model }: { model: YouthCreationCardModel }) {
+  return (
+    <section
+      data-testid="youth-creation-readiness"
+      className={cn(
+        'rounded-xl border px-3.5 py-3',
+        model.phase === 'ready' || model.phase === 'result' || model.phase === 'confirming'
+          ? 'border-brand/20 bg-brand/[0.045]'
+          : model.phase === 'generating'
+            ? 'border-sky-200 bg-sky-50/70'
+            : 'border-border/70 bg-background',
+      )}
+    >
+      <div className="flex items-start gap-2.5">
+        <span className="mt-0.5 text-brand">
+          {model.phase === 'generating'
+            ? <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+            : model.phase === 'ready' || model.phase === 'result' || model.phase === 'confirming'
+              ? <Check className="h-4 w-4" aria-hidden="true" />
+              : <Lightbulb className="h-4 w-4" aria-hidden="true" />}
+        </span>
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-foreground">{model.readinessMessage}</p>
+          {model.blockers.length > 0 && (
+            <ul className="mt-2 space-y-1 text-xs leading-5 text-muted-foreground">
+              {model.blockers.map((blocker) => (
+                <li key={`${blocker.code}-${blocker.path ?? ''}`}>{blocker.message}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ReferenceSection({ model }: { model: YouthCreationCardModel }) {
+  if (model.references.length === 0) return null;
+  return (
+    <section>
+      <div className="flex items-center gap-2 text-xs font-semibold text-foreground">
+        <ImageIcon className="h-3.5 w-3.5 text-brand" aria-hidden="true" />
+        <h3>参考图片</h3>
+      </div>
+      <div className="mt-2 space-y-2">
+        {model.references.map((reference, index) => (
+          <article key={reference.id} className="rounded-xl border border-border/70 bg-background p-3">
+            <div className="flex items-center gap-2">
+              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-brand/[0.08] text-brand">
+                <ImageIcon className="h-4 w-4" aria-hidden="true" />
+              </div>
+              <div className="min-w-0">
+                <p className="text-xs font-medium text-foreground">参考图 {index + 1}</p>
+                <p className="text-[11px] text-muted-foreground">
+                  {reference.asset
+                    ? `${reference.asset.width} × ${reference.asset.height}`
+                    : '图片正在同步'}
+                </p>
+              </div>
+            </div>
+            {(reference.preserve.length > 0
+              || reference.adapt.length > 0
+              || reference.doNotCopy.length > 0) && (
+                <div className="mt-2.5 grid gap-2 text-xs leading-5 sm:grid-cols-3">
+                  {reference.preserve.length > 0 && (
+                    <div>
+                      <p className="text-muted-foreground">最想保留</p>
+                      <p className="mt-0.5 text-foreground">{reference.preserve.join('、')}</p>
+                    </div>
+                  )}
+                  {reference.adapt.length > 0 && (
+                    <div>
+                      <p className="text-muted-foreground">可以改变</p>
+                      <p className="mt-0.5 text-foreground">{reference.adapt.join('、')}</p>
+                    </div>
+                  )}
+                  {reference.doNotCopy.length > 0 && (
+                    <div>
+                      <p className="text-muted-foreground">不要照着画</p>
+                      <p className="mt-0.5 text-foreground">{reference.doNotCopy.join('、')}</p>
+                    </div>
+                  )}
+                </div>
+              )}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function VideoSection({ model }: { model: YouthCreationCardModel }) {
+  if (!model.video) return null;
+  const { durationSeconds, pacing, endState, storyBeats } = model.video;
+  return (
+    <section>
+      <div className="flex items-center gap-2 text-xs font-semibold text-foreground">
+        <Film className="h-3.5 w-3.5 text-brand" aria-hidden="true" />
+        <h3>视频安排</h3>
+      </div>
+      <div className="mt-2 grid gap-2 rounded-xl border border-border/70 bg-background p-3 text-xs sm:grid-cols-3">
+        {durationSeconds !== null && (
+          <div>
+            <p className="text-muted-foreground">时长</p>
+            <p className="mt-0.5 font-medium text-foreground">{formatDuration(durationSeconds)}</p>
+          </div>
+        )}
+        {pacing && (
+          <div>
+            <p className="text-muted-foreground">节奏</p>
+            <p className="mt-0.5 font-medium text-foreground">{pacing}</p>
+          </div>
+        )}
+        {endState && (
+          <div>
+            <p className="text-muted-foreground">结尾</p>
+            <p className="mt-0.5 font-medium text-foreground">{endState}</p>
+          </div>
+        )}
+        {storyBeats.length > 0 && (
+          <div className="sm:col-span-3">
+            <p className="text-muted-foreground">画面顺序</p>
+            <ol className="mt-1 space-y-1 text-foreground">
+              {storyBeats.map((beat, index) => <li key={`${beat}-${index}`}>{index + 1}. {beat}</li>)}
+            </ol>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+function ActionFooter({
+  model,
+  generationAvailable,
+  requesting,
+  onFocusComposer,
+  onOpenFineTune,
+  onRequestQuote,
+}: {
+  model: YouthCreationCardModel;
+  generationAvailable: boolean;
+  requesting: boolean;
+  onFocusComposer: () => void;
+  onOpenFineTune: () => void;
+  onRequestQuote: () => void;
+}) {
+  switch (model.phase) {
+    case 'empty':
+      return (
+        <div className="flex flex-col gap-3 border-t border-border/60 pt-4 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-xs leading-5 text-muted-foreground">不用想得很完整，先说一句就好。</p>
+          <Button type="button" className="min-h-11 rounded-xl" onClick={onFocusComposer}>
+            <MessageCircle className="mr-2 h-4 w-4" aria-hidden="true" />
+            先说一个想法
+          </Button>
+        </div>
+      );
+    case 'exploring':
+      return (
+        <div className="flex flex-col gap-3 border-t border-border/60 pt-4 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-xs leading-5 text-muted-foreground">你可以继续补充，也可以让 AI 帮你整理。</p>
+          <Button type="button" className="min-h-11 rounded-xl" onClick={onFocusComposer}>
+            <MessageCircle className="mr-2 h-4 w-4" aria-hidden="true" />
+            继续聊聊
+          </Button>
+        </div>
+      );
+    case 'ready':
+      return (
+        <div className="flex flex-col gap-3 border-t border-border/60 pt-4 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-xs leading-5 text-muted-foreground">
+            {generationAvailable ? '先看看制作方案，再决定要不要开始。' : '现在还不能开始制作，但你可以继续完善想法。'}
+          </p>
+          <Button
+            type="button"
+            className="min-h-11 rounded-xl"
+            disabled={requesting}
+            onClick={generationAvailable ? onRequestQuote : onFocusComposer}
+          >
+            {requesting
+              ? <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+              : <WandSparkles className="mr-2 h-4 w-4" aria-hidden="true" />}
+            {generationAvailable ? '看看制作方案' : '继续完善想法'}
+          </Button>
+        </div>
+      );
+    case 'confirming':
+      return (
+        <div className="flex flex-col gap-3 border-t border-border/60 pt-4 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-xs leading-5 text-muted-foreground">方案准备好了，确认后就开始制作。</p>
+          <Button type="button" variant="outline" className="min-h-11 rounded-xl" onClick={onOpenFineTune}>
+            <SlidersHorizontal className="mr-2 h-4 w-4" aria-hidden="true" />
+            继续调整
+          </Button>
+        </div>
+      );
+    case 'generating':
+      return (
+        <div className="flex flex-col gap-3 border-t border-border/60 pt-4 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-xs leading-5 text-muted-foreground">作品做好后会出现在下面，先去做点别的吧。</p>
+          <Button type="button" className="min-h-11 rounded-xl" disabled>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+            正在制作
+          </Button>
+        </div>
+      );
+    case 'result':
+      return (
+        <div className="flex flex-col gap-3 border-t border-border/60 pt-4 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-xs leading-5 text-muted-foreground">喜欢这个方向？可以再做一个版本。</p>
+          <div className="flex flex-col gap-2 sm:flex-row">
+            <Button type="button" variant="outline" className="min-h-11 rounded-xl" onClick={onOpenFineTune}>
+              <SlidersHorizontal className="mr-2 h-4 w-4" aria-hidden="true" />
+              继续调整
+            </Button>
+            <Button
+              type="button"
+              className="min-h-11 rounded-xl"
+              disabled={requesting || !generationAvailable || !model.canRequestQuote}
+              onClick={onRequestQuote}
+            >
+              {requesting
+                ? <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+                : <Play className="mr-2 h-4 w-4" aria-hidden="true" />}
+              {model.canRequestQuote ? '做一个新版本' : '制作方案已准备'}
+            </Button>
+          </div>
+        </div>
+      );
+    default:
+      return null;
+  }
+}
+
+export function YouthCreationCard({
+  workspace,
+  quoteBlockers,
+  generationAvailable,
+  onOpenFineTune,
+  onFocusComposer,
+}: YouthCreationCardProps) {
+  const resolveDecisionPrompt = useImageWorkspaceStore((state) => state.resolveDecisionPrompt);
+  const requestQuote = useImageWorkspaceStore((state) => state.requestQuote);
+  const pendingOperations = useImageWorkspaceStore((state) => state.pendingOperations);
+  const model = projectYouthCreationCard(workspace, { quoteBlockers });
+  const submittingInput = Object.values(pendingOperations).some(
+    (operation) => operation.status === 'submitting' && operation.command.kind === 'apply_input',
+  );
+  const requesting = Object.values(pendingOperations).some(
+    (operation) => operation.status === 'submitting' && operation.command.kind === 'request_quote',
+  );
+
+  const choose = (optionId: string) => {
+    if (!model.activeChoice || submittingInput) return;
+    void resolveDecisionPrompt(model.activeChoice.id, 'select', optionId).catch(() => {
+      toast.error('这个选择没有保存，请再试一次');
+    });
+  };
+
+  const rejectChoice = () => {
+    if (!model.activeChoice || submittingInput) return;
+    void resolveDecisionPrompt(model.activeChoice.id, 'reject').catch(() => {
+      toast.error('这个选择没有保存，请再试一次');
+    });
+  };
+
+  const request = () => {
+    if (!generationAvailable || requesting || !model.canRequestQuote) return;
+    void requestQuote().catch(() => {
+      toast.error('制作方案还没准备好，请稍后再试');
+    });
+  };
+
+  return (
+    <section
+      data-testid="youth-creation-card"
+      aria-labelledby="youth-creation-card-title"
+      className="rounded-2xl border border-border/70 bg-background p-4 shadow-sm sm:p-5"
+    >
+      <header className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <Sparkles className="h-4 w-4 shrink-0 text-brand" aria-hidden="true" />
+            <h2 id="youth-creation-card-title" className="text-base font-semibold text-foreground">
+              我的创作
+            </h2>
+          </div>
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          className="min-h-11 shrink-0 rounded-xl px-2.5 text-xs"
+          onClick={onOpenFineTune}
+        >
+          <SlidersHorizontal className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
+          精细调整
+        </Button>
+      </header>
+
+      <div className="mt-4 space-y-4">
+        <Readiness model={model} />
+
+        {model.summary && (
+          <section>
+            <div className="flex items-center gap-2 text-xs font-semibold text-foreground">
+              <Lightbulb className="h-3.5 w-3.5 text-brand" aria-hidden="true" />
+              <h3>想做什么</h3>
+            </div>
+            <p className="mt-2 rounded-xl bg-surface-subtle/75 px-3 py-2.5 text-sm leading-6 text-foreground">
+              {model.summary}
+            </p>
+          </section>
+        )}
+
+        {(model.medium || model.destination || model.style || model.delegatedSummary) && (
+          <div className="flex flex-wrap gap-2" aria-label="创作选择">
+            {model.medium && (
+              <Chip>
+                <MediumIcon medium={model.medium} />
+                {model.medium === 'video' ? '视频' : '图片'}
+              </Chip>
+            )}
+            {model.destination && (
+              <>
+                <Chip>{model.destination.label}</Chip>
+                <Chip>{model.destination.aspectRatio}</Chip>
+              </>
+            )}
+            {model.style && (
+              <Chip>
+                <Palette className="h-3.5 w-3.5 text-brand" aria-hidden="true" />
+                {model.style.label}
+              </Chip>
+            )}
+            {model.delegatedSummary && <Chip>{model.delegatedSummary}</Chip>}
+          </div>
+        )}
+
+        <div className="space-y-4">
+          <TagSection
+            title="一定要有"
+            items={model.mustInclude}
+            icon={<ListChecks className="h-3.5 w-3.5" aria-hidden="true" />}
+          />
+          <TagSection
+            title="想保留"
+            items={model.mustPreserve}
+            icon={<Check className="h-3.5 w-3.5" aria-hidden="true" />}
+          />
+          <TagSection
+            title="不要出现"
+            items={model.mustAvoid}
+            icon={<Ban className="h-3.5 w-3.5" aria-hidden="true" />}
+            tone="avoid"
+          />
+        </div>
+
+        <ReferenceSection model={model} />
+        <VideoSection model={model} />
+
+        {model.activeChoice && (
+          <CreativeChoiceGrid
+            choice={model.activeChoice}
+            disabled={submittingInput}
+            onSelect={choose}
+            onReject={rejectChoice}
+          />
+        )}
+
+        <ActionFooter
+          model={model}
+          generationAvailable={generationAvailable}
+          requesting={requesting}
+          onFocusComposer={onFocusComposer}
+          onOpenFineTune={onOpenFineTune}
+          onRequestQuote={request}
+        />
+      </div>
+    </section>
+  );
+}
diff --git a/src/pages/ImageCanvas/index.tsx b/src/pages/ImageCanvas/index.tsx
index d763e217..36a19ef0 100644
--- a/src/pages/ImageCanvas/index.tsx
+++ b/src/pages/ImageCanvas/index.tsx
@@ -2,34 +2,58 @@ import { useEffect, useState } from 'react';
 import {
   Cloud,
   CloudOff,
-  FileSliders,
-  MessageSquareText,
   Plus,
   RefreshCw,
   Sparkles,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { IMAGE_WORKSPACE_CREATE_PROJECT_EVENT } from '@/lib/image-workspace';
 import { cn } from '@/lib/utils';
 import { useAuthStore } from '@/stores/auth';
 import { useImagePromptMuseumStore } from '@/stores/image-prompt-museum';
 import { useImageWorkspaceStore } from '@/stores/image-workspace';
 import { DesignConversationPane } from './DesignConversationPane';
-import { DesignFormPane, DesignFormSummary } from './DesignFormPane';
+import { FineTuneDrawer } from './FineTuneDrawer';
 import {
   DesignAssetsPanel,
   DesignPendingOperationsPanel,
   DesignQuotePanel,
   DesignTaskPanel,
 } from './DesignProductionPanel';
+import { YouthCreationCard } from './YouthCreationCard';
+import { projectYouthCreationCard } from './youth-form-projection';
 
-type MobilePane = 'conversation' | 'form';
+function useDesktopLayout(): boolean {
+  const [desktop, setDesktop] = useState(() => (
+    typeof window.matchMedia === 'function'
+      ? window.matchMedia('(min-width: 1024px)').matches
+      : false
+  ));
+
+  useEffect(() => {
+    if (typeof window.matchMedia !== 'function') return;
+    const query = window.matchMedia('(min-width: 1024px)');
+    const update = () => setDesktop(query.matches);
+    update();
+    query.addEventListener?.('change', update);
+    return () => query.removeEventListener?.('change', update);
+  }, []);
+
+  return desktop;
+}
 
 function LoadingWorkspace() {
   return (
     <div className="flex h-full min-h-0 flex-col bg-background" aria-label="正在加载 AI 设计">
       <div className="h-16 animate-pulse border-b border-border/60 bg-surface-subtle/60" />
-      <div className="grid min-h-0 flex-1 lg:grid-cols-[minmax(320px,0.78fr)_minmax(520px,1.22fr)]">
+      <div className="grid min-h-0 flex-1 lg:grid-cols-[minmax(420px,1.35fr)_minmax(360px,0.9fr)]">
         <div className="space-y-4 border-r border-border/60 bg-surface-subtle/40 p-5">
           <div className="h-16 animate-pulse rounded-2xl bg-surface-subtle" />
           <div className="ml-auto h-20 w-4/5 animate-pulse rounded-2xl bg-brand/[0.07]" />
@@ -51,19 +75,19 @@ function EmptyWorkspace() {
     <div className="flex h-full min-h-0 items-center justify-center bg-surface-subtle/35 px-6 py-10">
       <section data-testid="image-workspace-empty-state" className="w-full max-w-lg rounded-2xl border border-border/70 bg-background p-8 shadow-soft">
         <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-brand/[0.09] text-brand">
-          <FileSliders className="h-5 w-5" />
+          <Sparkles className="h-5 w-5" />
         </div>
-        <h1 className="mt-5 text-2xl font-semibold tracking-tight text-foreground">创建你的第一份设计表单</h1>
+        <h1 className="mt-5 text-2xl font-semibold tracking-tight text-foreground">你想创作什么？</h1>
         <p className="mt-2 max-w-md text-sm leading-6 text-muted-foreground">
-          项目创建后，表单会立即出现。你可以直接填写，也可以让设计 Agent 通过对话逐步完善。
+          可以先说一个想法，也可以之后放一张图片。AI 会和你一起把它变成作品。
         </p>
         <Button
           type="button"
-          className="mt-6 rounded-xl"
+          className="mt-6 min-h-11 rounded-xl"
           onClick={() => window.dispatchEvent(new Event(IMAGE_WORKSPACE_CREATE_PROJECT_EVENT))}
         >
           <Plus className="mr-2 h-4 w-4" />
-          新建设计项目
+          开始第一个创作
         </Button>
       </section>
     </div>
@@ -85,7 +109,7 @@ function ErrorWorkspace({
         </div>
         <h1 className="mt-4 text-lg font-semibold text-foreground">AI 设计暂时无法连接</h1>
         <p className="mt-2 text-sm leading-6 text-muted-foreground">{message}</p>
-        <Button type="button" variant="outline" className="mt-5 rounded-xl" onClick={retry}>
+        <Button type="button" variant="outline" className="mt-5 min-h-11 rounded-xl" onClick={retry}>
           <RefreshCw className="mr-2 h-4 w-4" />
           重新连接
         </Button>
@@ -101,6 +125,7 @@ export function ImageCanvas() {
   const workspace = useImageWorkspaceStore((state) => state.workspace);
   const eventState = useImageWorkspaceStore((state) => state.eventState);
   const error = useImageWorkspaceStore((state) => state.error);
+  const quoteBlockers = useImageWorkspaceStore((state) => state.quoteBlockers);
   const load = useImageWorkspaceStore((state) => state.load);
   const refreshWorkspace = useImageWorkspaceStore((state) => state.refreshWorkspace);
   const connectEvents = useImageWorkspaceStore((state) => state.connectEvents);
@@ -108,9 +133,9 @@ export function ImageCanvas() {
   const setChatDraft = useImageWorkspaceStore((state) => state.setChatDraft);
   const consumePendingPrompt = useImagePromptMuseumStore((state) => state.consumePendingPrompt);
   const workspaceId = workspace?.workspace.workspaceId ?? null;
-  const [mobilePane, setMobilePane] = useState<MobilePane>(() => (
-    useImagePromptMuseumStore.getState().pendingPrompt ? 'conversation' : 'form'
-  ));
+  const desktopLayout = useDesktopLayout();
+  const [creationCardOpen, setCreationCardOpen] = useState(false);
+  const [fineTuneOpen, setFineTuneOpen] = useState(false);
 
   useEffect(() => {
     if (authenticated && (status === 'idle' || status === 'auth-required')) void load();
@@ -148,6 +173,31 @@ export function ImageCanvas() {
 
   const streamHealthy = eventState === 'connected';
   const generationAvailable = bootstrap?.capabilities.generation !== false;
+  const cardModel = projectYouthCreationCard(workspace, { quoteBlockers });
+  const hasOfferedQuote = workspace.form.activeQuotes.some((quote) => quote.status === 'offered');
+  const focusComposer = () => {
+    setCreationCardOpen(false);
+    globalThis.setTimeout(() => {
+      document.getElementById('design-chat-composer')?.focus();
+    }, 0);
+  };
+  const openFineTune = () => {
+    setCreationCardOpen(false);
+    setFineTuneOpen(true);
+  };
+  const productionContent = (
+    <div className="space-y-5">
+      <DesignPendingOperationsPanel />
+      {hasOfferedQuote && <DesignQuotePanel workspace={workspace} />}
+      {!generationAvailable && (
+        <div className="rounded-2xl border border-border/70 bg-background p-4 text-sm leading-6 text-muted-foreground">
+          现在还不能开始制作，但你可以继续完善想法，已填写的内容会保存。
+        </div>
+      )}
+      <DesignTaskPanel tasks={workspace.tasks} />
+      <DesignAssetsPanel workspace={workspace} />
+    </div>
+  );
 
   return (
     <div data-testid="image-workspace" className="flex h-full min-h-0 flex-col overflow-hidden bg-background font-sans">
@@ -160,7 +210,7 @@ export function ImageCanvas() {
             </h1>
           </div>
           <div className="mt-1 hidden sm:block">
-            <DesignFormSummary workspace={workspace} />
+            <p className="text-xs text-muted-foreground">{cardModel.readinessMessage}</p>
           </div>
         </div>
 
@@ -171,7 +221,7 @@ export function ImageCanvas() {
               ? 'bg-brand/[0.06] text-brand'
               : 'bg-surface-subtle text-muted-foreground',
           )}
-          title={streamHealthy ? '已连接实时设计事件' : '事件连接恢复中，权威状态仍会重新同步'}
+          title={streamHealthy ? '已经连接' : '正在重新连接，你的内容不会丢失'}
         >
           {streamHealthy ? <Cloud className="h-3.5 w-3.5" /> : <CloudOff className="h-3.5 w-3.5" />}
           {streamHealthy ? '实时同步' : '恢复连接'}
@@ -181,7 +231,7 @@ export function ImageCanvas() {
           type="button"
           variant="ghost"
           size="icon"
-          className="h-9 w-9 rounded-xl"
+          className="h-11 w-11 rounded-xl"
           aria-label="刷新设计项目"
           onClick={() => void refreshWorkspace()}
         >
@@ -194,7 +244,7 @@ export function ImageCanvas() {
           <span>{error}</span>
           <button
             type="button"
-            className="shrink-0 rounded-lg px-2 py-1 font-medium hover:bg-amber-100"
+            className="min-h-11 shrink-0 rounded-xl px-3 font-medium hover:bg-amber-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-700/35"
             onClick={() => void refreshWorkspace()}
           >
             刷新
@@ -202,76 +252,77 @@ export function ImageCanvas() {
         </div>
       )}
 
-      <div className="flex shrink-0 border-b border-border/70 bg-background p-2 lg:hidden">
-        <button
-          type="button"
-          className={cn(
-            'flex flex-1 items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition-colors',
-            mobilePane === 'form' ? 'bg-brand/[0.08] text-brand' : 'text-muted-foreground',
-          )}
-          onClick={() => setMobilePane('form')}
-        >
-          <FileSliders className="h-4 w-4" />
-          设计表单
-        </button>
-        <button
-          type="button"
-          className={cn(
-            'flex flex-1 items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition-colors',
-            mobilePane === 'conversation' ? 'bg-brand/[0.08] text-brand' : 'text-muted-foreground',
-          )}
-          onClick={() => setMobilePane('conversation')}
-        >
-          <MessageSquareText className="h-4 w-4" />
-          对话
-        </button>
-      </div>
+      {!desktopLayout && (
+        <div className="shrink-0 border-b border-border/70 bg-background p-2">
+          <button
+            type="button"
+            className="flex min-h-11 w-full items-center justify-between gap-3 rounded-xl bg-brand/[0.06] px-3 py-2.5 text-left transition-colors hover:bg-brand/[0.1] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/35"
+            onClick={() => setCreationCardOpen(true)}
+          >
+            <span className="flex min-w-0 items-center gap-2">
+              <Sparkles className="h-4 w-4 shrink-0 text-brand" />
+              <span className="truncate text-sm font-semibold text-foreground">我的创作</span>
+            </span>
+            <span className="truncate text-xs text-muted-foreground">{cardModel.readinessMessage}</span>
+          </button>
+        </div>
+      )}
 
-      <main className="grid min-h-0 flex-1 lg:grid-cols-[minmax(320px,0.78fr)_minmax(520px,1.22fr)]">
-        <div
-          className={cn(
-            'min-h-0 border-r border-border/70 lg:flex',
-            mobilePane === 'conversation' ? 'flex' : 'hidden',
-          )}
-        >
+      <main className="grid min-h-0 flex-1 lg:grid-cols-[minmax(420px,1.35fr)_minmax(360px,0.9fr)]">
+        <div className="flex min-h-0 lg:border-r lg:border-border/70">
           <DesignConversationPane workspace={workspace} />
         </div>
 
-        <section
-          data-testid="image-workspace-living-form"
-          className={cn('min-h-0 bg-surface-subtle/30 lg:block', mobilePane === 'form' ? 'block' : 'hidden')}
-        >
-          <div className="h-full overflow-y-auto">
-            <div className="sticky top-0 z-[1] border-b border-border/70 bg-background/95 px-5 py-4 backdrop-blur-sm">
-              <div className="flex items-start justify-between gap-4">
-                <div>
-                  <h2 className="text-base font-semibold text-foreground">Living Form</h2>
-                  <p className="mt-1 text-xs leading-5 text-muted-foreground">
-                    对话和直接编辑共同维护这一份设计规格。已锁定字段不会被 Agent 改写。
-                  </p>
-                </div>
-                <span className="shrink-0 rounded-lg bg-surface-subtle px-2 py-1 text-[11px] tabular-nums text-muted-foreground">
-                  方向 {workspace.form.directionRevision}
-                </span>
+        {desktopLayout && (
+          <section
+            data-testid="image-workspace-creation-pane"
+            className="min-h-0 bg-surface-subtle/35"
+          >
+            <div className="h-full overflow-y-auto">
+              <div className="mx-auto max-w-3xl space-y-5 px-4 py-5 sm:px-5">
+                <YouthCreationCard
+                  workspace={workspace}
+                  quoteBlockers={quoteBlockers}
+                  generationAvailable={generationAvailable}
+                  onOpenFineTune={openFineTune}
+                  onFocusComposer={focusComposer}
+                />
+                {productionContent}
               </div>
             </div>
-
-            <div className="mx-auto max-w-5xl space-y-6 px-4 py-5 sm:px-5">
-              <DesignPendingOperationsPanel />
-              {generationAvailable ? (
-                <DesignQuotePanel workspace={workspace} />
-              ) : (
-                <div className="rounded-2xl border border-border/70 bg-background p-4 text-sm text-muted-foreground">
-                  当前账号暂未开放生成能力，但仍可继续完善设计表单。
-                </div>
-              )}
-              <DesignFormPane workspace={workspace} />
-              <DesignTaskPanel tasks={workspace.tasks} />
-              <DesignAssetsPanel workspace={workspace} />
-            </div>
-          </div>
-        </section>
+          </section>
+        )}
       </main>
+
+      {!desktopLayout && (
+        <Sheet open={creationCardOpen} onOpenChange={setCreationCardOpen}>
+          <SheetContent side="bottom" className="flex max-h-[88vh] flex-col overflow-hidden rounded-t-3xl p-0">
+            <SheetHeader className="sr-only">
+              <SheetTitle>我的创作</SheetTitle>
+              <SheetDescription>查看当前想法、制作方案和作品。</SheetDescription>
+            </SheetHeader>
+            <div className="min-h-0 flex-1 overflow-y-auto bg-surface-subtle/35 px-4 py-4">
+              <div className="space-y-5 pb-[max(1rem,env(safe-area-inset-bottom))]">
+                <YouthCreationCard
+                  workspace={workspace}
+                  quoteBlockers={quoteBlockers}
+                  generationAvailable={generationAvailable}
+                  onOpenFineTune={openFineTune}
+                  onFocusComposer={focusComposer}
+                />
+                {productionContent}
+              </div>
+            </div>
+          </SheetContent>
+        </Sheet>
+      )}
+
+      <FineTuneDrawer
+        open={fineTuneOpen}
+        onOpenChange={setFineTuneOpen}
+        workspace={workspace}
+        quoteBlockers={quoteBlockers}
+      />
     </div>
   );
 }
diff --git a/src/pages/ImageCanvas/youth-form-projection.ts b/src/pages/ImageCanvas/youth-form-projection.ts
new file mode 100644
index 00000000..f9bcc19e
--- /dev/null
+++ b/src/pages/ImageCanvas/youth-form-projection.ts
@@ -0,0 +1,398 @@
+import type {
+  DesignAsset,
+  DesignCompilationIssue,
+  DesignDecisionPrompt,
+  DesignMedium,
+  DesignSpecificationValues,
+  DesignWorkspace,
+} from '../../../shared/image-workspace';
+import { projectYouthCompilationIssue } from './youth-issue-copy';
+
+export type YouthFieldTier = 'A' | 'B' | 'C';
+
+type LeafPaths<T, Prefix extends string = ''> = T extends readonly unknown[]
+  ? Prefix
+  : T extends object
+    ? {
+      [Key in keyof T & string]: LeafPaths<
+        T[Key],
+        Prefix extends '' ? Key : `${Prefix}.${Key}`
+      >
+    }[keyof T & string]
+    : Prefix;
+
+export type DesignSpecificationPath = LeafPaths<DesignSpecificationValues>;
+
+/**
+ * Presentation only. The Specification and its reducer remain the authority.
+ * Keeping this as an exhaustive Record makes a newly-added Specification field a
+ * compile-time review item instead of silently adding another visible form control.
+ */
+export const YOUTH_FIELD_TIERS = {
+  'intent.media': 'A',
+  'intent.creation_intent': 'B',
+  'intent.purpose': 'B',
+  'intent.channel': 'B',
+  'intent.audience': 'B',
+  'intent.intended_response': 'C',
+  'intent.communication_goal': 'C',
+  'intent.success_definition': 'C',
+  'intent.related_direction_id': 'C',
+  'intent.related_asset_id': 'B',
+  'content.concept': 'A',
+  'content.narrative': 'A',
+  'content.subjects': 'A',
+  'content.action': 'A',
+  'content.environment': 'A',
+  'content.emotional_tone': 'A',
+  'content.exact_content': 'B',
+  'visual.art_direction': 'A',
+  'visual.cultural_cues': 'C',
+  'visual.composition': 'B',
+  'visual.viewpoint': 'C',
+  'visual.lighting': 'C',
+  'visual.palette': 'B',
+  'visual.materials': 'C',
+  'visual.finish': 'C',
+  'layout.regions': 'C',
+  'layout.subject_placement': 'B',
+  'layout.text_placement': 'B',
+  'layout.logo_placement': 'B',
+  'layout.safe_areas': 'C',
+  'layout.crop_behavior': 'C',
+  'layout.typography': 'B',
+  'layout.exact_rendering': 'C',
+  references: 'A',
+  'image.operation_intent': 'B',
+  'image.source_asset_id': 'A',
+  'image.mask_asset_id': 'B',
+  'image.preserve_instructions': 'A',
+  'image.change_instructions': 'A',
+  'image.background_behavior': 'B',
+  'image.transparency_required': 'B',
+  'image.edge_crop_behavior': 'C',
+  'image.variant_relationship': 'C',
+  'video.total_duration_seconds': 'A',
+  'video.pacing': 'A',
+  'video.first_frame_asset_id': 'B',
+  'video.last_frame_asset_id': 'B',
+  'video.shots': 'A',
+  'video.rhythm': 'C',
+  'video.speed_behavior': 'C',
+  'video.stillness': 'C',
+  'video.loop_behavior': 'B',
+  'video.end_state': 'A',
+  'video.continuity': 'C',
+  'video.audio_intent': 'B',
+  'output.aspect_ratio': 'A',
+  'output.orientation': 'A',
+  'output.quality_intent': 'C',
+  'output.delivery_format': 'C',
+  'output.variant_count': 'B',
+  'output.variant_purposes': 'B',
+  'output.crop_requirements': 'C',
+  'output.export_requirements': 'C',
+  'output.safe_areas': 'C',
+  'constraints.must_include': 'A',
+  'constraints.must_preserve': 'A',
+  'constraints.must_avoid': 'A',
+  'constraints.brand_constraints': 'B',
+  'constraints.flexible_preferences': 'B',
+  'constraints.acceptance_criteria': 'C',
+} as const satisfies Record<DesignSpecificationPath, YouthFieldTier>;
+
+export const DESIGN_SPECIFICATION_PATHS = Object.freeze(
+  Object.keys(YOUTH_FIELD_TIERS) as DesignSpecificationPath[],
+);
+
+export type YouthCreationPhase =
+  | 'empty'
+  | 'exploring'
+  | 'ready'
+  | 'confirming'
+  | 'generating'
+  | 'result';
+
+export type YouthDestination = {
+  id: 'phone-portrait' | 'poster-portrait' | 'square' | 'desktop-landscape' | 'custom';
+  label: string;
+  aspectRatio: string;
+  orientation: string | null;
+};
+
+export type YouthStyleSummary = {
+  label: string;
+  source: 'art-direction' | 'feeling';
+};
+
+export type YouthReferenceSummary = {
+  id: string;
+  assetId: string;
+  asset: DesignAsset | null;
+  preserve: string[];
+  adapt: string[];
+  doNotCopy: string[];
+};
+
+export type YouthVideoSummary = {
+  durationSeconds: number | null;
+  pacing: string | null;
+  endState: string | null;
+  storyBeats: string[];
+};
+
+export type YouthActiveChoice = Pick<
+  DesignDecisionPrompt,
+  'id' | 'kind' | 'title' | 'body' | 'options' | 'targetPaths'
+>;
+
+export type YouthCreationCardModel = {
+  phase: YouthCreationPhase;
+  summary: string | null;
+  medium: DesignMedium | null;
+  destination: YouthDestination | null;
+  style: YouthStyleSummary | null;
+  mustInclude: string[];
+  mustPreserve: string[];
+  mustAvoid: string[];
+  references: YouthReferenceSummary[];
+  video: YouthVideoSummary | null;
+  activeChoice: YouthActiveChoice | null;
+  blockers: DesignCompilationIssue[];
+  blockerCount: number;
+  canRequestQuote: boolean;
+  delegatedSummary: string | null;
+  readinessMessage: string;
+};
+
+export const YOUTH_DESTINATIONS = [
+  {
+    id: 'phone-portrait',
+    label: '手机竖屏',
+    aspectRatio: '9:16',
+    orientation: 'portrait',
+  },
+  {
+    id: 'poster-portrait',
+    label: '竖版海报',
+    aspectRatio: '3:4',
+    orientation: 'portrait',
+  },
+  {
+    id: 'square',
+    label: '正方形',
+    aspectRatio: '1:1',
+    orientation: 'square',
+  },
+  {
+    id: 'desktop-landscape',
+    label: '电脑横屏',
+    aspectRatio: '16:9',
+    orientation: 'landscape',
+  },
+] as const satisfies readonly YouthDestination[];
+
+type ProjectionOptions = {
+  quoteBlockers?: DesignCompilationIssue[];
+};
+
+function cleanText(value: string | null | undefined): string | null {
+  const trimmed = value?.trim();
+  return trimmed ? trimmed : null;
+}
+
+function concise(value: string, maximum = 120): string {
+  const normalized = value.replace(/\s+/g, ' ').trim();
+  return normalized.length <= maximum
+    ? normalized
+    : `${normalized.slice(0, maximum - 1).trimEnd()}…`;
+}
+
+function hasValue(value: unknown): boolean {
+  if (value === null || value === undefined || value === '') return false;
+  if (Array.isArray(value)) return value.length > 0;
+  return true;
+}
+
+function readPath(values: DesignSpecificationValues, path: DesignSpecificationPath): unknown {
+  let current: unknown = values;
+  for (const segment of path.split('.')) {
+    if (!current || typeof current !== 'object' || Array.isArray(current)) return null;
+    current = (current as Record<string, unknown>)[segment];
+  }
+  return current;
+}
+
+function projectDestination(values: DesignSpecificationValues): YouthDestination | null {
+  const aspectRatio = cleanText(values.output.aspect_ratio);
+  if (!aspectRatio) return null;
+  const known = YOUTH_DESTINATIONS.find((item) => (
+    item.aspectRatio === aspectRatio
+    && (!values.output.orientation || item.orientation === values.output.orientation)
+  ));
+  if (known) return known;
+  return {
+    id: 'custom',
+    label: aspectRatio,
+    aspectRatio,
+    orientation: cleanText(values.output.orientation),
+  };
+}
+
+function projectStyle(values: DesignSpecificationValues): YouthStyleSummary | null {
+  const artDirection = cleanText(values.visual.art_direction);
+  if (artDirection) return { label: concise(artDirection, 36), source: 'art-direction' };
+  const feeling = cleanText(values.content.emotional_tone);
+  return feeling ? { label: concise(feeling, 36), source: 'feeling' } : null;
+}
+
+function projectSummary(values: DesignSpecificationValues): string | null {
+  const concept = cleanText(values.content.concept);
+  if (concept) return concise(concept);
+  const subject = values.content.subjects.find((item) => cleanText(item.description));
+  if (subject) {
+    const description = cleanText(subject.description) ?? '';
+    const action = cleanText(subject.action) ?? cleanText(values.content.action);
+    return concise(action ? `${description}，${action}` : description);
+  }
+  const narrative = cleanText(values.content.narrative);
+  if (narrative) return concise(narrative);
+  const action = cleanText(values.content.action);
+  const environment = cleanText(values.content.environment);
+  if (action || environment) return concise([action, environment].filter(Boolean).join('，'));
+  const exactText = values.content.exact_content.find((item) => cleanText(item.text));
+  return exactText ? concise(`一份写着“${cleanText(exactText.text)}”的作品`) : null;
+}
+
+function projectReferences(workspace: DesignWorkspace): YouthReferenceSummary[] {
+  return workspace.form.specification.values.references.map((reference) => ({
+    id: reference.id,
+    assetId: reference.asset_id,
+    asset: workspace.assets.find((asset) => asset.assetId === reference.asset_id) ?? null,
+    preserve: reference.preserve.filter(Boolean),
+    adapt: reference.adapt.filter(Boolean),
+    doNotCopy: reference.do_not_copy.filter(Boolean),
+  }));
+}
+
+function projectVideo(values: DesignSpecificationValues): YouthVideoSummary | null {
+  if (values.intent.media !== 'video') return null;
+  return {
+    durationSeconds: values.video.total_duration_seconds,
+    pacing: cleanText(values.video.pacing),
+    endState: cleanText(values.video.end_state),
+    storyBeats: values.video.shots
+      .map((shot) => cleanText(shot.story_beat))
+      .filter((item): item is string => Boolean(item)),
+  };
+}
+
+function creatorMeaningExists(values: DesignSpecificationValues): boolean {
+  return DESIGN_SPECIFICATION_PATHS.some((path) => (
+    YOUTH_FIELD_TIERS[path] === 'A' && hasValue(readPath(values, path))
+  ));
+}
+
+function hasCoreIdea(values: DesignSpecificationValues): boolean {
+  return Boolean(
+    cleanText(values.content.concept)
+    || cleanText(values.content.narrative)
+    || cleanText(values.content.action)
+    || values.content.subjects.some((item) => cleanText(item.description))
+    || values.content.exact_content.some((item) => cleanText(item.text)),
+  );
+}
+
+function delegatedSummary(workspace: DesignWorkspace): string | null {
+  const delegated = Object.entries(workspace.form.specification.field_decisions)
+    .some(([, decision]) => decision.resolution === 'delegated');
+  return delegated ? '一些细节交给 AI 完成' : null;
+}
+
+function taskReadiness(workspace: DesignWorkspace): {
+  phase: 'generating' | 'result';
+  message: string;
+} | null {
+  const tasks = [...workspace.tasks]
+    .sort((left, right) => Date.parse(right.createdAt) - Date.parse(left.createdAt));
+  const active = tasks.find((task) => task.status === 'queued' || task.status === 'running');
+  if (active) {
+    if (active.executionHealth !== 'normal') {
+      return {
+        phase: 'generating',
+        message: '平台正在处理，不会重复制作或重复扣费',
+      };
+    }
+    if (active.progress.stage === 'preparing' || active.progress.stage === 'queued') {
+      return { phase: 'generating', message: '正在准备画面' };
+    }
+    if (active.progress.stage === 'validating' || active.progress.stage === 'finalizing') {
+      return { phase: 'generating', message: '正在检查结果' };
+    }
+    return { phase: 'generating', message: '正在制作，请稍等一下' };
+  }
+  const completed = tasks.find((task) => (
+    task.status === 'succeeded'
+    && task.resultAssetIds.some((assetId) => workspace.assets.some((asset) => asset.assetId === assetId))
+  ));
+  return completed ? { phase: 'result', message: '完成了，看看你的作品吧' } : null;
+}
+
+export function projectYouthCreationCard(
+  workspace: DesignWorkspace,
+  options: ProjectionOptions = {},
+): YouthCreationCardModel {
+  const values = workspace.form.specification.values;
+  const summary = projectSummary(values);
+  const activeChoice = workspace.form.decisionPrompts
+    .find((prompt) => prompt.options.length > 0) ?? null;
+  const blockers = (options.quoteBlockers ?? [])
+    .filter((issue) => issue.severity === 'blocker')
+    .map(projectYouthCompilationIssue);
+  const hasMeaning = creatorMeaningExists(values);
+  const taskState = taskReadiness(workspace);
+  const offeredQuote = workspace.form.activeQuotes.some((quote) => quote.status === 'offered');
+
+  let phase: YouthCreationPhase;
+  let readinessMessage: string;
+  if (taskState) {
+    phase = taskState.phase;
+    readinessMessage = taskState.message;
+  } else if (offeredQuote) {
+    phase = 'confirming';
+    readinessMessage = '制作方案准备好了';
+  } else if (blockers.length > 0 || activeChoice) {
+    phase = 'exploring';
+    readinessMessage = blockers.length > 0
+      ? `还差 ${blockers.length} 个关键选择`
+      : '还有一个关键选择';
+  } else if (values.intent.media && hasCoreIdea(values)) {
+    phase = 'ready';
+    readinessMessage = '想法已经清楚，可以检查制作方案';
+  } else if (hasMeaning) {
+    phase = 'exploring';
+    readinessMessage = '继续说说你想做的画面';
+  } else {
+    phase = 'empty';
+    readinessMessage = '等你的第一个想法';
+  }
+
+  return {
+    phase,
+    summary,
+    medium: values.intent.media,
+    destination: projectDestination(values),
+    style: projectStyle(values),
+    mustInclude: values.constraints.must_include.filter(Boolean),
+    mustPreserve: values.constraints.must_preserve.filter(Boolean),
+    mustAvoid: values.constraints.must_avoid.filter(Boolean),
+    references: projectReferences(workspace),
+    video: projectVideo(values),
+    activeChoice,
+    blockers,
+    blockerCount: blockers.length,
+    canRequestQuote: !offeredQuote && (phase === 'ready' || phase === 'result'),
+    delegatedSummary: delegatedSummary(workspace),
+    readinessMessage,
+  };
+}
diff --git a/src/pages/ImageCanvas/youth-issue-copy.ts b/src/pages/ImageCanvas/youth-issue-copy.ts
new file mode 100644
index 00000000..fcfa4786
--- /dev/null
+++ b/src/pages/ImageCanvas/youth-issue-copy.ts
@@ -0,0 +1,119 @@
+import type {
+  DesignCompilationIssue,
+  DesignGenerationTask,
+} from '../../../shared/image-workspace';
+
+const COMPILATION_COPY: Readonly<Record<string, string>> = {
+  design_medium_required: '先选择做图片还是视频。',
+  proposed_value_requires_confirmation: '还有一个建议需要你确认。',
+  delegated_value_unresolved: 'AI 还在补充一个关键细节，请稍后再试。',
+  video_requirements_conflict_with_image_medium: '现在同时用了图片和视频设置，请选择一种作品类型。',
+  image_requirements_conflict_with_video_medium: '现在同时用了图片和视频设置，请选择一种作品类型。',
+  design_purpose_unspecified: '还可以告诉 AI，这个作品准备做什么用。',
+  design_audience_unspecified: '还可以告诉 AI，这个作品主要给谁看。',
+  art_direction_unspecified: '还可以选择一种喜欢的画面风格。',
+  composition_unspecified: '还可以说说主体想放在画面的哪里。',
+  aspect_ratio_required: '先选择作品形状。',
+  output_count_defaulted: '没有选择数量，将先制作 1 个作品。',
+  variant_purposes_exceed_output_count: '版本用途比作品数量多，请调整作品数量或用途。',
+  variant_purposes_do_not_cover_all_outputs: '有些作品还没有用途，可以补充或交给 AI 决定。',
+  orientation_conflicts_with_aspect_ratio: '作品方向和形状不一致，请重新选择。',
+  reference_observation_fallback: '有张参考图还没检查完成，AI 会谨慎使用它。',
+  reference_input_limit_exceeded: '参考图太多了，请减少一些。',
+  exact_text_composition_unavailable: '这个制作方式暂时不能把文字准确放进画面。',
+  exact_text_placement_required: '请告诉 AI，文字想放在画面的哪里。',
+  exact_text_rendering_required: '请告诉 AI，画面里的文字要保持什么样子。',
+  logo_composition_unavailable: '这个制作方式暂时不能准确放置标志。',
+  logo_placement_required: '请告诉 AI，标志想放在画面的哪里。',
+  frozen_asset_missing: '有一张使用中的图片找不到了，请重新选择。',
+  frozen_asset_revision_mismatch: '有一张使用中的图片已经变化，请重新选择。',
+  reference_asset_not_image: '选择的参考内容不是图片，请换一张图片。',
+  image_route_unavailable: '图片制作暂时不可用，请稍后再试。',
+  video_route_unavailable: '视频制作暂时不可用，请稍后再试。',
+  image_direction_required: '再说一句你想画什么，或想把图片改成什么样。',
+  video_duration_required: '先选择视频时长。',
+  video_first_frame_required: '先选择视频从哪张图片开始。',
+  video_shots_required: '至少写一个视频画面。',
+  video_shot_timing_required: '多个视频画面需要安排好先后时间，请让 AI 帮你整理。',
+  video_timeline_must_start_at_zero: '第一个视频画面需要从开头开始。',
+  video_timeline_gap: '视频画面之间有空缺，请让 AI 帮你重新安排。',
+  video_timeline_duration_mismatch: '视频画面的总时间和视频时长对不上。',
+  video_continuity_unspecified: '还可以告诉 AI，不同画面之间要怎样保持连贯。',
+};
+
+const REQUIRED_PATH_COPY: Readonly<Record<string, string>> = {
+  'intent.media': '还需要选择作品类型。',
+  'output.aspect_ratio': '还需要选择作品形状。',
+  'image.source_asset_id': '还需要选择一张要修改的图片。',
+  'image.mask_asset_id': '还需要指出图片里要修改的地方。',
+  'video.total_duration_seconds': '还需要选择视频时长。',
+  'video.first_frame_asset_id': '还需要选择视频从哪张图片开始。',
+  'video.shots': '还需要补充视频里会发生什么。',
+  'content.exact_content': '还需要补充画面上必须出现的文字。',
+};
+
+export function youthCompilationIssueMessage(issue: DesignCompilationIssue): string {
+  const known = COMPILATION_COPY[issue.code];
+  if (known) return known;
+
+  if (issue.code.startsWith('multiple_')) {
+    return '这里选择了太多图片，请只保留最重要的一张。';
+  }
+  if (issue.code.endsWith('_binding_conflict')) {
+    return '同一张图片被安排成了不同用途，请重新选择。';
+  }
+  if (issue.code.includes('capacity_exceeded') || issue.code.includes('limit_exceeded')) {
+    return '内容或图片太多了，请保留最重要的部分。';
+  }
+  if (issue.code.includes('unsupported') || issue.code.includes('unavailable')) {
+    return '当前制作方式还不支持这个设置，请换一个选择。';
+  }
+  if (issue.code.includes('conflict')) {
+    return '有两个设置互相冲突，请重新选择。';
+  }
+  if (issue.code.endsWith('_required')) {
+    return (issue.path && REQUIRED_PATH_COPY[issue.path])
+      || '还需要补充一个关键选择。';
+  }
+  if (issue.severity === 'warning') {
+    return '有个小细节会由 AI 谨慎处理。';
+  }
+  return (issue.path && REQUIRED_PATH_COPY[issue.path])
+    || '还需要调整一个关键设置，请打开“精细调整”看看。';
+}
+
+export function projectYouthCompilationIssue(
+  issue: DesignCompilationIssue,
+): DesignCompilationIssue {
+  return {
+    ...issue,
+    message: youthCompilationIssueMessage(issue),
+  };
+}
+
+type DesignTaskIssue = DesignGenerationTask['issues'][number];
+
+const TASK_ISSUE_COPY: Readonly<Record<string, string>> = {
+  execution_capability_unavailable: '制作服务暂时不可用，请稍后再试。',
+  execution_contract_invalid: '这个制作方案暂时不能完成，请调整后再试。',
+  validation_failed: '作品没有通过最后检查，请调整后再试。',
+  asset_rejected: '作品没有通过内容检查，可以换一种安全的说法再试。',
+  generation_failed: '这次制作没有完成，请再试一次。',
+  policy_blocked: '这个想法暂时不能这样制作，可以换一种安全的表达。',
+  provider_not_accepted: '制作平台没有开始这次任务，不会扣设计点，请稍后再试。',
+  expired: '这次制作等得太久已经结束，请重新准备方案。',
+  cancelled: '这次制作已经取消。',
+  provider_resolution_deadline_elapsed: '平台没能及时确认结果，这次不会再扣设计点。',
+  submission_unknown: '平台正在确认刚才的制作，不会重复制作或重复扣费。',
+  provider_evidence_conflict: '平台正在核对这次制作，不会重复制作或重复扣费。',
+  provider_result_unresolved: '平台还在确认制作结果，不会重复制作或重复扣费。',
+};
+
+export function youthTaskIssueMessage(issue: DesignTaskIssue): string {
+  const known = TASK_ISSUE_COPY[issue.code];
+  if (known) return known;
+  if (issue.recoveryOwner === 'operator') {
+    return '平台正在确认这次制作，不会重复制作或重复扣费。';
+  }
+  return '这次制作没有完成，请调整后再试。';
+}
diff --git a/src/stores/image-workspace.ts b/src/stores/image-workspace.ts
index ddbd28e6..e4dc5555 100644
--- a/src/stores/image-workspace.ts
+++ b/src/stores/image-workspace.ts
@@ -142,6 +142,11 @@ function isDirectionConflict(error: unknown): boolean {
       || error.code === 'DIRECTION_REVISION_CONFLICT');
 }
 
+function isQuoteBlocked(error: unknown): boolean {
+  return error instanceof ImageWorkspaceApiError
+    && error.code.toLowerCase() === 'design_quote_blocked';
+}
+
 function parseWorkspaceEvent(event: Event): DesignWorkspaceEvent | null {
   const data = (event as MessageEvent<unknown>).data;
   if (typeof data !== 'string') return null;
@@ -184,6 +189,8 @@ function withWorkspace(
   workspace: DesignWorkspace,
 ): Partial<ImageWorkspaceState> {
   updateBackgroundLease(workspace.tasks);
+  const sameSpecification = state.workspace?.workspace.workspaceId === workspace.workspace.workspaceId
+    && state.workspace.form.specificationRevision === workspace.form.specificationRevision;
   return {
     status: 'ready',
     activeWorkspaceId: workspace.workspace.workspaceId,
@@ -195,6 +202,7 @@ function withWorkspace(
       }
       : state.bootstrap,
     error: null,
+    quoteBlockers: sameSpecification ? state.quoteBlockers : [],
   };
 }
 
@@ -304,6 +312,12 @@ export const useImageWorkspaceStore = create<ImageWorkspaceState>((set, get) =>
           delete pendingOperations[operation.id];
           return { pendingOperations, status: 'auth-required', error: message };
         });
+      } else if (isQuoteBlocked(error)) {
+        set((state) => {
+          const pendingOperations = { ...state.pendingOperations };
+          delete pendingOperations[operation.id];
+          return { pendingOperations, error: null };
+        });
       } else {
         set((state) => ({
           pendingOperations: {
@@ -512,9 +526,16 @@ export const useImageWorkspaceStore = create<ImageWorkspaceState>((set, get) =>
           set((state) => {
             if (!state.workspace) return { lastEventId: event.id };
             const nextWorkspace = applyEventToWorkspace(state.workspace, event);
+            const specificationChanged = nextWorkspace.form.specificationRevision
+              !== state.workspace.form.specificationRevision;
+            const pendingOperations = { ...state.pendingOperations };
+            if (event.type === 'design.quote.blocked') {
+              delete pendingOperations[event.clientOperationId];
+            }
             updateBackgroundLease(nextWorkspace.tasks);
             return {
               workspace: nextWorkspace,
+              pendingOperations,
               bootstrap: state.bootstrap
                 ? {
                   ...state.bootstrap,
@@ -524,7 +545,10 @@ export const useImageWorkspaceStore = create<ImageWorkspaceState>((set, get) =>
               lastEventId: event.id,
               quoteBlockers: event.type === 'design.quote.blocked'
                 ? event.blockers
-                : state.quoteBlockers,
+                : specificationChanged
+                  ? []
+                  : state.quoteBlockers,
+              error: event.type === 'design.quote.blocked' ? null : state.error,
             };
           });
           if (event.type === 'design.workspace.updated' && event.changedDirection) {
@@ -574,7 +598,7 @@ export const useImageWorkspaceStore = create<ImageWorkspaceState>((set, get) =>
         input: { kind: 'direct_edit', operations },
       };
       return executeCommand(command, {
-        label: '保存设计字段',
+        label: '保存你的调整',
         clearDraftPaths,
       });
     },
@@ -592,7 +616,7 @@ export const useImageWorkspaceStore = create<ImageWorkspaceState>((set, get) =>
         clientOperationId: createImageWorkspaceOperationId(),
         input: { kind: 'chat', message },
       };
-      return executeCommand(command, { label: '发送设计对话', clearChatDraft: true });
+      return executeCommand(command, { label: '发送消息', clearChatDraft: true });
     },
 
     resolveDecisionPrompt: async (promptId, action, optionId) => {
@@ -611,7 +635,7 @@ export const useImageWorkspaceStore = create<ImageWorkspaceState>((set, get) =>
           ...(optionId ? { optionId } : {}),
         },
       };
-      return executeCommand(command, { label: '确认设计决策' });
+      return executeCommand(command, { label: '保存你的选择' });
     },
 
     requestQuote: async () => {
@@ -625,7 +649,7 @@ export const useImageWorkspaceStore = create<ImageWorkspaceState>((set, get) =>
         specificationRevision: workspace.form.specificationRevision,
         clientOperationId: createImageWorkspaceOperationId(),
       };
-      return executeCommand(command, { label: '编译生成方案' });
+      return executeCommand(command, { label: '准备制作方案' });
     },
 
     confirmGeneration: async (quoteId) => {
@@ -639,7 +663,7 @@ export const useImageWorkspaceStore = create<ImageWorkspaceState>((set, get) =>
         expectedDirectionRevision: workspace.form.directionRevision,
         clientOperationId: createImageWorkspaceOperationId(),
       };
-      return executeCommand(command, { label: '确认生成' });
+      return executeCommand(command, { label: '开始制作' });
     },
 
     retryOperation: async (clientOperationId) => {
diff --git a/tests/e2e/image-workspace-v2.spec.ts b/tests/e2e/image-workspace-v2.spec.ts
index 9016feb8..a69b7afd 100644
--- a/tests/e2e/image-workspace-v2.spec.ts
+++ b/tests/e2e/image-workspace-v2.spec.ts
@@ -96,7 +96,7 @@ test.describe('AI Design V2 workspace', () => {
     }
   });
 
-  test('keeps conversation and direct edits on one Living Form through immutable confirmation', async ({ launchElectronApp }) => {
+  test('keeps conversation and youth-friendly direct edits on one canonical design through production confirmation', async ({ launchElectronApp }) => {
     test.setTimeout(120_000);
     const app = await launchElectronApp({ skipSetup: true });
 
@@ -193,7 +193,7 @@ test.describe('AI Design V2 workspace', () => {
             turnId: 'turn-1',
             rawTurnSequence: 1,
             userMessage: '做一张便携咖啡机的小红书主视觉',
-            assistantMessage: '我已经把用途和初步构想写入设计表单。',
+            assistantMessage: '明白了：你想做一张适合小红书的便携咖啡机图片。',
           }],
           tasks: [] as Array<Record<string, unknown>>,
           assets: [],
@@ -278,6 +278,9 @@ test.describe('AI Design V2 workspace', () => {
                   if (operation.kind === 'set' && operation.path === 'output.aspect_ratio') {
                     workspace.form.specification.values.output.aspect_ratio = String(operation.value ?? '');
                   }
+                  if (operation.kind === 'set' && operation.path === 'output.orientation') {
+                    workspace.form.specification.values.output.orientation = String(operation.value ?? '');
+                  }
                 }
               }
               if (command.input?.kind === 'chat' && command.input.message) {
@@ -286,7 +289,7 @@ test.describe('AI Design V2 workspace', () => {
                   turnId: `turn-${workspace.form.rawTurnSequence}`,
                   rawTurnSequence: workspace.form.rawTurnSequence,
                   userMessage: command.input.message,
-                  assistantMessage: '已把这条补充写入同一份设计规格。',
+                  assistantMessage: '记住了：主体更简洁，也会为标题留出空间。',
                 });
               }
               workspace.form.directionRevision += 1;
@@ -403,50 +406,72 @@ test.describe('AI Design V2 workspace', () => {
         (globalThis as typeof globalThis & { __designE2eProfileReady?: boolean }).__designE2eProfileReady,
       ))).toBe(true);
       await expect(page.getByTestId('image-workspace-conversation')).toBeVisible();
-      await expect(page.getByTestId('image-workspace-living-form')).toBeVisible();
-      await expect(page.getByText('Living Form')).toBeVisible();
-      await expect(page.getByText('目标与用途')).toBeVisible();
-      await expect(page.getByText('内容与叙事')).toBeVisible();
+      await expect(page.getByTestId('image-workspace-creation-pane')).toBeVisible();
+      await expect(page.getByRole('heading', { name: '我的创作' })).toBeVisible();
+      await expect(page.getByText('把便携咖啡机呈现为城市通勤中的精密工具')).toBeVisible();
+      await expect(page.getByText('Living Form')).toHaveCount(0);
+      await expect(page.getByText('目标与用途')).toHaveCount(0);
       await expect(page.locator('[data-testid^="sidebar-image-conversation-"]')).toHaveCount(0);
 
       const layout = await page.evaluate(() => {
         const conversation = document.querySelector('[data-testid="image-workspace-conversation"]')
           ?.getBoundingClientRect();
-        const form = document.querySelector('[data-testid="image-workspace-living-form"]')
+        const cardPane = document.querySelector('[data-testid="image-workspace-creation-pane"]')
           ?.getBoundingClientRect();
-        return conversation && form
-          ? { conversationHeight: conversation.height, formHeight: form.height, topGap: Math.abs(conversation.top - form.top) }
+        return conversation && cardPane
+          ? {
+            conversationHeight: conversation.height,
+            cardHeight: cardPane.height,
+            topGap: Math.abs(conversation.top - cardPane.top),
+            conversationWidth: conversation.width,
+            cardWidth: cardPane.width,
+          }
           : null;
       });
       expect(layout).not.toBeNull();
       expect(layout!.conversationHeight).toBeGreaterThan(300);
-      expect(Math.abs(layout!.conversationHeight - layout!.formHeight)).toBeLessThanOrEqual(1);
+      expect(Math.abs(layout!.conversationHeight - layout!.cardHeight)).toBeLessThanOrEqual(1);
       expect(layout!.topGap).toBeLessThanOrEqual(1);
+      expect(layout!.conversationWidth).toBeGreaterThan(layout!.cardWidth);
 
-      const ratioInput = page.getByLabel('画幅比例');
-      await ratioInput.fill('16:9');
-      await expect(ratioInput).toHaveValue('16:9');
-      await page.getByRole('button', { name: '保存', exact: true }).click();
-      await expect(page.getByText('方向 5')).toBeVisible();
+      const desktopViewport = page.viewportSize();
+      await page.setViewportSize({ width: 375, height: 800 });
+      await expect(page.getByTestId('image-workspace-conversation')).toBeVisible();
+      await expect(page.getByTestId('image-workspace-creation-pane')).toBeHidden();
+      await page.getByRole('button', { name: /^我的创作/ }).click();
+      await expect(page.getByTestId('youth-creation-card')).toBeVisible();
+      await page.keyboard.press('Escape');
+
+      await page.setViewportSize({ width: 768, height: 800 });
+      await expect(page.getByTestId('image-workspace-conversation')).toBeVisible();
+      await expect(page.getByTestId('image-workspace-creation-pane')).toBeHidden();
+
+      await page.setViewportSize(desktopViewport ?? { width: 1280, height: 800 });
+      await expect(page.getByTestId('image-workspace-creation-pane')).toBeVisible();
+
+      await page.getByRole('button', { name: '精细调整' }).click();
+      await page.getByRole('button', { name: '电脑横屏' }).click();
+      await page.getByRole('button', { name: '完成调整' }).click();
+      await expect(page.getByTestId('youth-creation-card').getByText('电脑横屏')).toBeVisible();
 
       const followUp = '主体更克制，留出品牌标题空间';
-      await page.getByLabel('给设计 Agent 留言').fill(followUp);
-      await page.getByLabel('给设计 Agent 留言').press('Enter');
+      await page.getByLabel('告诉 AI 你想创作什么').fill(followUp);
+      await page.getByLabel('告诉 AI 你想创作什么').press('Enter');
       await expect(page.getByTestId('image-workspace-conversation')).toContainText(followUp);
       await expect(page.getByTestId('image-workspace-conversation'))
-        .toContainText('已把这条补充写入同一份设计规格。');
+        .toContainText('记住了：主体更简洁，也会为标题留出空间。');
 
-      await page.getByRole('button', { name: '编译生成方案' }).click();
-      await expect(page.getByText('报价已冻结')).toBeVisible();
-      await expect(page.getByText('对应规格版本 5，确认后不会再读取当前表单的新修改。')).toBeVisible();
-      await expect(page.getByText('确认即按此不可变报价创建任务，不会在客户端拼接或改写提示词。')).toBeVisible();
+      await page.getByRole('button', { name: '看看制作方案' }).click();
+      await expect(page.getByRole('heading', { name: '制作方案准备好了' })).toBeVisible();
+      await expect(page.getByText('开始后会按现在的想法制作；如果再改想法，需要重新准备方案。')).toBeVisible();
       await expect(page.getByLabel(/Prompt|提示词/i)).toHaveCount(0);
+      await expect(page.getByText(/规格版本|编译器|生成方式|不可变/)).toHaveCount(0);
 
-      await page.getByRole('button', { name: '确认生成' }).click();
-      await expect(page.getByText('生成任务')).toBeVisible();
-      await expect(page.getByText('图片任务')).toBeVisible();
-      await expect(page.getByText('排队中')).toBeVisible();
-      await expect(page.getByText('正常')).toBeVisible();
+      await page.getByRole('button', { name: '花 12 设计点开始制作' }).click();
+      await expect(page.getByText('作品进度')).toBeVisible();
+      await expect(page.getByRole('heading', { name: '我的图片', exact: true })).toBeVisible();
+      await expect(page.getByText('正在准备', { exact: true })).toBeVisible();
+      await expect(page.getByText('正在准备画面').first()).toBeVisible();
       await expect(page.getByText('1200', { exact: true })).toHaveCount(0);
     } finally {
       await closeElectronApp(app);
diff --git a/tests/unit/fine-tune-drawer.test.tsx b/tests/unit/fine-tune-drawer.test.tsx
new file mode 100644
index 00000000..540982a8
--- /dev/null
+++ b/tests/unit/fine-tune-drawer.test.tsx
@@ -0,0 +1,277 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { FineTuneDrawer } from '@/pages/ImageCanvas/FineTuneDrawer';
+import { useImageWorkspaceStore } from '@/stores/image-workspace';
+import type {
+  DesignAsset,
+  DesignCompilationIssue,
+  DesignSpecificationValues,
+  DesignWorkspace,
+} from '../../shared/image-workspace';
+import {
+  designFormFixture,
+  designValuesFixture,
+  designWorkspaceFixture,
+} from '../fixtures/design-workspace-v2';
+
+function workspaceWithValues(
+  values: DesignSpecificationValues,
+  assets: DesignAsset[] = [],
+): DesignWorkspace {
+  return designWorkspaceFixture({
+    form: designFormFixture({
+      specification: {
+        schema_version: 1,
+        values,
+        field_decisions: {},
+      },
+    }),
+    assets,
+  });
+}
+
+function renderDrawer(
+  workspace: DesignWorkspace,
+  quoteBlockers: DesignCompilationIssue[] = [],
+) {
+  const applyFieldOperations = vi.fn().mockResolvedValue(workspace);
+  useImageWorkspaceStore.setState({
+    workspace,
+    fieldDrafts: {},
+    pendingOperations: {},
+    applyFieldOperations,
+  });
+  render(
+    <FineTuneDrawer
+      open
+      onOpenChange={vi.fn()}
+      workspace={workspace}
+      quoteBlockers={quoteBlockers}
+    />,
+  );
+  return { applyFieldOperations };
+}
+
+describe('FineTuneDrawer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useImageWorkspaceStore.getState().reset();
+  });
+
+  it('shows a small set of youth-facing image controls and preserves typed direct edits', () => {
+    const values = structuredClone(designValuesFixture);
+    const blocker: DesignCompilationIssue = {
+      code: 'aspect_ratio_required',
+      message: 'Choose an aspect ratio supported by the frozen route.',
+      severity: 'blocker',
+      path: 'output.aspect_ratio',
+    };
+    const { applyFieldOperations } = renderDrawer(workspaceWithValues(values), [blocker]);
+
+    expect(screen.getByRole('heading', { name: '精细调整' })).toBeInTheDocument();
+    expect(screen.getByText('先选择作品形状。')).toBeInTheDocument();
+    expect(screen.queryByText(/frozen route/i)).not.toBeInTheDocument();
+    expect(screen.getByText('作品的样子')).toBeInTheDocument();
+    expect(screen.getByText('画面上的文字')).toBeInTheDocument();
+    expect(screen.queryByText('图片调整')).not.toBeInTheDocument();
+    expect(screen.queryByText('视频故事')).not.toBeInTheDocument();
+    expect(screen.queryByText(/milliseconds|camera|focus_behavior|Specification|compiler/i)).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: '手机竖屏' }));
+    expect(applyFieldOperations).toHaveBeenCalledWith([
+      { kind: 'set', path: 'output.aspect_ratio', value: '9:16' },
+      { kind: 'set', path: 'output.orientation', value: 'portrait' },
+    ], []);
+
+    fireEvent.click(screen.getByText('其他小调整'));
+    fireEvent.change(screen.getByLabelText('喜欢哪些颜色？'), {
+      target: { value: '蓝紫色和亮黄色' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '保存' }));
+    expect(applyFieldOperations).toHaveBeenLastCalledWith([
+      { kind: 'set', path: 'visual.palette', value: '蓝紫色和亮黄色' },
+    ], ['visual.palette']);
+  });
+
+  it('renders image edit controls only when the current design is editing an image', () => {
+    const values = structuredClone(designValuesFixture);
+    values.intent.creation_intent = 'edit';
+    values.image.source_asset_id = 'asset-source';
+    const asset: DesignAsset = {
+      assetId: 'asset-source',
+      workspaceId: 'workspace-1',
+      role: 'uploaded',
+      mediaType: 'image',
+      mimeType: 'image/png',
+      width: 800,
+      height: 800,
+      durationMilliseconds: null,
+      generationTaskId: null,
+      createdAt: '2026-09-02T09:00:00.000Z',
+      contentPath: '/api/design/assets/asset-source/content',
+    };
+
+    renderDrawer(workspaceWithValues(values, [asset]));
+
+    expect(screen.getByText('图片调整')).toBeInTheDocument();
+    expect(screen.getByLabelText('从哪张图开始修改？')).toBeInTheDocument();
+    expect(screen.queryByText('视频故事')).not.toBeInTheDocument();
+  });
+
+  it('maps a simple video story back to canonical Shots without exposing timing or camera fields', () => {
+    const values = structuredClone(designValuesFixture);
+    values.intent.media = 'video';
+    values.video.total_duration_seconds = 5;
+    values.video.pacing = '自然流畅';
+    values.video.shots = [{
+      id: 'shot-1',
+      start_milliseconds: 0,
+      end_milliseconds: 5_000,
+      story_beat: '机器人找到面粉',
+      framing: 'close-up',
+      camera: 'dolly-in',
+      subject_motion: null,
+      environment_motion: null,
+      focus_behavior: null,
+      transition: null,
+    }];
+    const { applyFieldOperations } = renderDrawer(workspaceWithValues(values));
+
+    expect(screen.getByText('视频故事')).toBeInTheDocument();
+    expect(screen.queryByText('图片调整')).not.toBeInTheDocument();
+    expect(screen.queryByText('画面上的文字')).not.toBeInTheDocument();
+    expect(screen.queryByText(/start_milliseconds|end_milliseconds|dolly-in|focus_behavior/i)).not.toBeInTheDocument();
+
+    fireEvent.change(screen.getByLabelText('画面 1'), {
+      target: { value: '机器人找到面粉' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '添加一个画面' }));
+    fireEvent.change(screen.getByLabelText('画面 2'), {
+      target: { value: '机器人端出星星饼干' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '保存故事' }));
+
+    const operations = applyFieldOperations.mock.calls.at(-1)?.[0];
+    expect(operations).toHaveLength(1);
+    expect(operations[0]).toMatchObject({ kind: 'set', path: 'video.shots' });
+    expect(operations[0].value).toEqual([
+      expect.objectContaining({
+        id: 'shot-1',
+        story_beat: '机器人找到面粉',
+        start_milliseconds: 0,
+        end_milliseconds: 5_000,
+        camera: 'dolly-in',
+      }),
+      expect.objectContaining({
+        story_beat: '机器人端出星星饼干',
+        start_milliseconds: null,
+        end_milliseconds: null,
+        camera: null,
+      }),
+    ]);
+  });
+
+  it('preserves every supported Shot identity and hidden field when one beat changes', () => {
+    const values = structuredClone(designValuesFixture);
+    values.intent.media = 'video';
+    values.video.total_duration_seconds = 24;
+    values.video.shots = Array.from({ length: 24 }, (_, index) => ({
+      id: `shot-${index + 1}`,
+      start_milliseconds: index * 1_000,
+      end_milliseconds: (index + 1) * 1_000,
+      story_beat: `故事画面 ${index + 1}`,
+      framing: `framing-${index + 1}`,
+      camera: `camera-${index + 1}`,
+      subject_motion: `subject-${index + 1}`,
+      environment_motion: `environment-${index + 1}`,
+      focus_behavior: `focus-${index + 1}`,
+      transition: `transition-${index + 1}`,
+    }));
+    const { applyFieldOperations } = renderDrawer(workspaceWithValues(values));
+
+    expect(screen.getByLabelText('画面 24')).toHaveValue('故事画面 24');
+    expect(screen.getByRole('button', { name: '最多 24 个画面' })).toBeDisabled();
+    fireEvent.change(screen.getByLabelText('画面 1'), {
+      target: { value: '新的开场画面' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '保存故事' }));
+
+    const shots = applyFieldOperations.mock.calls.at(-1)?.[0]?.[0]?.value;
+    expect(shots).toHaveLength(24);
+    expect(shots[0]).toEqual({
+      ...values.video.shots[0],
+      story_beat: '新的开场画面',
+    });
+    expect(shots[6]).toEqual(values.video.shots[6]);
+    expect(shots[23]).toEqual(values.video.shots[23]);
+  });
+
+  it('treats a cleared existing beat as an explicit Shot deletion', () => {
+    const values = structuredClone(designValuesFixture);
+    values.intent.media = 'video';
+    values.video.shots = [1, 2].map((number) => ({
+      id: `shot-${number}`,
+      start_milliseconds: (number - 1) * 1_000,
+      end_milliseconds: number * 1_000,
+      story_beat: `故事画面 ${number}`,
+      framing: `framing-${number}`,
+      camera: `camera-${number}`,
+      subject_motion: null,
+      environment_motion: null,
+      focus_behavior: null,
+      transition: null,
+    }));
+    const { applyFieldOperations } = renderDrawer(workspaceWithValues(values));
+
+    expect(screen.getByText('清空文字后保存，会删除这个画面。')).toBeInTheDocument();
+    fireEvent.change(screen.getByLabelText('画面 1'), { target: { value: '   ' } });
+    fireEvent.click(screen.getByRole('button', { name: '保存故事' }));
+
+    const shots = applyFieldOperations.mock.calls.at(-1)?.[0]?.[0]?.value;
+    expect(shots).toEqual([values.video.shots[1]]);
+    expect(shots).not.toContainEqual(expect.objectContaining({ story_beat: null }));
+  });
+
+  it('updates reference intent without losing its canonical role or do-not-copy meaning', () => {
+    const values = structuredClone(designValuesFixture);
+    values.references = [{
+      id: 'reference-1',
+      asset_id: 'asset-reference',
+      asset_revision: null,
+      role: 'subject_identity',
+      preserve: ['圆脸'],
+      adapt: ['衣服颜色'],
+      do_not_copy: ['背景文字'],
+      reviewed_observations: ['白色背景'],
+    }];
+    const asset: DesignAsset = {
+      assetId: 'asset-reference',
+      workspaceId: 'workspace-1',
+      role: 'uploaded',
+      mediaType: 'image',
+      mimeType: 'image/png',
+      width: 600,
+      height: 600,
+      durationMilliseconds: null,
+      generationTaskId: null,
+      createdAt: '2026-09-02T09:00:00.000Z',
+      contentPath: '/api/design/assets/asset-reference/content',
+    };
+    const { applyFieldOperations } = renderDrawer(workspaceWithValues(values, [asset]));
+
+    fireEvent.change(screen.getByLabelText('参考图 1 最想保留什么'), {
+      target: { value: '圆脸\n红围巾' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '保存参考图' }));
+
+    const reference = applyFieldOperations.mock.calls.at(-1)?.[0]?.[0]?.value?.[0];
+    expect(reference).toMatchObject({
+      id: 'reference-1',
+      role: 'subject_identity',
+      preserve: ['圆脸', '红围巾'],
+      adapt: ['衣服颜色'],
+      do_not_copy: ['背景文字'],
+      reviewed_observations: ['白色背景'],
+    });
+  });
+});
diff --git a/tests/unit/image-canvas-page.test.tsx b/tests/unit/image-canvas-page.test.tsx
index e91ea0ed..d9a1cf68 100644
--- a/tests/unit/image-canvas-page.test.tsx
+++ b/tests/unit/image-canvas-page.test.tsx
@@ -53,7 +53,11 @@ function prepareWorkspace(overrides = {}) {
   return { workspace, actions };
 }
 
-describe('Living Form Canvas page', () => {
+function openMobileCreationCard() {
+  fireEvent.click(screen.getByRole('button', { name: /^我的创作/ }));
+}
+
+describe('youth AI Design Canvas page', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     useAuthStore.setState({
@@ -65,50 +69,61 @@ describe('Living Form Canvas page', () => {
     useImageWorkspaceStore.getState().reset();
   });
 
-  it('shows the persistent form beside the conversation from the first Workspace snapshot', () => {
+  it('starts with conversation and a concise Creation Card instead of a professional field matrix', () => {
     prepareWorkspace();
     render(<ImageCanvas />);
 
-    expect(screen.getByTestId('image-workspace-living-form')).toBeInTheDocument();
-    expect(screen.getByText('Living Form')).toBeInTheDocument();
-    expect(screen.getByText('目标与用途')).toBeInTheDocument();
-    expect(screen.getByText('内容与叙事')).toBeInTheDocument();
-    expect(screen.getByText('Agent 建议')).toBeInTheDocument();
+    expect(screen.getByTestId('image-workspace-conversation')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: '一起做作品' })).toBeInTheDocument();
+    openMobileCreationCard();
+    const card = screen.getByTestId('youth-creation-card');
+    expect(card).toBeInTheDocument();
+    expect(within(card).getByRole('heading', { name: '我的创作' })).toBeInTheDocument();
     expect(screen.getByText('做一张便携咖啡机的小红书主视觉')).toBeInTheDocument();
-    expect(screen.getByText('编译生成方案')).toBeInTheDocument();
+    expect(screen.queryByText('Living Form')).not.toBeInTheDocument();
+    expect(screen.queryByText('目标与用途')).not.toBeInTheDocument();
+    expect(screen.queryByText(/规格版本|编译器|生成策略|字段决策/)).not.toBeInTheDocument();
   });
 
-  it('keeps form edits local until the user saves an explicit field operation', () => {
+  it('sends high-impact fine adjustments through the existing typed field operations', () => {
     const { actions } = prepareWorkspace();
     render(<ImageCanvas />);
 
-    const ratio = screen.getByDisplayValue('3:4');
-    fireEvent.change(ratio, { target: { value: '16:9' } });
-    expect(useImageWorkspaceStore.getState().fieldDrafts).toEqual({
-      'output.aspect_ratio': '16:9',
-    });
-
-    const field = screen.getByText('画幅比例').closest('.space-y-2');
-    expect(field).not.toBeNull();
-    fireEvent.click(within(field as HTMLElement).getByRole('button', { name: '保存' }));
+    openMobileCreationCard();
+    fireEvent.click(screen.getByRole('button', { name: '精细调整' }));
+    fireEvent.click(screen.getByRole('button', { name: '电脑横屏' }));
 
     expect(actions.applyFieldOperations).toHaveBeenCalledWith(
-      [{ kind: 'set', path: 'output.aspect_ratio', value: '16:9' }],
-      ['output.aspect_ratio'],
+      [
+        { kind: 'set', path: 'output.aspect_ratio', value: '16:9' },
+        { kind: 'set', path: 'output.orientation', value: 'landscape' },
+      ],
+      [],
     );
   });
 
-  it('renders an immutable quote and confirms only its identity', () => {
+  it('shows a plain-language production confirmation and confirms only the Quote identity', () => {
+    const quote = designQuoteFixture();
+    quote.warnings = [{
+      code: 'reference_observation_fallback',
+      message: 'Reference observations were not reviewed by the frozen compiler.',
+      severity: 'warning',
+      path: 'references',
+    }];
     const workspace = designWorkspaceFixture({
-      form: designFormFixture({ activeQuotes: [designQuoteFixture()] }),
+      form: designFormFixture({ activeQuotes: [quote] }),
     });
     const { actions } = prepareWorkspace(workspace);
     render(<ImageCanvas />);
 
-    expect(screen.getByText('报价已冻结')).toBeInTheDocument();
+    openMobileCreationCard();
+    expect(screen.getByRole('heading', { name: '制作方案准备好了' })).toBeInTheDocument();
     expect(screen.getByText('12')).toBeInTheDocument();
+    expect(screen.getByText('有张参考图还没检查完成，AI 会谨慎使用它。')).toBeInTheDocument();
+    expect(screen.queryByText(/frozen compiler/i)).not.toBeInTheDocument();
     expect(screen.queryByDisplayValue(/prompt/i)).not.toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: '确认生成' }));
+    expect(screen.queryByText(/规格版本|报价已冻结|生成方式|不可变/)).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: '花 12 设计点开始制作' }));
     expect(actions.confirmGeneration).toHaveBeenCalledWith('quote-1');
   });
 
@@ -123,13 +138,13 @@ describe('Living Form Canvas page', () => {
     expect(actions.sendChat).not.toHaveBeenCalled();
   });
 
-  it('explains and safely retries a command whose accepted result is unknown', () => {
+  it('explains an unknown accepted result without suggesting a second production', () => {
     const { actions } = prepareWorkspace();
     useImageWorkspaceStore.setState({
       pendingOperations: {
         'operation-1': {
           id: 'operation-1',
-          label: '编译生成方案',
+          label: '准备制作方案',
           command: {
             kind: 'request_quote',
             workspaceId: 'workspace-1',
@@ -147,8 +162,10 @@ describe('Living Form Canvas page', () => {
     });
     render(<ImageCanvas />);
 
-    expect(screen.getByText('有操作结果尚未确认')).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: '安全重试' }));
+    openMobileCreationCard();
+    expect(screen.getByText('还在确认刚才的操作')).toBeInTheDocument();
+    expect(screen.getByText(/不会重复制作或重复扣费/)).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: '查看原来的结果' }));
     expect(actions.retryOperation).toHaveBeenCalledWith('operation-1');
   });
 
@@ -165,7 +182,7 @@ describe('Living Form Canvas page', () => {
     window.addEventListener('niancode:image-workspace:create-project', listener);
     render(<ImageCanvas />);
 
-    fireEvent.click(screen.getByRole('button', { name: '新建设计项目' }));
+    fireEvent.click(screen.getByRole('button', { name: '开始第一个创作' }));
     expect(listener).toHaveBeenCalledOnce();
     window.removeEventListener('niancode:image-workspace:create-project', listener);
   });
diff --git a/tests/unit/image-workspace-store.test.ts b/tests/unit/image-workspace-store.test.ts
index e3834f3a..79c38f60 100644
--- a/tests/unit/image-workspace-store.test.ts
+++ b/tests/unit/image-workspace-store.test.ts
@@ -134,6 +134,117 @@ describe('V2 Living Form store', () => {
     expect(useImageWorkspaceStore.getState().pendingOperations).toEqual({});
   });
 
+  it('expires quote blockers only after the canonical Specification changes', async () => {
+    await loadedStore();
+    const blocker = {
+      code: 'aspect_ratio_required',
+      message: 'Choose an aspect ratio supported by the frozen route.',
+      severity: 'blocker' as const,
+      path: 'output.aspect_ratio',
+    };
+    useImageWorkspaceStore.setState({ quoteBlockers: [blocker] });
+
+    await useImageWorkspaceStore.getState().refreshWorkspace();
+    expect(useImageWorkspaceStore.getState().quoteBlockers).toEqual([blocker]);
+
+    const revisedWorkspace = designWorkspaceFixture({
+      form: designFormFixture({
+        directionRevision: 5,
+        specificationRevision: 4,
+        specificationRevisionId: 'specification-revision-4',
+      }),
+    });
+    submitCommandMock.mockResolvedValueOnce({
+      clientOperationId: 'operation-1',
+      runId: 'run-2',
+      workspace: revisedWorkspace,
+    });
+    await useImageWorkspaceStore.getState().applyFieldOperations([
+      { kind: 'set', path: 'output.aspect_ratio', value: '16:9' },
+    ]);
+
+    expect(useImageWorkspaceStore.getState().quoteBlockers).toEqual([]);
+    expect(useImageWorkspaceStore.getState().workspace?.form.specificationRevision).toBe(4);
+  });
+
+  it('treats a terminal quote-blocked response as definitive instead of unknown', async () => {
+    await loadedStore();
+    submitCommandMock.mockRejectedValueOnce(new ImageWorkspaceApiError(
+      422,
+      'design_quote_blocked',
+      'The frozen compiler needs more information.',
+    ));
+
+    await expect(useImageWorkspaceStore.getState().requestQuote()).rejects.toMatchObject({
+      status: 422,
+      code: 'design_quote_blocked',
+    });
+
+    expect(useImageWorkspaceStore.getState().pendingOperations).toEqual({});
+    expect(useImageWorkspaceStore.getState().error).toBeNull();
+  });
+
+  it('settles an unknown quote from its blocked event, then allows a revised Quote', async () => {
+    const source = await loadedStore();
+    submitCommandMock.mockRejectedValueOnce(new Error('network disconnected'));
+    await expect(useImageWorkspaceStore.getState().requestQuote()).rejects.toThrow(
+      'network disconnected',
+    );
+    expect(useImageWorkspaceStore.getState().pendingOperations['operation-1']?.status).toBe('unknown');
+
+    const blocker = {
+      code: 'aspect_ratio_required',
+      message: 'Choose an aspect ratio supported by the frozen route.',
+      severity: 'blocker' as const,
+      path: 'output.aspect_ratio',
+    };
+    source.emit('design.quote.blocked', {
+      id: 'session-1:quote-blocked',
+      type: 'design.quote.blocked',
+      clientOperationId: 'operation-1',
+      blockers: [blocker],
+      warnings: [],
+      form: designFormFixture(),
+    });
+
+    expect(useImageWorkspaceStore.getState()).toMatchObject({
+      pendingOperations: {},
+      quoteBlockers: [blocker],
+      error: null,
+    });
+
+    const revisedWorkspace = designWorkspaceFixture({
+      form: designFormFixture({
+        directionRevision: 5,
+        specificationRevision: 4,
+        specificationRevisionId: 'specification-revision-4',
+      }),
+    });
+    submitCommandMock.mockResolvedValueOnce({
+      clientOperationId: 'operation-1',
+      runId: 'run-edit',
+      workspace: revisedWorkspace,
+    });
+    await useImageWorkspaceStore.getState().applyFieldOperations([
+      { kind: 'set', path: 'output.aspect_ratio', value: '16:9' },
+    ]);
+    expect(useImageWorkspaceStore.getState().quoteBlockers).toEqual([]);
+
+    submitCommandMock.mockResolvedValueOnce({
+      clientOperationId: 'operation-1',
+      runId: 'run-quote-revised',
+      workspace: revisedWorkspace,
+    });
+    await useImageWorkspaceStore.getState().requestQuote();
+
+    expect(submitCommandMock).toHaveBeenLastCalledWith(expect.objectContaining({
+      kind: 'request_quote',
+      expectedDirectionRevision: 5,
+      specificationRevision: 4,
+    }));
+    expect(useImageWorkspaceStore.getState().pendingOperations).toEqual({});
+  });
+
   it('refreshes on a definitive revision conflict and preserves the unsent draft', async () => {
     await loadedStore();
     useImageWorkspaceStore.getState().setFieldDraft('intent.purpose', '新的用途');
@@ -187,6 +298,14 @@ describe('V2 Living Form store', () => {
   it('reconciles assistant deltas and canonical Form events without mutating drafts', async () => {
     const source = await loadedStore();
     useImageWorkspaceStore.getState().setFieldDraft('intent.purpose', '本地草稿');
+    useImageWorkspaceStore.setState({
+      quoteBlockers: [{
+        code: 'missing_choice',
+        message: '还需要选择作品形状',
+        severity: 'blocker',
+        path: 'output.aspect_ratio',
+      }],
+    });
     source.emit('design.assistant.delta', {
       id: 'session-1:7',
       type: 'design.assistant.delta',
@@ -234,6 +353,7 @@ describe('V2 Living Form store', () => {
       lastEventId: 'session-1:8',
       assistantStreams: { 'operation-chat-1': '正在整理' },
       fieldDrafts: { 'intent.purpose': '本地草稿' },
+      quoteBlockers: [],
       workspace: { form: { directionRevision: 5, specificationRevision: 4 } },
     });
   });
diff --git a/tests/unit/youth-creation-card.test.tsx b/tests/unit/youth-creation-card.test.tsx
new file mode 100644
index 00000000..07296019
--- /dev/null
+++ b/tests/unit/youth-creation-card.test.tsx
@@ -0,0 +1,343 @@
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { YouthCreationCard } from '@/pages/ImageCanvas/YouthCreationCard';
+import { DesignTaskPanel } from '@/pages/ImageCanvas/DesignProductionPanel';
+import { useImageWorkspaceStore } from '@/stores/image-workspace';
+import type {
+  DesignCompilationIssue,
+  DesignGenerationTask,
+} from '../../shared/image-workspace';
+import {
+  designQuoteFixture,
+  designValuesFixture,
+  designFormFixture,
+  designWorkspaceFixture,
+} from '../fixtures/design-workspace-v2';
+
+function renderCard(
+  workspace = designWorkspaceFixture({ form: designFormFixture() }),
+  options: {
+    generationAvailable?: boolean;
+    quoteBlockers?: DesignCompilationIssue[];
+    onOpenFineTune?: () => void;
+    onFocusComposer?: () => void;
+  } = {},
+) {
+  const requestQuote = vi.fn().mockResolvedValue(workspace);
+  const resolveDecisionPrompt = vi.fn().mockResolvedValue(workspace);
+  const onOpenFineTune = options.onOpenFineTune ?? vi.fn();
+  const onFocusComposer = options.onFocusComposer ?? vi.fn();
+  useImageWorkspaceStore.setState({
+    workspace,
+    quoteBlockers: [],
+    pendingOperations: {},
+    requestQuote,
+    resolveDecisionPrompt,
+  });
+  render(
+    <YouthCreationCard
+      workspace={workspace}
+      quoteBlockers={options.quoteBlockers ?? []}
+      generationAvailable={options.generationAvailable ?? true}
+      onOpenFineTune={onOpenFineTune}
+      onFocusComposer={onFocusComposer}
+    />,
+  );
+  return {
+    workspace,
+    requestQuote,
+    resolveDecisionPrompt,
+    onOpenFineTune,
+    onFocusComposer,
+  };
+}
+
+function taskFixture(
+  overrides: Partial<DesignGenerationTask> = {},
+): DesignGenerationTask {
+  const quote = designQuoteFixture();
+  return {
+    taskId: 'task-1',
+    quoteId: quote.quoteId,
+    status: 'running',
+    taskRevision: 1,
+    specificationRevision: quote.specificationRevision,
+    specificationRevisionId: quote.specificationRevisionId,
+    specificationDigest: quote.specificationDigest,
+    medium: quote.medium,
+    compilerVersion: quote.compilerVersion,
+    outputSummary: quote.outputSummary,
+    maximumCustomerChargeAtoms: quote.maximumCustomerChargeAtoms,
+    customerBilling: {
+      quotedAtoms: 1200,
+      heldAtoms: 1200,
+      chargedAtoms: 0,
+      refundedAtoms: 0,
+      pendingResolutionAtoms: 0,
+    },
+    customerHoldExpiresAt: quote.expiresAt,
+    resolutionDeadlineAt: null,
+    progress: {
+      stage: 'generating',
+      completedRequiredSteps: 0,
+      totalRequiredSteps: 1,
+    },
+    executionHealth: 'normal',
+    cancellation: { state: 'available', outcome: null },
+    issues: [],
+    resultAssetIds: [],
+    nextActions: ['cancel'],
+    createdAt: '2026-09-02T09:00:00.000Z',
+    ...overrides,
+  };
+}
+
+describe('YouthCreationCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('shows a plain creation summary and offers a youth-facing ready action', () => {
+    const { requestQuote } = renderCard();
+
+    expect(screen.getByRole('heading', { name: '我的创作' })).toBeInTheDocument();
+    expect(screen.getByText('把便携咖啡机呈现为城市通勤中的精密工具')).toBeInTheDocument();
+    expect(screen.getByText('图片')).toBeInTheDocument();
+    expect(screen.getByText('竖版海报')).toBeInTheDocument();
+    expect(screen.getByText('3:4')).toBeInTheDocument();
+    expect(within(screen.getByTestId('youth-creation-readiness')).getByText('想法已经清楚，可以检查制作方案')).toBeInTheDocument();
+    expect(screen.queryByText(/Specification|revision|compiler|provider|immutable/i)).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: '看看制作方案' }));
+
+    expect(requestQuote).toHaveBeenCalledOnce();
+  });
+
+  it('shows only the first choice, keeps the server label, and resolves it through the store', () => {
+    const workspace = designWorkspaceFixture({
+      form: designFormFixture({
+        decisionPrompts: [{
+          id: 'choice-1',
+          kind: 'question',
+          basedOnSpecificationRevisionId: 'specification-revision-3',
+          targetPaths: ['visual.art_direction'],
+          title: '画面想要什么感觉？',
+          body: '选一个你喜欢的方向。',
+          options: [
+            { id: 'cartoon', label: '有趣的卡通', description: '颜色明快，轻松有趣' },
+            { id: 'cinema', label: '像电影一样', description: null },
+            { id: 'delegate', label: '你帮我选', description: null },
+          ],
+        }, {
+          id: 'choice-2',
+          kind: 'question',
+          basedOnSpecificationRevisionId: 'specification-revision-3',
+          targetPaths: ['visual.palette'],
+          title: '这个问题不该显示',
+          body: '只显示一个选择就好。',
+          options: [{ id: 'blue', label: '蓝色', description: null }],
+        }],
+      }),
+    });
+    const { resolveDecisionPrompt } = renderCard(workspace);
+
+    expect(screen.getByTestId('youth-creation-choice')).toBeInTheDocument();
+    expect(screen.getByText('画面想要什么感觉？')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /有趣的卡通/ })).toHaveClass('min-h-11');
+    expect(screen.getByText('推荐')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /你帮我选/ })).toBeInTheDocument();
+    expect(screen.queryByText('这个问题不该显示')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: /你帮我选/ }));
+    expect(resolveDecisionPrompt).toHaveBeenCalledWith('choice-1', 'select', 'delegate');
+
+    fireEvent.click(screen.getByRole('button', { name: '先跳过这题' }));
+    expect(resolveDecisionPrompt).toHaveBeenCalledWith('choice-1', 'reject');
+  });
+
+  it('shows known must-have, must-avoid, reference, video, and plain blocker details only', () => {
+    const values = structuredClone(designValuesFixture);
+    values.intent.media = 'video';
+    values.video.total_duration_seconds = 10;
+    values.video.pacing = '很有活力';
+    values.video.end_state = '机器人端出一盘星星饼干';
+    values.video.shots = [{
+      id: 'shot-1',
+      start_milliseconds: 0,
+      end_milliseconds: 10_000,
+      story_beat: '机器人在厨房里做饭',
+      framing: 'close-up',
+      camera: 'dolly-in',
+      subject_motion: '快速搅拌',
+      environment_motion: null,
+      focus_behavior: null,
+      transition: null,
+    }];
+    values.constraints.must_include = ['远处的地球'];
+    values.constraints.must_preserve = ['红围巾'];
+    values.constraints.must_avoid = ['真实人物'];
+    values.references = [{
+      id: 'reference-1',
+      asset_id: 'asset-reference',
+      asset_revision: null,
+      role: 'subject_identity',
+      preserve: ['圆脸'],
+      adapt: ['背景颜色'],
+      do_not_copy: ['原图文字'],
+      reviewed_observations: ['白色背景'],
+    }];
+    const workspace = designWorkspaceFixture({
+      form: designFormFixture({
+        specification: { schema_version: 1, values, field_decisions: {} },
+      }),
+      assets: [{
+        assetId: 'asset-reference',
+        workspaceId: 'workspace-1',
+        role: 'uploaded',
+        mediaType: 'image',
+        mimeType: 'image/png',
+        width: 600,
+        height: 600,
+        durationMilliseconds: null,
+        generationTaskId: null,
+        createdAt: '2026-09-02T09:00:00.000Z',
+        contentPath: '/api/design/assets/asset-reference/content',
+      }],
+    });
+    const blocker: DesignCompilationIssue = {
+      code: 'aspect_ratio_required',
+      message: 'Choose an aspect ratio supported by the frozen route.',
+      severity: 'blocker',
+      path: 'output.aspect_ratio',
+    };
+
+    renderCard(workspace, { quoteBlockers: [blocker] });
+
+    expect(screen.getByText('一定要有')).toBeInTheDocument();
+    expect(screen.getByText('远处的地球')).toBeInTheDocument();
+    expect(screen.getByText('想保留')).toBeInTheDocument();
+    expect(screen.getByText('红围巾')).toBeInTheDocument();
+    expect(screen.getByText('不要出现')).toBeInTheDocument();
+    expect(screen.getByText('真实人物')).toBeInTheDocument();
+    expect(screen.getByText('参考图片')).toBeInTheDocument();
+    expect(screen.getByText('600 × 600')).toBeInTheDocument();
+    expect(screen.getByText('圆脸')).toBeInTheDocument();
+    expect(screen.getByText('背景颜色')).toBeInTheDocument();
+    expect(screen.getByText('原图文字')).toBeInTheDocument();
+    expect(screen.getByText('视频安排')).toBeInTheDocument();
+    expect(screen.getByText('10 秒')).toBeInTheDocument();
+    expect(screen.getByText('很有活力')).toBeInTheDocument();
+    expect(screen.getByText('机器人端出一盘星星饼干')).toBeInTheDocument();
+    expect(screen.getByText(/机器人在厨房里做饭/)).toBeInTheDocument();
+    expect(screen.getByText('先选择作品形状。')).toBeInTheDocument();
+    expect(screen.queryByText(/frozen route/i)).not.toBeInTheDocument();
+    expect(screen.queryByText('dolly-in')).not.toBeInTheDocument();
+    expect(screen.queryByText('milliseconds')).not.toBeInTheDocument();
+    expect(screen.queryByText(/Specification|revision|compiler|provider|immutable/i)).not.toBeInTheDocument();
+  });
+
+  it('uses a gentle empty-state CTA and sends focus back to the composer', () => {
+    const values = structuredClone(designValuesFixture);
+    values.intent.media = null;
+    values.intent.creation_intent = null;
+    values.intent.purpose = null;
+    values.intent.channel = null;
+    values.intent.audience = null;
+    values.content.concept = null;
+    values.output.aspect_ratio = null;
+    values.output.orientation = null;
+    const onFocusComposer = vi.fn();
+    const { onOpenFineTune } = renderCard(
+      designWorkspaceFixture({
+        form: designFormFixture({
+          specification: { schema_version: 1, values, field_decisions: {} },
+        }),
+        turns: [],
+      }),
+      { onFocusComposer },
+    );
+
+    expect(within(screen.getByTestId('youth-creation-readiness')).getByText('等你的第一个想法')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: '先说一个想法' }));
+    expect(onFocusComposer).toHaveBeenCalledOnce();
+
+    fireEvent.click(screen.getByRole('button', { name: '精细调整' }));
+    expect(onOpenFineTune).toHaveBeenCalledOnce();
+  });
+
+  it('does not request a plan when generation is unavailable', () => {
+    const { requestQuote, onFocusComposer } = renderCard(undefined, {
+      generationAvailable: false,
+    });
+
+    expect(screen.getByRole('button', { name: '继续完善想法' })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: '继续完善想法' }));
+    expect(requestQuote).not.toHaveBeenCalled();
+    expect(onFocusComposer).toHaveBeenCalledOnce();
+  });
+
+  it('keeps confirming and generating states clear, then offers another version after a result', () => {
+    const confirming = designWorkspaceFixture({
+      form: designFormFixture({ activeQuotes: [designQuoteFixture()] }),
+    });
+    const { onOpenFineTune: onConfirmingFineTune } = renderCard(confirming);
+    expect(screen.getByText('方案准备好了，确认后就开始制作。')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: '继续调整' }));
+    expect(onConfirmingFineTune).toHaveBeenCalledOnce();
+
+    const resultAsset = {
+      assetId: 'asset-result',
+      workspaceId: 'workspace-1',
+      role: 'generated' as const,
+      mediaType: 'image' as const,
+      mimeType: 'image/png',
+      width: 1024,
+      height: 1365,
+      durationMilliseconds: null,
+      generationTaskId: 'task-1',
+      createdAt: '2026-09-02T09:05:00.000Z',
+      contentPath: '/api/design/assets/asset-result/content',
+    };
+    const generating = designWorkspaceFixture({ tasks: [taskFixture()] });
+    const result = designWorkspaceFixture({
+      tasks: [taskFixture({
+        status: 'succeeded',
+        progress: { stage: 'completed', completedRequiredSteps: 1, totalRequiredSteps: 1 },
+        resultAssetIds: ['asset-result'],
+        nextActions: ['view_result', 'revise_design', 'generate_again'],
+      })],
+      assets: [resultAsset],
+    });
+
+    // A card is intentionally remounted between resource states so each assertion
+    // observes the state a user sees at that moment.
+    cleanup();
+    renderCard(generating);
+    expect(within(screen.getByTestId('youth-creation-readiness')).getByText('正在制作，请稍等一下')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '正在制作' })).toBeDisabled();
+
+    cleanup();
+    const { requestQuote, onOpenFineTune } = renderCard(result);
+    expect(within(screen.getByTestId('youth-creation-readiness')).getByText('完成了，看看你的作品吧')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: '继续调整' }));
+    expect(onOpenFineTune).toHaveBeenCalledOnce();
+    fireEvent.click(screen.getByRole('button', { name: '做一个新版本' }));
+    expect(requestQuote).toHaveBeenCalledOnce();
+  });
+
+  it('shows safe Chinese task guidance instead of provider messages', () => {
+    render(<DesignTaskPanel tasks={[taskFixture({
+      status: 'failed',
+      progress: { stage: 'failed', completedRequiredSteps: 0, totalRequiredSteps: 1 },
+      issues: [{
+        code: 'asset_rejected',
+        message: 'Provider policy rejected the generated asset.',
+        recoveryOwner: 'platform',
+      }],
+      nextActions: ['revise_design'],
+    })]} />);
+
+    expect(screen.getByText('作品没有通过内容检查，可以换一种安全的说法再试。')).toBeInTheDocument();
+    expect(screen.queryByText(/Provider policy/i)).not.toBeInTheDocument();
+  });
+});
diff --git a/tests/unit/youth-form-projection.test.ts b/tests/unit/youth-form-projection.test.ts
new file mode 100644
index 00000000..1b3d6338
--- /dev/null
+++ b/tests/unit/youth-form-projection.test.ts
@@ -0,0 +1,290 @@
+import { describe, expect, it } from 'vitest';
+import type {
+  DesignAsset,
+  DesignCompilationIssue,
+  DesignGenerationTask,
+  DesignSpecificationValues,
+} from '../../shared/image-workspace';
+import {
+  DESIGN_SPECIFICATION_PATHS,
+  YOUTH_FIELD_TIERS,
+  projectYouthCreationCard,
+} from '@/pages/ImageCanvas/youth-form-projection';
+import {
+  designFormFixture,
+  designQuoteFixture,
+  designValuesFixture,
+  designWorkspaceFixture,
+} from '../fixtures/design-workspace-v2';
+
+function workspaceWithValues(values: DesignSpecificationValues) {
+  return designWorkspaceFixture({
+    form: designFormFixture({
+      specification: {
+        schema_version: 1,
+        values,
+        field_decisions: {},
+      },
+    }),
+    turns: [],
+  });
+}
+
+function emptyValues(): DesignSpecificationValues {
+  const values = structuredClone(designValuesFixture);
+  values.intent.media = null;
+  values.intent.creation_intent = null;
+  values.intent.purpose = null;
+  values.intent.channel = null;
+  values.intent.audience = null;
+  values.content.concept = null;
+  values.output.aspect_ratio = null;
+  values.output.orientation = null;
+  return values;
+}
+
+function taskFixture(
+  overrides: Partial<DesignGenerationTask> = {},
+): DesignGenerationTask {
+  const quote = designQuoteFixture();
+  return {
+    taskId: 'task-1',
+    quoteId: quote.quoteId,
+    status: 'running',
+    taskRevision: 1,
+    specificationRevision: quote.specificationRevision,
+    specificationRevisionId: quote.specificationRevisionId,
+    specificationDigest: quote.specificationDigest,
+    medium: quote.medium,
+    compilerVersion: quote.compilerVersion,
+    outputSummary: quote.outputSummary,
+    maximumCustomerChargeAtoms: quote.maximumCustomerChargeAtoms,
+    customerBilling: {
+      quotedAtoms: 1200,
+      heldAtoms: 1200,
+      chargedAtoms: 0,
+      refundedAtoms: 0,
+      pendingResolutionAtoms: 0,
+    },
+    customerHoldExpiresAt: '2030-01-02T03:04:05.000Z',
+    resolutionDeadlineAt: null,
+    progress: {
+      stage: 'generating',
+      completedRequiredSteps: 0,
+      totalRequiredSteps: 1,
+    },
+    executionHealth: 'normal',
+    cancellation: { state: 'available', outcome: null },
+    issues: [],
+    resultAssetIds: [],
+    nextActions: ['cancel'],
+    createdAt: '2026-09-02T09:00:00.000Z',
+    ...overrides,
+  };
+}
+
+describe('youth Design projection', () => {
+  it('classifies every current Specification field into exactly one presentation tier', () => {
+    expect(Object.keys(YOUTH_FIELD_TIERS).sort()).toEqual(
+      [...DESIGN_SPECIFICATION_PATHS].sort(),
+    );
+    expect(new Set(Object.values(YOUTH_FIELD_TIERS))).toEqual(new Set(['A', 'B', 'C']));
+  });
+
+  it('keeps a fresh Workspace simple instead of projecting professional defaults', () => {
+    const model = projectYouthCreationCard(workspaceWithValues(emptyValues()));
+
+    expect(model.phase).toBe('empty');
+    expect(model.summary).toBeNull();
+    expect(model.medium).toBeNull();
+    expect(model.destination).toBeNull();
+    expect(model.style).toBeNull();
+    expect(model.references).toEqual([]);
+    expect(model.readinessMessage).toBe('等你的第一个想法');
+  });
+
+  it('projects a concise card from canonical creator meaning', () => {
+    const values = structuredClone(designValuesFixture);
+    values.content.concept = '一只熊猫宇航员在月球上踢球';
+    values.content.emotional_tone = '有趣、梦幻、颜色明亮';
+    values.visual.art_direction = '手绘故事书';
+    values.constraints.must_include = ['远处的地球'];
+    values.constraints.must_avoid = ['真实人物'];
+    values.output.aspect_ratio = '9:16';
+    values.output.orientation = 'portrait';
+    const model = projectYouthCreationCard(workspaceWithValues(values));
+
+    expect(model.phase).toBe('ready');
+    expect(model.summary).toBe('一只熊猫宇航员在月球上踢球');
+    expect(model.medium).toBe('image');
+    expect(model.destination?.label).toBe('手机竖屏');
+    expect(model.style?.label).toBe('手绘故事书');
+    expect(model.mustInclude).toEqual(['远处的地球']);
+    expect(model.mustAvoid).toEqual(['真实人物']);
+    expect(model.readinessMessage).toBe('想法已经清楚，可以检查制作方案');
+    expect(model.canRequestQuote).toBe(true);
+  });
+
+  it('invites a server check without claiming an incomplete idea can already be made', () => {
+    const values = structuredClone(designValuesFixture);
+    values.content.concept = '一只会修理月亮的小狐狸';
+    values.output.aspect_ratio = null;
+    values.output.orientation = null;
+
+    const model = projectYouthCreationCard(workspaceWithValues(values));
+
+    expect(model.phase).toBe('ready');
+    expect(model.canRequestQuote).toBe(true);
+    expect(model.readinessMessage).toBe('想法已经清楚，可以检查制作方案');
+    expect(model.readinessMessage).not.toContain('可以开始制作');
+  });
+
+  it('shows only the first consequential choice and concrete quote blockers', () => {
+    const workspace = designWorkspaceFixture({
+      form: designFormFixture({
+        decisionPrompts: [{
+          id: 'question-1',
+          kind: 'question',
+          basedOnSpecificationRevisionId: 'specification-revision-3',
+          targetPaths: ['content.emotional_tone'],
+          title: '你想让画面更像哪一种？',
+          body: '选一个最接近的感觉，也可以交给我。',
+          options: [
+            { id: 'cartoon', label: '有趣的卡通', description: null },
+            { id: 'cinema', label: '像电影一样', description: null },
+            { id: 'delegate', label: '你帮我选', description: null },
+          ],
+        }, {
+          id: 'question-2',
+          kind: 'question',
+          basedOnSpecificationRevisionId: 'specification-revision-3',
+          targetPaths: ['visual.palette'],
+          title: '第二个问题',
+          body: '现在不该显示',
+          options: [],
+        }],
+      }),
+    });
+    const blockers: DesignCompilationIssue[] = [{
+      code: 'aspect_ratio_required',
+      message: 'Choose an aspect ratio supported by the frozen route.',
+      severity: 'blocker',
+      path: 'output.aspect_ratio',
+    }];
+    const model = projectYouthCreationCard(workspace, { quoteBlockers: blockers });
+
+    expect(model.phase).toBe('exploring');
+    expect(model.activeChoice?.id).toBe('question-1');
+    expect(model.activeChoice?.options).toHaveLength(3);
+    expect(model.blockers).toEqual([{
+      ...blockers[0],
+      message: '先选择作品形状。',
+    }]);
+    expect(JSON.stringify(model.blockers)).not.toContain('frozen route');
+    expect(model.blockerCount).toBe(1);
+    expect(model.readinessMessage).toBe('还差 1 个关键选择');
+    expect(model.canRequestQuote).toBe(false);
+  });
+
+  it('uses Quote and Task resource state without overwriting the creative summary', () => {
+    const workspace = designWorkspaceFixture({
+      form: designFormFixture({ activeQuotes: [designQuoteFixture()] }),
+    });
+    const confirmingModel = projectYouthCreationCard(workspace);
+    expect(confirmingModel.phase).toBe('confirming');
+    expect(confirmingModel.canRequestQuote).toBe(false);
+
+    const generating = designWorkspaceFixture({ tasks: [taskFixture()] });
+    const generatingModel = projectYouthCreationCard(generating);
+    expect(generatingModel.phase).toBe('generating');
+    expect(generatingModel.summary).toBe(designValuesFixture.content.concept);
+    expect(generatingModel.readinessMessage).toBe('正在制作，请稍等一下');
+
+    const resultAsset: DesignAsset = {
+      assetId: 'asset-result',
+      workspaceId: 'workspace-1',
+      role: 'generated',
+      mediaType: 'image',
+      mimeType: 'image/png',
+      width: 1024,
+      height: 1365,
+      durationMilliseconds: null,
+      generationTaskId: 'task-1',
+      createdAt: '2026-09-02T09:05:00.000Z',
+      contentPath: '/api/design/assets/asset-result/content',
+    };
+    const completed = designWorkspaceFixture({
+      tasks: [taskFixture({
+        status: 'succeeded',
+        progress: {
+          stage: 'completed',
+          completedRequiredSteps: 1,
+          totalRequiredSteps: 1,
+        },
+        resultAssetIds: ['asset-result'],
+        nextActions: ['view_result', 'revise_design', 'generate_again'],
+      })],
+      assets: [resultAsset],
+    });
+    expect(projectYouthCreationCard(completed).phase).toBe('result');
+    expect(projectYouthCreationCard(completed).readinessMessage).toBe('完成了，看看你的作品吧');
+  });
+
+  it('summarizes bound references and video choices without exposing technical timing', () => {
+    const values = structuredClone(designValuesFixture);
+    values.intent.media = 'video';
+    values.video.total_duration_seconds = 10;
+    values.video.pacing = '很有活力';
+    values.video.end_state = '机器人端出一盘星星饼干';
+    values.video.shots = [{
+      id: 'shot-1',
+      start_milliseconds: 0,
+      end_milliseconds: 10_000,
+      story_beat: '机器人在厨房里做饭',
+      framing: 'close-up',
+      camera: 'dolly-in',
+      subject_motion: '快速搅拌',
+      environment_motion: null,
+      focus_behavior: null,
+      transition: null,
+    }];
+    values.references = [{
+      id: 'reference-1',
+      asset_id: 'asset-reference',
+      asset_revision: null,
+      role: 'subject_identity',
+      preserve: ['圆脸', '红围巾'],
+      adapt: [],
+      do_not_copy: [],
+      reviewed_observations: ['白色背景'],
+    }];
+    const workspace = workspaceWithValues(values);
+    workspace.assets = [{
+      assetId: 'asset-reference',
+      workspaceId: 'workspace-1',
+      role: 'uploaded',
+      mediaType: 'image',
+      mimeType: 'image/png',
+      width: 600,
+      height: 600,
+      durationMilliseconds: null,
+      generationTaskId: null,
+      createdAt: '2026-09-02T09:00:00.000Z',
+      contentPath: '/api/design/assets/asset-reference/content',
+    }];
+
+    const model = projectYouthCreationCard(workspace);
+    expect(model.video).toEqual({
+      durationSeconds: 10,
+      pacing: '很有活力',
+      endState: '机器人端出一盘星星饼干',
+      storyBeats: ['机器人在厨房里做饭'],
+    });
+    expect(model.references[0]).toMatchObject({
+      assetId: 'asset-reference',
+      preserve: ['圆脸', '红围巾'],
+    });
+    expect(JSON.stringify(model)).not.toContain('milliseconds');
+    expect(JSON.stringify(model)).not.toContain('dolly-in');
+  });
+});
diff --git a/tests/unit/youth-issue-copy.test.ts b/tests/unit/youth-issue-copy.test.ts
new file mode 100644
index 00000000..a271b6ae
--- /dev/null
+++ b/tests/unit/youth-issue-copy.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import {
+  youthCompilationIssueMessage,
+  youthTaskIssueMessage,
+} from '@/pages/ImageCanvas/youth-issue-copy';
+
+describe('youth AI Design issue copy', () => {
+  it('uses code and path instead of exposing a compiler message', () => {
+    const message = youthCompilationIssueMessage({
+      code: 'aspect_ratio_required',
+      message: 'Choose an aspect ratio supported by the frozen route.',
+      severity: 'blocker',
+      path: 'output.aspect_ratio',
+    });
+
+    expect(message).toBe('先选择作品形状。');
+    expect(message).not.toContain('frozen route');
+  });
+
+  it('keeps unknown compiler codes safe and actionable', () => {
+    const message = youthCompilationIssueMessage({
+      code: 'future_compiler_rule',
+      message: 'Internal compiler graph node 17 is invalid.',
+      severity: 'blocker',
+    });
+
+    expect(message).toBe('还需要调整一个关键设置，请打开“精细调整”看看。');
+    expect(message).not.toContain('compiler');
+  });
+
+  it('uses a calm fallback for unknown platform task failures', () => {
+    const message = youthTaskIssueMessage({
+      code: 'future_provider_error',
+      message: 'HTTP 422 from provider operation abc.',
+      recoveryOwner: 'platform',
+    });
+
+    expect(message).toBe('这次制作没有完成，请调整后再试。');
+    expect(message).not.toContain('HTTP');
+  });
+
+  it('explains unknown operator recovery without suggesting a duplicate run', () => {
+    expect(youthTaskIssueMessage({
+      code: 'future_resolution_case',
+      message: 'Manual reconciliation required.',
+      recoveryOwner: 'operator',
+    })).toBe('平台正在确认这次制作，不会重复制作或重复扣费。');
+  });
+});