辦公小浣熊資訊圖技能
📖 技能介紹
name: office-raccoon-infographic description: "把中文文章、資料、筆記、培訓內容、產品說明或結構化觀點，轉成符合辦公小浣熊 IP 形象的白底手繪資訊圖、知識卡片或長圖方案；支援從觸發指令開始，按模板自動產出 PNG/HTML/ZIP，並執行 IP、圖片引用和打包一致性校驗。" version: "1.1.1" author: "SenseTime Office Raccoon" tags: - infographic - office-raccoon - chinese-content - visual-summary - html-rendering - skillhub-ready
辦公小浣熊資訊圖技能
快速開始：使用者怎麼觸發
使用者只要在訊息裡說明“把什麼內容做成什麼型別的資訊圖”，即可觸發本技能。最小可用輸入是：
/office-raccoon-infographic 把這篇文章做成一張辦公小浣熊資訊圖
也可以不寫斜槓，只要表達清楚以下意圖，也應主動呼叫本技能：
- “給這篇文章生成資訊圖 / 長圖 / 知識卡片”
- “把這份培訓材料做成可分享圖片”
- “用辦公小浣熊 IP 做一張白底手繪總結圖”
- “把這些筆記整理成公眾號配圖”
- “做一個可發朋友圈/社群的視覺總結”
第一次使用時，先問使用者什麼
如果使用者沒有說明執行方式和交付位置，先用非技術化語言確認：
收到，我可以把這份內容轉成辦公小浣熊資訊圖。開始前請確認兩點：
1. 執行方式：A 完全自動執行 / B 每一步都詢問
2. 交付路徑：A 預設 output/<任務名>/ / B 你指定路徑
你可以直接回復：1A 2A。
如果使用者已明確回覆類似 1A 2A、完全自動，預設目錄，不要重複詢問，直接執行。
使用者需要提供什麼材料
至少提供以下任一項：
- 一段正文、文章草稿或結構化觀點；
- Word / Markdown / PDF / 文本檔案；
- 可讀取的網頁或文件連結；
- 培訓材料、產品說明、會議紀要、知識庫摘錄。
如果任務要求“辦公小浣熊官方 IP”，優先讓系統使用內建 assets/ip-reference/；如果使用者提供了專門的 IP Reference 目錄或圖片，則以使用者提供素材為最高優先順序。
典型提問示例
/office-raccoon-infographic 給這篇 Word 文章生成一張辦公小浣熊風格長圖，完全自動執行，預設目錄。
把下面這段培訓內容做成 1080px 寬的白底手繪資訊圖，要有辦公小浣熊 IP，最後給 PNG 和 ZIP。
這篇公眾號文章太長了，幫我壓縮成 6 個板塊的資訊圖，文字要大，適合手機閱讀。
請用我指定的 IP Reference 目錄生成，不要用泛化小浣熊。交付 PNG、HTML 和完整素材包。
不要觸發的情況
以下需求不要使用本技能，或應先澄清：
- 使用者只要普通文字摘要、標題或改寫，不需要視覺交付；
- 使用者要完整 PPTX、影片、動效或複雜網頁應用；
- 使用者要求其他品牌 IP，但沒有素材或授權；
- 使用者只問“辦公小浣熊是什麼”，沒有資訊圖產出目標。
什麼時候使用
當用戶要求把中文文章、資料、筆記、培訓內容、產品說明、方法論或結構化觀點轉成以下任一交付物時，使用本技能：
- 資訊圖、長圖、知識卡片、可分享圖片；
- 白底手繪風格內容圖；
- 帶辦公小浣熊 IP 的文章視覺化總結；
- 公眾號、飛書、社群、培訓課件中可直接使用的 PNG 視覺內容；
- 從 Word / Markdown / 文本 / 網頁正文中提煉結構並生成資訊圖。
不要用於：
- 只需要普通文字摘要；
- 純 PPTX 生成；
- 與辦公小浣熊 IP 無關的複雜插畫專案；
- 使用者明確要求其他品牌 IP，且該品牌素材或授權不清晰。
北極星目標
把使用者內容轉成一張或一組 文字清晰、結構好讀、可直接分享、符合辦公小浣熊官方 IP 形象 的視覺交付物。
如果產出 PNG / ZIP，最終交付必須滿足：
- 文章主線被準確提煉；
- 正文由 HTML 文本層承載，不能依賴圖片內小字；
- 辦公小浣熊形象以明確 IP Reference 為錨點；
- 如果生成了場景圖，最終 HTML、PNG 和 ZIP 必須實際使用這些場景圖；
- 所有交付檔案可核驗、可復現、可下載。
強制工作流
0. 任務確認
除非使用者已明確說明，否則先確認：
- 執行方式：完全自動執行，還是每一步詢問；
- 交付目錄：預設寫入當前專案的
output/<task-name>/，或使用者指定目錄； - 輸出形態：方案、PNG 成品、完整 ZIP 交付包。
1. 讀取與提煉內容
- 成功讀取使用者提供的檔案、連結或正文後，才可聲稱“已讀原文”；
- 提煉標題、副標題、主線、3–8 個資訊板塊、關鍵結論；
- 不編造原文沒有的資訊。若需要背景補充，必須顯式標註為補充判斷。
2. 前置確認 IP Reference
在生成任何辦公小浣熊角色圖之前，必須先確認 IP Reference 來源。優先順序如下：
- 使用者本輪明確指定的 IP Reference 目錄或圖片；
- 使用者上傳的辦公小浣熊參考圖；
- 專案目錄中的
小浣熊相關/IP Reference等明確參考目錄； - 技能包內建
assets/ip-reference/； - 若都沒有，才允許用文字描述生成，並在交付說明中標註 IP 風險。
必須記錄實際使用的參考圖檔名。示例：
IP Reference 來源：/path/to/IP Reference
實際使用參考圖：
- official-raccoon-01.png
- official-raccoon-02.jpg
3. 明確素材角色，禁止偷換
- 官方 IP Reference：官方 IP 圖用於品牌錨定、風格校準和 QA 對照；可以進入頂部/底部作為品牌錨點，但不能替代全部場景圖。
- 生成場景圖：用於表達每個內容板塊；如果生成了 N 張場景圖，最終 HTML 必須引用 N 張，最終 PNG 必須實際渲染 N 張，ZIP 必須包含 N 張。
- HTML/CSS 圖形：用於結構、箭頭、卡片、註釋、輔助符號；可以補強視覺，但不能在未說明的情況下替代生成圖。
- 文本層：標題、正文、數字和說明必須由 HTML/CSS 清晰渲染，避免圖片內偽文字。
4. 設計資訊圖結構
輸出或內部確定以下內容：
- 標題、副標題、導語；
- 每個板塊的標題、正文、視覺隱喻；
- 圖片生成提示詞；
- 頁面尺寸：預設 1080px 寬豎向長圖；
- 交付檔案清單。
5. 生成或整理視覺素材
- 圖片內不要生成正文、段落、複雜漢字或小字；
- 若使用 image-to-image，必須把確認過的 IP Reference 作為參考圖；
- 若角色明顯偏離辦公小浣熊，不得直接進入最終交付；
- 如多次偏離，可降級為“官方 IP 圖作為錨點 + CSS 場景符號 + 少量非角色場景圖”，但必須說明原因。
6. 合成 HTML 長圖
- 所有可讀正文必須在 HTML 文本層；
- 每個生成場景圖必須有明確
<img src="assets/scene-xx-*.png">引用； - HTML 寫入後，必須先做 scene 引用數量校驗，未通過不得截圖。
最低校驗：
生成 scene 圖數量：N
HTML 引用 scene 圖數量：N
官方 IP 圖引用數量：>=1（如適用）
7. 瀏覽器渲染與截圖
推薦流程：
- 在交付目錄啟動本地 HTTP 預覽；
- 開啟
http://127.0.0.1:<port>/<html>； - 等待
networkidle； - 等待所有
document.images完成載入； - 讀取實際載入圖片資訊；
- 使用絕對路徑截圖；
- 用檔案系統和圖片庫檢查 PNG 尺寸。
截圖前必須確認：
頁面方向：豎向
頁面寬度：約 1080px，允許渲染環境帶少量邊界偏差
scene 圖片實際載入數量：N
所有 scene 圖片 naturalWidth > 0 且 complete = true
8. 視覺 QA 門禁
必須檢查：
- 長圖方向和尺寸是否正確；
- 標題與正文是否可讀；
- 是否使用指定辦公小浣熊 IP；
- 是否實際使用生成的場景圖；
- 是否存在亂碼、偽文字、大面積水印干擾；
- 交付包是否與最終 PNG/HTML 一致。
如果 QA 發現關鍵問題，必須修復後重新匯出，不得只在說明中解釋。
9. 打包交付
完整 ZIP 交付包至少包含：
<task>.html
<task>.png
content-outline.txt 或 equivalent
visual-review.md 或 qa-report.md
assets/scene-*.png（如生成）
assets/official-raccoon-*（如使用）
bundle-manifest.json（推薦）
打包後必須讀取 ZIP 清單，確認：
- HTML 引用的素材全部在 ZIP 內；
- ZIP 包含最終 PNG 和最終 HTML；
- ZIP 不包含快取、日誌、
.DS_Store、__MACOSX、臨時截圖、舊版本成品； - ZIP 根層如果作為 SkillHub 上傳包，必須包含包級
SKILL.md。
失敗處理規則
遇到以下問題，不得繼續硬跑下一步：
- HTML 中沒有引用已生成的 scene 圖；
- 瀏覽器實際載入 scene 圖數量不足；
7w4.net小蔥技能站，你的AI助手技能庫。
- PNG 未出現在預期路徑；
- PNG 變成橫圖或尺寸明顯異常；
- ZIP 清單缺少 HTML 引用資源；
- IP Reference 未確認或角色明顯不符合辦公小浣熊。
建議修復路徑：
- HTML 引用失敗：讀取 HTML，改用程式化方式重寫，再重新校驗；
- 截圖路徑失敗：改用絕對路徑截圖，並檢查檔案存在；
- 打包失敗：在工作區內用 Python
zipfile打包，不使用系統臨時目錄； - IP 偏差：重生成單張圖，或降級為官方 IP 圖錨點 + CSS 場景符號。
輸出格式
最終回覆應簡潔說明：
- 是否完成；
- PNG 下載連結；
- ZIP 下載連結；
- 關鍵校驗結果：尺寸、scene 圖數量、IP Reference、ZIP 清單；
- 未覆蓋風險和下一步建議。
檔案連結必須使用 local-file:// + 絕對路徑格式。
相關參考
references/workflow.md：詳細工作流；references/qa-gate.md：QA 門禁；references/html-composition.md：HTML 合成規範；references/office-raccoon-ip-guide.md：IP 形象規範；docs/packaging-checklist.md：打包檢查清單；scripts/validate-delivery.py：交付一致性校驗指令碼；scripts/screenshot.js：瀏覽器截圖輔助指令碼。
常見問題與老師傅式異常提示
Q1：使用者說“怎麼開始用？”
直接告訴使用者三步：
- 把文章、檔案或連結發來；
- 說明要“長圖 / 知識卡片 / 資訊圖 / ZIP 包”；
- 如果有指定 IP Reference，把目錄或圖片一起發來。
可直接給使用者這句模板：
請把這份內容做成辦公小浣熊資訊圖，完全自動執行，預設目錄，交付 PNG + HTML + ZIP。
Q2：沒有讀到原文怎麼辦？
不要假裝已讀取。應提示：
我現在還沒有成功讀到正文，所以不能直接總結原文。你可以補充檔案、貼上正文，或換一個可訪問連結；我拿到正文後再繼續生成資訊圖。
Q3：找不到 IP Reference 怎麼辦？
應提示：
我沒有找到可用的辦公小浣熊參考圖。為了避免生成成普通小浣熊，請你提供 IP Reference 圖片或目錄；如果你同意，我也可以先用技能包內建參考圖繼續。
Q4：生成了場景圖但 HTML 沒引用怎麼辦？
這是 P0 門禁失敗。不得截圖或打包。應先修復 HTML，直到 scene-*.png 引用數量、瀏覽器實際載入數量、ZIP 清單數量全部一致。
Q5：ZIP 打包後用戶說“圖沒用上”怎麼辦？
先核查最終 HTML 和瀏覽器頁面，而不是隻看素材資料夾。修復後必須重新匯出 PNG、重新打包 ZIP，並給出清單：生成圖數量、HTML 引用數量、瀏覽器載入數量、ZIP 包含數量。
完整示例：從使用者請求到交付
使用者請求
/office-raccoon-infographic 給這篇文章生成資訊圖，使用辦公小浣熊 IP，完全自動執行，預設目錄。
助手執行摘要
1. 已讀取原文並提煉 6 個資訊板塊。
2. 已確認 IP Reference：assets/ip-reference/official-raccoon-01.png、official-raccoon-02.jpg。
3. 已生成 6 張無文字場景圖。
4. HTML 已引用 6 張 scene 圖，瀏覽器實際載入 6 張。
5. PNG 為豎向長圖，文字由 HTML 文本層承載。
6. ZIP 包含 PNG、HTML、6 張 scene 圖、IP 參考圖、QA 報告和內容大綱。
交付口徑
已完成。最終 PNG、HTML 和 ZIP 已生成。
校驗結果：生成圖 6 / HTML 引用 6 / 瀏覽器載入 6 / ZIP 包含 6，全部通過。
🤖 AI 評測
這個技能整體質量不錯，文件寫得很詳細，新手容易上手。它特別注重交付物的一致性檢查，確保生成的圖片真的使用了生成的素材，不會出現"素材在包裡但沒用上"的情況。觸發方式和FAQ說明也比較友好。但部分說明中提到的參考素材目錄實際不存在，可能影響首次使用體驗。總體適合需要把文章轉成視覺內容的使用者，但需要確保素材準備齊全。
