ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಸೌಂದರ್ಯ ಕೌಶಲ್ಯ

ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಸೌಂದರ್ಯ ಕೌಶಲ್ಯ (Design System Aesthetics skill) ಎಂಬುದು ನಿಮ್ಮ ಸೈಟ್‌ನ ದೃಶ್ಯ ಗುರುತನ್ನು (visual identity) ಪರಿಷ್ಕರಿಸಲು ಮಾರ್ಗದರ್ಶನ ನೀಡುವ ಒಂದು ವಿಧಾನ. ನಿಮ್ಮ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಟೈಪೋಗ್ರಫಿ, ಬಣ್ಣ, இடைவெளி ಮತ್ತು ಚಲನೆಯ ಟೋಕನ್‌ಗಳ ಬಗ್ಗೆ ಸ್ಥಿರ ನಿರ್ಧಾರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಇದು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಸೌಂದರ್ಯ ಎಂದರೇನು?

ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಸೌಂದರ್ಯ (Design System Aesthetics) ಎಂಬುದು ಈ ಕೆಳಗಿನ ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಒಂದು ರಚನಾತ್ಮಕ ಕೌಶಲ್ಯವಾಗಿದೆ:

• ಟೈಪೋಗ್ರಫಿ (Typography): ಫಾಂಟ್ ಕುಟುಂಬಗಳು, ಗಾತ್ರಗಳು, ಎಳೆಗಳು (weights), ಮತ್ತು ಲೈನ್ ಹೈಟ್‌ಗಳು.
• ಬಣ್ಣ (Color): ಪ್ರೈಮರಿ, ಸೆಕೆಂಡರಿ, ಆಕ್ಸೆಂಟ್ ಮತ್ತು ನ್ಯೂಟ್ರಲ್ ಪ್ಯಾಲೆಟ್‌ಗಳು.
• ಇடைவெளி (Spacing): ಪ್ಯಾಡಿಂಗ್, ಮಾರ್ಜಿನ್ ಮತ್ತು ಗ್ಯಾಪ್ ಸ್ಕೇಲ್‌ಗಳು.
• ಬಾರ್ಡರ್‌ಗಳು (Borders): ವಿಕೃತಿ (Radius) ಮತ್ತು ಅಗಲ ಟೋಕನ್‌ಗಳು.
• ಶ್ಯಾಡೋಗಳು (Shadows): ಎಲಿവേഷನ್ ಮತ್ತು ಆಳದ ಟೋಕನ್‌ಗಳು.
• ಚಲನೆ (Motion): ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಟ್ರಾನ್ಸಿಷನ್‌ಗಳು.

ಈ ನಿರ್ಧಾರಗಳನ್ನು ನಿಮ್ಮ ಥೀಮ್‌ನ theme.json ಫೈಲ್‌ನಲ್ಲಿ ದಾಖಲಿಸಲಾಗುತ್ತದೆ, ಇದು ಒಂದು ಸಮನ್ವಯ ದೃಶ್ಯ ವ್ಯವಸ್ಥೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಸೌಂದರ್ಯವನ್ನು ಏಕೆ ಬಳಸಬೇಕು?

ಸ್ಥಿರತೆ (Consistency)

ಒಂದು ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯು ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ:

• ಎಲ್ಲಾ ಪಠ್ಯವು ಒಂದೇ ಟೈಪೋಗ್ರಫಿ ಸ್ಕೇಲ್ ಅನ್ನು ಬಳಸುತ್ತದೆ.
• ಬಣ್ಣಗಳನ್ನು ನಿಮ್ಮ ಇಡೀ ಸೈಟ್‌ನಲ್ಲಿ ಸ್ಥಿರವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.
• இடைவெளிವು 예측 ಮಾಡಬಹುದಾದ ಮಾದರಿಯನ್ನು ಅನುಸರಿಸುತ್ತದೆ.
• ಅನಿಮೇಷನ್‌ಗಳು ಒಟ್ಟಾಗಿ (unified) ಅನುಭವ ನೀಡುತ್ತವೆ.

ದಕ್ಷತೆ (Efficiency)

