Jenga Dashibodi Safi na Zenye Uaminifu Zaidi kwa Ujuzi wa Claude Code wa Kubuni Dashibodi

Muundo wa Dashibodi ni Nini?

Muundo wa Dashibodi ni ujuzi wa Claude Code unaompa wakala wa uandishi wa msimbo mwongozo wa vitendo wa kubuni violesura vya uchanganuzi, mapato na vipimo. Unaweza kuunda dashibodi mpya, kubuni upya skrini zilizopo, au kukosoa picha ya skrini na kupanga matatizo yake kulingana na uzito.

Maelekezo haya yalitokana na skrini 127 za dashibodi zilizokamilishwa, uchambuzi wa kina wa bidhaa ya uchanganuzi wa mapato, na mchakato halisi wa usanifu upya. Badala ya kuzingatia ubora wa msimbo pekee, ujuzi huu hukamilisha kazi zote kwa ukaguzi wa ubora wa picha ya skrini ili wakala atathmini kile ambacho watumiaji wanaona kwa kweli.

Ujuzi huu unashughulikia vipengele vya kawaida vya dashibodi kama vile vigae vya KPI, chati, vipindi vya kulinganisha, orodha zilizopangwa kwa viwango, vichujio, viteuzi vya vipindi vya tarehe, maarifa, hali tupu, miundo inayobadilika kulingana na skrini, na uelekezaji wa simu. Vipimo vyake hutumia istilahi za Tailwind na React kwa miradi ya wavuti, huku rejeleo tofauti likieleza mifumo inayolingana ya SwiftUI na Swift Charts.

Kanuni Kuu za Usanifu

Mradi hupanga mapendekezo yake kuzunguka kanuni nne:

• Mtazamo wa kwanza: Kila skrini inapaswa kujibu swali moja kuu ndani ya takribani sekunde tatu.
• Utulivu: Tumia rangi moja ya msisitizo, weka vipengele vinavyosaidia katika kijivu, na tumia rangi tu inapowasilisha maana.
• Uaminifu: Weka thamani zinazolingana katika kiolesura, bainisha makadirio, na epuka mabadiliko makubwa ya asilimia yanayotokana na sampuli ndogo.
• Umbo badala ya maandishi: Pendelea chati, pau na vibandiko kwa uelewa wa haraka, huku ukiweka fasili katika vidokezo vya zana.

Kanuni hizi huleta mabadiliko yanayoonekana. Kigae cha KPI kilichochaguliwa hupokea ujazo laini wenye tint na pete hafifu badala ya mstari rahisi wa chini. Safu zilizopangwa kwa viwango hutumia pau nyembamba za uwiano badala ya mandharinyuma makubwa yenye tint. Mihimili ya chati hutumia alama za mviringo zinazosomeka kama 0, 1k na 2k badala ya thamani zisizofaa kama 1,402.

Miundo Inayobadilika Badala ya Safu Zisizobadilika

Dashibodi iliyoundwa kuzunguka safu nyembamba ya katikati hupoteza nafasi kwenye skrini kubwa. Muundo wa Dashibodi humwelekeza wakala kuongeza safu zenye manufaa kadiri eneo la skrini linavyopanuka, huku akipanga upya vidhibiti na uelekezaji kwa skrini ndogo.

Kabla

Baada

Kwenye simu, ujuzi huu huepuka kutegemea vichupo vya uelekezaji vinavyohitaji kusogezwa kwa mlalo. Unapendekeza miundo kama gridi ya menyu na vichupo vinavyoweza kupungua ili kutoshea nafasi iliyopo.

Usakinishaji

Chaguo la 1: Sakinisha kama Programu-jalizi ya Claude Code

Ndani ya Claude Code, ongeza mradi kama soko la programu-jalizi kisha usakinishe ujuzi:

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

Hii ndiyo njia ya moja kwa moja zaidi ya usakinishaji wakati Claude Code ni wakala wako mkuu wa uandishi wa msimbo.

Chaguo la 2: Sakinisha kama Ujuzi wa Kawaida wa Claude

Clone hazina na unakili saraka yake ya ujuzi kwenye folda yako ya ndani ya ujuzi wa Claude:

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

Saraka iliyonakiliwa ina maelekezo makuu na marejeleo yote yanayosaidia yanayohitajika na ujuzi huu.

Chaguo la 3: Itumie na Wakala Mwingine wa Uandishi wa Msimbo

Mradi huu unaweza pia kufanya kazi na Codex, Cursor au wakala mwingine anayesoma faili za maelekezo za Markdown. Elekeza faili ya AGENTS.md au faili ya kanuni za wakala kwenye:

skills/dashboard-design/SKILL.md

Hati kuu ya ujuzi humwelekeza wakala kwenye nyenzo zinazofaa za marejeleo. Kwa kuwa kanuni hizi zinaeleza mifumo ya jumla ya violesura, zinaweza kubadilishwa ili zitumike na teknolojia nyingine tofauti na React, Tailwind na SwiftUI.

