前言¶
公衆號正文樣式往往要手寫或改 CSS，再對照編輯器裏的實際 DOM 反覆調。通用網頁主題不能直接套：選擇器、資源引用方式和字體限制都和普通站點不一樣。若你已經在用 Markdown 轉公衆號排版（例如基於 #wenyan 命名空間的工具鏈），更需要一套能被 Agent 穩定執行的生成規則，而不是每次讓模型「自由發揮」樣式。
下面介紹 SkillHub 社區技能 微信公衆號自定義主題生成器（座標 @user_d8946e26/generate-wenyan-theme）。它把「視覺需求 → 可落地的 CSS 文件」寫成 Agent 可讀的 SKILL 規範，並強調微信側最容易踩坑的命名空間與資源約束。
這是什麼¶
微信公衆號自定義主題生成器 是面向 AI Agent 的 Skill（基於通用 SKILL.md 格式），由社區發佈者 user_d8946e26 維護，當前版本 1.0.0，分類爲 design-media，來源爲 community。
官方一句話定位（與 Skill 元數據一致）：
AI-ready skill to design and generate highly customized CSS themes for WeChat Official Accounts.
它解決的是：根據自然語言描述設計與生成高度定製化的 CSS 主題，並僅負責生成 CSS 代碼並保存爲本地文件（不負責公衆號後臺的 HTML 排版或一鍵發佈）。Skill 標註 requires_api_key=false，安裝使用不依賴額外 API Key。
SkillHub 頁面（截至資料抓取）：評分 100000，下載 1301，安裝 91。
- 技能頁：https://www.skillhub.cn/skills/user_d8946e26/generate-wenyan-theme
- API 標識：https://api.skillhub.cn/user_d8946e26/generate-wenyan-theme
核心功能¶
以下能力均來自該 Skill 自帶的 SKILL.md 說明。
自然語言轉 CSS¶
Agent 讀取技能後，應能理解用戶的視覺需求（例如賽博朋克風、帶裝飾的引用塊、深色代碼塊等），並輸出對應的 CSS，而不是隻給設計建議。
微信排版規範適配¶
生成代碼須嚴格遵循 #wenyan 命名空間：所有選擇器必須以 #wenyan 開頭，中間用空格與元素選擇器分隔。缺少前綴的樣式在目標 DOM 中不會生效。
示例（技能內給出的對錯對照）：
/* 正確 */
#wenyan h1 { color: red; }
/* 錯誤 */
h1 { color: red; }
字體與字號約束¶
- 不應主動設置
font-family，以便適配公衆號編輯器的系統字體。 - 字號建議控制在合理範圍（技能建議約
12px–18px），避免溢出或閱讀困難。
元素級定製速查¶
技能提供從全局、標題（含 span 與 ::before 裝飾）、段落、引用、代碼塊、hr、a 等的選擇器與常用屬性對照表，便於 Agent 按結構生成完整主題，而不是隻改一兩處顏色。
高級視覺效果¶
在遵守約束的前提下，可使用僞元素（::before、::after）、漸變（linear-gradient）、內聯 SVG / Base64 等實現更復雜的版式。
外部資源規則¶
- 禁止本地路徑，例如
url("./bg.png")。 - 允許：Data URI（推薦）、
https://遠程地址。 - 不支持
@font-face引入 Web 字體。
參考默認結構¶
生成新主題時，技能要求參考 wenyan-cli 風格的 default.css 結構（全局 #wenyan、標題層級、列表、圖片、表格、引用、代碼塊、分割線、鏈接等）。完整模板見技能包內 SKILL.md 的代碼塊，篇幅較長，安裝後可直接對照修改。
安裝與啓用¶
通過 SkillHub CLI 安裝（推薦）¶
SkillHub 技能頁給出的安裝方式是：讓 Agent 按 SkillHub 安裝文檔 安裝座標 @user_d8946e26/generate-wenyan-theme。
文檔要求：安裝時必須用 --dir 指向當前 Agent 實際使用的 skills 目錄，否則默認落到 ./skills/ 可能無法被識別。
1、檢查是否已安裝 CLI：
command -v skillhub && skillhub --version
2、若未安裝，可按文檔執行完整安裝或僅 CLI（節選）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
3、安裝本技能（將 <skills 目錄> 換成你環境的路徑）：
skillhub install @user_d8946e26/generate-wenyan-theme --dir <skills 目錄>
SkillHub 文檔列出的常用 skills 目錄包括：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
其他客戶端（Windsurf、Gemini CLI 等）路徑以 安裝文檔 第四節爲準。安裝後按你所用 Agent 的慣例重啓或刷新技能列表，使 SKILL.md 被加載。
技能包內標識¶
SKILL.md 頭部元數據中 name 爲 generate-wechat-theme，與 SkillHub 座標 generate-wenyan-theme 並存；以安裝座標 @user_d8946e26/generate-wenyan-theme 爲準即可。
典型用法¶
技能定義了一套 Agent 執行步驟，可在對話中直接復現。
- 分析需求：從用戶描述中提取風格關鍵詞（如深色、科技風）和主色調。
- 生成 CSS：嚴格使用
#wenyan前綴，覆蓋全局、標題、正文、引用、代碼塊等必要選擇器。 - 保存文件：將結果寫入當前工作目錄的本地文件，例如
theme.css。 - 後續引導：技能說明中建議用戶再使用
apply-wechat-custom-theme技能做測試渲染或發佈；該步驟屬於同一工作流中的銜接，需另行安裝對應 Skill。
向 Agent 發起任務的示例表述（示意，按你的項目路徑調整輸出文件名）：
請按已安裝的「微信公衆號自定義主題生成器」技能：
1. 主題：深色科技風，主色 #00d4ff，引用塊左側高亮條；
2. 遵守 #wenyan 命名空間與資源引用限制；
3. 生成完整 CSS 並保存爲 theme.css。
適用場景與注意¶
適合誰
- 用 Markdown /
wenyan類工具寫公衆號，需要頻繁換膚或做品牌定製 CSS 的開發者或運營。 - 希望把「排版規範」固化在 Skill 裏，減少每次手寫 CSS 和反覆糾正選擇器前綴的團隊。
限制與注意
- 本 Skill 只生成 CSS 文件，不替代公衆號編輯器內的排版操作；測試與套用需結合你的渲染工具鏈（技能文檔指向
apply-wechat-custom-theme作爲可選下一步）。 - 違反
#wenyan前綴、使用本地url()或@font-face會導致樣式不生效或與環境不兼容，生成後應人工或工具校驗一遍。 - 版本以 SkillHub 爲準（當前 1.0.0）；升級可用
skillhub對同一座標更新到 Agent 的 skills 目錄。
結尾¶
微信公衆號自定義主題生成器 把公衆號主題 CSS 的命名空間、元素表和資源邊界寫進 Agent 指令，適合在已有 #wenyan 排版流程裏做可複用的主題生成。安裝與詳情見 SkillHub：
https://www.skillhub.cn/skills/user_d8946e26/generate-wenyan-theme
