Nem sablonos weboldal Claude Code-dal és Refero DESIGN.md-vel

Gyakorlati anyagok a projektekkel és modellekkel való munkához: Ailoot-dokumentáció.

Miért hasonlítanak a Claude Code weboldalai Tailwind-sablonokra?#

A leírt januári példában egy kis mellékprojekt, egy hideghívó-tárcsázó készült. Egy üres tárolóban arra kérték a Claude Code-ot, hogy készítse el a kezdőlapot. Az eredmény sablonos lett: sötét slate-950 háttér, purple-500 kiemelőszín, vastag sans-serif címsor, alatta pedig három azonos árnyékú kártya. Ugyanaz az elrendezés, mint a ChatGPT első kiadásában, a Lovable első kiadásában és a v0 első kiadásában. Öt promptmódosítás után, amelyek a „modern”, „prémium” és „ne hasonlítson semmi másra” kifejezéseket adták hozzá, semmi sem változott. Az oldal továbbra is úgy nézett ki, mintha egy Tailwind UI Templates gyűjteményből származna.

Vagyis Claude nem „nem tudja”, hogyan kell valami szépet készíteni. Azt tudja, mit csinálnak a legtöbben, és a többséget reprodukálja. Ahhoz, hogy ne átlagos eredményt kapjunk, konkrét megkötésekre van szüksége: mely színeket, betűtípusokat és térközöket használja, illetve mely komponenseket tekintse irányadónak.

Itt lép be kontextusként a tervezési rendszer. Nem azt mondjuk, hogy „legyen szép”, hanem azt, hogy „ebben a konkrét stílusban készítsd el; itt vannak a paraméterei”.

A Refero Styles egy kész artefaktummal hidalja át ezt a szakadékot: egy DESIGN.md fájllal, amely valódi termékek paramétereit tartalmazza.

Mi az a Refero Styles?#

A styles.refero.design kezdőlapja tömören így fogalmaz: „fedezz fel több mint 2 000, vezető termékweboldalakról származó, AI-ügynökök által olvasható tervezési rendszert”. A katalógusban a vizuális mércét kijelölő márkák szerepelnek: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Nem kézzel nyerik ki őket: a Refero csapata olyan szkriptet futtat, amely elemzi egy weboldal tényleges CSS-ét és markupját, majd strukturált markdownba csomagolja az eredményt. Maga a styles.refero.design könyvtára ingyenes.

A kulcsszó a „strukturált”. A fájlban nincsenek képernyőképek, és olyan leírás sem, mint hogy „minimalista stílusban”. Markdownról van szó, amely konkrét hex színkódokat, pontos, pt-ben megadott betűméreteket, térközegységeket és komponensszabályokat tartalmaz. Az AI-ügynök ezt a fájlt olvassa, és konkrétumokkal dolgozik ahelyett, hogy szavakkal próbálná leírni az ízlést.

A Refero csapata az ai-agents oldalán a támogatott eszközök között ezeket sorolja fel: „Cursor, Claude Code, Codex, v0 és Lovable”. Más szóval a DESIGN.md univerzális artefaktumként működik: egyetlen fájlként, amely az összes fő AI-fejlesztő ügynökhöz használható.

Mi van egy DESIGN.md fájlban?#

A Refero csapata a design-md-template oldalán így írja le a fájl szerkezetét:

A fájl szerkezete tehát általában így néz ki:

A készítők egy olyan elvet is hangsúlyoznak, amely az AI-tervezési problémák 80%-át megoldja:

Vagyis a #5E6AD2 hex kód erősebb, mint az, hogy „olyan legyen, mint a Linear”. A pontos font-size: 13px / line-height: 18px érték erősebb, mint a „tömör szöveg”. A konkrétumok felülmúlják az értelmezést.

A repóban lévő DESIGN.md nem a csapatnak szánt kép. A projekt állandó kontextusának egyik építőeleme: olyan strukturált tudás, amelyet az AI minden kérésnél elolvas.

Weboldal készítése Linear-stílusban 4 lépésben#

Ez a négy lépés alkotja az új weboldal indításához leírt folyamatot. Nem általánosságban vett „négy lépésről” van szó, hanem egy konkrét sorrendről, amelyben minden lépéshez egy művelet tartozik.

