Claude Code va Refero DESIGN.md bilan shablonga o‘xshamaydigan sayt

Loyihalar va modellar bilan ishlashga oid amaliy materiallar: Ailoot hujjatlari.

Nega Claude Code saytlari Tailwind shablonlariga o‘xshaydi?#

Ta’riflangan yanvar misolida kichik yon loyiha — sovuq savdo qo‘ng‘iroqlari tizimi yaratilayotgan edi. Bo‘sh repozitoriyda Claude Code’dan bosh sahifa yaratish so‘raldi. Natija umumiy ko‘rinishda edi: slate-950 qoramtir fon, purple-500 urg‘u rangi, qalin sans-serif sarlavha va tagida bir xil soyali uchta karta. ChatGPT’ning ilk versiyasi, Lovable’ning ilk versiyasi va v0’ning ilk versiyasidagi maket bilan bir xil. “Zamonaviy”, “premium” va “boshqalarga o‘xshamasin” degan iboralarni qo‘shib, so‘rovni besh marta tahrirlash ham hech narsani o‘zgartirmadi. Sahifa hanuz Tailwind UI Templates to‘plamidan olingandek ko‘rinardi.

Demak, Claude chiroyli narsa yaratishni “bilmaydi” degani emas. U ko‘pchilik nima qilishini biladi va o‘sha ko‘pchilikka ergashadi. O‘rtachadan farqli natija olish uchun agentga aniq cheklovlar kerak: qaysi ranglardan, shriftlardan, oraliqlardan foydalanish va qaysi komponentlarni asosiy deb qabul qilish kerakligi.

Dizayn tizimi kontekst sifatida aynan shu yerda kerak bo‘ladi. “Chiroyli qil” emas, “mana bu aniq uslubda qil; parametrlari mana bular”.

Refero Styles bu bo‘shliqni tayyor material — haqiqiy mahsulotlar parametrlari yozilgan DESIGN.md fayli bilan to‘ldiradi.

Refero Styles nima?#

styles.refero.design bosh sahifasida bu ochiq aytilgan: “yetakchi mahsulot saytlaridan AI agentlar o‘qiy oladigan 2,000 dan ortiq dizayn tizimini kashf eting.” Katalogda vizual standartni belgilovchi brendlar bor: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Ular qo‘lda olinmaydi — Refero jamoasi saytning haqiqiy CSS va belgilash kodini tahlil qiladigan skriptni ishga tushirib, natijani tuzilgan markdown formatiga jamlaydi. styles.refero.design kutubxonasining o‘zi bepul.

Asosiy so‘z — “tuzilgan”. Faylda skrinshotlar ham, “minimalistik uslubda” kabi ta’riflar ham yo‘q. Unda aniq hex ranglar, pt’da ko‘rsatilgan shrift o‘lchamlari, oraliq birliklari va komponentlar uchun qoidalar yozilgan markdown bor. AI agent bu faylni o‘qib, didni so‘z bilan tasvirlashga urinish o‘rniga aniq qiymatlar asosida ishlaydi.

Refero jamoasi ai-agents sahifasida qo‘llab-quvvatlanadigan vositalarni “Cursor, Claude Code, Codex, v0 va Lovable” deb sanaydi. Boshqacha aytganda, DESIGN.md universal material sifatida ishlaydi — barcha asosiy AI dasturlash agentlariga mos keladigan bitta fayl.

DESIGN.md ichida nimalar bor?#

Refero jamoasi design-md-template sahifasida fayl tuzilishini quyidagicha tasvirlaydi:

Odatda fayl tuzilishi quyidagicha bo‘ladi:

Yaratuvchilar AI dizaynidagi muammolarning 80% ini hal qiladigan tamoyilni ham ta’kidlaydi:

Ya’ni, #5E6AD2 hex kodi “Linear’ga o‘xshat” deganidan kuchliroq. font-size: 13px / line-height: 18px aniq qiymati “ixcham matn” deganidan kuchliroq. Aniqlik talqindan ustun.

Repodagi DESIGN.md jamoa uchun rasm emas. U loyihangiz doimiy kontekstining qurilish bo‘lagi: AI har bir so‘rovda o‘qiydigan tuzilgan bilim.

Linear uslubida saytni 4 qadamda qanday yaratish mumkin?#

Yangi saytni boshlash uchun tasvirlangan ketma-ketlik shu to‘rt qadamdan iborat. Bu shunchaki “umuman olganda to‘rt qadam” emas, har bir qadamda bittadan amal bo‘lgan aniq ketma-ketlik.

