一份 Token 契約
模組只讀 --ds-* 變數，風格只寫這些變數。兩邊互不認識，所以任何組合都成立。
模組
33 個區塊，依「你要做什麼」分類
每個區塊都只讀 token 契約，所以現在畫面上的樣子，就是你目前選的風格 螢光墨紙。 想換個風格看？右上角的色票按鈕，或按 ⌘K。
⌘K
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
- 份工程規範
定 價
個人
自己接案、自己做產品。
免費
永久免費・不需要信用卡
全部風格與模組
- 六種風格 × 三十個模組
- 每個風格的設計系統頁
- 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 個
適合臨時加入的外包設計師這種短期需求
輸入驗證碼
我們寄了六位數字到 y****g@example.com，五分鐘內有效。
用別的方式驗證？改用簡訊
設定
選「跟隨系統」時會依照你作業系統的設定切換。
減少動態效果
關閉頁面轉場與視差捲動。
高對比模式
加深文字與邊框顏色。
刪除專案「northline-web」
這個動作無法復原。刪除後以下內容會一起消失：
- 142 個頁面與所有版本紀錄
- 3 位協作成員的存取權
- 所有 API 金鑰與 Webhook 設定
備份會保留 30 天，期間可以聯絡客服還原；30 天後永久刪除。
ESC
動作
建立新專案 ⌘N
產生檔案包 ⌘E
邀請成員
最近開啟
客戶官網 · 螢光墨紙 2 小時前
後台改版 · 北歐靜白 昨天
活動頁 · 粗野等寬 3 天前
前往
設定 · 外觀
計費與方案
總覽
最近 30 天
本月產生檔案包
48
+12%
平均組裝時間
3.4 分
-18%
待審核區塊
6
+2
剩餘席次
3 席
30%
最近的專案
| 專案 | 規模 | 狀態 | 更新 |
|---|---|---|---|
| 客戶官網 · 螢光墨紙 | 10 區塊 | 已完成 | 2 小時前 |
| 後台改版 · 北歐靜白 | 14 區塊 | 處理中 | 5 分鐘前 |
| 活動頁 · 粗野等寬 | 6 區塊 | 待審 | 昨天 |
| 文件站 · 雜誌襯線 | 8 區塊 | 失敗 | 昨天 |
設 計 系 統
改一個變數，整站跟著變。
左邊調的每一格都是 token 契約裡的變數；右邊是任何模組拿到這些值之後的樣子。
功能卡片標題
這張卡片的圓角、間距、陰影、邊框與字級，全部來自左邊那幾個變數。
看看這個顏色當文字的樣子 →
tokens.css
| 專案 | 負責人 | 規模 | 狀態 | 更新時間 | |
|---|---|---|---|---|---|
| 客戶官網 · 螢光墨紙 | 林彥廷 | 10 區塊 | 已完成 | 2 小時前 | |
| 後台改版 · 北歐靜白 | 陳怡君 | 14 區塊 | 處理中 | 5 分鐘前 | |
| 活動頁 · 粗野等寬 | 王大明 | 6 區塊 | 待審 | 昨天 | |
| 文件站 · 雜誌襯線 | 林彥廷 | 8 區塊 | 失敗 | 昨天 | |
| 登入流程 · 暖陶土 | 陳怡君 | 4 區塊 | 已完成 | 3 天前 |
還沒有任何專案
建立第一個專案，挑一個風格，我們會幫你把起始檔案準備好。
找不到「深色 定價表」
試試看拿掉「已完成」這個篩選，或改用比較短的關鍵字。
你沒有這個工作區的權限
請工作區管理員把你加進成員清單，加完重新整理就會出現。
檔案包已產生
螢光墨紙 · 5 個區塊 · React
額度快用完了
團隊方案只剩 1 個席次。
匯出失敗：這個模組缺少原始碼
已經回報給我們了，你可以先換一個區塊。
程式碼助理
claude-opus-5 · 已連線 3 個檔案
為什麼這支 API 在多租戶的時候會這麼慢？
Read src/services/user.service.ts 完成
export async function getUser(userId: string) {
return db.user.findUnique({ where: { id: userId } });
}修正多租戶快取問題
7 個步驟 · 已進行 12 秒 · 使用 3,240 tokens
-
規劃修改範圍
完成 2100 ms找出所有呼叫 getUser() 的位置，判斷哪些需要帶 tenantId。
-
Grep
完成 340 mspattern: "getUser\(" · 命中 14 個檔案
-
Read
完成 120 mssrc/services/user.service.ts
-
需要你的同意才能寫入檔案
等待你Edit · src/services/user.service.ts
-
Edit
排隊中把快取 key 改成帶 tenantId
-
Bash
排隊中npm test -- user.service
-
回報結果
排隊中
Tooltip
說明用的，不是藏東西用的
四個方向
圖示按鈕
用 Tab 走一次，focus 時也會出現。
名詞解釋
這個月的 有效額度 還剩 18 分鐘，超過的部分會用 加購單位 計算。
不能做的事
不要把唯一的說明放在 tooltip 裡 —— 手機上沒有 hover，那段字等於不存在。
不要在 tooltip 裡放連結或按鈕 —— 滑鼠移過去的路上它就消失了。
不要用 tooltip 顯示錯誤 —— 錯誤要留在畫面上直到被處理。
停用狀態
停用的按鈕本身不會觸發 tooltip，要包一層。
處理中
按下去看游標：`aria-busy` 會讓游標變成 progress。
Scroll
捲軸也是設計的一部分
Styled
預設。看得見、跟著主題走。
開箱不睡覺 EP.40 8:00
產品發表會 EP.41 15:13
客戶簡報 EP.42 22:26
街訪 EP.43 29:39
年度回顧 EP.44 36:52
開箱不睡覺 EP.45 43:05
產品發表會 EP.46 10:18
客戶簡報 EP.47 17:31
街訪 EP.48 24:44
年度回顧 EP.49 31:57
開箱不睡覺 EP.50 38:10
產品發表會 EP.51 45:23
客戶簡報 EP.52 12:36
街訪 EP.53 19:49
Overlay
滑鼠移進來才出現，不佔版面。
開箱不睡覺 EP.40 8:00
產品發表會 EP.41 15:13
客戶簡報 EP.42 22:26
街訪 EP.43 29:39
年度回顧 EP.44 36:52
開箱不睡覺 EP.45 43:05
產品發表會 EP.46 10:18
客戶簡報 EP.47 17:31
街訪 EP.48 24:44
年度回顧 EP.49 31:57
開箱不睡覺 EP.50 38:10
產品發表會 EP.51 45:23
客戶簡報 EP.52 12:36
街訪 EP.53 19:49
Hidden ＋ 邊緣淡出
藏捲軸就一定要補一個「還有更多」的訊號。
開箱不睡覺 EP.40 8:00
產品發表會 EP.41 15:13
客戶簡報 EP.42 22:26
街訪 EP.43 29:39
年度回顧 EP.44 36:52
開箱不睡覺 EP.45 43:05
產品發表會 EP.46 10:18
客戶簡報 EP.47 17:31
街訪 EP.48 24:44
年度回顧 EP.49 31:57
開箱不睡覺 EP.50 38:10
產品發表會 EP.51 45:23
客戶簡報 EP.52 12:36
街訪 EP.53 19:49
橫向：篩選列
橫向捲動藏捲軸是合理的 —— 被切一半的下一個項目本身就是「還有更多」的提示。
寬表格
表格在自己的容器裡橫捲，不會把整頁撐寬。這是最常見的手機破版原因。
| 專案 | 負責人 | 語言 | 格式 | 狀態 | 更新時間 | 長度 |
|---|---|---|---|---|---|---|
| 開箱不睡覺 EP.40 | 陳怡君 | 繁體中文 | SRT / VTT / MP4 | 已完成 | 2 小時前 | 8:00 |
| 產品發表會 EP.41 | 陳怡君 | 繁體中文 | SRT / VTT / MP4 | 已完成 | 2 小時前 | 15:13 |
| 客戶簡報 EP.42 | 陳怡君 | 繁體中文 | SRT / VTT / MP4 | 已完成 | 2 小時前 | 22:26 |
| 街訪 EP.43 | 陳怡君 | 繁體中文 | SRT / VTT / MP4 | 已完成 | 2 小時前 | 29:39 |
另外兩個常被忘記的：overscroll-behavior: contain 讓捲到底時不會帶著整頁一起動；scrollbar-gutter: stable 讓內容從一頁變兩頁時，版面不會突然往左跳 15px。
Cursor
游標會先告訴使用者能不能點
pointer 可以點的東西：按鈕、連結、分頁籤text 可以選取或輸入的文字not-allowed 停用中。不要留 pointerprogress 在處理，但你還能操作別的wait 整個畫面卡住。應該很少用到grab / grabbing 可以拖的東西，按下要換成 grabbingcol-resize 拖曳分隔線改寬度zoom-in 點了會放大的圖copy 點了會複製到剪貼簿help 有說明、但點了不會怎樣crosshair 要精準選點：裁切、取色default 純顯示，什麼都不會發生處理中的狀態
aria-busy="true" 同時做兩件事：游標變 progress，
內部不再吃點擊。少了第二件，使用者會連按五次。
按下去試試
拖曳
grab → 按下 → grabbing。
沒有切換的話，拖曳過程會感覺沒有回應。
拖曳分隔線
分隔線要用 col-resize，而且拖的時候不能選到旁邊的文字
—— 所以要加 user-select: none。
左側面板
右側內容
關於自訂游標：換掉系統游標會失去作業系統的尺寸與高對比設定，主執行緒忙碌時還會有延遲。 活動頁與形象站可以玩，每天要用八小時的工具不要。這個站只有 粗野等寬 這一個風格換了游標，切過去就看得到差別。
Spacing
間距是決定，不是微調
刻度
十階，全部乘上密度係數。設計時只從這裡挑，不要自己想數字。
space-1 space-2 space-3 space-4 space-5 space-6 space-7 space-8 space-9 space-10 親疏關係
標題屬於它下面的段落，不屬於上面的區塊。所以上方的空間要比下方大。
錯：上下一樣
方案內容
每月 30 分鐘影片，可跨裝置接續編輯。
計費方式
年繳可省 17%，隨時可以取消。
對：上大下小
方案內容
每月 30 分鐘影片，可跨裝置接續編輯。
計費方式
年繳可省 17%，隨時可以取消。
節奏：容器負責，元素不帶 margin
.ds-flow > * + * 只在兄弟之間加間距，
第一個之前與最後一個之後永遠沒有多餘的空隙 —— 所以這個區塊丟到任何地方都不會多一截。
把影片丟進來
支援 MP4、MOV、MKV，最大 2GB。檔案留在你的電腦上。
看一遍，改幾個字
時間軸已經對好了，你只需要處理專有名詞。
檢查方法：搜尋原始碼裡的 margin 與 padding，只要出現不在刻度上的數字，就是有人在憑感覺推像素。
混搭
同一個模組，六種風格
這就是你之後在專案裡換風格會看到的結果。