मुख्य कंटेंट तक स्किप करें

Design System Aesthetics Skill

Design System Aesthetics skill एक गाइडेड अप्रोच है जो आपकी साइट की विज़ुअल पहचान (visual identity) को बेहतर बनाने में मदद करती है। यह आपको टाइपोग्राफी, कलर, स्पेसिंग और मोशन टोकन (motion tokens) के बारे में लगातार निर्णय लेने में मदद करती है, जो आपके डिज़ाइन सिस्टम को परिभाषित करते हैं।

Design System Aesthetics क्या है?​

Design System Aesthetics एक संरचित कौशल (structured skill) है जो इन चीज़ों को कवर करता है:

  • Typography: फ़ॉन्ट परिवार (Font families), साइज़, वज़न (weights), और लाइन की ऊँचाई (line heights)
  • Color: प्राइमरी, सेकेंडरी, एक्सेंट, और न्यूट्रल कलर पैलेट
  • Spacing: पैडिंग, मार्जिन, और गैप स्केल
  • Borders: रेडियस और चौड़ाई टोकन
  • Shadows: एलिवेशन और डेप्थ टोकन
  • Motion: एनिमेशन और ट्रांज़िशन

ये निर्णय आपके थीम की theme.json फ़ाइल में कैप्चर किए जाते हैं, जिससे एक सुसंगत विज़ुअल सिस्टम बनता है।

Design System Aesthetics का उपयोग क्यों करें?​

Consistency (संगति)​

एक डिज़ाइन सिस्टम यह सुनिश्चित करता है:

  • सभी टेक्स्ट एक ही टाइपोग्राफी स्केल का उपयोग करते हैं
  • रंगों का उपयोग आपकी साइट पर लगातार होता है
  • स्पेसिंग एक अनुमानित पैटर्न का पालन करती है
  • एनिमेशन एकजुट महसूस होते हैं

Efficiency (दक्षता)​

पेज-दर-पेज डिज़ाइन निर्णय लेने के बजाय, आप:

  • टोकन एक बार परिभाषित करते हैं
  • उन्हें हर जगह लागू करते हैं
  • एक वैल्यू बदलकर वैश्विक स्तर पर अपडेट करते हैं

Flexibility (लचीलापन)​

आप यह कर सकते हैं:

  • अपने पूरे डिज़ाइन सिस्टम को जल्दी से एडजस्ट कर सकते हैं
  • अलग-अलग एस्थेटिक्स के साथ प्रयोग कर सकते हैं
  • विकसित होते समय ब्रांड की निरंतरता बनाए रख सकते हैं

Design System Aesthetics Skill को ट्रिगर करना​

Manual Activation (मैनुअल सक्रियण)​

आप किसी भी समय इस स्किल को शुरू कर सकते हैं:

"Help me refine my design system"

या

"Let's improve my site's aesthetics"

या

"Guide me through design system decisions"

Automatic Suggestions (स्वचालित सुझाव)​

एजेंट तब इस स्किल का उपयोग करने का सुझाव दे सकता है जब आप:

  • डिज़ाइन बदलावों के बारे में पूछते हैं
  • "मॉडर्न" या "प्रोफेशनल" रीडिज़ाइन का अनुरोध करते हैं
  • विज़ुअल निरंतरता में सुधार करना चाहते हैं
  • अपनी साइट लॉन्च करने की तैयारी कर रहे होते हैं

The Design System Aesthetics Process​

Step 1: Typography (टाइपोग्राफी)​

एजेंट आपके फ़ॉन्ट विकल्पों के बारे में पूछता है:

What's your preferred typography style?
- Serif (traditional, elegant)
- Sans-serif (modern, clean)
- Monospace (technical, code-focused)

For your heading font:
- Do you want a distinct heading font, or use the same as body text?
- Preference: bold, elegant, playful, minimal?

For your body font:
- Readability is key. Do you prefer:
  - Larger, more spacious text
  - Compact, efficient text
  - Standard sizing

इसके बाद एजेंट परिभाषित करता है:

  • Heading font: शीर्षकों और हेडिंग के लिए प्राथमिक फ़ॉन्ट
  • Body font: पैराग्राफ और बॉडी टेक्स्ट के लिए फ़ॉन्ट
  • Monospace font: कोड और तकनीकी कंटेंट के लिए फ़ॉन्ट
  • Size scale: पूर्व-परिभाषित साइज़ (small, base, large, XL, आदि।)
  • Weight scale: फ़ॉन्ट वज़न (regular, medium, bold, आदि।)
  • Line height: पढ़ने में आसानी के लिए लाइनों के बीच की दूरी

