Šablono neturinti svetainė su Claude Code ir Refero DESIGN.md

Praktinė medžiaga apie darbą su projektais ir modeliais: Ailoot dokumentacija.

Kodėl Claude Code svetainės atrodo kaip Tailwind šablonai?#

Aprašytame sausio pavyzdyje buvo kuriamas nedidelis šalutinis projektas – šaltųjų pardavimo skambučių įrankis. Tuščioje saugykloje Claude Code buvo paprašyta sukurti pagrindinį puslapį. Rezultatas buvo bendrinis: tamsus slate-950 fonas, purple-500 akcentas, paryškinta antraštė be užraitų ir trys kortelės apačioje su vienodais šešėliais. Toks pat išdėstymas kaip pirmojoje ChatGPT versijoje, pirmojoje Lovable versijoje ir pirmojoje v0 versijoje. Po penkių užklausos redagavimų, įtraukus „modernus“, „premium“ ir „ne toks kaip visi kiti“, niekas nepasikeitė. Puslapis vis dar atrodė taip, lyg būtų paimtas iš Tailwind UI Templates rinkinio.

Kitaip tariant, Claude ne tai, kad „nemoka“ sukurti ko nors gražaus. Jis žino, ką daro dauguma, ir atkuria tą daugumos rezultatą. Kad rezultatas nebūtų vidutinis, agentui reikia konkrečių apribojimų: kokias spalvas ir šriftus naudoti, kokius tarpus nustatyti ir kuriuos komponentus laikyti etaloniniais.

Čia į kontekstą įtraukiama dizaino sistema. Ne „padaryk gražiai“, o „padaryk būtent tokiu stiliumi; štai jo parametrai“.

Refero Styles šį atotrūkį sumažina pateikdama paruoštą artefaktą – DESIGN.md failą su tikrų produktų parametrais.

Kas yra Refero Styles?#

styles.refero.design pagrindiniame puslapyje rašoma aiškiai: „atrask daugiau nei 2 000 pirmaujančių produktų svetainių dizaino sistemų, kurias gali skaityti AI agentai“. Kataloge yra prekės ženklai, nustatantys vizualinius standartus: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Sistemos surenkamos ne rankiniu būdu – Refero komanda paleidžia scenarijų, kuris analizuoja tikrą svetainės CSS ir žymėjimą, o rezultatą pateikia struktūruotu markdown formatu. Pati styles.refero.design biblioteka yra nemokama.

Svarbiausias žodis – „struktūruotais“. Faile nėra ekrano nuotraukų ar aprašymo, pavyzdžiui, „minimalistinio stiliaus“. Tai markdown su konkrečiomis šešioliktainėmis spalvomis, tiksliais šrifto dydžiais pt, tarpų vienetais ir komponentų taisyklėmis. AI agentas perskaito šį failą ir dirba su konkrečiais duomenimis, o ne mėgina žodžiais apibūdinti skonį.

Refero komanda ai-agents puslapyje nurodo palaikomus įrankius: „Cursor, Claude Code, Codex, v0 ir Lovable“. Kitaip tariant, DESIGN.md veikia kaip universalus artefaktas – vienas failas, tinkantis visiems pagrindiniams AI kūrimo agentams.

Kas yra DESIGN.md faile?#

Refero komanda failo struktūrą savo design-md-template puslapyje apibūdina taip:

Paprastai failo struktūra būna tokia:

Kūrėjai taip pat pabrėžia principą, išsprendžiantį 80% AI dizaino problemų:

Kitaip tariant, šešioliktainis kodas #5E6AD2 yra veiksmingesnis už „kaip Linear“. Tiksli reikšmė font-size: 13px / line-height: 18px yra veiksmingesnė už „kompaktiškas tekstas“. Konkretumas įveikia interpretaciją.

DESIGN.md saugykloje nėra komandos paveikslėlis. Tai nuolatinio tavo projekto konteksto dalis: struktūruotos žinios, kurias AI perskaito su kiekviena užklausa.

Kaip sukurti Linear stiliaus svetainę per 4 žingsnius#

Šie keturi žingsniai sudaro aprašytą naujos svetainės kūrimo seką. Tai ne „keturi bendri žingsniai“, o konkreti seka, kurioje kiekviename žingsnyje atliekamas vienas veiksmas.

