In EDS ansehen

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

Gespeichert in:
Bibliographische Detailangaben
Titel: 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
Autoren: Manninen, Juhani
Weitere Verfasser: Lappeenrannan-Lahden teknillinen yliopisto LUT, Lappeenranta-Lahti University of Technology LUT
Publikationsjahr: 2024
Bestand: LUTPub (LUT University / LUT yliopisto)
Schlagwörter: 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
Beschreibung: 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.
Publikationsart: bachelor thesis
Dateibeschreibung: fulltext
Sprache: English
Relation: https://lutpub.lut.fi/handle/10024/167161
Verfügbarkeit: https://lutpub.lut.fi/handle/10024/167161
Rights: fi=Kaikki oikeudet pidätetään.|en=All rights reserved.|
Dokumentencode: edsbas.8DA3BA4
Datenbank: BASE
FullText Text:
  Availability: 0
CustomLinks:
  – Url: https://lutpub.lut.fi/handle/10024/167161#
    Name: EDS - BASE (s4221598)
    Category: fullText
    Text: View record from BASE
  – Url: https://www.webofscience.com/api/gateway?GWVersion=2&SrcApp=EBSCO&SrcAuth=EBSCO&DestApp=WOS&ServiceName=TransferToWoS&DestLinkType=GeneralSearchSummary&Func=Links&author=Manninen%20J
    Name: ISI
    Category: fullText
    Text: Nájsť tento článok vo Web of Science
    Icon: https://imagesrvr.epnet.com/ls/20docs.gif
    MouseOverText: Nájsť tento článok vo Web of Science
Header DbId: edsbas
DbLabel: BASE
An: edsbas.8DA3BA4
RelevancyScore: 821
AccessLevel: 3
PubType: Dissertation/ Thesis
PubTypeId: dissertation
PreciseRelevancyScore: 820.605651855469
IllustrationInfo
Items – Name: Title
  Label: Title
  Group: Ti
  Data: 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
– Name: Author
  Label: Authors
  Group: Au
  Data: <searchLink fieldCode="AR" term="%22Manninen%2C+Juhani%22">Manninen, Juhani</searchLink>
– Name: Author
  Label: Contributors
  Group: Au
  Data: Lappeenrannan-Lahden teknillinen yliopisto LUT<br />Lappeenranta-Lahti University of Technology LUT
– Name: DatePubCY
  Label: Publication Year
  Group: Date
  Data: 2024
– Name: Subset
  Label: Collection
  Group: HoldingsInfo
  Data: LUTPub (LUT University / LUT yliopisto)
– Name: Subject
  Label: Subject Terms
  Group: Su
  Data: <searchLink fieldCode="DE" term="%22AI%22">AI</searchLink><br /><searchLink fieldCode="DE" term="%22artificial+intelligence%22">artificial intelligence</searchLink><br /><searchLink fieldCode="DE" term="%22front-end+development%22">front-end development</searchLink><br /><searchLink fieldCode="DE" term="%22Figma%22">Figma</searchLink><br /><searchLink fieldCode="DE" term="%22design-to-code%22">design-to-code</searchLink><br /><searchLink fieldCode="DE" term="%22AI-generated+code%22">AI-generated code</searchLink><br /><searchLink fieldCode="DE" term="%22tekoäly%22">tekoäly</searchLink><br /><searchLink fieldCode="DE" term="%22front-end+kehitys%22">front-end kehitys</searchLink><br /><searchLink fieldCode="DE" term="%22tekoälyn+tuottama+koodi%22">tekoälyn tuottama koodi</searchLink><br /><searchLink fieldCode="DE" term="%22fi=Opinnäytetyöni+ei+liity+strategiaan|en=My+thesis+is+not+related+to+the+strategy%22">fi=Opinnäytetyöni ei liity strategiaan|en=My thesis is not related to the strategy</searchLink><br /><searchLink fieldCode="DE" term="%22fi=School+of+Engineering+Science%22">fi=School of Engineering Science</searchLink><br /><searchLink fieldCode="DE" term="%22Tietotekniikka|en=School+of+Engineering+Science%22">Tietotekniikka|en=School of Engineering Science</searchLink><br /><searchLink fieldCode="DE" term="%22Computer+Science%22">Computer Science</searchLink>
– Name: Abstract
  Label: Description
  Group: Ab
  Data: 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.
– Name: TypeDocument
  Label: Document Type
  Group: TypDoc
  Data: bachelor thesis
– Name: Format
  Label: File Description
  Group: SrcInfo
  Data: fulltext
– Name: Language
  Label: Language
  Group: Lang
  Data: English
– Name: NoteTitleSource
  Label: Relation
  Group: SrcInfo
  Data: https://lutpub.lut.fi/handle/10024/167161
– Name: URL
  Label: Availability
  Group: URL
  Data: https://lutpub.lut.fi/handle/10024/167161
– Name: Copyright
  Label: Rights
  Group: Cpyrght
  Data: fi=Kaikki oikeudet pidätetään.|en=All rights reserved.|
– Name: AN
  Label: Accession Number
  Group: ID
  Data: edsbas.8DA3BA4
PLink https://erproxy.cvtisr.sk/sfx/access?url=https://search.ebscohost.com/login.aspx?direct=true&site=eds-live&db=edsbas&AN=edsbas.8DA3BA4
RecordInfo BibRecord:
  BibEntity:
    Languages:
      – Text: English
    Subjects:
      – SubjectFull: AI
        Type: general
      – SubjectFull: artificial intelligence
        Type: general
      – SubjectFull: front-end development
        Type: general
      – SubjectFull: Figma
        Type: general
      – SubjectFull: design-to-code
        Type: general
      – SubjectFull: AI-generated code
        Type: general
      – SubjectFull: tekoäly
        Type: general
      – SubjectFull: front-end kehitys
        Type: general
      – SubjectFull: tekoälyn tuottama koodi
        Type: general
      – SubjectFull: fi=Opinnäytetyöni ei liity strategiaan|en=My thesis is not related to the strategy
        Type: general
      – SubjectFull: fi=School of Engineering Science
        Type: general
      – SubjectFull: Tietotekniikka|en=School of Engineering Science
        Type: general
      – SubjectFull: Computer Science
        Type: general
    Titles:
      – TitleFull: 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
        Type: main
  BibRelationships:
    HasContributorRelationships:
      – PersonEntity:
          Name:
            NameFull: Manninen, Juhani
      – PersonEntity:
          Name:
            NameFull: Lappeenrannan-Lahden teknillinen yliopisto LUT
      – PersonEntity:
          Name:
            NameFull: Lappeenranta-Lahti University of Technology LUT
    IsPartOfRelationships:
      – BibEntity:
          Dates:
            – D: 01
              M: 01
              Type: published
              Y: 2024
          Identifiers:
            – Type: issn-locals
              Value: edsbas
ResultId 1