解決什麼

中文社交媒體內容創作者面臨三個痛點:小紅書圖文需要 3:4 豎版多圖排版,公眾號封面需要 21:9 頭圖與 1:1 分享卡配對,而 Canva/創客貼等工具需要手動調整模板、反覆試錯配色與版式。該專案將專業編輯設計規則編碼為 AI Agent 可執行的結構化工作流,輸入文章或文案後自動完成版式選擇、配圖檢索、排版渲染全流程,輸出符合平臺規範的 PNG 圖片。

核心技術路徑是用單檔案 HTML + CSS Grid 精確控制版式,通過 Playwright 無頭瀏覽器渲染為高質量圖片,配合 6 條硬性校驗規則(溢位檢測、字號上限、底部碰撞等)保證輸出質量。

為何火

3157 stars 的熱度來自三個維度:首先是垂直場景精準命中 —— 小紅書與公眾號是中文內容生態的兩大流量入口,圖文封面質量直接影響點選率,但市面缺少針對這兩個平臺尺寸與審美的自動化工具;其次是AI Agent 原生設計,不同於傳統設計工具需要人工操作,該專案將排版知識結構化為 Agent 可理解的 Markdown 文件(28 個版式骨架、10 套主題預設、11 個品類適配指南),Claude Code 等工具可直接呼叫;第三是美學規則硬編碼,通過禁止自定義顏色、強制網格對齊、自動遮罩疊加等約束,避免非設計人員產出"PPT 風"劣質圖文。

專案在 GitHub Topics 標註了 xiaohongshu、rednote、wechat 等中文平臺關鍵詞,精準觸達目標使用者群體。

核心功能

雙視覺系統共用工作流:Editorial(電子雜誌風)適合敘事與生活方式內容,模仿 Monocle/Kinfolk 的剋制排版;Swiss(瑞士國際主義)適合資料與產品測評,採用網格、單一錨點色、極致字號對比。兩套系統共享 28 個版式骨架(Editorial 16 個如 Image-Led Cover、Pipeline;Swiss 12 個如 KPI Tower、H-Bar Chart)。

自動化圖源工作流:優先使用使用者上傳圖片,無圖時按 Unsplash → Pexels → Flickr CC → Wallhaven → 直接搜尋的優先順序自動檢索,下載到本地並生成 SOURCES.md 版權記錄。支援 MapLibre + OSM 真實地圖瓦片,適合旅行攻略類內容。

質量保證機制:validate-social-deck.mjs 指令碼基於 Playwright 真實渲染測量,檢測 6 類問題:內容溢位、字號超限、底部碰撞、橫帶密度不足、框架溢位、Swiss 風格違規(如粗體濫用)。配合 references/image-overlay.md 的遮罩規則與人臉避讓指南,確保滿鋪圖的文字可讀性。

平臺適配:.poster.xhs 生成 1080×1440 小紅書 3:4 圖文,.poster.wide 生成 2100×900 公眾號 21:9 頭圖,.poster.square 生成 1080×1080 公眾號 1:1 分享卡,三種畫板可混合使用保持視覺一致性。

安裝

方式一(推薦):

npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

方式二(直接對話): 複製以下文本發給 Claude Code/Cursor:

幫我安裝 guizang-social-card-skill。請把 https://github.com/op7418/guizang-social-card-skill 克隆到 ~/.claude/skills/guizang-social-card-skill,安裝完成後檢查 SKILL.md、assets/、references/ 是否存在。

方式三(手動):

git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill

安裝後對 Agent 說"幫我做一套小紅書圖文"或"生成公眾號封面對"即可觸發。渲染依賴 Node.js 與 Playwright,首次執行會自動安裝瀏覽器二進位制檔案。

適合誰

內容創作者與運營人員:小紅書博主、公眾號運營、自媒體從業者,需要批次產出符合平臺規範的圖文封面,但缺乏專業設計能力或不想在 Canva 反覆調整模板。

