design-system-implementation

此技能作為優先考量設計系統的實作助理，確保所有前端程式碼嚴格遵循既定的設計約束，而非隨意進行樣式設定。它設計為在建立專案設計系統（通常定義於 design/design-system.json）後的第二階段運作，縮短設計代碼（tokens）與產品級實作之間的差距。代理程式會解析包括顏色、間距比例、排版與元件配方在內的設計系統中繼資料，以指導 React 與 Tailwind CSS 等框架的程式碼生成。它透過驗證每個新元件、頁面或流程是否符合授權的模式庫來防止架構偏離，確保整個儲存庫中擁有可訪問性標準與一致的使用者體驗。

• 自動擷取 design/design-system.json 與選用的 design/design.json 作為樣式真理來源。

• 將複雜的 UI 需求映射至現有的元件變體，以減少重複程式碼。

• 強制遵守排版層級、顏色狀態（主要、成功、錯誤等）以及版面間距網格。

• 提供關於產生的程式碼如何透過代碼利用來遵循系統約束的明確回饋。

• 若需求需要新模式，將建議受控的設計系統擴充，確保 JSON 配置完整性。

• 驗證元件可訪問性，包括 ARIA 標籤、鍵盤導覽與語意化 HTML 結構。

• 最適合維護長期前端擴充性且視覺一致性至關重要的團隊。

• 請在 design-system-from-reference 技能成功引導設定檔後使用。

• 要求開發者提供新功能的需求，包括框架選擇或資料層互動等限制。

• 若缺少設計系統，技能將提示使用者優先初始化，而非隨意猜測樣式。

• 非常適合在不發明任意工具類別的情況下，將現有舊版 UI 重構為連貫且符合設計系統的結構。

• 透過在實作期間識別差距時建議設計系統的 JSON 修補程式，支援系統化的 UI 擴充。