ಪುಟದಿಂದ ಪುಟಕ್ಕೆ ವಿನ್ಯಾಸ ನಿರ್ಧಾರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುವ ಬದಲು, ನೀವು:

• ಟೋಕನ್‌ಗಳನ್ನು ಒಮ್ಮೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೀರಿ.
• ಎಲ್ಲೆಡೆ ಅನ್ವಯಿಸುತ್ತೀರಿ.
• ಒಂದು ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ಜಾಗತಿಕವಾಗಿ ನವೀಕರಿಸುತ್ತೀರಿ.

ಹೊಂದಾಣಿಕೆ (Flexibility)

ನೀವು ಹೀಗೆ ಮಾಡಬಹುದು:

• ನಿಮ್ಮ ಇಡೀ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ಬೇಗನೆ ಹೊಂದಿಸಬಹುದು.
• ವಿಭಿನ್ನ ಸೌಂದರ್ಯಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಬಹುದು.
• ವಿಕಸನಗೊಳ್ಳುತ್ತಿರುವಾಗಲೂ ಬ್ರ್ಯಾಂಡ್ ಸ್ಥಿರತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಬಹುದು.

ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಸೌಂದರ್ಯ ಕೌಶಲ್ಯವನ್ನು déclaring ಮಾಡುವುದು

ಕೈಯಾರೆ ಸಕ್ರಿಯಗೊಳಿಸುವಿಕೆ (Manual Activation)

ನೀವು ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ಈ ಕೌಶಲ್ಯವನ್ನು ಪ್ರಾರಂಭಿಸಬಹುದು:

"Help me refine my design system"

ಅಥವಾ

"Let's improve my site's aesthetics"

ಅಥವಾ

"Guide me through design system decisions"

ಸ್ವಯಂಚಾಲಿತ ಸಲಹೆಗಳು (Automatic Suggestions)

ನೀವು ಈ ಕೆಳಗಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ ಏಜೆಂಟ್‌ಗಳು ಕೌಶಲ್ಯವನ್ನು ಬಳಸಲು ಸಲಹೆ ನೀಡಬಹುದು:

• ವಿನ್ಯಾಸ ಬದಲಾವಣೆಗಳನ್ನು ಕೇಳಿದಾಗ.
• "ಆಧುನಿಕ" ಅಥವಾ "ವೃತ್ತಿಪರ" ಮರು ವಿನ್ಯಾಸವನ್ನು ವಿನಂತಿಸಿದಾಗ.
• ದೃಶ್ಯ ಸ್ಥಿರತೆಯನ್ನು ಸುಧಾರಿಸಲು ಬಯಸಿದಾಗ.
• ನಿಮ್ಮ ಸೈಟ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಲು ಸಿದ್ಧರಾಗುತ್ತಿರುವಾಗ.

ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಸೌಂದರ್ಯ ಪ್ರಕ್ರಿಯೆ

ಹಂತ 1: ಟೈಪೋಗ್ರಫಿ

ಏಜೆಂಟ್ ನಿಮ್ಮ ಫಾಂಟ್ ಆಯ್ಕೆಗಳ ಬಗ್ಗೆ ಕೇಳುತ್ತದೆ:

ನಿಮ್ಮ ಆದ್ಯತೆಯ ಟೈಪೋಗ್ರಫಿ ಶೈಲಿ ಯಾವುದು?
- ಸೆರಿಫ್ (Serif) (ಸಾಂಪ್ರದಾಯಿಕ, ಸೊಗಸಾದ)
- ಸ್ಯಾನ್-ಸೆರಿಫ್ (Sans-serif) (ಆಧುನಿಕ, ಸ್ವಚ್ಛ)
- ಮೋನೋಸ್ಪೇಸ್ (Monospace) (ತಾಂತ್ರಿಕ, ಕೋಡ್-ಕೇಂದ್ರಿತ)

ನಿಮ್ಮ ಶೀರ್ಷಿಕೆ ಫಾಂಟ್‌ಗಾಗಿ:
- ನಿಮಗೆ ವಿಭಿನ್ನ ಶೀರ್ಷಿಕೆ ಫಾಂಟ್ ಬೇಕೇ, ಅಥವಾ ದೇಹದ ಪಠ್ಯದಂತೆಯೇ ಬಳಸಬೇಕೇ?
- ಆದ್ಯತೆ: ದಪ್ಪ (bold), ಸೊಗಸಾದ, ಆಟದಂತಹ (playful), ಅಥವಾ ಕನಿಷ್ಠ (minimal)?

