你的员工，正在被 AI 替代（别慌，咱们做个预警网页）
你可能也刷到过那种链接：点进去就是一张网页，写着“哪些岗位危险”“为什么危险”“怎么自救”。
重点不在“吓人”，重点在把模糊的焦虑变成可执行的清单。
这篇教你做一张可分享的网页：
- AI 自己分析岗位
- AI 自己写网页内容（表格、结论、建议）
- 你把网页一发，团队就能围着它讨论
别再在群里吵“AI 会不会替代我”。拿结果说话。😄
你要做出来的成品长什么样
一个简单网页，包含这些块就够了：
- 岗位替代风险榜（高/中/低 + 分数）
- 风险理由（被 AI 吃掉的任务到底是什么）
- 替代路径（AI 先替代哪一段工作流）
- 自救建议（你该学什么、怎么调整工作方式）
- 数据来源说明（你让 AI 怎么评估的，透明一点更好）
页面越简单越好。别搞花里胡哨，能让人 30 秒看懂才是王道。
准备材料：你只要提供“岗位清单”
开个表格（或直接一段文本）写这些字段：
- 岗位名称（例：客服、运营、出纳、招聘专员）
- 该岗位每天做的 5～10 个任务
- 任务里用到的工具（Excel/CRM/邮件/电话/工单系统等）
- 输出物（日报、合同、海报、报表、脚本等）
你给得越具体，AI 的结论越靠谱。
**懒得写任务？**也行，把 JD 丢给 AI，让它拆任务。
关键：用一套“可解释”的评估维度，不然结论容易扯
别让 AI 只给“高/中/低”。你要它按维度打分：
- 流程结构化程度：流程越固定，越容易自动化
- 输入输出可文本化：输入是文本/图片/表格的，危险系数更高
- 容错空间：错一点也没事的岗位，更容易被替代
- 对人际信任的依赖：强信任、强关系的岗位更抗打
- 对现场/物理世界的依赖：要跑现场、要动手的更难被吃掉
- 合规风险：出错就罚款/坐牢的，替代速度会慢一点（流程会更谨慎）
你会发现很多争论其实没意义。
大家说“设计会不会被替代”，拆到任务层就清楚：
- 产出 20 张信息流素材 → 危险
- 跟产品吵需求、把品牌调性压住 → 没那么容易
一把梭：把岗位丢给 AI，让它输出“网页用的数据”
下面这段提示词，你直接复制就能用（Kimi/ChatGPT/Claude 都行）。
你是企业岗位分析顾问。请按“任务被自动化的概率”评估以下岗位。
评估要求：
- 输出 JSON 数组，字段固定为：role, risk_score(0-100), risk_level(高/中/低), automatable_tasks(数组), hard_to_replace_tasks(数组), why(3条要点), ai_workflow(分步骤), upskill(3条建议)
- risk_score 必须有依据，写在 why 里
- 不要空话，不要泛泛而谈，建议要能照做
岗位与任务如下： （把你的岗位清单粘贴在这里）
小技巧：让结果更像“可落地的咨询”
你可以再加两句：
- “请用更狠一点的语言，别太温柔”
- “把替代路径写成 30 天内可能发生的变化”
很多模型默认会端水。
你不提醒，它就给你一堆“保持学习”这种废话。
让 AI 把网页也写出来：一份可直接跑的 HTML
接下来你要 AI 做两件事：
- 把刚才的 JSON 变成表格 + 卡片
- 生成一个单文件网页（HTML 内联 CSS/JS）
提示词照抄：
你是一名前端工程师。基于我提供的岗位风险 JSON，生成一个单文件网页（index.html）。
要求：
- 页面包含：标题、概览（高/中/低数量）、风险排行榜表格、每个岗位详情卡片
- 表格支持按 risk_score 排序
- 每个岗位卡片显示：可自动化任务、难替代任务、替代路径、提升建议
- 样式简洁耐看，适合公司内部分享
- 不依赖任何外部库（纯原生 JS）
这是 JSON： （把上一步 AI 输出的 JSON 粘贴进去）
AI 会吐给你一份 index.html。
你把它保存到本地，双击打开就能看。
懒人模板：你也可以直接用这一份（可跑）
如果你不想等模型写前端，这里给你一个极简模板。
把你的 JSON 粘到 DATA 里就行。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>岗位被 AI 替代预警</title>
<style>
body{font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial; background:#0b1020; color:#e8ecff; margin:0;}
.wrap{max-width:1100px; margin:0 auto; padding:28px 16px 60px;}
h1{font-size:26px; margin:0 0 10px;}
.sub{opacity:.8; margin:0 0 18px; line-height:1.6;}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0 22px;}
.box{background:#121a33; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px;}
.num{font-size:22px; font-weight:700;}
.tag{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; margin-left:8px;}
.hi{background:rgba(255,72,72,.18); color:#ffb1b1; border:1px solid rgba(255,72,72,.25)}
.mid{background:rgba(255,196,66,.16); color:#ffe3a6; border:1px solid rgba(255,196,66,.25)}
.lo{background:rgba(111,231,255,.14); color:#b9f4ff; border:1px solid rgba(111,231,255,.22)}
table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:14px; background:#121a33; border:1px solid rgba(255,255,255,.08)}
th,td{padding:12px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,.06); font-size:14px;}
th{cursor:pointer; user-select:none; opacity:.9;}
tr:hover td{background:rgba(255,255,255,.03)}
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:14px;}
.card h3{margin:0 0 8px; font-size:16px;}
ul{margin:8px 0 0 18px; padding:0;}
.muted{opacity:.75;}
@media (max-width:900px){.grid{grid-template-columns:1fr} .cards{grid-template-columns:1fr}}
</style>
</head>
<body>
<div class="wrap">
<h1>岗位被 AI 替代预警</h1>
<p class="sub">这页用于内部讨论：哪些任务会被自动化、会怎么被替代、个人该怎么调整。别当判决书，当路线图。</p>
<div class="grid">
<div class="box"><div class="muted">高风险岗位</div><div class="num" id="hiCnt">-</div></div>
<div class="box"><div class="muted">中风险岗位</div><div class="num" id="midCnt">-</div></div>
<div class="box"><div class="muted">低风险岗位</div><div class="num" id="loCnt">-</div></div>
</div>
<div class="box">
<div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px;">
<div style="font-weight:700;">风险排行榜</div>
<div class="muted" style="font-size:13px;">点表头可排序</div>
</div>
<table id="tbl">
<thead>
<tr>
<th data-k="role">岗位</th>
<th data-k="risk_score">风险分</th>
<th data-k="risk_level">等级</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="cards" id="cards"></div>
<p class="muted" style="margin-top:18px; font-size:13px; line-height:1.6;">
说明：风险分用于排序，结论依赖你提供的任务信息。任务写得越细，越接近真实。
</p>
</div>
<script>
const DATA = [
{"role":"客服","risk_score":78,"risk_level":"高","automatable_tasks":["FAQ 回复","工单分类","订单查询"],"hard_to_replace_tasks":["高情绪用户安抚","复杂纠纷协调"],"why":["输入输出高度文本化","流程固定","容错要求相对可控"],"ai_workflow":["接入知识库","机器人处理常见问题","人工只接手升级单"],"upskill":["学会搭建知识库与质检规则","转向投诉升级处理与留存","掌握自动化工单工具"]},
{"role":"招聘专员","risk_score":62,"risk_level":"中","automatable_tasks":["简历初筛","邀约话术","面试排期"],"hard_to_replace_tasks":["关键岗位说服","用人经理需求澄清"],"why":["筛选可规则化","沟通可脚本化","最终决策仍依赖组织信任"],"ai_workflow":["AI 解析 JD 与简历","生成候选人匹配度","自动邀约与排期"],"upskill":["强化岗位画像与胜任力模型","做招聘漏斗数据分析","提升关键岗位谈判能力"]}
];
let state = {sortKey:'risk_score', asc:false};
const levelClass = (lv)=> lv==='高'?'hi':(lv==='中'?'mid':'lo');
function render(){
const hi = DATA.filter(d=>d.risk_level==='高').length;
const mid = DATA.filter(d=>d.risk_level==='中').length;
const lo = DATA.filter(d=>d.risk_level==='低').length;
hiCnt.textContent = hi;
midCnt.textContent = mid;
loCnt.textContent = lo;
const arr = [...DATA].sort((a,b)=>{
const k = state.sortKey;
const va = a[k], vb = b[k];
if(typeof va === 'number') return state.asc ? va-vb : vb-va;
return state.asc ? String(va).localeCompare(String(vb)) : String(vb).localeCompare(String(va));
});
const tbody = document.querySelector('#tbl tbody');
tbody.innerHTML = arr.map(d=>`
<tr>
<td>${d.role}</td>
<td>${d.risk_score}</td>
<td><span class="tag ${levelClass(d.risk_level)}">${d.risk_level}</span></td>
</tr>
`).join('');
cards.innerHTML = arr.map(d=>`
<div class="box card">
<h3>${d.role}
<span class="tag ${levelClass(d.risk_level)}">${d.risk_level} · ${d.risk_score}</span>
</h3>
<div class="muted" style="font-size:13px; line-height:1.7;">${(d.why||[]).map(x=>`• ${x}`).join('<br/>')}</div>
<div style="margin-top:10px; display:grid; grid-template-columns:1fr; gap:10px;">
<div>
<div style="font-weight:700;">容易被吃掉的任务</div>
<ul>${(d.automatable_tasks||[]).map(x=>`<li>${x}</li>`).join('')}</ul>
</div>
<div>
<div style="font-weight:700;">短期不容易替代的任务</div>
<ul>${(d.hard_to_replace_tasks||[]).map(x=>`<li>${x}</li>`).join('')}</ul>
</div>
<div>
<div style="font-weight:700;">替代路径</div>
<ul>${(d.ai_workflow||[]).map(x=>`<li>${x}</li>`).join('')}</ul>
</div>
<div>
<div style="font-weight:700;">个人升级建议</div>
<ul>${(d.upskill||[]).map(x=>`<li>${x}</li>`).join('')}</ul>
</div>
</div>
</div>
`).join('');
}
document.querySelectorAll('th[data-k]').forEach(th=>{
th.addEventListener('click', ()=>{
const k = th.dataset.k;
if(state.sortKey === k) state.asc = !state.asc;
else { state.sortKey = k; state.asc = false; }
render();
});
});
render();
</script>
</body>
</html>
把示例数据换成你自己的，立刻变成公司定制版。
发布成一个可分享链接：两条路，选你顺手的
方案 A：GitHub Pages（免费、稳定）
- 新建一个仓库，比如
ai-risk-board - 把
index.html上传到仓库根目录 - 仓库设置里打开 Pages，选择从
main分支发布 - 等几十秒，你会拿到一个网址
适合发给团队、发到群里。
方案 B：Vercel（更省心）
- Vercel 新建项目
- 直接导入 GitHub 仓库
- 自动给你一个域名
适合你以后要加更多页面（比如岗位筛选、搜索）。
你问“哪些员工最先被替代？”——用这套判断更靠谱
别用“岗位名字”判断，用“任务特征”判断。
更容易被替代的任务，通常长这样：
- 复制粘贴多、改格式多
- 每天都在处理相似问题
- 输入输出都在电脑里（文本/表格/图片）
- 你做得快不快，差别不大
- 允许 1% 的错误率（能靠复核兜住）
更抗替代的任务，通常长这样：
- 需要建立信任（谈判、管理、关键客户）
- 需要跨部门扯皮协调（人类擅长“搞定人”）
- 责任边界很硬（高合规、高风险决策）
- 强现场感（跑工厂、盯施工、处理突发）
你可以把这段直接贴进网页当“评估说明”，少挨喷。
让网页更有冲击力：加一个“30 天替代路径”模块
大家最爱看的不是“结论”，是“会怎么发生”。
你让 AI 这么写：
- 第 1 周：AI 帮你起草、汇总、分类
- 第 2 周：AI 接管 50% 标准任务，人开始只做复核
- 第 3 周：指标开始考核“人均处理量”，人被迫提速
- 第 4 周：流程重构，岗位开始拆分为“机器人运营 + 人工兜底”
这东西发出去，团队讨论会非常具体：
“那我现在该去做兜底，还是去做机器人运营？”
这才是对的讨论方向。
避坑清单（不想翻车就看完）
- 只给岗位名称，不给任务：AI 会瞎猜，结论看着像玄学。
- 让 AI 自由发挥分数：分数会飘。要求按维度解释，写清打分理由。
- 把结论当裁员名单：你会被骂。把它定位成“流程重构预警”。
- 忽略组织现实：很多岗位不是“能力问题”，是“权限问题”。AI 能做，不代表公司敢让它做。
- 网页写太复杂：越复杂越难维护。单文件最省事。
你可以直接拿去问团队的三个问题
把网页发群里，然后丢这三问：
- 你觉得你岗位里，哪 3 个任务最容易被自动化？写出来。
- 如果这些任务没了，你剩下的价值是什么？
- 你更想走哪条路：做“AI 操作员（让机器人更好用）”，还是做“复杂问题兜底的人”？
这比“AI 会不会替代我”有用一百倍。
想把那种“一键生成网页”的感觉做出来？
你可以把流程做成固定动作：
- 收集岗位与任务（表格）
- 提示词生成 JSON
- 模板渲染成网页
- 自动发布
后面你再想加升级版：
- 把表格放到 Google Sheets / 飞书表格
- 用脚本拉取数据生成
DATA - 每天自动更新一次网页
到这一步，你就不是在“讨论 AI”，你是在“用 AI 做组织体检”。
