diff --git a/README.md b/README.md index 453b33d..ee161f4 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,12 @@ StoryForge 现在拆成独立项目目录，和 `AI-glasses` 分开维护。 - `data/collector/`：SQLite、任务文件、下载产物 - `docs/`：审计、实施计划、联调说明、当前 MVP 状态 +## 产品手册 + +- [新媒体运营中台产品逻辑手册](./docs/PRODUCT_LOGIC_NEW_MEDIA_OPERATING_SYSTEM_2026-03-22.md) +- [新媒体运营平台 UI 参考包](./output/ui/new-media-ops-reference-2026-03-22/README.md) +- [Web V4 UI 原型](./output/ui/storyforge-web-v4-html-prototype-2026-03-22/README.md) + ## Android ```bash diff --git a/docs/PRODUCT_LOGIC_NEW_MEDIA_OPERATING_SYSTEM_2026-03-22.md b/docs/PRODUCT_LOGIC_NEW_MEDIA_OPERATING_SYSTEM_2026-03-22.md new file mode 100644 index 0000000..2a2e32a --- /dev/null +++ b/docs/PRODUCT_LOGIC_NEW_MEDIA_OPERATING_SYSTEM_2026-03-22.md @@ -0,0 +1,549 @@ +# StoryForge 产品逻辑重构手册 + +日期：2026-03-22 + +## 1. 目标重定义 + +StoryForge 不应再被定义成“AI 内容工具集合”。 + +更准确的定位应是： + +**一个以“项目”为入口、以 Agent 为执行中枢、面向多平台账号经营的新媒体运营与生产中台。** + +覆盖的平台至少包括： +- 小红书 +- 抖音 +- 快手 +- 微信视频号 +- YouTube +- 哔哩哔哩 + +新的核心能力不是“直接生成一条内容”，而是先完成： +1. 用户先建项目，明确这是已绑定账号项目还是预调研项目 +2. 项目创建后先创建 Agent +3. Agent 完成账号画像、多平台市场调研和导入分析 +4. 持续跟踪重点创作者的更新并自动汇总日报 +5. 再把分析结果转成内容生产链与复盘闭环 + +## 2. 为什么要调整 + +之前的系统更偏： +- 任务中心 +- Agent 中心 +- Pipeline 中心 + +这对研发是友好的，但对创作者不够自然。 + +创作者真正的心智顺序是： +1. 我先要建一个项目 +2. 这个项目是运营自己的账号，还是先做市场调研 +3. 我应该先创建哪个 Agent +4. 这个 Agent 要服务哪些平台、靠什么变现 +5. 参考作品和主页怎么导入，谁来分析 +6. 哪条内容该走文案、封面、实拍剪辑还是 AI 视频 +7. 产生的额度和成本怎么管 +8. 发完之后效果如何 + +因此 StoryForge 的主对象必须重构。 + +## 3. 新的主对象模型 + +### 3.1 项目 Project +项目是 StoryForge 的第一层入口，分为两类： +- `bound_account_project`：已绑定账号项目，适合直接围绕自己的账号运营 +- `pre_research_project`：预调研项目，适合先做市场和账号研究，再决定后续是否绑定账号 + +项目创建后，不直接进入生产，而是先进入 Agent 创建流程。 + +### 3.2 工作区 Workspace +代表一个团队、品牌、创作者个人，或者一个客户项目集合。 + +### 3.3 平台账号 Platform Account +按平台保存账号实体，必须带平台字段： +- `xiaohongshu` +- `douyin` +- `kuaishou` +- `wechat_video` +- `youtube` +- `bilibili` + +账号类型分两类： +- `reference_account`：参考账号 / 精品账号 / 对标账号 +- `owned_account`：自己在运营的账号 + +### 3.4 Agent +Agent 是项目内的执行中枢，不是用户直接操作内容的替代品。 + +创建 Agent 时必须定义： +- 账号类型 +- 变现方式 +- 目标平台 +- 默认主大模型 +- 可选对比模型 + +目标平台必须支持多选，至少包括： +- 小红书 +- 抖音 +- 快手 +- 微信视频号 +- YouTube +- 哔哩哔哩 + +Agent 创建完成后，默认先做多平台市场调研，再进入账号导入、分析、生产和复盘。 + +### 3.5 多平台市场调研 +这是 Agent 创建后的第一步工作，不是可选项。 + +调研输出建议包含： +- 平台机会判断 +- 账号类型差异 +- 内容形态偏好 +- 变现方式匹配度 +- 竞争密度 +- 适合先做的平台建议 + +### 3.6 账号画像 Account Insight +对一个账号的阶段性总结，不是单次报告。 + +建议固定结构： +- 账号定位 +- 栏目结构 +- 内容支柱 +- 爆款规律 +- 商业化机会 +- 风险与短板 +- 下阶段动作建议 + +### 3.7 作品 Content Item +所有作品统一抽象，不管来源于哪个平台，都进入统一作品库。 + +作品需要统一字段： +- 标题 +- 平台 +- 作者 +- 发布时间 +- 内容类型：视频 / 图文 / 长视频 / Shorts +- 互动指标：播放、点赞、评论、收藏、转发 +- 平台原链接 +- 标准化热度分 +- 标准化商业价值分 +- 标准化可复刻分 + +### 3.8 跟踪账号 Tracking Account +这是区别于“一次性导入”的持续性对象。 + +用户可以手动把某些参考账号加入跟踪列表，系统随后持续监控： +- 是否有新作品发布 +- 自上次打开后新增了哪些内容 +- 哪些新内容值得借鉴 +- 应该送给哪个 Agent 做进一步学习 + +跟踪账号需要绑定： +- 平台 +- 账号主页 +- 所属项目 +- 关联 Agent +- 是否开启自动日报 + +### 3.9 更新日报 Update Digest +日报不是固定按自然日生成，而是按“自用户上次打开后”或“自上次已读后”的更新窗口动态汇总。 + +例如： +- 用户 1 天没打开，则生成 1 天更新汇总 +- 用户 5 天没打开，则自动生成 5 天汇总 + +日报内容应包含： +- 跟踪账号新增内容 +- 作品摘要 +- Agent 标注的借鉴点 +- 风险点 +- 建议动作 +- 一键加入学习集 / Playbook / 作品库 + +### 3.10 内容打法 Playbook +从精品账号和高分作品中总结出的可学习方法论。 + +例如： +- 开头钩子模板 +- 文案结构模板 +- 镜头节奏模板 +- 情绪驱动模板 +- 选题组合模板 + +### 3.11 生产任务 Production Task +生产任务不是平台发现逻辑，而是执行逻辑。 + +统一分为： +- 文案生成任务 +- 封面生成任务 +- 实拍剪辑任务 +- AI 视频任务 +- 发布准备任务 +- 复盘任务 + +### 3.12 发布复盘 Publish Review +真正的闭环在发布后。 + +复盘必须沉淀： +- 作品最终版本 +- 发布时间 +- 实际平台链接 +- 实际数据表现 +- 是否达到目标 +- 下一步建议 + +## 4. 核心业务闭环 + +StoryForge 的闭环应该改成下面 8 步： + +### 第 1 步：创建项目 +用户先建项目，项目分两类： +- 已绑定账号项目：直接围绕自己的账号运营 +- 预调研项目：先研究市场和参考账号，再决定是否进入绑定账号运营 + +### 第 2 步：创建 Agent +项目创建后先创建 Agent，并在创建时定义： +- 账号类型 +- 变现方式 +- 目标平台 +- 默认主大模型 +- 可选对比模型 + +### 第 3 步：多平台市场调研 +Agent 创建后先做多平台市场调研，为项目判断优先平台和内容方向。 + +### 第 4 步：导入参考作品或主页 +参考作品 / 参考主页导入时必须支持： +- 手动绑定 Agent +- 自动关联 Agent + +导入后的分析不由用户手工处理，而由 Agent 负责完成。 + +### 第 5 步：跟踪重点账号并生成更新日报 +用户可以把重点参考账号加入“跟踪账号”列表。 + +系统应在账号更新后自动： +- 抓取最新作品 +- 汇总自上次打开后的新增内容 +- 由关联 Agent 标注借鉴点 +- 生成日报供用户进入系统后优先查看 + +### 第 6 步：沉淀账号画像与内容打法 +Agent 将调研和导入分析结果转成结构化资产： +- 账号画像 +- 内容打法 +- Playbook +- 选题池 + +### 第 7 步：进入生产链 +生产链统一分流为： +- 文案 +- 封面生成 +- 实拍剪辑 +- AI 视频 + +### 第 8 步：发布与复盘 +发布后把真实反馈写回系统，更新： +- 项目策略 +- 账号策略 +- 选题池 +- Playbook +- Agent 学习集 + +## 5. 页面与信息架构 + +## 5.1 Web 端一级导航 + +建议固定为： +- 运营总台 +- 项目中心 +- Agent 工作台 +- 账号发现 +- 跟踪账号 +- 参考账号库 +- 自运营账号 +- 作品库 +- Playbook +- 生产中心 +- 发布与复盘 +- 设置 + +## 5.2 运营总台 + +首页不应该先展示工具，而应该先展示业务动作： +- 今日待办 +- 待创建的项目 +- 待创建的 Agent +- 新发现的高价值账号 +- 新发现的高价值作品 +- 本周重点选题 +- 待生产任务 +- 待复盘任务 +- 平台异常提醒 + +## 5.3 账号发现页 + +这个页面应借鉴 `飞瓜 / 千瓜` 的榜单和筛选思路。 + +核心结构： +- 页内搜索 +- 顶部平台切换 +- 赛道筛选 +- 榜单类型切换 +- 排序切换 +- 列表区 +- 右侧快速加入参考池 + +补充要求： +- 全局搜索保留，但账号发现页必须有页内搜索 +- 页内搜索支持账号名、主页链接、作品链接、关键词 +- “变现方式”不应只保留单一选项，至少支持不限、知识付费、广告合作、带货转化、私域咨询 + +## 5.4 跟踪账号页 + +这是一个高价值的持续运营页面，必须进入一级导航。 + +核心结构： +- 跟踪账号列表 +- 最近更新时间 +- 关联 Agent +- 更新日报 +- 借鉴点标注 +- 一键加入学习集 / Playbook / 作品库 + +逻辑要求： +- 跟踪账号由用户手动添加 +- 系统自动监控更新 +- 日报按“上次打开后”汇总，而不是死板按自然日切分 +- 如果用户多天未登录，则进入平台后看到的是多天汇总日报 + +## 5.5 参考账号工作区 + +每个参考账号要有独立工作区，不只是“详情页”。 + +建议页签： +- 总览 +- 作品 +- 账号画像 +- 内容打法 +- 相似账号 +- 已学习 Agent + +## 5.6 项目中心 + +项目中心是新的主入口，建议展示： +- 项目类型 +- 绑定状态 +- 已创建 Agent +- 调研状态 +- 导入状态 +- 生产进度 +- 复盘状态 + +项目详情里要能直接进入 Agent 创建和 Agent 管理。 + +## 5.7 自运营账号工作区 + +比参考账号多两块： +- 生产计划 +- 发布复盘 + +## 5.8 作品库 + +作品库是最重要的资产页之一。 + +必须支持： +- 平台筛选 +- 类型筛选 +- 时间筛选 +- AI 分数排序 +- 互动热度排序 +- 商业价值排序 +- 可复刻排序 + +每条作品下面必须同时展示： +- 基础数据 +- AI 摘要 +- 可借鉴点 +- 风险点 +- 一键加入 Playbook / 选题池 / Agent 学习集 + +## 5.9 Playbook 页 + +这是 StoryForge 未来的核心资产层。 + +Playbook 不能只是文本。 + +应结构化为： +- 适用平台 +- 适用赛道 +- 适用人群 +- 钩子模板 +- 结构模板 +- 表达模板 +- 商业承接方式 +- 不适用场景 + +## 5.10 Agent 工作台 + +Agent 页面不要做成技术配置页。 + +应分为： +- 学习源 +- 能力标签 +- 当前任务 +- 输出风格 +- 产出记录 +- 账号类型 +- 变现方式 +- 目标平台 +- 默认主大模型 +- 可选对比模型 + +高级 Prompt 和模型切换才进入高级设置。 + +## 5.11 生产中心 + +生产中心统一承接所有内容生产，不要再拆成分散入口。 + +主分流： +- 文案 +- 封面生成 +- 实拍剪辑 +- AI 视频 + +## 5.12 发布与复盘 + +这个模块是现在最缺的。 + +建议结构： +- 待发布 +- 已发布 +- 7 日复盘 +- 30 日复盘 +- 继续做 / 停止做 / 升级做 + +## 6. 产品规则补充 + +### 6.1 参考作品和主页导入 + +导入参考作品或主页时，必须支持两种方式： +- 手动绑定到某个 Agent +- 系统自动关联到推荐 Agent + +无论哪种方式，后续的导入分析都由 Agent 负责，不再依赖用户手工整理。 + +### 6.2 跟踪账号与日报 + +跟踪账号是长期行为，不是一次性导入。 + +规则建议： +- 用户手动把账号加入跟踪列表 +- 系统监控是否有新增作品 +- 新增作品按“上次打开后”自动汇总 +- 由用户创建的 Agent 分析借鉴点 +- 用户打开平台后优先看到这组日报 +- 高价值更新可一键送入学习集 / Playbook / 作品库 + +### 6.3 API key 管理 + +API key 统一后台托管，用户不直接管理密钥。 + +产品侧只展示： +- 当前可用模型 +- 模型能力说明 +- 额度消耗情况 +- 是否支持对比模型 + +### 6.4 积分 / 额度体系 + +新增积分 / 额度体系，先按三类额度表达： +- 文案额度 +- 封面额度 +- 视频额度 + +额度用于控制生成、渲染和调用成本，不要求用户感知底层 API key。 + +## 7. 对当前 StoryForge 的直接调整建议 + +### 7.1 产品抽象调整 + +从： +- Workspace +- Job +- Pipeline + +改成： +- 项目 +- Agent +- 账号 +- 作品 +- Playbook +- 生产 +- 复盘 + +### 7.2 Douyin Workbench 调整 + +当前 Douyin Workbench 是一个阶段性工具页。 + +下一步要升级成通用的 `Platform Account Workspace`。 + +也就是： +- 不再只服务抖音 +- 抖音先做出来，但模型上必须对齐未来多平台 + +### 7.3 Agent 展示方式调整 + +Agent 必须保留，并成为项目执行主中枢，但不应替代项目作为一级入口。 + +一级主视角应该是： +- 项目 +- Agent +- 账号 +- 作品 +- Playbook +- 生产 +- 复盘 + +### 7.4 API Key 管理调整 + +这一项直接沿用 6.3 的规则，产品落地时只需要把“可用模型、能力说明、额度消耗、对比模型支持情况”放到前台，不把密钥暴露给用户。 + +### 7.5 额度体系调整 + +这一项直接沿用 6.4 的规则，产品层面只暴露三类额度： +- 文案额度 +- 封面额度 +- 视频额度 + +额度用于控制生成、渲染和调用成本，不要求用户感知底层 API key。 + +## 8. 当前优先级建议 + +### P0 +- 定义新的项目对象模型 +- 定义多平台账号模型 +- 重做 Web 信息架构 +- 把“项目 -> Agent -> 调研 -> 导入分析 -> 生产 -> 复盘”的闭环做清楚 +- 打通 API key 后台托管 +- 打通文案 / 封面 / 视频三类额度 + +### P1 +- 打通 Playbook +- 打通发布与复盘 +- 把 Douyin Workbench 升级成多平台工作区框架 +- 打通参考作品 / 主页导入时的手动绑定与自动关联 Agent +- 打通 Agent 的多平台市场调研 + +### P2 +- 团队协作 +- 审批流 +- 批量投放与品牌协作 + +## 9. 最终一句话 + +StoryForge 的下一阶段，不应该再做成“AI 工具后台”。 + +它应该做成： + +**一个以项目为入口、由 Agent 驱动、覆盖多平台调研、导入分析、内容生产和复盘的新媒体运营中台。** diff --git a/output/ui/new-media-ops-reference-2026-03-22/README.md b/output/ui/new-media-ops-reference-2026-03-22/README.md new file mode 100644 index 0000000..90a2667 --- /dev/null +++ b/output/ui/new-media-ops-reference-2026-03-22/README.md @@ -0,0 +1,68 @@ +# 新媒体运营平台 UI 参考包 + +这份参考包只保留更贴近 `StoryForge` 业务逻辑的页面，不再以通用 AI 后台为主。 + +目标场景： +- 发现各平台精品账号 +- 分析账号和作品 +- 沉淀可学习的内容方法论 +- 创建 Agent 学习这些方法论 +- 反推到自己的选题、生产、发布与复盘 + +预览入口： +- [图片墙预览](./index.html) + +## 当前收录 + +### 千瓜数据 +来源： +- `https://www.qian-gua.com/rank/fans/1/7/20250112/0.html` +- `https://www.qian-gua.com/Home/AllPrice` + +适合借鉴： +- 小红书达人榜单页 +- 多维筛选条件 +- 榜单 -> 详情 -> 收藏/监控 的路径 +- 平台能力地图 + +文件： +- [01-qiangua-rank-page.png](./raw/01-qiangua-rank-page.png) +- [02-qiangua-plan-and-modules.png](./raw/02-qiangua-plan-and-modules.png) + +### 飞瓜数据 +来源： +- `https://dy.feigua.cn/help/detail/9/447.html` + +适合借鉴： +- 抖音运营后台一级导航 +- 账号发现与涨粉榜 +- 数据监测工作台 +- 品牌投放 / 竞品投放 + +文件： +- [03-feigua-menu-structure.png](./raw/03-feigua-menu-structure.png) +- [04-feigua-account-discovery.png](./raw/04-feigua-account-discovery.png) +- [05-feigua-monitoring-workbench.png](./raw/05-feigua-monitoring-workbench.png) +- [06-feigua-brand-delivery.png](./raw/06-feigua-brand-delivery.png) + +## 我对这批参考的判断 + +最适合 StoryForge 的，不是照搬它们某一家的界面，而是组合借法： + +1. 用 `飞瓜数据` 借后台主壳与一级导航分组 +2. 用 `千瓜数据` 借榜单、达人筛选、监测和内容资产视角 +3. StoryForge 自己再把平台差异抽象成统一对象： + - 平台账号 + - 参考账号 + - 作品 + - 账号洞察 + - 内容打法 + - Agent + - 生产任务 + - 发布复盘 + +## 不建议直接照搬的点 + +- 不要照搬纯投放平台风格，那会过度偏品牌投放 +- 不要把账号分析页做成单纯长报告 +- 不要把 Agent 放在用户主视角，创作者更关心“账号、作品、选题、生产、复盘” diff --git a/output/ui/new-media-ops-reference-2026-03-22/index.html b/output/ui/new-media-ops-reference-2026-03-22/index.html new file mode 100644 index 0000000..33560c1 --- /dev/null +++ b/output/ui/new-media-ops-reference-2026-03-22/index.html @@ -0,0 +1,136 @@ + + + + + + StoryForge 新媒体运营参考 UI + + + +
+
+

