アトミックデザインとは、Webやアプリのユーザーインターフェースを構築するための設計手法で、コンポーネントの階層を「原子」「分子」「有機体」「テンプレート」「ページ」といった5つの段階に分けて考える方法です。

この概念は、デザイナーのブラッド・フォストによって提唱されました。アトミックデザインの最初の段階は「原子」で、最も基本的な要素（ボタンや入力フィールド、アイコンなど）を指します。次に、「分子」はこれらの原子を組み合わせた小さなコンポーネントを意味し、たとえばラベル付きの入力フィールドや、画像とテキストの組み合わせが該当します。「有機体」は、分子をさらに組み合わせて作られる、より複雑なコンポーネントです。たとえば、ナビゲーションバーやカード型の表示がこれにあたります。「テンプレート」は、有機体を使ってページ全体のレイアウトを設計する段階で、実際のコンテンツはまだ含まれていません。最後に「ページ」は、テンプレートに具体的なコンテンツを適用したもので、実際にユーザーが見る完成形です。アトミックデザインの利点は、再利用性が高く、コンポーネントの一貫性を保ちながら効率的にデザインを進められる点です。これにより、デザインプロセスがスムーズになり、チームでのコラボレーションも容易になります。