Web bez šablóny s Claude Code a Refero DESIGN.md

Praktické materiály o práci s projektmi a modelmi: dokumentácia Ailoot.

Prečo weby vytvorené pomocou Claude Code vyzerajú ako šablóny Tailwind?#

V opísanom januárovom príklade vznikal malý vedľajší projekt — nástroj na telefonické oslovovanie potenciálnych zákazníkov. V prázdnom repozitári dostalo Claude Code úlohu vytvoriť domovskú stránku. Výsledok bol generický: tmavé pozadie slate-950, akcentová farba purple-500, tučný nadpis bezpätkovým písmom a pod ním tri karty s rovnakými tieňmi. Rovnaké rozloženie ako v prvej verzii ChatGPT, prvej verzii Lovable a prvej verzii v0. Po piatich úpravách zadania, v ktorých pribudli slová „moderný“, „prémiový“ a „nie ako všetci ostatní“, sa nič nezmenilo. Stránka stále vyzerala, akoby pochádzala zo zbierky Tailwind UI Templates.

To znamená, že Claude „nevie“ vytvoriť niečo pekné len zdanlivo. Vie, čo robí väčšina ľudí, a reprodukuje tento väčšinový prístup. Ak má agent vytvoriť výsledok, ktorý nie je priemerom, potrebuje konkrétne obmedzenia: ktoré farby použiť, aké písma, aké rozostupy a ktoré komponenty považovať za záväzné.

Práve tu vstupuje do hry dizajnový systém ako kontext. Nie „urob to pekne“, ale „urob to v tomto konkrétnom štýle; tu sú jeho parametre“.

Refero Styles túto medzeru vypĺňa hotovým artefaktom — súborom DESIGN.md s parametrami zo skutočných produktov.

Čo je Refero Styles?#

Domovská stránka styles.refero.design to uvádza jasne: „objavte viac ako 2 000 dizajnových systémov popredných produktových webov, čitateľných pre AI agentov“. Katalóg obsahuje značky, ktoré určujú vizuálne štandardy: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Nezískavajú sa ručne — tím Refero spúšťa skript, ktorý analyzuje skutočné CSS a značky webu a balí výsledok do štruktúrovaného markdownu. Samotná knižnica styles.refero.design je bezplatná.

Kľúčové slovo je „štruktúrované“. Súbor neobsahuje snímky obrazovky ani opis typu „v minimalistickom štýle“. Je to markdown s konkrétnymi hexadecimálnymi farbami, presnými veľkosťami písma v pt, jednotkami rozostupov a pravidlami pre komponenty. AI agent tento súbor prečíta a pracuje s konkrétnymi údajmi namiesto toho, aby sa pokúšal opísať vkus slovami.

Tím Refero uvádza na stránke ai-agents podporované nástroje: „Cursor, Claude Code, Codex, v0 a Lovable“. Inými slovami, DESIGN.md funguje ako univerzálny artefakt — jeden súbor vhodný pre všetky hlavné AI vývojové agenty.

Čo obsahuje súbor DESIGN.md?#

Tím Refero opisuje štruktúru súboru na stránke design-md-template takto:

Štruktúra súboru zvyčajne vyzerá takto:

Tvorcovia zdôrazňujú aj princíp, ktorý rieši 80% problémov s dizajnom vytváraným AI:

To znamená, že hexadecimálny kód #5E6AD2 je silnejší než „ako Linear“. Presná hodnota font-size: 13px / line-height: 18px je silnejšia než „kompaktný text“. Konkrétne údaje prekonávajú interpretáciu.

DESIGN.md v repozitári nie je obrázok určený tímu. Je stavebným prvkom trvalého kontextu projektu: štruktúrovaným poznaním, ktoré AI číta pri každej požiadavke.

Ako vytvoriť web v štýle Linear v 4 krokoch#

Tieto štyri kroky tvoria opísaný postup na spustenie nového webu. Nejde o „štyri všeobecné kroky“, ale o konkrétnu postupnosť s jednou činnosťou v každom kroku.