StoryForge 新媒体运营参考 UI

+

+ 这批参考不是通用 AI 后台，而是更贴近“抖音 / 小红书 / B站 / YouTube 多平台账号运营”的产品形态。 + 重点观察的是：账号发现、精品账号分析、内容监控、竞品跟踪、品牌投放、内容复盘。 +

+ +
+ +
+

千瓜数据

+

更适合作为“小红书方向的榜单发现、达人筛选、行业观察、内容洞察”的参考。

+
+
+ 千瓜达人榜单页 +
+

达人榜单页

+

来源：qian-gua.com

+

适合借榜单页的筛选区、排行表格、达人卡摘要信息。可转译为 StoryForge 的“精品账号发现”。

+
+
+
+ 千瓜模块与能力地图 +
+

模块与能力地图

+

来源：qian-gua.com

+

这张不是最终界面参考，而是产品能力地图参考，适合帮助我们定义菜单层级和模块边界。

+
+
+
+
+ +
+

飞瓜数据

+

更适合作为“抖音方向的后台主壳、账号发现、监控工作台、品牌投放”的参考。

+
+
+ 飞瓜菜单结构图 +
+

一级菜单结构

+

来源：dy.feigua.cn/help

+

适合借一级导航分组方式。StoryForge 可转译成：运营总台、账号发现、内容库、Agent、生产、发布复盘、设置。