ನಿಮ್ಮ ದೇಹದ ಫಾಂಟ್‌ಗಾಗಿ:
- ಓದಲು ಸಾಧ್ಯವಾಗುವುದು ಮುಖ್ಯ. ನಿಮಗೆ ಯಾವುದು ಹೆಚ್ಚು ಇಷ್ಟ?
  - ದೊಡ್ಡದಾದ, ಹೆಚ್ಚು ಜಾಗವಿರುವ ಪಠ್ಯ
  - ಸಂಕುಚಿತ, ದಕ್ಷ ಪಠ್ಯ
  - ಪ್ರಮಾಣಿತ ಗಾತ್ರ

ನಂತರ ಏಜೆಂಟ್ ಈ ಕೆಳಗಿನವುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ:

• ಶೀರ್ಷಿಕೆ ಫಾಂಟ್ (Heading font): ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ಶೀರ್ಷಿಕೆಗಳಿಗೆ ಪ್ರೈಮರಿ ಫಾಂಟ್.
• ದೇಹದ ಫಾಂಟ್ (Body font): ಪ್ಯಾರಾಗราಫ್‌ಗಳು ಮತ್ತು ದೇಹದ ಪಠ್ಯಕ್ಕಾಗಿ ಫಾಂಟ್.
• ಮೋನೋಸ್ಪೇಸ್ ಫಾಂಟ್ (Monospace font): ಕೋಡ್ ಮತ್ತು ತಾಂತ್ರಿಕ ವಿಷಯಕ್ಕಾಗಿ ಫಾಂಟ್.
• ಗಾತ್ರ ಸ್ಕೇಲ್ (Size scale): ಪೂರ್ವ-ವ್ಯಾಖ್ಯಾನಿತ ಗಾತ್ರಗಳು (small, base, large, XL, ಇತ್ಯಾದಿ).
• ಎಳೆ ಸ್ಕೇಲ್ (Weight scale): ಫಾಂಟ್ ಎಳೆಗಳು (regular, medium, bold, ಇತ್ಯಾದಿ).
• ಲೈನ್ ಹೈಟ್ (Line height): ಓದಲು ಸಾಧ್ಯವಾಗುವಿಕೆಗಾಗಿ ಲೈನ್‌ಗಳ ನಡುವಿನ ಅಂತರ.

ಹಂತ 2: ಬಣ್ಣ ಪ್ಯಾಲೆಟ್

ನಿಮ್ಮ ಬಣ್ಣ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸೋಣ.

ಪ್ರೈಮರಿ ಬಣ್ಣ (ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣ):
- ಪ್ರಸ್ತುತ: [ಇರುವ ಬಣ್ಣವನ್ನು ತೋರಿಸುತ್ತದೆ]
- ಬದಲಾಯಿಸಲು: [ಬಣ್ಣ ಆಯ್ಕೆಕಾರಕ ಅಥವಾ hex ಕೋಡ್]

ಸೆಕೆಂಡರಿ ಬಣ್ಣ (ಸಹಾಯ ಬಣ್ಣ):
- ಪ್ರಸ್ತುತ: [ಇರುವ ಬಣ್ಣವನ್ನು ತೋರಿಸುತ್ತದೆ]
- ಬದಲಾಯಿಸಲು: [ಬಣ್ಣ ಆಯ್ಕೆಕಾರಕ ಅಥವಾ hex ಕೋಡ್]

ಆಕ್ಸೆಂಟ್ ಬಣ್ಣ (हाइಲೈಟ್ ಮತ್ತು CTA):
- ಪ್ರಸ್ತುತ: [ಇರುವ ಬಣ್ಣವನ್ನು ತೋರಿಸುತ್ತದೆ]
- ಬದಲಾಯಿಸಲು: [ಬಣ್ಣ ಆಯ್ಕೆಕಾರಕ ಅಥವಾ hex ಕೋಡ್]

