近年、LLMを活用したソースコード生成が急速に発展している中、フロントエンドの自動開発では出力構造ばらつきが保守性・再利用性の課題となっている。このような課題に対して、本研究では、LLM を用いたフロントエンドの生成過程において、構造的指針となるアトミックデザインを組み込む手法を提案する。書籍管理システムを題材に、アトミックデザイン適用時と非適用時において生成したソースコードを比較した結果、適用時には生成構造の一貫性、コンポーネント再利用率において改善が見られ、アトミックデザインが LLMを用いたフロントエンド開発において有効であることを確認した。