前言¶

拿到設計稿截圖後，要把按鈕、間距、字號、配色一點點還原成微信小程序的 WXML、WXSS 和組件結構，手工量尺寸、切圖、寫樣式，既慢又容易和設計稿走樣。下面介紹的這個 Skill 解決的就是這一步：輸入一張設計稿截圖，輸出對應的微信小程序頁面代碼。

這是什麼¶

「設計稿截圖轉小程序代碼」是一個基於通用 SKILL.md 格式的 Agent Skill，座標 @user_92725383/miniapp-ui-screenshot，版本 1.0.0，由社區作者 user_92725383 發佈，來源標註爲 community，屬於 dev-programming 分類。

它解決的問題很明確：設計稿截圖 → 微信小程序頁面代碼。

注意它不是騰訊官方出品，使用前要按社區工具的標準去核對生成結果。

核心功能¶

已覈實的能力只有一條：

• 輸入設計稿截圖，輸出微信小程序頁面代碼。

資料裏沒有列出更細的能力清單，比如是否支持多頁面、是否生成組件拆分、是否處理切圖資源，因此這裏不做展開。

安裝與啓用¶

已抓取資料中沒有給出官方安裝命令或目錄約定，因此不在這裏編造。請打開官方頁面獲取當前的安裝方式：

https://api.skillhub.cn/user_92725383/miniapp-ui-screenshot

頁面信息：

名稱: 設計稿截圖轉小程序代碼
版本: 1.0.0
分類: dev-programming
標籤: requires_api_key=false

requires_api_key=false 表示該 Skill 不需要額外申請 API Key，啓用門檻較低。

典型用法¶

官方簡介只給了輸入輸出：

設計稿截圖 → 微信小程序頁面代碼

資料中沒有提供可復現的示例命令或調用參數，所以這裏不寫具體用法。使用時按頁面說明把設計稿截圖交給 Agent，由 Skill 生成小程序頁面代碼，再在開發者工具裏打開項目覈對。

適用場景與注意¶

適合：手上有設計稿截圖、需要快速產出微信小程序頁面代碼結構和樣式的開發者。

需要注意：

• 來源是 community，不是官方發佈，生成代碼要先過一遍再合入項目。
• 生成結果只是頁面代碼，圖片資源、接口請求、數據綁定仍需自己接入。
• 頁面上的評分、下載等數據會隨時間變化。已抓取資料記錄的是評分 100000、下載 1271、安裝 0；另有線索給出的是評分 99223、下載 1149，兩者不一致，以頁面實時顯示爲準。

結尾¶

這個 Skill 的價值在於省掉從設計稿截圖手工還原頁面的那一步，直接拿到小程序頁面代碼作爲起點，再按項目實際調整。

官方地址：https://api.skillhub.cn/user_92725383/miniapp-ui-screenshot
SkillHub 頁面：https://www.skillhub.cn/skills/user_92725383/miniapp-ui-screenshot