1. Claude Code’ni o‘rnating

   Bir buyruqli mahalliy o‘rnatuvchi: curl -fsSL https://claude.ai/install.sh | bash (rasmiy hujjatlardagi tavsiya etilgan usul). macOS’da brew install --cask claude-code ishlaydi; Windows’da winget install Anthropic.ClaudeCode. Agar avvaldan o‘rnatilgan bo‘lsa, versiyasini tekshiring: claude --version (2.1.178+ kerak — bu versiyada Tool(param:value) ruxsatlari va auto rejimida xavfli git buyruqlarini bloklash joriy qilingan). Hisobingizga kiring: claude sozlash ustasini ishga tushiradi. Claude Code Pro obunasiga kiritilgan (yillik to‘lovda oyiga $17 yoki oydan oyga to‘lovda $20).

2. Refero Styles’ni oching va brend tanlang

   https://styles.refero.design saytiga o‘ting va katalogni oching. Asosiy tanlov mezoni — uning mahsulotingizga qanchalik mosligi, “ko‘rinishi sizga yoqadimi” degan savol emas. SaaS boshqaruv panelini yaratyapsizmi? Linear, Vercel va Notion’ni ko‘ring. Fintech mahsulotimi? Stripe, Mercury va Column’ni ko‘ring. A’zolar uchun mahsulotmi? Duolingo’ni ko‘ring. Brend kartasini ochib, “Copy DESIGN.md” tugmasini bosing.

3. DESIGN.md’ni loyihaga kontekst sifatida joylang

   Loyiha ildizida docs/DESIGN.md faylini yarating va ko‘chirilgan tarkibni joylang. So‘ng CLAUDE.md faylini ochib, bitta qator qo‘shing: @docs/DESIGN.md. Bu import ko‘rsatmasi — Claude Code seans boshlanganda fayl mazmunini kontekstga yuklaydi. CLAUDE.md’dagi importlar haqida batafsil ma’lumotni Claude Code, Codex va Cursor uchun bitta ko‘rsatmalar fayli bo‘yicha qo‘llanmadan o‘qing.

4. Muayyan sahifa uchun so‘rov yozing

   “Chiroyli qil” demang. Aniq yozing: “Kontekstdagi DESIGN.md’dan foydalanib, SaaS vazifalarni boshqarish mahsuloti uchun bosh sahifa yarating. Tuzilishi: sarlavha va kichik sarlavhali hero, ikkita CTA tugmasi (asosiy va ikkilamchi), pastida belgilar bilan 3 ta xususiyat bloki, so‘ng tavsiyalar bloki. DESIGN.md’dagi ranglar va tipografiyadan aynan foydalaning; o‘zingizcha qiymatlar o‘ylab topmang.”

To‘rtinchi qadamdan keyin Claude sahifani yaratadi. Ta’riflangan tajribada bosh sahifa o‘rtacha 8–12 daqiqada tayyor bo‘ladi va tanlangan brend uslubiga chindan ham yaqin ko‘rinadi. Pikselma-piksel nusxa emas, ammo taniqli estetika: bir xil shriftlar, palitra, oraliq ritmi va tugmalardagi mayda qarorlar.

Refero yaratuvchilari shu uch qadamli tamoyilni ai-agents/design-resources sahifasida biroz qisqaroq tasvirlaydi:

Bu to‘rt qadamli ketma-ketlik xuddi shu mantiqqa asoslangan, faqat Claude Code’ni o‘rnatish va faylni CLAUDE.md’ga import qilish qadamlari aniq qo‘shilgan.

Mahsulotingiz uchun qaysi uslubni tanlash kerak?#

Refero yaratuvchilari bu maslahatni qo‘llanmaning birinchi qadamidayoq beradi: namunani faqat brend nomiga emas, zichlik, ohang va auditoriyaga qarab tanlang.

Apple’dan olingan rang, tipografiya, iyerarxiya va bosiq harakat SaaS paneliga mos kelishi mumkin; muayyan marketing sahifasining katta bo‘shliqlari esa mos kelmasligi mumkin. Brend nomi emas, aniq namunani tekshiring. Hisob-kitob panelida o‘qiladigan raqam va boshqaruvlarni saqlab, ixcham qator balandligi, oraliq va axborot zichligini aniq belgilang. Keng taqdimot maketini o‘zgartirmay ko‘chirmang.

Mahsulot turini tanlash bo‘yicha sodda qo‘llanma:

Hali ham ikkilansangiz, Linear’ni tanlang. Unda eng universal asos bor: neytral palitra, o‘qilishi qulay tipografiya (Inter / Söhne) va bosiq oraliqlar. Linear asosida yaratilgan sayt 10 ta mahsulot turidan 9 tasida professional ko‘rinadi.

Nega DESIGN.md faylini loyihaning doimiy kontekstiga qo‘shish kerak?#

