Loo oma uue veebilehe master prompt vaibkoodimiseks

Täida 2 lahtrit allpool → kopeeri prompt → vii Claude/ChatGPT-sse → saad 10 H1 ja 10 H2 varianti, vali parimad ja täida väli #1.

Minu äri tegeleb/müüb…

Põhimärksõna (SEO)

Minu äri tegeleb/müüb ....... Põhimärksõna SEO copywritingut silmas pidades on "MÄRKSÕNA". Loo tugeva mõjuga müügiteksti hero-sektsioon mõeldes Eesti inimese jaoks. Kasuta StoryBrand (Donald Miller) teooriat. Ole personaalne ja tee sina-vormis. Kirjuta H1 pealkiri, mis sisaldab väärtust pakkuvat tegevussõna nagu 'Avasta', 'Saavuta', 'Tee', 'Omanda' või 'Vabane' või muu selline — lähtu alati äri valdkonnast. H1 peab kõnetama sihtgrupi suurimat soovi või probleemi, pakkudes selget lubadust või lahendust. Seejärel loo H2 alapealkiri, mis vastab kahele küsimusele: Mida see teenus/toode teeb? Kuidas see parandab kliendi elu? Kogu tekst peab olema selge, kliendikeskne ja tegevusele suunav. Väldi tehnilist žargooni ja keskendu lihtsale, kergesti mõistetavale väärtuspakkumisele. Tekst peaks äratama usaldust ja julgustama kohest tegutsemist. Mõlema pealkirja kohta paku 10 näidislauset, mille vahel ma saaksin valida.

1. Hero (H1 pealkiri + H2 alapealkiri — väärtuspakkumine)

2. Mis 3 konkreetset tulemust klient saab?

3. Mis on kliendi peamine probleem (emotsiooniga)?

4. Kuidas su toode/teenus selle probleemi lahendab?

5. Mis on kaalul kui klient ei tee sinuga äri? (stakes)iMida maksab klientidele sinuga mitte koostöö tegemine? Kirjuta panuste (stakes) sektsioon, kasutades kaotuse ja ebaõnnestumise narratiivi. Näita kliendile, mida ta kaotab, kui ta ei tegutse. Rõhuta, millised probleemid, kulud või võimalused jäävad kasutamata, kui nad ei otsusta sinu toote või teenuse kasuks. Raamista see nii, et mitte tegutsemine tunduks kallim kui tegutsemine, aidates õigustada toote või teenuse hinda.

6. 3 lihtsat sammu — kuidas alustada?

7. Mida nad peavad tegema? (peamine CTA)

CTA nupu värv

Vali oma põhinupu (Call To Action) värv.

Vali üks — see määrab lehe esimese sektsiooni visuaalse ülesehituse.

Split Hero

Vasakul tekst + paremal visuaal · Kõrgeim konversioon SaaSil ja teenustel. Näited: Stripe, Shopify, HubSpot.

Center Stage

H1 + alapealkiri keskel → visuaal all · Puhas, moodne, toob toote esiplaanile. Näited: Apple, Vercel, Linear, Notion.

Full Screen Immersive

Täisekraan foto/video taust, tekst peal · Emotsionaalne, visuaalselt võimas. Näited: Airbnb, Nike, Squarespace.

SaaS App Preview

Toote UI screenshot on kangelane · "Näen mis ostan" — kõrge selgus + konversioon. Näited: Figma, Slack, Loom, Monday.com.

Bold Typography

Hiiglaslik H1 ongi visuaal · Massiivne tekst (80-120px) täidab kogu hero. Näited: Arc Browser, Raycast, Framer.

BOLD

TYPE

Sotsiaalne tõestus

Klientide logod horisontaalses ribas — "Meid usaldavad..."

Tunnistused

Klientide tsitaadid koos fotode või videotega.

Tulemused / Case study

Konkreetsed mõõdikud ja enne/pärast näited.

Garantii

Raha-tagasi lubadus, riski-pööre või konkreetne lubadus.

Funktsioonid

3-6 veergu ikoonide ja lühikirjeldustega.

Probleem → Lahendus

Kõrvuti võrdlus: kuidas oli enne, kuidas on sinuga.

Kuidas töötab

3-4 sammu numbritega ja nooltega — selge protsess.

Bento info-ruudustik

Erinevas suuruses kastid segiläbi, info-tihe modulaarne paigutus.

Demo video

Suur play-nupp toote screenshoti või eelvaatel.

Hinnakujundus

2-3 paketti võrdluses, soovituslik pakett esile tõstetud.

Võrdlustabel

"Meie vs konkurendid" tabel funktsioonide ja hinnaga.

Lõplik CTA bänner

Suur värviline plokk lehe lõpus, üks selge nupp.

KKK / FAQ

Avatav akordion 5-8 enimküsitud küsimusega.

Tiim / Meist

Tiimi liikmete fotod, rollid ja lühilugu.

Galerii / Portfoolio

Varasemate tööde või projektide visuaalne valik.

Kontakt vorm

Otse-kontakt vorm või kalendribook embed.

Klaasiefekt

Matistatud klaas, läbipaistvad kihid, udune taust.

Klaas

Aurora UI

Voolavad gradiendid, helendav virmaliste efekt.

Aurora

Pehme UI (Neumorphism)

Pehmed varjud, taktiilne, monokromaatne.