Step 2: Color Palette (कलर पैलेट)​

Let's define your color palette.

Primary color (your brand color):
- Current: [shows existing color]
- Change to: [color picker or hex code]

Secondary color (supporting color):
- Current: [shows existing color]
- Change to: [color picker or hex code]

Accent color (highlights and CTAs):
- Current: [shows existing color]
- Change to: [color picker or hex code]

Neutral palette (grays for text, borders, backgrounds):
- Light: [color]
- Medium: [color]
- Dark: [color]

एजेंट निम्नलिखित सहित एक पूरा पैलेट बनाता है:

  • प्राइमरी, सेकेंडरी, और एक्सेंट रंग
  • न्यूट्रल ग्रे (हल्का, मध्यम, गहरा)
  • सिमेंटिक रंग (success, warning, error)
  • होवर और एक्टिव स्टेट्स

Step 3: Spacing (स्पेसिंग)​

How much breathing room do you want?

Spacing scale preference:
- Compact (tight, efficient layouts)
- Normal (balanced spacing)
- Spacious (generous whitespace)

This affects:
- Padding inside buttons and cards
- Margins between sections
- Gap between grid items

एजेंट स्पेसिंग टोकन परिभाषित करता है:

  • Base unit (आमतौर पर 4px या 8px)
  • Scale: xs, sm, md, lg, xl, 2xl
  • पैडिंग, मार्जिन, गैप के लिए विशिष्ट वैल्यू

Step 4: Borders and Shadows (बॉर्डर और शैडो)​

Visual depth and definition:

Border radius preference:
- Sharp (no rounding)
- Subtle (small radius)
- Rounded (medium radius)
- Very rounded (large radius)

Shadow depth:
- Flat (no shadows)
- Subtle (light shadows)
- Pronounced (strong shadows)

एजेंट बनाता है:

  • बॉर्डर रेडियस टोकन (बटनों, कार्डों, इनपुट्स के लिए)
  • एलिवेशन स्तरों के लिए शैडो टोकन
  • बॉर्डर चौड़ाई टोकन

Step 5: Motion and Animation (मोशन और एनिमेशन)​

How should your site feel when interactive?

Animation preference:
- Minimal (no animations)
- Subtle (gentle transitions)
- Playful (noticeable animations)

Specific animations:
- Page transitions: fade, slide, or none?
- Button hover: scale, color change, or both?
- Loading states: spinner, skeleton, or progress bar?

एजेंट परिभाषित करता है:

  • ट्रांज़िशन ड्यूरेशन (fast, normal, slow)
  • ईज़िंग फ़ंक्शंस (ease-in, ease-out, ease-in-out)
  • सामान्य इंटरैक्शन के लिए एनिमेशन कीफ़्रेम

Applying Design System Aesthetics (डिज़ाइन सिस्टम एस्थेटिक्स लागू करना)​

Automatic Application (स्वचालित अनुप्रयोग)​

जब आप स्किल पूरा कर लेते हैं, तो एजेंट:

  1. आपके थीम के theme.json में सभी टोकन के साथ अपडेट करता है
  2. डिज़ाइन सिस्टम को आपके सक्रिय थीम पर लागू करता है
  3. नए सिस्टम से मेल खाने के लिए ब्लॉक स्टाइल को रीजेनरेट करता है
  4. अपडेटेड थीम को सक्रिय करता है

Manual Application (मैनुअल अनुप्रयोग)​

आप सीधे theme.json को भी एडिट कर सकते हैं:

{
  "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"
        }
      ]
    }
  }
}

Viewing Your Design System (अपने डिज़ाइन सिस्टम को देखना)​

Ask the Agent (एजेंट से पूछें)​

"Show me my design system"

या

"What are my current design tokens?"

एजेंट आपकी टाइपोग्राफी, रंगों, स्पेसिंग और अन्य टोकन प्रदर्शित करेगा।

View theme.json (theme.json देखें)​

कच्चे टोकन परिभाषाएँ देखने के लिए /wp-content/themes/[theme-name]/theme.json को एक टेक्स्ट एडिटर में खोलें।

Updating Your Design System (अपने डिज़ाइन सिस्टम को अपडेट करना)​

Quick Updates (त्वरित अपडेट)​

एजेंट से विशिष्ट बदलावों के लिए पूछें:

"Make the primary color darker"

या

"Increase the spacing scale by 20%"

या

"Change the heading font to a serif"

Full Redesign (पूरा रीडिज़ाइन)​

Design System Aesthetics skill को फिर से चलाएँ:

"Let's redesign my entire design system"

