Claude Design: útmutató és öt gyakorlati forgatókönyv

A Ailoot használatával kapcsolatos gyakorlati információk a dokumentációban találhatók.

Mi az a Claude Design, és miért figyel mindenki április 17-re?#

2026. április 17., péntek. Az Anthropic bemutatja a Claude Design eszközt, amely egy szöveges leírásból működő landing page-et, befektetői prezentációt vagy mobilalkalmazás-prototípust készít. Nem „egy újabb képgenerátor”. Ez az Anthropic első kísérlete arra, hogy a termékfejlesztés korai szakaszaiban feleslegessé tegye a tervezőt.

Huszonnégy órával később az Adobe bejelentette a Firefly-Claude összekötőt, és platformpartnerként pozicionálta magát. A jelzés: az Anthropic nem termékháborút nyert, hanem paradigmaváltást indított el—mostantól a tervek generálhatók, a már jelen lévő szereplők pedig terjesztőkké válnak.

A Claude Designt egy vibe coder szemszögéből vizsgáljuk: mire képes, mennyibe kerül, hogyan használható tervezői háttér nélkül, és milyen gyakorlati feladatokhoz hasznos. Ha házon belüli tervező nélkül építesz terméket, ez az útmutató neked szól.

Mire képes a Claude Design: 6 kimenettípus#

Röviden: a Claude Design olyan terveket készít, amelyek korábban 3–5 napnyi tervezői munkát igényeltek. Az Anthropic szerint hatféle kimenet létezik:

A felület két panelből áll. Bal oldalon a Claude-dal folytatott csevegés, jobb oldalon az élő vászon előnézete látható. A folyamat öt lépésből áll: projektbeállítás, leírás, ellenőrzés, iterációk és exportálás. Ha a prompt nem egyértelmű, Claude további kérdéseket tesz fel, így a folyamat inkább egy emberrel való közös munkára, mint egy generátor használatára hasonlít.

A bemenetként elfogadott tartalmak:

1. Szöveges promptok (a leggyakoribb felhasználási mód).
2. Képernyőképek, képek és meglévő erőforrások.
3. Dokumentumok: DOCX, PPTX, XLSX.
4. Kódbázis—adott repozitóriumhivatkozással vagy egy helyi mappa importálásával.
5. Meglévő webhely felvétele URL alapján.

Exportálási formátumok:

1. PDF.
2. PPTX (PowerPoint).
3. Önálló HTML-fájl—azonnal feltöltheted oldalként.
4. Átadás a Canvának—ott teljesen szerkeszthető projektként nyílik meg.
5. Csomag a Claude Code számára—a fejlesztéshez szükséges teljes tervezési szándékkal.
6. Hivatkozás megosztása a szervezeten belül.

Amit a Claude Design nem csinál (érdemes már az elején tisztázni):

• Nem szerkeszt kódbázist és nem futtat parancsokat—ez a Claude Code feladata.
• Nem importál és nem exportál .fig fájlokat—nincs natív Figma-integráció.
• Nem váltja ki a Figmát vagy a Canvát.
• Nincs tevékenységnapló vagy adminisztrátori jelentés, ezért nem alkalmas megfelelőségi követelményekkel rendelkező nagyvállalatok számára.
• Nincs beépített videóexport—az animációkat csak képernyőfelvételként lehet rögzíteni.

Miben különbözik a Claude Design a Figmától, a Lovable-től, a v0-tól és a Canvától?#

Az itt bemutatott megközelítésben ezt az öt eszközt különböző feladatokra használjuk. Íme az összehasonlítás 2026 májusában:

Amiben a Claude Design mindenki másnál jobb:

1. Designrendszer kódbázisból. Egyik versenytársa sem nyer ki automatikusan komponenskészletet egy repozitóriumból. A v0 képes Figmából importálni, kódból viszont nem.
2. Zárt ciklus a Claude Code-dal. A tervezési szándék megmarad. A Lovable és a Bolt ezt egyetlen eszközben oldja meg, de náluk a tervezés a kódolás mellékterméke.
3. Többféle kimenet egyetlen kontextusból. Egy márkához landing page, prezentáció, e-mail-kampány és közösségimédia-kreatív is készülhet. A többiek csak ezek egyikére képesek.
4. Nem kell megtanulni a felület használatát. Nem kell úgy megtanulnod a felületet, mint a Figmánál. Ez fontos a célcsoportnak: „tervezői háttérrel nem rendelkező alapítók és termékmenedzserek”—ez az Anthropic hivatalos pozicionálása.

Amiben a Claude Design elmarad:

1. Nincs teljes körű adatbázis- és szerverintegráció. A Lovable és a Bolt működő alkalmazást ad adatbázissal, jogosultságkezeléssel és közzététellel. A Claude Design csak a frontendet biztosítja. Hasonló eredményhez: Claude Design → Claude Code → Vercel vagy más tárhely → fizetési rendszer kézzel. Három eszköz egy helyett.
2. Nincs .fig fájl. A tervezők nem vihetik át a kimenetet a Figmába—csak képernyőképpel vagy újrafejlesztéssel.
3. Nincs ingyenes csomag. Minden versenytársnak van ingyenes csomagja. A Claude Design Pro-csomagtól felfelé érhető el.
4. Kidolgozottság. A végleges, éles használatra kész tervek terén még mindig a Figma az első. A Claude Design az első vázlathoz való.
5. Sebesség egyszerű prototípusnál. Egyszerű prototípust a Bolt gyorsabban készít—másodpercek alatt elindítja a böngészőben.

A Claude Design más feladatra való: tervező nélkül elkészíteni az első vázlatot, majd átadni valaki másnak.

Mennyibe kerül a Claude Design, és hogyan ellenőrizheted a hozzáférést?#

Csomagok és hozzáférés:

A kezdő kreditet egyszer adják—20 tipikus promptból álló csomag, amely 2026. július 17-ig érvényes. Ez elegendő 2–3 teljes projekt elkészítéséhez és annak eldöntéséhez, hogy neked való-e a Claude Design.

A felület gombjai csak angolul érhetők el.

Designrendszer csatlakoztatása a kódbázisból#

A Claude Design fő versenyelőnye azoknak szól, akik már felépítettek valamit. Egyetlen más eszköz sem nyer ki automatikusan designrendszert egy repozitóriumból. Ez hasonlít a Second Brain megközelítésére: nem magyarázod el a márkádat Claude-nak—megadod a forrás hivatkozását, ő pedig önállóan feltérképezi.

5 beállítási lépés:

1. Nyisd meg a Claude Designt a claude.ai/design címen, és hozz létre új projektet.
2. A kezdeti beállítás során válaszd ki a designrendszer forrását. Választható: márkaútmutató, frontend-kódbázis, régi prezentációk és stílusútmutatók, élő webhely URL alapján, Figma-fájlok.
3. Ha repozitóriumot választasz—adj meg egy GitHub-hivatkozást. Claude letölti a frontendmappát, majd elemzi a témabeállításokat, stílusváltozókat, meglévő komponenseket és tipográfiát.
4. Ha élő webhelyet választasz—add meg az URL-t. Claude rögzíti az oldal szerkezetét, és kinyeri a színeket, betűtípusokat, valamint a gombok és kártyák mintáit.
5. Erősítsd meg a kinyert komponenskészletet. Claude megmutatja a kinyert palettát, betűtípusokat és alapkomponenseket; ezeket mentés előtt módosíthatod.

Ezt követően a Claude Designon belüli minden új projekt automatikusan örökli a designrendszeredet. Ez azt jelenti, hogy a ma generált landing page úgy fog kinézni, mint a jelenlegi webhelyed.

Prompt a designrendszer újbóli ellenőrzéséhez:

Mutasd meg az aktív designrendszeremet ebben a projektben: színpaletta, tipográfia,
alapkomponensek, térközminták és sarokkerekítések. Hasonlítsd össze az élő
webhelyemmel [URL], és jelezd az eltéréseket.

Az itt bemutatott folyamatban ezt az ellenőrzést egy projekten belül 3–4 iterációnként megismétlik. Az Anthropic a bejelentésében őszintén figyelmeztet: több iteráció után Claude elfelejtheti a designrendszert, és visszatérhet az alapértelmezett mintákhoz. A megoldás, hogy időnként prompttal visszatereljük a saját komponenskészletünkhöz. Lényegében ez ugyanaz a kontextusmérnökség, mint a Claude Code-ban: a kontextust tudatosan, nem láthatatlanul kezeljük.

1. forgatókönyv: landing page termékbevezetéshez#

Az itt ismertetett tapasztalat szerint egy új kísérlet első eredménye a Claude Designban egy landing page. Korábban: egy nap a tervező tájékoztatására, majd egy hét iteráció. Most: egy prompt, egyórányi szerkesztés, és kész a HTML.

Promptminta:

Készíts landing page-et a következőhöz: [TERMÉKNÉV, egymondatos leírás].
Vizuális irány: [1. referenciamárka] találkozik [2. referenciamárkával],
[jelző] és [jelző] hangulattal. Szerkezet: hero egyetlen
értékajánlattal, három előnyöket bemutató szakasz, korai hozzáférést kérő űrlap,
5 kérdéses FAQ, lábléc. Használd a designrendszeremet.

Ezt kapod: Önálló HTML-fájlt beágyazott stílusokkal. Feltöltheted webhelyed egy oldalaként vagy külön projektként bármelyik tárhelyre.

Amit az emberek általában ellenőriznek és javítanak Claude után:

• A hero konkrét szövege—Claude jól alakítja ki a szerkezetet, de nem érti jól a termék jelentését.
• Képek—Claude helykitöltőket tesz be. Ezeket a saját képeimre cserélem, vagy külön eszközzel generálok képeket.
• Mutatók és számok—mindig valós adatokat használok. Soha ne találj ki olyasmit, hogy „ügyfeleink 80%-a”.

Megtakarított idő: 6–8 óra tervezői munka, valamint egy nap frontendfejlesztés egy tipikus bevezető landing page esetén. A Claude Design 40–60 perc alatt elkészíti az első vázlatot, amit egyórányi iterálás követ.

2. forgatókönyv: prezentáció befektetőknek vagy partnereknek#

A prezentáció a második fő forgatókönyv: anyag befektetőknek, akcelerátor-jelentkezéshez vagy partnerrel folytatott egyeztetéshez.

Promptminta:

Készíts 10 diás Series A-befektetői prezentációt a következő cégnek: [Cég],
amely [mit] épít [kiknek], és [fő mutatóval] rendelkezik. Célközönség:
korai fázisú B2B SaaS-befektetők. Hangnem: magabiztos, közvetlen, felhajtás nélkül. A diák
sorrendje: cím, probléma, megoldás, lendület (a mutatót emeld ki jól láthatóan),
termékbemutató, piacméret, üzleti modell, versenytársak, csapat, kérés.

Ezt kapod: PPTX-fájlt és átadást a Canvának. A Canvában a fájl teljesen szerkeszthető, együttműködésre alkalmas projektként nyílik meg.

Idő: 6–10 órát takarít meg a kézi elkészítéshez képest. Leginkább a tipográfiára épülő diákon spórol időt—nagy címsorok, kevés vizuális zsúfoltság, minden a designrendszeredet használja.

Buktató: A Claude Design statikus diákat készít. Ha animációkra van szükséged, vidd át őket a Canvába, és animáld ott, vagy használd a Figmát.

3. forgatókönyv: kattintható mobilalkalmazás-prototípus#

Gyakorlati forgatókönyv: tesztelj egy mobilalkalmazás-hipotézist, mielőtt fejlesztőre költenél.

Promptminta:

Készíts interaktív onboardingprototípust a [termék] mobilalkalmazáshoz,
három forgatókönyvvel: üres állapot, a felhasználó első művelete és a felismerés
pillanata. Tedd kattinthatóvá az elemeket, hogy moderátor nélküli felhasználói tesztet
lehessen végezni a Maze vagy a Useberry segítségével.

Ezt kapod: Hivatkozást a prototípusra. Egyből elküldheted a Maze-nek, és 5–10 felhasználóval tesztelheted.

Ellenőrizd a következőket:

• Képernyőméretek—ellenőrizd, hogy Claude a megfelelő képarányt használta-e iOS/Android esetén.
• A forgatókönyv mélysége—Claude néha egyetlen képernyőbe sűríti az összetett elágazásokat. Ezt javítja a következő prompt: „jelenítsd meg az összes elágazást külön képernyőként”.
• Állapotok—üres, hiba, betöltés. Claude nem hozza létre ezeket, hacsak nem kéred.

Megtakarított idő: 1–2 sprint a kézi, Figma + ProtoPie használatával történő elkészítéshez képest.

4. forgatókönyv: marketingkampány 5 egyoldalas webhellyel#

Forgatókönyv a fizetett forgalmat kezelőknek: hasonlíts össze öt értékajánlatot ugyanazzal az űrlappal és egységes mérési módszerrel.

Promptminta:

Készíts 5 márkázott egyoldalas webhelyet különböző értékajánlatok tesztelésére:
[1. lehetőség, 2. lehetőség, 3. lehetőség, 4. lehetőség, 5. lehetőség].
Mindegyikhez legyen hero egyedi címsorral, vizuális képpel és cselekvésre ösztönző
gombbal, amely ide vezet: [UGYANANNAK A VALÓDI ŰRLAPNAK AZ URL-JE]. Mindegyiket önálló HTML-ként exportáld.
A tervek ellenőrzéséhez PDF-előnézeteket és egy Canva-mappát is exportálj.
Mind az öt oldalon egyezzen a CTA célja és a mérési események jelentése.

Ezt kapod: öt HTML-oldaltervet, öt PDF-előnézetet és egy Canva-projektmappát. Az előnézetek segítenek jóváhagyni a terveket; működő céloldalt és konverziómérést nem igazolnak.

Mielőtt forgalmat küldesz rájuk:

1. Tedd közzé a HTML-oldalakat külön URL-en a kiválasztott tárhelyen, vagy add át őket a Claude Code-nak a webhelybe való beépítéshez.
2. Cseréld ki a helykitöltőket, és ellenőrizz minden CTA-t. Küldj ártalmatlan próbabejegyzést a közös űrlapon, és ellenőrizd, hogy a megfelelő helyre érkezik.
3. Minden oldal kapjon külön kampány- vagy változatcímkét. Külön rögzítsd az oldallátogatásokat, a CTA-kattintásokat és a sikeres űrlapbeküldéseket, hogy ugyanazt a látogatói műveletet hasonlítsd össze.
4. Nyisd meg a közzétett URL-eket asztali gépen és mobilon, ellenőrizd a tesztesemények rögzítését, és csak ezután indítsd el a tervezett forgalmi kísérletet.

Felhasználás: fizetett forgalom, e-mail-kampányok és közösségimédia-tesztek. Az átkattintási arányhoz a CTA-kattintásokat oszd az oldallátogatások számával; a konverzióhoz a sikeres beküldéseket hasonlítsd a látogatásokhoz. A PDF vagy Canva átnézése tervellenőrzés, nem ez az élő teszt.

Buktató: A Claude Design automatikusan választ képeket az eszközei közül. Ha konkrét fotókra van szükséged, töltsd fel őket előre.

5. forgatókönyv: e-mail-kampány Resendhez, Mailchimphez vagy Sendsayhez#

Minden tömeges e-mail-kampányhoz szükség van beágyazott stílusokat tartalmazó HTML-sablonra. Ez technikai fejfájást okoz azoknak a marketingeseknek, akiknek nincs frontendfejlesztőjük.

Promptminta:

Készíts HTML-e-mail-sablont ehhez a kampánytémához: [kampány témája]. Dizájn: sötét téma,
a márkád elsődleges hangsúlyszíne, márkabetűtípusok. Szerkezet: alcím,
cím, 3 bekezdés, cselekvésre ösztönző gomb, aláírás. Önálló HTML-fájlként exportáld,
beágyazott stílusokkal és külső függőségek nélkül.

Ezt kapod: HTML-fájlt, amely készen áll a Resendbe, Mailchimpbe, Sendsaybe vagy Unisenderbe való beillesztésre.

Amit az emberek általában ellenőriznek és javítanak:

• Szélesség—az e-mail-kliensek az állandó, 600px-es szélességet részesítik előnyben.
• Képek—a hivatkozásokat a saját, online tárolt eszközeim hivatkozásaira cserélem.
• Egyszerű szöveges változat—a Claude Design nem készít ilyet; magam írom meg.

Megtakarított idő: 2–3 óra tördelési munka sablononként.

Átadás a Claude Code-nak: a zárt ciklus#

Az itt bemutatott megközelítésben ez a funkció akkor is indokolja a Claude Design választását, ha van Figmád. Minden más tervezőeszköz képet vagy Figma-fájlt ad át. A fejlesztő ezután megnézi, és „a saját értelmezése szerint” fordítja le. Ilyenkor a tervezési szándék 30–40%-a elvész.

A Claude Design nemcsak vizuális elemeket tartalmazó csomagot ad, hanem a következőket is:

• A komponensek szerkezete (hogyan függnek össze logikailag).
• A tervezési döntések mögötti logika (miért ilyenek a térközök, miért ilyenek a sarokkerekítések, miért ilyen a hierarchia).
• Reszponzív horgonyok—hol „tapad” a blokk a képernyőhöz különböző méreteknél.
• Elnevezett stílusértékek bűvös számok helyett.

A Claude Code közvetlenül megnyitja ezt a csomagot, és olyan kódot ír, amely megőrzi a tervezési szándékot. Nem pusztán elrendezésben alkotja újra a képet, hanem megvalósítja a tervezési logikát. Ez együttműködik a projekted CLAUDE.md fájljával: minél pontosabbak a CLAUDE.md szabályai, Claude Code annál kevésbé „tér el” az eredeti szándéktól.

Munkafolyamat:

1. A Claude Designban—fejezd be a tervet → kattints az „Export to Claude Code” lehetőségre.
2. A Claude Code-ban—nyisd meg a projektet → illeszd be a csomagazonosítót → prompt: „Valósítsd meg ezt a tervet a src/components/ mappában.”
3. A Claude Code—beolvassa a csomagot, megérti a mintákat, és az aktuális stackkel (Next.js + Tailwind, Vue, Svelte—bármit használsz) írja meg a komponenseket.
4. Ezután—módosíts a kódban a Claude Code-dal, vagy a Claude Designban (új tervezési iterációként), majd add át újra.

Ami fontos: ez nem „az AI frontendet ír”. Hanem „a terv és a kód egy dokumentummá válik”. Ha a Claude Designban megváltoztatom a szakaszok közötti térközt, a Claude Code a következő iterációban megérti, hogy ez egy új minta, nem pedig egyszeri javítás.

Amiben a versenytársak ezt nem tudják:

• Lovable / Bolt—a tervezés a kódolás mellékterméke. Ha meg akarod változtatni a designrendszert, újra kell írnod az egész promptot.
• v0—React-komponenseket ad, de a tervezési szándékot tartalmazó csomagot nem. Ezután kóddal dolgozol, nem a tervvel.
• Figma + Cursor—vannak bővítmények, de a döntések mögötti logikát nem adják át, csak a vizuális elemeket.

Ez az egyedi integráció illeszti a Claude Designt az Anthropic „ügynök plusz vászon” stratégiájába.

Ami nem működik: architekturális gyengeségek#

Az Anthropic nem kertel: ez előzetes verzió. Egyes funkciók még mindig hibásak.

Architekturális gyengeségek:

• Nincs tevékenységnapló—ez problémát jelent a megfelelőségi követelményekkel rendelkező nagyvállalatok számára.
• Nincsenek adatmegőrzési követelmények—nem használhatod szabályozás alá eső adatokkal.
• A kísérleti dizájn (hang, videó, 3D) kísérletiként van megjelölve, és hibásan működhet.
• Nincs beépített videóexport—az animációkat csak képernyőfelvételként lehet rögzíteni.

Claude viselkedési furcsaságai (minden eszközre jellemzők, nem csak a Designra):

• Néhány iteráció után elfelejti a követelményeket, és visszatér az alapértelmezett mintákhoz.
• Jól teljesít az egyértelműen strukturált feladatokban (minták ismétlése), nyílt végű feladatokban (új irány kitalálása) gyengébb.
• Előfordulhat, hogy „ragaszkodik” a szokásaihoz a megadott célok követése helyett.

A megoldás egy emlékeztető prompt, amely 3–4 iterációnként visszatereli a designrendszerhez. Ez nem akadály, csak szokást igényel.

Mikor válaszd inkább a Figmát, a Lovable-t vagy a Canvát?#

Az itt bemutatott megközelítésben ezt az öt eszközt különböző feladatokra használjuk. Íme, mikor melyiket érdemes választani:

A Claude Designt használd, ha:

• Alapító, termékmenedzser vagy marketinges vagy, tervezői háttér nélkül.
• Egy prezentáció, landing page vagy makett első vázlatára van szükséged egy óra, nem pedig egy nap alatt.
• Már van kódbázisod vagy márkaútmutatód, amelyet Claude használhat.
• A finomításra át szeretnéd adni egy tervezőnek vagy fejlesztőnek.
• A Claude Code-dal írsz kódot, és zárt „tervezés → fejlesztés” ciklust szeretnél.

A Figmát használd, ha:

• Tervező vagy, aki végső finomítást végez.
• Csapatban kell dolgoznod, a fejlesztőnek történő átadásra összpontosítva.
• Bővítményekre, fejlesztői módra vagy komoly verziókezelésre van szükséged.
• Végleges, éles használatra kész tervre van szükséged.

A Lovable-t vagy a Bolt-ot használd, ha:

• Egyetlen promptból működő termékre van szükséged adatbázissal, jogosultságkezeléssel és közzététellel.
• Hajlandó vagy a tervezés kidolgozottságát sebességre cserélni.
• Fontos az ingyenes csomag.

A Canvát használd, ha:

• Kész sablonokból szeretnél marketinganyagokat létrehozni.
• A tervezési feladat a könyvtár elemeinek összeállítása, nem pedig kreatív generálás.
• Egyetlen termékben van szükséged nyomtatási, közösségimédia- és videós lehetőségekre.

A v0-t használd, ha:

• Frontendet építesz, és másolható, beilleszthető kész komponensekre van szükséged.
• Már a Next.js / Vercel ökoszisztémában dolgozol.
• Közvetlenül a Figmából szeretnél importálni.

Az itt bemutatott tipikus folyamat: a Claude Design elkészíti a landing page első vázlatát → Claude Code áthelyezi a src/app/ mappába → módosítások a kódban → ha tipográfiai finomítás kell, a Figmához fordulok → ha közösségi médiához kell animáció, a Canvát használom.

A Claude Design nem állítja, hogy mindenre képes. Célja, hogy az első lépés legyen, amely után már érted, mi a következő teendő.

A Ailoot megnyitása.