Google Stitch + Claude Code: webhelytervezés „AI-s megjelenés” nélkül

Az Ailoot használatára vonatkozó további útmutatást a dokumentációban találsz.

Miért néznek ki a Claude Code-dal készített webhelyek „AI-szemétnek”?#

A bemutatott gyakorlati esetben egy hívóalkalmazás kezdőlapjának elkészítése üres projekttel és a Claude Code-nak adott landing page-kéréssel indult. Az eredmény a klasszikus változat volt: slate-950 háttér, indigo-500 kiemelőszín, félkövér Inter a címsorban, alatta pedig három egyforma, árnyékos kártya. Ugyanaz az elrendezés, mint az első v0, az első Lovable és az első ChatGPT-generálás esetében. Ötször írtam át a promptot, és hozzáadtam, hogy „prémium”, „ne olyan legyen, mint a többieké”, „modern” – az oldal még mindig úgy nézett ki, mint egy 2015-ös WordPress-téma.

A logika egyszerű: megkötések nélkül a modell a látottak statisztikai átlagát veszi. Márpedig milliónyi, Bootstrap és Tailwind segítségével készített, egyforma landing page-et látott. Ahhoz, hogy az eredmény ne legyen átlagos, konkrétumokat kell adnod az ügynöknek: milyen színeket, betűtípusokat és térközöket használjon, illetve mely komponenseket tekintse mérvadónak. A modell számára a „gyönyörű” szó azt jelenti, hogy „a 2020-as medián”. A melléknevek nem mozdítják el az eredményt; pontos paraméterekre van szükség.

Ugyanezt a különbséget egy, a Refero előre elkészített dizájnrendszereiről szóló útmutatóban is megvizsgáltam – ott más stílusát veszed át (Apple, Linear, Stripe), és azt adod át az ügynöknek. A Google Stitch a másik irányból közelíti meg a feladatot: más stílusának átvétele helyett a sajátodat hozhatod létre a leírásod alapján.

Mi a Google Stitch, és hogyan segít?#

A Stitch a Google Labs kísérleti eszköze, amelyet a Google I/O rendezvényen mutattak be 2025 májusában. A promptmezőben leírod, hogyan nézzen ki az alkalmazás (vagy feltöltesz egy képernyőképet, táblavázlatot vagy egy versenytárs oldalát), a Stitch pedig végtelen vásznon készíti el a felületek képernyőit. A háttérben Gemini 2.5 Pro és Flash működik, 2025 decemberében pedig a Gemini 3-mal bővült, hogy kifinomultabb elrendezéseket készíthessen.

Ami számunkra hasznos:

• Vibe Design – írd le szavakkal a hangulatot („minimalista és prémium, mint a Stripe”), és több vizuális irány közül választhatsz.
• Referenciák – tölts fel képet a Dribbble-ről vagy a Pinterestről; a Stitch megtartja az elrendezését, és alkalmazza a kéréseidet.
• Exportálás három formátumban: Figma-fájlba (szerkeszthető rétegekkel), tiszta HTML/CSS-ként, illetve MCP-n keresztül – egyenesen az ügynöknek.

Fontos különbség, hogy ez miben tér el az olyan kész stílusoktól, mint a Refero. A Refero valódi webhelyekről már kinyert dizájnrendszerek gyűjteménye; meglévő márkát veszel át. A Stitch a nulláról készít rendszert a termékedhez. Nincs referencia-dizájnod, és saját megjelenést szeretnél? Stitch. Gyorsan alkalmaznád egy ismert termék stílusát? Refero. Más-más lépésben segítenek, és jól kiegészítik egymást.

A Claude-nak saját beépített dizájnmódja is van; erről a Claude Designról szóló útmutatóban írtam. A Stitch abban különbözik, hogy kész rendszert ad egy külső fájlban, amelyet az ügynök minden újabb építés során elolvas.

A Google Stitch elérhetőségi követelményei#