ನ್ಯೂಟ್ರಲ್ ಪ್ಯಾಲೆಟ್ (ಪಠ್ಯ, ಬಾರ್ಡರ್‌ಗಳು, ಹಿನ್ನೆಲೆಗಾಗಿ ಬೂದು ಬಣ್ಣಗಳು):
- ಲೈಟ್: [ಬಣ್ಣ]
- ಮೀಡಿಯಂ: [ಬಣ್ಣ]
- ಡಾರ್ಕ್: [ಬಣ್ಣ]

ಏಜೆಂಟ್ ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಒಳಗೊಂಡ ಸಂಪೂರ್ಣ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ:

• ಪ್ರೈಮರಿ, ಸೆಕೆಂಡರಿ ಮತ್ತು ಆಕ್ಸೆಂಟ್ ಬಣ್ಣಗಳು.
• ನ್ಯೂಟ್ರಲ್ ಬೂದು ಬಣ್ಣಗಳು (ಲೈಟ್, ಮೀಡಿಯಂ, ಡಾರ್ಕ್).
• ಸೆಮ್ಯಾಂಟಿಕ್ ಬಣ್ಣಗಳು (success, warning, error).
• ಹಾವರ್ ಮತ್ತು ಆಕ್ಟಿವ್ ಸ್ಟೇಟ್‌ಗಳು.

ಹಂತ 3: இடைவெளி (Spacing)

ನಿಮಗೆ ಎಷ್ಟು 'ಉಸಿರಾಡುವ ಜಾಗ' ಬೇಕು?

ಇடைவெளி ಸ್ಕೇಲ್ ಆದ್ಯತೆ:
- ಸಂಕುಚಿತ (Compact) (ಸಣ್ಣ, ದಕ್ಷ ಲೇಔಟ್‌ಗಳು)
- ಸಾಮಾನ್ಯ (Normal) (ಸಮತೋಲಿತ இடைவெளி)
- ವಿಶಾಲ (Spacious) (ದೊಡ್ಡ ಬಿಳಿ ಜಾಗ)

ಇದು ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಪ್ರಭಾವಿಸುತ್ತದೆ:
- ಬಟನ್‌ಗಳು ಮತ್ತು ಕಾರ್ಡ್‌ಗಳ ಒಳ ಪ್ಯಾಡಿಂಗ್.
- ವಿಭಾಗಗಳ ನಡುವಿನ ಮಾರ್ಜಿನ್‌ಗಳು.
- ಗ್ರಿಡ್ ಐಟಂಗಳ ನಡುವಿನ ಗ್ಯಾಪ್.

ಏಜೆಂಟ್ ಈ ಕೆಳಗಿನ இடைவெளி ಟೋಕನ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ:

• ಬೇಸ್ ಯೂನಿಟ್ (Base unit) (ಸಾಮಾನ್ಯವಾಗಿ 4px ಅಥವಾ 8px).
• ಸ್ಕೇಲ್: xs, sm, md, lg, xl, 2xl.
• ಪ್ಯಾಡಿಂಗ್, ಮಾರ್ಜಿನ್, ಗ್ಯಾಪ್‌ಗಾಗಿ ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯಗಳು.

ಹಂತ 4: ಬಾರ್ಡರ್‌ಗಳು ಮತ್ತು ಶ್ಯಾಡೋಗಳು

ದೃಶ್ಯ ಆಳ ಮತ್ತು ವ್ಯಾಖ್ಯಾನ:

ಬಾರ್ಡರ್ ವಿಕೃತಿ (Border radius) ಆದ್ಯತೆ:
- ತೀಕ್ಷ್ಣ (Sharp) (ಬಂಡಿಸುವಿಕೆ ಇಲ್ಲ)
- ಸೂಕ್ಷ್ಮ (Subtle) (ಸಣ್ಣ ವಿಕೃತಿ)
- ವೃತ್ತಾಕಾರ (Rounded) (ಮಧ್ಯಮ ವಿಕೃತಿ)
- ಹೆಚ್ಚು ವೃತ್ತಾಕಾರ (Very rounded) (ದೊಡ್ಡ ವಿಕೃತಿ)

