Miten tekoäly luo täydellisen WordPress-sivuston 2 minuutissa

Aina kun joku kirjoittaa PAGEnzaan yrityksen kuvauksen ja painaa luo, taustalla tapahtuu jotain melko monimutkaista – noin 90 sekunnissa. Tämä julkaisu selittää tarkalleen, mitä se on.

Ongelma mallipohjien kanssa

Useimmat tekoälyllä toimivat sivustonrakentajat toimivat näin: ne valitsevat mallipohjan, vaihtavat siihen tekstisi ja kutsuvat sitä "tekoälyn luomaksi". Lopputulos näyttää samalta kuin kaikki muutkin kyseisellä alustalla rakennetut sivustot.

PAGEnza toimii eri tavalla. Mallipohjia ei ole. Jokainen sivusto alkaa tyhjästä Gutenberg-kankaasta ja rakennetaan algoritmisesti joukosta suunnittelusääntöjä, joita kutsumme suunnittelumandaatiksi.

Mikä on suunnittelumandaatti?

Suunnittelumandaatti on jäsennelty kehote – noin 8 000 tokenia – joka kuvaa jokaisen visuaalisen ja rakenteellisen päätöksen tietylle sivustolle. Se rakennetaan Pythonilla ennen tekoälykutsua, syötteesi perusteella.

Se sisältää kuusi osaa:

Osa A – Brändi-identiteetti: toimiala, yrityksen nimi, sävy (esim. "ammattimainen" vs "leikkisä"), kohdeyleisö.

Osa B – Värijärjestelmä: 4 värin paletti (muste, bg1, bg2, korostusväri) luotu algoritmisesti ja validoitu WCAG AA -kontrastisääntöjä vastaan. Jokainen paletti tarkistetaan todellisella luminanssimatematiikalla – ei arvauksilla.

Osa C – Typografia: fontt trio (otsikko / leipäteksti / korostusväri) valittuna yli 80 Google Fontista, suodatettuna toimialan arkkityypin mukaan ja varmistettuna, että se sisältää latin-ext -merkkituen.

Osa D – Asettelupohja: sivun rakenne – mitkä osiot ilmestyvät, missä järjestyksessä ja millä variantilla (esim. sankari täysleveällä kuvalla vs sankari jaetulla asettelulla).

Osa E – Suunnittelurajoitukset: reunuksen pyöristystyyli (terävä / pehmeä / pyöristetty), osioiden jakajien muodot, kuvankäsittely, välit.

Osa F – Sisältösäännöt: mikä teksti menee minnekin, miten otsikot rakennetaan, mitkä toimintakehotteet ilmestyvät.

Miten väripaletteja luodaan

Väri on se, missä useimmat tekoälytyökalut epäonnistuvat. LLM:n pyytäminen valitsemaan värejä antaa sinulle satunnaisia hex-koodeja, jotka saattavat näyttää hyvältä erikseen, mutta epäonnistuvat saavutettavuustesteissä – tai näyttävät vain geneerisiltä.

Me lähestymme asiaa eri tavalla. Väripalettijärjestelmämme toimii näin:

1. Toimialasi ja arkkityyppisi (esim. "luksus", "rohkea", "maanläheinen") perusteella valitsemme 20 ennalta tarkastettua väripalettiryhmää
2. Jokaisesta ryhmästä valitsemme paletin, jossa musteella on ≥4,5:1 kontrasti kaikkiin taustoihin
3. Varmistamme, että korostusvärillä on ≥3,0:1 kontrasti bg1:een ja bg2:een
4. Varmistamme, että kahdella taustavärillä on kontrastoivat värisävyt (yksi lämmin, yksi viileä), jotta osiot tuntuvat erilaisilta.

Jos paletti epäonnistuu missä tahansa tarkistuksessa, se korvataan automaattisesti. Ei LLM-osallistumista tässä vaiheessa – se on puhdasta matematiikkaa.

Miten Gutenberg-lohkoja kootaan

Kun suunnittelumandaatti on valmis, se menee Gemini Flashille tiukalla kehotteella, joka määrittää:

• Mitkä lohkot ovat sallittuja (noin 40 Gutenberg-lohkotyypin valkoinen lista)
• Vaaditut attribuutit kullekin lohkotyypille
• Tarkka JSON-muoto tulosteelle

Tekoäly palauttaa raakaa Gutenberg-lohkojen JSONia – ei HTML:ää, ei Reactia, todellista WP-lohkomerkintää. Tämä JSON käy sitten läpi useita validointivaiheita:

1. Skeemavalidointi – vaaditut attribuutit läsnä, tuntemattomia lohkotyyppejä ei ole
2. CSS-luokkien puhdistus – keksityt luokkanimet poistetaan ja korvataan suunnittelujärjestelmämme luokilla
3. Korjauskierrokset – välit normalisoidaan, kansilohkojen gradientit yhtenäistetään, muotoilijat lisätään.

Lopputulos ladataan suoraan WordPressiin WP REST API:n kautta ja aktivoidaan sivuston etusivuksi.

Mikä tekee jokaisesta sivustosta ainutlaatuisen

Jokaisen luonnin välillä vaihtelee useita asioita, jopa saman toimialan sisällä:

• Väripaletti: 20+ ryhmää, joissa jokaisessa useita paletteja
• Fontt trio: 6+ yhdistelmää per arkkityyppi
• Osioiden järjestys ja variantit: sankarin asettelu, tilastotyyli, ominaisuus korttien järjestely
• Muotoilijat: orgaaniset vs geometriset, amplitudi/taajuusvaihtelut
• Blob-muodot: orgaanisille toimialoille, kuva- ja korttiblobit satunnaistetaan 12 variantista.

Tuloksena on, että kaksi samana päivänä luotua pizzaravintolaa saa erilaiset värit, erilaiset fontit, erilaiset asettelut – ja molemmat ovat WCAG AA -yhteensopivia.

Mitä seuraavaksi

Työskentelemme parhaillaan:

• Monisivuisen luonnin – /about, /services ja /contact -sivujen luominen samasta mandaatista
• Live-esikatselu – sivuston näkeminen ennen sen käyttöönottoa WordPressiin
• Tyylin siirto – lataamalla kuvakaappaus sivustosta, josta pidät, ja poimimalla sen suunnitteludna.

Jos haluat nähdä järjestelmän toiminnassa, generaattoria voi kokeilla ilmaiseksi – ensimmäistä sivustoa varten ei tarvita tiliä.