1. Nainštaluj Claude Code

   Natívny inštalátor s jedným príkazom: curl -fsSL https://claude.ai/install.sh | bash (odporúčaný spôsob v oficiálnej dokumentácii). V macOS funguje brew install --cask claude-code; vo Windows winget install Anthropic.ClaudeCode. Ak je už nainštalovaný, skontroluj verziu: claude --version (potrebná je verzia 2.1.178+ — táto verzia zaviedla oprávnenia Tool(param:value) a blokovanie nebezpečných príkazov git v automatickom režime). Prihlás sa do svojho účtu: spustením claude sa otvorí sprievodca. Claude Code je súčasťou predplatného Pro ($17/mesiac pri ročnej platbe alebo $20/mesiac pri mesačnej platbe).

2. Otvor Refero Styles a vyber značku

   Prejdi na https://styles.refero.design a otvor katalóg. Hlavným kritériom výberu je, nakoľko sa hodí k tvojmu produktu, nie či sa ti „páči jeho vzhľad“. Vytváraš SaaS panel? Pozri si Linear, Vercel a Notion. Vytváraš finančný produkt? Pozri si Stripe, Mercury a Column. Vytváraš produkt pre členov? Pozri si Duolingo. Otvor kartu značky a klikni na „Copy DESIGN.md“.

3. Umiestni DESIGN.md do projektu ako kontext

   Vytvor v koreňovom adresári projektu súbor docs/DESIGN.md a vlož doň skopírovaný obsah. Potom otvor CLAUDE.md a pridaj jeden riadok: @docs/DESIGN.md. Ide o direktívu na import — Claude Code načíta obsah do kontextu pri spustení relácie. Viac informácií o importe v CLAUDE.md nájdeš v sprievodcovi jedným súborom s pokynmi pre Claude Code, Codex a Cursor.

4. Zadaj pokyn pre konkrétnu stránku

   Nie „urob to pekné“. Buď konkrétny: „Pomocou DESIGN.md v kontexte vytvor domovskú stránku pre produkt SaaS na správu úloh. Štruktúra: hero sekcia s nadpisom a podnadpisom, dve tlačidlá CTA (primárne a sekundárne), nižšie blok s 3 funkciami a ikonami a potom blok s referenciami zákazníkov. Použi presne farby a typografiu z DESIGN.md; nevymýšľaj vlastné.“

Po štvrtom kroku Claude stránku vytvorí. Podľa opísanej skúsenosti trvá vytvorenie domovskej stránky v priemere 8–12 minút — a skutočne sa podobá štýlu vybranej značky. Nie je to dokonalá kópia na úrovni pixelov, ale rozpoznateľná estetika: rovnaké písma, rovnaká paleta, rovnaký rytmus rozostupov a rovnaké drobné rozhodnutia pri tlačidlách.

Tvorcovia Refero opisujú rovnaký princíp v troch krokoch o čosi stručnejšie na stránke ai-agents/design-resources:

Táto štvorstupňová postupnosť sa riadi rovnakou logikou a navyše výslovne zahŕňa inštaláciu Claude Code a importovanie súboru do CLAUDE.md.

Ktorý štýl si vybrať pre svoj produkt?#

Tvorcovia Refero radia hneď v prvom kroku svojho sprievodcu: referenciu vyberaj nielen podľa názvu značky, ale aj podľa hustoty, tónu a publika.

Čo to znamená v praxi? Farby, typografia, hierarchia a umiernený pohyb odvodené od Apple sa môžu hodiť na SaaS panel, no veľkorysé rozostupy konkrétnej marketingovej stránky nemusia. Posudzuj konkrétnu referenciu, nie názov značky. Pre účtovný panel výslovne nastav kompaktné výšky riadkov, rozostupy a hustotu informácií so zachovaním čitateľných čísel a ovládania; priestrannú prezentáciu nekopíruj bez úprav.

Jednoduchý sprievodca výberom podľa typu produktu:

Ak stále váhaš, vyber Linear. Má najuniverzálnejší základ: neutrálnu paletu, čitateľnú typografiu (Inter / Söhne) a umiernené rozostupy. Web založený na Linear bude vyzerať profesionálne pri 9 z 10 typov produktov.

