%0 Thesis
%9 Skripsi
%A Mufid Bahaudin Nugroho, NIM.: 22106050021
%B FAKULTAS SAINS DAN TEKNOLOGI
%D 2026
%F digilib:77223
%I UIN SUNAN KALIJAGA YOGYAKARTA
%K Antarmuka Pengguna, Atomic Design, Generative AI, Large Language Model, Prompt Engineering
%P 106
%T RANCANG BANGUN SISTEM GENERATOR ANTARMUKA PENGGUNA BERBASIS ATOMIC DESIGN
%U https://digilib.uin-suka.ac.id/id/eprint/77223/
%X The rapid growth of the modern software industry demands high-quality, consistent,  and maintainable user interfaces (UI). Although Generative Artificial Intelligence (AI)  technology has opened opportunities for automating UI code generation, the resulting code is  often unstructured, difficult to maintain, and inconsistent with standardized component  development patterns. This research aims to design and develop an Atomic Design-based UI  generator system utilizing a Large Language Model (LLM) as its code generation engine. The  system was developed using the Next.js framework, integrating frontend and backend layers  within a unified framework, and utilizing the Google Gemini API as the LLM model. The  Atomic Design approach was implemented through a layered prompt engineering technique  that explicitly embeds the Atom, Molecule, Organism, Template, and Page hierarchy  instructions into every prompt. The system supports three input modes Standard Prompt,  Template Builder, and Structured Form to accommodate various user needs ranging from  creative exploration to controlled academic testing. Evaluation was conducted through output  testing and black-box testing across 12 functional scenarios. The results demonstrate that the  system successfully generates UI components automatically in both HTML/Tailwind CSS and  React JSX formats, with consistent and modular structures aligned with Atomic Design  standards. All black-box testing scenarios achieved a Passed status. The layered prompt  engineering mechanism proved effective in guiding the AI model to produce interface code that  is consistent, modular, and compliant with Atomic Design principles.
%Z Dr. Muhammad Mustakim, S.T., M.T.