extract

概覽

什麼是 extract 技能？

extract 技能專為協助團隊與開發者識別、提取並整合可重複使用的 UI 元件、設計代碼與樣式，形成完整的設計系統而設計。透過揭露重複的樣式與硬編碼數值，extract 簡化了建立或重構元件庫的流程，讓 UI 設計更具擴展性與維護性。

誰適合使用 extract？

• 正在建立或維護設計系統的產品團隊
• 希望減少重複工作的 UI/UX 設計師與前端開發者
• 希望在用戶介面中強化一致性的組織

extract 解決的問題

• 偵測重複的 UI 元件與硬編碼設計數值
• 指導提取設計代碼（色彩、間距、字體）以便重用
• 協助將不一致的 UI 樣式整合成統一系統
• 支援從現有程式碼庫建立或豐富設計系統

使用說明

安裝步驟

1. 使用以下指令安裝 extract 技能：

   npx skills add https://github.com/pbakaus/impeccable --skill extract

2. 從 SKILL.md 檔案開始，了解詳細的工作流程。

3. 閱讀相關檔案如 README.md、AGENTS.md 與 metadata.json，獲取更多背景資訊。

4. 探索任何 rules/、resources/、references/ 或 scripts/ 目錄，尋找支援資料。

典型工作流程

1. 探索

• 在程式碼庫中找到您的設計系統或元件庫。
• 分析結構、命名慣例與文件樣式。
• 識別重複元件、硬編碼數值與不一致的變體。

2. 提取規劃

• 根據使用頻率與重用潛力，優先決定要提取的元件與代碼。
• 若尚無設計系統，先與團隊確認後再建立。

3. 提取與豐富

• 將重複的 UI 樣式重構為可重用元件。
• 整合色彩、間距與字體等設計代碼。
• 為新元件與代碼撰寫文件，便於未來使用。

4. 遷移

• 用新的系統化元件與代碼取代程式碼庫中的舊樣式。
• 確保一致性並視需要更新文件。

何時使用 extract

• 開始或擴充設計系統時
• 進行 UI 重構或現代化專案時
• 強化一致性並減少前端程式碼技術負債時

常見問題

extract 究竟做了什麼？

extract 會分析您的程式碼庫，找出重複的 UI 樣式與硬編碼設計數值，並協助您將它們重構為可重用的元件與設計代碼，打造設計系統。

extract 只適用於新設計系統嗎？

不是。extract 對於建立新設計系統與優化現有系統都非常有價值，能幫助整合並豐富您的元件庫。

我應該先看哪些檔案？

建議先從 SKILL.md 了解核心工作流程，再閱讀 README.md 與相關的 metadata 檔案以獲得更多指引。

extract 可以搭配任何前端框架使用嗎？

extract 著重於工作流程，能適應大多數前端框架或程式碼庫。請依您的工具與專案結構調整使用流程。

我在哪裡可以看到所有相關檔案？

請至該專案的 Files 標籤，瀏覽完整檔案樹，包括參考資料與輔助腳本。