Brad Frost开发了 "原子设计 "方法论，旨在指导人们如何更有意地建立界面设计系统，并使其具有清晰的层次结构。
这种方法被称为 "原子设计"，因为它是基于化学原理和对物质本质的研究。我们很多人都熟悉的元素周期表，代表了构成宇宙的固定的 "原子元素 "集合。这些成分作为我们周围一切事物的基础。
这种对较小的元素（或原子）和较大的物体（或分子）之间关系的理解，与设计世界和我们利用的各种元素相似，可以很好地构建我们的设计。原子设计意味着创造一个可以组合在一起的系统，以创造我们可以反复使用的元素和模板。
原子
我们系统的基本构件是原子。颜色方案、字体、个别元素（如标题、段落、搜索输入和按钮），以及其他任何与其他原子混合形成分子的东西。
分子
我们用原子组装的比特被称为分子。虽然它们需要原子，但分子更像是我们最终将用于建造的乐高积木碎片。分子本质上是一个原子的集合，它可以被连接起来以执行某种任务。
单独无用的组件，如一个表格标签、一个搜索输入和一个提交按钮，组合在一起形成一个表格，可用于提供评论或制定搜索引擎搜索。
生物体
我们可以通过混合分子来创造更复杂但可重复的产品组件。网站上的用户体验和最终结果的复杂性都受到开发者组合分子的方式的影响。徽标、搜索栏和主要导航是有机体的几个例子。
相似和不相似的分子类型都可以构成一个有机体。徽标图像、主要导航列表和搜索表单是可以构成一个标题生物体的几个组件的例子。这些有机体几乎在我们探索的每一个页面上都普遍存在。
模板
模板是一个有机体的集合，当它们组合在一起时，就形成了一个页面布局。由于模板的存在，构成版面的所有组件都可以被分配。参与构建一个界面的元素最终都有一个结构。由于我们的目标是定义 "模板 "一词，我们可以说明，它们可以被认为是可以为原子、分子和生物体提供背景的聚合体。
页面
原子设计的最后一个阶段。即使你可能不会为每个场景都规划出页面，但在整个设计阶段做一些变化是很有用的。随着你的数据变化，不同的资料细节或语言可能会对你的模板设计产生影响。你可以对这些差异进行测试，并通过延伸到页面层面对你的模板进行全局修改。
制作用户界面的设计系统的概念正在被称为 "原子设计 "的过程所完全改变。它将每个用户界面元素分割成基本的和聚合的组件，从化学中获得灵感，让它们以各种不同的、越来越精细的形式聚集在一起，直到在可用性方面产生一个最佳结果。