1. Įdiek Claude Code

   Natūralus vienos komandos diegimo būdas: curl -fsSL https://claude.ai/install.sh | bash (oficialioje dokumentacijoje rekomenduojamas metodas). macOS sistemoje veikia brew install --cask claude-code; Windows sistemoje – winget install Anthropic.ClaudeCode. Jei programa jau įdiegta, patikrink versiją: claude --version (reikia 2.1.178+ versijos – joje atsirado Tool(param:value) leidimai ir pavojingų git komandų blokavimas automatiniu režimu). Prisijunk prie paskyros: paleidus claude atidaromas vedlys. Claude Code įtrauktas į Pro prenumeratą ($17/mėn. mokant už metus arba $20/mėn. mokant kas mėnesį).

2. Atidaryk Refero Styles ir pasirink prekės ženklą

   Eik į https://styles.refero.design ir atidaryk katalogą. Pagrindinis atrankos kriterijus – kiek pasirinkimas atitinka tavo produktą, o ne ar tau „patinka jo išvaizda“. Kuri SaaS prietaisų skydelį? Peržiūrėk Linear, Vercel ir Notion. Kuri finansinį produktą? Peržiūrėk Stripe, Mercury ir Column. Kuri produktą nariams? Peržiūrėk Duolingo. Atidaryk prekės ženklo kortelę ir spustelėk „Copy DESIGN.md“.

3. Įdėk DESIGN.md į projektą kaip kontekstą

   Projekto šakniniame kataloge sukurk failą docs/DESIGN.md ir įklijuok nukopijuotą turinį. Tada atidaryk CLAUDE.md ir pridėk vieną eilutę: @docs/DESIGN.md. Tai importavimo direktyva – Claude Code įkelia turinį į kontekstą, kai prasideda sesija. Daugiau apie importus faile CLAUDE.md skaityk vadove apie vieną instrukcijų failą Claude Code, Codex ir Cursor.

4. Pateik užklausą dėl konkretaus puslapio

   Ne „padaryk gražiai“. Būk konkretus: „Naudodamas kontekste esantį DESIGN.md, sukurk pagrindinį SaaS užduočių valdymo produkto puslapį. Struktūra: hero blokas su antrašte ir paantrašte, du CTA mygtukai (pagrindinis ir antrinis), apačioje blokas su 3 funkcijomis ir piktogramomis, tada atsiliepimų blokas. Naudok tiksliai DESIGN.md nurodytas spalvas ir tipografiją; nesugalvok savų.“

Atlikęs ketvirtą žingsnį Claude sukuria puslapį. Aprašytoje patirtyje pagrindiniam puslapiui vidutiniškai prireikia 8–12 minučių – ir jis iš tiesų atrodo panašus į pasirinkto prekės ženklo stilių. Tai nėra tobula pikselių lygio kopija, bet estetika atpažįstama: tie patys šriftai, ta pati paletė, tas pats tarpų ritmas ir tie patys smulkūs sprendimai dėl mygtukų.

Refero kūrėjai tą patį trijų žingsnių principą trumpiau aprašo savo ai-agents/design-resources puslapyje:

Ši keturių žingsnių seka vadovaujasi ta pačia logika, papildomai aiškiai nurodydama įdiegti Claude Code ir importuoti failą į CLAUDE.md.

Kurį stilių pasirinkti savo produktui?#

Refero kūrėjai šį patarimą pateikia pirmame savo vadovo žingsnyje: nuorodą rinkis ne vien pagal prekės ženklo pavadinimą, bet ir pagal tankį, toną bei auditoriją.

Ką tai reiškia praktikoje? Apple įkvėptos spalvos, tipografija, hierarchija ir santūrus judesys gali tikti SaaS skydeliui, o konkretaus rinkodaros puslapio erdvūs tarpai — netikti. Peržiūrėk konkretų pavyzdį, o ne rinkis pagal prekės ženklą. Apskaitos skydeliui aiškiai nustatyk kompaktišką eilučių aukštį, tarpus ir informacijos tankį, išlaikydamas įskaitomus skaičius bei valdiklius; nekeisdamas nekopijuok erdvaus pristatymo išdėstymo.

Paprastas produktų tipų pasirinkimo vadovas:

Jei vis dar abejoji, rinkis Linear. Jos pagrindas universaliausias: neutrali paletė, įskaitoma tipografija (Inter / Söhne) ir santūrūs tarpai. Linear pagrįsta svetainė profesionaliai atrodys 9 iš 10 produktų tipų.

