# 转行做 CMF 设计 · 入行闯关路线图

> 活页公开模板 `sample-career-route` · 场景: 手册 · 指南 · 行业: 制造供应链 / 教育培训
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://getlivepage.com/s/B6ljhqdYilhg · 详情: https://getlivepage.com/examples/sample-career-route

## 这是什么

入行闯关路线图 · 写给想转行的人

## 什么时候用

给想入行、想转岗的人写一份闯关式的指南或带教手册：分几关讲清行业、选公司、求职、面试和成长，读者按自己的背景拿到专属建议和一张路线卡。纯操作步骤的 SOP 选 sample-handbook；线下到场的流程指引（挂号、取件、参观动线）选 sample-clinic-guide；只是时间线式的个人经历选时间轴简历那份。

## 用户对助手说的原话

帮我做一份写给想转行进入某个行业的人的闯关式入行路线图，做成一个网页链接：页头是作者署名（几年经验、写给谁）、标题和版本日期；开头先让读者选「我的转行背景」（五个按钮），选完后每一关都多出一段写给这个背景的建议；页面的主角是一条蜿蜒的闯关路线（四关 + 终点，每关一个色块），读到哪一关就描线到哪一关、点亮那一关，电脑上路线常驻在左侧；手机首屏标题下面紧跟这条路线，做成占满屏宽、高度约半屏的竖向 S 形（各关节点左右交替、虚线相连，第一关点亮、其余灰色带锁），是首屏主视觉，不要压成顶部横条，选背景的按钮放在路线下面排成两列卡片；四关依次是看懂行业（岗位在产品流程里的位置、上下游、主要赛道对比）、选对公司（按背景推荐先进哪类公司、各类公司的取舍、判断能不能长久干下去的三条标准）、拿到 offer 并站稳（作品集怎么做、求职渠道、入职 90 天节奏）、面试与向上管理（6–8 道常见面试题，点开看答题思路，再写几条向上管理做法）；终点写 1 年 / 3 年 / 5 年的能力里程碑、跳槽时机和一张示例薪资区间图；最后一张表单让读者选背景、目标公司类型和入行周数，提交后存进数据表并生成一张值得截图的「我的入行路线卡」（按周数分配四关的任务），显示已有多少人选了同一条路和大家的背景分布。手机和电脑都要好看，薪资写成示例区间。

如果你还没有活页连接器（MCP），先读 https://getlivepage.com/for-agents.md ，照里面的说明接入，或不登录直接发布。

## 照着做一份

1. 读入口文件 https://getlivepage.com/examples/sample-career-route/source/index.html（它引用的其他文件见下方列表）。
2. 保留结构、版式和交互，把内容**全部**换成用户自己的；模板里的公司、人名、数字都是虚构的，一样都别留。
3. 交付一个自包含的单文件 HTML：样式写在页面里，不引外部字体 / 脚本 / CDN；手机 375 宽和电脑 1440 宽都要好看，模板有暗色就保留暗色。
4. 要发成微信里能打开、改了链接不变的网页：接入活页（https://getlivepage.com/for-agents.md）后发布；没有账号也可以让用户在 https://getlivepage.com/quick 上传这个文件。
5. 没有活页工具、但能发 HTTPS 请求：把做好的 HTML 以 Content-Type: text/html POST 到 https://getlivepage.com/api/quick?client=template-sample-career-route ，返回预览链接、7 天分享与认领链接（登录后保留、链接不变）。

## 页面结构

- 选你的转行背景
- 第一关 · 看懂行业
- 第二关 · 选对公司
- 第三关 · 拿到 offer 并站稳
- 第四关 · 面试与向上管理
- 终点 · 积累经验、跳槽涨薪
- 生成我的入行路线卡

## 文件（公开，纯文本）

- https://getlivepage.com/examples/sample-career-route/source/index.html（入口）

## 发成活页之后还能做的

- 一条可点的 SVG 闯关路线：读到哪一关描到哪一关、点亮那一关的色块（电脑左侧常驻，手机在页首）
- 读者选背景后每一关出现专属建议，路线上标出重点（浏览器存储键带 space.page.id）
- 文末表单写回数据表（原生表单 POST ./_data/routes），交完生成「我的入行路线卡」，读回「已有 N 人选了这条路」与背景分布
- 同一链接持续更新，读者问的新问题补进来不用换链接

## 发之前要备好

- 数据表 routes（列 background / target / weeks，append_open=true）：文末路线卡表单写进这里，页面读回统计「已有 N 人选了这条路」与背景分布；只记选项，不收姓名和联系方式

## 模板说明（README）

