diff --git a/core/frontend/src/pipeline-page.css b/core/frontend/src/pipeline-page.css
index 476ca60..1817ff4 100644
--- a/core/frontend/src/pipeline-page.css
+++ b/core/frontend/src/pipeline-page.css
@@ -395,11 +395,12 @@
   .sb-scene-thumb:hover { background: var(--background-lighter); }
   .sb-scene-thumb.selected { border-color: var(--heat); background: var(--heat-12); }
   .sb-scene-thumb .placeholder { aspect-ratio: 1; }
-  .sb-scene-thumb .nm { font-size: 12px; font-weight: 500; color: var(--accent-black); }
-  .sb-scene-thumb .sub { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); }
+  .sb-scene-thumb .nm { font-size: 11.5px; font-weight: 500; color: var(--accent-black); }
+  .sb-scene-thumb .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); }
   .sb-main-img { aspect-ratio: 16/9; min-height: 0; }
-  /* 整张故事板是竖长拼图,cover 会裁掉上下 —— 用 contain 完整显示 */
-  .sb-main-img.has-mock-media { background-size: contain; }
+  /* 整张故事板是竖长拼图,cover 会裁掉上下 —— 用 contain 完整显示;
+     留白底色用白(--surface)而非占位浅灰,避免「灰底大框」(对齐 HTML 干净白底) */
+  .sb-main-img.has-mock-media { background-size: contain; background-color: var(--surface); }
 
   .sb-rerun-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 14px; background: rgba(180,83,9,.08); border: 1px solid rgba(180,83,9,.20); border-radius: var(--r-md); color: #7C3A05; line-height: 1.55; }
   .sb-rerun-note .warn-ic { width: 22px; height: 22px; border-radius: var(--r-sm); background: rgba(180,83,9,.12); color: #B45309; display: grid; place-items: center; flex: 0 0 22px; }
@@ -430,8 +431,10 @@
   .prompt-edit { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--accent-black); white-space: pre-wrap; min-height: 200px; outline: none; letter-spacing: .01em; cursor: text; transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); }
   .prompt-edit:hover { border-color: var(--heat-20); }
   .prompt-edit:focus { border-color: var(--heat); background: var(--surface); box-shadow: 0 0 0 3px var(--heat-12); }
-  .asset-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-pill); font-size: 12px; }
+  .asset-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-pill); font-size: 11.5px; }
   .asset-tag .dotc { width: 14px; height: 14px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: 50%; }
+  /* 绑定资产缩略图(替代占位圆点 · 一眼看出引用了哪张资产) */
+  .asset-tag .asset-thumb { width: 22px; height: 22px; flex: 0 0 22px; border-radius: var(--r-pill); background-size: cover; background-position: center; border: 1px solid var(--border-faint); }
 
   /* ============= STAGE 4 · 视频 ============= */
   .content--fh .stage[data-stage-pane="4"].active > .video-grid { flex: 1 1 0; min-height: 0; overflow-y: auto; }