+
+
+
+ 飞瓜账号发现页 +
+

账号发现页

+

来源：dy.feigua.cn/help

+

适合借涨粉榜、行业筛选、账号列表和“详情”入口，用于 StoryForge 的精品账号发现和对标账号收录。

+
+
+
+ 飞瓜监测工作台 +
+

数据监测工作台

+

来源：dy.feigua.cn/help

+

适合借监控任务页和持续追踪视角，可转译为 StoryForge 的“账号跟踪 / 作品跟踪 / 竞品跟踪”。

+
+
+
+ 飞瓜品牌投放页 +
+

品牌投放与竞品页

+

来源：dy.feigua.cn/help

+

适合借品牌搜索、筛选和表格摘要区。StoryForge 可转译为“品牌案例库 / 商业化机会 / 竞品投放观察”。

+
+
+
+
+
+ + diff --git a/output/ui/new-media-ops-reference-2026-03-22/raw/01-qiangua-rank-page.png b/output/ui/new-media-ops-reference-2026-03-22/raw/01-qiangua-rank-page.png new file mode 100644 index 0000000..20c898c Binary files /dev/null and b/output/ui/new-media-ops-reference-2026-03-22/raw/01-qiangua-rank-page.png differ diff --git a/output/ui/new-media-ops-reference-2026-03-22/raw/02-qiangua-plan-and-modules.png b/output/ui/new-media-ops-reference-2026-03-22/raw/02-qiangua-plan-and-modules.png new file mode 100644 index 0000000..cc700ba Binary files /dev/null and b/output/ui/new-media-ops-reference-2026-03-22/raw/02-qiangua-plan-and-modules.png differ diff --git a/output/ui/new-media-ops-reference-2026-03-22/raw/03-feigua-menu-structure.png b/output/ui/new-media-ops-reference-2026-03-22/raw/03-feigua-menu-structure.png new file mode 100644 index 0000000..10289b4 Binary files /dev/null and b/output/ui/new-media-ops-reference-2026-03-22/raw/03-feigua-menu-structure.png differ diff --git a/output/ui/new-media-ops-reference-2026-03-22/raw/04-feigua-account-discovery.png b/output/ui/new-media-ops-reference-2026-03-22/raw/04-feigua-account-discovery.png new file mode 100644 index 0000000..6c3550f Binary files /dev/null and b/output/ui/new-media-ops-reference-2026-03-22/raw/04-feigua-account-discovery.png differ diff --git a/output/ui/new-media-ops-reference-2026-03-22/raw/05-feigua-monitoring-workbench.png b/output/ui/new-media-ops-reference-2026-03-22/raw/05-feigua-monitoring-workbench.png new file mode 100644 index 0000000..3944427 Binary files /dev/null and b/output/ui/new-media-ops-reference-2026-03-22/raw/05-feigua-monitoring-workbench.png differ diff --git a/output/ui/new-media-ops-reference-2026-03-22/raw/06-feigua-brand-delivery.png b/output/ui/new-media-ops-reference-2026-03-22/raw/06-feigua-brand-delivery.png new file mode 100644 index 0000000..1e3061f Binary files /dev/null and b/output/ui/new-media-ops-reference-2026-03-22/raw/06-feigua-brand-delivery.png differ diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/README.md b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/README.md new file mode 100644 index 0000000..466eb02 --- /dev/null +++ b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/README.md @@ -0,0 +1,42 @@ +# StoryForge Web V4 HTML Prototype + +这是一个只做界面、不接业务功能的静态 Web 原型。 + +入口： +- [index.html](./index.html) + +包含页面： +- 项目总台 +- 项目与接入 +- 找参考 +- 跟踪账号 +- 参考详情 +- 我的账号 +- 作品库 +- Agent +- 生产中心 +- 发布与复盘 +- 额度 + +说明： +- 这版不依赖后端接口 +- 主要用于确认新的产品逻辑、信息架构和布局方向 +- 主业务流已调整为：项目 -> Agent -> 首轮调研 -> 导入绑定 -> 生产 -> 发布复盘 +- 新增：跟踪账号 -> 自动汇总更新 -> Agent 标注借鉴点 -> 日报回看 +- 导入分析以 Agent 为中心，不再以规则判断为主 +- 模型凭证默认后台托管，用户界面只表达模型选择与额度消耗 +- 主题色以淡蓝、白、黑、灰为主 + +新增预览： +- [05-intake.png](./previews/05-intake.png) +- [06-agent.png](./previews/06-agent.png) +- [07-production.png](./previews/07-production.png) +- [08-credits.png](./previews/08-credits.png) +- [09-dashboard-lite.png](./previews/09-dashboard-lite.png) +- [10-find-reference-lite.png](./previews/10-find-reference-lite.png) +- [11-reference-detail-lite.png](./previews/11-reference-detail-lite.png) +- [12-tracking-digest.png](./previews/12-tracking-digest.png) +- [13-find-reference-search.png](./previews/13-find-reference-search.png) + +备份： +- [pre-simplify backup](/Users/kris/code/StoryForge-gitea/output/ui/backups/storyforge-web-v4-html-prototype-2026-03-22-pre-simplify-2026-03-22) diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/assets/app.js b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/assets/app.js new file mode 100644 index 0000000..c2fefee --- /dev/null +++ b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/assets/app.js @@ -0,0 +1,24 @@ +const navButtons = document.querySelectorAll("[data-screen-target]"); +const screens = document.querySelectorAll("[data-screen]"); + +function activateScreen(id) { + navButtons.forEach((button) => { + const active = button.dataset.screenTarget === id; + button.classList.toggle("is-active", active); + }); + + screens.forEach((screen) => { + screen.classList.toggle("is-active", screen.dataset.screen === id); + }); +} + +navButtons.forEach((button) => { + button.addEventListener("click", () => { + const next = button.dataset.screenTarget; + activateScreen(next); + window.location.hash = next; + }); +}); + +const initial = window.location.hash.replace("#", "") || "dashboard"; +activateScreen(initial); diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/assets/styles.css b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/assets/styles.css new file mode 100644 index 0000000..1346e21 --- /dev/null +++ b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/assets/styles.css @@ -0,0 +1,845 @@ +:root { + --bg: #f4f8fd; + --bg-soft: #eef4fb; + --panel: #ffffff; + --panel-soft: #f7fbff; + --line: #d9e5f2; + --line-strong: #c8d8ea; + --text: #182433; + --muted: #66788f; + --blue-50: #f3f8ff; + --blue-100: #e8f1ff; + --blue-200: #d9e8ff; + --blue-300: #c4ddff; + --blue-500: #6aa4ff; + --blue-600: #4f8fee; + --blue-700: #3977d8; + --green: #2db584; + --orange: #f29a38; + --red: #e46767; + --shadow: 0 18px 40px rgba(67, 93, 125, 0.12); + --radius-xl: 24px; + --radius-lg: 18px; + --radius-md: 14px; + --radius-sm: 10px; +} + +* { + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; + font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; + background: + radial-gradient(circle at top left, rgba(129, 180, 255, 0.18), transparent 28%), + linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%); + color: var(--text); +} + +a { + color: inherit; + text-decoration: none; +} + +button, +input, +select { + font: inherit; +} + +.app-shell { + display: grid; + grid-template-columns: 272px minmax(0, 1fr); + min-height: 100vh; +} + +.sidebar { + background: rgba(255, 255, 255, 0.82); + border-right: 1px solid rgba(201, 220, 239, 0.75); + backdrop-filter: blur(14px); + padding: 22px 18px 18px; + position: sticky; + top: 0; + height: 100vh; +} + +.brand { + display: flex; + align-items: center; + gap: 12px; + padding: 8px 10px 20px; +} + +.brand-mark { + width: 42px; + height: 42px; + border-radius: 14px; + background: linear-gradient(145deg, #b9d7ff 0%, #6ea8ff 100%); + display: grid; + place-items: center; + color: white; + font-weight: 700; + letter-spacing: 0.04em; +} + +.brand h1 { + margin: 0; + font-size: 18px; +} + +.brand p { + margin: 4px 0 0; + font-size: 12px; + color: var(--muted); +} + +.nav-group { + margin-top: 14px; +} + +.nav-title { + padding: 0 10px 8px; + color: var(--muted); + font-size: 12px; + letter-spacing: 0.04em; +} + +.nav-item { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + border: none; + background: transparent; + border-radius: 14px; + padding: 11px 12px; + color: var(--text); + cursor: pointer; + text-align: left; + transition: 0.18s ease; +} + +.nav-item:hover { + background: rgba(106, 164, 255, 0.08); +} + +.nav-item.is-active { + background: linear-gradient(180deg, #edf5ff 0%, #e6f0ff 100%); + box-shadow: inset 0 0 0 1px rgba(106, 164, 255, 0.22); + color: var(--blue-700); +} + +.nav-item .icon { + width: 28px; + height: 28px; + border-radius: 10px; + background: var(--blue-50); + display: grid; + place-items: center; + font-size: 14px; +} + +.sidebar-foot { + margin-top: 22px; + padding: 14px; + border-radius: 18px; + background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%); + border: 1px solid var(--line); +} + +.sidebar-foot h3 { + margin: 0 0 8px; + font-size: 14px; +} + +.sidebar-foot p { + margin: 0 0 10px; + color: var(--muted); + line-height: 1.55; + font-size: 12px; +} + +.chip-row { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.chip { + padding: 6px 10px; + border-radius: 999px; + background: var(--blue-50); + border: 1px solid var(--line); + color: var(--muted); + font-size: 12px; +} + +.chip.active { + background: var(--blue-100); + color: var(--blue-700); + border-color: rgba(79, 143, 238, 0.22); +} + +.content { + padding: 18px 22px 26px; +} + +.topbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 18px; + padding: 16px 18px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.82); + backdrop-filter: blur(12px); + border: 1px solid rgba(201, 220, 239, 0.75); + box-shadow: var(--shadow); +} + +.topbar-left, +.topbar-right { + display: flex; + align-items: center; + gap: 12px; +} + +.workspace-switch, +.search, +.mini-card { + background: var(--panel); + border: 1px solid var(--line); + border-radius: 14px; +} + +.workspace-switch { + padding: 10px 14px; + min-width: 190px; +} + +.workspace-switch strong { + display: block; + font-size: 13px; +} + +.workspace-switch span { + font-size: 12px; + color: var(--muted); +} + +.search { + display: flex; + align-items: center; + gap: 10px; + min-width: 340px; + padding: 12px 14px; + color: var(--muted); +} + +.search input { + border: none; + outline: none; + background: transparent; + width: 100%; + color: var(--text); +} + +.top-pill { + padding: 8px 12px; + border-radius: 999px; + background: var(--blue-50); + color: var(--muted); + border: 1px solid var(--line); + font-size: 12px; +} + +.avatar { + width: 36px; + height: 36px; + border-radius: 12px; + background: linear-gradient(145deg, #bedcff 0%, #82b8ff 100%); + display: grid; + place-items: center; + font-size: 13px; + color: white; + font-weight: 700; +} + +.screen { + display: none; + margin-top: 18px; +} + +.screen.is-active { + display: block; +} + +.screen-head { + display: flex; + align-items: end; + justify-content: space-between; + gap: 18px; + margin-bottom: 16px; +} + +.screen-head h2 { + margin: 0 0 6px; + font-size: 28px; +} + +.screen-head p { + margin: 0; + color: var(--muted); + font-size: 14px; + line-height: 1.55; + max-width: 720px; +} + +.action-row { + display: flex; + gap: 10px; + flex-wrap: wrap; +} + +.btn { + border: none; + border-radius: 12px; + padding: 11px 14px; + cursor: pointer; +} + +.btn-primary { + background: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-600) 100%); + color: white; + box-shadow: 0 8px 18px rgba(79, 143, 238, 0.22); +} + +.btn-secondary { + background: white; + color: var(--text); + border: 1px solid var(--line); +} + +.layout-grid { + display: grid; + gap: 18px; +} + +.grid-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.grid-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); +} + +.grid-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.grid-main { + grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); +} + +.grid-split { + grid-template-columns: 280px minmax(0, 1fr) 310px; +} + +.panel { + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(201, 220, 239, 0.9); + border-radius: var(--radius-xl); + box-shadow: var(--shadow); + overflow: hidden; +} + +.panel.pad { + padding: 18px; +} + +.panel h3, +.panel h4 { + margin: 0; +} + +.panel-subtitle { + margin-top: 6px; + color: var(--muted); + font-size: 12px; +} + +.stat-card { + padding: 18px; + border-radius: 20px; + background: linear-gradient(180deg, #fbfdff 0%, #f3f8ff 100%); + border: 1px solid rgba(201, 220, 239, 0.9); + box-shadow: var(--shadow); +} + +.stat-card small { + color: var(--muted); +} + +.stat-card strong { + display: block; + margin-top: 10px; + font-size: 28px; +} + +.stat-foot { + margin-top: 10px; + display: flex; + align-items: center; + justify-content: space-between; + color: var(--muted); + font-size: 12px; +} + +.positive { color: var(--green); } +.warn { color: var(--orange); } +.negative { color: var(--red); } + +.list { + display: grid; + gap: 12px; +} + +.task-item, +.entity-card, +.topic-card, +.review-card, +.queue-card { + border-radius: 18px; + border: 1px solid var(--line); + background: linear-gradient(180deg, #fff 0%, #f9fbff 100%); +} + +.task-item, +.queue-card, +.review-card { + padding: 16px; +} + +.task-item h4, +.entity-card h4, +.topic-card h4, +.queue-card h4, +.review-card h4 { + margin: 0 0 6px; + font-size: 15px; +} + +.task-item p, +.entity-card p, +.topic-card p, +.queue-card p, +.review-card p { + margin: 0; + color: var(--muted); + line-height: 1.5; + font-size: 12px; +} + +.task-meta, +.entity-meta, +.row-meta { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 12px; +} + +.tag { + padding: 6px 10px; + border-radius: 999px; + background: #f6f9fe; + border: 1px solid var(--line); + color: var(--muted); + font-size: 12px; +} + +.tag.blue { + background: var(--blue-100); + color: var(--blue-700); +} + +.tag.green { + background: rgba(45, 181, 132, 0.1); + border-color: rgba(45, 181, 132, 0.18); + color: #1b8b61; +} + +.tag.orange { + background: rgba(242, 154, 56, 0.1); + border-color: rgba(242, 154, 56, 0.18); + color: #b76d16; +} + +.tag.red { + background: rgba(228, 103, 103, 0.1); + border-color: rgba(228, 103, 103, 0.18); + color: #b24c4c; +} + +.two-col { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: 16px; +} + +.three-col { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; +} + +.table-wrap { + overflow: auto; +} + +table { + width: 100%; + border-collapse: collapse; + min-width: 920px; +} + +th, +td { + padding: 14px 12px; + border-bottom: 1px solid var(--line); + text-align: left; + vertical-align: top; +} + +thead th { + background: #f8fbff; + color: var(--muted); + font-weight: 600; + font-size: 12px; + letter-spacing: 0.02em; +} + +tbody tr:hover { + background: rgba(106, 164, 255, 0.04); +} + +.entity-cell { + display: flex; + gap: 12px; + align-items: start; +} + +.avatar-lg { + width: 46px; + height: 46px; + border-radius: 15px; + background: linear-gradient(145deg, #c9e2ff 0%, #8bbcff 100%); + display: grid; + place-items: center; + color: white; + font-weight: 700; +} + +.cell-title { + font-weight: 600; + margin-bottom: 4px; +} + +.cell-desc { + font-size: 12px; + color: var(--muted); + line-height: 1.5; +} + +.kpi-inline { + display: flex; + flex-wrap: wrap; + gap: 14px; + color: var(--muted); + font-size: 12px; +} + +.metric { + font-weight: 600; + color: var(--text); +} + +.toolbar { + display: flex; + justify-content: space-between; + gap: 12px; + flex-wrap: wrap; + padding: 18px; + border-bottom: 1px solid var(--line); + background: linear-gradient(180deg, #fbfdff 0%, #f4f9ff 100%); +} + +.toolbar-stack { + display: grid; + gap: 10px; + min-width: min(760px, 100%); +} + +.search-inline { + min-width: 320px; + width: min(720px, 100%); + padding: 10px 12px; +} + +.filters { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.filter { + min-width: 132px; + padding: 11px 12px; + border-radius: 12px; + border: 1px solid var(--line); + background: white; + color: var(--muted); +} + +.panel-head { + display: flex; + justify-content: space-between; + align-items: center; + gap: 14px; + margin-bottom: 14px; +} + +.side-stack { + display: grid; + gap: 16px; +} + +.insight-card { + padding: 16px; + border-radius: 18px; + border: 1px solid var(--line); + background: linear-gradient(180deg, #fff 0%, #f6faff 100%); +} + +.insight-card h4 { + margin: 0 0 8px; + font-size: 15px; +} + +.insight-card ul { + margin: 0; + padding-left: 18px; + color: var(--muted); + line-height: 1.65; + font-size: 12px; +} + +.tab-row { + display: flex; + gap: 8px; + flex-wrap: wrap; + margin: 16px 0 18px; +} + +.tab { + padding: 8px 12px; + border-radius: 999px; + border: 1px solid var(--line); + background: #fff; + color: var(--muted); + font-size: 13px; +} + +.tab.active { + background: var(--blue-100); + color: var(--blue-700); + border-color: rgba(79, 143, 238, 0.2); +} + +.hero-card { + padding: 22px; + border-radius: 24px; + background: linear-gradient(145deg, rgba(212, 230, 255, 0.85) 0%, rgba(245, 250, 255, 0.96) 72%); + border: 1px solid rgba(180, 210, 248, 0.85); + box-shadow: var(--shadow); +} + +.hero-card h3 { + margin: 0 0 8px; + font-size: 20px; +} + +.hero-card p { + margin: 0; + color: var(--muted); + line-height: 1.6; + font-size: 14px; +} + +.mini-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; + margin-top: 16px; +} + +.mini-card { + padding: 14px; +} + +.mini-card strong { + display: block; + margin-top: 8px; + font-size: 17px; +} + +.playbook-list { + display: grid; + gap: 12px; +} + +.playbook-item { + padding: 14px; + border-radius: 16px; + border: 1px solid var(--line); + background: linear-gradient(180deg, #fff 0%, #f8fbff 100%); +} + +.playbook-item.active { + border-color: rgba(79, 143, 238, 0.24); + background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%); +} + +.timeline { + display: flex; + gap: 10px; + flex-wrap: wrap; +} + +.step { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + border-radius: 999px; + background: #fff; + border: 1px solid var(--line); + color: var(--muted); + font-size: 12px; +} + +.step.done { + color: #167657; + border-color: rgba(45, 181, 132, 0.18); + background: rgba(45, 181, 132, 0.08); +} + +.step.current { + color: var(--blue-700); + border-color: rgba(79, 143, 238, 0.2); + background: var(--blue-100); +} + +.bar-chart { + display: grid; + gap: 10px; +} + +.bar-row { + display: grid; + grid-template-columns: 108px minmax(0, 1fr) 48px; + gap: 10px; + align-items: center; + font-size: 13px; + color: var(--muted); +} + +.bar-track { + height: 10px; + border-radius: 999px; + background: #eef3f8; + overflow: hidden; +} + +.bar-fill { + height: 100%; + border-radius: 999px; + background: linear-gradient(90deg, #93c3ff 0%, #5c95ef 100%); +} + +.calendar { + display: grid; + grid-template-columns: repeat(7, minmax(0, 1fr)); + gap: 10px; +} + +.day { + min-height: 118px; + border: 1px solid var(--line); + border-radius: 16px; + padding: 12px; + background: linear-gradient(180deg, #fff 0%, #f9fbff 100%); +} + +.day strong { + display: block; + margin-bottom: 8px; + font-size: 13px; +} + +.slot { + margin-top: 8px; + padding: 8px 10px; + border-radius: 12px; + background: var(--blue-50); + border: 1px solid rgba(106, 164, 255, 0.16); + font-size: 12px; + color: var(--text); + line-height: 1.5; +} + +.footer-note { + margin-top: 18px; + color: var(--muted); + font-size: 12px; + text-align: right; +} + +@media (max-width: 1320px) { + .grid-main, + .grid-split, + .grid-5, + .grid-4, + .grid-3, + .three-col, + .two-col { + grid-template-columns: 1fr; + } + .calendar { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 1080px) { + .app-shell { + grid-template-columns: 1fr; + } + .sidebar { + position: relative; + height: auto; + } + .topbar { + flex-direction: column; + align-items: stretch; + } + .topbar-left, + .topbar-right { + flex-wrap: wrap; + } + .search { + min-width: 0; + } +} diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/index.html b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/index.html new file mode 100644 index 0000000..f786690 --- /dev/null +++ b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/index.html @@ -0,0 +1,1890 @@ + + + + + + StoryForge Web V4 Prototype + + + +
+ + +
+
+
+
+ 项目：星流内容组 + 1 个已绑定账号项目 · 2 个预调研项目 +
+
+ 全平台 + 抖音 + 小红书 + B站 + YouTube +
+
+
+ + 自动化正常 7/8 + 跟踪更新 12 + 待调研 Agent 4 +
KR
+
+
+ +
+
+
+