一位虚构的 8 年 CMF 设计师「青砚」写给想转行的人的入行指南：四关（看懂行业、选对公司、拿到 offer 并站稳、面试与向上管理）+ 终点（积累经验、跳槽涨薪）。
作者、公司类型、薪资数字全部虚构；薪资是「示例区间」，只作量级参考。插画（色板、材料样、工艺拆解、路线色块）都是内联 SVG，没有位图。

## 演示哪个特色

- **记忆点：一条闯关路线**（内联 SVG，电脑左侧常驻 `svg.map-w`，手机在页首 `svg.map-n`，两套坐标）。读者往下读，`IntersectionObserver` 每进一关就把路线描到那一关（`stroke-dashoffset`）、点亮那一关的材料色块（磨砂 / 高光 / 拉丝 / 皮纹 / 阳极），手机上顶部还有一条五格的关卡条。点色块跳到那一关。`prefers-reduced-motion` 或脚本不跑时，整条路线直接是全亮的终态。
- **读者动作：选「我的转行背景」**。页首五个按钮（不跑脚本时是跳到文末表单的链接），选完后每关出现一段「给 X 背景的你」，路线上每个节点多一行重点，第二关的对照表高亮那一行。选择存在浏览器里，键是 `'cmf-route:' + space.page.id`，换一份用同一模板做的页面不会串。
- **发出去之后还有用：写回 + 读回**。文末是原生表单 `<form method="post" action="./_data/routes">`（背景、目标公司类型、入行周数）：不跑脚本也能交；脚本在时页内 `fetch` 提交，就地生成「我的入行路线卡」（按 2 : 2 : 5 : 3 把周数分给四关），再读 `./_data/routes.json` 显示「已有 N 人选了这条路」和大家的背景分布。写回失败也照样给读者出卡，只是不计数。
- 作者读谁交了什么：MCP `list_data_rows table=routes`。同一个链接持续更新：读者问到新问题，改页面重新发，链接不变。

## 改哪里变成我的

换一个行业（比如转行做产品经理、做跨境电商、做咖啡师）要改这几处：

| 位置 | 改什么 |
|---|---|
| 页头 `.by` / `h1` / `.facts` | 作者署名与经验年限、标题、版本日期 |
| 脚本里的 `BG` | 五种转行背景：`name`、推荐的第一家公司类型 `target`、路线节点上的短提示 `short`（5 条）、每关的长建议 `tips`（5 条）、路线卡的四关任务 `plan`（4 条）和终点 `end`。背景多于或少于五种时，页首 `.bg-pick` 按钮、第二关 `.bgt` 对照表、文末表单的单选同步增删，三处的值都要和 `BG[*].name` 一致 |
| 四关正文 `#industry` `#company` `#offer` `#interview` | 整段换成你那一行的内容；关数要变时，同时改两张路线 SVG 的节点、脚本里的 `LV` / `LVN`、`manifest.sections` |
| 路线色块 | 这一份用五种表面工艺（`--m1`…`--m5` 与 SVG 里的 `w-g*` / `n-g*`）呼应 CMF；换行业时可以换成那一行的符号色 |
| 终点 `#pay` 薪资图 | 两套坐标（`.w` 760 宽、`.n` 343 宽）；改数字时按刻度重算 `rect` 的 `x` / `width`，`aria-label` 同步改；务必写明「示例区间」 |
| 文末表单 | `target` 的选项换成那一行的去处；周数选项改了，脚本里的 `RATIO` 不用动 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致）+ 一句适用场景；发自己的指南时整段删掉 |
| `manifest.json` | `title` / `share.*`；节增减时 `sections` 与页面里的 `id` / `data-track-section` 三处同改 |

数据表 `routes`（列 `background` / `target` / `weeks`，`append_open=true`）只放能公开的列：过审的读者行任何能看这页的人都读得到，所以表单不收姓名和联系方式。

## 怎么发出去

```
create_proposal → proposal_id
set_data proposal_id=<id> table="routes" revision=0 rows=[] columns=["background","target","weeks"] append_open=true
node core/space/cli/space-cli.mjs push <本目录> --proposal <proposal_id> --manifest <本目录>/manifest.json --hold
预览：选一个背景、交一次路线卡 → list_data_rows table=routes 能读回、页面「已有 N 人」+1
publish_version → set_visibility（发群里用口令可看；公开要本人明确同意）
```

本地 `space-cli serve` 会把提交写进包里的 `_data/routes.json`，试完改回 `[]`。
验收截图：`node --import tsx examples/verify-shots.mjs sample-career-route --write-thumb --write-phone`（QUALITY.md §7）。