demo: 绿云健康AI诊断dry-run演示

demo/绿云健康-AI诊断-20260830.html

@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>绿云健康 · AI 就绪度诊断</title>
+<style>
+/* dry-run demo: 内嵌极简版 design-system-light tokens */
+:root {
+  --primary:#30EA03; --primary-dark:#1a8a00; --primary-subtle:rgba(48,234,3,.06);
+  --bg-0:#FFF; --bg-1:#F7F8F9; --bg-2:#EEF0F2;
+  --text-1:#000; --text-2:#444; --text-3:#888;
+  --border:rgba(0,0,0,.08); --radius-md:8px; --radius-lg:14px;
+  --qw1-rose:#d94450; --qw2-teal:#0d9488; --qw3-green:#16a34a;
+  --df-blue:#1a6dd4; --amber:#e8940a;
+  --font-body:'Noto Sans SC','Inter','PingFang SC',sans-serif;
+}
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:var(--font-body);background:var(--bg-0);color:var(--text-1);line-height:1.6}
+.bar{position:sticky;top:0;background:var(--bg-0);border-bottom:1px solid var(--border);padding:0 32px;height:44px;display:flex;align-items:center;gap:12px;font-size:.8rem;z-index:100}
+.bar-ch{color:var(--text-3);cursor:pointer;padding:4px 8px;border-radius:4px}.bar-ch:hover,.bar-ch.on{color:var(--primary-dark);background:var(--primary-subtle)}
+.bar-sep{color:var(--border)}
+.cover{min-height:100vh;background:linear-gradient(135deg,var(--bg-1),var(--bg-0));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 40px}
+.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-dark);margin-bottom:16px}
+.hero{font-size:clamp(2.2rem,5vw,4rem);font-weight:900;line-height:1.1;margin-bottom:20px}
+.sub{font-size:1rem;color:var(--text-2);max-width:560px;margin-bottom:40px}
+.stats{display:flex;gap:40px;justify-content:center}
+.stat .n{font-size:2.2rem;font-weight:900;color:var(--primary-dark)}
+.stat .l{font-size:.8rem;color:var(--text-3);margin-top:4px}
+.section{padding:72px 40px;border-top:1px solid var(--border)}
+.inner{max-width:1100px;margin:0 auto}
+.sec-ey{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-dark);margin-bottom:12px}
+.sec-h{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;margin-bottom:12px}
+.sec-sub{color:var(--text-2);margin-bottom:36px;max-width:680px}
+.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
+.card{background:var(--bg-1);border-radius:var(--radius-md);padding:24px;border:1px solid var(--border)}
+.card .k{font-weight:700;margin-bottom:8px}.card .v{font-size:.9rem;color:var(--text-2)}
+.tag{display:inline-block;font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:4px;margin-bottom:8px}
+.t-risk{background:rgba(217,68,80,.1);color:var(--qw1-rose)}
+.t-opp{background:rgba(26,109,212,.1);color:var(--df-blue)}
+.t-ok{background:rgba(22,163,74,.1);color:var(--qw3-green)}
+.t-m1{background:rgba(13,148,136,.1);color:var(--qw2-teal)}
+.quote{background:var(--bg-1);border-left:3px solid var(--primary-dark);padding:12px 16px;border-radius:0 var(--radius-md) var(--radius-md) 0;font-style:italic;color:var(--text-2);margin:16px 0;font-size:.9rem}
+.quote .src{font-style:normal;font-size:.8rem;color:var(--text-3);margin-top:6px}
+.ch-div{background:var(--text-1);color:#fff;padding:60px 40px;text-align:center}
+.ch-div .n{font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);margin-bottom:16px}
+.ch-div h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:900}
+</style>
+</head>
+<body>
+
+<div class="bar">
+  <span class="bar-ch on">封面</span><span class="bar-sep">|</span>
+  <span class="bar-ch">现状诊断</span><span class="bar-sep">|</span>
+  <span class="bar-ch">价值地图</span><span class="bar-sep">|</span>
+  <span class="bar-ch">行动建议</span>
+</div>
+
+<!-- 封面 -->
+<div class="cover">
+  <div class="eyebrow">AI 落地诊断 · Fmode 团队 · 2026-08</div>
+  <h1 class="hero">绿云健康<br>AI 就绪度诊断<br>与价值路径规划</h1>
+  <p class="sub">基于 5 轮深度访谈与业务数据分析，识别 AI 落地的最高价值入口（dry-run demo）</p>
+  <div class="stats">
+    <div class="stat"><div class="n">5</div><div class="l">深度访谈</div></div>
+    <div class="stat"><div class="n">3</div><div class="l">P0 优先场景</div></div>
+    <div class="stat"><div class="n">90天</div><div class="l">陪跑计划</div></div>
+  </div>
+</div>
+
+<!-- 诊断 -->
+<div class="ch-div">
+  <div class="n">01</div><h2>现状诊断</h2>
+</div>
+
+<div class="section">
+  <div class="inner">
+    <div class="sec-ey">Diagnosis · 基于访谈洞察</div>
+    <h2 class="sec-h">核心卡点与机会</h2>
+    <p class="sec-sub">每个判断均有访谈原话支撑。所有引用已获受访者知情同意。</p>
+    <div class="grid">
+      <div class="card">
+        <span class="tag t-risk">卡点 P0</span>
+        <div class="k">内容生产效率低</div>
+        <div class="v">
+          <div class="quote">「一篇推文从选题到发布，需要 3-4 天，卡在每次改稿」<span class="src">—— 内容总监，访谈 2026-08-15</span></div>
+          每月产出 40 篇，人工成本约 12 万。AI 辅助可压缩至 1.5 天/篇，节省 60%。
+        </div>
+      </div>
+      <div class="card">
+        <span class="tag t-risk">卡点 P1</span>
+        <div class="k">客服知识库碎片化</div>
+        <div class="v">
+          <div class="quote">「新人培训 2 周还是答不对，客户投诉率比老员工高 3 倍」<span class="src">—— 客服主管，访谈 2026-08-16</span></div>
+          知识散在微信群、钉钉文档、本地 Excel 三处，无法 RAG 检索。
+        </div>
+      </div>
+      <div class="card">
+        <span class="tag t-opp">机会 P0</span>
+        <div class="k">内容工厂 SLP 可快速验证</div>
+        <div class="v">选题→大纲→初稿→审核四步可 SLP 化，每步输入/规则/输出均可描述。</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 价值地图 -->
+<div class="ch-div">
+  <div class="n">02</div><h2>价值地图</h2>
+</div>
+
+<div class="section">
+  <div class="inner">
+    <div class="sec-ey">Value Map · 优先级矩阵</div>
+    <h2 class="sec-h">90 天价值路径</h2>
+    <p class="sec-sub">M1 打底 → M2 规模化 → M3 系统化。每个里程碑有明确成功标准。</p>
+    <div class="grid">
+      <div class="card">
+        <span class="tag t-m1">M1 · 第 1 月</span>
+        <div class="k">打底：内容工厂 MVP</div>
+        <div class="v">
+          目标：1 个 AI 内容工作流在生产运行<br>
+          关键任务：选定 3 个高频内容场景 + 跑通 SLP<br>
+          成功标准：单篇制作时间 ≤ 1.5 天，编辑认可率 ≥ 70%
+        </div>
+      </div>
+      <div class="card">
+        <span class="tag t-opp">M2 · 第 2 月</span>
+        <div class="k">规模化：客服知识库上线</div>
+        <div class="v">
+          目标：3 个场景稳定运行，客服可独立操作<br>
+          关键任务：知识库统一 + RAG 接入 + 信度测试<br>
+          成功标准：新人答题正确率 ≥ 85%（vs 当前 60%）
+        </div>
+      </div>
+      <div class="card">
+        <span class="tag t-ok">M3 · 第 3 月</span>
+        <div class="k">系统化：ROI 核算与下一轮</div>
+        <div class="v">
+          目标：完整评估报告 + 下阶段规划<br>
+          关键任务：成本核算 + 规则库版本归档<br>
+          成功标准：交付 AI 能力地图 v2 + 下步路线图
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 行动建议 -->
+<div class="ch-div">
+  <div class="n">03</div><h2>行动建议</h2>
+</div>
+
+<div class="section">
+  <div class="inner">
+    <div class="sec-ey">Next Steps · 本周就能启动</div>
+    <h2 class="sec-h">最小启动动作（三件事）</h2>
+    <p class="sec-sub">从最小成本开始验证，建立信心，然后规模化。</p>
+    <div class="grid">
+      <div class="card">
+        <span class="tag t-m1">第一步</span>
+        <div class="k">确定 P0 场景：内容选题工作流</div>
+        <div class="v">负责人：内容总监<br>时间：本周五前<br>产物：1 个 SLP 场景描述文档（输入/规则/输出）</div>
+      </div>
+      <div class="card">
+        <span class="tag t-m1">第二步</span>
+        <div class="k">搭建 FmodeCode 工作环境</div>
+        <div class="v">负责人：IT + 内容各 1 人<br>时间：下周一<br>产物：可运行的 AI 选题助手 MVP</div>
+      </div>
+      <div class="card">
+        <span class="tag t-m1">第三步</span>
+        <div class="k">第一轮信度测试</div>
+        <div class="v">负责人：内容总监 + 顾问团队<br>时间：下周三<br>产物：10 篇样本测试报告（对比人工结果）</div>
+      </div>
+    </div>
+    <p style="margin-top:32px;font-size:.85rem;color:var(--text-3)">
+      本方案为 dry-run demo，客户信息为虚构。实际提案需基于真实访谈数据。<br>
+      产出工具：FmodeCode（执行终端）/ FmodeAgent（生命框架）
+    </p>
+  </div>
+</div>
+
+</body>
+</html>