Prečo urobiť z DESIGN.md súčasť trvalého kontextu projektu?#

V opísanej praxi sa DESIGN.md ukladá vedľa CLAUDE.md v každom projekte spravovanom pomocou AI agentov. Tento súbor sa nepovažuje za „dočasný pre jednu úlohu“. Je trvalým kánonom, z ktorého vychádzajú všetky budúce relácie. O mesiac môžeš požiadať Claude, aby do projektu pridalo novú stránku — otvorí rovnaký DESIGN.md a vytvorí ju v rovnakom štýle. O šesť mesiacov môžeš projekt odovzdať inému členovi tímu — aj on môže spustiť Claude a získať konzistentný výsledok, pretože DESIGN.md je v repozitári.

V dizajne tento princíp funguje takto: rozhodnutie sa urobí raz — paleta, typografia a rytmus rozostupov. Potom ho každý AI agent považuje za dané.

To znamená, že dizajn žije ako kód (markdown je kód), nie ako súbor Figma, ktorý AI nedokáže čítať. Keď je dizajn súborom v repozitári, Claude Code ho číta, Codex ho číta a dokáže ho čítať aj každý budúci nástroj. Keď je dizajn vo Figme, sídli v samostatnej rovine a pre každú reláciu ho treba prekladať ručne.

V opísaných vedľajších projektoch sa používala táto štruktúra:

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)
└── ...

Tieto tri súbory predstavujú jeden zo spôsobov, ako usporiadať trvalý kontext projektu. DESIGN.md pokrýva vizuálnu stránku, ARCHITECTURE.md štruktúru a BRAND.md hlas značky. Každý AI agent s prístupom k repozitáru dostane všetky tri súbory ako kontext.

Čo sú Refero MCP a refero_skill?#

Refero Styles je základná vrstva (DESIGN.md ako súbor). Ďalšou vlnou sú integrácie, vďaka ktorým majú AI agenti „natívny“ prístup ku knižnici.

Refero MCP (oficiálny). Ide o serverové API na adrese https://api.refero.design/mcp, ku ktorému sa Claude Code pripája pomocou bearer tokenu. Agent potom získa prístup k viac ako 150 000 obrazovkám a 6 000 používateľským tokom zo skutočných produktov. Nainštalovať ho môžeš pomocou skillu:

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

Po inštalácii Claude na začiatku každej relácie spustí „dizajnový výskum“ ako povinný prvý krok: preverí, ktoré vizuálne voľby sa hodia k úlohe, a v prípade potreby navrhne tri smery založené na zvolenej referencii. K 23. júnu 2026 má repozitár refero_skill 67 commitov a 135 stars. Ide o nový produkt, ktorý sa aktívne vyvíja.

Opísaná prax používa jednoduchý prístup: otvor web ručne, skopíruj DESIGN.md a vlož ho do súboru. MCP je užitočné, keď sa práca s dizajnovými systémami stane rutinou — napríklad keď spravuješ viacero klientskych projektov a každý deň prepínaš medzi vizuálnymi kánonmi. Viac informácií o pripájaní serverov MCP do Claude Code nájdeš v sprievodcovi NotebookLM a MCP.

Ktoré 4 chyby narúšajú tento postup?#

Tieto štyri chyby sa objavujú v opísaných skúsenostiach s dizajnovým kontextom. Každá vyzerá neškodne, no každá vráti výsledok k štandardnej šablóne Tailwind.

Chyba 1. Pokyn „urob to moderné“. Toto je najčastejší vzorec chyby. Ľudia otvoria Claude Code a napíšu: „vytvor mi SaaS web, moderný štýl, prémiový vzhľad“. Dostanú tmavé pozadie a fialový akcent. V tréningových dátach sa slovo „moderný“ spája so všetkými vstupnými stránkami z rokov 2022–2024 vytvorenými podľa rovnakej šablóny. Bez presných parametrov zo súboru DESIGN.md znamená „moderný“ „priemerný“.

