設計系統

深色模式

下載設計檔 ​

下載這包純文字版的設計規範、放進你的產品 repo, AI(Claude Code、Codex、Gemini CLI)寫程式時就會照著 Accuhit 的規範走。

下載規範包(約 170 KB) 版本 2026-09-17 · 含 67 個元件規範與品牌樣式原始檔

怎麼接進你的專案 ​

① 解壓後把 rd-ai-docs/ 放進 repo 根目錄並 commit

這樣全隊共用同一份,規範更新時也看得到 diff。

② 把 rd-ai-docs/AGENTS.example.md 複製到 repo 根目錄、改名 AGENTS.md

少了這個檔,AI 不會知道規範存在,也不知道去哪裡查。

③ 再建兩個轉接檔,讓三家工具共用同一份規範

CLAUDE.md 和 GEMINI.md,內容都只要一行 @AGENTS.md。

完成後的結構:

你的產品 repo/
├── AGENTS.md          ← 規範守則(Codex 自動讀)
├── CLAUDE.md          ← 一行:@AGENTS.md
├── GEMINI.md          ← 一行:@AGENTS.md
├── rd-ai-docs/        ← 規範全文,AI 需要時自己查
│   ├── README.md
│   ├── 00-design-system.md
│   ├── components/
│   └── source/
└── src/

裡面有什麼 ​

  • AGENTS.example.md —— AI 開發守則,含版本鎖、硬性禁令與查規範的路由表
  • 00-design-system.md —— 全域設計 token(顏色、字體、間距、圓角、圖標)
  • 01-integration.md —— 新專案導入指南(安裝、main.ts、Tailwind / PostCSS 設定)
  • components/ —— 67 個元件,每個都有設計準則、各變體的完整範例程式碼與 Do / Don't
  • foundations/、patterns/ —— 設計基礎細則與整頁版型參考
  • source/ —— 品牌樣式正宗檔案(@accuhit/ui 的完整原始檔)

範例都是可以直接抄的程式碼,不用連回這個網站。

規範更新時 ​

這個網站更新後,回來重新下載、覆蓋舊的就好。 如果你改過 AGENTS.md,覆蓋前先比對差異再合併。

給不用 AI 的工程師

這包也可以直接當文件讀。或者直接看這個網站,內容一樣,差別是網站看得到活範例。