Skip to main content

مهارة جمالیات Design System

مهارة جمالیات Design System (Design System Aesthetics) هي طريقة موجهة لتنقيح الهوية البصرية لموقعك. تساعدك هذه المهارة في اتخاذ قرارات متناسقة حول الخطوط، الألوان، المسافات، ورموز الحركة (motion tokens) التي تحدد نظام التصميم الخاص بك.

ما هي جماليات Design System؟​

جماليات Design System هي مهارة منظمة تغطي:

  • الخطوط (Typography): عائلات الخطوط، أحجامها، أوزانها، وارتفاع السطور
  • الألوان (Color): لوحات الألوان الأساسية، الثانوية، المميزة، والمحايدة
  • المسافات (Spacing): مقاييس الحشو (padding)، الهامش (margin)، والفجوات (gap)
  • الحواف (Borders): رموز نصف القطر (radius) وعرض الحدود
  • الظلال (Shadows): رموز الارتفاع والعمق
  • الحركة (Motion): الرسوم المتحركة والانتقالات

تُسجل هذه القرارات في ملف theme.json الخاص بقالبك، مما يخلق نظامًا بصريًا متماسكًا.

لماذا نستخدم جماليات Design System؟​

الاتساق (Consistency)​

نظام التصميم يضمن:

  • أن جميع النصوص تستخدم نفس مقياس الخطوط
  • استخدام الألوان بشكل متناسق عبر موقعك
  • اتباع المسافات نمط يمكن التنبؤ به
  • أن تبدو الرسوم المتحركة موحدة

الكفاءة (Efficiency)​

بدلاً من اتخاذ قرارات التصميم صفحة بصفحة، أنت:

  • تحدد الرموز مرة واحدة
  • تطبقها في كل مكان
  • تحدثها عالميًا عن طريق تغيير قيمة واحدة

المرونة (Flexibility)​

يمكنك:

  • تعديل نظام التصميم بأكمله بسرعة
  • التجريب مع جماليات مختلفة
  • الحفاظ على اتساق العلامة التجارية أثناء التطور

تفعيل مهارة جماليات Design System​

التفعيل اليدوي (Manual Activation)​

يمكنك بدء المهارة في أي وقت:

"Help me refine my design system"

أو

"Let's improve my site's aesthetics"

أو

"Guide me through design system decisions"

الاقتراحات التلقائية (Automatic Suggestions)​

قد يقترح الوكلاء استخدام المهارة عندما:

  • تطلب تغييرات في التصميم
  • تطلب إعادة تصميم "عصرية" أو "احترافية"
  • تريد تحسين الاتساق البصري
  • تستعد لإطلاق موقعك

Habbooyga Naqshadaynta Design Systemka​

Tallaabada 1: Qoraalka (Typography)​

Agent-ku wuxuu ku weydiinayaa doorashada font-kaaga:

Maxay tahay qaabka qoraalka aad dooratay?
- Serif (dhabta ah, qurux badan)
- Sans-serif (modern, nadiif ah)
- Monospace (teknikal, diiradda saaraya koodka)

Qoraalka madaxaaga (heading font):
- Ma rabtaa qoraal madax ah oo gaar ah, mise inaad isticmaali doonto mid la mid ah qoraalka guud?
- Doorashada: xoog badan (bold), qurux badan, ciyaar leh (playful), ama yar (minimal)?

Qoraalka guud (body font):
- Wax akhriyashadu waa muhiim. Ma doorataa:
  - Qoraal weyn, ballaaran meel lahayn
  - Qoraal kooban, hufan
  - Cabirka caadiga ah

Markaas agent-ku wuxuu qeexayaa:

  • Font-ka madaxa (Heading font): Font-ka ugu muhiimsan ee loogu talagalay magacyada iyo qoraallada madaxa.
  • Font-ka guud (Body font): Font-ka loo isticmaalo qoraallada kooban iyo qoraalka guud.
  • Font-ka Monospace (Monospace font): Font-ka loogu talagalay koodka iyo waxyaabaha farsamada.
  • Qaabka cabbirka (Size scale): Cabirro la hordoobay (yar, asaasiga ah, weyn, XL, iwm.).
  • Qaabka xoogga (Weight scale): Xoogga font-ka (caadi ah, dhexe, xoog badan, iwm.).
  • Tirada xarunta (Line height): Meelka u dhexeeya xarfurada si loo fududeeyo akhristaha.

Tallaabada 2: Midabada (Color Palette)​

Aan dejino midabada aad dooratay.

Midabka asaasiga ah (midabka calaamaddaada):
- Hadda: [waxay muujinaysaa midabka jira]
- Beddelo oo ku: [doorashada midabka ama hex code]

Midabka labaad (midabka taageerada):
- Hadda: [waxay muujinaysaa midabka jira]
- Beddelo oo ku: [doorashada midabka ama hex code]

