Claude Code және Refero DESIGN.md арқылы шаблонға ұқсамайтын сайт

Жобалармен және модельдермен жұмыс істеуге арналған практикалық материалдар: Ailoot құжаттамасы.

Неліктен Claude Code сайттары Tailwind шаблондарына ұқсайды?#

Сипатталған қаңтардағы мысалда шағын қосалқы жоба — суық сатылымдарға арналған қоңырау тергіші жасалып жатқан. Бос репозиторийде Claude Code-тан басты бетті құрастыру сұралды. Нәтиже жалпылама болды: күңгірт slate-950 фон, purple-500 акценті, қалың sans-serif тақырып және астында көлеңкелері бірдей үш карточка. Дәл ChatGPT-тің алғашқы шығарылымындағы, Lovable-дің алғашқы шығарылымындағы және v0-дің алғашқы шығарылымындағы орналасу. «Заманауи», «премиум» және «басқаларға ұқсамасын» деген сөздерді қосып, сұрау мәтіні бес рет өзгертілгеннен кейін де ештеңе өзгермеді. Бет әлі Tailwind UI Templates жиынтығынан алынғандай көрінді.

Яғни Claude әдемі нәрсе жасауды «білмейді» емес. Ол көпшілік не істейтінін біледі де, сол басым үлгіні қайталайды. Орташа нәтижеден тыс шығу үшін агентке нақты шектеулер қажет: қандай түстерді, қандай қаріптер мен аралықтарды қолдану керек, қай компоненттерді үлгі ретінде алу керек.

Дизайн жүйесі контекст ретінде осы жерде керек. «Әдемі етіп жаса» емес, «мына нақты стильде жаса; міне оның параметрлері».

Refero Styles осы олқылықтың орнын нақты өнімдерден алынған параметрлері бар дайын DESIGN.md файлы арқылы толтырады.

Refero Styles дегеніміз не?#

styles.refero.design басты бетінде бұл тура айтылады: «жетекші өнім сайттарынан алынған, AI агенттері оқи алатын 2,000+-ден астам дизайн жүйесін ашыңыз». Каталогта визуалды стандарт қалыптастырған брендтер бар: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Бұлар қолмен алынбайды — Refero командасы сайттың нақты CSS-і мен белгілеуін талдайтын скрипт жүргізіп, нәтижесін құрылымды markdown түрінде жинақтайды. styles.refero.design кітапханасының өзі тегін.

Мұндағы негізгі сөз — «құрылымды». Файлда скриншоттар да, «минималистік стильде» деген сипаттама да жоқ. Онда нақты hex түстері, pt-пен берілген дәл қаріп өлшемдері, аралық бірліктері және компоненттер ережелері бар markdown жазылған. AI агенті талғамды сөзбен сипаттауға тырыспай, осы нақты мәндермен жұмыс істейді.

Refero командасы ai-agents бетінде қолдайтын құралдарын «Cursor, Claude Code, Codex, v0 және Lovable» деп көрсетеді. Басқаша айтқанда, DESIGN.md — негізгі AI әзірлеу агенттеріне жарайтын әмбебап артефакт, яғни бір файл.

DESIGN.md ішінде не бар?#

Refero командасы design-md-template бетінде файл құрылымын былай сипаттайды:

Файлдың құрылымы әдетте мынадай болады:

Жасаушылар AI дизайнындағы мәселелердің 80%-ын шешетін қағиданы да атап өтеді:

Яғни #5E6AD2 hex коды «Linear сияқты» дегеннен нақтырақ. font-size: 13px / line-height: 18px деген дәл мән «ықшам мәтіннен» нақтырақ. Нақты мәндер жорамалдан басым.

Репозиторийдегі DESIGN.md — командаға арналған сурет емес. Ол жобаңыздың тұрақты контекстінің құрылыс бөлшегі: AI әр сұраумен бірге оқитын құрылымды білім.

Linear стиліндегі сайтты 4 қадамда қалай жасауға болады?#

Жаңа сайтты бастауға арналған сипатталған реттілік осы төрт қадамнан тұрады. Жалпы «төрт қадам» емес, әр қадамда бір әрекеті бар нақты реттілік.