ಶ್ಯಾಡೋ ಆಳ:
- ಫ್ಲಾಟ್ (Flat) (ಶ್ಯಾಡೋಗಳಿಲ್ಲ)
- ಸೂಕ್ಷ್ಮ (Subtle) (ಹಗುರವಾದ ಶ್ಯಾಡೋಗಳು)
- ಪ್ರಖರ (Pronounced) (ಬಲಿಷ್ಠ ಶ್ಯಾಡೋಗಳು)

ಏಜೆಂಟ್ ಈ ಕೆಳಗಿನವುಗಳನ್ನು ರಚಿಸುತ್ತದೆ:

• ಬಾರ್ಡರ್ ವಿಕೃತಿ ಟೋಕನ್‌ಗಳು (ಬಟನ್‌ಗಳು, ಕಾರ್ಡ್‌ಗಳು, ಇನ್‌ಪುಟ್‌ಗಳಿಗೆ).
• ಎಲಿവേഷನ್ ಮಟ್ಟಗಳಿಗೆ ಶ್ಯಾಡೋ ಟೋಕನ್‌ಗಳು.
• ಬಾರ್ಡರ್ ಅಗಲ ಟೋಕನ್‌ಗಳು.

ಹಂತ 5: ಚಲನೆ ಮತ್ತು ಅನಿಮೇಷನ್

ಇಂಟರಾಕ್ಟಿವ್ ಆಗಿರುವಾಗ ನಿಮ್ಮ ಸೈಟ್ ಹೇಗಿರಬೇಕು?

ಅನಿಮೇಷನ್ ಆದ್ಯತೆ:
- ಕನಿಷ್ಠ (Minimal) (ಅನಿಮೇಷನ್‌ಗಳಿಲ್ಲ)
- ಸೂಕ್ಷ್ಮ (Subtle) (ಮೃದುವಾದ ಟ್ರಾನ್ಸಿಷನ್‌ಗಳು)
- ಆಟದಂತಹ (Playful) (ಗಮನಾರ್ಹ ಅನಿಮೇಷನ್‌ಗಳು)

ನಿರ್ದಿಷ್ಟ ಅನಿಮೇಷನ್‌ಗಳು:
- ಪುಟದ ಟ್ರಾನ್ಸಿಷನ್‌ಗಳು: ಫೇಡ್, ಸ್ಲೈಡ್, ಅಥವಾ ಇಲ್ಲವೇ?
- ಬಟನ್ ಹಾವರ್: ಸ್ಕೇಲ್, ಬಣ್ಣ ಬದಲಾವಣೆ, ಅಥವಾ ಎರಡೂ?
- ಲೋಡಿಂಗ್ ಸ್ಟೇಟ್‌ಗಳು: ಸ್ಪಿನ್ನರ್, ಸ್ಕೆಲಿಟನ್, ಅಥವಾ ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್?

ಏಜೆಂಟ್ ಈ ಕೆಳಗಿನವುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ:

• ಟ್ರಾನ್ಸಿಷನ್ ಅವಧಿಗಳು (fast, normal, slow).
• ಈಸಿಂಗ್ ಫಂಕ್ಷನ್‌ಗಳು (ease-in, ease-out, ease-in-out).
• ಸಾಮಾನ್ಯ ಇಂಟರಾಕ್ಷನ್‌ಗಳಿಗಾಗಿ ಅನಿಮೇಷನ್ ಕೀಫ್ರೇಮ್‌ಗಳು.

ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಸೌಂದರ್ಯವನ್ನು ಅನ್ವಯಿಸುವುದು

ಸ್ವಯಂಚಾಲಿತ ಅನ್ವಯಿಕೆ (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"
        }
      ]
    }
  }
}

ನಿಮ್ಮ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ನೋಡುವುದು

ಏಜೆಂಟ್‌ಗೆ ಕೇಳಿ

"Show me my design system"

ಅಥವಾ

"What are my current design tokens?"

ಏಜೆಂಟ್ ನಿಮ್ಮ ಟೈಪೋಗ್ರಫಿ, ಬಣ್ಣಗಳು, இடைவெளி ಮತ್ತು ಇತರ ಟೋಕನ್‌ಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

theme.json ನೋಡುವುದು

ಕಚ್ಚಾ ಟೋಕನ್ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ನೋಡಲು /wp-content/themes/[theme-name]/theme.json ಅನ್ನು ಟೆಕ್ಸ್ಟ್ ಎಡಿಟರ್‌ನಲ್ಲಿ ತೆರೆಯಿರಿ.