Ta’riflangan amaliyotda DESIGN.md AI agentlari bilan boshqariladigan har bir loyihada CLAUDE.md yonida saqlanadi. Bu fayl “bitta vazifa uchun vaqtinchalik” deb qaralmaydi. Bu barcha kelgusi seanslar tayanadigan doimiy mezondir. Bir oy o‘tib, Claude’dan loyihaga yangi sahifa qo‘shishni so‘rashingiz mumkin — u o‘sha DESIGN.md’ni ochib, shu uslubda yaratadi. Olti oy o‘tib, loyihani boshqa jamoa a’zosiga topshirishingiz mumkin — u ham Claude’ni ishga tushirib, izchil natija oladi, chunki DESIGN.md repoda bor.

Dizaynda bu tamoyil shunday ishlaydi: palitra, tipografiya va oraliq ritmi haqida qaror bir marta qabul qilinadi. Shundan keyin har bir AI agent buni tayyor qoida sifatida qabul qiladi.

Ya’ni dizayn kod sifatida yashaydi (markdown — kod), AI o‘qiy olmaydigan Figma fayli sifatida emas. Dizayn repodagi faylda bo‘lsa, uni Claude Code ham, Codex ham, kelajakdagi istalgan vosita ham o‘qiy oladi. Dizayn Figma’da bo‘lsa, u alohida muhitda qoladi va har bir seans uchun qo‘lda tarjima qilinishi kerak.

Ta’riflangan yon loyihalarda mana shu tuzilma ishlatilgan:

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

Bu uch fayl loyihaning doimiy kontekstini tartibga solish usullaridan biridir. DESIGN.md vizuallarni, ARCHITECTURE.md tuzilmani, BRAND.md esa ohangni boshqaradi. Repoga kira oladigan istalgan AI agenti ularning barchasini kontekst sifatida oladi.

Refero MCP va refero_skill nima?#

Refero Styles — asosiy qatlam (DESIGN.md fayl sifatida). Keyingi bosqich — kutubxonadan foydalanishni AI agentlari uchun “mahalliy” qiladigan integratsiyalar.

Rasmiy Refero MCP. Bu https://api.refero.design/mcp manzilidagi server API bo‘lib, Claude Code unga bearer token bilan ulanadi. Shunda agent haqiqiy mahsulotlarning 150,000 dan ortiq ekrani va 6,000 dan ortiq foydalanuvchi oqimidan foydalana oladi. Uni skill orqali o‘rnatish mumkin:

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

O‘rnatilgandan keyin Claude har bir seans boshida “dizayn tadqiqoti”ni majburiy birinchi qadam sifatida boshlaydi: vazifaga qaysi vizual tanlovlar mos kelishini ko‘rib chiqadi va kerak bo‘lsa, tanlangan namunaga tayangan uchta yo‘nalishni taklif qiladi. 2026-yil 23-iyun holatiga ko‘ra, refero_skill repozitoriyasida 67 ta commit va 135 ta yulduz bor. Faol ishlab chiqilayotgan yangi mahsulot.

Ta’riflangan amaliyotda sodda usul qo‘llanadi: saytni qo‘lda ochish, DESIGN.md’ni nusxalash va faylga joylash. Dizayn tizimlari bilan ishlash odatiy holga aylanganda MCP foydali bo‘ladi — masalan, bir nechta mijoz loyihasini boshqarib, har kuni vizual mezonlarni almashtirsangiz. MCP serverlarini Claude Code’ga ulash haqida batafsil ma’lumotni NotebookLM va MCP bo‘yicha qo‘llanmadan o‘qing.

Jarayonni qaysi 4 ta xato buzadi?#

Dizayn konteksti bilan ishlash tajribasida shu to‘rt xato ko‘p uchraydi. Har biri beozordek tuyuladi, ammo natijani yana standart Tailwind shabloniga qaytaradi.

1-xato. “Zamonaviy qil” degan so‘rov. Bu eng ko‘p uchraydigan xato. Odamlar Claude Code’ni ochib, “menga zamonaviy uslubdagi, premium ko‘rinishli SaaS sayti yarat” deb yozadi. Natijada qoramtir fon va binafsha urg‘u rangi chiqadi. O‘quv ma’lumotlarida “zamonaviy” so‘zi bir xil shablondan qurilgan 2022–2024-yillardagi barcha landing sahifalar bilan bog‘liq. DESIGN.md’dan olingan aniq parametrlarsiz “zamonaviy” degani “o‘rtacha” bo‘ladi.

