View in EDS

Harnessing AI for front-end development : an evaluation of design-to-code tools ; Tekoälytyökalujen hyödyntäminen front-end kehityksessä ja niiden arviointi

Saved in:
Bibliographic Details
Title: Harnessing AI for front-end development : an evaluation of design-to-code tools ; Tekoälytyökalujen hyödyntäminen front-end kehityksessä ja niiden arviointi
Authors: Manninen, Juhani
Contributors: Lappeenrannan-Lahden teknillinen yliopisto LUT, Lappeenranta-Lahti University of Technology LUT
Publication Year: 2024
Collection: LUTPub (LUT University / LUT yliopisto)
Subject Terms: AI, artificial intelligence, front-end development, Figma, design-to-code, AI-generated code, tekoäly, front-end kehitys, tekoälyn tuottama koodi, fi=Opinnäytetyöni ei liity strategiaan|en=My thesis is not related to the strategy, fi=School of Engineering Science, Tietotekniikka|en=School of Engineering Science, Computer Science
Description: The recent development in AI technology has revolutionized various industries, including web development. Innovative design-to-code AI tools offer promising ways to streamline front-end development by translating design mockups into functional code. The goal of this bachelor’s thesis is to examine five of these tools to find out what their capabilities and limitations are, and if they could be used in real-world applications. Tools were tested on two website mockups created in the design program Figma, focusing on the accuracy of the results, available features, limitations, and user experience. Based on the results of this study, Locofy and Anima could be used to streamline the early stages of front-end development by creating prototypes, but programming is still required for pixel-perfect designs and adding functionality to the page. The greatest challenge tested tools faced was adapting to different screen sizes and implementing advanced features like animations and working links. ; Viimeaikainen kehitys tekoälyteknologiassa on mullistanut eri teollisuudenaloja, mukaan lukien verkkokehityksen. Innovatiiviset design-to-code tekoälytyökalut tarjoavat lupaavia mahdollisuuksia front-end-kehityksen nopeuttamiseksi, muuntamalla verkkosivumallit toimivaksi koodiksi. Tämän kandidaatintutkielman tavoitteena on tutkia viittä näistä työkaluista, selvittää mihin ne pystyvät ja mihin ei. Siten saadaan selville voisiko niitä hyödyntää tuotannossa. Työkaluja testattiin kahdella Figmalla luotuja verkkosivumalleja, keskittyen tulosten tarkkuuteen, saatavilla oleviin ominaisuuksiin, rajoituksiin ja käyttökokemukseen. Tulosten perusteella Locofy ja Anima voisivat soveltua varhaisten prototyyppien tekemiseen, mutta ohjelmointi on edelleen tarpeen virheiden korjaamiseen ja toiminnallisuuksien lisäämisen takia. Suurin haaste testatuille työkaluille oli sopeutuminen eri näyttökokoihin ja edistyneiden ominaisuuksien, kuten animaatioiden ja toimivien linkkien, toteuttaminen.
Document Type: bachelor thesis
File Description: fulltext
Language: English
Relation: https://lutpub.lut.fi/handle/10024/167161
Availability: https://lutpub.lut.fi/handle/10024/167161
Rights: fi=Kaikki oikeudet pidätetään.|en=All rights reserved.|
Accession Number: edsbas.8DA3BA4
Database: BASE
Description
Abstract:The recent development in AI technology has revolutionized various industries, including web development. Innovative design-to-code AI tools offer promising ways to streamline front-end development by translating design mockups into functional code. The goal of this bachelor’s thesis is to examine five of these tools to find out what their capabilities and limitations are, and if they could be used in real-world applications. Tools were tested on two website mockups created in the design program Figma, focusing on the accuracy of the results, available features, limitations, and user experience. Based on the results of this study, Locofy and Anima could be used to streamline the early stages of front-end development by creating prototypes, but programming is still required for pixel-perfect designs and adding functionality to the page. The greatest challenge tested tools faced was adapting to different screen sizes and implementing advanced features like animations and working links. ; Viimeaikainen kehitys tekoälyteknologiassa on mullistanut eri teollisuudenaloja, mukaan lukien verkkokehityksen. Innovatiiviset design-to-code tekoälytyökalut tarjoavat lupaavia mahdollisuuksia front-end-kehityksen nopeuttamiseksi, muuntamalla verkkosivumallit toimivaksi koodiksi. Tämän kandidaatintutkielman tavoitteena on tutkia viittä näistä työkaluista, selvittää mihin ne pystyvät ja mihin ei. Siten saadaan selville voisiko niitä hyödyntää tuotannossa. Työkaluja testattiin kahdella Figmalla luotuja verkkosivumalleja, keskittyen tulosten tarkkuuteen, saatavilla oleviin ominaisuuksiin, rajoituksiin ja käyttökokemukseen. Tulosten perusteella Locofy ja Anima voisivat soveltua varhaisten prototyyppien tekemiseen, mutta ohjelmointi on edelleen tarpeen virheiden korjaamiseen ja toiminnallisuuksien lisäämisen takia. Suurin haaste testatuille työkaluille oli sopeutuminen eri näyttökokoihin ja edistyneiden ominaisuuksien, kuten animaatioiden ja toimivien linkkien, toteuttaminen.