ನಿಮ್ಮ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ನವೀಕರಿಸುವುದು

ತ್ವರಿತ ನವೀಕರಣಗಳು (Quick Updates)

ಏಜೆಂಟ್‌ಗೆ ನಿರ್ದಿಷ್ಟ ಬದಲಾವಣೆಗಳ ಬಗ್ಗೆ ಕೇಳಿ:

"Make the primary color darker"

ಅಥವಾ

"Increase the spacing scale by 20%"

ಅಥವಾ

"Change the heading font to a serif"

ಸಂಪೂರ್ಣ ಮರು ವಿನ್ಯಾಸ (Full Redesign)

ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಸೌಂದರ್ಯ ಕೌಶಲ್ಯವನ್ನು ಮರು-ಚಾಲನೆ ಮಾಡಿ:

"Let's redesign my entire design system"

ಇದು ನಿಮ್ಮ ಪ್ರಸ್ತುತ ಮೌಲ್ಯಗಳಿಂದ ಪ್ರಾರಂಭಿಸಿ, ಎಲ್ಲಾ ನಿರ್ಧಾರಗಳ ಮೂಲಕ ನಿಮಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುತ್ತದೆ.

ಭಾಗಶಃ ನವೀಕರಣಗಳು (Partial Updates)

ನಿರ್ದಿಷ್ಟ ಅಂಶಗಳನ್ನು ನವೀಕರಿಸಿ:

"Just update the color palette, keep everything else"

ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು (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)

ನಿಮ್ಮ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ದಾಖಲಿಸಿ:

• ನೀವು ನಿರ್ದಿಷ್ಟ ಬಣ್ಣಗಳನ್ನು ಏಕೆ ಆರಿಸಿಕೊಂಡಿರಿ.
• ಪ್ರತಿ ಟೋಕನ್ ಅನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು.
• ವಿನಾಯಿತಿಗಳು ಮತ್ತು ಅಂಚಿನ ಸಂದರ್ಭಗಳು (edge cases).

ಸಾಮಾನ್ಯ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆ ಮಾದರಿಗಳು (Common Design System Patterns)

ಆಧುನಿಕ ಕನಿಷ್ಠ (Modern Minimalist)

• ಸ್ಯಾನ್-ಸೆರಿಫ್ ಟೈಪೋಗ್ರಫಿ (Inter, Helvetica).
• ಸೀಮಿತ ಬಣ್ಣ ಪ್ಯಾಲೆಟ್ (2-3 ಬಣ್ಣಗಳು).
• ವಿಶಾಲ இடைவெளி.
• ಸೂಕ್ಷ್ಮ ಶ್ಯಾಡೋಗಳು.
• ಮೃದು, ವೇಗದ ಅನಿಮೇಷನ್‌ಗಳು.

따뜻 ಮತ್ತು ಸ್ನೇಹಪರ (Warm and Friendly)

• ಸೆರಿಫ್ ಮತ್ತು ಸ್ಯಾನ್-ಸೆರಿಫ್ ಮಿಶ್ರಣ.
• 따뜻 ಬಣ್ಣ ಪ್ಯಾಲೆಟ್ (ಕಿತ್ತಳೆ, 따뜻 ಬೂದು).
• ವೃತ್ತಾಕಾರದ ಮೂಲೆಗಳು (Rounded corners).
• ಮೃದು ಶ್ಯಾಡೋಗಳು.
• ಆಟದಂತಹ ಅನಿಮೇಷನ್‌ಗಳು.

ವೃತ್ತಿಪರ ಕಾರ್ಪೊರೇಟ್ (Professional Corporate)

• ಸ್ವಚ್ಛ ಸ್ಯಾನ್-ಸೆರಿಫ್ (Roboto, Open Sans).
• ಆಕ್ಸೆಂಟ್ ಬಣ್ಣದೊಂದಿಗೆ ನ್ಯೂಟ್ರಲ್ ಪ್ಯಾಲೆಟ್.
• ರಚನಾತ್ಮಕ இடைவெளி.
• ಕನಿಷ್ಠ ಶ್ಯಾಡೋಗಳು.
• ಸೂಕ್ಷ್ಮ ಟ್ರಾನ್ಸಿಷನ್‌ಗಳು.

