නිර්මාණ පද්ධති අලංකාරය කුසලතාව (Design System Aesthetics Skill)

නිර්මාණ පද්ධති අලංකාරය කුසලතාව (Design System Aesthetics skill) කියන්නේ ඔබේ වෙබ් අඩවියේ දෘශ්‍ය අනන්‍යතාවය (visual identity) වැඩිදියුණු කරගන්න මඟ පෙන්වන ක්‍රමයක්. මේකෙන් ඔබ නිර්මාණය කරන නිර්මාණ පද්ධතියේ (design system) අකුරු වර්ග, වර්ණ, අතරමැදි හිස්තැන් (spacing), සහ චලනයන් (motion tokens) ගැන ස්ථාවර තීරණ ගැනීමට උදව් වෙනවා.

නිර්මාණ පද්ධති අලංකාරය කියන්නේ මොකක්ද?

නිර්මාණ පද්ධති අලංකාරය කියන්නේ පහත දේවල් ආවරණය කරන ව්‍යුහගත කුසලතාවකි:

• අකුරු වර්ග (Typography): ෆොන්ට් පවුම්, ප්‍රමාණයන්, බර සහ පේළි උස
• වර්ණ (Color): ප්‍රාථමික, ද්විතීයික, අවධාරණ සහ මධ්‍යස්ථ පැලට් (palettes)
• අතරමැදි හිස්තැන් (Spacing): Padding, margin සහ ගා පරාසයන් (gap scales)
• පරිවර්තන (Borders): රේඩියස් සහ පළල ටෝකන් (tokens)
• ** ছায়ා (Shadows)**: උස සහ ගැඹුර පිළිබඳ ටෝකන්
• චලනය (Motion): සජීවීකරණ (animations) සහ සංක්‍රාන්ති (transitions)

මේ තීරණ ඔබේ තේමයේ (theme.json) ගොනුවේ ගබඩා කරනු ලබන අතර, ඒ හරහා එකමුතු දෘශ්‍ය පද්ධතියක් නිර්මාණය වේ.

නිර්මාණ පද්ධති අලංකාරය භාවිතා කළ යුත්තේ ඇයි?

ස්ථාවරත්වය (Consistency)

නිර්මාණ පද්ධතියක් සහතික කරන්නේ:

• සියලුම පෙළ සඳහා එකම අකුරු ප්‍රමාණයක් භාවිතා කිරීම
• වෙබ් අඩවිය පුරා වර්ණ ඒකාකාරීව භාවිතා කිරීම
• අතරමැදි හිස්තැන් නිරීක්ෂණය කළ හැකි රටාවකට අනුව තිබීම
• සජීවීකරණ එකිනෙකට සම්බන්ධ වී පෙනීම

කාර්යක්ෂමතාව (Efficiency)

පිටු පිටුවෙන් නිර්මාණ තීරණ ගැනීම වෙනුවට, ඔබ:

• ටෝකන් (tokens) එක් වරක් නිර්වචනය කරයි
• ඒවා සෑම තැනකම යොදයි
• එක් අගයක් වෙනස් කිරීමෙන් ගෝලීය වශයෙන් යාවත්කාලීන කරයි

නම්‍යශීලී බව (Flexibility)

ඔබට කළ හැක්කේ:

• ඔබේ මුළු නිර්මාණ පද්ධතියම ඉක්මනින් සකස් කිරීම
• විවිධ අලංකාරයන් සමඟ අත්හදා බැලීම
• පරිණාමය වන විට දාම අනන්‍යතාවය පවත්වා ගැනීම

නිර්මාණ පද්ධති අලංකාරය කුසලතාව ක්‍රියාත්මක කරන්නේ කෙසේද?

අතින් ක්‍රියාත්මක කිරීම (Manual Activation)

ඔබට ඕනෑම වෙලාවක මෙම කුසලතාව ආරම්භ කළ හැකියි:

"Help me refine my design system"

හෝ

"Let's improve my site's aesthetics"

හෝ

"Guide me through design system decisions"

