Kuidas luua veebileht tehisintellektiga: esimesest prompti kuni valmis saidini

Tehisintellektiga veebilehe ehitamiseks kirjuta üles, milleks sait on ja milliseid lehti see vajab, kirjelda seda tehisintellekti veebi- või rakendusehitajale paari lihtsa lausega ning lase tal luua esimene versioon, mida näed elavas eelvaates. Seejärel paranda tekst, vaata üle telefonis, lisa otsingumootorite jaoks vajalikud põhitõed ja avalda see domeenil. Enamiku väikeste saitide — ettevõttelehe, portfoolio, maandumislehe või lihtsa ajaveebi — saab ideest veebi ühe istumisega.

Millist veebilehte sa ehitad?

"Veebileht" hõlmab väga erinevaid asju ja valitud tüüp muudab selle, mida palud:

Kui sinu sait on viimasel real, ehitad tegelikult veebirakendust turunduse esilehega. See on korras — tehisintellekti rakendusehitajad käsitlevad mõlemat — aga planeeri rakenduse osa eraldi; meie juhend kuidas luua rakendus tehisintellektiga käsitleb seda.

Tehisintellekti veebiehitajad vs mallid vs tehisintellekti rakendusehitajad

On kolm levinud teed ja iga üks sobib erinevale inimesele.

• Mallipõhised ehitajad tehisintellekti funktsioonidega (Wix, Squarespace, Framer ja sarnased). Alustad kujundatud mallist ja muudad visuaalselt; tehisintellekt aitab kirjutada teksti või soovitada paigutust. Need sobivad hästi, kui tahad läbiproovitud disaini, visuaalset redaktorit ja sisseehitatud lisasid, nagu ajaveeb või ajavaliku vidin.
• Tehisintellekti rakendusehitajad (Mythex, Lovable, Bolt ja teised). Kirjeldad saiti vestluses ja tehisintellekt kirjutab koodi nullist, seejärel käivitab selle elavas eelvaates. Need sobivad hästi, kui tahad kohandatud lahendust, tahad muuta rääkides, mitte kastikesi lohistades, või ootad hiljem rakendusfunktsioone.
• Käsitsi ehitatud või agentuuri lehed. Endiselt õige valik suurtele saitidele keeruka sisuga, rangete brändisüsteemidega või kus iga leht vajab õigusliku kontrolli.

Konkreetsete tööriistade külgvõrdluseks vaata parimaid tehisintellekti veebiehitajaid.

Samm 1: planeeri sait ühele lehele

Enne tööriista avamist vasta neile viiele küsimusele. See võtab kümme minutit ja säästab tunde edasi-tagasi suhtlust:

1. Kes on külastaja ja mida ta peaks tegema? "Kohalikud kodanikud, kes peaksid helistama hinnapakkumise saamiseks" on plaan. "Kõik" ei ole.
2. Millised lehed on olemas? Loetle need. Enamikul väikestel saitidel on neli või viis.
3. Mis iga lehe peale läheb? Iga kohta rida või kaks: "Teenused: kolm teenust lühikirjelduse ja alghinnaga."
4. Mis on päris? Kogu oma tegelik ettevõtte nimi, teenused, hinnad, aadress, lahtiolekuajad, fotod ja arvustused, mida võid kasutada. Tehisintellekt loob kohatäiteid kõige jaoks, mida sa talle ei anna.
5. Milline peaks tunne olema? Kaks-kolm sõna ("rahulik, puhas, palju tühja ruumi") või link saidile, mis meeldib.

Samm 2: kirjuta esimene prompt

Hea esimene prompt kirjeldab ettevõtet ja lehti, mitte koodi:

