Brad Frost 2013 年提出的前端設計方法論——把 UI 拆成 5 個層級（Atom / Molecule / Organism / Template / Page），現在被借用來描述任何「化約再組合」的設計思想，包括 卡片盒筆記法 的「一張卡一個想法」原則。

5 層級

Page         ← 完整頁面
  ↑
Template     ← 整體結構（標題 + 主內容 + 側欄）
  ↑
Organism     ← 一個功能完整的區塊（如「導覽列」「商品卡列表」）
  ↑
Molecule     ← 多個原子組合（如「搜尋框 = 輸入框 + 按鈕 + 標籤」）
  ↑
Atom         ← 最小不可拆元素（按鈕、輸入框、icon、文字）

為什麼這樣設計

軟體設計圈長期問題：「重複造輪子」+「改動牽一髮動全身」。

Atomic Design 的洞察：先建構小元件，再組合成大元件——

跨界：應用到 PKM

卡片盒筆記法 的「一則筆記只記錄一件事情」原則跟 Atomic Design 的「Atom 是不可再拆的最小元件」精神同源——這就是為什麼 卡片盒新手原則 第 1 條就引用 Atomic Design。

Atomic Design Zettelkasten
Atom（按鈕） Permanent Note（一張卡）
Molecule（搜尋框） 連結 2-3 張卡組成的 idea cluster
Organism（導覽列） 一篇文章草稿（從卡片組合）
Template（頁面骨架） 寫作 outline
Page（完整頁面） 出版的文章 / 書

→ 兩個領域獨立發展但本質一致——「化約 + 組合」是好設計的通則。

對 vault 的影響

vault 的 wiki entity 設計就是 Atomic Design 思維：

Atomic vault 對應
Atom 一個 wiki entity
Molecule 一個 entity 加上 wiki-link 連到的 2-3 個其他 entity
Organism 一個 domain 內的相關 entity 集合
Template wiki/maps/X.md 主題地圖
Page 用 wiki-query 撈 entity 寫成的文章 / 簡報

Atomic Design vs 傳統設計

傳統 Atomic
從 Page 設計往下拆 從 Atom 設計往上組
像建築（從房子到磚） 像化學（從原子到分子）
改動成本高 改動成本低（改 Atom 全部跟著變）

跨界應用例

Atomic Design 不只 UI 設計，類似思想出現在：