配色字級與規格表 使用說明

用途

依你的品牌色，排出配色表（色碼、用途、對比）、字級表、間距圓角和按鈕、輸入框的各種狀態，並附可以貼進前端的 CSS 變數，工程師或設計師照著做就不會錯。

適合誰

• 公司沒有設計師，要自己做網站或後台的工程師。
• 要把規格交給工程師的設計師與接案者。
• 想確認品牌色能不能當按鈕和文字的店家。

怎麼用

1. 把這個 Skill 加進你的 AI 工具。
2. 貼上品牌色色碼，說明用在手機網頁、App 還是後台。只知道顏色名稱也可以，它會用示意色並寫明。
3. 直接說「幫我配色和字級，要給工程師」。

範例

你這樣說：「品牌色是橘色 #F08A24，要做手機預約網站，幫我配色跟字級，要給工程師。」

你會得到：第一句就告訴你 #F08A24 配白字只有 2.51:1，不到 4.5:1，所以按鈕保留橘底、字改深色。接著是配色表（色碼、用途、對比）、字級表，和一段 CSS 變數。你給的橘色原樣保留，加深色另外列。

注意

• 對比數字只寫查表或算過的；沒把握會寫「對比未驗算」，請用對比檢查工具確認。
• 只給文字規格和程式碼，不產生 Figma 檔或圖片。
• CSS 沒有實際執行過，貼上後請在瀏覽器看一次。
• 只給顏色名稱時用的是示意色，不是你的品牌色。
• 字型授權請自己確認；要用付費字型，先問授權方。

技序 Jixu AI 出品