Landing oldal indító készlet

Mire jó

A landing oldal építése rendszerint a legrosszabb sorrendben történik: előbb megírod a szöveget egy dokumentumba, aztán kiderül, hogy a szekciók sorrendje nem működik.

Ez a skill megfordítja a sorrendet: előbb épít, aztán kérdez. Megadsz egy oldalt, aminek tetszik a felépítése, ő pedig kinyeri belőle a valós színeket, betűket és térközöket, újraépíti, és a második fázisban már élő linket ad rá.

A szerkezetet tehát böngészőben látod, nem elképzeled. Ezután egy összevont űrlapon bekéri a valós tartalmadat, szekciónként 3 címsor-javaslatot ír, és a jóváhagyottat kiteszi az élő oldalra.

A képhelyekre valódi képeket generál, nem szürke dobozokat hagy. A négy fázis végén publikált, megosztható linked van.

Kinek hasznos

• Szolgáltatóknak és kis ügynökségeknek, akiknek egy konkrét ajánlathoz kell landing
• Vállalkozóknak, akik tudják, milyen oldal tetszik nekik, csak megépíteni nem tudják
• Terminálban (Claude Code-ban) dolgozóknak, akiknél nem gond a gépre települő Next.js projekt
• Annak, aki több landing-változatot próbálna ki ugyanarra az ajánlatra

Kinek nem való

• A claude.ai webes felületén nem működik: az építéshez, az elemzéshez és a publikáláshoz terminál kell
• Többoldalas weboldalhoz vagy webshophoz alkalmatlan, egyetlen landing oldalra készült
• Aki magyar oldalszöveget keres és nem működő kódot, jobban jár a hazai landing-skillekkel
• Ha a gépedre nem telepíthetsz semmit, a folyamat elakad: menet közben böngésző-automatizációt és projekt-függőségeket tesz fel

Mit csinál lépésről lépésre

1. Ellenőrzi a képgeneráláshoz kellő API-kulcsot, és ha hiányzik, végigvezet a beszerzésén.
2. Feltesz 10 kérdést a vállalkozásodról, a célodról és a cselekvésre hívásról, majd bekéri az inspirációs linket.
3. Böngészőben elemzi az inspirációs oldalt: képernyőképek szekciónként, valós színek, betűtípusok, térközök, mobil nézet.
4. Next.js projektet állít fel a kinyert értékekkel, és szekciónként épít: képernyőképet készít, összeveti az eredetivel, javítja az eltéréseket.
5. Publikálja a klónt, és megosztható linket ad rá, hogy a szerkezetet élőben lásd.
6. Egy űrlapon bekéri a valós tartalmadat minden szekcióhoz, a hero-tól az űrlap-mezőkig.
7. Szekciónként 3 címsor-javaslatot ír, és a jóváhagyottat felteszi az élő oldalra.
8. Minden képhelyre valódi képet generál, és publikálja a végleges verziót.

Mit tartalmaz a csomag

• SKILL.md: a négy fázis (felmérés, klónozás, tartalom-bekérés, testreszabás) a jóváhagyási pontokkal
• references/01-intake.md: a 10 felmérő kérdés és a válaszok összegzése
• references/02-clone.md: a klónozás munkafolyamata az oldal-elemzéstől a publikálásig
• references/03-discovery.md: a tartalom-bekérő űrlap szekciónkénti bontásban
• references/04-customize.md: szövegírási képletek és a szekció-átírás menete
• references/05-quality-rules.md: design-szabályok: kontraszt-arány, mobil térköz, minimális gomb- és betűméret
• scripts/, components/, data/: a képgeneráló script, 11 kész szekció-típus (hero, árazás, folyamat, GYIK, vélemények), plusz 9 adattábla színekhez és tipográfiához

Hogyan használd

Akkor vedd elő, amikor egy konkrét ajánlathoz kell landing, és van a fejedben egy oldal, aminek tetszik a felépítése. Indítsd így: „építs nekem landing oldalt a szolgáltatásomhoz, az inspirációm ez az oldal”, és tedd mellé a linket.

Két dolgot érdemes előre elkészítened: az inspirációs linket és a valós tartalmadat. A tartalom-bekérő űrlap egyszerre kéri a hero-ígéretedet, a 3–4 szolgáltatásodat, a véleményeket, a folyamatod lépéseit és a kifogásokat.

Cserébe működő, publikált oldalt kapsz, nem dokumentumot. A klón megjelenésekor szánj időt a visszajelzésre: amit ott nem javíttatsz ki, az végigkíséri a folyamatot, mert a további fázisok erre a szerkezetre épülnek.

Ha még nem építettél saját skillt, a nulláról induló skill-építésről szóló leckét itt nézheted meg.

Jó tudni

Az inspirációs oldal kiindulópont, nem végeredmény: a harmadik és negyedik fázisban a szöveg és a képek a tieidre cserélődnek.

Van, ami nem költözhet át. A logó, a márkanév, a fotók, a védjegyek és a szó szerinti szövegek az eredeti tulajdonosáé maradnak, ezért olyan oldalt válassz, aminek a felépítése tetszik, ne olyat, amit egy az egyben megjelentetnél. Versenytársnál a hasonlóság az ügyfélnek is feltűnik.

A képgeneráláshoz Gemini API-kulcs kell, a beszerzésén végigvezet. Kulcs nélkül is lefut a folyamat, csak a képhelyeket jelöli meg. A publikáláshoz Vercel-fiók kell, ez ingyenes szinten is működik.

Menet közben telepít néhány segédeszközt: böngésző-automatizációt (ehhez egy 300 MB körüli letöltés tartozik) és egy Next.js projektet a gépeden. A belső utasításai angol nyelvűek, magyarul viszont beszélhetsz vele.

Telepítés

1. Töltsd le a csomagot a fenti gombbal.
2. claude.ai vagy Claude Desktop: Beállítások → Képességek (Capabilities) → Skillek → töltsd fel a letöltött zipet.
3. Claude Code: csomagold ki a zipet a projekted .claude/skills/ mappájába (vagy globálisan a ~/.claude/skills/ alá).
4. Ezután írd le a feladatot a saját szavaiddal — a skill automatikusan aktiválódik. Ha biztosra mennél, hivatkozz rá névvel.