Ez a rész a Claude Code-dal (és hasonló terminál-natív AI-eszközökkel) való weboldalépítésről szól – a telepítéstől az éles oldalig. Az anyag a HasznosAI „Prémium Weboldal Kézikönyv” alapján készült, fejezetekre bontva.
Kezdő – magyarán: képzeld el, hogy felfogadsz egy nagyon gyors, ügyes webfejlesztőt, aki a gépeden ül, és amit mondasz neki, azt rögtön meg is csinálja. A Claude Code pont ez.
Profi: a Claude Code egy agentikus, terminál-natív CLI, ami a munkamappádban olvas/ír fájlokat, shell-parancsokat futtat, kezeli a Gitet, és többlépéses feladatokat hajt végre autonóm módon, opcionálisan skillekkel és MCP-szerverekkel bővítve. A „drága oldal” lényege nem a modell, hanem a brief minősége és a polírozó iterációk száma.
Kérdés, tapasztalat, saját projekt ide.
A három tudásszint
Minden fejezetben találsz Kezdő, Haladó és Profi szintű magyarázatot. Válaszd, amelyik hozzád passzol – vagy olvasd el mindet.Útmutató-sorozat
- Mi ez az egész? – a négy összetevő, amitől egy AI-val épített oldal tényleg „drágának” néz ki (ebben a témában, lentebb).
- Telepítés – Claude Code Windows / macOS / Linux, natív és npm úton.
- A megfelelő modell és a költségek – Opus, token-használat, mikor mennyibe kerül.
- Design-skillek – Frontend Design + UI/UX Pro Max, hogy ne legyen „AI-szagú”.
- A jó prompt – a 3 tudásszint, a változók, mi működik és mit NE csinálj.
- 3-agent workflow és token-hatékonyság – hogyan dolgozz okosabban több AI-val.
- Hibaelhárítás – amikor az AI félremegy.
- Élesítés saját domainen + indulási ellenőrzőlista.
Mi ez az egész? (Az alapok)
Nincs varázslat, van egy jól összerakott folyamat, aminek négy lába van. Ha bármelyik hiányzik, generikus eredményt kapsz:- 1. A megfelelő eszköz – a Claude Code nem chatablak, hanem tényleg fájlokat hoz létre és szerkeszt a gépeden. Ezért tud egész weboldalt megépíteni.
- 2. A megfelelő modell – a legfejlettebb Claude-modell (Opus). Az „agy”, ami a munkát végzi.
- 3. A design-skillek – előre megírt tudáscsomagok, amelyek megtanítják az AI-t igényesen tervezni.
- 4. A jó brief – minél pontosabban mondod meg, mit szeretnél (+ referenciák), annál egyedibb az eredmény.
Kezdő – magyarán: képzeld el, hogy felfogadsz egy nagyon gyors, ügyes webfejlesztőt, aki a gépeden ül, és amit mondasz neki, azt rögtön meg is csinálja. A Claude Code pont ez.
Profi: a Claude Code egy agentikus, terminál-natív CLI, ami a munkamappádban olvas/ír fájlokat, shell-parancsokat futtat, kezeli a Gitet, és többlépéses feladatokat hajt végre autonóm módon, opcionálisan skillekkel és MCP-szerverekkel bővítve. A „drága oldal” lényege nem a modell, hanem a brief minősége és a polírozó iterációk száma.
Kérdés, tapasztalat, saját projekt ide.
Prompttár – kitölthető sablonok
A 33 kész, kitölthető AI prompt-sablon (a HasznosAI "Prémium Weboldal Kézikönyv" tartalma alapján, kitöltő mezőkkel és egy kattintásos másolással) itt érhető el: https://hasznosai.hu/prompttar/
Utoljára moderátor szerkesztette: