pages/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI落地场景选题清单 · 开发工程师及AI产品教练助理</title>
<style>
:root{--green:#16a34a;--yellow:#d97706;--red:#dc2626;--bg:#0f172a;--card:#1e293b;--text:#e2e8f0;--muted:#94a3b8}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);padding:24px;line-height:1.6}
.wrap{max-width:1200px;margin:0 auto}
h1{font-size:22px;margin-bottom:4px}
.sub{color:var(--muted);font-size:13px;margin-bottom:20px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.filters select,.filters button{background:var(--card);color:var(--text);border:1px solid #334155;border-radius:8px;padding:8px 12px;font-size:13px}
.filters button{cursor:pointer}
.filters button:hover{border-color:#64748b}
.pilot{background:linear-gradient(135deg,#14532d,#166534);border:1px solid var(--green);border-radius:12px;padding:14px 18px;margin-bottom:18px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.card{background:var(--card);border-radius:12px;padding:16px;border:1px solid #334155}
.card.top{border-color:var(--green)}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.b{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600}
.b.imp-h{background:#7f1d1d;color:#fecaca}.b.imp-m{background:#78350f;color:#fde68a}.b.imp-l{background:#334155;color:#cbd5e1}
.b.g{background:#14532d;color:#86efac}.b.y{background:#713f12;color:#fde68a}.b.r{background:#7f1d1d;color:#fca5a5}
.b.src{background:#1e3a5f;color:#93c5fd}
.card h3{font-size:15px;margin-bottom:4px}
.brief{font-size:13px;color:var(--muted);margin-bottom:8px}
.fields{font-size:12.5px;display:grid;gap:3px}
.fields b{color:#7dd3fc;font-weight:600}
.assess{font-size:12px;color:var(--muted);margin-top:8px;border-top:1px dashed #334155;padding-top:8px}
.hyp{color:#fbbf24}
.src-tag{display:inline-block;font-size:11px;color:#93c5fd;margin-bottom:6px}
footer{margin-top:26px;font-size:12px;color:var(--muted);border-top:1px solid #334155;padding-top:14px}
.hidden{display:none}
@media print{body{background:#fff;color:#111}.card{background:#f8fafc;border-color:#cbd5e1}}
</style>
</head>
<body>
<div class="wrap">
<h1>AI 落地场景选题清单</h1>
<div class="sub">岗位：开发工程师 & AI 产品教练助理 ｜ 生成时间：2026-09-12 ｜ 排序：按重要程度（高→中→低），同优先级内绿色易落地优先</div>
<div class="pilot">🏅 <b>推荐试点：</b><span id="pilot-name"></span> —— 理由见卡片评估说明。试点通过后按「迭代方向」滚动扩展。</div>
<div class="filters">
  <label>重要程度：<select id="f-imp"><option value="">全部</option><option value="高">高</option><option value="中">中</option><option value="低">低</option></select></label>
  <label>落地难易：<select id="f-diff"><option value="">全部</option><option value="✅ 易落地">✅ 易落地</option><option value="⚠️ 需拆解">⚠️ 需拆解</option><option value="❌ 暂缓">❌ 暂缓</option></select></label>
  <label>来源：<select id="f-src"><option value="">全部</option><option value="企业提出">企业提出</option><option value="教练拓展">教练拓展</option></select></label>
  <button onclick="resetF()">重置</button>
  <span id="count" style="align-self:center;color:var(--muted);font-size:13px"></span>
</div>
<div class="grid" id="grid"></div>
<footer>
<b>优化说明</b><br>
① <b>推荐试点理由</b>：场景1（提示词流程库结构化）直击你每天最耗时的环节，输入输出全为 Markdown 纯文本、6 维度全绿、无敏感数据——一下午即可完成「整理→入库→agent 调用」闭环验证；场景2（学员教学卡自动生成）复用场景1的产物，边际成本近零。<br>
② <b>推理假设标注</b>：企业仅提供了 1 项核心工作，卡片中标 <span class="hyp">【推理假设】</span> 的字段为行业认知拓展，可在试点校验后修正。<br>
③ <b>后续迭代方向</b>：试点1稳定后 → 将技能规则注入 agent 的流程也模板化（场景4）→ 引入质量回归脚本（场景5）→ 评估 RAG 化的教练问答（场景6，黄色需先解决资料脱敏）。<br>
④ 已按约束排除 3D 建模、视频生成、图片生成类场景；全部为文本/信息/数据自动化。
</footer>
</div>
<script>
const S=[
{name:"研发项目提示词流程库结构化",src:"企业提出",imp:"高",diff:"✅",brief:"把每日整理的「研发项目使用流程→提示词」从零散笔记升级为结构化 Markdown 流程库（统一 frontmatter：项目名/目标/前置条件/提示词模板/验收标准），agent 可直接检索调用。",input:"每日笔记、聊天记录摘录（🟢 Markdown/TXT 可直接读取）",output:"结构化提示词流程库（Markdown，含索引）",steps:"4 步：收集→提炼→套模板→入库",decision:"规则清晰：流程要素完整性可量化校验",sens:"内部非敏感",time:"60-90 分钟/天",assess:"优势：输入输出全绿、直击最高频痛点、当天可验证。风险：个人笔记习惯需固定模板。【推理假设：笔记目前以 Markdown 为主，可校验】"},
{name:"学员教学卡自动生成",src:"教练拓展",imp:"高",diff:"✅",brief:"从流程库自动生成每个项目的「学员教学卡」：目标、分步操作、提示词、常见错误、验收清单，第二天直接发学员。",input:"场景1产出的流程库（🟢 Markdown）",output:"教学卡（Markdown/简单排版网页）",steps:"3 步：选取→套卡模板→输出",decision:"规则清晰：教学卡字段固定",sens:"内部非敏感",time:"30-40 分钟/项",assess:"优势：复用场景1产物、链路最短。【推理假设：教学形式为文字卡片为主，可校验】"},
{name:"agent 技能/规则安装验收助手",src:"教练拓展",imp:"高",diff:"✅",brief:"按产品对应规则清单，自动生成 agent 环境检查脚本与验收报告（技能是否装齐、规则是否就位、冒烟测试结果），学员自助跑，教练只看报告。",input:"产品规则清单（🟢 Markdown/CSV）",output:"验收报告（结构化 JSON/表格）",steps:"5 步：读清单→生成检查项→执行→汇总→出报告",decision:"规则清晰：存在性+冒烟结果判定",sens:"内部非敏感",time:"20-30 分钟/学员/次",assess:"优势：把重复答疑变自助，收益随学员数线性放大。"},
{name:"课程/教学素材周报汇总",src:"教练拓展",imp:"中",diff:"✅",brief:"每周自动汇总：本周新增流程条目、学员完成率、卡点高频问题，输出周报草稿供教练审阅。",input:"流程库变更记录、教学记录（🟢 Markdown/CSV）",output:"周报草稿（结构化表格）",steps:"5 步：聚合→统计→归类卡点→成稿→人工审",decision:"统计规则清晰，卡点归类需少量人工校准",sens:"内部非敏感",time:"40-60 分钟/周",assess:"优势：低风险稳定收益。"},
{name:"提示词质量回归测试",src:"教练拓展",imp:"中",diff:"⚠️",brief:"为流程库中每条提示词建立标准测试用例，改动后自动回归比对输出，防止改坏。",input:"提示词+测试用例（🟢 Markdown/JSON）",output:"回归报告（通过/差异）",steps:"6-8 步：建用例→跑批→比对→标注差异→出报告",decision:"比对规则可量化；「输出好坏」需人工校准阈值",sens:"内部非敏感",time:"首次建设 2-3 小时，日常 15 分钟/次",assess:"黄色原因：用例建设前置投入大，建议场景1稳定后启动。"},
{name:"教练问答知识库（RAG 检索）",src:"教练拓展",imp:"中",diff:"⚠️",brief:"把流程库+历史答疑建成可检索问答库，学员自助查询，教练只答新问题。",input:"流程库、历史答疑记录（🟢/🟡 混合）",output:"检索式问答（网页/机器人）",steps:"8-10 步：清洗→切片→向量化→挂检索→测试→上线",decision:"检索可自动；答案质量需抽检",sens:"🟡 需确认：答疑记录可能含学员信息，需脱敏",time:"建设半天，日常显著减少重复答疑",assess:"黄色原因：链路较长+敏感级需脱敏确认，列为二期。"}
];
const diffName={"✅":"✅ 易落地","⚠️":"⚠️ 需拆解","❌":"❌ 暂缓"};
function cls(i){return i==="高"?"imp-h":i==="中"?"imp-m":"imp-l"}
function dcls(d){return d.startsWith("✅")?"g":d.startsWith("⚠️")?"y":"r"}
const grid=document.getElementById('grid');
S.forEach((s,i)=>{
  const el=document.createElement('div');el.className='card'+(i===0?' top':'');el.dataset.imp=s.imp;el.dataset.diff=diffName[s.diff];el.dataset.src=s.src;
  el.innerHTML=`<span class="src-tag">来源：${s.src}</span><h3>${i===0?'🏅 ':''}${i+1}. ${s.name}</h3>
  <div class="brief">${s.brief}</div>
  <div class="badges">
    <span class="b ${cls(s.imp)}">重要度 ${s.imp}</span>
    <span class="b ${dcls(s.diff)}">${diffName[s.diff]}</span>
    <span class="b src">${s.steps.split('：')[0]}</span>
  </div>
  <div class="fields">
    <div><b>输入材料：</b>${s.input}</div>
    <div><b>输出成果：</b>${s.output}</div>
    <div><b>步骤数量：</b>${s.steps.split('：')[1]||s.steps}（${s.steps.split('：')[0]}）</div>
    <div><b>决策逻辑：</b>${s.decision}</div>
    <div><b>敏感等级：</b>${s.sens}</div>
    <div><b>人工耗时：</b>${s.time}</div>
  </div>
  <div class="assess">${s.assess}</div>`;
  grid.appendChild(el);
});
document.getElementById('pilot-name').textContent=S[0].name;
function apply(){
  const fi=document.getElementById('f-imp').value,fd=document.getElementById('f-diff').value,fs=document.getElementById('f-src').value;let n=0;
  document.querySelectorAll('.card').forEach(c=>{
    const ok=(!fi||c.dataset.imp===fi)&&(!fd||c.dataset.diff===fd)&&(!fs||c.dataset.src===fs);
    c.classList.toggle('hidden',!ok);if(ok)n++;
  });
  document.getElementById('count').textContent=`显示 ${n}/${S.length} 个场景`;
}
function resetF(){['f-imp','f-diff','f-src'].forEach(id=>document.getElementById(id).value='');apply()}
['f-imp','f-diff','f-src'].forEach(id=>document.getElementById(id).addEventListener('change',apply));apply();
</script>
</body>
</html>