A Stitch nem érhető el minden országban: a Google egyik képviselője a hivatalos fórumon azt írta, hogy a szolgáltatás 212 országban érhető el a 18. életévüket betöltött felhasználók számára, a lista pedig bővül. Korlátozott hozzáférésű régiókban a webhely felkeresésekor pontosan egy üzenet jelenik meg: „Sajnáljuk, a Stitch nem érhető el.”

Google-fiókra van szükséged – csak azzal tudsz bejelentkezni.

Amikor a Stitch MCP-hitelesítése blokkolja a Claude Code-munkafolyamatot#

Rengeteg téves információ van az interneten az MCP csatlakoztatásáról, és az útmutatók fele egyszerűen nem működik. Sok útmutató például – köztük népszerű angol nyelvűek is – a @google/stitch-mcp csomag telepítését javasolja az npx -y @google/stitch-mcp@latest paranccsal. Ez a csomag nem létezik – az npm 404 hibát ad. Ne másold ki ezt a parancsot, mert csak az idődet vesztegeted vele. Ugyanezért olyan integrációkat válassz, amelyek telepítését és valódi feladaton történő ellenőrzését már megerősítették.

Az itt leírt távoli MCP-próbálkozás Incompatible auth server hibáig jutott a Claude Code-ban. Ez a megfigyelt hiba nem működő beállítási recept vagy bizonyíték minden aktuális konfiguráció hibájára. Ne folytasd meghatározatlan „csatlakoztasd az MCP-t” lépéssel: az alábbi kézi HTML/CSS-exportot használd, amíg pontos kompatibilis konfigurációt nem igazoltak.

Először hozz létre egy kulcsot. A Stitchben: kattints az avatarodra → Stitch-beállítások → API-kulcs szakasz → Kulcs létrehozása → másold ki.

Ezután egyetlen paranccsal add hozzá a proxyt a Claude Code-hoz:

bash

Helyezd a kulcsot egy környezeti változóba (ez a legegyszerűbb módszer – nem kell a Google konzoljával és a lejáró tokenekkel bajlódnod):

export STITCH_API_KEY="your-key-from-stitch-settings"

Ha inkább manuálisan állítanád be, így néz ki (a projekt gyökérkönyvtárában található ~/.claude.json vagy .mcp.json fájlban):

json

Indítsd újra a Claude Code-ot, és ellenőrizd, hogy működik-e a kapcsolat:

claude mcp list

A Stitch és a DESIGN.md munkafolyamata a kontextusmérnökség legtisztább formája: előre beilleszted a pontos tokeneket a Claude kontextusába, ő pedig ezek alapján épít, anélkül, hogy találgatnia kellene, „mire gondoltál”. A teljes módszertan mindhárom pillért egyesíti: az AI-klónt, a Second Braint és a kontextusmérnökséget. Ez a kombináció alakítja át a Claude-ot „találgató asszisztensből” kiszámítható eredményt adó eszközzé.

Mi az a DESIGN.md, és miért jobb egy képernyőképnél?#

Íme egy fontos részlet, amit a legtöbb útmutató rosszul ír: a Stitchben nincs „DESIGN.md exportálása” gomb. Az ügynök maga állítja össze a fájlt. A Google hivatalos codelabje szerint a prompt nagyjából így hangzik: „a Stitch MCP-n keresztül keresd fel a projektet, nyerd ki a színpalettát és a tipográfiát, majd állíts össze belőlük egy DESIGN.md fájlt”. Az a codelab működő MCP-kapcsolatot feltételez. Az itteni kézi úton a Claude Code helyette az exportált HTML/CSS-t olvassa, és a projektgyökérbe írja a strukturált fájlt; a hiányzó tokeneket jeleznie kell képből kitalálás helyett.

A DESIGN.md konkrétumokat tartalmaz jelzők helyett:

# DESIGN.md
## Colors
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typography
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spacing (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Components
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)