यह आपको आपके वर्तमान मानों से शुरू करते हुए, सभी निर्णयों के माध्यम से फिर से मार्गदर्शन करेगा।

Partial Updates (आंशिक अपडेट)​

विशिष्ट पहलुओं को अपडेट करें:

"Just update the color palette, keep everything else"

Design System Best Practices (डिज़ाइन सिस्टम की सर्वोत्तम प्रथाएँ)​

Consistency (संगति)​

  • हर जगह एक ही टोकन का उपयोग करें
  • एक बार के रंग या साइज़ न बनाएँ
  • वैल्यू को हार्डकोड करने के बजाय टोकन का संदर्भ लें

Naming (नामकरण)​

स्पष्ट, सिमेंटिक नाम का उपयोग करें:

  • ✓ primary, secondary, accent

  • ✗ blue, color-1, main

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

Scalability (स्केलेबिलिटी)​

अपने सिस्टम को स्केल करने के लिए डिज़ाइन करें:

  • पिक्सल के बजाय रिलेटिव यूनिट्स (rem, em) का उपयोग करें
  • मनमाने मानों के बजाय स्केल बनाएँ (xs, sm, md, lg, xl)
  • भविष्य के जोड़ के लिए योजना बनाएँ

Documentation (दस्तावेज़ीकरण)​

अपने डिज़ाइन सिस्टम का दस्तावेज़ीकरण करें:

  • आपने विशिष्ट रंग क्यों चुने
  • प्रत्येक टोकन का उपयोग कब करना है
  • अपवाद और एज केस

Common Design System Patterns (सामान्य डिज़ाइन सिस्टम पैटर्न)​

Modern Minimalist (आधुनिक मिनिमलिस्ट)​

  • Sans-serif टाइपोग्राफी (Inter, Helvetica)
  • सीमित कलर पैलेट (2-3 रंग)
  • उदार स्पेसिंग
  • सूक्ष्म शैडो
  • सहज, तेज़ एनिमेशन

Warm and Friendly (गर्म और मैत्रीपूर्ण)​

  • सेरिफ और सैन्स-सेरिफ का मिश्रण
  • गर्म कलर पैलेट (नारंगी, गर्म ग्रे)
  • गोल कोने
  • सॉफ्ट शैडो
  • चंचल एनिमेशन

Professional Corporate (पेशेवर कॉर्पोरेट)​

  • साफ़ सैन्स-सेरिफ (Roboto, Open Sans)
  • एक्सेंट कलर के साथ न्यूट्रल पैलेट
  • संरचित स्पेसिंग
  • न्यूनतम शैडो
  • सूक्ष्म ट्रांज़िशन

Creative and Bold (रचनात्मक और बोल्ड)​

  • विशिष्ट टाइपोग्राफी
  • बोल्ड कलर पैलेट
  • विविध स्पेसिंग
  • मजबूत शैडो
  • ध्यान देने योग्य एनिमेशन

Troubleshooting (समस्या निवारण)​

मेरा डिज़ाइन सिस्टम में बदलाव दिखाई नहीं दे रहे हैं

  • अपने ब्राउज़र कैश को साफ़ करें
  • यदि आप स्टैटिक जेनरेटर का उपयोग कर रहे हैं तो अपनी साइट को रीबिल्ड करें
  • जांच लें कि theme.json वैध JSON है या नहीं
  • सत्यापित करें कि थीम सक्रिय है

अलग-अलग पेजों पर रंग अलग दिखते हैं

  • प्लगइन्स में टकराने वाले CSS की जाँच करें
  • सत्यापित करें कि सभी पेज एक ही थीम का उपयोग करते हैं
  • किसी भी कैशिंग प्लगइन को साफ़ करें

मैं पिछले डिज़ाइन सिस्टम पर वापस जाना चाहता हूँ

  • एजेंट से पूछें: "Show me my design system history"
  • पिछले मानों पर theme.json को मैन्युअल रूप से एडिट करें
  • विभिन्न विकल्पों के साथ स्किल को फिर से चलाएँ

Next Steps (अगले कदम)​

अपना डिज़ाइन सिस्टम परिभाषित करने के बाद:

  1. अपनी साइट की समीक्षा करें: नया डिज़ाइन देखने के लिए अपनी साइट पर जाएँ
  2. आगे सुधार करें: स्किल का उपयोग करके समायोजन करें
  3. टेम्पलेट बनाएँ: अपने डिज़ाइन टोकन का उपयोग करके कस्टम ब्लॉक टेम्पलेट बनाएँ
  4. दस्तावेज़ीकरण करें: अपने डिज़ाइन सिस्टम को टीम के सदस्यों के साथ साझा करें