一份 Token 契約
模組只讀 --ds-* 變數，風格只寫這些變數。兩邊互不認識，所以任何組合都成立。
designkit
六種風格、三十三個模組、二十七份工程規範。
挑好、混搭，然後整包交給 AI 動手。
同一份 HTML，六種長相。
這些框架都能直接用
- Svelte
- React
- Vue
- Next.js
- Astro
- HTML
- 198
- 種模組 × 風格組合
- 0
- 個 UI 套件相依
- 27
- 份工程規範
怎 麼 運 作
33 模組 × 6 風格 = 198 種合法組合
模組 × 風格自由混搭
換風格不用改一行元件程式碼，只換一個 tokens.css。這不是試出來的，是架構的必然結果。
每個風格都有設計系統頁
色彩矩陣、對比檢查、字級、間距、圓角、陰影、全元件變體 —— 從 token 資料生成，不會過期。
一鍵產生 Prompt
六段結構：角色、輸入、任務、硬性規則、框架轉換、完成條件。可驗證的約束，不是形容詞。
下載即用的檔案包
Token、元件 CSS、模組原始碼，加上這批區塊會用到的規範文件。解壓縮就能開工。
CSS 那一層原封不動
四個框架通用
刻意不用 Tailwind：CSS 自訂屬性是四個框架原生共同支援的唯一語言，換框架不用重寫樣式。
設 計 系 統
改一個變數，整站跟著變。
左邊調的每一格都是 token 契約裡的變數；右邊是任何模組拿到這些值之後的樣子。
功能卡片標題
這張卡片的圓角、間距、陰影、邊框與字級，全部來自左邊那幾個變數。
看看這個顏色當文字的樣子 →
tokens.css
定 價
個人
自己接案、自己做產品。
免費
永久免費・不需要信用卡
全部風格與模組
- 六種風格 × 三十個模組
- 每個風格的設計系統頁
- Prompt 產生與檔案包下載
- Svelte / React / Vue / Next 通用
- 26 份工程規範文件
- 可用於商業專案
團隊
三到十人的產品團隊。
NT$400 ／月
年繳省 17%・一次付 NT$4,800
含 10 個席次
- 六種風格 × 三十個模組
- 每個風格的設計系統頁
- Prompt 產生與檔案包下載
- Svelte / React / Vue / Next 通用
- 26 份工程規範文件
- 可用於商業專案
- COMING SOON 共用自訂風格
工作室
同時服務多個客戶。
NT$1,000 ／月
年繳省 17%・一次付 NT$12,000
席次不限
- 六種風格 × 三十個模組
- 每個風格的設計系統頁
- Prompt 產生與檔案包下載
- Svelte / React / Vue / Next 通用
- 26 份工程規範文件
- 可用於商業專案
- COMING SOON 共用自訂風格
隨時可升級，也隨時可取消；取消後已付的效期照常用到期滿。個人方案不會因此失效。
+1
席次不夠，隨時加購。
NT$240 ／席次・月
隨時可移除・按比例退費
目前已使用 7 ／ 10 個席次，還剩 3 個
適合臨時加入的外包設計師這種短期需求
常 見 問 題
為什麼不用 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 就能開工。
不用註冊・可商用・換風格只要換一個檔案
這一頁用到的模組
10 個區塊，全部可以單獨拿走
- 01 漂浮膠囊導覽 固定在頂部的玻璃膠囊，捲動時浮在內容之上。適合形象頁。 header/floating-pill
- 02 滿版插畫主視覺 滿版藝術背景 + 一條高對比標語橫幅，記憶點最強的開場。 landing/hero-illustration
- 03 信任標誌列 客戶或整合對象的標誌，配合數據佐證。 landing/logo-strip
- 04 功能卡片牆 白卡片內嵌深色示意面板，用畫面而不是文字解釋功能。 landing/feature-grid
- 05 參數控制台 左邊一堆參數、右邊即時預覽，編輯器類產品的核心版型。 workspace/control-panel
- 06 三方案定價 年繳/月繳切換、中間方案強調、逐項功能比較。 pricing/three-tier
- 07 用量加購列 把「還能用多少」畫成進度條，加購按鈕就在旁邊。 pricing/addon-bar
- 08 常見問題摺疊 原生 details/summary，鍵盤可用、不需要 JS。 landing/faq-accordion
- 09 行動呼籲橫幅 結尾轉換區，一句話 + 一顆按鈕 + 一行消除疑慮的小字。 landing/cta-band
- 10 品牌大字頁尾 整塊主色 + 超大字標，把品牌名當作收尾的視覺句點。 footer/brand-block
適合
- AI 產品
- 開發者工具
- 數據儀表板
- Web3
不適合
- 需要大量長文閱讀的內容站
- 兒童/教育產品
個性
- 未來感
- 沉浸
- 技術
- 精密