项目总台

+

先做最能推进项目的事。

+
+
+ + + +
+
+ +
+
+ 活跃项目 + 5 +
其中 2 个为预调研项目3 个已绑定平台账号
+
+
+ 待接入参考内容 + 14 +
近 24 小时导入8 条待 Agent 归类
+
+
+ 跟踪更新 + 12 +
自上次打开后新增7 条有借鉴点
+
+
+ 待完成首轮调研 Agent + 4 +
创建后未跑市场调研2 个变现定义不完整
+
+
+ +
+
+
+

主业务流已经前置

+

项目 -> Agent -> 调研 -> 导入绑定 -> 生产 -> 复盘。

+
+ 1. 项目与接入 + 2. 创建 Agent + 3. 首轮调研 + 4. 导入并绑定 + 5. 生产与封面 + 6. 发布复盘 +
+
+ +
+
+
+

今日重点动作

+
按主流程排
+
+ 优先执行 4 项 +
+
+
+

为“副业增长实验室”新建预调研项目

+

先开项目，后面再补账号绑定。

+
+ 项目 + 预调研 + 无账号也可启动 +
+
+
+

给“教育切片增长助手”补完平台与变现定义

+

补齐平台和变现方式后再跑首轮调研。

+
+ Agent 创建 + 待补字段 +
+
+
+