Kuelewa Faili za Ujuzi

Hazina inatenganisha mtiririko wa kazi na marejeleo yake ya kina:

• SKILL.md ina mtiririko wa kazi, muundo wa ukosoaji, sheria za jumla, mtindo wa uandishi, na ukaguzi wa kukamilika.
• references/components.md inahusu vigae vya KPI, tofauti, sparklines, chati, orodha zilizopangwa, vichujio, majedwali, hali tupu, mwonekano wa wakati halisi, na viashiria vya kuaminika kwa mapato.
• references/layout.md inashughulikia mpangilio wa kurasa, gridi, skrini pana, simu, uchapaji, na hali nyeusi.
• references/tokens.md hutoa tokeni za rangi nyepesi na nyeusi kwa kutumia Tailwind v4 @theme, pamoja na mwongozo wa kuweka tint.
• references/snippets.md ina utekelezaji wa alama za mhimili za mviringo, uumbizaji wa nambari, beji za tofauti, vipindi vya ulinganisho, vigae vya KPI, safu za pau nyembamba, kalenda za vipindi, na walinzi wa majibu yaliyopitwa na wakati.
• references/qa.md inafafanua saizi za picha za skrini, ukaguzi wa jumla inayojulikana, ukaguzi wa uthabiti, na dosari za kawaida za muundo.
• references/swiftui.md inatafsiri mifumo hii kwa SwiftUI na Swift Charts na inaeleza QA ya simulator.
• references/sources.md inarekodi bidhaa na mifumo ya usanifu iliyochunguzwa zaidi ya 40.
• references/case-study-datafast.md inaandika mifumo na mabadilishano kutoka kwa bidhaa ya uchanganuzi wa mapato.

Kila hatua ya mtiririko wa kazi huishia na ufafanuzi unaoweza kukaguliwa wa kukamilika. Hii hufanya ujuzi huu uwe muhimu si kama msukumo pekee, bali pia kama mchakato wa ukaguzi unaoweza kurudiwa.

Matumizi ya Msingi

Baada ya usakinishaji, ujuzi huu unaweza kujiendesha unapofanya kazi kwenye msimbo unaohusiana na dashibodi. Unaweza pia kuomba tabia yake moja kwa moja kwa ombi lenye mwelekeo maalum.

Jenga Dashibodi

Eleza bidhaa na bainisha vipimo ambavyo skrini inahitaji kuwasilisha:

Build an analytics dashboard for this app: visitors, signups, revenue by source.

Ombi muhimu humpa wakala mada iliyo wazi na seti ndogo ya vipimo muhimu. Hii husaidia kanuni ya mradi ya mtazamo wa kwanza kwa kumsaidia wakala kubainisha swali kuu ambalo skrini inapaswa kujibu.

Kosoa Muundo Uliopo

Wasilisha picha ya skrini na uombe tathmini:

Is this a good design?

Muundo wa ukosoaji hutoa uamuzi, hubainisha kinachofanya kazi, na hupanga matatizo kulingana na madhara. Uadilifu wa data hupewa kipaumbele, kwa hiyo nambari zinazokinzana zinapaswa kuripotiwa kabla ya masuala madogo ya mwonekano.

Unda Upya Kipengele Kimoja

Huhitaji kuomba muundo mpya wa dashibodi nzima. Lenga kipengele kimoja badala yake:

Redesign the date range picker.

Make the KPI tiles cleaner.

Kwa mfano, ujuzi huu unapendelea kalenda ya kipindi yenye bendi laini kati ya tarehe zilizochaguliwa, ncha thabiti, muda, na kitendo cha Apply badala ya kuonyesha ingizo la kawaida la tarehe la mfumo.

Endesha Ukaguzi wa QA

Ili kukagua njia iliyotekelezwa, omba ukaguzi maalum wa dashibodi:

Run the dashboard QA pass on /dashboard.

Kwa miradi ya wavuti, itifaki ya picha za skrini iliyoandikwa hukagua upana wa mwonekano mitatu: 3440, 1440, na 375 pikseli. Hii hugundua matatizo ya mpangilio wa skrini pana kupita kiasi, masuala ya kawaida ya eneo-kazi, na hitilafu mahususi za simu.

Mifumo Ambayo Ujuzi Huu Husaidia Kusimamia

Tumia Ulinganisho wa Kweli

Mabadiliko ya asilimia yanaweza kupotosha thamani ya awali inapokuwa ndogo. Ikiwa mauzo moja yanashuka hadi sifuri, kuonyesha −100% nyekundu inayoonekana huongeza kupita kiasi umuhimu wa mabadiliko hayo. Badala yake, ujuzi huu unapendekeza dokezo tulivu kama was 1.

