Kā AI ģenerē pilnīgu WordPress vietni 2 minūtēs

Katru reizi, kad kāds ievada uzņēmuma aprakstu PAGEnza un nospiež pogu "ģenerēt", fonā notiek kaut kas ļoti sarežģīts — apmēram 90 sekunžu laikā. Šis ieraksts izskaidro, kas tieši tas ir.

Problēma ar veidnēm

Lielākā daļa AI vietņu veidotāju darbojas šādi: viņi izvēlas veidni, aizstāj jūsu tekstu un sauc to par "ar AI ģenerētu". Rezultāts izskatās kā jebkura cita vietne, kas izveidota šajā platformā.

PAGEnza darbojas atšķirīgi. Nav veidņu. Katra vietne sākas no tukša Gutenberg audekla un tiek veidota algoritmiskā veidā no dizaina noteikumu kopuma, ko mēs saucam par Dizaina mandātu.

Kas ir Dizaina mandāts?

Dizaina mandāts ir strukturēts uzvedinājums — aptuveni 8000 žetonu garumā —, kas apraksta katru vizuālo un strukturālo lēmumu konkrētai vietnei. Tas tiek veidots Python valodā pirms jebkura AI pieprasījuma, pamatojoties uz jūsu ievadīto informāciju.

Tas sastāv no sešām daļām:

A daļa — Zīmola identitāte: nozare, uzņēmuma nosaukums, tonis (piemēram, "profesionāls" pretstatā "rotaļīgam"), mērķauditorija.

B daļa — Krāsu sistēma: 4 krāsu palete (tumšā krāsa, fons1, fons2, akcents), kas ģenerēta algoritmiskā veidā un validēta atbilstoši WCAG AA kontrasta noteikumiem. Katra palete tiek pārbaudīta, izmantojot reālu luminiscences aprēķinu — nevis minējumus.

C daļa — Tipogrāfija: fontu trio (virsraksts / pamatteksts / akcents), kas izvēlēts no vairāk nekā 80 Google Fonts, filtrēts pēc nozares arhetipa un pārbaudīts, lai iekļautu latin-ext rakstzīmju atbalstu.

D daļa — Izkārtojuma plāns: lapas struktūra — kuras sadaļas parādās, kādā secībā un ar kādu variantu (piemēram, galvenā sadaļa ar pilna platuma attēlu pretstatā galvenajai sadaļai ar sadalītu izkārtojumu).

E daļa — Dizaina ierobežojumi: apmales rādiusa stils (asi / mīksti / noapaļoti), sadaļu atdalītāju formas, attēlu apstrāde, atstarpju sistēma.

F daļa — Satura noteikumi: kāds teksts kur nonāk, kā tiek strukturēti virsraksti, kādi aicinājumi uz darbību parādās.

Kā tiek ģenerētas krāsu paletes

Krāsa ir joma, kurā lielākā daļa AI rīku kļūdās. Pieprasot LLM izvēlēties krāsas, jūs saņemat nejaušus heksadecimālus kodus, kas var izskatīties labi atsevišķi, bet neiztur piekļūstamības testus — vai vienkārši izskatās vispārīgi.

Mēs izmantojam citu pieeju. Mūsu krāsu paletes sistēma darbojas šādi:

1. Pamatojoties uz jūsu nozari un arhetipu (piemēram, "greznība", "drosmīgs", "zemisks"), mēs izvēlamies no 20 iepriekš auditētām krāsu paletes grupām
2. Katrā grupā mēs izvēlamies paleti, kurā tumšajai krāsai ir ≥4.5:1 kontrasts pret visiem foniem
3. Mēs pārbaudām, vai akcentam ir ≥3.0:1 kontrasts pret fons1 un fons2
4. Mēs nodrošinām, ka diviem fona krāsām ir kontrastējošas krāsu temperatūras (viena silta, viena vēsa), lai sadaļas justos atšķirīgas

Ja palete neiztur kādu pārbaudi, tā tiek automātiski aizstāta. Šajā posmā nav iesaistīts LLM — tas ir tīrs aprēķins.

Kā tiek salikti Gutenberg bloki

Kad Dizaina mandāts ir gatavs, tas tiek nosūtīts Gemini Flash ar stingru uzvedinājumu, kas nosaka:

• Kuri bloki ir atļauti (ap ~40 Gutenberg bloku tipu baltais saraksts)
• Nepieciešamās katra bloka tipa atribūti
• Precīzs JSON formāts izvadei

Mes apstrādājam izejas Gutenberg bloku JSON — nevis HTML, nevis React, bet gan faktisko WP bloku atzīmi. Pēc tam šis JSON iziet vairākas validācijas kārtas:

1. Shēmas validācija — nepieciešamie atribūti ir klāt, nav nezināmu bloku tipu
2. CSS klases sanitizācija — izdomātas klases nosaukumi tiek noņemti, aizstāti ar mūsu dizaina sistēmas klasēm
3. Labošanas posmi — sinhronizēti atstarpju atribūti, normalizēti vāka bloka gradienti, ievietoti formas atdalītāji

Rezultāts tiek augšupielādēts tieši WordPress, izmantojot WP REST API, un aktivizēts kā vietnes sākumlapa.

Kas padara katru vietni unikālu

Katras ģenerēšanas laikā atšķiras vairāki aspekti, pat vienai un tai pašai nozarei:

• Palete: 20+ grupas, katrai ar vairākām paletēm
• Fontu trio: 6+ kombinācijas katram arhetipam
• Sadaļu secība un varianti: galvenās sadaļas izkārtojums, statistikas stils, funkciju karšu kārtojums
• Formas atdalītāji: organiski pret ģeometriskiem, amplitūdas/frekvences variācijas
• Blob formas: organisko nozaru gadījumā attēlu un karšu blob formas tiek randomizētas no 12 variantiem

Rezultātā divas vienas dienas laikā ģenerētas picērijas būs ar atšķirīgām krāsām, atšķirīgiem fontiem, atšķirīgiem izkārtojumiem — un abas atbildīs WCAG AA standartiem.

Kas tālāk

Pašlaik mēs strādājam pie:

• Vairāku lapu ģenerēšana — /about, /services un /contact lapu ģenerēšana no tā paša mandāta
• Tiešraides priekšskatījums — vietnes priekšskatīšana pirms tās izvietošanas WordPress
• Stila pārnešana — augšupielādējot vietnes ekrānuzņēmumu, kas jums patīk, un izgūstot tās dizaina DNS

Ja vēlaties redzēt sistēmu darbībā, ģenerators ir bez maksas izmēģināms — pirmajai vietnei nav nepieciešams konts.