把 5 条新导入的抖音作品交给导入分析 Agent 自动归类

+

统一由导入分析 Agent 判断归属。

+
+ 导入分析 Agent + 自动绑定 +
+
+
+

补齐 2 条待生产内容的封面生成方案

+

先补封面多模型对比，再进正式生产。

+
+ 封面生成 + 多模型对比 +
+
+
+
+ +
+
+
+

最近发现的高分账号

+
先选要学的号
+
+ 找参考 +
+
+
+
+
A
+
+
阿元创业手记
+
抖音 · 创业成长 · 强观点短视频
+
+
+
+ 涨粉快 + 高互动 + 可学习度 93 +
+
+
+
+
晨
+
+
晨风老师
+
小红书 · 教育规划 · 图文 + 视频
+
+
+
+ 稳定更新 + 收藏高 + 商业价值 88 +
+
+
+
+
YT
+
+
Grow With Data
+
YouTube · Knowledge Shorts
+
+
+
+ 短视频强 + 系列化明显 + 结构清晰 +
+
+
+
+ +
+
+
+

跟踪日报

+
汇总自上次打开后的更新
+
+ 5 天汇总 +
+
+
+

秋芝2046 新增 3 条作品

+

导入分析 Agent 判断其中 2 条适合“教育切片助手”学习。

+
+ 抖音 + 已标借鉴点 +
+
+
+

晨风老师 新增 2 条图文

+

更适合补进小红书搜索承接模板，建议今天加入 Playbook。

+
+ 小红书 + 适合图文线 +
+
+
+
+
+ +
+
+

本周内容计划

+

本周重点是把“高信任知识切片”做稳定。

+
+
+ 待生成选题 + 11 +
+
+ 待脚本 + 6 +
+
+ 待制作 + 4 +
+
+ 待复盘 + 5 +
+
+
+ +
+
+
+

