博主人設作品集（面試用單檔案 HTML）
輸出物是一個 index.html：圖片全部 base64 內嵌，雙擊能開，能直接發微信/郵件給面試官。 結構固定為七個板塊，用一條「生活時間線」串起來；文案只講優勢，每個數字都要能對上帳號主頁。
何時用
- 使用者要把自己的博主帳號做成投遞材料（新媒體 / 內容營運 / 品牌公關崗）
- 使用者要給別的博主做同款頁面（換人設、換數據，不重寫設計）
- 使用者已有舊版作品集，需要改配色、改結構、補成績單
交付物長什麼樣
portfolio/
├── index.html ← 唯一交付物
├── data.json ← 資料源（筆記、季度、品牌、身份）
└── assets/ ← 封面圖 + 頭像（建構時會被內嵌）
七個板塊（編號主題可換，見 references/theming.md）：
| 板塊 | 內容 | 關鍵要求 |
|---|---|---|
| 12:00 開場 | 標題 + 導語 + 5 格數據條 | 一句話能複述「我做出了什麼」 |
| 12:15 作品 | TOP1 單列拆解 + TOP2–5 常顯 + TOP6–9 折疊 | 封面必須是本人出鏡的原片 |
| 12:40 數據 | 季度點讚曲線 + 分享率/收藏率比率條 | 曲線平滑、帶漸變面積和描線動畫 |
| 13:00 經歷 | 敘事 + 2×2 成績單 + 粉絲畫像 + 總結 | 數字分三級：規模/爆發/商業化 |
| 13:20 方法 | 4 條原則，每條掛一個帶數字的證據 | 沒有數據支撐的原則不要寫 |
| 13:40 優勢 | 4 張能力卡（大數字 + 標籤 + 證據） | 是優勢不是復盤，嚴禁寫問題和計劃 |
| 14:00 關於 | 收尾一句 + 事實表（坐標/院校/帳號/郵箱） | 方便面試官抄聯絡方式 |
前置依賴（第 0 步，取數前必做）
抓數需要小紅書 CLI。CLI 已經內建在本技能裡（vendor/redbook/，上游 MIT），
所以把整個技能目錄拷給對方就能用，不需要他先 npm i -g。
bash scripts/doctor.sh # 體檢：node / CLI 來源 / cookie / 登入態
| 檢查項 | 要求 | 不滿足時 |
|---|---|---|
| node | ≥ 22 | 裝 node 後再來，內建副本也靠它跑 |
| CLI | 全域 redbook 或 vendor/redbook/dist/cli.js 二者有其一 | 拷漏 vendor 了，或 npm i -g @lucasygu/redbook |
| 登入態 | ~/.redbook/cookies.json 有效 | bash scripts/redbook.sh auth save，失敗見 data-collection 文末 CDP 方案 |
所有抓數命令都走啟動器 bash scripts/redbook.sh <子命令>：它優先使用全域版（能隨 npm 升級），
沒有再回落到內建副本，並自動設好 REDBOOK_COOKIE_FILE。裸寫 redbook 在對方機器上可能不存在。
分享給別人：整個
blogger-portfolio/目錄打包即可（含vendor/，約 1MB）。 對方那邊只有兩件事要自己做：裝 node ≥22、用自己的小紅書帳號登入一次。 別把vendor/redbook/刪掉換體積 —— 刪了就退化成「必須先裝 npm 包」。 想升級 CLI：npm i -g @lucasygu/redbook@latest後把新版dist/ node_modules/同步進vendor/redbook/。
流程
1. 取數
公開數據用內建的小紅書 CLI 抓（筆記列表、點讚/收藏/分享、TOP9 封面、季度分佈）：
RB="bash scripts/redbook.sh"
$RB whoami # 先確認登入態
$RB search "<帳號暱稱>" --json # 數字小紅號 → 拿 userId + xsec_token
$RB user-posts <userId> --xsec-token '<t>' --xsec-source pc_search --all --delay 3000 --json > posts.json
閱讀量、粉絲畫像、品牌數、成交額這些只能問使用者要。
完整命令、去重與聚合腳本、Cookie 失效修復、評論抓取的反風控，見
references/data-collection.md。抓取務必串行 + 3s 間隔，評論遇到驗證碼立刻停。
2. 定人設皮膚
先問清三件事：帳號定位（生活/家居/母嬰/寵物/探店…）、目標崗位、是否本人出鏡。
再按 references/theming.md 選定時間線隱喻、色板和板塊命名。
預設淺色紙感（米白 #fbf6ee + 杏橘 #d9744f）；生活類博主一律不用深色。
3. 寫 data.json
從 demo/data.json 複製一份改（demo/ 是可直接建構的範例：虛構人物 + 佔位封面）：
{
"site": {"title","meta","name","tagline","handle","profile_url","collected_at","start","avatar"},
"hero": {"clock","h1","lead","roles"},
"ledger":[{"value","label","hl"}], // 5 格，第一格 hl:true
"facts": [{"k","v"}], // 關於頁右側事實表（坐標/院校/帳號/郵箱）
"notes": [{"rank","title","date","like","collect","share","comment","url","brand","img"}],
"quarters": [["24Q3", 1, 260]], // [季度, 篇數, 點讚合計]，6–12 個都行
"brands":[{"name","cat"}]
}
notes 給 9 條就夠（TOP1 + TOP2–5 + TOP6–9）；img 寫相對路徑，建構時自動內嵌。
數值保留平台原寫法（"7.6萬"），頁面裡的 toN/fmt 會統一換算。
h1 和 lead 裡可以帶 HTML（<br>、<span class="mark">、<em>）。
4. 建構
python3 scripts/build.py --data portfolio/data.json --out portfolio/index.html
腳本負責內嵌圖片、填充佔位符，佔位符沒填完直接報錯退出，最後列印還剩幾處範例文案待改。
5. 改寫範例文案（不可跳過）
模板自帶一套完整的「床車午休」範例，建構後按標記逐個改掉：
<!--EDIT:works--> 作品區標題/導語 + TOP1 三條拆解
<!--EDIT:featured--> TOP1 亮點卡（引言 + 為什麼能火）
<!--EDIT:datahead--> 數據區標題 + 三塊比率說明
<!--EDIT:experience--> 經歷：敘事 + 成績單 + 粉絲畫像 + 總結
<!--EDIT:method--> 方法四條
<!--EDIT:strengths--> 優勢四張
<!--EDIT:about--> 關於 + 側欄事實表
寫作規則、板塊公式、禁忌清單、每張卡對應哪個面試問題，見 references/copy-playbook.md。
動筆前先讀它，否則很容易寫成復盤。
順序建議：先 build，再在 HTML 上改文案；之後若還要改 data.json，記得重新 build 會覆蓋手改內容。
6. 體檢
npm i playwright-core # 在任意臨時目錄裝一次
node scripts/verify.js portfolio/index.html
三檔視口（1440 / 768 / 390）各查一遍：控制檯報錯、可見圖片是否載入、橫向溢出、 滾動漸顯是否露完、曲線是否生成、比率條寬度是否為 0、正文對比度是否 ≥4.5。 有硬傷時退出碼非 0。
不要給使用者發截圖，只報數值結論；使用者明確要看時才截圖。
7. 交付
用 present_files 打開 portfolio/index.html，正文說清三件事：
- 這版改了什麼（配色 / 結構 / 數字口徑）
- 哪些數字和平台顯示對不上、建議怎麼寫（不要自己圓）
- 還缺什麼：工作經歷【待填】、聯絡郵箱、是否要發布成線上連結
使用者常在手機上看時，走區域網路預覽（~/.workbuddy/live-serve/live_serve.py），別反覆傳檔案。
目錄
SKILL.md 本文
scripts/build.py data.json + 模板 → 單檔案 HTML
scripts/verify.js 交付前體檢（playwright-core + 本機 Chrome）
scripts/doctor.sh 取數前置體檢（node / CLI / cookie / 登入態）
scripts/preview.sh 建構 + 起服務 + 手機地址 + 改動自動重建（一條命令）
scripts/redbook.sh CLI 啟動器（全域版 → 內建副本，自動選）
assets/template.html 頁面模板（完整 CSS/JS，佔位符 {{NAME}} 形式）
demo/ 可直接建構的範例（虛構人物 + 佔位封面，跑一遍驗證環境）
references/data-collection.md 抓數、聚合、Cookie 修復、反風控
references/copy-playbook.md 文案公式、三級數字、禁忌、面試問題映射
references/theming.md 換人設：時間線隱喻、色板、裝飾、無障礙底線
vendor/redbook/ 內建小紅書 CLI（MIT，含 dist/ 與 node_modules/）
vendor/NOTICE.md 內建依賴的來源、版本、許可證與升級方法
模板 37KB，圖片內嵌後成品約 1MB —— 這個體量可以接受，別為了減體積壓圖。 內建 CLI 約 760KB，別刪：它是「對方只裝 node 就能跑」的唯一保障。
常見坑
- 數字自相矛盾：使用者口述「8 萬讚」、頁面寫 7.6 萬，面試官一核對就崩。統一取主頁顯示值。
- 裸寫
redbook報 command not found：對方機器上沒裝全域包。一律用bash scripts/redbook.sh， 它會回落到vendor/redbook/；先跑bash scripts/doctor.sh看是哪一環缺。 - 寫成復盤：出現「問題」「下一步」「學到」就是跑偏了，整塊刪掉換成能力卡。
- 忘記改時間戳：導航
<small>12:15</small>要和板塊<b>12:15</b>同步。 - 比率條不顯示：
.bar .tr / .fl是 span，必須display:block才有寬度。 - 摺疊區圖片報「沒載入」：
display:none的懶加載圖屬正常，verify.js 已排除。 - 手機端換行：粉絲畫像三枚小卡片用了
white-space:nowrap，窄螢幕要縮字號和內邊距。 - 大號帳號的點讚是封頂值：粉絲過十萬級別的帳號，點讚一律顯示成「10 萬+」，
collected_count也可能封頂。任何「收藏 ÷ 點讚」的比率都只是上限，不能當結論寫——這時把比率條改成絕對值（收藏數、評論數各一組），結論一樣成立，但每個數字都站得住。 - 大號別按點讚排名：封頂之後排序是假的。改成「按內容類型各挑一條代表作」，並在小標題裡說明為什麼不排名。
- 封面比例混雜：同一個帳號可能同時有 9:16、3:4、4:3 三種封面（長影片、方圖、橫圖）。統一 crop 到 3:4 +
object-position:50% 42%，豎版不會切掉底部標題。 - hero 數據條只佔半行：
.ledger放在 hero 第二個.wrap裡時會繼承雙欄 grid，加.hero .wrap+.wrap{display:block}。 - 大號取數很慢：1000+ 篇時
--delay 2000約 40 頁、2 分鐘能跑完；但取 TOP 9 的詳情要逐篇read，間隔 5s，別並發。