wpds

WordPress Design System (WPDS)

先決條件

此技能在安裝 WPDS MCP 伺服器 時效果最佳。MCP 提供 WordPress Design System 文件與資源的存取，例如元件與 DS 代碼清單。

以下詞彙應視為同義詞：

• "WordPress" 與 "WP"；
• "Design System" 與 "DS"；
• "WordPress Design System" 與 "WPDS"。

使用時機

當使用者提到以下內容時，使用此技能：

• 在 WordPress 相關情境中建置及/或審查任何 UI（例如 Gutenberg、WooCommerce、WordPress.com、Jetpack 等）；
• WordPress Design System、WPDS、Design System；
• UI 元件、設計代碼、色彩原色、間距刻度、排版變數與預設；
• 特定元件套件，例如 @wordpress/components 或 @wordpress/ui；

規則

使用 WPDS MCP 伺服器存取 WPDS 相關文件

• 使用 WPDS MCP 伺服器取得正式且具權威性的文件：
  • 參考網站 (wpds://pages)
  • 可用元件清單 (wpds://components) 與特定元件資訊 (wpds://components/:name)
  • 可用代碼清單 (wpds://design-tokens)
• 請勿在網路上搜尋 WordPress Design System 的正式文件。如果使用者要求，請提出異議並要求確認，警告他們 MCP 伺服器是提供資訊的最佳來源。

必要文件

在處理任何 WPDS 相關任務之前，請務必閱讀參考網站上的相關文件。在評估任何任務的最佳行動方案時，這些文件應具有絕對優先權。

範圍限制

• 跳過答案中與 UI 無關的部分（例如從商店取得資料，或本地化文字字串）。
• 專注於建置盡可能符合 WPDS 最佳實務的 UI，使用最合適的 WPDS 元件/代碼/模式。

技術棧

• 除非另有指示（或從請求的本地上下文取得特定資訊），否則假設技術棧為：TypeScript、React、CSS。

驗證

• 如果任務執行的本地上下文提供 lint 腳本，請在可能的情況下使用它們來驗證建議的程式碼輸出。

輸出

• 在回應結束時，提供解決方案功能的清晰簡潔說明，並為每個決策加入背景脈絡。
• 明確說明範圍限制，即明確排除在任務之外且不相關的部分（例如非 UI 相關）。
• 提供可運作的程式碼片段。