Midabka xoojinta (highlights iyo CTAs - Call to Action):
- Hadda: [waxay muujinaysaa midabka jira]
- Beddelo oo ku: [doorashada midabka ama hex code]

Qaabka dhexdhexaadka ah (grays qoraalka, xarfo, dhabarka):
- Wax yar (Light): [midab]
- Dhexe (Medium): [midab]
- Madow (Dark): [midab]

Agent-ku abuuraa qaabka oo ay ku jirto:

  • Midabada asaasiga ah, labaad, iyo xoojinta.
  • Grays-yada dhexdhexaadka ah (yar, dhexe, madow).
  • Midabada macnaha leh (guusha, digni, qalad).
  • Xaaladaha hoos u dhaca (hover) iyo xaaladaha firfircoon (active states).

Tallaabada 3: Meelka U Dhexeeya Qoraalka (Spacing)​

Баartee intaabka aad rabto?

Farsamada meelaha (Spacing scale preference):

  • Compact (qaabasho yar, waxtarka badan leh)
  • Normal (meelaha isku dheelitiran)
  • Spacious (meelaha ballaaran oo fura)

Tani waxay saameyn ku leedahay:

  • Padding-ka gudaha badhanka iyo cards-ka
  • Margins-ka u dhexeeya qaybaha
  • Gap-ka u dhexeeya qaybaha grid-ka (grid items)

Agent-ku wuxuu qeexaa tokens-ka meelaha (spacing tokens):

  • Base unit (inta badan 4px ama 8px)
  • Scale: xs, sm, md, lg, xl, 2xl
  • Qiyam gaar ah oo loogu talagalay padding, margin, iyo gap

Tallaabada 4aad: Borders iyo Shadows​

Qoto dheerka muuqaalka iyo qeexidda (Visual depth and definition):

Farsamada radius-ga border-ka (Border radius preference):
- Sharp (ma jirto wareegga)
- Subtle (radius yar)
- Rounded (radius dhexe)
- Very rounded (radius weyn)

Qoto dheerka shadow-ga:
- Flat (shadow la'aadin)
- Subtle (shadow yaryar)
- Pronounced (shadow xooggan)

Agent-ku wuxuu abuuraa:

  • Border radius tokens (badhanka, cards-ka, iyo inputs-ka loogu talagalay)
  • Shadow tokens si loo qeexo heerarka kororka (elevation levels)
  • Border width tokens

Tallaabada 5aad: Motion iyo Animation​

Sidee ayuu website-kaaga dareemi doonaa marka uu la shaqaynayo?

Farsamada animation-ka (Animation preference):
- Minimal (ma jirto animations)
- Subtle (transition yaryar oo fudud)
- Playful (animations muuqda)

Animations gaarka ah:
- Page transitions: fade, slide, mise waxba ma aha?
- Button hover: scale, isbeddel midab ah, mise labadaba?
- Loading states: spinner, skeleton, mise progress bar?

Agent-ku wuxuu qeexaa:

  • Transition durations (degmo degdeg ah, caadi ah, ama tartiir)
  • Easing functions (ease-in, ease-out, ease-in-out)
  • Animation keyframes si loo sameeyo isbeddellada caadiga ah ee isticmaalka

Isticmaalka Aesthetics Design Systemka​

Adeegsiga tooska ah (Automatic Application)​

Marka aad dhammaystirto bixinta halkan, agent-ku:

  1. Waxay cusboonaysiiyaa theme.json theme-kaaga oo ku jira dhammaan tokens-ka
  2. Waxay ku adeegsataa design system-ka theme-kaaga socda (active theme)
  3. Waxay dib u abuureysaa styles-ka block-ga si ay la jaanqaadaan nidaamka cusub
  4. Waxay fulisaa theme-ka oo la cusboonaysiiyay

Adeegsiga gacanta (Manual Application)​

Waxaad sidoo kale wax ka beddeli kartaa theme.json si toos ah:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#0066CC",
          "name": "Primary",
          "slug": "primary"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "name": "Body",
          "slug": "body"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "size": "0.5rem",
          "name": "Small",
          "slug": "sm"
        }
      ]
    }
  }
}

Aragtaynta Nidaamka Naqshintaada (Viewing Your Design System)​

Weydii Agent-ka​

"Show me my design system"

ama

"What are my current design tokens?"

Agent-ku wuxuu kuu soo bandhigi doonaa qaab-dhismeedka qoraalkaaga (typography), midabada, meelaha la saaro (spacing), iyo tokenyada kale.

Arag theme.json​

Fadlan fur /wp-content/themes/[theme-name]/theme.json faylka ku editor text ah si aad u aragso qoraalka asalka ahaa ee token-yada.

Cusboonaysiinta Nidaamka Naqshintaada (Updating Your Design System)​

Cusboonaysiin Degdeg Ah​

Weydii agent-ka isbeddellada gaarka ah:

"Make the primary color darker"

ama

"Increase the spacing scale by 20%"

ama

"Change the heading font to a serif"

Naqshinta Dhammaystiran (Full Redesign)​

Mar kale fuli habka Design System Aesthetics:

"Let's redesign my entire design system"

Tani wuxuu ku hagayaa dhammaan go'aankaaga mar kale, iyadoo la bilaabayo qiimaha aad haysato hadda.

Cusboonaysiin Dhufan (Partial Updates)​

Waxaad cusboonaysi kartaa dhinacyada gaarka ah:

"Just update the color palette, keep everything else"

Hababka Wanaagsan ee Nidaamka Naqshintaada (Design System Best Practices)​

Is-dhaafsiinta (Consistency)​

  • Isticmaal token-yada isku mid ah dhammaan meelaha.
  • Ha abuuri midab ama cabbirro gaar ah oo kaliya.
  • Adeegso token-yada halkii aad si toos ah u qorto qiimaha.

Magaca (Naming)​

Isticmaal magacyo cad oo macno leh:

  • ✓ primary, secondary, accent

  • ✗ blue, color-1, main

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

Wax-soo-saarka (Scalability)​

نظامك وردو (WordPress) oo weyn la sii kordhin karo:

  • Isticmaal miisaan la xiriira (rem, em) halkii pixels-ka.
  • Sameec (xs, sm, md, lg, xl) abuuro halkii qiimo aan la qorsayn.
  • Qorshe waxyaabaha mustaqbalka ah ee la soo darayo.

Dukumeentigu​

Dukumeenti nidaamka design-kaaga:

  • Maxay tahay sababta aad dooratay midabada gaarka ah?
  • Goorma ayaad isticmaali doontid token kasta?
  • Waxyaabaha ka baxsan iyo xaaladaha adag (edge cases).

Qaababka Design System-ka Caadi ah​

Minimalist Modern (Wada fudud)​

  • Qoraal aan lahayn qof (Sans-serif) (Inter, Helvetica)
  • Midabada xaddidan (2-3 midab)
  • Isdheyaal ballaaran (Generous spacing)
  • Hoos u dhac yar yar oo hoos u dhaca (Subtle shadows)
  • Animacyo fudud oo degdeg ah

Diirran iyo Saaxiibbo leh (Warm and Friendly)​

  • Isku dhafka serif iyo sans-serif
  • Midabada diirran (orange, grays la dåsini ah)
  • Qaybaha la dhigay (Rounded corners)
  • Hoos u dhac yar oo qosol leh (Soft shadows)
  • Animacyo ciyaaraya

Ganacsi Caadi ah (Professional Corporate)​

  • Sans-serif nadiif ah (Roboto, Open Sans)
  • Midabada dhexdhexaadka ah oo lahayd midab xooggan (accent color)
  • Isdheyaal loo qorsheeyay (Structured spacing)
  • Hoos u dhac yar oo aan muuqder ahayn (Minimal shadows)
  • Isbeddellada fudud

Abuuraysan iyo Xooggan (Creative and Bold)​

  • Qoraal gaar ah oo soo jiidasho leh (Distinctive typography)
  • Midabada xooggan (Bold color palette)
  • Isdheyaal kala duwan
  • Hoos u dhac xooggan
  • Animacyo la arki karo

Wax Karka (Troubleshooting)​

Isbeddellada design-kaaga ma muuqdaan

  • Nadaafso cache-ka browser-kaaga.
  • Dib u dhig website-ka haddii aad isticmaalayso static generator.
  • Hubi in theme.json uu yahay JSON sax ah.
  • Hubi in theme-ku yahay mid la firfiray (active).

Midabada waxay muuqdaan kala duwan bogagta kale

  • Hubi CSS-ka isku dhaca ee plugins-kaaga.
  • Hubi in dhammaan bogagta ay isticmaalaan theme-ka isku ah.
  • Nadaafso wax kasta oo lagu haysto caching plugins.

Waxaan rabaa inaan ku laabto design system hore

  • Weydii agent-ka: "Show me my design system history" (Soo muujiyaha taariikhda design-kaaga).
  • Wax ka beddel theme.json si aad u hesho qiimaha hore.
  • Dib u socod (Re-run) skill-ka adiga oo doorasho kale samaynaya.

Tallaabooyinka Xiga ah​

Marka aad qorsheysay design system-kaaga:

  1. Hubi website-kaaga: Website-kaaga boo gudbi si daraxda cusbitaanka arag.
  2. Wixii kale hagaajin: Xogta ku xirnaada isticmaal, xiradaas ayaad hagaajin kartaa.
  3. Abuur template-yo: Design tokens-kaaga ka isticmaalaya block-yo gaar ah oo abuur.
  4. Qoraal qor: Design system-kaaga kooxdaaga la wadaag.