Neumorphism

Linear/Vercel

Puhas tume režiim, peened jooned (1px), arendajale.

linear

Bento-ruudustik

Modulaarsed, joondatud kastid, info tihedus.

Brutalism

Toores, julge kontrastsus, ebatavaline paigutus.

Brutal

Y2K taassünd

Metallik, neoonvärvid, retro-futuristlik.

Y2K STYLE

Claymorphism

Pehme 3D, täispuhutud elemendid, sõbralik.

Clay

Minimalistlik Luksus

Õhuline tühiruum, serif-fontid, kuldsed aktsendid.

✦ Luksus ✦

Küberpunk

Neoon, tech-noir, tumedad taustad.

CYBER//PUNK

Orgaaniline

Looduslikud kujundid, voolav, mahedad värvid.

Organic

Usaldusväärne (Finants)

Tumesinine fookus, kiltkivi tekst. Rahulik ja turvaline.

Ergas ja moodne

Indigo ja smaragd, energiline. Loodud idufirmadele.

Luksuslik

Tume kivi, kuldne aktsent, kreemjas taust. Eksklusiivne.

Tervis ja heaolu

Tsüaan ja roheline, rahulik ja puhas. Meditsiin/fitness.

Loov ja mänguline

Roosa, lilla, oranž aktsent, lõbus. Meelelahutus.

Täiuslik tumerežiim

Tõeline must, peened hallid jooned, kõrge kontrast.

Modernne/Tehniline

Inter + Roboto/Mono. Puhas ja skaleeritav.

Elegantne/Luksuslik

Playfair Display + Montserrat. Toimetuslik.

Sõbralik/Tarbija

Poppins + Open Sans. Soe ja lähenetav.

Brutalistlik/Julge

Space Grotesk + JetBrains Mono. Toores.

Toimetuslik

Merriweather + Source Sans Pro. Klassikaline.

Mikro-interaktsioonid

Hover effektid, fookusolekud, nupu scale(1.02).

Kerimisel avalduv

Sisu hajub sisse, parallaks efekt.

Edasijõudnud laadijad

Shimmer efekt, klaasiefektid modali puhul.

Minu valikud (0)Lohista ⋮⋮ → muuda järjekorda

Vali kategooriatest variante — kõik valikud ilmuvad siia ja saad neid kategooria sees ümber järjestada.

Eelvaade

Sinu hero pealkiri

Lühike väärtuspakkumine kliendile.

Sinu AI Prompt

Kood genereeritakse reaalajas Sinu klõpsude ja tekstide põhjal. Kopeeri see lõpus ja vii AI ehitajasse.

Olen ehitamas uut veebilehte. Siin on minu projekti detailid ja ranged eelistused: **1. TURUNDUSLIK VUNDAMENT:** - Hero (H1 + H2 — väärtuspakkumine): [Täitmata] - 3 tulemust, mida klient tahab: [Täitmata] - Probleem (emotsiooniga): [Täitmata] - Lahendus (kuidas toode probleemi lahendab): [Täitmata] - Mis on kaalul kui klient ei tegutse (stakes): [Täitmata] - 3 sammu (kuidas alustada): [Täitmata] - Peamine CTA: [Täitmata] **2. VISUAALNE ARHITEKTUUR:** Hero sektsioon visuaalne muster: - (vaba valik – paku ise sobivaim hero muster) Sektsiooni-plokid — lehe sektsioonid SELLES JÄRJEKORRAS (hero on alati esimene, järgnevad valitud plokid): - (vaba valik – paku ise sobivaim variant) Stiil ja esteetika: - (vaba valik – paku ise sobivaim variant) Värvid ja teema (kasuta täpselt neid HEX-koode): - (vaba valik – paku ise sobivaim variant) Tüpograafia: - (vaba valik – paku ise sobivaim variant) **3. INTERAKTSIOONID:** - (vaba valik – paku ise sobivaim variant) **4. KITSENDUSED (Mida vältida) — kohustuslikud reeglid:** - Ei raskeid animatsioone (üleminekud max 300ms, ei blokeeri kasutaja tegevust, ei automaatselt mängivaid videoid heliga, ei lõpmatut kerimist). - Kõrge kontrastsus (WCAG AA min 4.5:1, väldi helehalli tekstile valgel taustal ja puhast valget puhtal mustal). - Ei ülekuhjamist (max 3 põhivärvi, max 2 fondiperekonda, 8px ruudustik, selge hierarhia, kuni 5 kirjasuurust ühes vaates). - Selge navigatsioon (ikoonidel sildid, ei "hampurgerit" desktopis, ei peidetud navi). - Mobiilisõbralik (puutealad min 44x44px, ei horisontaalset kerimist v.a karussellid, ei hover-only interaktsioone). - Jõudlus (optimeeritud pildid WebP + lazy load, CLS < 0.1). - Vormid (sildid väljade kohal, mitte sees; jooksev valideerimine; "Saada" nupp ei tohi olla deaktiveeritud). - Ligipääsetavus (alt-tekstid, klaviatuurinavigatsioon töötab, info ei tohi sõltuda ainult värvist). **5. CTA NUPU VÄRV:** - Põhinupu (CTA) värv: #8b5cf6 Palun loo nende nõuete põhjal detailne, modernne ja konversioonile suunatud veebilehe struktuur (Tailwind CSS, React, Next.js).