Ehita veebileht Harbor Physio jaoks, füsioteraapia kliinikule väikeses rannikulinnas. Lehed: Avaleht (esiplaanil nupp "Broneeri hindamine", kolm põhjust meid valida, lühike arvustuste jaotis), Teenused (spordivigastused, seljavalu, taastusravi pärast operatsiooni — igaühel lõik ja seansi kestus), Meist (kaks füsioterapeuti, kohatäitjad fotodele) ja Kontakt (aadress, lahtiolekuajad, telefon ja kontaktvorm). Rahulik, puhas välimus pehme sinise rõhuvärviga. Esmalt mobiil. Kasuta päris kõlavat teksti, mitte lorem ipsumit, ja ära leiuta arvustusi ega auhindu.

See viimane lause on oluline. Tehisintellekti tööriistad täidavad hea meelega tühja ruumi väljamõeldud arvustuste, "10 000 kliendi usaldus" bännerite või võltsauhindadega. Ütle neile, et ei tohi, ja kontrolli ikkagi.

Kui sul on juba logo, brändivärvid või ekraanipilt saidist, mis meeldib, lisa see. Rohkem mustreid leiad artiklist kuidas kirjutada promte tehisintellekti rakendusehitajatele.

Samm 3: vaata üle nagu külastaja

Kui esimene versioon ilmub, ära alusta fontide peenhäälestamisest. Käi läbi nagu külastaja:

• Kas viie sekundi jooksul maandumisest näed, mida ettevõte teeb?
• Kas peamine nupp on selge ja kas see viib kuhugi?
• Kas iga menüüs olev leht on olemas ja seostub õigesti?
• Lülitu telefonisuurusele vaatele. Enamik külastajaid tuleb telefonist ja just seal ilmnevad kitsas tekst ning liiga suured pildid.

Seejärel muuda korraga ühte asja. "Tee avapealkiri lühemaks ja pane telefoninumber päisesse" annab parema tulemuse kui "tee see paremaks". Kui muudatus läheb valesti, taasta varasem versioon, selle asemel et proovida seda sõnadega parandada.

Samm 4: asenda kohatäitjad päris sisuga

Esimeses mustandis on kohatäitjapildid ja üldised laused. Töötle lehe kaupa:

• Tekst. Kleebi oma päris teenuste kirjeldused, hinnad ja lahtiolekuajad. Palu tehisintellektil neid kokku tõmmata, aga faktid jäägu sinu omadeks.
• Pildid. Laadi üles oma fotod, kus võimalik. Stock-fotod sobivad taustadeks; päris fotod sinu tööst, meeskonnast või ruumidest loovad rohkem usaldust.
• Tõendid. Kasuta ainult arvustusi, logosid ja numbreid, mida suudad tõestada.
• Õiguslikud lehed. Kui kogud vormi kaudu isikuandmeid, vajad tavaliselt privaatsuspoliitikat. Palu tehisintellektil leht luua ja seejärel kontrolli seda reeglite vastu, mis sinu tegevuspiirkonnas kehtivad — genereeritud poliitika on algus, mitte juriidiline nõu.

Samm 5: vormid, broneeringud ja muud "rakenduse" osad

Kontaktvorm vajab kohta, kuhu esitused saata. Valikud lihtsamast keerukamani:

Kui vajad päris broneeringuid või makseid, vaata kuidas luua broneerimisrakendust ja kuidas lisada oma rakendusse makseid.

Samm 6: SEO põhitõed enne jagamist

Tehisintellekt võib kirjutada ilusa lehe, mida otsingumootorid peaaegu ei mõista. Enne avaldamist palu:

• Iga lehe jaoks ainulaadne pealkiri ja meta-kirjeldus
• Iga lehe jaoks üks selge peapealkiri mõistlike alapealkirjadega
• Piltidele kirjeldav alt-tekst
• Open Graph märgendid, et lingid näeksid sotsiaalmeedias või sõnumites jagamisel korrektsed välja
• Saidikaart ja robots-fail

Üks tehniline punkt on kasulik teada. Paljud tehisintellekti ehitajad loovad üheleheküljelisi rakendusi, kus brauser loob lehe JavaScripti abil. Otsingumootorid suudavad neid indekseerida, aga lehtedele, mis peavad otsingus edukad olema, on staatiline või serveris renderdatud HTML usaldusväärsem. Kui otsingu liiklus on oluline, palu staatilist saiti või raamistikku, mis renderdab lehed serveris. Meie juhend SEO tehisintellektiga ehitatud veebilehtedele käsitleb seda sügavamalt.

