Web bez šablony s Claude Code a Refero DESIGN.md

Praktické materiály o práci s projekty a modely: dokumentace Ailoot.

Proč weby v Claude Code vypadají jako šablony Tailwind?#

V popisovaném lednovém příkladu vznikal malý vedlejší projekt — vytáčecí systém pro studené prodeje. V prázdném repozitáři dostal Claude Code zadání vytvořit domovskou stránku. Výsledek byl generický: tmavé pozadí slate-950, akcent purple-500, tučný nadpis bezpatkovým písmem a pod ním tři karty se stejnými stíny. Stejné rozvržení jako v první verzi ChatGPT, první verzi Lovable a první verzi v0. Po pěti úpravách zadání s dodatky „moderní“, „prémiový“ a „ne jako všichni ostatní“ — nic se nezměnilo. Stránka stále vypadala, jako by pocházela ze sady Tailwind UI Templates.

Claude tedy „neví, jak vytvořit něco krásného“ — to není pravda. Ví, co dělá většina lidí, a reprodukuje právě tuto většinu. Aby výsledek nebyl průměrný, potřebuje agent konkrétní omezení: jaké barvy, písma a rozestupy použít a které komponenty považovat za závazné.

Právě zde vstupuje do hry designový systém jako kontext. Ne „udělej to krásné“, ale „udělej to přesně v tomto stylu; tady jsou jeho parametry“.

Refero Styles tuto mezeru překonává hotovým artefaktem — souborem DESIGN.md s parametry převzatými ze skutečných produktů.

Co je Refero Styles?#

Domovská stránka styles.refero.design to říká přímo: „objevte více než 2 000 designových systémů předních produktových webů, čitelných pro AI agenty“. Katalog zahrnuje značky, které určují vizuální standard: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Nezískávají se ručně — tým Refero spouští skript, který analyzuje skutečné CSS a značky webu a převádí výsledek do strukturovaného Markdownu. Samotná knihovna styles.refero.design je zdarma.

Klíčové slovo je „strukturovaných“. Soubor neobsahuje snímky obrazovky ani popis typu „v minimalistickém stylu“. Je to Markdown s konkrétními hexadecimálními barvami, přesnými velikostmi písma v pt, jednotkami rozestupů a pravidly pro komponenty. AI agent tento soubor přečte a pracuje s konkrétními údaji místo pokusů popsat vkus slovy.

Tým Refero na stránce ai-agents uvádí mezi podporovanými nástroji „Cursor, Claude Code, Codex, v0 a Lovable“. Jinými slovy, DESIGN.md funguje jako univerzální artefakt — jeden soubor vhodný pro všechny hlavní vývojové agenty AI.

Co obsahuje DESIGN.md?#

Tým Refero popisuje strukturu souboru na stránce design-md-template takto:

Struktura souboru obvykle vypadá takto:

Autoři zdůrazňují také princip, který řeší 80 % problémů s designem vytvořeným AI:

Hexadecimální kód #5E6AD2 tedy funguje lépe než „jako Linear“. Přesná hodnota font-size: 13px / line-height: 18px je účinnější než „kompaktní text“. Konkrétní údaje vítězí nad interpretací.

Soubor DESIGN.md v repozitáři není obrázek pro tým. Je stavebním kamenem trvalého kontextu vašeho projektu: strukturovaných znalostí, které AI čte při každém požadavku.

Jak vytvořit web ve stylu Linear ve 4 krocích#

Tyto čtyři kroky tvoří popsanou posloupnost pro vytvoření nového webu. Nejde o „čtyři obecné kroky“, ale o konkrétní postup s jednou akcí v každém kroku.

1. Nainstalujte Claude Code

   Nativní instalátor s jedním příkazem: curl -fsSL https://claude.ai/install.sh | bash (doporučená metoda v oficiální dokumentaci). Na macOS funguje brew install --cask claude-code; ve Windows winget install Anthropic.ClaudeCode. Pokud už je nainstalován, zkontrolujte verzi: claude --version (je potřeba verze 2.1.178+ — přinesla oprávnění Tool(param:value) a blokování nebezpečných příkazů git v automatickém režimu). Přihlaste se ke svému účtu: příkaz claude spustí průvodce. Claude Code je součástí předplatného Pro ($17/měsíc při roční fakturaci nebo $20/měsíc při měsíční platbě).

2. Otevřete Refero Styles a vyberte značku

   Přejděte na https://styles.refero.design a otevřete katalog. Hlavním kritériem výběru je, nakolik se hodí k vašemu produktu, nikoli to, zda se vám „líbí vzhled“. Vytváříte dashboard SaaS? Podívejte se na Linear, Vercel a Notion. Fintech produkt? Zvažte Stripe, Mercury a Column. Produkt pro členy? Podívejte se na Duolingo. Otevřete kartu značky a klikněte na „Copy DESIGN.md“.