最近同步的高分作品

+
直接找可复制打法
+
+
+
+
+

3 秒抓住家长注意力的开头怎么写

+

适合做系列开场。

+
+ 小红书 + AI 综合分 94 + 收藏率高 +
+
+
+

副业失败的 3 个真实坑

+

适合走 AI 视频线。

+
+ 抖音 + 传播热度 91 + 商业价值 87 +
+
+
+
+ +
+
+
+

异常提醒

+
先处理阻塞项
+
+
+
+
+

小红书竞品同步任务延迟 48 分钟

+

建议先暂停低优先级同步。

+
+
+

2 个 Agent 学习集 7 天未更新

+

今天优先补学习集。

+
+
+
+
+
+
+ +
+
+
+

项目与接入

+

先建项目，再决定是否绑定自己的账号。

+
+
+ + + +
+
+ +
+

推荐流程

+

建项目 → 建 Agent → 跑调研 → 导入绑定 → 开始生产。

+
+ 项目 + 账号接入 + Agent 创建 + 市场调研 + 导入绑定 + 生产 +
+
+ +
+
+
+
+
+

项目状态

+
预调研项目也能先跑
+
+
+
+
+
星流主号增长项目
+
已绑定抖音创作者平台 / 小红书专业号
+
+ 已绑定账号 + 进入分析中 +
+
+
+
副业增长实验室
+
还没绑账号，先做调研
+
+ 预调研 + 可导入参考内容 +
+
+
+
海外 Shorts 试水项目
+
已确定平台为 YouTube，尚未正式开账号，先做题材验证
+
+ 待绑定账号 + 先做调研 +
+
+
+
+ +
+
+
+

导入中心

+
导入后直接进入学习链路
+
+
+
+
+

导入单条作品

+
    +
  • 支持抖音 / 小红书 / B站 / 视频号 / YouTube 链接
    • +
  • 可选择“手动关联 Agent”或“自动关联最近使用 Agent”
    • +
  • 进入导入分析 Agent 队列后再分类
    • +
+
+
+

导入创作者主页

+
    +
  • 输入抖音、小红书、B站、快手、视频号、YouTube 主页链接
    • +
  • 自动建立参考账号卡片
    • +
  • 也可手动指定 Agent
    • +
+
+
+

上传本地视频

+
    +
  • 适合内部素材和竞品录屏
    • +
  • 自动做 ASR 和摘要
    • +
  • 可直接送入学习集
    • +
+
+
+
+ +
+
+
+

导入绑定策略

+
导入时就定归属
+
+
+
+
+

手动关联 Agent

+

你知道归属时就直接指定。

+
+ 导入前选择 + 最稳妥 +
+
+
+

自动关联最近使用 Agent

+

适合连续导入同一批内容。

+
+ 半自动 + 效率更高 +
+
+
+

暂不绑定，进入待归类池

+

信息不全时，先放待归类池。

+
+ 待归类 + 需要人工确认 +
+
+
+
+
+ +
+
+
+
+

平台账号同步

+
先绑自己的账号，系统才有现状分析
+
+
+
+
+

抖音创作者平台

+

已绑定 · 最近同步：今天 09:12 · 当前账号健康度：中上

+
+
+

小红书专业号

+

已绑定 · 最近同步：今天 08:46 · 当前图文收藏信号强于视频信号

+
+
+

视频号 / 快手 / YouTube / 哔哩哔哩

+

不绑定也能先做预调研。

+
+
+
+ +
+
+
+

最近导入队列

+
统一交给导入分析 Agent
+
+
+
+
+

抖音作品《副业失败的 3 个真实坑》

+

单条作品 · 已建议绑定“副业增长助手”

+
+ 自动绑定候选 +
+
+
+

抖音主页《秋芝2046》

+

主页链接 · 已建卡片，等待确认 Agent

+
+ 待人工确认 +
+
+
+
+
+
+
+ +
+
+
+

找参考

+

在这里找值得学的账号。

+
+
+ + + +
+
+ +
+
+
+ +
+
平台：全平台
+
模式：榜单发现
+
赛道：教育 / 创业
+
地区：全国
+
粉丝量级：10w - 500w
+
变现：不限
+
+
+
+
+ 不限 + 知识付费 + 广告合作 + 带货转化 + 私域咨询 +
+
+ 涨粉 + 互动 + 商业价值 + 可学习度 + 最近活跃 +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
账号平台 / 赛道粉丝近 30 天涨粉AI 可学习度商业价值最近高分作品动作
+
+
阿
+
+
阿元创业手记
+
强观点开头 · 案例拆解 · 行动建议
+
+
+
抖音创业成长
182.4w+28.7w9388《副业失败的 3 个坑》
详情导入项目绑定 Agent
+
+
晨
+
+
晨风老师
+
家长决策内容 · 图文收藏高 · 节奏稳定
+
+
+
小红书教育规划
95.2w+14.2w9186《3 秒抓住家长注意力的开头》
详情导入项目AI 初判
+
+
数
+
+
数据见闻录
+
B站长视频切片能力强 · 系列化明显
+
+
+
B站商业认知
48.1w+6.4w8479《做二创最容易踩的 3 个坑》
详情导入项目加入参考池
+
+
+
+ +
+
+
+

跟踪账号

+

跟踪创作者更新，系统自动汇总成日报。

+
+
+ + + +
+
+ +
+

日报逻辑

+

系统按“上次打开后”或“最近一次已读日报后”的更新做汇总。用户 5 天没登录，这里就自动汇总 5 天的更新，再由你创建的 Agent 给出借鉴点。

+
+ 按上次打开汇总 + 支持多天补报 + Agent 自动标借鉴点 +
+
+ +
+
+
+
+
+

跟踪列表

+
手动选择要长期盯的账号
+
+ 共 18 个 +
+
+
+

秋芝2046

+

抖音 · 关联 Agent：教育切片助手 · 最近更新：今天 08:14

+
+ 自动跟踪中 + 日报已生成 +
+
+
+

晨风老师

+

小红书 · 关联 Agent：图文增长助手 · 最近更新：昨天 21:40

+
+ 自动跟踪中 + 2 条新内容 +
+
+
+

Grow With Data

+

YouTube · 关联 Agent：海外 Shorts 助手 · 最近更新：3 天前

+
+ 等待下次抓取 +
+
+
+
+ +
+
+
+

本次汇总范围

+
不是“今日固定日报”，而是“自上次打开后的更新”
+
+
+
+
+

上次打开

+
    +
  • 2026/03/17 19:42
    • +
  • 距今 5 天
    • +
+
+
+

本次汇总

+
    +
  • 新增内容 12 条
    • +
  • 涉及 5 个跟踪账号
    • +
+
+
+

Agent 标注

+
    +
  • 7 条有借鉴点
    • +
  • 3 条建议入学习集
    • +
+
+
+
+
+ +
+
+
+
+

更新日报

+
打开平台后先看这一组更新
+
+ 汇总 5 天 +
+
+
+

秋芝2046 · 《家长最容易忽略的一步》

+

教育切片助手判断：开头“错误认知”很强，适合借去做你的下一条 30 秒口播。

+
+ 有借鉴点 + 建议加入学习集 +
+
+
+

晨风老师 · 《志愿填报前先别急着选学校》

+

图文增长助手判断：标题结构和收藏导向很强，适合转成图文选题。

+
+ 适合图文线 + 建议加入 Playbook +
+
+
+

Grow With Data · 《3 hooks for Shorts》

+

海外 Shorts 助手判断：更适合补充节奏和结构，不建议直接照搬表达。

+
+ 结构可借 + 表达不直接照搬 +
+
+
+
+ +
+
+
+

自动化规则

+
让跟踪更像运营动作，而不是临时爬一眼
+
+
+
+
+

抓取触发

+

账号更新即入队；用户再次打开平台时补齐未读期间的全部更新。

+
+
+

日报生成

+

按账号聚合，再按 Agent 给出借鉴点、风险点和建议动作。

+
+
+

结果回写

+

高价值更新可一键加入 Agent 学习集、Playbook 或作品库。

+
+
+
+
+
+
+ +
+
+
+

参考详情

+

这里看单个参考账号的重点结论和可学资产。

+
+
+ + + +
+
+ +
+
+
阿
+
+

阿元创业手记

+

抖音 · 创业成长 · 最近 30 天涨粉 28.7w

+
+
+
+
AI 可学习度93
+
商业价值88
+
高分作品17
+
已提炼打法6
+
+
+ +
+ 总览 + 作品 + 账号画像 + 内容打法 + 相似账号 + 已学习 Agent +
+ +
+
+
+
+
+

账号画像

+
先看结论，再决定要不要学
+
+
+
+
+

账号定位

+
    +
  • 反常识切入，适合短视频开头抢注意力
    • +
  • 用具体失败案例建立真实感
    • +
  • 结尾多给明确行动建议
    • +
+
+
+

爆款规律

+
    +
  • 标题里一定有“错误 / 坑 / 真相”
    • +
  • 开头 3 秒即给冲突观点
    • +
  • 中段用 2 到 3 个案例支撑观点
    • +
+
+
+

不建议照搬

+
    +
  • 大量使用强判断话术，风险偏高
    • +
  • 过度使用负面情绪会稀释信任
    • +
  • 商业承接偏硬，不适合所有账号
    • +
+
+
+
+ +
+
+
+

高分作品

+
从高分作品里抽打法
+
+
+
+
+

副业失败的 3 个真实坑

+

误区开头 + 案例推进 + 行动建议。

+
+ AI 综合分 94 + 播放 128w + 评论 1.9w +
+
+
+

为什么努力的人反而更容易做错副业

+

反常识标题，适合做系列。

+
+ 可复刻度 91 + 收藏率高 +
+
+
+
+
+ +
+
+
+
+

下一步建议

+
看完就能动手
+
+
+
+
+

沉淀 3 条钩子模板

+

先提炼“错误认知”型开头。

+
+
+

生成一个“副业避坑” Playbook

+

补 2 条小红书图文做跨平台适配。

+
+
+

创建选题助手 Agent

+

直接生成一个新 Agent。

+
+ 先选项目 + 再选平台和变现方式 +
+
+
+
+ +
+
+
+

相似账号

+
别只学一个号
+
+
+
+
+

小口方法论

+

更强结论表达。

+
+
+

Grow With Data

+

更强结构和镜头节奏。

+
+
+
+
+
+
+ +
+
+
+

我的账号

+

这里看自己账号的现状和下一步动作。

+
+
+ + + +
+
+ +
+
+
你
+
+

你自己的知识成长号

+

主平台：抖音 / 小红书 · 当前目标：做稳“高信任知识切片”栏目。

+
+
+
+
本周发布目标14 条
+
在产内容6 条
+
待脚本4 条
+
待复盘5 条
+
+
+ +
+ 总览 + 内容计划 + 候选选题 + 在产内容 + 已发布 + 复盘 +
+ +
+
+
+
+
+

本周策略卡

+
先看本周重点
+
+
+
+

阶段策略

+
    +
  • 先把“副业避坑”做成 7 条系列内容，形成稳定栏目。
    • +
  • 内容结构优先借参考账号的强观点开头，但案例改成你自己的客户场景。
    • +
  • 本周实拍剪辑和 AI 视频各做 2 条，验证哪条转化更高。
    • +
+
+
+ +
+
+
+

下一批建议选题

+
Agent 输出直接接业务目标
+
+
+
+
+

为什么越努力的人越容易做错副业

+

适合先走短视频观点切片。

+
+ 钩子强 + 预估价值高 + 待脚本 +
+
+
+

普通家长最容易忽略的教育规划错误

+

适合小红书图文 + 抖音口播双测。

+
+ 跨平台 + 收藏潜力高 +
+
+
+
+
+ +
+
+
+
+

已绑定 Playbook

+
这里是 Agent 的真实学习源
+
+
+
+
+

强观点短视频开头模板

+

来源：抖音创业类高分账号 14 条作品

+
+
+

高信任教育图文结构模板

+

来源：小红书教育规划账号 9 条高收藏图文

+
+
+
+
+
+
+

已绑定 Agent

+
看产出，不看技术配置
+
+
+
+
+

选题助手-教育切片

+

最近产出：4 个候选选题，2 个已进入脚本阶段。

+
+
+

分镜助手-副业避坑

+

最近产出：2 条 AI 视频分镜，1 条进入生产。

+
+
+
+
+
+
+ +
+
+
+

作品库

+

在这里统一看作品、绑定和动作。

+
+
+ + + +
+
+ +
+
+
+
+

筛选与排序

+
先看对决策最重要的筛选
+
+
+
+
平台：全平台
+
类型：视频 / 图文
+
来源：参考账号 / 自营账号 / 导入队列
+
状态：已分析
+
时间：近 30 天
+
栏目：副业避坑
+
+
+
+

排序

+
+
+
+ AI 综合分 + 传播热度 + 商业价值 + 可复刻度 + 发布时间 + 待绑定 Agent +
+
+ +
+
+
+

作品列表

+
选中后右侧直接给结论和动作
+
+
+ 高分作品 + 最新作品 + 全部作品 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
作品来源账号平台当前绑定发布时间AI 综合分传播热度商业价值
+
3 秒抓住家长注意力的开头怎么写
+
图文 · 教育规划 · 高收藏
+ 		晨风老师小红书教育切片助手2026/03/19949185
+
副业失败的 3 个真实坑
+
视频 · 创业成长 · 高评论
+ 		阿元创业手记抖音待导入分析2026/03/18949387
+
做二创最容易踩的 3 个坑
+
长视频切片 · 结构清晰
+ 		数据见闻录B站副业增长助手2026/03/17887976
+
+
+ +
+
+
+

作品详情抽屉

+
当前选中：副业失败的 3 个真实坑
+
+
+
+
+

AI 摘要

+
    +
  • 高互动原因在于“反常识 + 具体案例 + 明确建议”的组合。
    • +
  • 节奏短促，适合口播或 AI 视频切片。
    • +
+
+
+

可借鉴点

+
    +
  • 开头直接否定常见认知
    • +
  • 中段按 1 / 2 / 3 结构推进
    • +
  • 结尾给出可执行动作
    • +
+
+
+

导入归属建议

+
    +
  • 优先绑定到“副业增长助手”
    • +
  • 如需保守处理，可先放入待归类池
    • +
  • 可一键转入 Playbook 样本集
    • +
+
+
+

风险提醒

+
    +
  • 如果过度强化“失败”情绪，容易降低信任感。
    • +
  • 商业承接不能直接硬转化，需要加过渡案例。
    • +
+
+
+ 绑定副业增长助手 + 送入导入分析 Agent + 加入 Playbook + 发起生产 +
+
+
+
+
+ +
+
+
+

Agent

+

项目之后，第二步就是创建 Agent。

+
+
+ + + +
+
+ +
+

Agent 创建前置信息

+

先定平台、变现方式和主模型，再跑首轮调研。

+
+ 先选项目 + 定义账号类型 + 选择平台 + 选择变现 + 设置主模型 + 启动调研 +
+
+ +
+
+
+
+

策略资产与 Playbook

+
打法资产继续保留，但服务于 Agent
+
+
+
+
+

强观点短视频开头模板

+

抖音 / YouTube Shorts · 反常识开头 · 高评论

+
+
+

高信任教育图文结构模板

+

小红书 · 高收藏 · 适合家长决策内容

+
+
+

案例拆解型长视频切片模板

+

B站 / YouTube · 适合做知识型切片

+
+
+
+ +
+
+
+

Agent 创建器

+
先定目标，再调研，再产出
+
+
+
+
+

账号类型

+
    +
  • 知识 IP / 教育型账号
    • +
  • 品牌型账号 / 带货账号
    • +
  • 个人成长 / 生活方式 / 案例拆解账号
    • +
+
+
+

变现方式

+
    +
  • 知识付费
    • +
  • 广告接单 / 品牌合作
    • +
  • 带货转化 / 私域咨询 / 会员订阅
    • +
+
+
+
+
+

覆盖平台

+
    +
  • 抖音 / 小红书 / 快手
    • +
  • 微信视频号 / YouTube / 哔哩哔哩
    • +
  • 按勾选平台先跑市场调研
    • +
+
+
+

默认主大模型

+
    +
  • 设置 1 个主模型作为标准输出
    • +
  • 可同时启用多个对比模型
    • +
  • 用户不管理 API Key，只选择模型
    • +
+
+
+

首轮动作

+
    +
  • 先做市场调研
    • +
  • 再吸收导入的主页与作品
    • +
  • 最后进入文案和内容计划生成
    • +
+
+
+ +
+ 抖音 + 小红书 + 快手 + 微信视频号 + YouTube + 哔哩哔哩 +
+ +
+ 知识付费 + 广告合作 + 带货转化 + 私域咨询 + 会员订阅 +
+ +
+
+

文案模型

+

主模型：通义千问 Max，可开对比模型。

+
+ 主模型 + 多模型对比 +
+
+
+

封面模型

+

支持阿里、火山和统一图像模型。

+
+ 封面生成前置 +
+
+
+

视频模型

+

脚本、分镜、封面确认后再进视频队列。

+
+ 后台统一管理 Key +
+
+
+
+ +
+
+
+

已创建 Agent

+
导入分析也由专门 Agent 负责
+
+
+
+
+

选题助手-教育切片

+

学习源：高信任教育图文 + 强观点短视频 · 平台：抖音 / 小红书 / 视频号 · 变现：知识付费 + 私域咨询

+
+ 最近产出 6 条 + 主模型：通义千问 + 首轮调研已完成 +
+
+
+

分镜助手-副业避坑

+

学习源：反常识开头 + 失败案例拆解 Playbook · 平台：抖音 / YouTube Shorts · 变现：广告合作

+
+ 待补学习集 + 主模型：豆包 + 最近产出 2 条 +
+
+
+

导入分析 Agent

+

负责解析用户导入的主页、单条作品和本地视频，自动给出分类和绑定建议，必要时进入待人工确认池。