Ahhoz, hogy a Claude Code használja a fájlt, hivatkozz rá a CLAUDE.md-ből (például ezzel a sorral: „Minden komponens dizájnját a DESIGN.md alapján készítsd el”) – így az ügynök minden munkamenetben ugyanazokat a tokeneket használja. A hétfőn elkészített gomb és a pénteken elkészített kártya ugyanolyan stílusú lesz, mert egyetlen közös forrásból indulnak ki.

Ebben a beállításban két helyi referencia működik együtt. A DESIGN.md a rendszerszabályokat tartja: színek, tipográfia, térközök és komponensek. Az exportált Stitch HTML/CSS és eszközfájlok adják a konkrét képernyőelrendezést. Az MCP opcionális, nem előfeltétele ennek az útnak.

Hogyan építsünk webhelyet: a teljes út a szövegtől a dizájnig?#

Íme a teljes folyamat, sorban:

1. Nyisd meg a Stitch-et. Ellenőrizd az országodban az elérhetőséget, és a Google-fiókoddal lépj be a stitch.withgoogle.com oldalra.
2. Írd le a terméket. Add meg a képernyőket és felhasználói utat; a javasolt képernyőlistát hagyd jóvá vagy szerkeszd.
3. Adj hozzá referenciát. Töltsd fel a kívánt képernyőképet, és nevezd meg a megtartandó színeket, tipográfiát és elrendezést.
4. Generálj és finomíts. Egy képernyőt válassz, és a dizájn bővítése előtt azt finomítsd.
5. A kiválasztott képernyőt exportáld HTML/CSS-ként. Az exportált fájlokat és szükséges eszközfájlokat a projekt referenciamappájába mentsd. Helyben nyisd meg a HTML-t, és igazold a választott képernyőt; a képernyőkép önmagában nem hordoz pontos CSS-értékeket.
6. Helyi exportból állítsd össze a DESIGN.md-t. A Claude Code-dal olvastasd el a HTML/CSS-t, rögzíttesd a tényleges szín-, betű-, térköz-, elrendezési és komponensértékeket, a hiányzókat pedig döntésre listáztasd. Ehhez nem kell Stitch API-kulcs vagy MCP-hitelesítés.
7. Építs fel és ellenőrizz egy oldalt. E promptokat add a Claude Code-nak a mappanév helyére a tényleges helyi exportútvonalat írva:

Olvasd el a refs/stitch-export/ mappában lévő Stitch HTML/CSS-exportot. A fájlokban szereplő értékekből hozz létre DESIGN.md-t a projekt gyökerében. A hiányzó értékeket azonosítsd, ne találd ki.

Építs egy oldalt a DESIGN.md és a helyi Stitch-export alapján. A komponensek legyenek modulárisak. Asztali és mobil szélességen vesd össze a renderelt oldalt az exporttal, majd a navigációt és interaktív állapotokat külön igazold.

Innentől mindent a Claude Code végez: a képernyők közötti útválasztást, a DESIGN.md töréspontjainál érvényesülő reszponzivitást, az animációkat és az interaktivitást. A Stitch statikus képernyőket és kattintható prototípust ad, de nem épít működő logikát, és nem teszi közzé a webhelyet tárhelyen – ez az ügynök feladata.

Hogyan szabaduljunk meg az „AI-s megjelenéstől”: mit kell pontosan megváltoztatni?#

Íme azok a konkrét pontok, amelyeken egy webhely már nem árulja el magát:

• Szín. A lila indigo-500 az első árulkodó jel. A fő- és kiemelőszínt pontos hexadecimális értékként állítsd be közvetlenül a DESIGN.md-ben. Minden ügynök máshogy fogja értelmezni a „márkakék” kifejezést.
• Betűtípus. Az Inter a legbiztonságosabb választás, ezért a legkönnyebben felismerhető „AI-betűtípus”. Válassz kifejező párosítást: például talpatlan betűtípust a törzsszöveghez, és karakteresebbet a címsorokhoz. Állítsd be a Stitch dizájnjában, és rögzítsd a DESIGN.md-ben.
• Referencia jelző helyett. A modell a „legyen modern” utasítást úgy értelmezi, hogy „a 2020-as medián”. A „használd ennek az oldalnak az elrendezését” kérést valódi képernyőképpel együtt szó szerint veszi. Tölts fel referencia-képet a Stitchbe; az ízlésedet nem tudod szavakkal átadni.
• Térközök és szellősség. A sablonos elrendezés szűkös, egyforma blokkjairól ismerhető fel. Állíts be tágas térközskálát a DESIGN.md-ben – az ügynök így szabadabban rendezi el az elemeket.