3. Vložte DESIGN.md do projektu jako kontext

   Vytvořte soubor docs/DESIGN.md v kořeni projektu a vložte do něj zkopírovaný obsah. Potom otevřete CLAUDE.md a přidejte jeden řádek: @docs/DESIGN.md. Jde o direktivu importu — Claude Code při spuštění relace načte obsah do kontextu. Více o importe v CLAUDE.md najdete v průvodci jedním souborem instrukcí pro Claude Code, Codex a Cursor.

4. Zadejte konkrétní stránku

   Neříkejte „udělej to krásné“. Buďte konkrétní: „S DESIGN.md v kontextu vytvoř domovskou stránku produktu SaaS pro správu úkolů. Struktura: úvodní blok s nadpisem a podnadpisem, dvě tlačítka CTA (primární a sekundární), pod nimi blok se 3 funkcemi a ikonami a potom sekce s referencemi. Použij přesně barvy a typografii z DESIGN.md; nevymýšlej vlastní.“

Po čtvrtém kroku Claude stránku vytvoří. V popisované zkušenosti trvá vytvoření domovské stránky průměrně 8–12 minut — a skutečně se podobá zvolenému stylu značky. Nejde o kopii dokonalou na pixel, ale o rozpoznatelnou estetiku: stejná písma, stejná paleta, stejný rytmus rozestupů a stejné drobné volby u tlačítek.

Tvůrci Refero popisují stejný princip ve třech krocích o něco stručněji na stránce ai-agents/design-resources:

Tento čtyřkrokový postup se řídí stejnou logikou a navíc výslovně zahrnuje instalaci Claude Code a import souboru do CLAUDE.md.

Jaký styl zvolit pro svůj produkt?#

Tvůrci Refero tuto radu uvádějí hned v prvním kroku svého průvodce: referenci vybírejte nejen podle názvu značky, ale také podle hustoty, tónu a cílové skupiny.

Co to znamená v praxi? Barvy, typografie, hierarchie a střídmý pohyb odvozené od Apple mohou vyhovovat dashboardu SaaS, velké rozestupy konkrétní produktové marketingové stránky ale ne vždy. Prohlédněte konkrétní referenci místo volby podle značky. U účetního dashboardu výslovně nastavte kompaktní výšky řádků, rozestupy a hustotu informací při zachování čitelnosti čísel a ovládání; vzdušnou prezentační stránku nekopírujte beze změn.

Jednoduchý průvodce výběrem podle typu produktu:

Pokud stále váháte, zvolte Linear. Má nejuniverzálnější základ: neutrální paletu, čitelnou typografii (Inter / Söhne) a střídmé rozestupy. Web založený na Linear bude působit profesionálně u 9 z 10 typů produktů.

Proč udělat z DESIGN.md součást trvalého kontextu projektu?#

V popisované praxi je DESIGN.md uložen vedle CLAUDE.md v každém projektu spravovaném pomocí AI agentů. Tento soubor se nepovažuje za „dočasný pro jeden úkol“. Je to trvalý kánon, na který se spoléhají všechny budoucí relace. Za měsíc můžete požádat Claude, aby do projektu přidal novou stránku — otevře tentýž DESIGN.md a vytvoří ji ve stejném stylu. Za šest měsíců můžete projekt předat jinému členovi týmu — také může spustit Claude a dosáhnout konzistentního výsledku, protože DESIGN.md je v repozitáři.

V designu tento princip funguje takto: jednou se rozhodnete o paletě, typografii a rytmu rozestupů. Potom je každý AI agent považuje za dané.

Design tedy žije jako kód (Markdown je kód), nikoli jako soubor Figma, který AI nedokáže přečíst. Když je design souborem v repozitáři, přečte si ho Claude Code, Codex i jakýkoli budoucí nástroj. Když je ve Figmě, zůstává oddělený a pro každou relaci ho musíte ručně převést.

V popisovaných vedlejších projektech se používala tato struktura:

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

Tyto tři soubory jsou jedním ze způsobů, jak uspořádat trvalý kontext projektu. DESIGN.md řeší vizuální stránku, ARCHITECTURE.md strukturu a BRAND.md hlas. Každý AI agent s přístupem k repozitáři dostane všechny tři jako kontext.

Co jsou Refero MCP a refero_skill?#

Refero Styles je základní vrstva (DESIGN.md jako soubor). Další vlna tvoří integrace, které AI agentům zpřístupňují knihovnu „nativně“.

Refero MCP (oficiální). Jde o API server na adrese https://api.refero.design/mcp, ke kterému se Claude Code připojuje pomocí bearer tokenu. Agent pak získá přístup k více než 150 000 obrazovkám a 6 000 uživatelským tokům ze skutečných produktů. Nainstalovat ho můžete pomocí skillu:

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

Po instalaci Claude na začátku každé relace spustí „designový výzkum“ jako povinný první krok: podívá se, jaké vizuální volby se hodí pro daný úkol, a v případě potřeby navrhne tři směry založené na vybrané referenci. K 23. červnu 2026 měl repozitář refero_skill 67 commitů a 135 hvězdiček. Nový produkt, na kterém se aktivně pracuje.

