krisolo/storyforge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add storyforge mobile v4 html prototype

Browse Source
This commit is contained in:
kris
2026-03-22 10:33:03 +08:00
parent 1851625a53
commit 35c97ffe4d
3 changed files with 816 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -17,6 +17,7 @@ StoryForge 现在拆成独立项目目录，和 `AI-glasses` 分开维护。
- [新媒体运营中台产品逻辑手册](./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)
- [Mobile V4 UI 原型](./output/ui/storyforge-mobile-v4-html-prototype-2026-03-22/README.md)
## Android

30
output/ui/storyforge-mobile-v4-html-prototype-2026-03-22/README.md Normal file
View File

@@ -0,0 +1,30 @@
# StoryForge Mobile V4 HTML Prototype
这是一套只做界面、不接真实功能的移动端高保真原型，用来配合当前 `Web V4` 的产品逻辑评审。
## 入口
- 预览文件：`index.html`
## 页面结构
1. `登录与工作区`
2. `总览`
3. `找对标`
4. `跟踪日报`
5. `Agent`
6. `生产中心`
7. `我的`
## 设计口径
- 产品定位：多平台新媒体运营助手
- 主题色：淡蓝、白、黑、灰
- 主对象：项目、对标、Agent、生产、复盘
- 导航方式：底部 5 栏，适合 Android / iOS 通用使用
## 说明
- 这是静态 HTML 原型，不依赖本地服务
- 命名和业务逻辑与 `Web V4` 保持一致
- 当前重点是验证信息层级、导航、操作入口和视觉节奏

785
output/ui/storyforge-mobile-v4-html-prototype-2026-03-22/index.html Normal file
View File

@@ -0,0 +1,785 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>StoryForge Mobile V4 Prototype</title>
<style>
:root {
--bg: #edf6ff;
--bg-soft: #f7fbff;
--panel: #ffffff;
--panel-soft: #f5f9ff;
--line: #dbe7f3;
--line-strong: #cddded;
--text: #152332;
--muted: #64788e;
--blue-50: #f3f8ff;
--blue-100: #e6f1ff;
--blue-500: #70a8ff;
--blue-600: #4d8ff0;
--blue-700: #356fd0;
--green: #23a873;
--orange: #f2a64a;
--red: #df6e6e;
--shadow: 0 22px 56px rgba(21, 35, 50, 0.1);
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(113, 171, 255, 0.22), transparent 26%),
linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
}
main {
max-width: 1900px;
margin: 0 auto;
padding: 28px;
}
.hero {
margin-bottom: 20px;
}
.hero h1 {
margin: 0 0 8px;
font-size: 34px;
}
.hero p {
margin: 0;
max-width: 920px;
color: var(--muted);
line-height: 1.6;
}
.board {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.meta-card {
background: rgba(255,255,255,0.82);
border: 1px solid var(--line);
border-radius: 26px;
padding: 18px;
box-shadow: var(--shadow);
}
.meta-card h2 {
margin: 0 0 6px;
font-size: 20px;
}
.meta-card p {
margin: 0 0 16px;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.phone {
width: 100%;
max-width: 430px;
aspect-ratio: 430 / 932;
margin: 0 auto;
background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
border: 1px solid var(--line-strong);
border-radius: 34px;
box-shadow: 0 26px 60px rgba(21, 35, 50, 0.14);
overflow: hidden;
position: relative;
}
.status {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px 10px;
font-size: 13px;
font-weight: 600;
color: var(--muted);
}
.screen {
display: flex;
flex-direction: column;
height: calc(100% - 40px);
padding: 0 16px 16px;
gap: 12px;
}
.screen.login {
justify-content: space-between;
padding-top: 10px;
}
.brand-box,
.card,
.sheet {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 24px;
box-shadow: 0 10px 26px rgba(21,35,50,0.06);
}
.brand-box {
padding: 24px;
background: linear-gradient(145deg, #eef6ff 0%, #ffffff 78%);
}
.logo {
width: 58px;
height: 58px;
border-radius: 18px;
display: grid;
place-items: center;
background: linear-gradient(145deg, var(--blue-500), var(--blue-600));
color: #fff;
font-weight: 800;
font-size: 24px;
margin-bottom: 16px;
}
.brand-box h3,
.card h3,
.sheet h3 {
margin: 0 0 6px;
font-size: 18px;
}
.sub {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.form {
display: grid;
gap: 12px;
}
.field {
padding: 14px 16px;
border-radius: 18px;
border: 1px solid var(--line);
background: #fff;
}
.field label {
display: block;
font-size: 11px;
color: var(--muted);
margin-bottom: 6px;
}
.field div {
font-size: 15px;
font-weight: 600;
}
.actions,
.chips,
.stats,
.tabs,
.kv {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
padding: 12px 14px;
font-size: 13px;
font-weight: 700;
border: 1px solid var(--line);
background: #fff;
color: var(--text);
}
.btn.primary {
background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
color: #fff;
border-color: rgba(77,143,240,0.18);
}
.btn.ghost {
background: var(--blue-50);
color: var(--blue-700);
border-color: rgba(77,143,240,0.16);
}
.chip,
.pill {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--blue-50);
color: var(--muted);
font-size: 11px;
line-height: 1;
}
.chip.active,
.pill.active {
background: var(--blue-100);
color: var(--blue-700);
border-color: rgba(77,143,240,0.16);
font-weight: 700;
}
.metric {
flex: 1 1 0;
min-width: 92px;
padding: 12px;
border-radius: 18px;
background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
border: 1px solid var(--line);
}
.metric small {
display: block;
color: var(--muted);
font-size: 11px;
margin-bottom: 6px;
}
.metric strong {
font-size: 18px;
}
.card {
padding: 16px;
display: grid;
gap: 10px;
}
.card.tight {
gap: 8px;
}
.stack {
display: grid;
gap: 10px;
}
.row {
display: flex;
gap: 10px;
align-items: start;
}
.avatar {
width: 42px;
height: 42px;
border-radius: 14px;
background: linear-gradient(145deg, #c9e0ff, #92bcff);
display: grid;
place-items: center;
color: #fff;
font-weight: 800;
flex: 0 0 auto;
}
.title {
font-size: 16px;
font-weight: 700;
line-height: 1.35;
}
.caption {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.progress {
height: 8px;
border-radius: 999px;
background: #edf3fa;
overflow: hidden;
}
.progress > span {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #8cc2ff, #4f8fee);
}
.list-item {
padding: 14px;
border-radius: 20px;
border: 1px solid var(--line);
background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
display: grid;
gap: 8px;
}
.bottom-nav {
margin-top: auto;
padding: 10px;
border-radius: 24px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.96);
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
box-shadow: 0 12px 30px rgba(21,35,50,0.08);
}
.nav-tab {
text-align: center;
padding: 10px 0;
border-radius: 18px;
font-size: 11px;
color: var(--muted);
font-weight: 700;
}
.nav-tab.active {
background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
color: #fff;
}
.section-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.sheet {
padding: 14px;
background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}
@media (max-width: 1480px) {
.board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
main { padding: 18px; }
.board { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<main>
<section class="hero">
<h1>StoryForge Mobile V4</h1>
<p>这版移动端不照搬 Web，而是保留高频动作。主逻辑仍然是“我的项目 -> 找对标 -> 跟踪日报 -> Agent -> 生产”，把重配置留在 Web，把快决策、快查看、快推进留给手机。</p>
</section>
<section class="board">
<article class="meta-card">
<h2>01 登录与工作区</h2>
<p>先进入工作区，再同步项目、Agent 和今日任务。</p>
<div class="phone">
<div class="status"><span>9:41</span><span>5G 100%</span></div>
<div class="screen login">
<div class="brand-box">
<div class="logo">SF</div>
<h3>StoryForge</h3>
<div class="sub">创作者移动工作台</div>
</div>
<div class="form">
<div class="field">
<label>工作区</label>
<div>星流内容组</div>
</div>
<div class="field">
<label>手机号</label>
<div style="color:#9aa9b8;font-weight:500;">请输入登录手机号</div>
</div>
<div class="field">
<label>密码</label>
<div>••••••••</div>
</div>
<div class="chips">
<span class="chip active">短信登录</span>
<span class="chip">Token</span>
<span class="chip">高级登录</span>
</div>
<div class="actions">
<span class="btn primary" style="width:100%;">进入工作台</span>
</div>
</div>
<div class="sub">登录后自动同步你的项目、Agent、生产队列和跟踪日报。</div>
</div>
</div>
</article>
<article class="meta-card">
<h2>02 总览</h2>
<p>先看今天该推进什么，再跳转到对应动作。</p>
<div class="phone">
<div class="status"><span>9:41</span><span>Wi-Fi 93%</span></div>
<div class="screen">
<div class="brand-box">
<div class="title">早上好，林闻</div>
<div class="caption">星流内容组 · 今天有 3 个动作值得先做</div>
<div class="stats" style="margin-top:12px;">
<div class="metric"><small>项目</small><strong>5</strong></div>
<div class="metric"><small>更新</small><strong>12</strong></div>
<div class="metric"><small>待调研</small><strong>4</strong></div>
</div>
</div>
<div class="card">
<div class="section-head">
<h3>今日重点</h3>
<span class="pill active">4 项</span>
</div>
<div class="list-item">
<div class="title">先为“副业增长实验室”建项目</div>
<div class="caption">先开项目，再决定要不要绑定账号。</div>
</div>
<div class="list-item">
<div class="title">补齐“教育切片助手”的平台和变现</div>
<div class="caption">补完后再跑首轮调研。</div>
</div>
</div>
<div class="split">
<div class="card tight">
<h3>高分提醒</h3>
<div class="caption">《副业失败的 3 个坑》适合转系列。</div>
</div>
<div class="card tight">
<h3>跟踪日报</h3>
<div class="caption">5 天内 7 条更新值得学。</div>
</div>
</div>
<div class="card">
<h3>本周进度</h3>
<div class="progress"><span style="width:68%;"></span></div>
<div class="caption">已完成 8 / 12 个内容动作</div>
<div class="chips">
<span class="chip active">同步账号</span>
<span class="chip">找对标</span>
<span class="chip">去生产</span>
<span class="chip">看复盘</span>
</div>
</div>
<div class="bottom-nav">
<div class="nav-tab active">总览</div>
<div class="nav-tab">对标</div>
<div class="nav-tab">Agent</div>
<div class="nav-tab">生产</div>
<div class="nav-tab">我的</div>
</div>
</div>
</div>
</article>
<article class="meta-card">
<h2>03 找对标</h2>
<p>在手机上做快速筛选、快速收藏、快速导入。</p>
<div class="phone">
<div class="status"><span>9:41</span><span>5G 91%</span></div>
<div class="screen">
<div class="card">
<div class="title">找对标</div>
<div class="caption">搜账号、主页链接、作品链接。</div>
<div class="field" style="padding:12px 14px;">
<div style="font-size:13px;color:#91a2b3;font-weight:500;">搜账号、主页链接、作品链接</div>
</div>
<div class="chips">
<span class="chip active">抖音</span>
<span class="chip">小红书</span>
<span class="chip">B站</span>
<span class="chip">YouTube</span>
</div>
<div class="chips">
<span class="chip active">涨粉</span>
<span class="chip">互动</span>
<span class="chip">商业价值</span>
</div>
</div>
<div class="list-item">
<div class="row">
<div class="avatar">阿</div>
<div>
<div class="title">阿元创业手记</div>
<div class="caption">抖音 · 创业成长 · AI 可学习度 93</div>
</div>
</div>
<div class="chips">
<span class="chip active">查看</span>
<span class="chip">导入</span>
<span class="chip">绑 Agent</span>
</div>
</div>
<div class="sheet">
<div class="section-head">
<h3>当前选中对标</h3>
<span class="pill active">阿元创业手记</span>
</div>
<div class="split">
<div class="metric"><small>可学习度</small><strong>93</strong></div>
<div class="metric"><small>商业价值</small><strong>88</strong></div>
</div>
<div class="stack" style="margin-top:10px;">
<div class="caption">画像：反常识切入、案例推进强、结尾动作明确。</div>
<div class="caption">高分内容：《副业失败的 3 个坑》适合提炼成系列。</div>
</div>
<div class="actions" style="margin-top:12px;">
<span class="btn ghost" style="flex:1 1 0;">导入项目</span>
<span class="btn primary" style="flex:1 1 0;">创建 Agent</span>
</div>
</div>
<div class="bottom-nav">
<div class="nav-tab">总览</div>
<div class="nav-tab active">对标</div>
<div class="nav-tab">Agent</div>
<div class="nav-tab">生产</div>
<div class="nav-tab">我的</div>
</div>
</div>
</div>
</article>
<article class="meta-card">
<h2>04 跟踪日报</h2>
<p>手机端优先看“上次打开后”的更新，不必再翻后台。</p>
<div class="phone">
<div class="status"><span>9:41</span><span>5G 89%</span></div>
<div class="screen">
<div class="card">
<div class="section-head">
<h3>跟踪日报</h3>
<span class="pill active">5 天汇总</span>
</div>
<div class="caption">自上次打开后，共有 5 个账号更新，Agent 标了 7 条借鉴点。</div>
<div class="chips">
<span class="chip active">刷新</span>
<span class="chip">看全部</span>
<span class="chip">新增跟踪</span>
</div>
</div>
<div class="list-item">
<div class="title">秋芝2046 · 新增 3 条作品</div>
<div class="caption">教育切片助手判断：其中 2 条适合转 30 秒口播。</div>
<div class="chips">
<span class="chip active">有借鉴点</span>
<span class="chip">入学习集</span>
</div>
</div>
<div class="list-item">
<div class="title">晨风老师 · 新增 2 条图文</div>
<div class="caption">更适合补小红书搜索承接模板。</div>
<div class="chips">
<span class="chip active">适合图文线</span>
<span class="chip">加 Playbook</span>
</div>
</div>
<div class="card tight">
<h3>今日建议</h3>
<div class="caption">先把 3 条高价值更新送入 Agent 学习，再决定是否转生产。</div>
</div>
<div class="bottom-nav">
<div class="nav-tab active">总览</div>
<div class="nav-tab">对标</div>
<div class="nav-tab">Agent</div>
<div class="nav-tab">生产</div>
<div class="nav-tab">我的</div>
</div>
</div>
</div>
</article>
<article class="meta-card">
<h2>05 Agent</h2>
<p>手机上更适合快速建 Agent、看学习源、看首轮调研结果。</p>
<div class="phone">
<div class="status"><span>9:41</span><span>Wi-Fi 90%</span></div>
<div class="screen">
<div class="card">
<div class="section-head">
<h3>Agent</h3>
<span class="pill active">待调研 4</span>
</div>
<div class="caption">先定项目、平台、变现和主模型，再跑首轮调研。</div>
<div class="chips">
<span class="chip active">抖音</span>
<span class="chip active">小红书</span>
<span class="chip">视频号</span>
</div>
<div class="chips">
<span class="chip active">知识付费</span>
<span class="chip">广告合作</span>
<span class="chip">私域咨询</span>
</div>
<div class="actions">
<span class="btn ghost" style="flex:1 1 0;">跑调研</span>
<span class="btn primary" style="flex:1 1 0;">创建 Agent</span>
</div>
</div>
<div class="list-item">
<div class="title">选题助手 · 教育切片</div>
<div class="caption">学习源：高信任图文 + 强观点短视频</div>
<div class="chips">
<span class="chip active">主模型：通义</span>
<span class="chip">已调研</span>
<span class="chip">最近产出 6 条</span>
</div>
</div>
<div class="list-item">
<div class="title">导入分析 Agent</div>
<div class="caption">负责解析主页、单条作品和本地视频，自动给出绑定建议。</div>
<div class="chips">
<span class="chip active">自动归类</span>
<span class="chip">支持复核</span>
</div>
</div>
<div class="bottom-nav">
<div class="nav-tab">总览</div>
<div class="nav-tab">对标</div>
<div class="nav-tab active">Agent</div>
<div class="nav-tab">生产</div>
<div class="nav-tab">我的</div>
</div>
</div>
</div>
</article>
<article class="meta-card">
<h2>06 生产中心</h2>
<p>移动端重点看队列、看卡点、看成片，不做重配置。</p>
<div class="phone">
<div class="status"><span>9:41</span><span>5G 87%</span></div>
<div class="screen">
<div class="card">
<div class="section-head">
<h3>生产中心</h3>
<span class="pill active">在产 6</span>
</div>
<div class="chips">
<span class="chip active">文案</span>
<span class="chip">封面</span>
<span class="chip">实拍</span>
<span class="chip">AI 视频</span>
</div>
</div>
<div class="list-item">
<div class="title">《副业避坑》封面生成</div>
<div class="caption">阿里 / 火山 / 通用图像 · 当前卡在选图</div>
<div class="progress"><span style="width:72%;"></span></div>
<div class="chips">
<span class="chip active">补封面</span>
<span class="chip">看样片</span>
</div>
</div>
<div class="list-item">
<div class="title">作品与成片</div>
<div class="caption">从生产结果反看当前最值得继续推进的内容。</div>
<div class="chips">
<span class="chip active">高分</span>
<span class="chip">最新</span>
<span class="chip">看成片</span>
</div>
</div>
<div class="sheet">
<h3>当前选中内容</h3>
<div class="caption">《副业失败的 3 个真实坑》适合继续生成脚本，封面先做 3 个模型对比。</div>
<div class="actions" style="margin-top:12px;">
<span class="btn ghost" style="flex:1 1 0;">补封面</span>
<span class="btn primary" style="flex:1 1 0;">继续做</span>
</div>
</div>
<div class="bottom-nav">
<div class="nav-tab">总览</div>
<div class="nav-tab">对标</div>
<div class="nav-tab">Agent</div>
<div class="nav-tab active">生产</div>
<div class="nav-tab">我的</div>
</div>
</div>
</div>
</article>
<article class="meta-card">
<h2>07 我的</h2>
<p>工作区、自动流程、额度和通知都放在这里。</p>
<div class="phone">
<div class="status"><span>9:41</span><span>5G 94%</span></div>
<div class="screen">
<div class="brand-box">
<div class="title">我的</div>
<div class="caption">星流内容组 · 林闻 · 杭州工作区</div>
<div class="chips" style="margin-top:12px;">
<span class="chip active">流程 7/8</span>
<span class="chip">额度正常</span>
<span class="chip">2 台设备在线</span>
</div>
</div>
<div class="list-item">
<div class="title">自动流程</div>
<div class="caption">账号同步、跟踪日报、失败补跑、异常提醒。</div>
</div>
<div class="list-item">
<div class="title">额度</div>
<div class="caption">文案 / 封面 / 视频三类额度分开看。</div>
</div>
<div class="list-item">
<div class="title">通知与同步</div>
<div class="caption">日报提醒、任务结果、设备同步都在这里。</div>
</div>
<div class="actions">
<span class="btn ghost" style="flex:1 1 0;">看额度</span>
<span class="btn primary" style="flex:1 1 0;">看流程</span>
</div>
<div class="bottom-nav">
<div class="nav-tab">总览</div>
<div class="nav-tab">对标</div>
<div class="nav-tab">Agent</div>
<div class="nav-tab">生产</div>
<div class="nav-tab active">我的</div>
</div>
</div>
</div>
</article>
</section>
</main>
</body>
</html>