Atomic Design

Atomic Design（原子設計）

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

5 層級

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

為什麼這樣設計

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

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

• 一個 Atom 改了，所有用到它的 Molecule / Organism / Template / Page 都自動跟著改
• 設計系統一致性 by 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 設計，類似思想出現在：

領域	對應「原子化」概念
筆記	卡片盒筆記法 的 Permanent Note
程式設計	函式 → 模組 → library
化學	原子 → 分子 → 物質
音樂	音符 → 動機 → 主題 → 樂章
語言	字 → 詞 → 句 → 段 → 文

→ 這個原則在多個領域反覆出現——人類處理複雜系統的通用解。

反模式

❌ 層級跳太多（從 Atom 直接到 Page） → 失去重用性 ❌ Atom 不夠小（一個 Atom 含多個獨立元件） → 違反原子原則 ❌ 不命名 Atom → 找不到、無法重用 ❌ 層級分得太細（Atom 內又拆 sub-atom） → 過度抽象

心法

Brad Frost 原話：

「大部分的網頁設計，可以歸納為將不同的元件以不同的方式組合。」

換到知識管理：

大部分的寫作，可以歸納為將不同的筆記以不同的方式組合。

兩者都是 Atomic Design 的核心。

相關概念

強連結（跨領域對照）

• 卡片盒筆記法 — 知識管理版的 Atomic Design
• 卡片盒新手原則 — 第 1 條「原子化」直接引用
• 永久筆記 — Atomic 對應的「Atom」
• 卡片盒筆記法 12 法則 — 第 6 條「一則筆記一個脈絡」

推斷連結（LLM 認為相關，待確認）

• wiki-ingest ?? — 「一個 entity 一個概念」對應 Atomic
• Sub-agent ?? — 把任務拆成可獨立執行的 sub-agent 是 Atomic 思維

深入閱讀（外部資源）

• 原書 / 網站：https://atomicdesign.bradfrost.com/
• Brad Frost 部落格：https://bradfrost.com/

← 回到 wiki