AI darbībā: ieskati mūsu projektos ar Cursor, Stitch un Claude

Tīmekļa izstrādes pasaule attīstās ļoti strauji, un mākslīgais intelekts (AI) sāk spēlēt nozīmīgu lomu tīmekļa vietņu dizainā, kodēšanā un uzturēšanā. Šajā rakstā mēs vēlamies dalīties ar mūsu praktisko pieredzi, izmantojot tādus AI rīkus kā Cursor, Stitch un Claude, un parādīt, kā tie palīdzēja mums ātrāk nekā jebkad iepriekš izveidot modernas, pilnībā funkcionējošas vietnes.

Tā vietā, lai AI izmantotu kā vienotu pieeju visiem projektiem, mēs katram projektam piegājām atšķirīgi — izvēloties piemērotāko rīku kombināciju atkarībā no sarežģītības, mērķiem un tehniskajām prasībām. No vienkāršas galvenās lapas līdz pilnai e-komercijas platformai šie piemēri parāda, kā AI var atbalstīt dažādus izstrādes posmus kā daļa no mūsu tīmekļa izstrādes pakalpojumiem.

AI rīki tīmekļa izstrādei: Cursor, Stitch, Claude

Cursor ir AI programmēšanas asistents, kas izstrādātājiem palīdz efektīvi rakstīt, atkļūdot un atjaunināt kodu. Tas darbojas tieši redaktorā un var ģenerēt frontend un backend kodu dažādās programmēšanas valodās. Ar Auto Mode palīdzību Cursor var izveidot veselas lapas vai funkcijas, balstoties uz augsta līmeņa instrukcijām, būtiski samazinot atkārtotu darbu un paātrinot izstrādes ciklus.

Stitch fokusējas uz dizaina darba plūsmu. Tas ļauj ātri izveidot tīrus, strukturētus web izkārtojumus, manuāli nerakstot lielu apjomu CSS koda. Šos dizainus pēc tam var eksportēt un tieši savienot ar izstrādes procesu, padarot vizuālo ideju pārvēršanu funkcionālās saskarnēs vienkāršāku.

Claude pievieno šim procesam citu dimensiju, īpaši arhitektūras, sistēmas dizaina un sarežģītas refaktorēšanas jomā. Tas ir īpaši noderīgs lielāku problēmu analīzei, lietojumprogrammu struktūras pārveidošanai un palīdz definēt, kā dažādām sistēmas daļām vajadzētu darboties kopā pirms ieviešanas.

Ja šos rīkus izmanto kopā, tie veido elastīgu darba plūsmu, kas aptver dizainu, izstrādi un sistēmas domāšanu. Tā vietā, lai virzītos soli pa solim lineārā procesā, mēs varam iterēt ātrāk — pārejot no koncepcijas līdz ieviešanai daudz plūstošāk, izmantojot AI tur, kur tas sniedz vislielāko vērtību, vai tā būtu UI ģenerēšana, backend loģika vai API funkcionalitāte.

Papildus tādiem izstrādes rīkiem kā Cursor, Stitch un Claude mēs arī integrējam AI tieši mūsu veidotajās mājaslapās un platformās, izmantojot tādus API kā OpenAI atkarībā no projekta prasībām.

Projektu piemēri: no vienkāršas vietnes līdz mērogojamām tīmekļa platformām

Lai labāk saprastu, kā AI iekļaujas reālās izstrādes darba plūsmās, mēs apskatījām četrus projektus ar dažādu sarežģītības līmeni. Katrs no tiem izmanto atšķirīgu rīku kombināciju — Cursor, Stitch, Claude un AI integrācijas — atkarībā no mērķiem un tehniskajām prasībām.

ComaCloud: vienkāršs, ātrs un pilnībā AI vadīts

ComaCloud bija mūsu pirmais praktiskais eksperiments ar AI atbalstītu darba plūsmu. Mērķis bija ātri izveidot tīru un funkcionālu hostinga vietni, nepārslogojot tehnisko risinājumu.

Tehnoloģiju steks bija vienkāršs: HTML, CSS un JavaScript. Dizains tika izveidots Stitch, bet kodēšana tika veikta ar Cursor Auto Mode palīdzību.

Rezultāts: https://comacloud.lv/

Laika ietvars: 2–3 dienas no dizaina līdz live vietnei

Rezultāts ir viegla un responsīva mājaslapa ar tumšo un gaišo režīmu, plūstošām animācijām un pilnībā automatizētu izvietošanas procesu. Kad izmaiņas tiek nosūtītas caur Git, atjauninājumi dažu sekunžu laikā nonāk tiešsaistē, izmantojot Cloudflare.

Cursor ļāva mums ļoti ātri pārvērst vizuālo koncepciju par dzīvu mājaslapu ar minimālu manuālu programmēšanu, kas bija ārkārtīgi efektīvi un iespaidīgi.

ProMusic: pilnvērtīga audio iekārtu e-komercijas platforma