Popisovaná praxe používá jednoduchý postup: ručně otevřít web, zkopírovat DESIGN.md a vložit ho do souboru. MCP se hodí, když s designovými systémy pracujete pravidelně — například když spravujete několik klientských projektů a každý den střídáte vizuální kánony. Více o připojení serverů MCP ke Claude Code najdete v průvodci NotebookLM a MCP.

Které 4 chyby tento postup narušují?#

Tyto čtyři chyby se objevují v popisovaných zkušenostech s prací s designovým kontextem. Každá vypadá neškodně, ale každá vrací výsledek ke standardní šabloně Tailwind.

Chyba 1. Zadání „udělej to moderní“. To je nejčastější vzorec chyb. Lidé otevřou Claude Code a napíšou: „udělej mi web SaaS, moderní styl, prémiový vzhled“. Dostanou tmavé pozadí a fialový akcent. V trénovacích datech se slovo „moderní“ pojí se všemi landing pages z let 2022–2024 vytvořenými ze stejné šablony. Bez přesných parametrů z DESIGN.md znamená „moderní“ „průměrný“.

Chyba 2. Vložení DESIGN.md do chatu jako zprávy. Někdy lidé zkopírují DESIGN.md do chatovacího okna Claude Code a napíšou: „tady je styl, použij ho“. Funguje to jednou — do konce relace. Otevřete novou relaci (nebo přejdete k jinému úkolu, /clear) a kontext se ztratí. Pokud chcete, aby styl přetrval, soubor musí být v repozitáři a importovaný v CLAUDE.md. Více o tom, proč je CLAUDE.md místem trvalého kontextu, najdete v průvodci pamětí Claude.

Chyba 3. Výběr stylu podle toho, že se vám „líbí“. Vzdušná marketingová reference Apple nemusí být vhodným rozvržením pro přímé zkopírování do realitního dashboardu s 30 nabídkami na obrazovce. Nevylučuje to typografii, paletu ani hierarchii odvozenou od Apple: přizpůsobte rozestupy a hustotu řádků úkolu a ověřte skutečně viditelné informace na cílové obrazovce. Vybírejte konkrétní referenci podle hustoty, tónu a publika, nejen názvu značky.

Chyba 4. Nezmínit DESIGN.md přímo v zadání. DESIGN.md může být v repozitáři, importovaný přes CLAUDE.md a viditelný agentovi. Pokud ale zadání zní „vytvoř web“, Claude může zvolit standardní postup, aniž by se na soubor výslovně odkazoval. Pro každé designové zadání se hodí tato věta: „Použij přesně barvy, písma a rozestupy z docs/DESIGN.md. Nevymýšlej vlastní hodnoty — převezmi je ze souboru.“ Tím zajistíte, že agent použije DESIGN.md místo toho, aby ho obešel.

Přesné tokeny jsou hexadecimální kódy, velikosti písma v pt a jednotky rozestupů v DESIGN.md. Přirozený jazyk znamená „moderní“, „prémiový“, „čistý“ nebo „jako Apple“. Přesné tokeny fungují; volná slova ne.

Co dělat dál?#

Základní postup už znáte: Claude Code + DESIGN.md z Refero + 4 kroky = web bez šablony. To pokrývá 70 % potřeb. Zbývajících 30 % tvoří případy, kdy potřebujete vyšší přesnost, větší rychlost nebo ověření.

Po zvládnutí základů můžete pokračovat třemi směry:

1. Frontend Design Skill. Jde o oficiální skill pro Claude Code, který přidává vizuální zpětnou vazbu. Agent pořídí snímek sestavené stránky pomocí Puppeteer, prohlédne si ho svýma „očima“ (modelem pro vidění), porovná ho s DESIGN.md a sám navrhne opravy. Jde o automatizovaný cyklus „zadání → kód → snímek obrazovky → kritika → zadání“. Hodí se, když je stránka složitá a nelze ji správně vytvořit hned v první iteraci.

2. Refero MCP v produkčním režimu. Když souběžně spravujete 3–5 projektů, ruční přidávání DESIGN.md pro každý z nich začne být únavné. Refero MCP umí podle popisu projektu najít 3 vhodné styly a nabídnout vám výběr. Zrychlí zahájení nového projektu z 30 minut na 3.

3. Propojení s Context Engineering. DESIGN.md je jedním z artefaktů kontextu. Vedle něj obvykle najdete ARCHITECTURE.md (strukturu projektu), BRAND.md (tón komunikace) a business/audience.md (cílovou skupinu). Všechny se importují v CLAUDE.md. Při tvorbě stránky Claude vychází z vizuálního stylu, cílové skupiny a struktury produktu. Jde v podstatě o context engineering — systematickou práci s tím, co agentovi předáte před zadáním.

Praktické materiály: dokumentace Ailoot.

Praktické materiály: Ailoot.

Další materiály a nástroje: Ailoot.