feat: enhance website flow and user workbench

website/app/page.tsx

@@ -88,6 +88,39 @@ const studioFlow = [
   },
 ];
 
+const creationPipeline = [
+  {
+    stage: "01",
+    title: "输入创作目标",
+    body: "商品文案、角色图片、参考音频、附件脚本或 API 请求进入统一入口。",
+    signal: "Prompt / File",
+  },
+  {
+    stage: "02",
+    title: "路由合适模型",
+    body: "按对话、生图、视频、TTS、Comfy 后端和站点健康自动选择能力。",
+    signal: "Router",
+  },
+  {
+    stage: "03",
+    title: "执行工作流",
+    body: "生图助手、视频助手、数字人或 Comfy 画布提交任务并持续记录进度。",
+    signal: "Workflow",
+  },
+  {
+    stage: "04",
+    title: "归档最终产出",
+    body: "只把生成完成的图片、视频和音频写入工作空间，同时沉淀日志与成本。",
+    signal: "Workspace",
+  },
+];
+
+const creationOutputs = [
+  ["商品讲解视频", "digital-human", "完成"],
+  ["封面主视觉", "gpt-image-2", "归档"],
+  ["短视频脚本", "gpt-5.5", "可复制"],
+];
+
 const workflowModes = [
   ["cloud", "Comfy Cloud API 后端"],
   ["runninghub", "RunningHub API 后端"],
@@ -435,6 +468,48 @@ export default function Home() {
           </div>
         </section>
 
+        <section className="pipeline-section" data-motion="section">
+          <div className="pipeline-copy">
+            <span>Product Flow</span>
+            <h2>用户给出目标，BossAI 把它推进到可交付产出</h2>
+            <p>
+              官网看到的能力不是单点功能。进入后台后，用户可以把一个商品讲解、图片创意或视频脚本一路交给模型路由、工作流执行和工作空间归档。
+            </p>
+          </div>
+          <div className="pipeline-board" aria-label="BossAI 产品流转演示">
+            <div className="pipeline-request" data-motion="card">
+              <span>用户输入</span>
+              <strong>生成 30 秒新品讲解视频</strong>
+              <p>附人物图、商品卖点、参考音频</p>
+            </div>
+            <div className="pipeline-steps">
+              {creationPipeline.map((item) => (
+                <article data-motion="card" key={item.stage}>
+                  <em>{item.stage}</em>
+                  <div>
+                    <strong>{item.title}</strong>
+                    <p>{item.body}</p>
+                  </div>
+                  <span>{item.signal}</span>
+                </article>
+              ))}
+            </div>
+            <div className="pipeline-output" data-motion="card">
+              <div className="pipeline-output-head">
+                <span>产出归档</span>
+                <strong>Workspace</strong>
+              </div>
+              {creationOutputs.map(([name, model, state]) => (
+                <div className="pipeline-output-row" key={name}>
+                  <strong>{name}</strong>
+                  <span>{model}</span>
+                  <em>{state}</em>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
         <section id="api" className="api-section" data-motion="section">
           <div className="section-heading split">
             <div>