Samm 7: avalda ja ühenda domeen

Avaldamine muudab eelvaate avalikuks saidiks. Enamik ehitajaid annab esmalt tasuta alamdomeeni, mis sobib testimiseks ja sõpradega jagamiseks. Ettevõtte jaoks ühenda oma domeen: kas ostad selle ehitaja kaudu või suuna olemasolev domeen saidile DNS-kirjega. Kuidas ühendada kohandatud domeen käib DNS-osa läbi.

Pärast avaldamist seadista tasuta Google Search Console konto, et näha, kas sinu lehti indekseeritakse.

Levinumad vead

• Kõige korraga küsimine. Kaksteist lehte, ajaveeb, pood ja liikmeala ühes prompti annab igaühest pindliku versiooni. Ehita kõigepealt põhilehed.
• Kohatäiteteksti avaldamine. Enne avaldamist otsi igast lehest "Lorem", "Sinu ettevõte" ja väljamõeldud numbrid.
• Mobiili ignoreerimine. Kontrolli iga lehte telefonilaiusel, mitte ainult avalehte.
• Ebamäärane üleskutse tegutseda. Igal lehel peaks järgmine samm olema ilmne: helista, broneeri, osta või võta ühendust.
• Unustada, kes seda uuendab. Kui keegi teine muudab saiti igal nädalal, veendu, et ta saab seda teha — kas vestluses sama ehitajaga või valides tööriista visuaalse redaktoriga.

Mis see maksab

Tehisintellektiga tehtud lihtne sait maksab tavaliselt palju vähem kui kujundatud ja ehitatud sait. Planeeri jooksvad kulud:

• Ehitaja. Enamikul on tasuta aste asjade proovimiseks ja tasuline pakett kohandatud domeenide ja suurema kasutuse jaoks.
• Majutus. Mõnikord paketis kaasas, mõnikord kasutusepõhine.
• Domeeninimi. Aastane registreerimistasu, mis sõltub nimest ja laiendist.
• Lisad. E-posti teenus vormide teavituste jaoks või tasulised tööriistad broneeringute või uudiskirjade jaoks.

Millal on veebiehitaja parem valik

Ole aus selle suhtes, mida vajad. Kui tahad klassikalist reklaamlehte, visuaalset redaktorit mittetehnilisele kolleegile, sisseehitatud ajaveebi ajastamisega või veebipoe, kus laoseisu ja saatmise eest hoolitsetakse sinu eest, võib mallipõhine veebiehitaja või spetsiaalne platvorm nagu Shopify sobida paremini kui ükski tehisintellekti genereeritud kood. Tehisintellekti rakendusehitajad on eelisseisus, kui sait on ebatavaline, muutub sageli või on ukseks millelegi, mis käitub nagu rakendus.

Ehitamine Mythexiga

Mythex on tehisintellekti rakendusehitaja ning veebilehed on üks levinumaid asju, mida selle abil luuakse. Kirjeldad saiti, see ehitab selle elavas eelvaates (sealhulgas telefonisuuruses vaates) ja avaldad aadressil sinunimi.mythex.app; Pro-paketis saad osta domeeni Mythexis või ühendada oma domeeni. Kui otsingu edetabelid on olulised, võid paluda lihtsat staatilist saiti vaikimisi React-rakenduse asemel — vaata dokumentatsiooni staatiliste veebilehtede ja avaldatud rakenduse SEO kohta.

Mythex ei ole CMS: turundusmeeskonnale pole eraldi redaktori sisselogimist, seega muudatusi tehakse vestlusega ehitajaga või koodi muutes. Tühja lehe vältimiseks alusta ühest veebilehe mallist või portfoolio mallist, mis avab uue projekti täidetud algprompti abil.

Küsimused