Skip to content
Panshi
EN / /

編寫含間距、字型與元件狀態的設計規格

別在開發期間反覆回答相同的提問。提前生成一份規格,把間距體系、字階和每個元件狀態都釘死。

好規格故意寫得無趣:它精確說明卡片有多少內邊距、標籤用哪個字號、按鈕按下時變成什麼顏色。正是這種精確,讓兩名工程師不開會也能做出一樣的東西。

這個工具替你起草這種精確性。把介面給它,它會返回 token 化的間距體系(4/8/12/16…)、帶字重與行高的字階,以及逐元件的狀態表。你只需把數字改成符合你係統的值;結構已經搭好。

對應工具

📐設計交付說明

把介面描述變成工程可直接落地的交付說明 —— 間距、字型、狀態、無障礙。

試用 設計交付說明 →

常見問題

該用什麼間距體系? +

以 4px 或 8px 為基準是常見預設。工具會提出一套並在整份規格中一致應用,你只需調整一次基準值。

會覆蓋響應式斷點嗎? +

會 —— 它會說明在更小寬度下佈局如何迴流、哪些元素堆疊或隱藏。

能配合任意設計系統用嗎? +

能。它輸出通用 token,你再對映到自己的系統(Material、Tailwind 或自定義體系等)。

相關工具

瀏覽完整的 工具目錄, 或查看全部 磐石服務