name: content-card description: > 將內容鑄成 PNG 視覺卡片。三種模具：-l 長圖閱讀卡（預設）、-i 資訊圖、-m 多卡。 輸入文本/URL/檔案，輸出高品質 PNG。 Use when: (1) 使用者說"做成卡片"/"做成圖"/"鑄"/"cast", (2) 使用者說"知識卡片"/"資訊圖"/"infograph", (3) 需要將文章/筆記/分析結果轉為可分享的圖片, (4) 公眾號/小紅書需要文字密集型配圖（資料對比、流程圖、知識點總結）。 NOT for: 照片/插圖/AI 藝術圖（用 Gemini/Seedream 生圖）、 純資料圖表/柱狀圖（用程式碼或 xlsx 生成）。

content-card: 鑄

將內容鑄成可見的形態。內容進去，PNG 出來。模具決定形狀。

引數

小紅書安全區（-m 模式必讀）

小紅書移動端 UI 會遮擋圖片以下區域，關鍵資訊必須避開：

┌─────────────────────────────┐
│                 [❤️ 📌 💬]  │  ← 右上角 15%：點贊/收藏/評論按鈕
│                             │
│      ✓ 安全內容區域          │
│                             │
│  [筆記標題 + 使用者頭像欄]     │  ← 底部 10%：標題欄遮擋
│                   [@水印]   │  ← 右下角 10%：平臺水印
└─────────────────────────────┘

在 -m 模式生成 HTML 時，確保底部 10% 區域不放置關鍵文字或資料。

獲取內容

• URL → web_fetch 獲取
• 貼上文本 → 直接使用
• 檔案路徑 → read 獲取

執行流程

Step 1: 載入使用者偏好

檢查 EXTEND.md 配置檔案（優先順序：專案級 > 使用者級）：

• 找到：讀取並解析，後續步驟中使用配置值作為預設值
• 未找到：靜默跳過，使用 SKILL.md 預設值

配置 schema 見 references/config/preferences-schema.md。

小蔥技能站7w4.net發現了升級外掛。

Step 2: 理解內容

讀取輸入內容，提取： - 核心主題/標題 - 關鍵資訊點（資料、結論、對比、流程） - 內容氣質：思辨/哲學、技術/工程、文學/敘事、科學/研究、商業/產品

Step 3: 關鍵詞快捷匹配

使用者輸入中如果包含以下關鍵詞，直接跳過氣質推斷和佈局推薦，使用預設組合：

匹配規則： - 匹配到關鍵詞後自動應用預設，跳到 Step 3（生成 HTML） - 使用者仍可通過 --layout / --style 覆蓋預設 - 多個關鍵詞同時命中時，取第一個匹配

Step 4: 結構化內容（資訊圖專用）

-i 模式在理解內容後，增加一步結構化轉換：

1. 提取標題和核心主張
2. 將內容拆解為獨立模組（每個模組 = 一個佈局區塊）
3. 為每個模組標註：關鍵概念、核心資料、視覺元素建議
4. 資料保真：源資料原樣保留，不概括不改寫。統計數字、引用、專有名詞必須逐字保留
5. 憑據剝離：如果源內容包含 API Key、Token、密碼等敏感資訊，必須在此步驟剝離

輸出到 temp/content-card/structured-content.md 檔案。好處： - 換風格/佈局時直接複用，不用重新分析 - 使用者可在此檔案上手動修改後重新生成 - 保留分析過程的可追溯性

如果 temp/content-card/structured-content.md 已存在且內容未變，跳過分析直接複用。

⚠️ 檢查點（Step 2-4 完成後）

內容理解 + 結構化完成後，如果使用者未指定風格/配色，簡要告知選擇的方案再繼續： "內容偏 [氣質]，準備用 [風格] + [配色] 做長圖，可以嗎？" 使用者確認或無異議後繼續。簡單/重複任務可跳過。

Step 5: 感知內容氣質，選擇配色

氣質決定配色方向，風格決定視覺系統。 氣質在這一步確定，風格在 Step 2.5 確定。

Step 6: 選擇視覺風格

如果使用者指定了 --style，使用指定風格。否則根據氣質自動推薦：

