一句话：StoryLens = 文字 → 两轮专家引导提问 → 分镜生成 → 知识图谱。
主 Skill 提供横向创作框架，TT 专家 提供纵向方法论纵深，
两者在 分镜制作交集域 内协同；HCI 设计确保 Agent 对话与 HTML 应用步骤完全一致。
配套文件：storylens/skills/storyboard-production/SKILL.md ·
tech-summary.png ·
storylens/assets/storylens-generator.html
一、三层架构
flowchart TB
subgraph 用户界面
A[index.html] --> B[storylens-generator.html
三页 SPA · Brutalism] end subgraph Agent层 C[storylens/SKILL.md
★ 主 Skill 路由] D[skills/storyboard-production/
分镜交集域 · 框定 H×V] E[专家skill/ × 4
TT 专家纵深] end subgraph 代理服务 F[llm_proxy :18902] G[jimeng_proxy :18901] H[image_proxy :18900] end B --> F & G & H C --> D D -.交集内节选.-> E F -->|注入 agents/*.md| E
三页 SPA · Brutalism] end subgraph Agent层 C[storylens/SKILL.md
★ 主 Skill 路由] D[skills/storyboard-production/
分镜交集域 · 框定 H×V] E[专家skill/ × 4
TT 专家纵深] end subgraph 代理服务 F[llm_proxy :18902] G[jimeng_proxy :18901] H[image_proxy :18900] end B --> F & G & H C --> D D -.交集内节选.-> E F -->|注入 agents/*.md| E
| 层级 | 路径 | 职责 | 与 HCI 关系 |
|---|---|---|---|
| 入口 | index.html | 跳转主应用 | 零配置直达 |
| 主应用 | storylens-generator.html | 分镜 UI + 全部前端逻辑 | 三页渐进式流程 |
| 主 Skill | storylens/SKILL.md | Agent 工作流规范 | 与 HTML 步骤同步 |
| 分镜交集 Skill | skills/storyboard-production/ | H×V 框定范围 | 防止专家越界/跳步 |
| TT 专家 | 专家skill/{4位}/ | 人格 + 方法论 | 可选增强层 |
| LLM 代理 | llm_proxy_server.py | 解析 / 提问 / 生成 | 结构化 JSON 输出 |
二、横向 × 纵向 · 分镜制作交集域（大前提）
每位 TT 专家都有纵向（个人方法论纵深）和与主能力横向（4 种创作模式）的交叉。 系统只在交集内调用专家——不是把专家全库搬进来，而是按当前分镜场景截取有效切片。
纵向 V · TT 专家
横向 H · 主能力模式 →
🌻 辛向阳 · 交互/行为
👓 娄永琪 · 产品创新
🍐 李何槿 · 可持续
6 柳喆俊 · 严肃游戏
🎮 游戏设计
🎬 影视分镜
📐 产品概念
🎨 创作灵感
★ 分镜制作
交集域 H∩V ★
有效输出边界
交集域 H∩V ★
有效输出边界
交集矩阵（节选）
| 主能力 ↓ \ 专家 → | 🌻 辛向阳 | 👓 娄永琪 | 🍐 李何槿 | 6 柳喆俊 |
|---|---|---|---|---|
| 🎮 游戏设计 | 交互行为视觉节拍 | 游戏化产品 Pitch | 可持续主题关卡 | 严肃游戏教学场景 |
| 🎬 影视分镜 | 用户旅程→镜头调度 | 方案视觉叙事 | 循环经济故事板 | 教育/VR 体验分镜 |
| 📐 产品概念 | 交互逻辑可视化 | OPC/Pitch/CMF 主协同 | 可持续产品场景 | 游戏化产品演示 |
| 🎨 创作灵感 | 同人交互体验 | 社会创新视觉叙事 | 旧物改造故事 | 自媒体游戏内容 |
flowchart LR
subgraph 横向H["横向 H · 主能力（SKILL_MODES）"]
H1[🎮 游戏设计]
H2[🎬 影视分镜]
H3[📐 产品概念]
H4[🎨 创作灵感]
end
subgraph 交集["★ 分镜制作交集域"]
X[parse / refine / generate / KG / 导出]
end
subgraph 纵向V["纵向 V · TT 专家（可选）"]
V1[🌻 辛向阳]
V2[👓 娄永琪]
V3[🍐 李何槿]
V4[6 柳喆俊]
end
H1 & H2 & H3 & H4 --> X
V1 & V2 & V3 & V4 -.人格注入.-> X
style X fill:#FF4081,stroke:#000,stroke-width:3px
In：分镜流程内
Out：纯咨询/跳步/全量专家Skill
典型组合：产品概念 + 娄永琪
三、HCI 人机交互设计 ★ 核心
StoryLens 的 HCI 设计目标：让非专业用户也能在专家级引导下完成分镜，同时保留进阶用户的专家叠加能力。 Agent 对话侧与 HTML 应用侧遵循同一交互模型——这是本系统的 HCI 基石。
1. 渐进披露 Progressive Disclosure
第一轮固定三维卡片（表达/场景/人物）→ 第二轮 LLM 细化 3–5 题。不一次性抛出全部问题，符合 Miller 法则（7±2）。
2. 结构化选择 Structured Choice
A/B/C 预设 + D 自由文本。降低输入成本，同时保留表达自由度——Recognition over Recall。
3. 操作门控 Action Gating
LoRA 加载确认是生图前的硬性门控。用户必须明确风格意图后才能进入 DRAFT/RENDER，防止误触生成。
4. 可选增强 Optional Enhancement
TT 专家非强制。新手走通用流程；进阶用户手动选专家或关键词自动匹配——Scaffolding 脚手架设计。
5. 跨界面一致 Cross-Surface Parity
Cursor Agent 步骤 ≡ HTML 三页流程。用户在任何入口都获得相同心智模型——Consistency 一致性原则。
6. 即时反馈 Immediate Feedback
解析摘要、专家匹配提示、KG 三视图（SVG 环图 + D3 力导向 + 可展开树）。Visibility of System Status。
7. 错误容忍 Error Tolerance
生图四重回退：即梦 → Buddy Cloud → SD WebUI → Canvas Mock。降级而非失败——Graceful Degradation。
8. 用户控制 User Control
专家可取消、历史记录 v2（20 条）、帧数可调 1–24。Undo/Redo 语义通过版本历史实现。
HCI 交互流 · Agent ≡ HTML
sequenceDiagram
participant U as 用户
participant UI as HTML / Agent
participant P as llm_proxy
participant E as TT专家 agents/*.md
U->>UI: 输入场景文字 + Enter
UI->>UI: matchExpertFromText() 可选
UI->>P: POST /parse { expertId? }
P->>E: 读取人格节选（交集内）
P-->>UI: 解析 + 第一轮 3 题
Note over U,UI: HCI：A/B/C/D 卡片，全部必选
U->>UI: 作答 Q1-Q3
UI->>P: POST /refine-questions
P-->>UI: 第二轮 3-5 题
U->>UI: 确认帧数 + LoRA 门控
Note over U,UI: HCI：操作门控，不可跳过
UI->>P: POST /generate-storyboard
UI->>UI: DRAFT 预览 + KG 展开
UI->>UI: RENDER 导出 PNG/JSON
三页状态机（Brutalism UI）
stateDiagram-v2
[*] --> INPUT: 打开应用
INPUT --> INPUT: Enter解析 + 两轮提问 + LoRA确认
INPUT --> DRAFT: 确认帧数 & LoRA
DRAFT --> DRAFT: 预览分镜 / 切换风格 / 展开KG
DRAFT --> RENDER: 渲染完成
RENDER --> [*]: 导出 PNG/JSON/CSV/PDF
note right of INPUT: 01 INPUT · 渐进披露
note right of DRAFT: 02 DRAFT · 即时反馈KG
note right of RENDER: 03 RENDER · 交付物
主 Skill 与 TT 专家 · HCI 双层模型
flowchart TB
subgraph UI层["HTML 界面层"]
SF[#skillFloat 4按钮
横向主能力] EA[#expertAvatars 4头像
纵向TT专家] AP[AI 提问面板
chips + 对话] end subgraph 逻辑层 SM[activeSkillMode] AE[activeExpert / matchedExpert] INT[交集域校验
storyboard-production] end SF --> SM EA --> AE SM & AE --> INT INT --> AP style INT fill:#FF4081,stroke:#000,stroke-width:2px
横向主能力] EA[#expertAvatars 4头像
纵向TT专家] AP[AI 提问面板
chips + 对话] end subgraph 逻辑层 SM[activeSkillMode] AE[activeExpert / matchedExpert] INT[交集域校验
storyboard-production] end SF --> SM EA --> AE SM & AE --> INT INT --> AP style INT fill:#FF4081,stroke:#000,stroke-width:2px
四、5 阶段工作流（不可跳步）
flowchart TD
Start([用户输入场景]) --> Enter[Enter 触发解析]
Enter --> Match{TT 专家匹配}
Match -->|手动/自动/无| Parse[POST /parse]
Parse --> R1[第一轮：表达/场景/人物]
R1 --> R1A[用户 A/B/C/D]
R1A --> R2[POST /refine-questions]
R2 --> R2A[用户作答]
R2A --> Frame[确认帧数 1-24]
Frame --> LoRA{LoRA 门控}
LoRA --> Draft[02 DRAFT 生成分镜]
Draft --> Gen[四重回退生图]
Gen --> Output[03 RENDER 导出]
style LoRA fill:#FF3333,color:#fff
style Draft fill:#00C853
五、TT 专家协同
🌻 辛向阳
交互设计 · 行为逻辑 · IDR
+ 影视分镜 / 产品概念
交互设计 · 行为逻辑 · IDR
+ 影视分镜 / 产品概念
👓 娄永琪
设计驱动创新 · Pitch · CMF
+ 产品概念 ★主协同
设计驱动创新 · Pitch · CMF
+ 产品概念 ★主协同
🍐 李何槿
可持续 · 循环经济 · 品牌
+ 产品概念 / 创作灵感
可持续 · 循环经济 · 品牌
+ 产品概念 / 创作灵感
6 柳喆俊
严肃游戏 · PBL · VR 教育
+ 游戏设计 / 影视分镜
严肃游戏 · PBL · VR 教育
+ 游戏设计 / 影视分镜
三种激活路径
| 路径 | 触发 | HCI 表现 |
|---|---|---|
| 手动选择 | 点击 #expertAvatars 头像 | 标题变「StoryLens + 专家名」，chips 切换 |
| 关键词自动 | EXPERT_KEYWORD_MAP 打分 | 解析时自动选中 + UI 同步高亮 |
| Agent 侧 | 「用娄永琪的方法评审」 | 读取 专家skill/ 完整 Skill（交集外可全量） |
六、API 与代理
| 服务 | 端口 | 端点 | 说明 |
|---|---|---|---|
| LLM 代理 | 18902 | /parse, /refine-questions, /generate-storyboard | 注入专家人格 |
| 即梦生图 | 18901 | /generate, /lora/list | 默认引擎 |
| Buddy Cloud | 18900 | /generate | 备用云端 |
生图回退链：即梦 AI → Buddy Cloud → SD WebUI → Canvas Mock SVG
七、关键文件索引
| 文件 | 角色 |
|---|---|
storylens/SKILL.md | 主 Skill · Agent 路由 |
storylens/skills/storyboard-production/SKILL.md | 分镜交集域 · H×V 框定 |
storylens/skills/storyboard-production/intersection-matrix.md | 完整矩阵 + HCI 映射 |
storylens/assets/storylens-generator.html | 主应用 SPA |
专家skill/{4位}/agents/*.md | TT 专家人格（代理层注入） |
tech.html | 本技术说明页 |
tech-summary.png | 答辩用关系总览图 |