2-xato. DESIGN.md’ni chatga xabar qilib tashlash. Ba’zan odamlar DESIGN.md’ni Claude Code chat oynasiga ko‘chirib, “mana uslub, shundan foydalan” deydi. Bu faqat seans tugaguncha ishlaydi. Yangi seans oching (yoki boshqa vazifaga o‘ting, /clear) — kontekst yo‘qoladi. Uslub saqlanib qolishini istasangiz, fayl repoda bo‘lishi va CLAUDE.md ichiga import qilinishi kerak. CLAUDE.md doimiy kontekst manbai ekanligi haqida batafsil ma’lumotni Claude xotirasi bo‘yicha qo‘llanmadan o‘qing.

3-xato. Uslubni “yoqqani” uchun tanlash. Keng Apple marketing namunasi ekranda 30 obyekt talab qiladigan ko‘chmas mulk paneliga o‘zgartirmay ko‘chirish uchun mos kelmasligi mumkin. Bu Apple tipografiyasi, palitrasi yoki iyerarxiyasini istisno qilmaydi. Oraliq va qator zichligini vazifaga moslab, kerakli ekran o‘lchamida haqiqatan qancha axborot ko‘rinishini tekshiring. Aniq namunani faqat brend emas, zichlik, ohang va auditoriyaga qarab tanlang.

4-xato. So‘rovning o‘zida DESIGN.md’ni tilga olmaslik. DESIGN.md repoda bo‘lishi, CLAUDE.md orqali import qilinishi va agentga ko‘rinib turishi mumkin. Ammo so‘rovda “sayt yarat” deyilgan bo‘lsa, Claude faylni aniq tilga olmasdan odatdagi yo‘ldan ketishi mumkin. Har bir dizayn so‘rovida mana bu jumla foydali: “docs/DESIGN.md’dagi ranglar, shriftlar va oraliqlardan aynan foydalaning. O‘zingizcha qiymatlar o‘ylab topmang — ularni fayldan oling.” Bu agent DESIGN.md’dan foydalanishini, uni chetlab o‘tmasligini ta’minlaydi.

Aniq tokenlar — hex kodlar, pt’dagi shrift o‘lchamlari va DESIGN.md’dagi oraliq birliklari. Tabiiy til esa “zamonaviy”, “premium”, “toza” yoki “Apple’ga o‘xshash” degani. Aniq tokenlar ishlaydi, erkin ifodalangan so‘zlar esa yo‘q.

Keyin nima qilish kerak?#

Endi sizda asosiy ish jarayoni bor: Claude Code + Refero’dan olingan DESIGN.md + 4 qadam = shablonga o‘xshamaydigan sayt. Bu ehtiyojlarning 70% ini qoplaydi. Qolgan 30% esa yanada yuqori aniqlik, tezlik yoki tekshiruv kerak bo‘ladigan holatlardir.

Asoslarni o‘zlashtirgandan keyin rivojlantirish mumkin bo‘lgan uch yo‘nalish:

1. Frontend Design Skill. Bu Claude Code uchun vizual fikr-mulohaza qo‘shadigan rasmiy skill. Agent Puppeteer yordamida yig‘ilgan sahifaning skrinshotini oladi, uni o‘z “ko‘zlari” (vision modeli) bilan ko‘radi, DESIGN.md bilan solishtiradi va tuzatishlarni o‘zi taklif qiladi. Bu avtomatlashtirilgan “so‘rov → kod → skrinshot → tanqid → so‘rov” siklidir. Sahifa murakkab bo‘lib, uni bir urinishda to‘g‘ri qilish imkoni bo‘lmaganda foydali.

2. Refero MCP’ni ishlab chiqarish rejimida ishlatish. Bir vaqtning o‘zida 3–5 ta loyihani boshqarsangiz, har biriga DESIGN.md’ni qo‘lda qo‘shish zerikarli bo‘ladi. Refero MCP loyiha tavsifiga ko‘ra mos keladigan 3 ta uslubni topib, tanlashni taklif qila oladi. Bu yangi loyiha boshlash vaqtini 30 daqiqadan 3 daqiqagacha qisqartiradi.

3. Kontekst muhandisligi bilan birlashtirish. DESIGN.md — kontekst materiallaridan biri. Uning yonida odatda ARCHITECTURE.md (loyiha tuzilishi), BRAND.md (brend ovozi) va business/audience.md (maqsadli auditoriya) bo‘ladi. Ularning barchasi CLAUDE.md ichiga import qilinadi. Claude sahifa yaratayotganda vizuallar, auditoriya va mahsulot tuzilishiga tayanadi. Aslida, bu kontekst muhandisligi — so‘rovdan oldin agentga beriladigan narsalar ustida tizimli ishlashdir.

Amaliy materiallar: Ailoot hujjatlari.

Amaliy materiallar: Ailoot hujjatlari.

Ko‘proq materiallar va vositalar: Ailoot.