適用於 Claude Code、Codex 及類似程式碼代理環境的代理技能。可從文章、文案、螢幕截圖、產品筆記、字幕或照片中產生小紅書 / Rednote 輪播圖及微信 21:9 + 1:1 封面組合。
兩套視覺系統共享同一工作流程：
- 編輯風格。內斂的版面設計，體現 Monocle / Kinfolk / Cereal 雜誌的精神。最適合故事敘述、生活風格、旅遊、閱讀、電影及個人觀察。
- 瑞士國際風格。網格優先、單一主色、銳利細線、極端字型對比。最適合產品評測、數據、框架、教學及 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 | 科技、研究、人工智慧、技術文件 |
| 🌿 森林墨色 | #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、能力邊界
- 本地測試不進版控——所有示範 / 煙霧測試存放於
local-tests/，已加入 gitignore
視覺參考
- Monocle / Kinfolk / Cereal 雜誌版面設計與字距
- Massimo Vignelli / Helvetica Forever / 瑞士國際字型風格網格系統
- Apartamento / The Gentlewoman 圖文比例與人物肖像
- 小紅書 / Rednote 中「內斂致勝」的動態範例
- Guizang 的社群卡片實作
未來藍圖
- 針對編輯風格長內容的字型上限邊界案例進行更多煙霧測試
- 更多瑞士風格數據版面（額外的圖表骨架）
- 圖片生成後：主動詢問是否進行局部修正 / 重新生成整張圖片
- 更多類別專屬的推薦版面套件（目前 11 種中有 7 種端到端能力強）
- 適合市場的 WorkBuddy 版本
貢獻
錯誤、版面問題、新版面請求——歡迎提交 Issue 和 PR。變更優先事項：
- 編輯種子範本時，同步更新
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。