1. Claude Code орнату

   Бір пәрменмен орнататын нативті орнатқыш: curl -fsSL https://claude.ai/install.sh | bash (ресми құжаттамада ұсынылған әдіс). macOS-та brew install --cask claude-code, Windows-та winget install Anthropic.ClaudeCode жұмыс істейді. Орнатылған болса, нұсқасын тексеріңіз: claude --version (2.1.178+ қажет — осы нұсқада Tool(param:value) рұқсаттары және автоматты режимдегі қауіпті git пәрмендерін бұғаттау енгізілген). Тіркелгіңізге кіріңіз: claude орнату шеберін іске қосады. Claude Code Pro жазылымына кіреді (жылдық төлемде айына $17 немесе ай сайынғы төлемде $20).

2. Refero Styles ашып, бренд таңдау

   https://styles.refero.design сайтына өтіп, каталогты ашыңыз. Таңдаудың басты өлшемі — «сыртқы түрі ұнай ма» деген емес, өнімге қаншалық сәйкес келетіні. SaaS бақылау тақтасын жасап жатырсыз ба? Linear, Vercel және Notion-ды қараңыз. Финтех өнім жасап жатырсыз ба? Stripe, Mercury және Column-ды қараңыз. Мүшелерге арналған өнім жасап жатырсыз ба? Duolingo-ны қараңыз. Бренд карточкасын ашып, “Copy DESIGN.md” түймесін басыңыз.

3. DESIGN.md файлын жобаға контекст ретінде қосу

   Жоба түбірінде docs/DESIGN.md файлын жасап, көшірілген мазмұнды қойыңыз. Содан соң CLAUDE.md файлын ашып, бір жол қосыңыз: @docs/DESIGN.md. Бұл — импорт директивасы: Claude Code сессия басталғанда мазмұнды контекстке жүктейді. CLAUDE.md ішіндегі импорттар туралы толығырақ Claude Code, Codex және Cursor үшін бір нұсқау файлы жөніндегі нұсқаулықтан оқыңыз.

4. Нақты бір бетке сұрау мәтінін беру

   «Әдемі етіп жаса» демеңіз. Нақты жазыңыз: «Контекстегі DESIGN.md файлын пайдаланып, SaaS тапсырмаларын басқару өніміне арналған басты бет құрастыр. Құрылымы: тақырып пен қосымша тақырыбы бар hero, CTA екі түймесі (негізгі және қосымша), төменде белгішелері бар 3 мүмкіндік блогы, содан кейін пікірлер блогы. DESIGN.md ішіндегі түстер мен типографияны дәл қолдан; өзіңдікін ойдан қоспа».

Төртінші қадамнан кейін Claude бетті құрастырады. Сипатталған тәжірибеде басты бетті жасауға орташа есеппен 8–12 минут кетеді — әрі ол таңдалған бренд стиліне шынымен жақын көрінеді. Пиксельге дейінгі дәлме-дәл көшірме емес, бірақ эстетикасы танылады: қаріптер бірдей, палитра бірдей, аралық ырғағы бірдей, түймелердегі шағын шешімдер де ұқсас.

Refero жасаушылары ai-agents/design-resources бетінде осы үш қадамдық қағиданы қысқаша сипаттайды:

Бұл төрт қадамдық реттілік сол логиканы ұстанады, оған Claude Code орнату және файлды CLAUDE.md ішіне импорттау деген нақты қадамдар қосылған.

Өніміңіз үшін қай стильді таңдау керек?#

Refero жасаушылары нұсқаулығының алғашқы қадамында-ақ осындай кеңес береді: сілтеме үлгісін тек бренд атауына қарап емес, тығыздығын, үнін және аудиториясын ескеріп таңдаңыз.

Іс жүзінде бұл нені білдіреді? Apple негізіндегі түстер, типография, иерархия және ұстамды қозғалыс SaaS дашбордына жарай алады, ал нақты өнімнің маркетинг бетіндегі кең аралықтар жарамауы мүмкін. Бренд атауымен таңдамай, нақты үлгіні қараңыз. Бухгалтерлік дашбордта сандар мен басқару элементтерінің оқылымдылығын сақтап, ықшам жол биіктігін, аралықтарды және ақпарат тығыздығын анық орнатыңыз; кең таныстырылым макетін өзгеріссіз көшірмеңіз.

Өнім түріне қарай таңдау жөніндегі қарапайым нұсқаулық:

Әлі де күмәніңіз болса, Linear-ды таңдаңыз. Оның негізі барынша әмбебап: бейтарап палитра, оқуға ыңғайлы типография (Inter / Söhne) және ұстамды аралықтар. Linear негізіндегі сайт өнім түрлерінің 10-ның 9-ына кәсіби көрініс береді.

DESIGN.md файлын жобаның тұрақты контекстіне не үшін қосу керек?#