A konkrétumok többet érnek a szubjektív jelzőknél. A Stitch lényegében olyan eszköz, amely a „ilyet szeretnék” kérést pontos tokenekre fordítja, így az ügynöknek nem marad mit kitalálnia.

Google Stitch vagy alternatívák: melyiket válaszd?#

Azokat a szempontokat vetettem össze, amelyek valóban számítanak, ha szűkös költségkeretből végzel vibe codingot:

A saját munkafolyamatom: Stitch a dizájn felderítéséhez → Claude Code az építéshez és a logikához. Költségkeretből dolgozó vibe coder számára a Stitch a legjobb, mert ingyenes, és a termékhez egyedi megjelenést készít a nulláról. Ha szeretnéd megismerni a piacon elérhető eszközök teljes választékát, a mivel érdemes kódolni 2026-ban című kiemelt cikkben írtam róluk.

Miben akad el a Google Stitch: mik a korlátai?#

Íme a korlátok őszinte listája, hogy ne a harmadik képernyőnél érjen csalódás:

• Csak felület. Nincs backend, adatbázis vagy tárhelyre történő közzététel. Ehhez a Claude Code-ra van szükséged (vagy a Lovable-re, ha mindent egy helyen szeretnél).
• Korlátozott szerkesztés az eszközön belül. Egyetlen elemet sem tudsz egérrel elmozgatni – csak prompttal módosíthatod, és újra generáltathatod. Ez nem Figma.
• Nem determinisztikus működés. Ugyanaz a prompt eltérő eredményeket ad. Ötletek kipróbálásához jó, de kényelmetlen, ha megismételhető kimenetre van szükséged.
• Kvóta. Eléred az ingyenes generálási limitet (jelenleg napi); nem vásárolhatsz továbbiakat, ezért meg kell várnod a kvóta visszaállítását. A pontos szám változik, ezért ellenőrizd a felületen.
• Kísérleti státusz. A Google Labs nem vállal garanciát a hosszú távú támogatásra. A szolgáltatás megváltozhat vagy megszűnhet.
• Földrajzi korlátozás és az MCP engedélyezési problémája a Claude Code-ban, amelyeket az elérhetőségről és a beállításról szóló részek említenek.

A Stitch nem jó választás, ha több projektre kiterjedő, szigorú arculati útmutatód van, ha a dizájn már elkészült Figmában, vagy ha már közzétett, backenddel rendelkező alkalmazásra van szükséged.

Mi következik?#

Építsd fel a lehető legkisebb munkafolyamatot egyetlen képernyővel: írd le a terméket a Stitchben, generáld le a kezdőlapot, exportáld a HTML/CSS-ét, majd e helyi fájlokból állíttasd össze a Claude Code-dal a DESIGN.md-t és az oldalt. Ha látod, hogy a lila színátmenet magától eltűnik, a többi már könnyebb lesz.

A Stitch-csel végzett tervezés a kontextusmérnökség egyik módszere. A teljes rendszer az AI-klónt, a Second Braint és a kontextusmérnökséget ötvözi, hogy a Claude előkészített szabályokra és kontextusra támaszkodhasson.

Az AI-klón, a Second Brain és a kontextusmérnökség fontos a termék szempontjából. A Stitch-csel történő tervezés ennek a kombinációnak az első építőeleme.

Ha tovább dolgoznál modellekkel, látogass el az Ailoothoz.