ස්වයංක්‍රීය යෝජනා (Automatic Suggestions)

ඔබ පහත අවස්ථාවලදී මෙම කුසලතාව භාවිතා කිරීමට ඒජන්ට් (Agents) යෝජනා කළ හැකිය:

• නිර්මාණ වෙනස්කම් ඉල්ලා සිටින විට
• "නවීන" හෝ "වෘත්තීය" ප්‍රතිනිර්මාණයක් ඉල්ලා සිටින විට
• දෘශ්‍ය ස්ථාවරත්වය වැඩිදියුණු කිරීමට අවශ්‍ය වූ විට
• ඔබේ වෙබ් අඩවිය දියත් කිරීමට සූදානම් වන විට

නිර්මාණ පද්ධති අලංකාර කිරීමේ ක්‍රියාවලිය (The Design System Aesthetics Process)

පියවර 1: අකුරු වර්ග (Typography)

ඒ ඒ ෆොන්ට් තෝරා ගැනීම ගැන ඇගයීමට ලක් කරන ප්‍රශ්න මෙන්න:

ඔබ කැමති අකුරු වර්ගයේ විලාසය කුමක්ද?
- Serif (සාම්ප්‍රදායික, අලංකාර)
- Sans-serif (නවීන, පිරිසිදු)
- Monospace (තාක්ෂණික, කේතයට අවධානය යොමු කරන)

ඔබේ ප්‍රධාන මාතෘකා (heading) සඳහා වන ෆොන්ට් එක:
- ඔබට වෙනස් මාතෘකාවක් අවශ්‍යද, නැත්නම් ශරීර පෙළට (body text) එකම එකක් භාවිතා කළ යුතුද?
- කැමැත්ත: තද (bold), අලංකාර, විනෝදජනක, අවම?

ඔබේ ශරීර පෙළ සඳහා වන ෆොන්ට් එක:
- කියවීමේ හැකියාව ප්‍රධානයි. ඔබ කැමති වන්නේ:
  - විශාල, වැඩි ඉඩක් සහිත පෙළ
  - සංයුක්ත, කාර්යක්ෂම පෙළ
  - සම්මත ප්‍රමාණය

ඉන්පසු ඒ ඒ දේ නිර්වචනය කෙරේ:

• Heading font: මාතෘකා සහ ශීර්ෂයන් සඳහා ප්‍රධාන ෆොන්ට් එක.
• Body font: ඡේද සහ ශරීර පෙළ සඳහා වන ෆොන්ට් එක.
• Monospace font: කේත (code) සහ තාක්ෂණික අන්තර්ගතයන් සඳහා වන ෆොන්ට් එක.
• Size scale: පෙර නිර්වචනය කරන ලද ප්‍රමාණ (කුඩා, මූලික, විශාල, XL වැනි).
• Weight scale: ෆොන්ට් බර (regular, medium, bold වැනි).
• Line height: කියවීමේ හැකියාව සඳහා පේළි අතර ඇති හිස්තැන.

පියවර 2: වර්ණ මාලාව (Color Palette)

අපගේ වර්ණ මාලාව නිර්වචනය කර ගනිමු.

ප්‍රාථමික වර්ණය (ඔබේ වෙළඳ නාම වර්ණය):
- දැනට: [පවතින වර්ණය පෙන්වීම]
- වෙනස් කිරීමට: [වර්ණ තෝරන්නා හෝ හෙක්සadecimal කේතය]

ද්විතීයික වර්ණය (අනුබද්ධ වර්ණය):
- දැනට: [පවතින වර්ණය පෙන්වීම]
- වෙනස් කිරීමට: [වර්ණ තෝරන්නා හෝ හෙක්සadecimal කේතය]

අවධානය දෙන වර්ණය (Highlights සහ CTAs - Call to Action):
- දැනට: [පවතින වර්ණය පෙන්වීම]
- වෙනස් කිරීමට: [වර්ණ තෝරන්නා හෝ හෙක්සadecimal කේතය]

