Claude Code Dashboard Design ko‘nikmasi bilan yanada toza va halol dashboardlar yarating

Dashboard dizayni nima?

Dashboard Design — analitika, daromad va metrikalar interfeyslarini yaratishda kod yozuvchi agentga amaliy dizayn yo‘riqnomalarini beruvchi Claude Code ko‘nikmasidir. U yangi dashboardlar yaratishi, mavjud ekranlarni qayta dizaynlashi yoki skrinshotni tahlil qilib, muammolarni jiddiylik darajasiga ko‘ra tartiblashi mumkin.

Ushbu yo‘riqnomalar ishga chiqarilgan 127 ta dashboard ekrani, daromad analitikasi mahsulotining batafsil tahlili va haqiqiy qayta dizayn jarayoni asosida ishlab chiqilgan. Ko‘nikma faqat kod sifatiga e’tibor qaratish bilan cheklanmaydi: agent foydalanuvchilar amalda ko‘radigan natijani baholashi uchun ishni skrinshot orqali QA tekshiruvi bilan yakunlaydi.

Ko‘nikma KPI kataklari, grafiklar, taqqoslash davrlari, tartiblangan ro‘yxatlar, filtrlar, sana oralig‘i tanlagichlari, insightlar, bo‘sh holatlar, moslashuvchan maketlar va telefondagi navigatsiya kabi keng tarqalgan dashboard elementlarini qamrab oladi. Uning spetsifikatsiyalarida veb-loyihalar uchun Tailwind va React atamalaridan foydalaniladi, alohida ma’lumotnomada esa SwiftUI va Swift Charts uchun ekvivalent yondashuvlar tushuntiriladi.

Asosiy dizayn tamoyillari

Loyiha tavsiyalarini to‘rtta tamoyil asosida tashkil qiladi:

• Birinchi qarash: Har bir ekran taxminan uch soniya ichida bitta asosiy savolga javob berishi kerak.
• Sokinlik: Bitta aksent rangdan foydalaning, yordamchi elementlarni kulrang saqlang va rangni faqat ma’no bildirganda qo‘llang.
• Halollik: Interfeys bo‘ylab qiymatlarni izchil saqlang, taxminlarni belgilang va kichik namunalar asosida foizlardagi keskin o‘zgarishlardan saqlaning.
• Matndan ko‘ra shakl: Tez tushunish uchun grafiklar, chiziqlar va chiplarni afzal ko‘ring, ta’riflarni esa tooltiplarda joylashtiring.

Ushbu tamoyillar aniq o‘zgarishlarga olib keladi. Tanlangan KPI katagi oddiy tagchiziq o‘rniga yumshoq tusli fon va nozik halqa bilan ajratiladi. Tartiblangan qatorlarda katta tusli fonlar o‘rniga ingichka ulush chiziqlari ishlatiladi. Grafik o‘qlari 1,402 kabi noqulay qiymatlar o‘rniga 0, 1k va 2k kabi o‘qilishi qulay, yaxlit belgilardan foydalanadi.

Qotirilgan ustunlar o‘rniga moslashuvchan maketlar

Tor markaziy ustun asosida yaratilgan dashboard katta ekranlarda bo‘sh joyni isrof qiladi. Dashboard Design agentga ekran kengaygani sari foydali ustunlar qo‘shishni, kichik ekranlarda esa boshqaruv elementlari va navigatsiyani qayta tashkil qilishni ko‘rsatadi.

Oldin

Keyin

Telefonlarda ko‘nikma yon tomonga suriladigan navigatsiya tablariga tayanishdan saqlanadi. U mavjud joyga moslasha oladigan menyu panjarasi va kichrayadigan tablar kabi maketlarni tavsiya qiladi.

O‘rnatish

1-variant: Claude Code plagin sifatida o‘rnatish

Claude Code ichida loyihani plagin marketplace sifatida qo‘shing va keyin ko‘nikmani o‘rnating:

/plugin marketplace add abdiraimov-otabek/dashboard-design-skill
/plugin install dashboard-design@dashboard-design-skill