1. Telepítsd a Claude Code-ot

   Natív, egyparancsos telepítő: curl -fsSL https://claude.ai/install.sh | bash (a hivatalos dokumentációban ajánlott módszer). macOS-en működik a brew install --cask claude-code, Windows alatt pedig a winget install Anthropic.ClaudeCode. Ha már telepítve van, ellenőrizd a verziót: claude --version (a 2.1.178+ verzió szükséges – ez a verzió vezette be a Tool(param:value) engedélyeket és a veszélyes gitparancsok blokkolását auto módban). Jelentkezz be a fiókodba: a claude elindítja a beállítási varázslót. A Claude Code része a Pro-előfizetésnek (évi számlázással havi $17, illetve hónapról hónapra fizetve havi $20).

2. Nyisd meg a Refero Styles-t, és válassz márkát

   Nyisd meg a https://styles.refero.design oldalt, majd a katalógust. A fő kiválasztási szempont az, hogy mennyire illik a termékedhez, nem pedig az, hogy „tetszik-e a látványa”. SaaS-irányítópultot készítesz? Nézd meg a Lineart, a Vercelt és a Notiont. Fintech terméket készítesz? Nézd meg a Stripe-ot, a Mercuryt és a Columnt. Tagsági terméket készítesz? Nézd meg a Duolingót. Nyisd meg egy márka kártyáját, és kattints a „Copy DESIGN.md” gombra.

3. Tedd a DESIGN.md fájlt a projektbe kontextusként

   Hozz létre egy docs/DESIGN.md fájlt a projekt gyökérkönyvtárában, majd illeszd be a másolt tartalmat. Ezután nyisd meg a CLAUDE.md fájlt, és adj hozzá egy sort: @docs/DESIGN.md. Ez egy importdirektíva: a Claude Code a munkamenet indításakor betölti a tartalmat a kontextusba. A CLAUDE.md-fájlok importálásáról bővebben lásd az egyetlen, Claude Code-hoz, Codexhez és Cursorhoz használható utasításfájlról szóló útmutatót.

4. Kérj egy konkrét oldalt

   Ne azt mondd, hogy „legyen szép”. Fogalmazz konkrétan: „A kontextusban lévő DESIGN.md használatával készíts kezdőlapot egy SaaS feladatkezelő termékhez. Felépítés: hero szakasz címsorral és alcímmel, két CTA-gomb (elsődleges és másodlagos), alatta egy blokk 3 funkcióval és ikonokkal, majd egy ügyfélvélemény-blokk. Pontosan a DESIGN.md színeit és tipográfiáját használd; ne találj ki sajátot.”

A negyedik lépés után Claude elkészíti az oldalt. A leírt tapasztalat szerint egy kezdőlap átlagosan 8–12 perc alatt készül el, és valóban közel áll a kiválasztott márka stílusához. Nem képpontos másolat, de felismerhető az esztétikája: ugyanazok a betűtípusok, ugyanaz a paletta, ugyanaz a térközritmus, és ugyanazok az apró döntések a gomboknál.

A Refero készítői ugyanezt a háromlépéses elvet valamivel rövidebben írják le az ai-agents/design-resources oldalukon:

Ez a négylépéses sorrend ugyanezt a logikát követi, kiegészítve a Claude Code telepítésének és a fájl CLAUDE.md-be történő importálásának kifejezett lépéseivel.

Milyen stílust válassz a termékedhez?#

A Refero készítői ezt a tanácsot már az útmutatójuk első lépésében megadják: a referenciát ne csak a márkanév alapján válaszd ki, hanem a sűrűség, a hangvétel és a célközönség alapján is.

Mit jelent ez a gyakorlatban? Az Apple-ből átvett színek, tipográfia, hierarchia és visszafogott mozgás illhet SaaS-irányítópulthoz, míg egy konkrét termékmarketing-oldal tágas térközei nem feltétlenül. A konkrét referenciát nézd meg márkanév szerinti döntés helyett. Könyvelési dashboardhoz kifejezetten adj kompakt sormagasságot, térközt és adatsűrűséget, olvasható számokkal és kezelőszervekkel; ne másolj változtatás nélkül tágas bemutatóelrendezést.

Egyszerű útmutató a terméktípus szerinti választáshoz:

Ha még mindig bizonytalan vagy, válaszd a Lineart. Ennek a legsokoldalúbb az alapja: semleges paletta, jól olvasható tipográfia (Inter / Söhne) és visszafogott térközök. Egy Linear alapján készített weboldal 10 terméktípusból 9 esetén professzionálisnak fog tűnni.

