編寫含間距、字型與元件狀態的設計規格
別在開發期間反覆回答相同的提問。提前生成一份規格,把間距體系、字階和每個元件狀態都釘死。
好規格故意寫得無趣:它精確說明卡片有多少內邊距、標籤用哪個字號、按鈕按下時變成什麼顏色。正是這種精確,讓兩名工程師不開會也能做出一樣的東西。
這個工具替你起草這種精確性。把介面給它,它會返回 token 化的間距體系(4/8/12/16…)、帶字重與行高的字階,以及逐元件的狀態表。你只需把數字改成符合你係統的值;結構已經搭好。
對應工具
📐設計交付說明
把介面描述變成工程可直接落地的交付說明 —— 間距、字型、狀態、無障礙。
常見問題
該用什麼間距體系? +
以 4px 或 8px 為基準是常見預設。工具會提出一套並在整份規格中一致應用,你只需調整一次基準值。
會覆蓋響應式斷點嗎? +
會 —— 它會說明在更小寬度下佈局如何迴流、哪些元素堆疊或隱藏。
能配合任意設計系統用嗎? +
能。它輸出通用 token,你再對映到自己的系統(Material、Tailwind 或自定義體系等)。