Claude Code asosiy kod yozuvchi agentingiz bo‘lsa, bu eng to‘g‘ridan-to‘g‘ri o‘rnatish usulidir.

2-variant: Oddiy Claude ko‘nikmasi sifatida o‘rnatish

Reponi klonlang va uning ko‘nikma katalogini mahalliy Claude ko‘nikmalari papkangizga nusxalang:

git clone https://github.com/abdiraimov-otabek/dashboard-design-skill
cp -r dashboard-design-skill/skills/dashboard-design ~/.claude/skills/

Nusxalangan katalogda ko‘nikma uchun zarur bo‘lgan asosiy yo‘riqnomalar va barcha yordamchi ma’lumotnomalar mavjud.

3-variant: Boshqa kod yozuvchi agent bilan foydalanish

Loyiha Codex, Cursor yoki Markdown yo‘riqnoma fayllarini o‘qiydigan boshqa agent bilan ham ishlashi mumkin. Agentning AGENTS.md yoki qoidalar faylini quyidagiga yo‘naltiring:

skills/dashboard-design/SKILL.md

Asosiy ko‘nikma hujjati agentni tegishli ma’lumotnomalarga yo‘naltiradi. Qoidalar umumiy interfeys andozalarini tavsiflagani sababli, ularni React, Tailwind va SwiftUI’dan boshqa texnologik steklarga ham moslashtirish mumkin.

Ko‘nikma fayllarini tushunish

Repozitoriy o‘z ish jarayonini batafsil ma’lumotnomalardan ajratadi:

• SKILL.md ish jarayoni, tanqid formati, umumiy qoidalar, uslub standartlari va yakunlash tekshiruvlarini o‘z ichiga oladi.
• references/components.md KPI plitkalari, o‘zgarishlar, sparklinelar, diagrammalar, reytinglangan ro‘yxatlar, filtrlar, jadvallar, bo‘sh holatlar, real vaqt ko‘rinishlari va daromadga ishonch belgilarini qamrab oladi.
• references/layout.md sahifa tartibi, panjaralar, keng ekranlar, telefonlar, tipografiya va qorong‘i rejimni ko‘rib chiqadi.
• references/tokens.md Tailwind v4 @theme yordamida yorug‘ va qorong‘i rang tokenlarini, shuningdek rang tuslarini qo‘llash bo‘yicha yo‘riqnomani taqdim etadi.
• references/snippets.md dumaloq o‘q belgilari, sonlarni formatlash, o‘zgarish nishonlari, taqqoslash oynalari, KPI plitkalari, ingichka chiziqli qatorlar, diapazon kalendarlari va eskirgan javoblardan himoyalanish uchun guard mexanizmlarining implementatsiyalarini o‘z ichiga oladi.
• references/qa.md skrinshot o‘lchamlari, ma’lum jami qiymatlarni tekshirish, izchillik tekshiruvlari va keng tarqalgan dizayn kamchiliklarini belgilaydi.
• references/swiftui.md ushbu andozalarni SwiftUI va Swift Charts uchun moslashtiradi hamda simulyator orqali QA jarayonini tavsiflaydi.
• references/sources.md o‘rganilgan 40 dan ortiq mahsulot va dizayn tizimlarini qayd etadi.
• references/case-study-datafast.md daromad tahlili mahsulotidagi andozalar va muvozanatli qarorlarni hujjatlashtiradi.

Ish jarayonining har bir bosqichi tekshirish mumkin bo‘lgan yakunlash ta’rifi bilan tugaydi. Shu sababli bu ko‘nikma nafaqat ilhom manbai, balki takroran qo‘llanadigan ko‘rib chiqish jarayoni sifatida ham foydalidir.

Asosiy foydalanish

O‘rnatilgandan so‘ng, dashboardga oid kod ustida ishlaganingizda ko‘nikma avtomatik ishga tushishi mumkin. Shuningdek, uning xatti-harakatini aniq so‘rov orqali bevosita chaqirishingiz mumkin.

Dashboard yaratish

Mahsulotni tavsiflang va ekran ko‘rsatishi kerak bo‘lgan ko‘rsatkichlarni aniqlang:

Ushbu ilova uchun analytics dashboard yarating: tashrif buyuruvchilar, ro‘yxatdan o‘tishlar, manba bo‘yicha daromad.

Foydali so‘rov agentga aniq mavzu va muhim ko‘rsatkichlarning kichik to‘plamini beradi. Bu loyihaning bir qarashda tushunish tamoyilini qo‘llab-quvvatlaydi, chunki agentga ekran javob berishi kerak bo‘lgan asosiy savolni aniqlashga yordam beradi.

Mavjud dizaynni tanqid qilish

Skrinshot taqdim eting va baholashni so‘rang:

Bu yaxshi dizaynmi?

Tanqid formati xulosa beradi, ishlayotgan jihatlarni aniqlaydi va muammolarni zarar darajasiga ko‘ra tartiblaydi. Ma’lumotlar yaxlitligi ustuvor bo‘lgani sababli, qarama-qarshi raqamlar kichik vizual muammolardan oldin xabar qilinishi kerak.

Bitta komponentni qayta dizayn qilish

To‘liq dashboardni qayta dizayn qilishni so‘rashingiz shart emas. Buning o‘rniga alohida komponentni nishonga oling:

Sana diapazoni tanlagichini qayta dizayn qiling.

KPI plitkalarini yanada soddaroq qiling.

Masalan, ko‘nikma oddiy native sana inputini ko‘rsatish o‘rniga tanlangan sanalar orasidagi yumshoq rangli tasma, to‘liq rangli chekka nuqtalar, davomiylik va Apply amaliga ega diapazon kalendarini ma’qul ko‘radi.

QA tekshiruvini o‘tkazish

Amalga oshirilgan yo‘nalishni tekshirish uchun maxsus dashboard ko‘rib chiqishini so‘rang:

/dashboard uchun dashboard QA tekshiruvini o‘tkazing.

Veb-loyihalar uchun hujjatlashtirilgan skrinshot protokoli uchta viewport kengligini tekshiradi: 3440, 1440 va 375 piksel. Bu o‘ta keng ekranlardagi layout muammolari, odatiy desktop muammolari va telefonga xos nosozliklarni aniqlaydi.

Ko‘nikma qo‘llashga yordam beradigan andozalar

Halol taqqoslashlardan foydalaning

Oldingi qiymat juda kichik bo‘lsa, foizdagi o‘zgarishlar chalg‘itishi mumkin. Agar bitta savdo nolga tushsa, ko‘zga tashlanadigan qizil −100% belgisi o‘zgarish ahamiyatini bo‘rttirib ko‘rsatadi. Buning o‘rniga ko‘nikma avval 1 kabi sokin izohdan foydalanishni tavsiya qiladi.

Izchillik ham muhim. Agar KPI plitkasi, diagramma va jadval bir xil jami qiymatni ifodalasa, bu qiymatlar mos kelishi kerak. QA jarayoni nomuvofiqliklarni aniqlash uchun ma’lum jami qiymat va izchillik tekshiruvlarini o‘z ichiga oladi.

Vaqt oynalarini izchil saqlang

Sparkline asosiy diagramma yoki taqqoslash kontekstidagi davrni ifodalashi kerak. Asosiy diagrammada faol davr qisqaroq bo‘lgan paytda sparklineda asosan bo‘sh 60 kunni ko‘rsatish ko‘rinadigan trendni buzib ko‘rsatishi mumkin.

Faqat foydali tushunchalarni ko‘rsating

Insight kartasi KPI plitkasini takrorlash o‘rniga talqin qo‘shishi kerak. Agar u foydalanuvchiga yangi ma’lumot bermasa, ko‘nikma uni olib tashlash va vizual sokinlikni saqlashni tavsiya qiladi.

Ekran o‘lchamlari o‘sishiga mos dizayn qiling

Kattaroq monitorda faqat belgilangan kenglikdagi dashboardni markazga joylashtirmang. Taqqoslashni yaxshilasa, keng ekranlarda qo‘shimcha ustunlarni ko‘rsatishga imkon bering. Telefonlarda boshqaruv elementlari va navigatsiya gorizontal aylantirishga tayanmasdan qayta joylashishiga ishonch hosil qiling.

