# 社交卡片代理技能 > 從各種內容來源生成視覺驚豔的小紅書輪播圖和微信封面配對。利用編輯或瑞士設計系統，為您的文章和貼文創建引人入勝的視覺效果。 - Canonical: https://nanoskill.ai/tw/skills/social-card-generation - Markdown: https://nanoskill.ai/tw/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: zh-TW - Source type: github - Popularity signal: 2219 ## Sources - https://github.com/op7418/guizang-social-card-skill ## Install ```shell npx skills add https://github.com/op7418/guizang-social-card-skill/blob/main/README.en.md ``` ## About 歸藏社交卡片技能是一項先進的代理功能，旨在簡化小紅書和微信等平台的社交卡片生成。它使用戶能將多樣化內容——從文章和產品筆記到截圖和照片——轉化為精美、平台優化的視覺。通過提供獨特的編輯和瑞士國際設計系統，該技能確保無論您的目標是敘事講述還是數據驅動的解釋，您的社交卡片都將既引人入勝又美學一致，隨時抓住觀眾的注意力。 此技能以其結構化工作流程脫穎而出，提供28種佈局骨架和10種主題預設來引導內容呈現。它自動從流行平台獲取圖像，並包含一個基於Playwright的強大驗證器，通過檢測常見佈局問題來維持視覺質量。輸出以單文件HTML形式交付，直接渲染為PNG，使其與Claude Code和Codex等編碼代理環境高度兼容。 用戶可以利用歸藏社交卡片技能應對多種用例，例如從長篇文章創建多卡片小紅書輪播，設計視覺和諧的微信21:9主圖和1:1分享卡片配對，或從截圖製作清晰的教程視覺。其設計原則優先考慮克制、結構和以用戶為中心的圖像處理，確保專業且具影響力的社交媒體內容，無需廣泛的設計專業知識。 ## Key features - **雙重視覺系統**: 在適合故事講述的編輯風格（莫諾克爾、親族）和適合數據與結構的瑞士國際風格（網格優先、銳利細線）之間進行選擇，以匹配您內容的調性。 - **多種畫布尺寸**: 支援小紅書 3:4 (1080x1440)、微信 21:9 (2100x900) 和微信 1:1 (1080x1080) 尺寸，以實現多樣化的社交媒體展示。 - **豐富的佈局骨架**: 提供 28 種預先設計的佈局骨架（16 種編輯風格、12 種瑞士風格），包括圖像主導的封面、KPI 塔和水平條形圖，以便快速進行內容結構化。 - **自動化圖像來源**: 自動從昂斯普拉什、佩克斯爾斯、弗利克 CC、沃爾黑文或直接搜索獲取圖像，並將其下載到本地，同時生成自動生成的 SOURCES.md 文件。 - **佈局驗證器**: 包含基於 Playwright 的驗證器，用於檢測溢出、字數上限違規、密度間隙和頁腳碰撞，確保生成高品質的社交卡片。 ## Use cases - **創建小紅書輪播**: 將長篇文章、產品評論或旅遊指南轉換為吸引人的多卡片小紅書輪播，使用編輯風格或瑞士風格設計。 - **設計微信封面配對**: 從任何內容來源生成視覺一致的 21:9 主圖和 1:1 分享卡片，用於微信朋友圈和視頻號。 - **製作教學視覺**: 將螢幕截圖教程、遊戲指南或工具導覽轉換為結構化的社交卡片，包含美化的截圖和清晰的佈局。 - **總結數據和評論**: 使用包含圖表和矩陣的瑞士風格佈局來呈現產品評論、數據回顧或年度回顧內容，以實現清晰傳達。 ## Result preview 探索由本技能驅動的專業社交媒體輪播。 ![A minimalist horizontal bar chart titled 'Top Use Cases by Enterprise Adoption.' The chart presents six enterprise applications of AI agents ranked by adoption rate. Each category is displayed with a blue progress bar against a light gray background track, with percentage values aligned on the right side. The highest adoption category is Intelligent Customer Support at 82%, followed by Automated Data Processing at 74%, Code Development and Review at 68%, Marketing Content Generation at 61%, Supply Chain Planning at 47%, and Legal Document Review at 39%. The bars use varying shades of blue to visually distinguish the categories while maintaining a cohesive design. The layout emphasizes comparative adoption levels across business functions, highlighting customer support and data processing as the most widely adopted AI agent use cases in enterprise environments. The overall design features clean typography, ample whitespace, and a professional business-report aesthetic suitable for executive presentations, technology trend reports, and AI adoption studies.](https://file.nanoskill.ai/social-card-outcome1.png) ![A clean, executive-style industry transformation overview slide titled 'Industries Being Transformed.' The layout presents four major sectors where AI agents are driving measurable business impact, arranged in a structured table-like format with horizontal dividers between rows. Each industry category appears in bold black text on the left, followed by representative AI agent applications in the center, and a highlighted blue percentage growth figure on the far right. The industries featured include Healthcare, Financial Services, Manufacturing, and Retail & eCommerce. Healthcare highlights clinical decision support, patient triage, and radiology reading assistance, showing a 32% impact metric. Financial Services focuses on fraud detection, automated reporting, and compliance monitoring, with the highest displayed value of 41%. Manufacturing showcases predictive maintenance, supply chain optimization, and quality control, associated with a 28% increase. Retail and eCommerce emphasizes personalized shopping experiences, dynamic pricing, and inventory automation, showing a 36% impact figure. The design uses a minimalist business-report aesthetic with a light gray background, bold typography, generous whitespace, subtle divider lines, and bright blue percentage indicators that draw attention to performance improvements. The slide communicates how AI agents are transforming operational workflows across multiple industries and is suitable for executive presentations, consulting reports, digital transformation strategies, and enterprise AI adoption studies.](https://file.nanoskill.ai/social-card-outcome2.png) ![A professional executive presentation slide titled 'What to Watch For,' highlighting three critical risks and implementation challenges organizations should consider when deploying AI agents at scale. The slide uses a minimalist consulting-style layout with a light gray background and three horizontally stacked warning cards featuring orange accent borders and caution icons. The first section, 'Security & Privacy,' warns that AI agents with system-level access create new attack surfaces and increase cybersecurity exposure. It notes that 72% of enterprises identify data governance as a primary concern and recommends least-privilege access controls, audit trails, and strong security frameworks from the start. The second section, 'Integration Complexity,' explains that legacy systems remain the largest deployment obstacle. It emphasizes that modern enterprises operate hundreds of interconnected applications, requiring robust APIs, workflow orchestration, fallback mechanisms, and resilient system integration to prevent fragile automation failures. The third section, 'Trust & Oversight,' addresses the risks of black-box decision making. It highlights the need for human-in-the-loop review processes, explainability layers, transparent governance, accountability structures, and escalation procedures to ensure responsible AI deployment and maintain user confidence. The visual design follows a modern enterprise-report aesthetic with bold section headings, soft neutral panels, orange warning indicators, generous whitespace, and clear information hierarchy. The slide communicates strategic risk management considerations for AI agent adoption and is suitable for board presentations, technology strategy reports, digital transformation roadmaps, enterprise AI governance discussions, and executive briefings.](https://file.nanoskill.ai/sociai-card-outcome3.png) ![A premium executive presentation closing slide titled 'The Agent Era Starts Now,' designed in a modern consulting-report style with a bold deep-blue background, minimalist typography, and strong visual hierarchy. At the top-left, a small section label reading 'WHAT COMES NEXT' introduces the concluding chapter, accompanied by a subtle orange accent line that serves as a visual anchor and brand motif. The center-left features a large, bold headline stating 'The Agent Era Starts Now,' emphasizing urgency, transformation, and the beginning of a new technological era driven by autonomous AI agents. Beneath the headline, a concise strategic statement explains that organizations that move first—guided by clear strategy, governance, responsible oversight, and human-centered design—will shape how work is performed over the coming decade. The message frames AI agents not merely as tools, but as a foundational shift in business operations, productivity, and organizational structure. The slide functions as a call-to-action and executive conclusion, encouraging decision-makers to prepare for widespread AI agent adoption. It communicates themes of innovation leadership, competitive advantage, digital transformation, future-of-work strategy, and responsible AI implementation. The visual design uses extensive whitespace, high-contrast white typography, subtle gray supporting text, and a restrained orange accent to create a polished, enterprise-grade aesthetic. The overall appearance resembles a strategy consulting presentation, boardroom briefing, technology foresight report, or executive keynote deck focused on the future impact of AI agents and autonomous systems.](https://file.nanoskill.ai/social-card-outcome4.png) ## Result walkthrough ### 安裝 將社交卡片生成技能添加到您的AI代理。 ![A screenshot showing the installation and verification process of the 'guizang-social-card-skill' for an AI agent environment. At the top, a dark blue command banner displays an NPX installation command pointing to a GitHub repository containing the skill. Below, a gray chat-style response panel explains that the installation initially paused because the command requested interactive agent selection. The system reruns the installation using a '-y' flag to bypass prompts and successfully installs the skill for the Hermes Agent environment. The response confirms that the skill has been installed and symbolically linked under the Hermes skills directory. A summary section explains that the skill generates Guizang-style social media card image sets for multiple platforms, including Xiaohongshu or RedNote carousel posts, WeChat Official Account cover image pairs, social cards, article covers, and platform thumbnails. Additional details mention built-in layout recipes, design systems, platform specifications, theme presets, and HTML templates such as Editorial Magazine and Swiss International styles. The interface uses a clean conversational layout with highlighted code snippets, numbered installation steps, bullet-point feature lists, and clear confirmation messages describing the skill's capabilities and readiness for use.](https://file.nanoskill.ai/social-card-install.png) ### 描述內容 提供您想轉換為社交媒體卡片的內容、主題或關鍵信息。 ![A screenshot of an AI-powered social media content design workflow. The upper section contains a large dark blue prompt panel describing a role as an award-winning Social Media Content Designer and Visual Storytelling Director. The prompt requests the creation of a premium social media card series titled 'The Future of AI Agents,' focused on how AI agents will transform productivity, business operations, and everyday work. Detailed requirements specify a carousel-style content format with cover cards, key insights, examples, data highlights, and actionable takeaways. The instructions emphasize clean and modern visual design, strong information hierarchy, platform optimization for Xiaohongshu, LinkedIn, X, and WeChat, concise copywriting, and highly shareable layouts. Additional directives include critiquing the initial content structure, improving readability and engagement, refining storytelling flow, and producing a publication-ready social card series. The final deliverable is described as a visually striking PDF with editorial-style layouts, colorful content sections, infographics, and swipe-friendly designs. Beneath the prompt, a gray response panel shows the AI beginning its workflow by loading the social card skill, reviewing its capabilities, loading reference materials, and accessing template and production workflow resources before generating the final content package. The interface uses a chat-style layout with rounded panels, white text on a dark blue background, and structured formatting to present a professional content design brief.](https://file.nanoskill.ai/social-card-task.png) ### 生成社交卡片 創建視覺吸引、平台優化的卡片設計，具有清晰的信息層次、強大的敘事流程和可發布的佈局。 ![A professional report cover page titled 'The Future of AI Agents.' The design features a deep royal blue background with a clean, minimalist editorial style. At the top left, small uppercase text reads 'SPECIAL REPORT • 2026,' accompanied by a short orange accent line that serves as a visual divider. The main headline, 'The Future of AI Agents,' appears in large bold white typography positioned on the left side of the page, creating strong visual hierarchy and emphasis. Below the title, a descriptive subtitle explains the report’s focus: how autonomous AI agents will transform productivity, reshape business operations, and redefine the way people work every day. The layout uses generous whitespace, modern sans-serif typography, and a limited color palette of blue, white, and orange, giving the cover a sophisticated corporate-report aesthetic. The overall design communicates themes of technology, innovation, business transformation, automation, and the future of work.](https://file.nanoskill.ai/social-card-outcome.png) ## Skill definition 適用於 Claude Code、Codex 及類似程式碼代理環境的代理技能。可從文章、文案、螢幕截圖、產品筆記、字幕或照片中產生**小紅書 / Rednote 輪播圖**及**微信 21:9 + 1:1 封面組合**。 兩套視覺系統共享同一工作流程： - **編輯風格**。內斂的版面設計，體現 *Monocle* / *Kinfolk* / *Cereal* 雜誌的精神。最適合故事敘述、生活風格、旅遊、閱讀、電影及個人觀察。 - **瑞士國際風格**。網格優先、單一主色、銳利細線、極端字型對比。最適合產品評測、數據、框架、教學及 AI 工具。 > 姊妹專案：[guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill)。共享視覺語言，獨立維護。PPT 解決「水平滑動簡報」；本專案解決「靜態動態圖片」。 ![Guizang Social Card Skill 預覽](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png) ## 30 秒快速開始 ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` 或將以下內容貼至具備 shell 存取權的 AI 代理： ```text 為我安裝 guizang-social-card-skill。將 https://github.com/op7418/guizang-social-card-skill 複製到 ~/.claude/skills/guizang-social-card-skill，然後確認存在 SKILL.md、assets/ 和 references/。 ``` 如果已安裝，使用以下指令更新： ```text 為我更新 guizang-social-card-skill。前往 ~/.claude/skills/guizang-social-card-skill，執行 git pull，然後告訴我最新的提交。 ``` 接著向你的代理說： ```text 從這篇文章為我製作一套瑞士風格的小紅書輪播圖，5 張圖片，使用 IKB 藍。 ``` 其他實用提示： ```text 從這個產品評測為我製作一套 3:4 小紅書圖片，使用編輯風格標題。 將這篇文章轉換為微信封面組合：21:9 主圖 + 1:1 分享圖，視覺上保持一致。 我有 3 張露營照片——為我製作一套以圖片為主的小紅書輪播圖。 將這份遊戲攻略文案轉換為小紅書圖片；從 Wallhaven 擷取一些遊戲美術圖。 ``` ## 你會得到什麼 - 🖋 **兩種視覺系統**：編輯風格營造氛圍與敘事，瑞士風格呈現事實與結構，共享同一工作流程 - 📐 **3 種畫布尺寸**：`.poster.xhs` 1080×1440（小紅書 3:4）、`.poster.wide` 2100×900（微信 21:9）、`.poster.square` 1080×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](https://github.com/op7418/guizang-ppt-skill)）/ 長篇影片製作 / 純照片修圖 / 無版面的純文字編輯 ## 11 種小紅書類別 依「能力圈」分級——詳見 [`references/category-cookbook.md`](./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：一行指令安裝（建議） ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` ### 選項 2：將以下內容貼到 AI > 為我安裝 `guizang-social-card-skill` Claude Code 技能。步驟如下： > > 1. 確保 `~/.claude/skills/` 存在（若不存在則建立） > 2. 執行 `git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill` > 3. 驗證：`ls ~/.claude/skills/guizang-social-card-skill/` 應顯示 `SKILL.md`、`assets/`、`references/` > 4. 完成後告訴我。之後說「為我製作小紅書輪播圖」等指令就會觸發此技能。 將上方區塊貼到 Claude Code / Cursor / 任何具備 shell 存取權的 AI 代理。 ### 選項 3：手動 CLI ```bash 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 個步驟： 1. **輸入**——擷取 4 項內容：目標平台 / 風格 / 來源內容 / 使用者圖片。當無圖片可用時，僅一次性提出 A/B/C 選項（自行拍攝 / AI 生成 / 線上搜圖）；不要重複推銷 2. **風格與主題**——選擇編輯風格或瑞士風格，再從 10 種主題預設中挑選。不允許自訂十六進位色碼 3. **版面選擇**——從 28 種版面骨架中選取 / 貼上 / 調整文案。16 種編輯風格 / 12 種瑞士風格 4. **素材準備**——來源圖片（Unsplash / Pexels / Flickr CC / Wallhaven / 直接搜尋），下載至本機並寫入 `SOURCES.md`；詢問是否註明來源 5. **編排與渲染**——複製種子範本 → 替換 `` → `node render.mjs` 6. **交付與檢視**——先顯示 PNG，詢問「你要自己查看，還是要我執行驗證器？」——不自動驗證 7. **迭代**——套用使用者回饋，微調行內樣式或更換版面 / 圖片，重新渲染 完整規格請見 [`SKILL.md`](./SKILL.md)。詳細細節請參考對應的 `references/*.md`。 ## 驗證器 ```bash 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`](./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` | 警示、新聞、工業、充滿活力的主題 | 更換主題只需替換種子範本上的 `
` 屬性；所有 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 ← 品質檢查清單 ``` ## 核心設計原則 1. **內斂勝於喧囂**——內斂的調色盤在飽和的動態中脫穎而出 2. **結構勝於裝飾**——字型 / 對比 / 網格承載階層，而非陰影或卡片 3. **版面勝於自由**——先選擇，後調整；不可在 28 種骨架外自創頁面 4. **使用者圖片優先**——輸入時僅一次性提出 A/B/C；不要重複推銷自行拍攝 5. **遮罩 + 避開**——滿版圖片必加遮罩；文字放置區域必須避開主體（臉部 / 產品 / 文字密集區域） 6. **越大越細**——瑞士風格 `.h-xl` 尺寸增加 → 粗細必須降低。編輯風格遵循相同規則 7. **不自動驗證**——讓使用者先看，驗證前先詢問；每輪節省數十秒 8. **技能是產品，不是提示**——具備 PRODUCT.md、版本號、CHANGELOG、能力邊界 9. **本地測試不進版控**——所有示範 / 煙霧測試存放於 `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](https://github.com/op7418) 本專案採用 **GNU AGPL-3.0** 授權。重點如下： 1. **需標示出處**——保留版權聲明 2. **衍生作品須開源**——任何修改版本、分支或再散佈必須以 AGPL-3.0（或相容授權）釋出，並提供完整原始碼 3. **網路使用視為散布**——即使僅以 SaaS / 網路服務形式運行修改後的版本而未散布程式碼，仍須公開原始碼（此為 AGPL 較 GPL 嚴格之處） 4. **禁止閉源、專有或僅付費散佈** 完整條款請見 [`LICENSE`](./LICENSE)。 ## FAQ ### 什麼是歸藏社交卡片技能？ 歸藏社交卡片技能是一款用於 Claude 程式碼、科德克斯及類似程式碼代理環境的代理技能，能夠從文章、筆記或照片等多種內容輸入中生成小紅書輪播和微信封面配對，並使用獨特的視覺設計系統。 ### 我可以使用哪些類型的內容來生成社交卡片？ 您可以使用文章、文案、螢幕截圖、產品筆記、字幕或照片作為生成社交卡片的源內容。該技能能適應各種輸入，以創建視覺上吸引人的輸出。 ### 用於生成社交卡片的兩種視覺系統是什麼？ 該技能提供兩種視覺系統：'編輯風格' 適用於敘事、生活風格和故事性內容，以及 '瑞士國際風格' 適用於產品評論、數據、框架和教程，具有網格優先的特點。 ### 我可以為我的社交卡片使用自定義顏色嗎？ 不可以，不允許自定義 hex 色碼。該技能提供了 10 個主題預設（6 個編輯風格，4 個瑞士風格）以保持視覺一致性和品質。您可以通過更新種子模板上的 data-theme 屬性來切換主題。 ### 如何安裝歸藏社交卡片技能？ 您可以使用 \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` 或將儲存庫複製到代理的技能目錄中來安裝它。 ### 該技能支持英文內容嗎？ 是的，該技能支持英文內容。編輯風格（普萊費爾顯示體 + 諾托襯線體）和瑞士風格（因特體 + 赫爾維提卡體）字體均涵蓋中文和英文，且佈局骨架與語言無關。