Miért legyen a DESIGN.md a projekt állandó kontextusának része?#

A leírt gyakorlatban az AI-ügynökökkel kezelt projektek mindegyikében a DESIGN.md a CLAUDE.md mellett van. A fájlt nem tekintik „egy feladatra szóló átmeneti” anyagnak. Állandó kánonként szolgál, amelyre minden jövőbeli munkamenet támaszkodik. Egy hónap múlva megkérheted Claude-ot, hogy adjon új oldalt a projekthez – Claude megnyitja ugyanazt a DESIGN.md fájlt, és ugyanabban a stílusban dolgozik. Hat hónap múlva átadhatod a projektet egy másik csapattagnak – ő is futtathatja Claude-ot, és következetes eredményt kap, mert a DESIGN.md a repóban van.

A tervezésben az elv így működik: egyszer meghozunk egy döntést a palettáról, a tipográfiáról és a térközritmusról. Ezután minden AI-ügynök adottnak veszi ezeket.

Vagyis a tervezés kódként él (a markdown is kód), nem Figma-fájlként, amelyet az AI nem tud elolvasni. Ha a terv a repóban lévő fájlban van, a Claude Code elolvassa, a Codex elolvassa, és bármely jövőbeli eszköz is elolvashatja. Ha a terv Figmában van, külön térben él, és minden munkamenethez kézzel kell átültetni.

A leírt mellékprojektekben ezt a struktúrát használták:

project/
├── CLAUDE.md            (imports @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (visual canon, copied from Refero)
│   ├── ARCHITECTURE.md  (project structure)
│   └── BRAND.md         (tone of voice, vocabulary)
└── ...

Ez a három fájl a projekt állandó kontextusának megszervezésére szolgáló egyik mód. A DESIGN.md a vizuális megjelenést, az ARCHITECTURE.md a struktúrát, a BRAND.md pedig a hangot kezeli. A repóhoz hozzáférő bármely AI-ügynök mindhármat megkapja kontextusként.

Mi az a Refero MCP és a refero_skill?#

A Refero Styles az alaprétet jelenti (a DESIGN.md mint fájl). A következő hullámot azok az integrációk adják, amelyek „natívvá” teszik a könyvtár elérését az AI-ügynökök számára.

Refero MCP (hivatalos). Ez egy API-szerver a https://api.refero.design/mcp címen, amelyhez a Claude Code bearer tokennel csatlakozik. Az ügynök így több mint 150 000 képernyőhöz és több mint 6 000, valódi termékekből származó felhasználói folyamathoz fér hozzá. Egy skill segítségével telepítheted:

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

A telepítés után Claude minden munkamenet elején kötelező első lépésként „tervezési kutatást” indít: megvizsgálja, mely vizuális választások illenek a feladathoz, és szükség esetén három, a kiválasztott referenciához kapcsolódó irányt javasol. 2026. június 23-án a refero_skill tárolója 67 committal és 135 csillaggal rendelkezik. Új, aktív fejlesztés alatt álló termék.

A leírt gyakorlat egyszerű módszert használ: nyisd meg kézzel a weboldalt, másold le a DESIGN.md fájlt, és helyezd egy fájlba. Az MCP akkor hasznos, ha a tervezési rendszerekkel való munka rutinná válik – például amikor egyszerre több ügyfélprojektet kezelsz, és naponta váltasz a vizuális kánonok között. A Claude Code-hoz csatlakoztatott MCP-szerverekről bővebben lásd a NotebookLM-ről és az MCP-ről szóló útmutatót.

Melyik 4 hiba rontja el a munkafolyamatot?#

Ez a négy hiba a leírt tervezésikontextus-használati tapasztalatokban merül fel. Mindegyik ártalmatlannak tűnik, de mindegyik visszatereli az eredményt a szokásos Tailwind-sablonhoz.

1. hiba. A „legyen modern” prompt. Ez a leggyakoribb hibatípus. Az emberek megnyitják a Claude Code-ot, és azt írják: „készíts nekem egy SaaS-weboldalt, modern stílusban, prémium megjelenéssel”. Sötét hátteret és lila kiemelőszínt kapnak. A tanítóadatokban a „modern” szó a 2022–2024-es, ugyanabból a sablonból készült landing page-ekhez kapcsolódik. A DESIGN.md pontos paraméterei nélkül a „modern” azt jelenti, hogy „átlagos”.

2. hiba. A DESIGN.md beillesztése üzenetként a chatbe. Néha az emberek bemásolják a DESIGN.md-t a Claude Code chatablakába, és azt mondják: „itt a stílus, használd”. Ez egyszer működik – a munkamenet végéig. Nyiss egy új munkamenetet (vagy válts másik feladatra, /clear), és a kontextus elvész. Ha azt szeretnéd, hogy a stílus megmaradjon, a fájlnak a repóban kell lennie, és importálni kell a CLAUDE.md fájlba. Arról, hogy miért a CLAUDE.md a tartós kontextus alapja, bővebben lásd a Claude memóriájáról szóló útmutatót.

3. hiba. A stílus kiválasztása azért, mert „tetszik”. Egy tágas Apple-marketingreferencia rossz elrendezés lehet változtatás nélkül olyan ingatlanos dashboardhoz, amelyen 30 hirdetésnek kell látszania. Ez nem zárja ki az Apple-ből vett tipográfiát, palettát vagy hierarchiát: a térközt és sorsűrűséget a feladathoz igazítsd, majd a célképernyőn nézd meg a ténylegesen látható információt. A konkrét referenciát sűrűség, hangvétel és közönség szerint válaszd, ne csak márkanév alapján.

4. hiba. A DESIGN.md említésének kihagyása magából a promptból. Lehet, hogy a DESIGN.md a repóban van, a CLAUDE.md importálja, és az ügynök is látja. De ha a prompt azt mondja, hogy „készíts egy weboldalt”, Claude a szabványos megoldást választhatja anélkül, hogy kifejezetten hivatkozna a fájlra. Minden tervezési prompthoz hasznos ez a sor: „Pontosan a docs/DESIGN.md színeit, betűtípusait és térközeit használd. Ne találj ki saját értékeket – vedd át őket a fájlból.” Így az ügynök a DESIGN.md-t használja, nem kerüli meg.

A pontos tokenek hex kódok, pt-ben megadott betűméretek és térközegységek a DESIGN.md fájlban. A természetes nyelv olyanokat jelent, mint „modern”, „prémium”, „letisztult” vagy „olyan, mint az Apple”. A pontos tokenek működnek; a szabadon megfogalmazott szavak nem.

Mit tegyél ezután?#

Most már ismered az alapvető munkafolyamatot: Claude Code + Refero DESIGN.md + 4 lépés = nem sablonos weboldal. Ez az igények 70%-át lefedi. A fennmaradó 30% azokból az esetekből áll, amikor nagyobb pontosságra, gyorsaságra vagy ellenőrzésre van szükség.

Három irány, amelyet az alapok elsajátítása után érdemes követni:

1. Frontend Design Skill. Ez egy hivatalos skill a Claude Code-hoz, amely vizuális visszajelzést ad. Az ügynök képernyőképet készít az összeállított oldalról a Puppeteer segítségével, „szemével” (egy látásmodellel) megnézi, összeveti a DESIGN.md fájllal, majd maga javasol korrekciókat. Ez egy automatizált „prompt → kód → képernyőkép → kritika → prompt” ciklus. Akkor hasznos, ha az oldal összetett, és egy iterációban nem sikerül jól elkészíteni.

2. Refero MCP éles módban. Ha 3–5 projektet kezelsz párhuzamosan, fárasztó minden alkalommal kézzel hozzáadni a DESIGN.md fájlt. A Refero MCP a projektleírás alapján megtalál 3 megfelelő stílust, majd választási lehetőséget kínál. Így egy új projekt indítása 30 perc helyett 3 percet vesz igénybe.

3. Kombináció a Context Engineeringgel. A DESIGN.md a kontextus egyik artefaktuma. Mellette általában megtalálható az ARCHITECTURE.md (a projekt szerkezete), a BRAND.md (márkahang) és a business/audience.md (célközönség). Ezek mind importálva vannak a CLAUDE.md fájlba. Amikor Claude oldalt készít, figyelembe veszi a vizuális megjelenést, a közönséget és a termék felépítését. Lényegében ez a context engineering: szisztematikus munka azzal, amit egy kérés előtt az ügynök rendelkezésére bocsátasz.

Gyakorlati anyagok: Ailoot-dokumentáció.

Gyakorlati anyagok: Ailoot-dokumentáció.

További anyagok és eszközök: Ailoot.