Ilg‘or maslahatlar

Tuzilmali yaratish va tanqidni so‘rang

Kutilgan yakunlash mezonlarini aniq saqlagan holda, amalga oshirish va baholashni bitta so‘rovda birlashtirishingiz mumkin:

Daromad dashboardini yarating, takrorlangan jami qiymatlar mos kelishini tekshiring va dashboard skrinshoti uchun QA tekshiruvi bilan yakunlang.

Bu vazifani ko‘nikmaning mo‘ljallangan ish jarayoniga moslaydi: interfeysni amalga oshirish, ma’lumotlar taqdimotini tekshirish, bir nechta ekran o‘lchamlarini ko‘rib chiqish va chizilgan natijani baholash.

Tegishli ma’lumotnomadan bevosita foydalaning

Vazifa tor doirada bo‘lsa, agentni eng tegishli faylga yo‘naltiring. Masalan, o‘zgarish nishonlari yoki reytinglangan qatorlar uchun components.md, o‘ta keng ekran xatti-harakati uchun layout.md va yakuniy vizual tekshiruvlar uchun qa.md faylidan foydalaning. Native Apple interfeyslari uchun veb-snippetlarni aynan ko‘chirish o‘rniga swiftui.md dan foydalaning.

SwiftUI’da accessibility sozlamalarini sinang

SwiftUI QA jarayoni bitta simulyator skrinshotidan ko‘ra kengroqdir. U bir nechta qurilma o‘lchamlarini, eng katta Dynamic Type sozlamasini, qorong‘i rejimni va Reduce Motion funksiyasini o‘z ichiga oladi. Bu tekshiruvlar kesilib qolgan yorliqlar, beqaror karta layoutlari, qorong‘i rejimning yetarli darajada moslashtirilmaganligi va animatsiyaga oid taxminlarni aniqlashga yordam beradi.

Faqat ideal ekranni emas, holatlarni ham ko‘rib chiqing

Komponentlar bo‘yicha yo‘riqnomada bo‘sh holatlar, real vaqt ko‘rinishlari, jadvallar va daromad ma’lumotlari uchun ishonch signallari keltirilgan. Ko‘rib chiqishni so‘raganingizda, mahsulotingiz uchun ayniqsa muhim bo‘lgan holatlarni ayting, shunda agent to‘ldirilgan standart ko‘rinishdan ko‘prog‘ini baholaydi.

Ixtiyoriy yakuniy izohni boshqaring

To‘liq dashboard yaratish yoki tanqidiy tahlilni yakunlagach, ushbu skill har bir suhbatda bir marta uning muallifi va muallifning Mac ilovalari haqida bitta qisqa satr qo‘shadi. Bu matn kod, commitlar yoki mahsulot interfeysi ichiga joylashtirilmaydi. Agentdan uni qo‘shishni to‘xtatishni so‘rashingiz yoki SKILL.md faylidagi Sign-off bo‘limini olib tashlashingiz mumkin.

Xulosa

Dashboard Design dashboard sifatini noaniq estetik afzalliklar to‘plami emas, balki takroran qo‘llash mumkin bo‘lgan agent ish jarayoniga aylantiradi. U amaliy komponent andozalarini, moslashuvchan maket bo‘yicha yo‘riqnomani, ma’lumotlarni halol taqdim etishni, web va SwiftUI ma’lumotnomalarini hamda skrinshotlarga asoslangan QA jarayonini birlashtiradi. Uni Claude Code plagini yoki oddiy skill sifatida o‘rnating, agentga aniq dashboard vazifasini bering va yakunda hujjatlarda ko‘rsatilgan o‘lchamlarda yaratilgan interfeysni ko‘rib chiqing.

Loyiha MIT litsenziyasi ostida taqdim etiladi. Uning dizayn qoidalari haqida qo‘shimcha ma’lumot olish uchun Men 127 ta dashboardni o‘rgandim. Ularning aksariyati sizga sezdirmay yolg‘on gapiradi. maqolasini o‘qing.