Сипатталған тәжірибеде AI агенттерімен басқарылатын әр жобада DESIGN.md файлы CLAUDE.md файлының жанында сақталады. Бұл файл «бір тапсырмаға арналған уақытша нәрсе» деп саналмайды. Ол — барлық келесі сессия сүйенетін тұрақты канон. Бір айдан кейін Claude-тан жобаға жаңа бет қосуды сұрасаңыз, ол сол DESIGN.md файлын ашып, сол стильде құрастырады. Алты айдан кейін жобаны басқа команда мүшесіне тапсырсаңыз, ол да Claude-ты іске қосып, бірізді нәтиже ала алады, өйткені DESIGN.md репозиторийде бар.

Дизайнда бұл қағида былай жұмыс істейді: палитра, типография және аралық ырғағы туралы шешім бір рет қабылданады. Одан кейін әр AI агенті оны өзгермейтін негіз ретінде қабылдайды.

Яғни дизайн код түрінде өмір сүреді (markdown — код), AI оқи алмайтын Figma файлы түрінде емес. Дизайн репозиторийдегі файлда тұрса, оны Claude Code та, Codex те оқиды және болашақтағы кез келген құрал оқи алады. Ал дизайн Figma-да болса, ол бөлек кеңістікте қалып, әр сессия үшін қолмен аударылуы керек.

Сипатталған қосалқы жобаларда мына құрылым қолданылған:

project/
├── CLAUDE.md            (импорттайды: @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (визуалды канон, Refero-дан көшірілген)
│   ├── ARCHITECTURE.md  (жоба құрылымы)
│   └── BRAND.md         (бренд үні, сөздік қоры)
└── ...

Бұл үш файл — жобаның тұрақты контекстін ұйымдастырудың бір жолы. DESIGN.md визуалды, ARCHITECTURE.md құрылымды, ал BRAND.md үн мен мәнерді қамтиды. Репозиторийге қол жеткізе алатын кез келген AI агенті үшеуін де контекст ретінде алады.

Refero MCP және refero_skill дегеніміз не?#

Refero Styles — бастапқы қабат (файл түріндегі DESIGN.md). Келесі толқын — AI агенттеріне кітапханаға «табиғи» қол жеткізуге мүмкіндік беретін интеграциялар.

Refero MCP (ресми). Бұл — https://api.refero.design/mcp мекенжайындағы сервер API; Claude Code оған bearer token арқылы қосылады. Содан кейін агент нақты өнімдерден алынған 150,000+-ден астам экран мен 6,000+-ден астам пайдаланушы ағынына қол жеткізеді. Оны skill арқылы орнатуға болады:

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

Орнатылғаннан кейін Claude әр сессияның басында «дизайн зерттеуін» міндетті алғашқы қадам ретінде бастайды: тапсырмаға қандай визуалды шешімдер сәйкес келетінін қарап, қажет болса, таңдалған сілтеме үлгісіне негізделген үш бағыт ұсынады. 2026 жылғы 23 маусымдағы жағдай бойынша refero_skill репозиторийінде 67 commit және 135 жұлдызша бар. Бұл — белсенді әзірленіп жатқан жаңа өнім.

Сипатталған тәжірибеде қарапайым тәсіл қолданылады: сайтты қолмен ашып, DESIGN.md файлын көшіріп, файлға салыңыз. Дизайн жүйелерімен жұмыс күнделікті іске айналғанда MCP пайдалы болады — мысалы, бірнеше клиент жобасын қатар басқарып, визуалды канондарды күн сайын ауыстырып отырсаңыз. MCP серверлерін Claude Code-қа қосу туралы толығырақ NotebookLM және MCP жөніндегі нұсқаулықтан қараңыз.

Жұмыс барысын қандай 4 қате бұзады?#

Дизайн контекстімен жұмыс істеудің сипатталған тәжірибесінде осы төрт қате жиі кездеседі. Әрқайсысы зиянсыз көрінгенімен, нәтижені қайтадан стандартты Tailwind шаблонына әкеледі.

1-қате. «Заманауи етіп жаса» деген сұрау мәтіні. Бұл — ең жиі кездесетін қате үлгісі. Адамдар Claude Code-ты ашып, «маған SaaS сайты керек, заманауи стильде, премиум көрініс бер» деп жазады. Олар қараңғы фон мен күлгін акцент алады. Оқу деректерінде «заманауи» сөзі бірдей шаблоннан жасалған 2022–2024 жылдардағы лендингтермен байланысты. DESIGN.md файлындағы дәл параметрлер болмаса, «заманауи» деген «орташа» дегенді білдіреді.

2-қате. DESIGN.md файлын чатқа хабарлама ретінде қою. Кейде адамдар DESIGN.md файлын Claude Code чатына көшіріп, «міне стиль, соны қолдан» дейді. Бұл сессия аяқталғанға дейін бір рет жұмыс істейді. Жаңа сессия ашсаңыз (немесе басқа тапсырмаға ауысып, /clear орындасаңыз), контекст жоғалады. Стильдің сақталғанын қаласаңыз, файл репозиторийде болып, CLAUDE.md ішіне импортталуы керек. CLAUDE.md неліктен тұрақты контексттің негізі екені туралы толығырақ Claude жады жөніндегі нұсқаулықтан оқыңыз.

3-қате. Стильді «өзіңізге ұнағаны» үшін таңдау. Apple-дың кең маркетинг үлгісін экранда 30 нысан қажет жылжымайтын мүлік дашбордына өзгеріссіз көшіру нашар макет таңдауы болуы мүмкін. Бұл Apple негізіндегі типографияны, палитраны не иерархияны жоққа шығармайды: аралық пен жол тығыздығын тапсырмаға бейімдеп, мақсатты экран өлшемінде нақты қанша ақпарат көрінетінін тексеріңіз. Нақты үлгіні тек брендіне емес, тығыздығына, үніне және аудиториясына қарай таңдаңыз.

4-қате. Сұрау мәтінінің өзінде DESIGN.md файлын атамау. DESIGN.md репозиторийде, CLAUDE.md арқылы импортталған, агентке көрініп тұрған болуы мүмкін. Бірақ сұрауда «сайт жаса» делінсе, Claude файлға сілтеме жасамай, стандартты жолмен кетуі ықтимал. Дизайны бар әр сұрауға мына жолды қосу пайдалы: «docs/DESIGN.md ішіндегі түстерді, қаріптерді және аралықтарды дәл қолдан. Өз мәндеріңді ойдан қоспа — файлдан ал». Бұл агенттің DESIGN.md файлын айналып өтпей, пайдалануын қамтамасыз етеді.

Нақты токендер — hex кодтары, pt-пен берілген қаріп өлшемдері және DESIGN.md ішіндегі аралық бірліктері. Табиғи тіл дегеніміз — «заманауи», «премиум», «таза» немесе «Apple сияқты». Нақты токендер жұмыс істейді, еркін сөздер — жоқ.

Әрі қарай не істеу керек?#

Енді сізде негізгі жұмыс барысы бар: Claude Code + Refero-дан алынған DESIGN.md + 4 қадам = шаблонға ұқсамайтын сайт. Бұл қажеттіліктердің 70%-ын қамтиды. Қалған 30%-ында көбірек дәлдік, жылдамдық немесе тексеру керек болады.

Негіздерді меңгергеннен кейін жалғастыруға болатын үш бағыт:

1. Frontend Design Skill. Бұл — Claude Code-қа визуалды кері байланыс қосатын ресми skill. Агент Puppeteer көмегімен жиналған беттің скриншотын түсіріп, оны өзінің «көзімен» (көру моделін пайдаланып) қарап, DESIGN.md-пен салыстырады да, түзетулерді өзі ұсынады. Бұл — автоматтандырылған «сұрау мәтіні → код → скриншот → сын → сұрау мәтіні» циклі. Күрделі бетті бір айналымда дұрыс жасау қиын болғанда пайдалы.

2. Өндірістік режимдегі Refero MCP. 3–5 жобаны қатар басқарғанда әрқайсысына DESIGN.md файлын қолмен қосу жалықтырады. Refero MCP жоба сипаттамасы бойынша 3 сәйкес стиль тауып, таңдауды ұсына алады. Ол жаңа жобаны бастау уақытын 30 минуттан 3 минутқа қысқартады.

3. Контекст инженериясымен біріктіру. DESIGN.md — контекст артефакттарының бірі. Онымен бірге әдетте ARCHITECTURE.md (жоба құрылымы), BRAND.md (бренд үні) және business/audience.md (мақсатты аудитория) болады. Олардың барлығы CLAUDE.md ішіне импортталады. Claude бет жасағанда визуалға, аудиторияға және өнім құрылымына сүйенеді. Негізінде, бұл — контекст инженериясы, яғни сұрау жібермес бұрын агентке берілетін материалдармен жүйелі жұмыс.

Практикалық материалдар: Ailoot құжаттамасы.

Практикалық материалдар: Ailoot құжаттамасы.

Қосымша материалдар мен құралдар: Ailoot.