適用於 Claude Code、Codex 和類似編碼代理環境的代理技能。它能從文章、文案、截圖、產品筆記、字幕或照片生成小紅書 / Rednote 輪播圖片和微信 21:9 + 1:1 封面對。
兩種視覺系統共享一個工作流程：
- 編輯風格 (Editorial)。秉承《Monocle》/《Kinfolk》/《Cereal》精神的內斂佈局。最適合故事敘述、生活方式、旅行、閱讀、電影和個人觀察。
- 瑞士國際風格 (Swiss International)。網格優先、單一主色、銳利髮絲線、極端字體對比。最適合產品評論、數據、框架、教程和 AI 工具。
guizang-ppt-skill 的姊妹專案。共享視覺語言，獨立維護。PPT 解決「橫向滑動演講稿」；這個解決「靜態動態消息圖片」。
30 秒快速上手
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
或者將此貼到具有 shell 訪問權限的 AI 代理：
為我安裝 guizang-social-card-skill。將 https://github.com/op7418/guizang-social-card-skill 克隆到 ~/.claude/skills/guizang-social-card-skill，然後驗證 SKILL.md、assets/ 和 references/ 是否存在。
如果您已經安裝，請使用以下命令更新：
為我更新 guizang-social-card-skill。進入 ~/.claude/skills/guizang-social-card-skill，運行 git pull，然後告訴我最新的提交。
然後詢問您的代理：
用這篇文章為我製作一個瑞士風格的小紅書輪播圖，5 張卡片，IKB 藍色。
其他有用的提示：
用這篇產品評論為我製作一個 3:4 的小紅書套組，標題採用編輯風格。
將這篇文章轉化為微信封面對：21:9 英雄 + 1:1 分享卡，視覺上保持一致。
我有 3 張露營照片 — 為我製作一個以圖片為主的小紅書輪播圖。
將這份遊戲指南文案轉化為小紅書套組；從 Wallhaven 獲取一些遊戲美術圖。
您將獲得什麼
- 🖋 兩種視覺系統：編輯風格用於氛圍和敘事，瑞士風格用於事實和結構，共享一個工作流程
- 📐 3 種畫布尺寸：
.poster.xhs1080×1440 (小紅書 3:4)，.poster.wide2100×900 (微信 21:9)，.poster.square1080×1080 (微信 1:1) - 🧩 28 種佈局骨架：16 種編輯風格 (
M01-M16，包括圖片主導封面、流程圖、前後對比) + 12 種瑞士風格 (S01-S12，包括 KPI 塔、橫條圖、矩陣 + 英雄) - 🎨 10 種主題預設：6 種編輯風格 (經典墨水、靛藍瓷器、森林墨水、牛皮紙、沙丘、午夜墨水深色) + 4 種瑞士主色 (IKB 克萊因藍、檸檬黃、檸檬綠、安全橙)
- 🖼 圖像來源工作流程：優先使用用戶圖像；否則依序從 Unsplash → Pexels → Flickr CC → Wallhaven → 直接搜索，本地下載並自動生成
SOURCES.md - 🌫 WebGL 墨流背景：編輯風格的英雄頁面可以呈現實時墨水動畫；可為低功耗設備或截圖模式禁用
- 🪧 圖像疊加 + 人臉安全：全幅圖像必須帶有遮罩；文字放置區域必須避開主體。硬性規則請參閱
references/image-overlay.md - 🧰 截圖美化素材：9 種真實紋理 WebP 背景 (5 種編輯風格 / 4 種瑞士風格)，搭配
.frame-shot/.device-browser/.device-phone工具 - 🗺 地圖組件：MapLibre + OSM 真實地圖塊，多圖釘 + 連接器，專為旅行指南設計
- ✅ 驗證器：
validate-social-deck.mjs自動檢測溢出、字體大小限制違規、4 帶密度間隙和頁腳衝突 - 📄 單文件 HTML + Playwright 渲染：無需前端構建管道；
node render.mjs直接輸出 PNG
適用 / 不適用
✅ 適用：小紅書輪播圖 / 微信封面對 / 朋友圈封面 / 頻道封面 / 文章視覺圖 / 教程頁面 / 數據回顧 / 旅行指南 / 產品評論 / 截圖說明
❌ 不適用：橫向滑動演示文稿 (請使用 guizang-ppt-skill) / 長篇視頻生成 / 純照片修飾 / 無佈局的純文本編輯
11 種小紅書類別
按「能力圈」分級 — 請參閱 references/category-cookbook.md：
端到端強勢 (文案 / 結構 / 圖片都在範圍內)：
- 旅行、職業、推薦 (指定子類別後)
文案和結構強勢，圖片取決於用戶或來源藝術品：
- 遊戲、電影、美食 (食譜導向)、化妝 (教程導向)、健身、家居、時尚 (精選)
超出範圍，預先聲明 (不會強行適應)：
- OOTD 實拍 / 夢核 / 膠片模擬調色 / 真實膚質測試化妝 — 任何嚴重依賴攝影或後期製作的內容
常見場景
| 任務 | 推薦流程 |
|---|---|
| 長篇文章 → 小紅書輪播圖 | 提取核心要點；敘事節奏用編輯風格，數據分析用瑞士風格 |
| 產品評論 / 工具總結 | 瑞士風格 + IKB 藍色，首選 S09 KPI 塔 / S10 橫條圖 |
| 旅行 / 生活方式 | 編輯風格 + 午夜墨水或沙丘，M16 圖片主導封面 用於全幅英雄圖 |
| 微信封面對 | 渲染相同內容兩次：.poster.wide 21:9 + .poster.square 1:1，視覺上保持一致 |
| 截圖教程 / 工具演練 | .frame-shot + .device-browser，首選瑞士網格基礎 |
| 遊戲指南 / 電影回顧 | 編輯風格 + 午夜墨水，從 Wallhaven 獲取遊戲美術圖作為全幅英雄圖 |
| 數據回顧 / 年度總結 | 瑞士風格 + 檸檬黃或安全橙，矩陣 + 帳本組合 |
為什麼是單文件 HTML 到 PNG
- 代理友好：HTML + CSS 是文本 — 代理可以直接編寫、閱讀、編輯和驗證
- 佈局精確：CSS Grid + 嚴格的字體 / 邊距 / 網格規則遠超 Markdown 的佈局能力
- 開放圖像來源：連接 Unsplash / Pexels / Wallhaven / Mapbox / OSM / 任何網絡資源
- 可驗證品質：
validate-social-deck.mjs運行 Playwright DOM 測量，而非猜測 - 簡單交付：
output/*.png直接交付 — 無需部署，無需導出工具
平台支持
| 平台 | 狀態 | 備註 |
|---|---|---|
| Claude Code | 支持 | 原生技能工作流程，非常適合生成 + 迭代卡片 |
| Codex | 支持 | 適合長篇卡片生成、圖像來源、視覺 QA |
| Cursor / 其他本地代理 | 可用 | 需要文件系統讀寫 + shell 執行 |
| 純聊天機器人 | 不推薦 | 沒有文件系統和渲染管道，無法可靠地交付圖像 |
安裝
選項 1：一鍵安裝 (推薦)
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
選項 2：將此貼到 AI
為我安裝
guizang-social-card-skillClaude Code 技能。步驟：
- 確保
~/.claude/skills/存在 (如果沒有則創建)- 運行
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill- 驗證：
ls ~/.claude/skills/guizang-social-card-skill/應顯示SKILL.md、assets/、references/- 完成後通知我。之後，說「為我製作一個小紅書輪播圖」之類的話將觸發此技能。
將上述區塊貼到 Claude Code / Cursor / 任何具有 shell 訪問權限的 AI 代理中。
選項 3：手動 CLI
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
如何觸發它
安裝後，Claude Code 會自動檢測該技能。觸發短語：
- 「為我製作一個小紅書 / Rednote 輪播圖」
- 「為我製作 Rednote 卡片」
- 「製作一個微信 21:9 英雄 + 1:1 分享卡」
- 「生成社群卡片 / 雜誌風格社群卡片」
- 「將這篇文章轉化為教程輪播圖」
- 「製作一個瑞士風格的小紅書評論 / IKB 風格卡片」
工作流程
該技能是一個結構化的工作流程。代理將經歷 7 個步驟：
- 接收 — 捕捉 4 件事：目標平台 / 風格 / 來源內容 / 用戶圖片。當沒有圖片可用時，呈現 A/B/C 一次 (自己拍攝 / AI 生成 / 在線來源)；不要重複推銷
- 風格與主題 — 選擇編輯風格或瑞士風格，然後選擇 10 個主題預設之一。不允許自定義十六進制值
- 佈局選擇 — 從 28 個佈局骨架中選擇 / 貼上 / 調整文案。16 個編輯風格 / 12 個瑞士風格
- 資產準備 — 來源圖片 (Unsplash / Pexels / Flickr CC / Wallhaven / 直接搜索)，本地下載 + 編寫
SOURCES.md；詢問是否需要註明來源 - 組合與渲染 — 複製種子模板 → 替換
<!-- POSTERS_HERE -->→node render.mjs - 交付與審查 — 首先顯示 PNG，詢問「自己看看，還是要我運行驗證器？」— 不會自動驗證
- 迭代 — 應用用戶反饋，調整內聯樣式或交換佈局 / 圖片，重新渲染
完整規範請參閱 SKILL.md。詳細內容請參閱匹配的 references/*.md。
驗證器
node validate-social-deck.mjs path/to/task-dir
6 條規則，基於 Playwright 真實渲染測量，而非靜態掃描：
- R1 溢出 — 任何部分溢出
.poster都會立即失敗 - R2 字體大小限制 —
.h-xl/.h-display尺寸 + 字重組合超出種子定義 - R3 頁腳衝突 — 內容擠壓到底部頁腳 / 頁碼
- R4 4 帶密度 — 1440 高的畫布分為 4 個水平帶；每個都必須包含內容或有明確的留白理由
- R5 框架溢出 —
.frame-img/.frame-shot的子元素溢出框架 - R6 瑞士風格識別 — 瑞士模板中內聯
font-weight >= 700會發出警告 (違反「越大越細」的原則)
SKILL.md 步驟 7 明確指出驗證器不會自動運行 — 等待用戶先查看圖片，每輪可節省數十秒。
主題預設
從 references/theme-presets.md 中選擇。不允許自定義十六進制值 — 保護美學比選擇自由更重要。
編輯風格 (6)
| 主題 | 色調 | 最適合 |
|---|---|---|
| 🖋 經典墨水 | #0a0a0b / #f1efea | 一般默認，商業主題，不確定時使用 |
| 🌊 靛藍瓷器 | #0a1f3d / #f1f3f5 | 科技、研究、AI、技術寫作 |
| 🌿 森林墨水 | #1a2e1f / #f5f1e8 | 自然、永續、戶外、非小說 |
| 🍂 牛皮紙 | #2a1e13 / #eedfc7 | 懷舊、人文、閱讀、文學 |
| 🌙 沙丘 | #1f1a14 / #f0e6d2 | 藝術、設計、創意、時尚 |
| ⚫ 午夜墨水 | #0e0d0c / #ece2cf / #d4a04a | 遊戲主視覺 / 夜景 / 電影封面 / 《黑神話·悟空》/《艾爾登法環》風格的黑暗主題 |
瑞士風格 (4)
| 主題 | 主色 | 最適合 |
|---|---|---|
| 🔵 IKB 克萊因藍 | #002FA7 | 一般默認，商業發布、AI 產品、框架 |
| 🟡 檸檬黃 | #FFD500 | 青年、運動、零售、消費、Y2K |
| 🟢 檸檬綠 | #C5E803 | 生態、健康、Z 世代、綠色品牌 |
| 🟠 安全橙 | #FF6B35 | 警報、新聞、工業、活力主題 |
要切換主題，只需替換種子模板上的 <section class="poster" data-theme="..."> 屬性；所有 CSS 都透過 var(--...) 解析。
目錄
guizang-social-card-skill/
├── SKILL.md ← 主要技能文件：7 步工作流程
├── README.md ← 中文 README
├── README.en.md ← 此文件
├── HANDOFF.md ← 交接文件：事實 + 版本歷史
├── PRODUCT.md ← 產品文件：思考 + 決策 + 路線圖
├── validate-social-deck.mjs ← Playwright 佈局驗證器
├── assets/
│ ├── template-editorial-card.html ← 編輯風格種子 (6 個主題 / 3 種畫布)
│ ├── template-swiss-card.html ← 瑞士風格種子 (4 種強調色 / 3 種畫布)
│ ├── magazine-bg-webgl.js ← WebGL 墨流背景
│ └── screenshot-backgrounds/ ← 9 種截圖舞台背景 (WebP)
│ ├── style-a/ ← 5 種編輯風格
│ └── style-b/ ← 4 種瑞士風格
└── references/
├── platform-specs.md ← 平台 × 解析度 × 命名
├── style-system.md ← 兩種風格的硬性規則和反模式
├── theme-presets.md ← 所有 10 種調色板的詳細信息
├── layout-recipes.md ← 28 種佈局骨架 (M01-M16 + S01-S12)
├── components.md ← 字體 / 卡片 / 間距 / 圖標
├── background-systems.md ← 墨流 / 網格 / 紙張圖層
├── portrait-fill.md ← 3:4 板的留白策略
├── content-planning.md ← 鉤子 / 頁面分割 / 文案壓縮
├── category-cookbook.md ← 11 種小紅書類別路由表
├── image-overlay.md ← 全幅圖像遮罩 + 人臉安全規則
├── screenshot-treatment.md ← `.frame-shot` 工具 + 截圖美化
├── map-component.md ← `.map-block` MapLibre 地圖
├── title-shortener.md ← 1:1 封面的短標題策略
├── production-workflow.md ← Playwright 渲染管道
└── qa-checklist.md ← 品質檢查清單
核心設計原則
- 克制勝於喧囂 — 在飽和的動態消息中，克制的調色板更能脫穎而出
- 結構勝於裝飾 — 字體 / 對比 / 網格承載層次結構，而非陰影或卡片
- 佈局勝於自由 — 先選擇，後調整；不要在 28 個骨架之外發明頁面
- 用戶圖片優先 — 在接收時，呈現 A/B/C 一次；不要重複推銷自己拍攝
- 遮罩 + 避讓 — 全幅圖像始終帶有遮罩；文字放置區域必須避開主體 (人臉 / 產品 / 文本密集區域)
- 越大越細 — 瑞士風格
.h-xl尺寸增大 → 字重必須減小。編輯風格遵循相同規則 - 不自動驗證 — 讓用戶先查看，然後再詢問是否驗證；每輪可節省數十秒
- 技能是產品，而非提示 — 擁有 PRODUCT.md、版本號、CHANGELOG、能力邊界
- 本地測試不提交到 git — 所有演示 / 冒煙測試都位於
local-tests/下，並被 git 忽略
視覺參考
- 《Monocle》/《Kinfolk》/《Cereal》雜誌佈局和字距
- Massimo Vignelli / Helvetica Forever / 瑞士國際排版風格網格系統
- Apartamento / The Gentlewoman 圖片與文本比例和人物肖像
- 小紅書 / Rednote 中克制風格在動態消息中勝出的範例
- 歸藏的社群卡片實踐
路線圖
- 針對長篇編輯內容的字體大小限制邊緣案例進行更多冒煙測試
- 更多瑞士風格數據佈局 (額外的圖表骨架)
- 圖像生成後：主動詢問是否進行本地修復 / 重新生成整個圖像
- 更多針對特定類別的推薦佈局包 (目前 11 個中有 7 個是端到端強勢)
- 適用於市場的 WorkBuddy 版本
貢獻
錯誤、佈局問題、新佈局請求 — 歡迎提出問題和拉取請求。變更的優先級：
- 編輯種子模板時，也請更新
references/components.md的對應表 (尺寸 / 間距 / 字重) - 添加佈局時，將完整配方添加到
references/layout-recipes.md(文案限制 + 最小密度) - 添加主題顏色時，也請更新種子模板的
[data-theme="..."]區塊 +references/theme-presets.md - 添加瑞士風格規則時，也請更新
validate-social-deck.mjs中匹配的規則 - 您遇到的錯誤將記錄到
references/qa-checklist.md中 - 測試和演示位於
local-tests/下 — 不要污染技能根目錄
許可證
AGPL-3.0 © 2026 op7418
此專案根據 GNU AGPL-3.0 許可。主要重點：
- 需要署名 — 保留版權聲明
- 衍生作品必須開源 — 任何修改版本、分支或再分發都必須在 AGPL-3.0 (或兼容許可證) 下發布，並提供完整的源代碼
- 網絡使用即分發 — 即使您僅將修改版本作為 SaaS / 網絡服務運行而不分發代碼，您也必須發布源代碼 (這就是 AGPL 比 GPL 更嚴格的原因)
- 不允許閉源、專有或僅付費分發
完整條款請參閱 LICENSE。