Kodėl DESIGN.md verta paversti nuolatinio projekto konteksto dalimi?#

Aprašytoje praktikoje DESIGN.md laikomas greta CLAUDE.md kiekviename projekte, valdomame naudojant AI agentus. Šis failas nelaikomas „laikinu vienai užduočiai“. Tai nuolatinis etalonas, kuriuo remiasi visos būsimos sesijos. Po mėnesio gali paprašyti Claude pridėti projektui naują puslapį – jis atidarys tą patį DESIGN.md ir kurs tuo pačiu stiliumi. Po šešių mėnesių gali perduoti projektą kitam komandos nariui – jis taip pat galės paleisti Claude ir gauti nuoseklų rezultatą, nes DESIGN.md yra saugykloje.

Dizaino srityje šis principas veikia taip: sprendimas priimamas vieną kartą – dėl paletės, tipografijos ir tarpų ritmo. Vėliau kiekvienas AI agentas jį laiko savaime suprantamu.

Tai reiškia, kad dizainas gyvuoja kaip kodas (markdown yra kodas), o ne kaip Figma failas, kurio AI negali perskaityti. Kai dizainas yra failas saugykloje, jį perskaito Claude Code, Codex ir bet kuris būsimas įrankis. Kai dizainas yra Figmoje, jis gyvuoja atskiroje erdvėje ir kiekvienoje sesijoje turi būti išverstas rankiniu būdu.

Aprašytuose šalutiniuose projektuose buvo naudojama tokia struktū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)
└── ...

Šie trys failai – vienas iš būdų sutvarkyti nuolatinį projekto kontekstą. DESIGN.md apibrėžia vizualiką, ARCHITECTURE.md – struktūrą, o BRAND.md – balsą. Kiekvienas AI agentas, turintis prieigą prie saugyklos, gauna visus tris failus kaip kontekstą.

Kas yra Refero MCP ir refero_skill?#

Refero Styles yra bazinis sluoksnis (DESIGN.md kaip failas). Kita banga – integracijos, suteikiančios AI agentams „natūralią“ prieigą prie bibliotekos.

Refero MCP (oficialus). Tai serverio API adresu https://api.refero.design/mcp, prie kurio Claude Code prisijungia naudodamas bearer token. Tada agentas gauna prieigą prie daugiau nei 150 000 ekranų ir daugiau nei 6 000 naudotojų srautų iš tikrų produktų. Jį galima įdiegti naudojant skill:

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

Įdiegus Claude kiekvienos sesijos pradžioje kaip privalomą pirmą žingsnį paleidžia „dizaino tyrimą“: peržiūri, kurie vizualiniai pasirinkimai tinka užduočiai, ir, jei reikia, pasiūlo tris pasirinkta nuoroda pagrįstas kryptis. 2026 m. birželio 23 d. refero_skill saugykloje yra 67 commits ir 135 stars. Tai naujas, aktyviai kuriamas produktas.

Aprašytoje praktikoje naudojamas paprastas būdas: rankiniu būdu atidaryti svetainę, nukopijuoti DESIGN.md ir įdėti jį į failą. MCP naudingas, kai darbas su dizaino sistemomis tampa įprastas – pavyzdžiui, kai valdai kelis klientų projektus ir kasdien keiti vizualinius etalonus. Daugiau apie MCP serverių prijungimą prie Claude Code skaityk NotebookLM ir MCP vadove.

Kokios 4 klaidos sugadina darbo eigą?#

Aprašytoje darbo su dizaino kontekstu patirtyje pasitaiko šios keturios klaidos. Kiekviena atrodo nekenksminga, tačiau dėl kiekvienos rezultatas vėl tampa įprasta Tailwind šablonine svetaine.

1 klaida. Nurodymas „padaryk moderniai“. Tai dažniausias klaidų modelis. Žmonės atidaro Claude Code ir parašo: „sukurk man SaaS svetainę, modernus stilius, premium išvaizda“. Jie gauna tamsų foną ir violetinį akcentą. Mokymo duomenyse žodis „modernus“ siejamas su visais 2022–2024 m. nukreipimo puslapiais, sukurtais pagal tą patį šabloną. Be tikslių DESIGN.md parametrų „modernus“ reiškia „vidutinis“.