AI Agent 重度使用者:已在使用 Claude Code、Codex 或 Cursor 處理文本工作流的使用者,希望將圖文設計環節也納入自動化流程。

不適合:需要 OOTD 實拍、夢核調色、膠片質感等強依賴攝影與後期的細分賽道;橫向翻頁 PPT 需求(應使用姊妹專案 guizang-ppt-skill);純圖片修圖或無版式訴求的場景。

中國大陸使用者注意:圖源服務(Unsplash/Pexels)可能需要穩定網路環境,建議準備自有圖片庫或使用 Wallhaven 等國內可訪問源。

社群評價

暫無足量社群公開討論,以下為基於專案本身的中立評估:

該專案在技術實現上展現了較高的工程化水平,將傳統設計工具的"所見即所得"互動轉化為"規則即程式碼"的 Agent 工作流。通過 references/ 目錄下的 11 個 Markdown 文件(如 layout-seeds.md 定義 28 個版式、category-cookbook.md 給出 11 個品類適配策略),將隱性設計知識顯性化為 AI 可理解的結構化輸入,這是其核心創新點。

291 個 forks 表明有實際使用需求,但專案建立時間較短(2026 年 5 月),長期穩定性有待觀察。AGPL-3.0 協議要求衍生作品開源,商業化使用需注意合規性。4 個 open issues 數量適中,維護者響應及時(最近提交 12 天前)。

潛在爭議點在於美學獨裁設計哲學 —— 專案明確禁止使用者自定義顏色(只能從 10 套預設選擇),這在保證輸出質量的同時也限制了創意自由度,適合追求"足夠好"而非"完全定製"的場景。

選型對比

vs Canva/創客貼(商業工具):

Canva 優勢:所見即所得介面、海量模板、雲端協作、中文字型庫豐富
本專案優勢:AI Agent 自動化、版式規則硬編碼避免低質輸出、開源免費、可本地執行保護內容隱私
取捨:Canva 適合需要精細調整或團隊協作的場景;本專案適合批次生產、追求一致性美學、已有 AI 工作流的個人創作者

vs 同類開源工具(如 Satori、og-image):

Satori 等工具聚焦 Open Graph 社交卡片(1200×630),主要服務網頁分享場景
本專案專為中文平臺(小紅書 3:4、公眾號 21:9+1:1)設計,內建符合中文閱讀習慣的版式與配色
取捨:通用 OG 工具適合技術部落格等橫向場景;本專案垂直解決中文內容生態的特定需求

vs 姊妹專案 guizang-ppt-skill:

PPT skill 解決橫向翻頁演講場景,支援動畫與互動
本專案解決靜態資訊流圖文,最佳化單屏資訊密度與視覺衝擊力
兩者共享美學語言但獨立維護,可根據輸出介質選擇

已知坑

圖源依賴境外服務:Unsplash/Pexels 在中國大陸訪問不穩定,Wallhaven 雖可訪問但相簿偏二次元與桌布風格,不適合所有品類。建議準備自有圖片庫或配置代理。

品類能力圈有限:references/category-cookbook.md 明確標註 OOTD 實拍流、夢核、仿膠片等強依賴攝影的細分賽道為"能力圈外",Agent 會主動拒絕而非強行生成低質內容。

字型版權風險:專案預設使用系統字型,中文環境依賴思源黑體等開源字型。商業使用需自查字型授權,特別是 Editorial 風格可能需要襯線字型(如思源宋體)。

校驗指令碼效能開銷:validate-social-deck.mjs 需啟動 Playwright 瀏覽器例項,單次校驗耗時 10-30 秒。專案設計為"預設不自動跑",使用者需主動觸發,避免迭代時的等待時間。

AGPL 協議傳染性:若將本專案整合到 SaaS 服務,需開源整個服務端程式碼。個人使用或內部工具無影響,但商業化需評估協議相容性。