UI Kit（用戶介面工具包）是預先設計好的 UI 元件庫（按鈕、表單、導航、圖示等），通常為 PSD 格式。善用它能大幅縮短設計決策時間，讓團隊專注於功能邏輯與可用性測試。本文以 Flat UI 為例，示範從挑選 Kit、提取元件、調整屬性、變更色系、使用矢量圖示到最終匯出切圖的標準化流程。

推薦 UI Kit

• Flat UI Pro（專業框架）
• Flat AP UI Kit
• Featherweight UI（免費、矢量、視網膜就緒）
• Flat Design UI Kit Vol.1
• 免費 Flat UI Kit

標準化使用流程

1. 開啟 PSD、理解圖層結構：通常分「Basic Elements」「Samples」「Background」三大群組。
2. 移動工具開啟「自動選取-群組」，提取所需元件至新檔。
3. 直接選取工具微調形狀尺寸位置。
4. 雙擊形狀圖層縮圖快速換色，建立專屬色系。
5. 矢量圖示應用：圓角矩形做底、置入圖示、加按鈕狀態，豐富互動視覺。
6. 匯出切圖：選取元件圖層（非群組）→ 拖入新透明背景檔 →「影像 > 裁切」勾選透明像素 → `Ctrl+Shift+Alt+S` 存儲為 Web 格式 → PNG-24 高品質輸出。