前端設計系統
挑風格、挑模組，
剩下的交給 AI。
六種風格、三十三個模組、二十七份工程規範。組好之後產生 prompt 與檔案包，貼上就能開工。
不用註冊・可商用・換風格只要換一個檔案
同一個區塊，六種風格
這就是「模組 × 色系」的意思
下面六張都是同一份 HTML，差別只有一個 token 檔。
前端設計系統
挑風格、挑模組，
剩下的交給 AI。
六種風格、三十三個模組、二十七份工程規範。組好之後產生 prompt 與檔案包，貼上就能開工。
不用註冊・可商用・換風格只要換一個檔案
前端設計系統
挑風格、挑模組，
剩下的交給 AI。
六種風格、三十三個模組、二十七份工程規範。組好之後產生 prompt 與檔案包，貼上就能開工。
不用註冊・可商用・換風格只要換一個檔案
前端設計系統
挑風格、挑模組，
剩下的交給 AI。
六種風格、三十三個模組、二十七份工程規範。組好之後產生 prompt 與檔案包，貼上就能開工。
不用註冊・可商用・換風格只要換一個檔案
前端設計系統
挑風格、挑模組，
剩下的交給 AI。
六種風格、三十三個模組、二十七份工程規範。組好之後產生 prompt 與檔案包，貼上就能開工。
不用註冊・可商用・換風格只要換一個檔案
前端設計系統
挑風格、挑模組，
剩下的交給 AI。
六種風格、三十三個模組、二十七份工程規範。組好之後產生 prompt 與檔案包，貼上就能開工。
不用註冊・可商用・換風格只要換一個檔案
前端設計系統
挑風格、挑模組，
剩下的交給 AI。
六種風格、三十三個模組、二十七份工程規範。組好之後產生 prompt 與檔案包，貼上就能開工。
不用註冊・可商用・換風格只要換一個檔案
怎麼用
三步驟，從挑風格到 AI 動手
- 01
挑一個風格
六種風格，每一種都是一份 token 檔。挑好之後全站預覽立刻換裝，包括你正在看的這一頁下面所有區塊。
- 02
挑幾個模組
登入頁、定價表、錯誤頁、串流對話…依用途分類。任何模組配任何風格都是合法組合，不需要額外調整。
- 03
交給 Claude Code
複製產生好的 prompt，下載對應的檔案包，丟進專案資料夾。裡面已經包含 token 契約、元件 CSS 與該用到的規範文件。
風格
六種完整的設計系統
模組
依用途分類，不是依元件分類
工程規範
那些 vibe coding 最容易踩的坑
入門 怎麼下 Prompt，AI 才會一次做對 把「感覺」翻譯成可驗證的約束。一份能用的前端 prompt 有六個固定段落，缺一個就會得到看起來對、但沒人能檢查的東西。 約 4 分鐘入門 Vibe Coding 十四個常見地雷 沒有前端經驗、靠 AI 一路生出來的專案，壞掉的地方高度重複。這是清單，每一項都附上怎麼看出來、怎麼修。 約 6 分鐘入門 同一份設計，跑在 Svelte / React / Vue / Next 為什麼是純 CSS 變數而不是 Tailwind、四個框架的模板對照表，以及移植時的逐項檢查。 約 6 分鐘設計系統 Token 契約：模組 × 風格為什麼能自由組合 整套系統只靠一條規則成立 —— 模組只能讀 --ds-* 變數，風格只能寫 --ds-* 變數。這份文件是完整的變數清單與使用規則。 約 7 分鐘設計系統 風格規格書：Neon Ink 螢光墨紙 從 whatsub.equal2.app 分析出來、重新實作的完整風格決策。包含色彩策略、字體階層、密度、動態、材質與明確的 Do / Don't。 約 9 分鐘設計系統 設計系統規格：零件庫與設計頁 tokens → primitives → components → patterns 的完整清單，元件的變體命名規則，以及設計頁必須展示什麼。 約 7 分鐘