原子设计是一种方法，由五个不同的阶段一起工作，以更慎重和更具层次的方式创建界面设计系统。
一、五个阶段
1）原子
用户界面的原子就是那些构成我们用户界面的基本构件。这些原子包括了基本的HTML元素，例如表单标签，输入，按钮，和其他除非损坏其功能否则不能进一步拆解的元素。在模式库中，原子一目了然地展示了所有的基本样式，当你回来继续开发和维护你的设计系统时，这是一份很有用的参考。和自然界的原子一样，界面原子不在真空中，它们的生命因APP的存在而存在。
2）分子
分子就像是一个由UI元素组成的相对简单的组织。例如，一个表单标签，搜索框和按钮共同打造一了个搜索表单分子。一个搜索表单分子是由标签原子，输入原子和按钮原子组成。创建简单的组件可帮助UI设计人员和开发人员坚持单一职责原则，创建简单的UI分子使测试更容易，鼓励了可重用性，并促进整个界面的一致性。
3）有机体
有机体是由分子或原子或其它有机体组成的相对复杂的UI组分。这些有机体组成了界面的不同部分。有机体可以包含相同或不同的分子类型。标题有机体可能包含不同的元素，如LOGO图像，主导航列表和搜索表单。像网站header这样的生物体包含较小的分子，如主导航，搜索表单，实用工具导航和LOGO。
4）模板
模板是页面级别的对象，它将组件放置在布局中，并显示设计的底层内容结构。主页模板由应用于布局的有机体和分子组成。模板的另一个重要特征是它们专注于页面的底层内容结构，而不是页面的最终内容。设计系统必须考虑内容的动态性质，因此，把例如标题和文字段落的图像大小和字符长度此类组件的重要属性说清楚是很有帮助的。通过定义页面的框架，我们可以创建一个能够解决各种动态内容的系统，同时为填充某些设计模式的内容类型提供必要的护栏。既然我们已经建立了我们网页的骨骼系统，那就让我们放一些肉在这些骨头上！
5）页面
页面是模板的具体实例，可以显示UI具有代表性的真实内容。基于我们前面的例子，我们可以使用主页模板并将代表性的文本，图像和媒体填充到模板中，以显示实际的内容。页面阶段将占位符内容替换为有代表性的真实内容，使设计系统有了生命。
二、界面清单
1）全局元素
在整个体验中共享的组件，如页眉，页脚和其他全局元素。
2）导航
主导航，页脚导航，分页，导航痕迹，交互式组件控件，以及本质上是用于用户界面导航的任何东西。
3）图像类型
logo，首页大图（hero images），用户头像，缩略图，背景，以及在UI中显示的任何其他类型的图像模式。
4）图标
图标是属于自己类别的特殊类型的图像。拍摄放大镜（搜索图标），社交图标，箭头，汉堡，旋转器，边框和每个其他界面图标。
5）表单
输入，文本区域，选择菜单，复选框，开关，单选按钮，滑块和其他形式的用户输入。
6）按钮
按钮是典型的UI元素。在整个体验中收集的所有特有的按钮模板：主要按钮，次要按钮，大按钮，小按钮，禁用按钮，活动，加载，甚至看起来像文本链接的按钮。
7）标题
有 h1 ， h2 ， h3 ， h4 ， h5 ， h6和排版标题的变体。
8）Blocks
也称为touts，标注，摘要，广告或首页大图，Blocks 是印刷标题和／或图像和／或摘要文本的集合（请参阅Nicole Sullivan关于媒体对象作为块的示例） 。
9）列表
列表类型的格式是以无序的，有序的，定义，项目符号，编号，线框表，条纹表，或任何组元素呈现的。
10）交互式组件
折叠面板，Tab标签，轮播图，和其他具有移动部件的功能模块。
11）媒体
视频播放器，音频播放器和其他多媒体元素。
12）第三方组件
窗口小部件，内部框架，股票行情，社交按钮， 爬虫脚本 ，和其他任何未在你的域名上托管的组件。
13）广告
所有的广告格式和尺寸。
14）消息
警示，成功，错误，警告，验证，加载，弹出窗口，工具提示等。这可能是一个具有挑战性的类别，因为消息传递通常需要用户操作才能显示出来。
15）颜色
收集界面中呈现的所有种类的颜色。这个类别可以通过非常棒的风格指导引导工具来协助，如CSS Stats和Stylify me 。
16）动效
动效是用户界面的组成元素，应该被记录下来。这需要使用如QuickTime的屏幕录制软件来捕获屏幕上的动画效果，如移动，淡化，抖动，转换或闪烁的任何UI元素。