2 klaida. DESIGN.md įklijavimas į pokalbį kaip žinutė. Kartais žmonės nukopijuoja DESIGN.md į Claude Code pokalbio langą ir sako: „štai stilius, naudok jį“. Tai veikia vieną kartą – iki sesijos pabaigos. Atidaryk naują sesiją (arba pereik prie kitos užduoties, /clear), ir kontekstas dings. Jei nori, kad stilius išliktų, failas turi būti saugykloje ir importuotas per CLAUDE.md. Daugiau apie tai, kodėl CLAUDE.md yra nuolatinio konteksto vieta, skaityk Claude atminties vadove.

3 klaida. Stiliaus pasirinkimas, nes jis tau „patinka“. Erdvaus Apple rinkodaros pavyzdžio išdėstymas gali netikti tiesiogiai nukopijuotas į nekilnojamojo turto skydelį, kuriam reikia 30 skelbimų ekrane. Tai neatmeta Apple įkvėptos tipografijos, paletės ar hierarchijos: pritaikyk tarpus ir eilučių tankį užduočiai, tada patikrink tikrą matomą informaciją numatytame ekrane. Konkretų pavyzdį rinkis pagal tankį, toną ir auditoriją, o ne vien prekės ženklą.

4 klaida. DESIGN.md nepaminėjimas pačiame nurodyme. DESIGN.md gali būti saugykloje, importuotas per CLAUDE.md ir matomas agentui. Tačiau jei nurodyme rašoma „sukurk svetainę“, Claude gali pasirinkti įprastą kelią ir aiškiai nenurodyti failo. Kiekvienam dizaino nurodymui tinka ši eilutė: „Naudok tiksliai spalvas, šriftus ir tarpus iš docs/DESIGN.md. Nesugalvok savo reikšmių – paimk jas iš failo.“ Taip agentas tikrai naudos DESIGN.md, o ne jį apeis.

Tikslūs žetonai – tai šešioliktainiai kodai, šrifto dydžiai pt ir tarpų vienetai DESIGN.md faile. Natūrali kalba – tai „modernus“, „premium“, „švarus“ arba „kaip Apple“. Tikslūs žetonai veikia, o laisvos formuluotės – ne.

Ką daryti toliau?#

Dabar žinai pagrindinę darbo eigą: Claude Code + DESIGN.md iš Refero + 4 žingsniai = šablono neturinti svetainė. Tai patenkina 70% poreikių. Likę 30% – atvejai, kai reikia didesnio tikslumo, daugiau spartos arba patikros.

Įvaldžius pagrindus galima rinktis iš trijų tolesnių krypčių:

1. Frontend Design Skill. Tai oficialus Claude Code skill, papildantis vizualinį grįžtamąjį ryšį. Agentas naudodamas Puppeteer padaro surinkto puslapio ekrano nuotrauką, apžiūri ją savo „akimis“ (regos modeliu), palygina su DESIGN.md ir pats pasiūlo pataisymus. Tai automatizuotas ciklas „užklausa → kodas → ekrano nuotrauka → kritika → užklausa“. Naudinga, kai puslapis sudėtingas ir jo nepavyksta tinkamai sukurti per vieną iteraciją.

2. Refero MCP gamybos režimu. Kai vienu metu valdai 3–5 projektus, rankiniu būdu pridėti DESIGN.md prie kiekvieno tampa varginama. Refero MCP gali pagal projekto aprašymą rasti 3 tinkamus stilius ir pasiūlyti pasirinkti. Naują projektą galima pradėti greičiau – vietoj 30 minučių tam prireikia 3.

3. Derinimas su Context Engineering. DESIGN.md yra vienas iš konteksto artefaktų. Greta jo paprastai rasi ARCHITECTURE.md (projekto struktūra), BRAND.md (komunikacijos tonas) ir business/audience.md (tikslinė auditorija). Visi jie importuojami į CLAUDE.md. Kurdamas puslapį Claude remiasi vizualika, auditorija ir produkto struktūra. Iš esmės tai yra context engineering – nuoseklus darbas su tuo, ką pateiki agentui prieš užklausą.

Praktinė medžiaga: Ailoot dokumentacija.

Praktinė medžiaga: Ailoot dokumentacija.

Daugiau medžiagos ir įrankių: Ailoot.