Home / Current Issue / Paper 1716608
AI-Assisted Design-to-Code Pipelines: Transforming Mobile Development Through Automated Component Generation
Subject area: Science,Engineering and Technology · Area of research: Mobile Engineering
DOI: https://doi.org/10.64388/IREV8I5-1716608
Abstract
The increasing complexity of mobile applications has intensified the gap between design intent and implementation, creating inefficiencies in traditional development workflows. In conventional design-to-code processes, user interface designs are manually translated into code, introducing delays, inconsistencies, and potential misalignment between design specifications and final output. As applications scale, these challenges become more pronounced, limiting development velocity and system coherence. This study proposes a framework for AI-assisted design-to-code pipelines, conceptualizing artificial intelligence as a transformation layer that automates the conversion of design artifacts into structured, reusable code components. Rather than treating code generation as an isolated task, the paper positions it within an end-to-end pipeline that integrates design tools, machine learning models, and mobile development frameworks. The proposed architecture consists of three primary layers: input acquisition from design systems, AI-driven processing for component extraction and pattern recognition, and output generation in the form of production-ready code aligned with mobile frameworks such as Flutter. The study examines how AI models can interpret visual and structural design information, identify reusable patterns, and generate modular components that integrate with existing design systems. In addition to architectural design, the paper explores the impact of AI-assisted pipelines on developer workflows, highlighting the emergence of human-in-the-loop systems where developers guide, validate, and refine generated outputs. It also addresses challenges related to code quality, maintainability, and the risks associated with over-reliance on automated systems. The findings suggest that AI-assisted design-to-code pipelines significantly enhance development efficiency, improve consistency across interfaces, and reduce the cognitive load associated with manual implementation. This study contributes to software engineering literature by framing design-to-code automation as a systemic transformation rather than a standalone capability, redefining the relationship between design and development in modern mobile systems.
Keywords
Design-to-Code Automation, AI in Software Engineering, Mobile Development Pipelines, Component Generation, UI Engineering Systems
References
[1] Beltramelli, T. (2018). pix2code: Generating code from a graphical user interface screenshot. Proceedings of the ACM SIGCHI Symposium on Engineering Interactive Computing Systems. https://doi.org/10.1145/3220134.3220135
[2] Chen, X., Liu, C., Song, D., & Leung, H. (2021). Deep learning for code generation: A survey. IEEE Transactions on Software Engineering, 47(10), 2201–2229. https://doi.org/10.1109/TSE.2020.2966929
[3] Feng, Z., Guo, D., Tang, D., Duan, N., Feng, X., Gong, M., Shou, L., Qin, B., Liu, T., Jiang, D., & Zhou, M. (2020). CodeBERT: A pre-trained model for programming and natural languages. Findings of the Association for Computational Linguistics. https://doi.org/10.18653/v1/2020.findings-emnlp.139
[4] Guo, P. J. (2013). Online Python Tutor: Embeddable web-based program visualization for CS education. Proceedings of the ACM Technical Symposium on Computer Science Education. https://doi.org/10.1145/2445196.2445368
[5] LaToza, T. D., Venolia, G., & DeLine, R. (2006). Maintaining mental models: A study of developer work habits. Proceedings of the 28th International Conference on Software Engineering. https://doi.org/10.1145/1134285.1134325
[6] Mayer, M., Weinreich, R., & Holl, K. (2019). Code generation for user interfaces: A systematic mapping study. Journal of Systems and Software, 156, 1–16. https://doi.org/10.1016/j.jss.2019.05.043
[7] Oda, Y., Fudaba, H., Neubig, G., Hata, H., Sakti, S., Toda, T., & Nakamura, S. (2015). Learning to generate pseudo-code from source code using statistical machine translation. Proceedings of the IEEE/ACM International Conference on Automated Software Engineering. https://doi.org/10.1109/ASE.2015.36
[8] Polozov, O., & Gulwani, S. (2015). FlashMeta: A framework for inductive program synthesis. Proceedings of the ACM SIGPLAN Conference on Programming Language Design and Implementation. https://doi.org/10.1145/2737924.2738007
[9] Ribeiro, M. T., Singh, S., & Guestrin, C. (2016). “Why should I trust you?” Explaining the predictions of any classifier. Proceedings of the ACM SIGKDD International Conference on Knowledge Discovery and Data Mining. https://doi.org/10.1145/2939672.2939778
[10] Sadowski, C., van Gogh, J., Jaspan, C., Söderberg, E., & Winter, C. (2018). Tricorder: Building a program analysis ecosystem. Proceedings of the International Conference on Software Engineering. https://doi.org/10.1145/3180155.3180180
[11] Vaswani, A., Shazeer, N., Parmar, N., Uszkoreit, J., Jones, L., Gomez, A. N., Kaiser, Ł., & Polosukhin, I. (2017). Attention is all you need. Advances in Neural Information Processing Systems.
[12] White, M., Tufano, M., Vendome, C., & Poshyvanyk, D. (2015). Toward deep learning software repositories. Proceedings of the IEEE/ACM International Conference on Mining Software Repositories. https://doi.org/10.1109/MSR.2015.68
How to cite this paper
@article{1716608,
author = {YASIN ARIK},
title = {AI-Assisted Design-to-Code Pipelines: Transforming Mobile Development Through Automated Component Generation},
journal = {Iconic Research And Engineering Journals},
year = {2024},
volume = {8},
number = {5},
pages = {1582-1597},
issn = {2456-8880},
url = {https://www.irejournals.com/formatedpaper/1716608.pdf},
abstract = {The increasing complexity of mobile applications has intensified the gap between design intent and implementation, creating inefficiencies in traditional development workflows. In conventional design-to-code processes, user interface designs are manually translated into code, introducing delays, inconsistencies, and potential misalignment between design specifications and final output. As applications scale, these challenges become more pronounced, limiting development velocity and system coherence. This study proposes a framework for AI-assisted design-to-code pipelines, conceptualizing artificial intelligence as a transformation layer that automates the conversion of design artifacts into structured, reusable code components. Rather than treating code generation as an isolated task, the paper positions it within an end-to-end pipeline that integrates design tools, machine learning models, and mobile development frameworks. The proposed architecture consists of three primary layers: input acquisition from design systems, AI-driven processing for component extraction and pattern recognition, and output generation in the form of production-ready code aligned with mobile frameworks such as Flutter. The study examines how AI models can interpret visual and structural design information, identify reusable patterns, and generate modular components that integrate with existing design systems. In addition to architectural design, the paper explores the impact of AI-assisted pipelines on developer workflows, highlighting the emergence of human-in-the-loop systems where developers guide, validate, and refine generated outputs. It also addresses challenges related to code quality, maintainability, and the risks associated with over-reliance on automated systems. The findings suggest that AI-assisted design-to-code pipelines significantly enhance development efficiency, improve consistency across interfaces, and reduce the cognitive load associated with manual implementation. This study contributes to software engineering literature by framing design-to-code automation as a systemic transformation rather than a standalone capability, redefining the relationship between design and development in modern mobile systems.},
keywords = {Design-to-Code Automation, AI in Software Engineering, Mobile Development Pipelines, Component Generation, UI Engineering Systems},
month = {November},
doi = {https://doi.org/10.64388/IREV8I5-1716608}
}