අවම මාලාව (පෙළ සඳහා, දාර සඳහා, පසුබිම් සඳහා අළු):
- ලා පැහැති: [වර්ණය]
- මධ්‍යස්ථ: [වර්ණය]
- තද: [වර්ණය]

ඒ ඒ දේ ඇතුළුව සම්පූර්ණ වර්ණ මාලාවක් නිර්මාණය කෙරේ:

• ප්‍රාථමික, ද්විතීයික සහ අවධානය දෙන වර්ණ.
• අළු පැහැති (ලා පැහැති, මධ්‍යස්ථ, තද).
• අර්ථවත් වර්ණ (සාර්ථකත්වය, අනතුරු ඇඟවීම, දෝෂ).
• Hover සහ Active තත්ත්වයන්.

පියවර 3: ඉඩ ප්‍රමාණය (Spacing)

ඔබට කොතරම් ඉඩක් අවශ්‍යද?

අවකාශයේ ප්‍රමාණය පිළිබඳ මනාපයන්:

• සංයුක්ත (සැළකිය යුතු, කාර්යක්ෂම සැකසුම්)
• සාමාන්‍ය (සමතුලිත අවකාශයන්)
• පුළුල් (විශාල හිස් අවකාශයන්)

මෙයින් බලපාන්නේ:

• බොත්තම් සහ කාඩ්පත් ඇතුළත පේපින්ග් (Padding)
• කොටස් අතර මායිම් (Margins)
• ග්‍රිඩ් අයිතම අතර පරතරය (Gap)

ඒ අනුව, ඒජන්ට් විසින් ස්පේසින් ටෝකන (spacing tokens) නිර්වචනය කරයි:

• මූලික ඒකකය (සාමාන්‍යයෙන් 4px හෝ 8px)
• පරිමාණය: xs, sm, md, lg, xl, 2xl
• පේපින්ග්, මායිම් සහ ගෑප් සඳහා නිශ්චිත අගයන්

පියවර 4: දාර (Borders) සහ සෙවනැලි (Shadows)

දෘශ්‍ය ගැඹුර සහ නිර්වචනය:

බෝඩර් රේඩියස් මනාපය:
- තියුණු (වටකුරු නොවීම)
- සියුම් (කුඩා රේඩියස්)
- වටකුරු (මධ්‍යම රේඩියස්)
- ඉතා වටකුරු (විශාල රේඩියස්)

සෙවනැල්ලේ ගැඹුර:
- පැතලි (සෙවනැලි නොමැති)
- සියුම් (සුළු සෙවනැලි)
- කැපී පෙනෙන (බලවත් සෙවනැලි)

ඒ අනුව, ඒජන්ට් විසින් නිර්මාණය කරනු ලැබේ:

• බෝඩර් රේඩියස් ටෝකන (බොත්තම්, කාඩ්පත්, ආදාන ක්ෂේත්‍ර සඳහා)
• උස මට්ටම් සඳහා සෙවනැලි ටෝකන
• බෝඩර් පළල ටෝකන

පියවර 5: චලනය සහ සජීවීකරණය (Motion and Animation)

ඔබේ වෙබ් අඩවිය අන්තර්ක්‍රියාකාරී වූ විට හැඟෙන්නේ කෙසේද?

සජීවීකරණ මනාපය:
- අවම (සජීවීකරණ නොමැති)
- සියුම් (සුළු සංක්‍රාන්ති)
- විනෝදජනක (පැහැදිලි සජීවීකරණ)

විශේෂ සජීවීකරණ:
- පිටුව මාරුවීම්: මැකීම (fade), ලිස්සා යාම (slide), නැත්නම් කිසිවක් නොවේ?
- බොත්තම් හොවර් කිරීම: පරිමාණය වෙනස් වීම, වර්ණ වෙනස් වීම, නැත්නම් දෙකම?
- පටවන තත්ත්වයන් (Loading states): ස්පිනර් (spinner), ස켈ට්න් (skeleton), නැත්නම් ප්‍රගති තීරුවක් (progress bar)?

