前言¶
寫微信小程序頁面時，重複勞動很多：照着需求搭 WXML 結構、寫 WXSS 樣式、補 JS 交互、配 JSON 頁面配置，四個文件互相對齊。改動一處佈局，往往要同時改三四份代碼，容易出錯。
下面介紹的 Skill「自然語言生成小程序頁面」做的事很直接：你用一句自然語言描述想要什麼頁面，它給出這個頁面完整的微信小程序代碼，包含 WXML、WXSS、JS、JSON 四個文件。它屬於 dev-programming 分類，由社區發佈者 user_92725383 維護，版本 1.0.0，來源標記爲 community，當前不需要 API Key。
這是什麼¶
一句話定位：自然語言描述 → 微信小程序完整頁面代碼（WXML+WXSS+JS+JSON）。
它不是一個小程序框架，也不是低代碼可視化編輯器，而是把「描述需求 → 得到四件套代碼」這一步自動化的生成類 Skill。你負責把頁面需求說清楚，它負責產出可以直接放進項目的頁面文件。
官方地址：https://api.skillhub.cn/user_92725383/miniapp-page-builder
SkillHub 頁面：https://www.skillhub.cn/skills/user_92725383/miniapp-page-builder
核心功能¶
只列出資料中明確出現的能力：
- 接收自然語言描述作爲輸入，不需要手寫界面結構或樣式代碼。
- 輸出微信小程序完整頁面代碼，覆蓋 WXML（結構）、WXSS（樣式）、JS（邏輯）、JSON（頁面配置）四個部分，而不是隻給片段。
- 輸出是頁面級別的四件套，四個文件對應同一個頁面，便於直接落盤使用。
- 元數據顯示 requires_api_key=false，使用前不需要準備額外的 API Key。
資料中沒有列出它支持的頁面類型、組件範圍、是否支持多頁面項目或自定義組件複用。這些能力邊界需要在實際使用時自行確認，不要假設它覆蓋全部小程序開發場景。
安裝與啓用¶
已抓取資料中只給出了 Skill 的官方地址、SkillHub 頁面和版本信息，沒有提供命令行安裝命令、目錄約定或配置文件字段，也沒有說明 Cursor、Codex CLI、Claude Code 在不同宿主下的安裝差異。
因此這裏不寫未經覈實的安裝命令。啓用方式以官方頁面爲準：打開 SkillHub 頁面查看安裝或導入說明，按頁面上的指引把該 Skill 接入你使用的 Agent 宿主。
需要覈對的信息點：
- Skill 座標爲
@user_92725383/miniapp-page-builder，版本 1.0.0，在按名稱引用或檢查版本時可以用上。 - 分類是 dev-programming，如果宿主支持按分類瀏覽，可以在該分類下找到它。
- 標籤爲 requires_api_key=false，說明不涉及密鑰配置；若你的宿主仍提示需要密鑰，那是宿主側的通用設置，與該 Skill 無關。
典型用法¶
資料中的簡介給出的是能力描述，沒有附帶可復現的完整輸入輸出示例。下面給出的是使用流程，輸入內容示例屬於按能力描述組織的演示，不是官方原文。
- 明確頁面目標：想清楚這個頁面要展示什麼內容、有哪些區域、點擊後做什麼。描述越具體，得到的結構越可用。
我想做一個商城商品列表頁，頂部有搜索框，下面是商品卡片網格，每張卡片包含商品圖、名稱、價格和「加入購物車」按鈕，點擊按鈕時把商品信息打印到控制台。
-
把這段描述交給已啓用該 Skill 的 Agent，要求它生成完整頁面代碼。
-
拿到輸出後檢查四件套：
- WXML：確認頁面結構、容器層級、按鈕綁定的事件名與 JS 中的方法名一致。
- WXSS：確認佈局是盒模型而不是小程序默認的 View 佈局，檢查 rpx 單位和樣式作用範圍。
- JS：確認 Page 配置、data 字段、事件處理函數是否齊全。
- JSON：確認頁面標題、是否啓用某項頁面級能力。
- 把四個文件按小程序項目結構放好，例如
pages/goods-list/下分別命名爲index.wxml、index.wxss、index.js、index.json，然後在app.json的pages數組中登記路徑。
pages/
goods-list/
index.wxml
index.wxss
index.js
index.json
- 在微信開發者工具中編譯預覽，再根據實際顯示調整。生成的代碼是起點，不是終點。
適用場景與注意¶
適合的場景：
- 需要快速搭出頁面骨架，再在骨架上繼續迭代。
- 想先看到一份完整四件套，用來對照自己手寫的實現。
- 熟悉的頁面類型（列表頁、表單頁、詳情頁）的樣板生成。
需要注意的限制：
- 生成結果需要人工審查。WXML 中的事件綁定、JS 中的方法名、WXSS 中的類名，任一處不一致都會導致頁面跑不起來，審查時優先對齊這三處。
- 複雜業務邏輯、網絡請求、狀態管理、自定義組件封裝不在已覈實的能力範圍內。需要這些能力時，要麼在生成結果基礎上自行補齊，要麼換用更專門化的工具。
- 樣式與佈局仍需在微信開發者工具中實機預覽確認，生成代碼不能替代真機驗證。
- 該 Skill 來自社區發佈者，版本爲 1.0.0，安裝前先看官方頁面說明，確認與你當前的開發棧和宿主兼容。
- 涉及頁面數據來源、登錄態、權限校驗等安全相關邏輯時，不要直接信任生成結果，必須按項目的安全規範自行實現。
結尾¶
這個 Skill 的價值在於省掉從需求到四件套的第一遍編寫工作：你描述頁面，它給出 WXML、WXSS、JS、JSON。生成結果之後仍需自己審查、調整和驗證，但起步成本明顯降低。
官方地址：https://api.skillhub.cn/user_92725383/miniapp-page-builder
