Egyoldalas weboldal építése
Beszélgetés az AI-jal, nem kódolás. Nyolc szekció, HTML + Tailwind, Vercel deploy, custom domain — két óra alatt élesben.
Egy működő weboldal a saját domaineden.
Mobil-barát, HTTPS-es, nem olyan, mint egy ingyenes sablon. A cél nem a látvány — hanem hogy létezzen, és az ajánlatod 30 másodperc alatt érthető legyen róla.
A legtöbb kezdő itt akad meg: a weboldalt túlbonyolítva képzeli el. Pedig egy lead-magnetes, egyoldalas oldal felépítése ma annyi, hogy az AI-nak elmondod, mi legyen rajta — és ő megírja a HTML-t.
Mit rakunk a helyére ezen a héten
- A nyolc szekcióHero, Problémák, Megoldás, Rólam, Outcome-ok, Garancia, FAQ, CTA. Mindegyiknek egy dolga van.
- HTML és Tailwind generálásTailwind CDN-ről egyetlen sorral, nincs build-folyamat. Két körben finomítasz.
- GitHub és Vercel deployPush GitHub-ra, deploy Vercel-re, custom domain rákötés a Sybell DNS-en.
A nyolc szekció
Egy egyoldalas oldal nyolc szekcióból áll, kötött sorrendben.
(1) Hero — egy mondatos ígéret + CTA. (2) Problémák — 3 fájdalom a vevőd hangján. (3) Megoldás — mit csinálsz. (4) Rólam — 3-4 mondat. (5) Outcome-ok — mit kap a vevő ténylegesen. (6) Garancia. (7) FAQ — 5-7 kérdés-válasz. (8) CTA + footer.
Mindegyik szekciónak EGY dolga van. Ha kettőről próbál szólni, már bonyolult.
Az 1-3. modulból emeled át.
Az ajánlat 1 mondata a Hero-ba kerül. A 3 problémát a vevő hangjából emeled. A 3 outcome a csomagból jön.
Nem kreatívkodsz — átmásolsz. Az előző három modul output-jai pontosan azok az építőkockák, amikből a weboldal szövege felépül. Mire idáig érsz, már megvan minden anyagod.
HTML és Tailwind generálás Claude Code-dal
Tailwind CDN-ről egyetlen sorral betölthető — nincs build-folyamat, ami a kezdőknek a leggyakoribb akadály.
VS Code-ban megnyitsz egy üres mappát, és a Claude Code-nak elmondod: „Készíts egy index.html-t Tailwind CDN-ről, ezekkel a szekciókkal: [lista]." Második körben finomítasz: „A hero legyen csendesebb, a garancia legyen kiemelve, a FAQ legyen accordion."
20-30 perc, és kész a fájl.
A Tailwind-prompt szerkezete
Ezt a struktúrát másold be a Claude Code-nak — az 1-3. modul output-jait illeszd a placeholderekbe.
Készíts egy egyoldalas index.html-t Tailwind CDN-ről, ezekkel a szekciókkal: [STRUKTÚRA — az 5.1 prompt eredménye] Követelmények: - Mobil-first responsive - Sötét háttér (#0a0a0a), világos szöveg (#e5e5e5) - Sans-serif (Arial, system-ui) - Egy akcent szín (lila #7c3aed VAGY kék #2563eb) - Zero emoji, zero gradient - Csak natív HTML accordion (details/summary) - Egyetlen index.html — semmi külön CSS, semmi külön JS
GitHub és Vercel deploy
Az index.html a gépeden — még nem nyilvános.
A Vercel ingyenes hoszting, ami GitHub-ról deployol egy kattintással. Lépéssor: GitHub-on új repo, git init / commit / push a Claude Code segítségével, Vercel-en bejelentkezés GitHub-bal, „New Project", import, „Deploy".
30 másodperc, és van egy tedneved.vercel.app URL-ed.
A deploy CLI-lépései
Ezeket a Claude Code terminál-ablakában futtatod, miután kész az index.html.
git init git add index.html git commit -m "Első verzió" git branch -M main git remote add origin https://github.com/USER/REPO.git git push -u origin main # Vercel admin → Settings → Domains → tedneved.hu # Sybell DNS: # A @ 76.76.21.21 # CNAME www cname.vercel-dns.com
Saját domain és HTTPS
Vercel admin → Settings → Domains → tedneved.hu hozzáadása.
A Vercel ad két DNS-rekordot (egy A, egy CNAME), ezeket a Sybell DNS-be bemásolod (a 04. modul beállításán keresztül). 1-2 óra propagáció, és a saját domaineden van a webhely, automatikus HTTPS-szel.
A cél nem a látvány — hanem hogy létezzen5. modul · A hét témája
Mit csinálsz ezen a héten
Generáld le az index.html-t Claude Code-dal, push-old GitHub-ra, deployold Vercel-re, és kösd rá a saját domaint.
Ne tölts napokat a finomhangolással. A 8 szekció szövege az 1-3. modul output-jaiból már megvan — most a HTML-t és a deploy-t kell egyszer végigvinni. Két óra reális.
Ettől a perctől nyilvánosan létezel.
Fotózd le a böngésző URL-jét — ez fontos pillanat.
A weboldal nem önmagában cél; a kapu, amin keresztül a következő hetekben minden további rendszer (copy, funnel, email-lista, analitika) ráépül.
Eredmény: éles weboldal a saját domaineden.
Mobil-barát, HTTPS-es, az ajánlatod 30 másodperc alatt érthető. Innen jön a copy-erősítés és a landing oldal.