ඒ අනුව, ඒජන්ට් විසින් නිර්වචනය කරනු ලැබේ:

• සංක්‍රාන්ති කාලයන් (වේගවත්, සාමාන්‍ය, මන්දගාමී)
• Easing ශ්‍රිත (ease-in, ease-out, ease-in-out)
• පොදු අන්තර්ක්‍රියා සඳහා සජීවීකරණ ප්‍රධාන රාමු (Animation keyframes)

නිර්මාණ පද්ධති විලාසයන් යෙදීම (Applying Design System Aesthetics)

ස්වයංක්‍රීය යෙදීම (Automatic Application)

ඔබ කුසලතාව සම්පූර්ණ කළ පසු, ඒජන්ට්:

1. සියලු ටෝකන සමඟ ඔබේ තේමාවේ theme.json යාවත්කාලීන කරයි
2. නිර්මාණ පද්ධතිය ඔබගේ ක්‍රියාකාරී තේමාවට යොදයි
3. නව පද්ධතියට ගැලපෙන පරිදි බ්ලොක් විලාසයන් (block styles) නැවත ජනනය කරයි
4. යාවත්කාලීන කරන ලද තේමාව සක්‍රීය කරයි

අතින් යෙදීම (Manual Application)

ඔබට theme.json කෙලින්ම සංස්කරණය කළ හැකිය:

ඔබේ Design System එක බලන ආකාරය

Agent එකට අසන්න

"Show me my design system"

හෝ

"What are my current design tokens?"

Agent එකෙන් ඔයාගේ typography, colors, spacing සහ වෙනත් tokens පෙන්වනු ඇත.

theme.json බලන්න

Raw token නිර්වචන බැලීමට /wp-content/themes/[theme-name]/theme.json කියන ෆයිලය text editor එකකින් විවෘත කරන්න.

ඔබේ Design System එක යාවත්කාලීන කිරීම

ඉක්මන් යාවත්කාලීන කිරීම් (Quick Updates)

විශේෂ වෙනස්කම් සඳහා Agent එකෙන් අසන්න:

"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)

• හැම තැනකම එකම tokens භාවිතා කරන්න.
• එක් වතාවක් පමණක් නිර්මාණය කරන ලද colors හෝ sizes නිර්මාණය නොකරන්න.
• අගයන් දෘඩව (hardcoding) ලිවීම වෙනුවට tokens වෙත යොමු කරන්න.

නම් කිරීම (Naming)

පැහැදිලි, තේරුම් ගත හැකි නම් භාවිතා කරන්න:

• ✓ primary, secondary, accent

• ✗ blue, color-1, main

• ✓ heading-lg, body-sm

• ✗ font-size-24, text-large

පරිමාණය කිරීම (Scalability)

ස්කේලර් කළ හැකි ඔබේ පද්ධතිය සැලසුම් කරන්න:

• පික්සල් (pixels) වෙනුවට සාපේක්ෂ ඒකක (rem, em) භාවිතා කරන්න.
• අහඹු අගයන් වෙනුවට ස්කේලර් (xs, sm, md, lg, xl) නිර්මාණය කරන්න.
• අනාගත එකතු කිරීම් සඳහා සැලසුම් කරන්න.

ලේඛනගත කිරීම

ඔබේ නිර්මාණ පද්ධතිය ලේඛනගත කරන්න:

• ඔබ නිශ්චිත වර්ණ තෝරා ගත්තේ ඇයි?
• සෑම ටෝකනයක් (token) භාවිතා කළ යුත්තේ කවදාද?
• ව්‍යතිරේක සහ අන්තයක අවස්ථා (exceptions and edge cases).

පොදු නිර්මාණ පද්ධති රටා (Common Design System Patterns)

නූතන අවමවාදී (Modern Minimalist)

• සන්සෙරි නොවන අකුරු වර්ග (Inter, Helvetica)
• වර්ණ මාලාවක් සීමිතයි (වර්ණ 2-3ක්)
• විශාල හිස්තැන් (Generous spacing)
• සියුම් සෙවනැලි (Subtle shadows)
• සුමට, වේගවත් ඇනිමේෂන් (Smooth, fast animations)