Nākamais bija sarežģītāks projekts klientam, kas nodarbojas ar audio iekārtu pārdošanu un nomu. Sākotnējais risinājums bija WordPress vietne, taču tā nepiedāvāja mūsdienīgu UX/UI vai nepieciešamo elastību. Mēs nolēmām to pārbūvēt no nulles, izmantojot AI, lai piešķirtu platformai jaunu, modernu izskatu un pilnvērtīgu funkcionalitāti.

Rezultāts: https://promusic.lv/

Platforma tika izstrādāta ar Node.js backend un Next.js + TypeScript frontend, veidojot pilnvērtīgu e-komercijas sistēmu.

Funkcijas:

• Platformā ir pilnvērtīga admin zona, kur produktus, nomas un krājumus var pārvaldīt vienkārši un saprotami.
• Tā atbalsta elastīgas akcijas, ļaujot izveidot promo kodus un īpašos piedāvājumus.
• Klienti un darbinieki saņem automātiskus e-pasta un Telegram paziņojumus par pasūtījumiem un izmaiņām.
• Produktu dati tiek regulāri sinhronizēti, izmantojot ikdienas XML importus no piegādātājiem.
• Vietne atbalsta vairākas valodas, tostarp latviešu, un drīzumā plānotas papildu valodas.
• Katras preces apraksts tiek bagātināts ar OpenAI, automātiski ģenerējot detalizētus aprakstus un specifikācijas.
• Katram produktam automātiski tiek pievienoti atbilstoši YouTube video, sniedzot klientiem labāku priekšstatu par to, kā produkti izskatās un darbojas reālā lietošanā.
• Norēķinu laikā sistēma automātiski pārbauda PVN informāciju un pielāgo laukus.
• Lietotāja pieredze ir vienkāršota ar Google autentifikāciju un skaidru pasūtījumu plūsmu.
• Telegram bots ļauj komandai uzreiz saņemt pasūtījumus un mainīt statusus tieši čatā.
• Kļūdas tiek monitorētas ar Sentry, un tās var ātri analizēt ar Cursor palīdzību, ar automātisku labojumu izvietošanu caur GitHub Actions.

Laika ietvars: apmēram 2 nedēļas intensīva darba.

AI integrācija ļāva dinamiski bagātināt produktu lapas, taču dažas detaļas bija jāpielāgo, jo AI dažkārt ģenerē pārāk daudz informācijas, ko mēs pēc tam kurējām, lai uzlabotu lietotāja pieredzi.

Mājaslapu Serviss: pakalpojumu vietnes pārbūve ar Claude

Mēs arī izmēģinājām atšķirīgu AI pieeju, pārbūvējot pakalpojumu vietni, ko paši izmantojam savas aģentūras ekosistēmā. Tā fokusējas uz WordPress mājaslapu tehnisko uzturēšanu uzņēmumiem Latvijā — atjauninājumiem, drošību, rezerves kopijām un monitoringu par fiksētu mēneša maksu.

Rezultāts: https://majaslapuserviss.lv/

Šajā projektā Cursor un Stitch vietā mēs izmantojām Claude Code kopā ar Claude Design, lai risinātu gan izstrādi, gan dizaina lēmumus. Mērķis bija pilnībā pārveidot vietnes struktūru, veiktspēju un lietotāja pieredzi.

Rezultāts ir moderna, viegla platforma ar fokusu uz veiktspēju un SEO:

• Frontend ir veidots ar React kā vienas lapas lietotne, kas balstīta uz komponentēm, ar pilnu bilingvālu maršrutēšanu latviešu un angļu valodā.
• Projektā tiek izmantots Vite kā būvēšanas rīks, kas kompilē vairākas lapas optimizētos production bundle ar hashed assets kešošanai un ātrumam.
• Hostings notiek ar Cloudflare Workers un Assets, nodrošinot ļoti ātru ielādi visā pasaulē bez cold start.
• Dizaina sistēma ir pilnībā pielāgota, veidota ar CSS, izmantojot mainīgos konsekvencei, atbalstot gan tumšo, gan gaišo režīmu, kā arī piedāvājot dažādus blīvuma iestatījumus atkarībā no lietotāja vēlmēm.
• Rūpīgi atlasīti Google Fonts palīdz veidot tīru un modernu vizuālo identitāti visā vietnē.
• Strukturētie dati (JSON-LD) ir ieviesti visā vietnē, uzlabojot to, kā saturs tiek attēlots meklētājprogrammās ar bagātinātajiem rezultātiem.
• Tiek ieviests pilns SEO slānis, tostarp vietnes kartes konfigurācija ar valodu alternatīvām, pareizi meta tagi sociālajai koplietošanai un stingra drošības konfigurācija.

Šis projekts parāda citu AI pielietojuma pusi — ne tikai ātrāku kodēšanu, bet arī arhitektūras, veiktspējas un mērogojamības pārdomāšanu no paša sākuma.

Lensfit: augstas veiktspējas e-komercija ar AI un meklēšanas optimizāciju

Vēl viens projekts, kurā mēs vēl plašāk izmantojām AI iespējas un inženiertehniskos risinājumus, bija kontaktlēcu e-komercijas platformas pārbūve.