diff --git a/core/frontend/src/routes/pipeline.tsx b/core/frontend/src/routes/pipeline.tsx
index edb3cb6..ed5e25a 100644
--- a/core/frontend/src/routes/pipeline.tsx
+++ b/core/frontend/src/routes/pipeline.tsx
@@ -2825,16 +2825,21 @@ export function PipelinePage(props: {
               <div className="stage-storyboard">
                 <div className="sb-canvas">
                   <div className="sb-scenes-col" id="sb-scenes-row">
-                    {sbFrames.length ? sbFrames.map((frame, idx) => {
-                      const url = frameUrl(frame);
-                      return (
-                        <div className={`sb-scene-thumb${idx === sbSelected ? " selected" : ""}`} key={frame.id} data-sid={frame.id} onClick={() => setSbSelected(idx)}>
-                          <div className={`placeholder${url ? " has-mock-media" : ""}`} style={url ? mediaStyle(url) : undefined}><span className="ph-frame">场 {idx + 1}</span></div>
-                          <div className="nm">场 {idx + 1}</div>
-                          <div className="sub">#{frame.sort_order + 1}</div>
-                        </div>
-                      );
-                    }) : sbExpectedShots ? (
+                    {sbFrames.length ? (() => {
+                      // 每场显示时间区间(累加脚本镜时长 → 「0~5s」),对齐 HTML;无脚本时回退序号
+                      let cum = 0;
+                      const times = shots.map((s) => { const st = cum; cum += s.duration_seconds || 15; return `${st}~${cum}s`; });
+                      return sbFrames.map((frame, idx) => {
+                        const url = frameUrl(frame);
+                        return (
+                          <div className={`sb-scene-thumb${idx === sbSelected ? " selected" : ""}`} key={frame.id} data-sid={frame.id} onClick={() => setSbSelected(idx)}>
+                            <div className={`placeholder${url ? " has-mock-media" : ""}`} style={url ? mediaStyle(url) : undefined}><span className="ph-frame">场 {idx + 1}</span></div>
+                            <div className="nm">场 {idx + 1}</div>
+                            <div className="sub">{times[idx] || `#${frame.sort_order + 1}`}</div>
+                          </div>
+                        );
+                      });
+                    })() : sbExpectedShots ? (
                       /* 还没出图:按采用版脚本镜头数铺等量空占位,标「待生成」,让用户看出本该有几张 */
                       Array.from({ length: sbExpectedShots }, (_, idx) => (
                         <div className={`sb-scene-thumb${idx === sbSelected ? " selected" : ""}`} key={`ph-${idx}`} onClick={() => setSbSelected(idx)}>
@@ -2912,12 +2917,13 @@ export function PipelinePage(props: {
                         // 与 Stage 2 同源:用 metadata.label 取名(不依赖全局 assets 列表),排除三视图组并按名字去重,
                         // 否则同一角色的立绘组+三视图组+多版本会各算一个,且名字会退化成「人物(人物)」。
                         const bound = [
-                          ...groupsByKind("product").filter((g) => g.adopted_asset).map((g) => ({ id: g.id, name: (g.metadata?.label || "").trim() || KIND_LABEL.product, kind: "product" as const })),
-                          ...buildEntities("person").filter((e) => e.group.adopted_asset).map((e) => ({ id: e.key, name: e.name, kind: "person" as const })),
-                          ...buildEntities("scene").filter((e) => e.group.adopted_asset).map((e) => ({ id: e.key, name: e.name, kind: "scene" as const })),
+                          ...groupsByKind("product").filter((g) => g.adopted_asset).map((g) => ({ id: g.id, name: (g.metadata?.label || "").trim() || KIND_LABEL.product, kind: "product" as const, url: groupMainUrl(g) })),
+                          ...buildEntities("person").filter((e) => e.group.adopted_asset).map((e) => ({ id: e.key, name: e.name, kind: "person" as const, url: groupMainUrl(e.group) })),
+                          ...buildEntities("scene").filter((e) => e.group.adopted_asset).map((e) => ({ id: e.key, name: e.name, kind: "scene" as const, url: groupMainUrl(e.group) })),
                         ];
+                        // 圆点占位 → 已引用资产缩略图(一眼看出绑了哪张),无图时回退圆点
                         return bound.length ? bound.map((b) => (
-                          <span className="asset-tag" key={b.id}><span className="dotc"></span>{b.name}({KIND_LABEL[b.kind]})</span>
+                          <span className="asset-tag" key={b.id}>{b.url ? <span className="asset-thumb" style={{ backgroundImage: `url(${b.url})` }} /> : <span className="dotc"></span>}{b.name}({KIND_LABEL[b.kind]})</span>
                         )) : <span className="muted-2 mono" style={{ fontSize: "12px" }}>// 暂无绑定资产</span>;
                       })()}
                     </div>