Harnessing AI for front-end development : an evaluation of design-to-code tools
Manninen, Juhani (2024)
Kandidaatintyö
2024
School of Engineering Science, Tietotekniikka
Kaikki oikeudet pidätetään.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi-fe2024040815464
https://urn.fi/URN:NBN:fi-fe2024040815464
Tiivistelmä
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.
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.
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.