前言¶

凡科/華可商城小程序的裝修編輯器是一個網頁版工具，站點域名形如 *.mallapp.vip.webportal.top。運營常見的需求是給「產品中心」頁（分類頁）的廣告位替換配圖：打開編輯器、點進產品中心頁、點廣告位、彈出素材庫、選圖、確認、保存草稿。單次操作不復雜，但廣告位多、圖片常換時，重複點擊非常磨人。

自己用 Playwright 寫腳本時，通常會卡在兩個坑上：素材彈窗的點擊事件不觸發，filechooser 事件不彈出。按常規 UI 自動化思路模擬鼠標點擊，彈窗根本不響應。下面介紹的 Skill 就是針對這兩個坑做的封裝。

這是什麼¶

webportal 商城小程序廣告位配圖自動化 是一個社區來源（community）的 Skill，座標 @user_6af9f15b/webportal-mallapp-decorator-ad，發佈者 user_6af9f15b，當前版本 1.0.2，分類 dev-programming，無需 API Key（requires_api_key=false）。

它解決的問題很單一：在凡科/華可商城小程序裝修編輯器裏，爲分類頁/產品中心的廣告位從素材庫選擇圖片，並保存草稿。實現方式是 Playwright 配合 Vue 2 內部狀態驅動——不依賴彈窗的鼠標點擊，直接操作組件內部狀態，從而繞開素材彈窗不觸發、filechooser 不彈出的問題。

核心功能¶

根據官方簡介，該 Skill 具備以下能力：

1、定位裝修編輯器中「產品中心」頁面的廣告位；
2、繞過素材彈窗點擊不觸發、filechooser 不彈出的問題，通過 Vue 2 內部狀態驅動配圖流程；
3、從素材庫中選擇圖片，填入廣告位；
4、保存草稿（注意是保存草稿，不是直接發佈）。

官方給出的觸發詞如下：

產品中心廣告位、廣告位配圖、商城裝修廣告、webportal 廣告位、分類頁 banner

安裝與啓用¶

該 Skill 基於通用 SKILL.md 格式分發，來源爲 community，無需 API Key。本次撰寫時官方頁面（api.skillhub.cn 與 skillhub.cn）均無法打開，具體安裝命令未能覈實，此處不寫未經驗證的命令。

按通用 SKILL.md Skill 的慣例，啓用方式是把 Skill 文件放入 Agent 的 skills 目錄後，在對話中使用上述觸發詞調用。是否支持 Cursor / Codex CLI / Claude Code 等具體客戶端的差異，官方資料未說明，建議在使用前到官方頁面覈對最新版本與安裝方式。

典型用法¶

官方簡介描述的流程可以歸納爲以下幾步，這也是該 Skill 內部封裝的操作順序：

1、打開目標商城小程序的裝修編輯器頁面（*.mallapp.vip.webportal.top 域名）；
2、進入「產品中心」頁，定位廣告位組件；
3、觸發廣告位的配圖流程，在素材庫中選擇目標圖片；
4、確認選擇，保存草稿。

調用時使用觸發詞，例如直接說「給產品中心頁的廣告位換上素材庫裏的圖，保存草稿」。由於 Skill 通過 Vue 2 內部狀態驅動，第 3 步不需要真實彈出素材窗口或系統文件選擇框，這是它與普通 Playwright 腳本的主要區別。

適用場景與注意¶

適合誰：

• 使用凡科/華可商城小程序、需要頻繁更換產品中心頁廣告位配圖的開發者或運營自動化人員；
• 已經在用 Playwright 做編輯器自動化、被素材彈窗和 filechooser 卡住的人。

限制和坑：

• 只保存草稿，不會直接發佈，發佈仍需人工確認；
• 適用範圍限定在裝修編輯器的分類頁/產品中心廣告位，其他頁面未提及；
• 源碼不在本地，出問題時排查依賴發佈者 user_6af9f15b 的更新；
• 數據以抓取時點爲準：SkillHub 評分 100000，下載 978 次，安裝數爲 0。評分和下載量會隨時間變化，引用時注意時點。

結尾¶

這個 Skill 的價值在於把一個具體、瑣碎的編輯器操作固化下來：用 Vue 2 內部狀態驅動替代脆弱的彈窗點擊，讓廣告位配圖這類重複勞動可以交給 Agent 完成。如果你的場景正好落在凡科/華可商城小程序的裝修編輯器裏，值得試一下。

官方地址：https://api.skillhub.cn/user_6af9f15b/webportal-mallapp-decorator-ad