ಸೃಜನಾತ್ಮಕ ಮತ್ತು ಧೈರ್ಯಶಾಲಿ (Creative and Bold)

• ವಿಶಿಷ್ಟ ಟೈಪೋಗ್ರಫಿ.
• ಬಲಿಷ್ಠ ಬಣ್ಣ ಪ್ಯಾಲೆಟ್.
• ವೈವಿಧ್ಯಮಯ இடைவெளி.
• ಬಲವಾದ ಶ್ಯಾಡೋಗಳು.
• ಗಮನಾರ್ಹ ಅನಿಮೇಷನ್‌ಗಳು.

ಸಮಸ್ಯೆ ಪರಿಹಾರ (Troubleshooting)

ನನ್ನ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಬದಲಾವಣೆಗಳು ಕಾಣಿಸುತ್ತಿಲ್ಲ

• ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕ್ಯಾಶೆ (cache) ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ.
• ಸ್ಟ್ಯಾಟಿಕ್ ಜನರೇಟರ್ ಬಳಸುತ್ತಿದ್ದರೆ ನಿಮ್ಮ ಸೈಟ್ ಅನ್ನು ಮರು-ನಿರ್ಮಿಸಿ (Rebuild).
• theme.json ವ್ಯಾಲಿಡ್ JSON ಆಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.
• ಥೀಮ್ ಸಕ್ರಿಯವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಬಣ್ಣಗಳು ವಿಭಿನ್ನ ಪುಟಗಳಲ್ಲಿ ವಿಭಿನ್ನವಾಗಿ ಕಾಣಿಸುತ್ತವೆ

• ಪ್ಲಗ್ಇನ್‌ಗಳಲ್ಲಿ ಸಂಘರ್ಷದ CSS ಇದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.
• ಎಲ್ಲಾ ಪುಟಗಳು ಒಂದೇ ಥೀಮ್ ಅನ್ನು ಬಳಸುತ್ತವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.
• ಯಾವುದೇ ಕ್ಯಾಶಿಂಗ್ ಪ್ಲಗ್ಇನ್‌ಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ.

ನಾನು ಹಿಂದಿನ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗೆ ಮರಳಿ ಹೋಗಲು ಬಯಸುತ್ತೇನೆ

• ಏಜೆಂಟ್‌ಗೆ ಕೇಳಿ: "Show me my design system history"
• ಹಿಂದಿನ ಮೌಲ್ಯಗಳಿಗೆ theme.json ಅನ್ನು ಕೈಯಾರೆ ಸಂಪಾದಿಸಿ.
• ವಿಭಿನ್ನ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಕೌಶಲ್ಯವನ್ನು ಮರು-ಚಾಲನೆ ಮಾಡಿ.

ಮುಂದಿನ ಹಂತಗಳು (Next Steps)

ನಿಮ್ಮ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದ ನಂತರ:

1. ನಿಮ್ಮ ಸೈಟ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ: ಹೊಸ ವಿನ್ಯಾಸವನ್ನು ನೋಡಲು ನಿಮ್ಮ ಸೈಟ್‌ಗೆ ಭೇಟಿ ನೀಡಿ.
2. ಹೆಚ್ಚು ಪರಿಷ್ಕರಿಸಿ: ಕೌಶಲ್ಯವನ್ನು ಮತ್ತೊಮ್ಮೆ ಬಳಸಿ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಮಾಡಿ.
3. ಟೆಂಪ್ಲೇಟ್‌ಗಳನ್ನು ರಚಿಸಿ: ನಿಮ್ಮ ವಿನ್ಯಾಸ ಟೋಕನ್‌ಗಳನ್ನು ಬಳಸಿ ಕಸ್ಟಮ್ ಬ್ಲಾಕ್ ಟೆಂಪ್ಲೇಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಿ.
4. ದಾಖಲಿಸಿ: ನಿಮ್ಮ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ತಂಡದ ಸದಸ್ಯರೊಂದಿಗೆ ಹಂಚಿಕೊಳ್ಳಿ.