+
+ 替代规则判断 + 支持手动复核 +
+
+
+
+
+
+ +
+
+
+

生产中心

+

文案、封面、剪辑、AI 视频统一排队处理。

+
+
+ + + + +
+
+ +
+
+
+

生产队列

+
统一看生产进度
+
+
+
+ 已选题 + 文案生成 + 封面生成 + 分镜 / 素材 + 生产中 + 待审核 + 待发布 +
+
+
+

文案生成

+

《孩子为什么总在临门一脚放弃》

+
+ 主模型：通义 + 对比 2 个模型 +
+
+
+

封面生成

+

《副业避坑：别把努力浪费在错方向》

+
+ 阿里 / 火山 / 通用图像 + 待最终选图 +
+
+
+

实拍剪辑

+

《教育规划里最容易拖延的一步》

+
+ 来源：自营账号 + ETA 2h +
+
+
+

AI 视频

+

《副业避坑：别把努力浪费在错方向》

+
+ 来源：Playbook + 待审核 +
+
+
+
+ +
+
+
+
+
+

本周生产看板

+
先看卡点
+
+
+
+
+

AI 视频试投版《低预算露营也能拍出高级感》

+

卡在封面确认，今天 17:30 前可进待审核。

+
+ AI 视频 + 卡在封面 +
+
+
+

《副业避坑》实拍快剪版

+

已回片，等人工看样后排期。

+
+ 待审核 + 实拍剪辑 +
+
+
+

《办公室反差感穿搭》图文版

+

文案已完成，还要补两组封面版本。

+
+ 图文制作 + 待补封面 +
+
+
+
+ +
+
+
+

生产瓶颈

+
把阻塞项直接亮出来
+
+
+
+
+ 封面确认 +
+ 4 条 +
+
+ 人工审核 +
+ 3 条 +
+
+ 排期决策 +
+ 5 条 +
+
+
+
+

当前最容易拖慢效率的是“封面确认”

+

把封面确认单独拆出来，并支持多模型 AB 对比。

+
+ 流程优化建议 +
+
+
+
+
+ +
+
+
+
+

自动化与异常

+
先看哪里稳定，哪里要人工兜底
+
+
+
+
+

实拍剪辑线

+

Windows cutvideo 调度正常，最近 24 小时成功 6 / 6。

+
+
+

AI 视频线

+

本周 2 条任务等待凭证刷新，建议保留重试入口。

+
+
+

封面多模型协作

+

3 条任务都卡在首图方案，建议加封面优先队列。

+
+
+
+
+
+
StoryForge Web V4 prototype · UI only · no live data binding
+
+ +
+
+
+

发布与复盘

+

在这里看发布结果和下一轮动作。

+
+
+ + + +
+
+ +
+
+
+
+
+

发布排期

+
先保栏目节奏
+
+
+
+
周一
抖音：副业避坑短视频
19:30
+
周二
小红书：教育图文
12:00
+
周三
抖音：AI 视频版
20:00
+
周四
B站：长视频切片
18:30
+
周五
抖音：栏目连载 03
20:00
+
周六
小红书：案例图文
13:00
+
周日
YouTube Shorts：A/B 版
21:00
+
+
+ +
+
+
+

复盘对比

+
同主题不同生产方式对比
+
+
+
+
+ 实拍剪辑版 +
+ 82 +
+
+ AI 视频版 +
+ 68 +
+
+
+
+

结论：建议继续做实拍剪辑版

+

下周优先做实拍剪辑版，AI 视频继续低成本测试。

+
+ 建议继续 + 可变体复刻 +
+
+
+
+
+ +
+
+
+
+

最新复盘卡

+
把结果写回策略和学习集
+
+
+
+
+

《副业失败的 3 个真实坑》

+

播放 128w · 点赞 8.9w · 评论 1.9w · 收藏 2.1w · 咨询转化 3.2%

+
+ 建议继续 + 适合系列化 +
+
+
+

《教育规划里最容易忽略的一步》

+

更适合做图文矩阵延展。

+
+ 适合图文扩展 + 建议补系列 +
+
+
+
+ +
+
+
+

下一轮动作

+
复盘后进入下一轮
+
+
+
+
+

更新 Playbook

+

把“评论区问题前置”写回模板。

+
+
+

更新 Agent 学习源

+

把 2 条高表现内容写回 Agent 学习集。

+
+
+

安排下一轮测试

+

同主题保留实拍主线，AI 视频继续低成本验证。

+
+
+
+
+
+
StoryForge Web V4 prototype · review loop separated from production
+
+ +
+
+
+

额度

+

用户只看可用额度，不看底层密钥。

+
+
+ + + +
+
+ +
+
+ 文案积分 + 12,640 +
本周消耗 1,120主模型 + 对比模型共用
+
+
+ 封面积分 + 4,320 +
本周消耗 680多模型对比消耗更快
+
+
+ 视频积分 + 1,180 +
本周消耗 290需控制试投数量
+
+
+ 当前计费策略 + Phase 1 +
按额度池表达后续再细化成本模型
+
+
+ +
+
+
+
+
+

额度池逻辑

+
先让用户看懂自己还能做什么
+
+
+
+
+

文案积分

+
    +
  • 覆盖选题、文案、脚本、复盘建议
    • +
  • 支持 1 个主模型 + 多个对比模型
    • +
  • 适合高频日常使用
    • +
+
+
+

封面积分

+
    +
  • 覆盖封面主图、首图、首尾帧辅助图
    • +
  • 支持阿里、火山和统一图像模型
    • +
  • 适合多版本 AB 测试
    • +
+
+
+

视频积分

+
    +
  • 覆盖 AI 视频生成与重试
    • +
  • 适合关键选题的低成本试投
    • +
  • 建议和封面额度联动观察
    • +
+
+
+
+ +
+
+
+

项目消耗排行

+
先看哪个项目最吃额度
+
+
+
+
+

星流主号增长项目

+

文案积分 420 / 封面积分 110 / 视频积分 68。主要消耗在抖音 + 小红书双平台连续出稿。

+
+
+

副业增长实验室

+

文案积分 265 / 封面积分 182 / 视频积分 41。主要消耗在高分参考内容导入后的封面多版本测试。

+
+
+

海外 Shorts 试水项目

+

视频积分占比偏高，建议先多做文案和封面验证，再放大视频试投。

+
+
+
+
+ +
+
+
+
+

额度产品化建议

+
先用简单表达上线
+
+
+
+
+

第一阶段：三类额度池

+

先统一成文案 / 封面 / 视频三类额度池。

+
+ 可快速上线 +
+
+
+

第二阶段：项目包 + 增值包

+

后续再加项目包、试投包、封面增强包。

+
+ 后续迭代 +
+
+
+

后台托管密钥

+

密钥统一后台托管，用户只选模型和看额度。

+
+ 降低使用门槛 +
+
+
+
+
+
+
StoryForge Web V4 prototype · credit system expressed as user-facing quota pools
+
+
+
+ + + + diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/01-dashboard.png b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/01-dashboard.png new file mode 100644 index 0000000..3729b75 Binary files /dev/null and b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/01-dashboard.png differ diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/02-discovery.png b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/02-discovery.png new file mode 100644 index 0000000..4dc2787 Binary files /dev/null and b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/02-discovery.png differ diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/03-works.png b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/03-works.png new file mode 100644 index 0000000..0384c13 Binary files /dev/null and b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/03-works.png differ diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/04-review.png b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/04-review.png new file mode 100644 index 0000000..728fbe9 Binary files /dev/null and b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/04-review.png differ diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/05-intake.png b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/05-intake.png new file mode 100644 index 0000000..fe3b6d1 Binary files /dev/null and b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/05-intake.png differ diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/06-agent.png b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/06-agent.png new file mode 100644 index 0000000..c1d8066 Binary files /dev/null and b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/06-agent.png differ diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/07-production.png b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/07-production.png new file mode 100644 index 0000000..dace322 Binary files /dev/null and b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/07-production.png differ diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/08-credits.png b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/08-credits.png new file mode 100644 index 0000000..ff4d373 Binary files /dev/null and b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/08-credits.png differ diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/09-dashboard-lite.png b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/09-dashboard-lite.png new file mode 100644 index 0000000..72d3af9 Binary files /dev/null and b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/09-dashboard-lite.png differ diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/10-find-reference-lite.png b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/10-find-reference-lite.png new file mode 100644 index 0000000..121b8ce Binary files /dev/null and b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/10-find-reference-lite.png differ diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/11-reference-detail-lite.png b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/11-reference-detail-lite.png new file mode 100644 index 0000000..e8b2a42 Binary files /dev/null and b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/11-reference-detail-lite.png differ diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/12-tracking-digest.png b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/12-tracking-digest.png new file mode 100644 index 0000000..3eccab5 Binary files /dev/null and b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/12-tracking-digest.png differ diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/13-find-reference-search.png b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/13-find-reference-search.png new file mode 100644 index 0000000..ca491f5 Binary files /dev/null and b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/previews/13-find-reference-search.png differ