Mērķis bija ne tikai uzlabot dizainu, bet izveidot ātru, mērogojamu un inteliģentu iepirkšanās pieredzi, pārejot no WordPress risinājuma uz pielāgotu arhitektūru.

Platforma tika izstrādāta ar Next.js + TypeScript steku, ar lielu fokusu uz veiktspēju, meklēšanu un stabilitāti.

• Frontend ir veidots ar jaunāko Next.js arhitektūru (App Router) un React.
• Produktu dati, pasūtījumi un klientu konti tiek pārvaldīti, izmantojot Prisma un PostgreSQL datubāzi, nodrošinot stabilu un mērogojamu backend risinājumu.
• Saturs, piemēram, lapas un mediju faili, tiek pārvaldīts ar Strapi, kas ļauj elastīgi atjaunināt saturu, nepieskaroties galvenajai lietojumprogrammai.
• Produktu meklēšana tiek nodrošināta ar Meilisearch, kas piedāvā ātrus, kļūdu tolerantus rezultātus un ieteikumus, ar rezerves sistēmu, kas saglabā meklēšanas funkcionalitāti arī tad, ja serviss nav pieejams.
• OpenAI ir integrēts tieši platformā, lai nodrošinātu straumējošu salīdzināšanas funkciju, ļaujot lietotājiem viegli izprast atšķirības starp kontaktlēcām strukturētā un saprotamā veidā.
• Norēķinu un pasūtījumu sistēma ietver automātisku e-pasta apstrādi un ģenerē pareizus PDF rēķinus ar pilnu latviešu valodas atbalstu, ieskaitot diakritiskās zīmes.
• Platformai ir spēcīgs tehniskais pamats, tostarp drošības headeri, kļūdu monitorings ar Sentry un sanitizēts dinamisks saturs, lai nodrošinātu stabilitāti un drošību.
• Strukturētie dati un SEO orientēta arhitektūra ir ieviesta visā vietnē, uzlabojot redzamību meklētājprogrammās un atbalstot bagātinātos rezultātus.
• Vietne atbalsta gan latviešu, gan angļu valodu, padarot to pieejamu plašākai auditorijai.

Papildus mēs veicām SEO auditu, salīdzinot veco WordPress versiju ar jauno risinājumu, un rezultāti parādīja būtisku uzlabojumu veiktspējā un struktūrā.

Šis projekts parāda, kā AI var tikt apvienots ar mūsdienīgu arhitektūru — ne tikai lai paātrinātu izstrādi, bet arī lai veidotu gudrākas funkcijas un radītu attīstītāku lietotāja pieredzi.

Mūsu izvērtējums: kā AI mainīja mūsu darba plūsmu

AI rīki var būtiski mainīt to, kā mēs pieejam web izstrādei. Tie palīdz:

• Paātrināt darbu: mazas vietnes kā ComaCloud var tikt izstrādātas dienās, nevis nedēļās.
• Samazināt atkārtotu kodēšanu: automatizācija ļauj izstrādātājiem vairāk koncentrēties uz UX, dizainu un funkcionalitāti.
• Uzlabot mērogojamību: pat sarežģīti projekti var gūt labumu no AI atbalstītas satura ģenerēšanas, datu apstrādes un automatizētiem atjauninājumiem.
• Izpētīt jaunas iespējas: izstrādātāji var eksperimentēt ar AI, lai uzlabotu kvalitāti un efektivitāti gan mazos, gan lielos projektos.

Mūsu pieredze rāda, ka AI neaizstāj izstrādātājus — tas ir spēcīgs asistents, kas var paātrināt izstrādi un uzlabot kvalitāti. Nelieliem un vidējiem projektiem mēs jau redzam, ka AI kļūst par mūsu darba plūsmas neatņemamu daļu. Lielākiem projektiem mēs esam pārliecināti, ka AI turpinās padarīt izstrādi ātrāku, gudrāku un efektīvāku.

Secinājums

AI tīmekļa izstrādē vairs nav nākotnes koncepts — tas jau ir realitāte, un tas darbojas. Tādi rīki kā Cursor, Stitch un Claude palīdz izstrādātājiem strādāt ātrāk, brīvāk eksperimentēt un samazināt laiku, kas tiek tērēts atkārtotiem uzdevumiem, vienlaikus saglabājot augstus kvalitātes un veiktspējas standartus.

Mūsu darbs pie ComaCloud, ProMusic, Lensfit un Mājaslapu Serviss parāda, kā AI var tikt pielietots dažādos projektu veidos — no vienkāršām vietnēm līdz sarežģītām platformām un augstas veiktspējas risinājumiem.
AI neaizstāj izstrādātāju pieredzi, bet tas atver jaunas pieejas tam, kā veidot digitālos produktus un uzlabot darba efektivitāti. Ja jūs meklējat komandu, kas strādā šādā pieejā, apskatiet mūsu WordPress izstrādes pakalpojumus.

Mūsu specializācija — WordPress vietņu izstrāde un uzturēšana. Kontakti bezmaksas konsultācijai — [email protected], +371 29394520