風格定義檔案在 references/styles/<style>.md，生成 HTML 時讀取對應檔案中的 CSS 變數。

資訊圖佈局庫（-i 模式可選佈局）

資訊圖有兩個維度：佈局（資訊結構）× 內容氣質（已有的配色系統）。

自動推薦：根據內容結構自動匹配最佳佈局。

內容型別 → 佈局推薦

氣質 × 佈局 相容矩陣

選定內容氣質和佈局後，檢查此矩陣確保組合合理：

✓✓ 強推薦 | ✓ 可用 | ✗ 不推薦（氣質與佈局形式衝突，效果差）

核心邏輯：思辨/文學偏深度敘事，避免資料密集型佈局；技術/科學/商業偏結構化，避免純敘事型佈局。

相容檢查：選定氣質+佈局後查此矩陣。有 ✗ 則提示調整或換備選佈局。

內容訊號 → 氣質+佈局自動推薦

根據輸入內容的關鍵詞訊號，自動推薦氣質和佈局組合：

混合訊號時：取第一個匹配的推薦，氣質由主導訊號決定。

Step 7: 生成 HTML

檔案安全：生成新檔案前，如果目標路徑已存在同名檔案，自動重新命名為 {name}-backup-{YYYYMMDD-HHMMSS}.{ext}。適用於： - HTML 中間檔案 - 最終 PNG 輸出 - structured-content.md

示例：report.png 已存在 → 重新命名為 report-backup-20260420-225400.png → 再生成新的 report.png

根據選擇的模具，讀取對應模板檔案： - -l：assets/long_template.html - -i：assets/infograph_template.html - -m：assets/poster_template.html

注入風格變數：讀取 references/styles/<style>.md 中的 CSS 變數定義，將其注入到 HTML 的 :root 選擇器中。風格變數覆蓋模板預設值，實現佈局 × 風格的自由組合。

將內容填充到模板的 {{VARIABLE}} 佔位符中。

Step 8: 品味檢查

生成 HTML 後、截圖前，Read references/taste.md，逐項過品味準則自檢清單。

Step 9: 截圖

node ~/.openclaw/skills/content-card/scripts/capture.js <html檔案路徑> <輸出png路徑> <寬度> <高度> [fullpage]

預設寬度 1080，長圖和資訊圖用 fullpage 模式（高度自適應）。

依賴：Playwright。如未安裝：

cd ~/.openclaw/skills/content-card && npm install playwright && npx playwright install chromium

Step 10: 交付

• 輸出路徑：~/Downloads/{標題}.png
• 報告檔案路徑

品味準則

Read references/taste.md — 所有模具的視覺質量底線。

核心原則：反 AI 生成痕跡。 - 禁 Inter 字型（用 Noto Serif SC / Geist / Satoshi） - 禁純黑 #000（用 #1a1a1a） - 禁三等分卡片 - 禁居中 Hero - 禁 AI 文案腔（賦能/無縫/釋放） - 禁假資料（99.99%） - 最多 1 個強調色，飽和度 < 80% - 陰影必須染色，不用灰色預設

使用場景示例

# 公眾號知識卡片
/content-card -l 將這段 Agent 架構分析做成長圖

# 小紅書多卡
/content-card -m 把這個對比表做成多張卡片

# 資料資訊圖
/content-card -i 將這份專案分析報告做成資訊圖

設計品味準則

通用品味準則見 ~/.openclaw/workspace/references/design-taste.md，覆蓋品牌協議、反 AI slop、品味錨點、事實驗證。本 skill 遵守該檔案的所有規則。涉及具體品牌時必須走品牌資產協議 5 步流程。

這個 Skill 質量相當不錯，能把文章、筆記等內容快速轉換成精美的圖片卡片。它提供了多種視覺風格和佈局選擇，設計系統完整，配色和字型搭配都很專業。操作流程清晰，文件說明詳細，小白也能快速上手。美中不足的是某些特定功能（如多卡片模式）的使用說明還不夠詳細，另外某些頁面的生成效果可能需要手動微調。總體而言，這是一個實用且有深度的工具類 Skill。