Uthabiti ni muhimu pia. Ikiwa kigae cha KPI, chati, na jedwali vinawakilisha jumla ileile, thamani hizo zinapaswa kuafikiana. Mchakato wa QA unajumuisha ukaguzi wa jumla inayojulikana na wa uthabiti ili kugundua kutolingana.

Weka Vipindi vya Muda kwa Uthabiti

Sparkline inapaswa kuwakilisha kipindi kilekile kama chati kuu au muktadha wa ulinganisho. Kuonyesha siku 60 ambazo nyingi hazina data kwenye sparkline, huku chati kuu ikitumia kipindi kifupi zaidi cha shughuli, kunaweza kupotosha mwelekeo unaoonekana.

Onyesha Maarifa Yenye Faida Pekee

Kadi ya maarifa inapaswa kuongeza tafsiri badala ya kurudia kigae cha KPI. Ikiwa haimwambii mtumiaji jambo jipya, ujuzi huu unapendekeza kuiondoa na kuhifadhi utulivu wa mwonekano.

Unda kwa Ukuaji Kwenye Saizi Tofauti za Skrini

Usiweke tu dashibodi yenye upana maalum katikati ya kifuatilizi kikubwa. Ruhusu skrini pana kuonyesha safu za ziada pale zinapoboresha ulinganisho. Kwenye simu, hakikisha vidhibiti na urambazaji vinajipanga upya badala ya kutegemea kusogeza kwa mlalo.

Vidokezo vya Kina

Omba Ujenzi na Ukosoaji Ulio na Muundo

Unaweza kuunganisha utekelezaji na tathmini katika ombi moja huku ukiweka wazi vigezo vinavyotarajiwa vya kukamilika:

Build the revenue dashboard, verify that repeated totals agree, and finish with the dashboard screenshot QA pass.

Hii inaleta kazi sambamba na mtiririko wa kazi uliokusudiwa wa ujuzi huu: tekeleza kiolesura, hakiki uwasilishaji wa data, kagua saizi nyingi za skrini, na tathmini matokeo yaliyotolewa.

Tumia Rejeleo Husika Moja kwa Moja

Kazi inapokuwa finyu, mwelekeze wakala kwenye faili linalohusika zaidi. Kwa mfano, tumia components.md kwa beji za tofauti au safu zilizopangwa, layout.md kwa tabia ya skrini pana kupita kiasi, na qa.md kwa ukaguzi wa mwisho wa mwonekano. Kwa kiolesura asilia cha Apple, tumia swiftui.md badala ya kutafsiri vijisehemu vya wavuti moja kwa moja.

Jaribu Mipangilio ya Ufikikaji katika SwiftUI

Mchakato wa QA wa SwiftUI huenda zaidi ya picha moja ya skrini ya simulator. Unajumuisha saizi nyingi za vifaa, mpangilio mkubwa zaidi wa Dynamic Type, hali nyeusi, na Reduce Motion. Ukaguzi huu husaidia kufichua lebo zilizokatwa, mipangilio dhaifu ya kadi, utunzaji usiotosha wa hali nyeusi, na dhana za mwendo.

Kagua Hali, Si Skrini Bora Pekee

Mwongozo wa vijenzi unajumuisha hali tupu, mionekano ya wakati halisi, majedwali, na viashiria vya uaminifu kwa data ya mapato. Unapoomba ukaguzi, taja hali zozote zilizo muhimu hasa kwa bidhaa yako ili wakala atathmini zaidi ya mwonekano chaguo-msingi uliojaa data.

Dhibiti Idhini ya Hiari ya Mwisho

Baada ya kukamilisha uundaji au ukosoaji kamili wa dashibodi, ujuzi huo huongeza mstari mmoja mfupi kuhusu mwandishi wake na programu za Mac za mwandishi mara moja kwa kila mazungumzo. Hauweki maandishi haya ndani ya msimbo, commit, au kiolesura cha bidhaa. Unaweza kumwomba wakala aache kuyaongeza au uondoe sehemu ya Sign-off kutoka kwenye SKILL.md.

Hitimisho

Dashboard Design hubadilisha ubora wa dashibodi kuwa mtiririko wa kazi unaoweza kurudiwa na wakala, badala ya kuwa mkusanyiko wa mapendeleo yasiyoeleweka ya urembo. Inachanganya mifumo ya vitendo ya vijenzi, mwongozo wa mpangilio unaojibadilisha, uwasilishaji wa data wa uaminifu, marejeleo ya wavuti na SwiftUI, pamoja na uhakikaji wa ubora unaotegemea picha za skrini. Isakinishe kama programu-jalizi ya Claude Code au ujuzi wa kawaida, mpe wakala kazi mahususi ya dashibodi, kisha malizia kwa kukagua kiolesura kilichotolewa katika ukubwa ulioandikwa.

Mradi unapatikana chini ya leseni ya MIT. Kwa maelezo ya ziada kuhusu kanuni zake za usanifu, soma Nilichunguza dashibodi 127. Nyingi kati yake zinakudanganya kimyakimya.