pencil-ui-design

Pencil UI Design Skill 為 Pencil MCP 生態系統提供了一套完整的框架，用於建立一致且高品質的使用者介面。此技能專為需要將抽象設計需求轉化為可程式化 UI 實作的工程師與設計師所設計。透過利用集中式的設計 Token 與模組化組件庫，使用者能實現快速、可重複且可擴展的設計成果，同時符合工業級標準。

• 標準化的設計系統 Token，涵蓋全域顏色、字體層級、4px 網格間距系統以及基於海拔高度的陰影定義。

• 包含多種可立即使用的 UI 組件庫，如 Primary/Secondary 按鈕、卡片、輸入框、頭像與徽章，並定義了精確的佈局、內距與圓角屬性。

• 整合支援 Material Symbols Rounded 圖標集，確保設計成果的視覺一致性。

• 先進的工作流程自動化能力，允許進行批量更新、組件參照 (ref) 以及屬性覆蓋，以在複雜文件中維持視覺和諧。

• 內建佈局健全性檢查、截圖生成與設計屬性驗證工具，確保最終產出符合設計規範。

• 此技能需要運作中的 Pencil MCP 服務環境，以透過 .pen 文件格式執行設計操作。

• 使用者在開始佈局前應使用 mcp_pencil_set_variables 初始化設計系統變數，以確保 Token 正確傳播。

• 輸入透過定義組件 Frame 屬性的結構化 JSON 物件處理；輸出則包含渲染在 Pencil 文件模型中的設計節點。

• 透過使用 reusable: true 旗標來提升模組化程度，藉此利用批量設計 API 在多個實例中進行高效更新。

• 請確保嚴格遵守 4px 網格與推薦的 Inter/Noto Sans SC 字體堆疊，以維護工業級 UI 標準的完整性。