Chyba 2. Vloženie DESIGN.md do chatu ako správy. Niekedy ľudia skopírujú DESIGN.md do okna chatu Claude Code a povedia: „tu je štýl, použi ho“. Funguje to raz — do konca relácie. Otvoríš novú reláciu (alebo prepneš na inú úlohu, /clear) a kontext sa stratí. Ak chceš, aby štýl pretrval, súbor musí byť v repozitári a importovaný v CLAUDE.md. Viac o tom, prečo je CLAUDE.md miestom trvalého kontextu, nájdeš v sprievodcovi pamäťou Claude.

Chyba 3. Výber štýlu preto, že sa ti „páči“. Priestranná marketingová referencia Apple nemusí byť dobrým layoutom na nezmenené kopírovanie do realitného panelu s 30 ponukami. Nevylučuje to typografiu, paletu či hierarchiu odvodenú od Apple: prispôsob rozostupy a hustotu úlohe a over skutočne viditeľné informácie pri cieľovej veľkosti obrazovky. Konkrétnu referenciu vyberaj podľa hustoty, tónu a publika, nie iba značky.

Chyba 4. Nespomenutie DESIGN.md v samotnom pokyne. DESIGN.md môže byť v repozitári, importovaný cez CLAUDE.md a viditeľný agentovi. Ak však pokyn znie „vytvor web“, Claude môže zvoliť štandardný postup bez výslovného odkazu na súbor. Pri každom dizajnovom pokyne sa hodí tento riadok: „Použi presne farby, písma a rozostupy zo súboru docs/DESIGN.md. Nevymýšľaj vlastné hodnoty — prevezmi ich zo súboru.“ Tak sa zabezpečí, že agent použije DESIGN.md namiesto toho, aby ho obišiel.

Presné tokeny sú hexadecimálne kódy, veľkosti písma v pt a jednotky rozostupov v DESIGN.md. Prirodzený jazyk znamená „moderný“, „prémiový“, „čistý“ alebo „ako Apple“. Presné tokeny fungujú; voľné slová nie.

Čo urobiť ďalej?#

Teraz už poznáš základný postup: Claude Code + DESIGN.md z Refero + 4 kroky = web bez šablóny. Pokrýva to 70% potrieb. Zvyšných 30% predstavujú prípady, keď potrebuješ väčšiu presnosť, vyššiu rýchlosť alebo overenie.

Tri smery, ktorým sa môžeš venovať po zvládnutí základov:

1. Frontend Design Skill. Ide o oficiálny skill pre Claude Code, ktorý pridáva vizuálnu spätnú väzbu. Agent pomocou Puppeteer vytvorí snímku obrazovky zostavenej stránky, pozrie sa na ňu svojimi „očami“ (modelom videnia), porovná ju s DESIGN.md a sám navrhne opravy. Ide o automatizovaný cyklus „pokyn → kód → snímka obrazovky → kritika → pokyn“. Užitočné, keď je stránka zložitá a nedokážeš ju správne vytvoriť na jednu iteráciu.

2. Refero MCP v produkčnom režime. Keď spravuješ súčasne 3–5 projektov, manuálne pridávanie DESIGN.md ku každému začne byť únavné. Refero MCP dokáže na základe opisu projektu nájsť 3 vhodné štýly a ponúknuť výber. Začiatok nového projektu tak skráti z 30 minút na 3.

3. Kombinácia s Context Engineeringom. DESIGN.md je jedným z kontextových artefaktov. Vedľa neho zvyčajne nájdeš ARCHITECTURE.md (štruktúra projektu), BRAND.md (tón komunikácie) a business/audience.md (cieľové publikum). Všetky sa importujú do CLAUDE.md. Pri vytváraní stránky sa Claude opiera o vizuálne prvky, publikum a štruktúru produktu. V podstate ide o context engineering — systematickú prácu s tým, čo agentovi poskytneš pred zadaním požiadavky.

Praktické materiály: dokumentácia Ailoot.

Praktické materiály: dokumentácia Ailoot.

Ďalšie materiály a nástroje: Ailoot.