# Šablono neturinti svetainė su Claude Code ir Refero DESIGN.md
> Refero Styles dizaino kontekstas: DESIGN.md struktūra, vizualinės sistemos pasirinkimas, jos importavimas į CLAUDE.md, keturi puslapio kūrimo žingsniai ir dažniausios klaidos.
Source: https://ailoot.ai/blog/lt/claude-code-refero-design-md/
Canonical: https://ailoot.ai/blog/lt/claude-code-refero-design-md/
Language: lt
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-205
Revision: sha256-56d5bf03428d459fad429057043499c3535e98645aa4c6ebe7181124c0e44805
Svarbiausia mintis
Svetainės, kurias Claude Code parašo „iš dėžutės“, visos atrodo vienodai: tamsus fonas, violetinis gradientas, šriftas be užraitų, numatytosios shadcn kortelės. Toliau parodysime, kaip paimti paruoštą DESIGN.md iš Apple, Linear, Stripe arba ElevenLabs (bibliotekoje yra daugiau nei 2 000 sistemų), įdėti jį į projektą ir nustatyti, kad Claude rašytų tokiu stiliumi. Užbaigta svetainė nebeatrodo kaip AI šablonas.
Praktinė medžiaga apie darbą su projektais ir modeliais: [Ailoot dokumentacija](https://ailoot.ai/docs/).
## Kodėl Claude Code svetainės atrodo kaip Tailwind šablonai?
Svarbiausia mintis
Neturėdamas dizaino sistemos, Claude Code iš savo mokymo duomenų kuria vidutinę sąsają. O mokymo duomenys – tai visas internetas su Tailwind, shadcn/ui ir tūkstančiais vienodų nukreipimo puslapių. Be aiškaus konteksto apie spalvas, šriftus ir tarpus, agentas pateikia „visų šablonų aritmetinį vidurkį“.
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?
Svarbiausia mintis
Refero Styles – tai daugiau nei 2 000 dizaino sistemų biblioteka, sudaryta iš tikrų svetainių ir pateikiama `DESIGN.md` failais. Kiekviena sistema atspindi prekės ženklą: Apple, Stripe, Linear, Notion, Vercel, Airbnb, ElevenLabs, Cursor. Apsilankai styles.refero.design, pasirenki prekės ženklą, nukopijuoji jo markdown failą ir įtrauki į projektą kaip kontekstą Claude Code, Cursor, Codex, v0 arba Lovable.
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?
Svarbiausia mintis
Viename faile pateikiami visi pagrindiniai dizaino sistemos sluoksniai: spalvų paletė šešioliktainiu formatu (su tamsiu ir šviesiu režimais), tipografija (šriftas, dydžių skalė, storiai, eilučių aukštis), tarpų taisyklės (8px tinklelis ar kitas ritmas), komponentų aprašai (mygtukai, kortelės, formos), judesio taisyklės (animacijos, easing) ir „prekės ženklo balsas“ (pranešimų tonas). Failą sudaro 100–400 markdown eilučių.
Refero komanda failo struktūrą savo design-md-template puslapyje apibūdina taip:
Pradėk nuo produkto tono ir dizaino principų, tada apibrėžk spalvas, tipografiją, tarpus, komponentus, išdėstymą, judesį, prieinamumą ir taisykles, ko nenaudoti.
— Refero Styles komanda, https://styles.refero.design/design-md/design-md-template
Paprastai failo struktūra būna tokia:
| Skyrius | Turinys | Kam agentui to reikia |
|----|----|----|
| **Produkto tonas** | 2–3 sakiniai apie tai, kaip skamba sąsaja | nustato mikro tekstų kryptį |
| **Dizaino principai** | 4–6 taisyklės, pavyzdžiui, „minimalizmas nepakenkiant skaitomumui“ | padeda agentui rinktis iš vienodai gerų variantų |
| **Spalvos** | šešioliktainė paletė su pavadinimais (pagrindinė, antrinė, akcentinė, paviršiaus, teksto) + tamsus / šviesus režimas | agentas naudoja tikslius kodus, o ne juos sugalvoja |
| **Tipografija** | šriftas (pavadinimas ir atsarginė seka), dydžių skalė (10–12 žingsnių), storiai (regular, medium, bold), eilučių aukštis | neleidžia visai svetainei tapti vienu Inter 16px |
| **Tarpai** | bazinis vienetas (4px, 8px, 16px) ir kartotinių skalė | vidiniai ir išoriniai atitraukimai nustoja „klaidžioti“ |
| **Komponentai** | mygtukų, kortelių, formų ir navigacijos taisyklės – dydžiai, būsenos, variantai | agentas neprigalvoja naujų variantų |
| **Išdėstymas** | tinklelis, lūžio taškai, maksimalus konteinerių plotis | visi svetainės puslapiai kuriami pagal vieną tinklelį |
| **Judesys** | trukmė, easing, leidžiami perėjimai | animacijos išlieka santūrios, ne Bootstrap-2010 stiliaus |
| **Balsas ir tonas** | mygtukų, antraščių ir klaidų formuluočių pavyzdžiai | svetainės tekstai skamba kaip prekės ženklo |
| **Nenaudoti** | draudimų sąrašas („nenaudok `box-shadow: 0 10px 30px`“) | agentas negrįžta prie šabloninių sprendimų |
Kūrėjai taip pat pabrėžia principą, išsprendžiantį 80% AI dizaino problemų:
Konkrečios konteksto nuostatos veikia geriau nei skonį apibūdinantys būdvardžiai.
— Refero Styles komanda, https://styles.refero.design/ai-agents/design-md-examples
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
Svarbiausia mintis
Procesas trumpas: įdiek Claude Code, atidaryk styles.refero.design, pasirink prekės ženklą (pavyzdžiui, Linear), nukopijuok DESIGN.md į `docs/DESIGN.md` arba `.claude/DESIGN.md`, įtrauk į `CLAUDE.md` eilutę apie šį failą ir paprašyk Claude sukurti puslapį. Praktiškai nuo tuščio projekto iki veikiančio pagrindinio puslapio užtrunka 30 minučių.
Š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 į 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](https://ailoot.ai/blog/lt/agents-md-claude-md-one-instruction-file/).
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:
Pasirink užduotį, atidaryk atitinkamą išteklių, suteik agentui konteksto: įtrauk DESIGN.md į agento kontekstą, paaiškink produktą ir paprašyk konkretaus ekrano.
— Refero Styles komanda, https://styles.refero.design/ai-agents/design-resources
Š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?
Svarbiausia mintis
Rinkis pagal tankį ir toną, o ne pagal prekės ženklą. Komandinis SaaS įrankis (tankus UI, daug duomenų) – Linear arba Vercel. Finansinis produktas (pasitikėjimas, tikslumas) – Stripe, Mercury, Column. Vartotojams skirtas produktas (šiluma, emocijos) – Duolingo, Notion komandoms, Airbnb. AI / kūrėjų įrankis (minimalizmas, tamsi tema) – ElevenLabs, xAI, Modal. Produktas nariams (prieinamumas, skaitomumas) – Duolingo. Jei abejoji, rinkis Linear kaip saugų universalų variantą.
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:
| Produkto tipas | Tinkami Refero stiliai | Kas jiems bendra |
|----|----|----|
| Komandinis SaaS prietaisų skydelis | Linear, Vercel, Notion, PostHog; Apple įkvėpti žetonai su pritaikytu kompaktišku išdėstymu | įskaitoma tanki sąsaja, aiški hierarchija, glausta tipografija |
| Finansinis produktas | Stripe, Mercury, Column | patikimumą kelianti paletė, aiški tipografija, skaičiams skirtas vienodo pločio šriftas |
| AI / kūrėjų įrankis | ElevenLabs, xAI, Modal, Anthropic | tamsi tema, santūrūs akcentai, monochrominė gama su viena ryškia spalva |
| Vartotojams skirtas produktas | Duolingo, Airbnb, Notion | šilta paletė, išraiškingos iliustracijos, draugiškas tonas |
| Rinkodaros svetainė | Linear, Vercel, Stripe (pagrindiniai puslapiai) | didelės antraštės, aiški hierarchija, ramus fonas |
| Minimalistinis portfolio | Apple, Mercury, Modal | kuo daugiau tuščios vietos, šriftas be užraitų, santūrūs akcentai |
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?
Svarbiausia mintis
DESIGN.md nėra vienkartinis artefaktas. Tai nuolatinio projekto konteksto dalis, kaip `CLAUDE.md` ir `business/` aplankas. Kai failas yra saugykloje, kiekviena Claude sesija, kiekvienas komandos narys ir kiekvienas naujas AI agentas (Codex, Cursor, Gemini CLI) gali naudotis tuo pačiu vizualiniu etalonu. Žinios vieną kartą susisteminamos ir naudojamos neribotą laiką.
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?
Svarbiausia mintis
Refero MCP – serveris api.refero.design/mcp, suteikiantis Claude Code tiesioginę prieigą prie daugiau nei 150 000 ekranų iš tikrų programėlių ir daugiau nei 6 000 naudotojų srautų pokalbyje. Refero_skill – oficialus Claude Code skill (`npx skills add`), apgaubiantis MCP ir nustatantis „dizaino tyrimą“ kaip privalomą pirmą žingsnį prieš rašant kodą.
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:
```bash
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ą?
Svarbiausia mintis
Pirma, naudojamas nurodymas „padaryk, kad atrodytų moderniai“, nepridėjus DESIGN.md (agentas grįžta prie mokymo duomenų vidurkio). Antra, DESIGN.md įklijuojamas į pokalbį kaip žinutė, o ne įdedamas į saugyklą (kontekstas neišlieka tarp sesijų). Trečia, renkamasi pagal prekės ženklą, o ne konkretų ekraną ir tankį, pavyzdžiui, erdvus rinkodaros išdėstymas nukopijuojamas į apskaitos skydelį. Ketvirta, nurodyme aiškiai nepaminimas DESIGN.md (agentas jį ignoruoja net jei failas yra kontekste).
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](https://ailoot.ai/blog/lt/claude-memory-claude-md-auto-memory/).
**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?
Svarbiausia mintis
DESIGN.md yra pirmasis vizualinio etalono elementas, bet ne vienintelis. Yra trys tolesnės plėtros kryptys: Frontend Design Skill Claude Code aplinkoje, suteikiantis vizualinį grįžtamąjį ryšį per ekrano nuotraukas; Refero MCP, skirtas reguliariai dirbti su skirtingais stiliais; ir DESIGN.md derinimas su tavo konteksto kūrimu – kad agentas pirmiausia perskaitytų vizualinį etaloną, tada sukurtų puslapį ir galiausiai pats patikrintų rezultatą ekrano nuotraukoje.
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](https://ailoot.ai/blog/lt/context-engineering/) – nuoseklus darbas su tuo, ką pateiki agentui prieš užklausą.
Praktinė medžiaga: [Ailoot dokumentacija](https://ailoot.ai/docs/).
Praktinė medžiaga: [Ailoot dokumentacija](https://ailoot.ai/docs/).
Daugiau medžiagos ir įrankių: [Ailoot](https://ailoot.ai/).
## Klausimai ir atsakymai
### Ar Apple pavyzdys gali tikti tankiam SaaS skydeliui?
Taip, jei pritaikomas užduočiai. Naudok tinkamą paletę, tipografiją, hierarchiją ir santūrų judesį, tačiau aiškiai nustatyk kompaktišką eilučių aukštį, tarpus bei informacijos tankį, užuot kopijavęs erdvų rinkodaros išdėstymą.
### Kodėl išsaugotas DESIGN.md vis tiek neveikia naujo puslapio?
Patikrink, kad failas yra saugykloje, importuojamas iš CLAUDE.md ir aiškiai įvardytas dizaino užklausoje. Paprašyk tikrų jo spalvų, šriftų ir tarpų reikšmių, tada atvaizduotą puslapį palygink su numatytu pavyzdžiu.
## Ailoot · Įmonė ir jos projektų portfelis
Ailoot remiasi sukaupta veiklos patirtimi, plačia klientų baze, stabiliomis paslaugomis ir nuolatine KPI kontrole.
Įmonė ir jos projektų portfelis: milijonai klientų; mėnesio pardavimai siekia milijardus.
Ailoot šią veiklos patirtį pritaiko teikdama API prieigą prie DI funkcijų klientų produktuose, agentuose, programose ir automatizavimo sprendimuose.