Prime Design System Kit

本套件採用原子化設計（Atomic Design）方法論，將介面拆解為原子、分子與組織。這種模組化方式具備高度可重複使用性且易於維護。更新單一原子（如按鈕樣式或顏色標記）時，變更會自動套用到所有相關的分子與組織，大幅減少手動更新，確保數百個頁面間的視覺一致性。

每個元件皆使用 Figma 的 Auto Layout 建構，確保元素能隨內容變更動態調整。這消除了文字長度變化或新增清單項目時需手動調整大小的麻煩。此響應式特性模擬了真實的 CSS Flexbox 行為，讓開發者能更清楚理解元件在最終程式碼實作中的表現方式。

Prime 針對顏色、間距、字體與陰影採用集中式的設計標記系統。透過將設計數值與特定元素解耦，團隊無需重建元件即可輕鬆實作主題（如深色模式或品牌專屬變體）。這些標記可直接對應至 CSS 變數或 SCSS/Tailwind 設定，有效縮短設計與生產程式碼之間的差距。

套件包含完整的元件變體，涵蓋懸停（hover）、啟用（active）、停用（disabled）與聚焦（focus）等狀態。這些狀態透過 Figma 的變體屬性管理，設計師可直接在畫布上切換。這減少了庫中主元件的總數，使檔案更輕量且易於導覽，同時提供真實的原型體驗。

每個元件皆經過細緻命名與組織，以符合標準前端命名慣例。套件包含間距、內距與圓角說明，開發者可透過 Figma 的 Dev Mode 輕鬆檢視。這減少了交接過程中的模糊地帶，確保最終實作能精準符合設計意圖。