Palkad kolm disainerit, et nad teeksid su firmale korraliku uue veebilehe. Üks kirjutab head koodi, aga vormindab veebilehekülje igavalt – peamiselt tekstiformaadis. Teine joonistab küll kenad vaated, aga niipea kui palud tal lehele natukenegi interaktiivsust lisada kukub ta depressiooni ja lõpetab igasuguse töö. Kolmas ehitab lihtsa “OK” nupu asemel vilkuva diskopalliga kosmoselaeva juhtpaneeli. Pisut liialdan, aga umbes selline on kokkuvõte Claude Design, Figma Make ja Lovable.ai kasutusest.
Loe alt pikemalt, et kuidas minu eksperimendid antud küsimuses läksid.
Miks disain on robotile kõvem pähkel kui kood?
Tarkvara arenduses on reeglid pigem mustvalged. Kuigi loovus on programmeerimises tähtis, siis koodi genereerimine on struktureeritav. Kood kas töötab või mitte. Rakendus kas läbib automaattestid või kukub need läbi. Tarkvararenduse ja arhitektuuri disainimustrid on ennast juba aastakümneid kenasti tõestanud ja neist lihtsamad keelemudelite poolt modeleeritavad ja simuleeritavad. Ise ei nõustu, aga mõned julgemad juba väidavad, et “coding is a skill of yesteryear”.
Visuaalse disainiga on lood teised. Kuigi hea disaini jaoks saab samamoodi ette kirjutada reeglid, heuristika. Luua disainisüsteemid. Saab kasutada korduvkasutatavaid komponentide ja nõuetel põhinevaid struktureeritud elemente. Väljakutse on luua lõpuks intuitiivne tervik. Hea visuaalse disaini tunneme ära siis kui kasutaja või klient ei pea lehel olles mõtlema. Kõik lihtsalt toimib orgaaniliselt, loogiliselt, sujuvalt ja on samas informatiivne. Seda pisut tabamatut tunnetust, et kuidas siduda visuaalne esteetika ja kasutusmugavus üheks märkamatult toimivaks süsteemiks on robotil pelgalt kirjalike nõuete kaudu keeruline teostada. Vähemalt seni on see jäänud AI-tööriistadele tõsiseks väljakutseks.
Disain on subjektiivsem kui kood või tekst
Ilmselt on mitmeid põhjuseid miks on disainiülesande delegeerimine tehisintellektile kordades keerulisem. Kontseptsioonid: “ilu” ja “kasutatavus” on subjektiivsed. Need on inimlikud kategooriad, mille süstematiseerimine masinõppe abil nõuab kordades rohkem nüansi mõistmist, kultuurilist konteksti, empaatiat ja psühholoogia tabamist.
Kui masinõppe mudeleid inimese poolt treenitakse (supervised learning), siis AI-põhise disainimasina treenimine eeldab, et me teame selle inimese subjektiivsete eelistuste kohta, kes seda mudelit parajasti treenib. Praktikas kipub olema see keeruline. Kujutame ette kahte äärmusliku näidet masinõppe mudelite õpetajatest:
- Masinõppe mudeli õpetaja A on põhjamaise minimalismi austaja. Tema silmis on “ilus” disain selline, kus on palju tühja ruumi, peened nurgelised fondid ja vaoshoitud pastelne värvigamma. Kui mudel genereerib midagi sellist, saab see maksimumpunktid. Kõik infoküllane tembeldatakse “inetuks”.
- Õpetaja B eelistab küllust. Talle meeldivad dünaamilised, infoküllased ja visuaalselt koormatud pildid – vaadake mõnda tüüpilist Aasia veebiplatvormi või Jaapani uudislehte. Tema premeerib kirevust ja tihedust, karistades minimalismi kui igavat.
Dominantse disain lõks
Selle tulemusena ei õpi tehisintellekt mitte universaalset, objektiivselt toimivat digitaalse toote disaini, vaid ta hakkab peegeldama oma treeneri kultuurilist tausta ja isiklikku esteetilist eelistust. Masinast saab oma õpetaja maitse-eelistuste digitaalne pikendus. Kui me ei kaardista täpselt, et kes mudelile tagasisidet annavad, võime lõpuks luua lahenduse, mis on küll kitsa ringi jaoks “hea”, kuid teiste jaoks ebaõnnestumine.
Kui tööstuses kujuneb mingi standard, hakkavad kõik teised seda pimesi kopeerima, et turul ellu jääda. Kui me laseme tehisintellektil luua disainistandardeid, mis põhinevad vaid valitud treenerite maitsel, riskime kogu digitaalse maailma muutmisega ühenäoliseks ja igavaks “digitaalseks plönniks”.
Ülaltoodud probleemile viidates võiks siis vastu väita, et delegeerime iga konkreetse disaini valitud sihtgrupile. Tuvastame kõigepealt kasutaja ja näitame temale sobivat disaini. Nii nagu paljud rakendused lubavad juba vaikimisi valida heleda või tumeda tausta või lemmik-fondi. See taas muudab visuaalse disaini keerulisemaks. Tulemus eeldab universaalsemaid lahendusi.
Ülaltoodu valguses otsustasime eksperimenteerida, et kui häid tulemusi tänased AI-disainitööriistad tavakasutaja rakursist suudavad toota.
Eksperiment
Valmistame hetkel ette materjale Estonian Business Schooli (EBS) mikrokraadi “Digitaalse toote disain ja arendus” jaoks ning otsustasime õppeprotsessi raames fookusesse võtta AI veebidisaini tööriistad. Minu omavahelisse võrdlusesse jõudsid kolm mudelit: Claude Design, Figma Make ning Lovable.ai.
Andsin neile kõigile identse ülesande: luua ühele kujutletavale ettevõttele mitmekeelne ja mitmete alamlehekülgedega maandumisleht. Kohustuslike elementide nimekirjas olid:
- Maandumisleht ja tutvustuse sektsioon, milles otseviited teistesse sektsioonidesse
- Teenuste ja toodete sektsioon – sealhulgas dünaamiline osa, mis suhtleks firma andmebaasiga, et hoida toodete info ajakohasena
- Klientide lehekülg – info seniste kasutajate ja saavutuste kohta
- Case study’de sektsioon – kirjeldused selle kohta, kuidas kliendid on toodete ja teenuste abil saavutanud olulist mõju
- Blogi sektsioon – regulaarselt uuendatav infovoog
- Kontaktivorm ja AI-robot, mis annaks lihtsat kliendituge.
Väljakutse vürtsitamiseks andsin disainirobotile ülesandeks lisada niisiis tavapärasele HTML+CSS+JS funktsionaalsusele kaks interaktiivset pluginat. Üks neist brauseripõhine suhteliselt lihtne AI robot, mis aitaks veebilehes olemasoleva kontekstiakna raames kliendil elementaarseid vastuseid saada. Teine pisut keerukam vidin, mis suhtleks reaalselt andmebaasiga.
Tavalise disaini promptimise tulemuseks on igav slopp
Alustuseks koostas Claude Sonnet mulle kõikide nõuete ja disainijuhiste markdown’i, mille ma seejärel neile kolmele disainitööriistale ette söötsin. Esimene iteratsioon? Ütleme nii, et tulemiks oli kuiv tekstisupp korduvate visuaalsete elementidega. Selliste maandumislehtede näiteid on viimase poole aasta jooksul vaibkoodimise töötubadest sadade kaupa sündinud. Kõik näevad välja täpselt samasugused. Funktsionaalselt igati toimiv ja info on iseenesest olemas, aga kliendile midagi sellist näidata ei julgeks.
Redditis kirjutas üks kasutaja kuidas ta võttis ette neli tööriista: Bolt, Lovable, Base44 ja Replit ning laskis kõigil genereerida kujutletava reklaamiagentuuri veebilehed. Ta kirjeldas, et kuidas kõik nägid välja üpris sarnased. Mitte ükski ei eristu. Selles arutelulõimes kirjeldasid mitmed vastajad, et tegemist on “piisavalt hea” (“good enough”) paradoksiga – kuna nii tegija kui ka kliendi jaoks tundub see tulem piisavalt okei, siis keegi enamasti sellest esimesest iteratsioonist ei kipu edasi liikuma.
Ma ise sellega rahule ei jäänud, mistõttu otsustasin promptimisega temperatuuri pisut üles keerata. Nügisin kõiki mudeleid kasutama tulemuse genereerimisel rohkem variatiivsust ja out-of-box lahendusi. Asi läks aga päriselt põnevaks siis, kui mudelid said inspiratsiooniks ette suurema valiku ekraanitõmmised ning mõned õnnestunud veebilehtede CSS- ja JS-failide näidised. Tulemused muutusid ootamatult täiesti söödavaks ja kõigi kolme mudeli variatiivsus kasvas samuti! Samas sai protsessi käigus kiirelt selgeks, et igal AI-disainitööriistal on oma väga spetsiifilised tugevused ja üsna reljeefsed vajakajäämised.
Claude Design – toimib terviklikult ja lihtne muuta, aga hilisemalt arenduse peavalu
- Plussid: Genereeris kahtlemata kõige puhtama koodi. Interaktiivsed pluginad olid out-of-the-box kõige küpsemad ja töötasid praktiliselt ilma ümberkirjutamiseta. Visuaal püsis ühtlane ning tööriist suutis uute promptide abil oma vead ise nutikalt ära parandada, mis vähendas oluliselt koodi kirjutamise käsitööd.
- Miinused: Lonkas kohati üsna kummalistes kohtades – näiteks mõne lehe paigutus vajus ootamatult formaadist välja või ilmus ekraanile täiesti arusaamatu font. Pikemate lehtede puhul kippus genereerimine poole pealt lihtsalt katki minema (tõenäoliselt jooksis masin kontekstiakna piirangu vastu).
- Suurim valupunkt: Claude’i peamine miinus ilmneb aga loodu üleandmisel päris arendusele. Kuna tööriist tekitab iga route’i jaoks eraldi dc.html faili, siis koodi eraldamise ja hilisema üldistamisega tuleb eraldi väga korralikult vaeva näha. Selles osas teevad teised platvormid silmad ette. Nii Figma kui ka Lovable’i backend’i kaudu saab mugavalt otse valmis TypeScripti komponendid kätte.
Figma Make – kena ja standardne, aga raske muuta
- Plussid: Parim valik klassikaliste ja struktureeritud lehtede jaoks. Blogipostituste, tabelite ja 404-vealehtede blueprint’id nägid välja puhtad, korrektsed ja silmale igati kenad.
- Miinused: Interaktiivsete pluginatega jäi platvorm täiesti hätta – koodi oleks pidanud sisuliselt nullist ümber kirjutama. Mitmekeelsus ei hakanudki tööle ja route’ide haldusega ei saanud masin samuti hakkama, suutes valmis võluda vaid ühes keeles toimiva ühelehelise rakenduse (SPA).
- Suurim valupunkt: Pidev kokku jooksmine ja tehniline ebastabiilsus tekitasid tõsist frustratsiooni. Tööriist hakkas reeglina pärast iga 3-4 prompti vigu pilduma või lihtsalt lõpetas töö. Selleks, et projektiga üldse edasi liikuda, pidin pooleliolevast tööst pidevalt käsitsi koopiaid tegema ja otsast peale alustama.
Lovable – innovaatilised vaated, aga keerukuses keerab vindi üle
- Plussid: Kahtlemata parim tulemus just loovate elementide osas. Suutis näiteks Hero-sektsioonis ja interaktiivsete pluginate jaoks genereerida vägagi efektseid ja dünaamilisi visuaale.
- Miinused: Kipub lihtsate asjadega tugevalt üle vindi keerama ja lisab koodi “vahtu”. Arendaja vaatevinklist pani lõpptulemus kohati korralikult kukalt kratsima. Sageli selgus, et uue promptimise asemel oli kiiremaks ja valutumaks lahenduseks koodi lihtsalt ise käsitsi tagasi lihtsamaks muuta.
- Suurim valupunkt: Kuigi Lovable oli puhaste promptide sisestamise vaatest kahtlemata kõige kasutajasõbralikum ja sujuvam, tekitab see kasutajale suurema kognitiivse koormuse. Pidevalt peab aktiivselt kaasa mõtlema ja kontrollima, kuidas koodis seda tehisintellekti loodud keerulist ja lohisevat struktuuri lihtsustada või üldistada.
Kui peaksin analoogse spetsifikatsiooni uuesti lauale panema, siis edaspidi ehitaksin oma disaini-töövoo üles ilmselt neljast etapist koosnevalt:
- Lovable – paneme alguses “hullu” ja ammutame visuaalset inspiratsiooni. –>
- Figma Make – tuleme maa peale tagasi, teeme struktuuri korda ja lihtsustame. –>
- Claude Design – paneme kokku tugeva ja funktsionaalse prototüübi, millega julgeme juba kliendi juurde minna. –>
- Claude Code – kui kliendi tagasiside käes ja täiendused tehtud, siis laseme koodi refaktoreerida: dc.html failidest komponendid eristada, üldistada läbiva struktuuri elemendid (header, footer) ja ümber kirjutada kasutatavaks rakendusteks.
Ilmelt pikas perspektiivis hakkaks siis vaatama ja õgvendama, et kas päriselt on neist ka kõiki etappe ja tööriistu tarvis või mitte. Nagu ka oma varasemates postitustes olen küsinud, huvitab mind nüüd teie vaade. Mida teiste kogemused ütlevad kas olete neid või teisi disainitööriistu juba sarnastes veebiprojektides reaalselt võrrelnud? Millised on teie eelistused ja milliseid töövooge soovitate?