උණුසුම් සහ මිත්‍රශීලී (Warm and Friendly)

• සෙරෆ් සහ සන්සෙරි වර්ග මිශ්‍ර කිරීම
• උණුසුම් වර්ණ මාලාවක් (තැඹිලි, උණුසුම් අළු)
• වටකුරු කොන (Rounded corners)
• මෘදු සෙවනැලි (Soft shadows)
• විනෝදජනක ඇනිමේෂන් (Playful animations)

වෘත්තීය ආයතනික (Professional Corporate)

• පිරිසිදු සන්සෙරි වර්ග (Roboto, Open Sans)
• ප්‍රධාන වර්ණයක් සහිත මධ්‍යස්ථ වර්ණ මාලාවක් (Neutral palette with accent color)
• ව්‍යුහගත හිස්තැන් (Structured spacing)
• අවම සෙවනැලි (Minimal shadows)
• සියුම් සංක්‍රාන්ති (Subtle transitions)

නිර්මාණශීලී සහ නිර්භීත (Creative and Bold)

• කැපී පෙනෙන අකුරු වර්ග
• තද වර්ණ මාලාවක් (Bold color palette)
• විවිධ හිස්තැන් භාවිතය
• ශක්තිමත් සෙවනැලි (Strong shadows)
• කැපී පෙනෙන ඇනිමේෂන්

ගැටළු නිරාකරණය කිරීම (Troubleshooting)

මගේ නිර්මාණ පද්ධතියේ වෙනස්කම් පෙන්වන්නේ නැහැ

• ඔබේ බ්‍රව්සරයේ cache හි ඇති දේ මකා දමන්න.
• ස්ථිතික ජනකයක් (static generator) භාවිතා කරන්නේ නම් ඔබේ වෙබ් අඩවිය නැවත ගොඩනඟා ගන්න.
• theme.json නිවැරදි JSON එකක් තිබේදැයි පරීක්ෂා කරන්න.
• තේමාව ක්‍රියාත්මක (active) වී ඇත්දැයි තහවුරු කරන්න.

විවිධ පිටු වල වර්ණ වෙනස්ව පෙනේ

• 플ලග්ඉන් වල ගැටුම් ඇති CSS තිබේදැයි පරීක්ෂා කරන්න.
• සියලු පිටු එකම තේමාව භාවිතා කරන බව තහවුරු කරන්න.
• ඕනෑම caching plugin එකක් මකා දමන්න.

මට පෙර නිර්මාණ පද්ධතියකට යන්න අවශ්‍යයි

• ඒ සඳහා නියෝජිතයාගෙන් අසන්න: "Show me my design system history"
• පෙර අගයන් සඳහා theme.json අතින් සංස්කරණය කරන්න.
• වෙනස් තේරීම් සහිතව කුසලතාව නැවත ක්‍රියාත්මක කරන්න (Re-run the skill with different choices).

ඊළඟ පියවර (Next Steps)

ඔබේ නිර්මාණ පද්ධතිය නිර්වචනය කිරීමෙන් පසු:

1. ඔබේ වෙබ් අඩවිය පරීක්ෂා කරන්න: නව නිර්මාණය දැකීමට ඔබේ වෙබ් අඩවියට පිවිසෙන්න
2. තවදුරට වැඩි දියුණු කරන්න: නැවත එම කුසලතාව භාවිතා කරමින් වෙනස්කම් සිදු කරන්න
3. Template එකක් සාදන්න: ඔබේ design tokens (නිර්මාණ කොටස්) භාවිතයෙන් කස්ටම් block templates (අවශ්‍ය කොටු සැකිලි) ගොඩනගා ගන්න
4. ලේඛනගත කරන්න: ඔබේ design system (නිර්මාණ පද්ධතිය) කණ්ඩායමේ සාමාජිකයන් සමඟ බෙදා ගන්න