一份 Token 契約
模組只讀 --ds-* 變數，風格只寫這些變數。兩邊互不認識，所以任何組合都成立。
首頁區塊
Landing · 6 個模組
主視覺、功能區、CTA、FAQ
designkit
六種風格、三十三個模組、二十七份工程規範。
挑好、混搭，然後整包交給 AI 動手。
同一份 HTML，六種長相。
前端設計系統
挑風格、挑模組，
剩下的交給 AI。
六種風格、三十三個模組、二十七份工程規範。組好之後產生 prompt 與檔案包，貼上就能開工。
不用註冊・可商用・換風格只要換一個檔案
怎 麼 運 作
33 模組 × 6 風格 = 198 種合法組合
模組 × 風格自由混搭
換風格不用改一行元件程式碼，只換一個 tokens.css。這不是試出來的，是架構的必然結果。
每個風格都有設計系統頁
色彩矩陣、對比檢查、字級、間距、圓角、陰影、全元件變體 —— 從 token 資料生成，不會過期。
一鍵產生 Prompt
六段結構：角色、輸入、任務、硬性規則、框架轉換、完成條件。可驗證的約束，不是形容詞。
下載即用的檔案包
Token、元件 CSS、模組原始碼，加上這批區塊會用到的規範文件。解壓縮就能開工。
CSS 那一層原封不動
四個框架通用
刻意不用 Tailwind：CSS 自訂屬性是四個框架原生共同支援的唯一語言，換框架不用重寫樣式。
常 見 問 題
為什麼不用 Tailwind？
因為這批檔案要能同時活在 Svelte、React、Vue 和 Next.js 專案裡。CSS 自訂屬性是四個框架原生共同支援的唯一語言，而且可以在執行期換色，不需要重跑 build。
換風格真的不用改元件嗎？
不用。元件只讀 --ds-* 變數，風格檔只寫這些變數，兩邊都不認識對方。換風格等於換一個 tokens.css。
模組可以用在商業專案嗎？
可以，不需要付費也不用標示來源。你可以改寫、只取其中一部分，或整包丟進既有專案。
規範文件要怎麼給 AI？
下載檔案包時，這批區塊會用到的規範會一起打包進 guides/ 資料夾，prompt 裡也會列出該讀哪幾份。
我自己的品牌色可以加進來嗎？
可以。新增一個風格就是在 themes.ts 裡加一個物件，大約 50 行資料。加完之後風格庫、設計系統頁、所有預覽和下載包會同時出現它。
為什麼要分 accent 和 accent-ink？
因為夠亮的品牌色當文字幾乎都不合格。螢光綠放在紙色底上的對比只有 1.3:1，所以文字版本必須是另一個經過對比檢查的深色。
下一個專案，不用再從空白開始。
挑一個風格、勾幾個區塊，拿到 prompt 與檔案包，貼給 AI 就能開工。
不用註冊・可商用・換風格只要換一個檔案
這些框架都能直接用
- Svelte
- React
- Vue
- Next.js
- Astro
- HTML
- 198
- 種模組 × 風格組合
- 0
- 個 UI 套件相依
- 27
- 份工程規範