Framework Teknologi Agnostik Untuk Transformasi Sketsa Antarmuka Aplikasi Menjadi Kode Menggunakan Arsitektur Modular dan Algoritme Berbasis Grid

AGUS ZULVANI, Dr. Dyah Aruming Tyas, S.Si.

2025 | Tesis | S2 Ilmu Komputer

Pada tahap awal pengembangan aplikasi, tim UX membuat sketsa kasar yang kemudian disempurnakan oleh desainer dan diimplementasikan oleh pengembang front-end. Proses ini bersifat repetitif dan berurutan sehingga menghambat adaptasi cepat terhadap perubahan desain. Berbagai penelitian sebelumnya mengeksplorasi transformasi otomatis dari wireframe menjadi kode, namun sebagian besar pendekatan menghasilkan kode yang terikat pada teknologi tertentu, sehingga kode tidak bisa disesuaikan dengan kebutuhan pengguna.

Penelitian ini mengusulkan sebuah framework teknologi agnostik (tidak bergantung pada teknologi tertentu) untuk menghasilkan kode yang bisa disesuaikan dengan kebutuhan pengguna (extensible) dalam melakukan transformasi wireframe menjadi kode front-end dengan mengintegrasikan Model-Driven Development (MDD) dan arsitektur modular berbasis plugin. Objek antarmuka pada wireframe dideteksi menggunakan analisis kontur dan diklasifikasikan dengan CNN berbasis Sketch DeepNet, sementara tata letak dihasilkan melalui algoritme berbasis grid dan direpresentasikan menggunakan Domain-Specific Language (DSL) dalam format JSON. 

Akurasi DSL dievaluasi menggunakan metode yang diusulkan, yaitu membandingkan DSL hasil algoritme dengan DSL ground truth. Metode ini terbukti menghasilkan nilai lebih relevan dengan MAE 0,255 dibandingkan dengan perbandingan JSON deep check dengan MAE 0,382 terhadap penilaian 10 responden. Hasil eksperimen menunjukkan bahwa deteksi kontur mencapai rata-rata IoU 89%. Model Sketch DeepNet memperoleh mAP 89% mengungguli model YOLOv11 dengan mAP 87%. Framework ini berhasil melakukan transformasi wireframe ke berbagai teknologi front-end, yaitu Vuetify VueJS, Android GUI XML, dan HTML5 Tailwind CSS, menunjukan extensibility terhadap teknologi front-end yang beragam.

In the early stages of application development, UX teams typically produce rough sketches that are refined by designers and then implemented by front-end or mobile developers. This sequential workflow is resource-intensive and repetitive, hindering rapid adaptation to design changes. Prior research has explored automatic wireframe-to-code conversion, but most approaches are bound to specific technologies, limiting extensibility. 

This study proposes an extensible end-to-end framework for wireframe-to-code conversion by integrating Model-Driven Development (MDD) with a plugin-based modular architecture. User interface objects are detected using contour analysis and classified with a Sketch DeepNet-based CNN, while layouts are generated through a grid-based algorithm and represented using a Domain-Specific Language (DSL). 

The accuracy of the proposed framework’s DSL was evaluated by comparing algorithm-generated DSL with ground truth DSL. Using Mean Absolute Error (MAE) against respondent assessments, the proposed method achieved a lower error of 0.255, compared to 0.382 for conventional JSON deep check, indicating more relevant evaluation results. Experimental findings show that contour detection reached an average IoU of 89%, while the Sketch DeepNet model achieved an mAP of 89%, outperforming YOLOv11, which obtained 87% and struggled with closely spaced objects in wireframe sketches. Furthermore, the framework successfully transformed wireframes into multiple front-end technologies, including Vuetify VueJS, Android GUI XML, and HTML5 Tailwind CSS, demonstrating strong extensibility and adaptability across diverse platforms.

Kata Kunci : Wireframe to code, Front-end automation, Layout evaluation metrics, Model-Driven, Computer Vision.