ඔබේ AI සපයන්නාට ටෙලිප්රොම්ප්ටර් කිරීම නවත්වා Subagents, Skills සහ Commands සාදන්න
Prompt මත යැපීමෙන් බුද්ධිමත් ඒජන්ට් පද්ධති වෙත
බොහෝ අය අදත් AI භාවිත කරන්නේ ටෙලිප්රොම්ප්ටරයක් වගේ.
ඔවුන් prompt එකක් ටයිප් කරනවා. ඉවසීමෙන් බලා සිටිනවා. පිළිතුරක් ලැබෙනවා. එය කොහේහරි copy-paste කරනවා. ඊට පස්සේ ආයෙත් එකම දේ. ආයෙත්, ආයෙත්. සෑම සංවාදයක්ම පටන් ගන්නේ බිංදුවෙන්. සෑම සංවාදයක්ම කලින් සිදු වූ දේ අමතක කරනවා.
මෙය සහයෝගයක් නොවෙයි. එය අමතර පියවර සහිත අණ දීමක් පමණයි.
2026 දී ඔබ තවමත් ඔබේ AI සපයන්නාට ටෙලිප්රොම්ප්ටර් කරමින් සිටියොත්, ඔබ යට සිදුවන මුළු පරිවර්තනයම මග හැරෙනවා.
ටෙලිප්රොම්ප්ටර් ගැටලුව
AI ටෙලිප්රොම්ප්ටරයක් ලෙස භාවිත කරන විට, ස්වයංක්රීයව ක්රියා කළ හැකි පද්ධතියක් ඔබ සලකන්නේ එක් වරක් පමණක් පෙළ උත්පාදනය කරන යන්ත්රයක් ලෙසයි. රටාව මෙහෙමයි:
- ඔබ සවිස්තරාත්මක prompt එකක් ලියනවා
- පිළිතුර එනතුරු බලා සිටිනවා
- ප්රතිදානය අතින් ඇගයීමට ලක් කරනවා
- එය ශෝධනය කර නැවත prompt කරනවා
- chat එක වසන විට සියලු සන්දර්භය (context) නැති වෙනවා
මෙම ආකෘතියේ මාරාන්තික දුර්වලතා තුනක් තිබේ:
ස්ථිර දැනුමක් නැත. සෑම සංවාදයක්ම හිස් පුටුවක්. එකම සන්දර්භය නැවත නැවත පැහැදිලි කරන්න වෙනවා. ඔබේ AI ඔබේ codebase එක, ඔබේ කැමැත්ත, ඔබේ සීමා, ඔබේ ඉතිහාසය කිසිවක් නොදනී.
බාර දීමක් නැත. බාධකය ඔබම වෙනවා. සෑම තීරණයක්ම, සෑම තහවුරු කිරීමක්ම, සෑම ඊළඟ පියවරක්ම ඔබේ මැදිහත්වීම ඉල්ලනවා. ඊළඟට කළ යුතු දේ ඔබ කියනතුරු AI බලා සිටිනවා.
විශේෂීකරණයක් නැත. කේත ලිවීම, ලේඛන, සැලසුම, පරීක්ෂාව, යෙදවීම ඒ සියල්ලටම ඔබ භාවිත කරන්නේ එකම පොදු අතුරුමුහුණතක්. එකම prompt ශෛලියක්. එකම context window එකක්. එක සංවාදයක් බොහෝ දෙනෙකුගේ වැඩ කරනවා.
ටෙලිප්රොම්ප්ටර් ආකෘතිය AI සලකන්නේ මෙවලමක් ලෙසයි. නමුත් මෙවලම් ස්වයංක්රීයතාව පුළුල් කරන්නේ නැහැ. ඒජන්ට්ලා (agents) කරනවා.
ඒජන්ට්ලා ලෙස සිතන විට වෙනස් වන දේ
Claude Code හි ඒජන්ට් ගෘහනිර්මාණය මූලික කොටස් තුනකින් සමන්විතයි:
- Subagents: වෙන් වූ context window සහිත විශේෂිත Claude අවස්ථා (~/.claude/agents/)
- Skills: SKILL.md ගොනු සහිත, ස්වයංක්රීයව ක්රියාත්මක වන දැනුම් මොඩියුල (~/.claude/skills/)
- Commands: පැහැදිලි ක්රියා සඳහා පරිශීලකයා ක්රියාත්මක කරන /slash විධාන (~/.claude/commands/)
සාම්ප්රදායික prompt කිරීමෙන් ප්රධාන වෙනස:
- Skills සන්දර්භය අනුව Claude විසින් ස්වයංක්රීයව ක්රියාත්මක කරනු ලැබේ
- Commands සඳහා ඔබ
/commandපැහැදිලිව ටයිප් කළ යුතුය - Subagents තමන්ගේම මෙවලම් සමඟ වෙනම context එකක ක්රියා කරයි
වෙනස බලන්න:
ටෙලිප්රොම්ප්ටර් ක්රමය:
"අපේ design system රටා සහ accessibility ප්රමිතීන්ට අනුව, රූපයක්, මාතෘකාවක්, ප්රධාන පෙළක් සහ primary බොත්තමක් සහිත card component එකක් මට ලියලා දෙන්න..."
Claude Code ක්රමය:
/generate card --variant=default --with-image=true --with-button=trueපළමුවැන්න ඉල්ලීමක්. දෙවැන්න card එකක් යනු කුමක්ද, ඔබේ design system එකට අවශ්ය දේ, අදාළ accessibility ප්රමිතීන් මොනවාද, තමන්ගේම ප්රතිදානය තහවුරු කරන්නේ කෙසේද යන්න දැනටමත් දන්නා skill එකක් අමතනවා.
ගෘහනිර්මාණය: Subagents, Skills සහ Commands
ටෙලිප්රොම්ප්ටර් ආකෘතිය ප්රතිස්ථාපනය කරන ව්යුහය මෙන්න:
1 වන මට්ටම: Subagents
Subagents යනු ~/.claude/agents/ හි ඇති, වැඩ සමාන්තරව ක්රියාත්මක කරන ස්වාධීන markdown ගොනු ය. ඒවාට තමන්ගේම context window ඇති අතර skills අමතන්න පුළුවන්.
~/.claude/agents/
├── header-builder.md
├── footer-builder.md
└── dashboard-builder.mdසෑම subagent ගොනුවකටම YAML frontmatter තිබේ:
- name: පැහැදිලි හඳුනාගැනීමේ නාමය
- description: එය කරන දේ සහ එය ක්රියාත්මක කළ යුත්තේ කවදාද යන්න
- tools: අවසර ලත් හැකියාවන් (Read, Write, Bash, Grep, Glob)
උදාහරණ subagent එකක් (header-builder.md):
---
name: header-builder
description: Build complete header components with navigation
tools: Read, Write, Bash, Glob, Grep
--- You are a header component specialist...2 වන මට්ටම: Skills
Skills යනු ස්වයංක්රීයව ක්රියාත්මක වන දැනුම් මොඩියුල ය. skill එකක අරමුණට ගැළපෙන දෙයක් ඔබ Claude ගෙන් ඉල්ලූ විට, Claude එය ස්වයංක්රීයව යොදා ගනී.
~/.claude/skills/
├── card/
│ ├── SKILL.md
│ ├── workflows/
│ │ ├── generate.md
│ │ ├── validate.md
│ │ └── improve.md
│ ├── references/
│ │ └── schema.yml
│ └── scripts/
│ └── validate.pyමෙය Atomic Design ක්රමවේදය අනුගමනය කරයි: atoms, molecules, organisms. සෑම skill එකක්ම හරියටම එක දෙයක ප්රවීණයෙක්. ඔබට card එකක් අවශ්ය වූ විට card skill එක ස්වයංක්රීයව ක්රියාත්මක වෙනවා.
සෑම skill එකක්ම දන්නේ:
- component එකේ schema එක (props, slots, variants)
- ඔබේ design system සම්මුතීන්
- framework-විශේෂිත රටා
- WCAG accessibility අවශ්යතා
- එය යොමු විය හැකි අදාළ වෙනත් skills
3 වන මට්ටම: Commands
Commands යනු පරිශීලකයා ක්රියාත්මක කරන කෙටිමං ය. ඒවා අමතන්න ඔබ /command ටයිප් කරනවා. ඒවා skill workflows තුළ හෝ ගෝලීය ලෙස පිහිටා තිබේ:
~/.claude/skills/card/workflows/
├── generate.md # /generate card
├── validate.md # /validate card
├── improve.md # /improve card
├── document.md # /document card
├── test.md # /test card
└── a11y.md # /a11y cardCommands සැලසුම්කරණය සඳහා subagents අමතන්න පුළුවන්, ඉන්පසු ප්රධාන Claude ක්රියාත්මක කිරීම හසුරුවයි. මෙය ඔබට සම්පූර්ණ මෙවලම් ප්රවේශය සහිත ව්යුහගත workflows ලබා දෙයි.
සම්පූර්ණ උදාහරණය: Card Skill
සැබෑ skill එකක් සමඟ මෙය හරියටම ක්රියා කරන ආකාරය පෙන්වන්නම්:
Skill ව්යුහය
~/.claude/skills/card/
├── SKILL.md # Core prompt and instructions
├── workflows/ # Slash commands
│ ├── generate.md
│ ├── validate.md
│ ├── improve.md
│ ├── document.md
│ ├── test.md
│ └── a11y.md
├── references/ # Documentation loaded into context
│ └── schema.yml
└── scripts/ # Executable Python/Bash scripts
└── validate.pySKILL.md ගොනුව
---
name: card
description: Generate and validate card components
for any design system with accessibility checks
--- # Card Skill When user requests card components, this skill
auto-triggers based on context.
## Schema props:
title: string
body: string
image: { src, alt, width }
variant: default | horizontal | overlay
slots:
header: Custom header content
footer: Buttons, links
## Related Skills This skill can reference:
- image
- heading
- button
- link
- textSlash Commands භාවිතය
අලුත් card එකක් උත්පාදනය කරන්න:
/generate card \ --variant="default" \ --title="Welcome" \ --with-image=true \ --with-button=trueදැනට ඇති card එකක් තහවුරු කරන්න:
/validate card \ --file="components/card.jsx"Accessibility අනුකූලතාව පරීක්ෂා කරන්න:
/a11y card --level="AA"නිශ්චිත සන්දර්භයකට UX වැඩිදියුණු කරන්න:
/improve card \ --context="e-commerce product listing" \ --focus="conversion"තිරය පිටුපස සිදුවන දේ
ඔබ /generate card අමතන විට, Claude:
- card skill එක ක්රියාත්මක කරයි: SKILL.md context එකට පූරණය වේ
- schema එක කියවයි: ඔබේ පරාමිති අවසර ලත් props වලට එරෙහිව තහවුරු කරයි
- වෙනත් skills වෙත යොමු වේ: image, heading, button skills තමන්ගේ ප්රවීණත්වය සපයයි
- workflow එක ධාවනය කරයි: workflows/generate.md ක්රියාත්මක වේ
- තමන්ම තහවුරු කරයි: තමන්ගේම ප්රතිදානය මත validate workflow එක ධාවනය කරයි
- ප්රතිඵලය ලබා දෙයි: component එකත් අනතුරු ඇඟවීම් ඇත්නම් ඒවාත් සපයයි
card skill එක markup උත්පාදනය කිරීමෙන් නොනවතියි. එය විශේෂඥයන්ගේ පද්ධතියක් සම්බන්ධීකරණය කරයි; ඒ සෑම කෙනෙක්ම තමන්ගේ ක්ෂේත්රයේ ප්රවීණත්වය දායක කරයි.
මෙය වැදගත් ඇයි: ගොඩනඟන්නෙකුගෙන් පද්ධති චින්තකයෙකු වෙත
ටෙලිප්රොම්ප්ටර් ආකෘතිය ඔබව ක්රියාකරුවා ලෙසම තබයි. skill ආකෘතිය ඔබව ගෘහ නිර්මාණ ශිල්පියා කරයි.
මම prompts ලිවීමෙන් skills සැලසුම් කිරීමට මාරු වූ විට, දේවල් කිහිපයක් වෙනස් වුණා:
මම context නැවත නැවත කීම නැවැත්තුවා. සෑම skill එකක්ම තම ක්ෂේත්රය දැනටමත් දනී. card එකක් අවශ්ය වන සෑම වතාවකම card එකක් යනු කුමක්දැයි මම පැහැදිලි කරන්නේ නැහැ.
මම සංයුතියෙන් (composition) සිතන්න පටන් ගත්තා. පිටුවක් එක prompt එකක් නොවෙයි; එය organisms සම්බන්ධීකරණයක්, ඒවා molecules සම්බන්ධීකරණයක්, ඒවා atoms සම්බන්ධීකරණයක්. සෑම ස්ථරයකටම තමන්ගේම skill එකක් තිබේ.
මම තහවුරු කිරීම බාර දුන්නා. සෑම ප්රතිදානයක්ම අතින් සමාලෝචනය කරනවා වෙනුවට, /validate විධානය ව්යුහය පරීක්ෂා කරයි, /a11y විධානය WCAG අනුකූලතාව පරීක්ෂා කරයි, /test විධානය ස්වයංක්රීය පරීක්ෂා ධාවනය කරයි. මම සමාලෝචනය කරන්නේ ව්යතිරේක මිස සෑම ප්රතිඵලයක්ම නොවෙයි.
මම ආයතනික දැනුමක් ගොඩනඟා ගත්තා. skill එකක SKILL.md වැඩිදියුණු කරන විට, ඒ වැඩිදියුණුව පවතිනවා. පද්ධතිය එක සංවාදයක් තුළ පමණක් නොව, කාලයත් සමඟ දක්ෂ වෙනවා.
මෙය AI භාවිත කිරීම සහ AI සමඟ ගොඩනැගීම අතර වෙනසයි.
සැලසුම යනු කේතයයි
design systems සමඟ මගේ වැඩවලදී, මම මූලධර්මයකට පැමිණ ඇත: සැලසුම යනු කේතයයි (The Design Is the Code).
design tokens, component schemas සහ agent වින්යාසයන් එකිනෙක ගැළපෙන විට, නිර්මාණකරුවන් නිශ්චිතව දක්වන දේ සහ සංවර්ධකයින් ගොඩනඟන දේ අතර පරිවර්තන ස්ථරයක් නැත. පිරිවිතරයම ක්රියාත්මක කිරීමයි.
ඒජන්ට්ලා මෙය සැබෑ කරන්නේ මෙහෙමයි:
# The schema IS the source of truth schema: props: variant: type: string
enum: [primary, secondary, success, danger, warning, info] default: primary
size: type: string
enum: [sm, md, lg] default: md
tokens: colors: - --btn-bg
- --btn-color
- --btn-border-colorමෙම schema එක ලේඛනයක් පමණක් නොවෙයි. එය සත්යයේ මූලාශ්රයයි. ඒජන්ට් එය පදනම් කරගෙන components උත්පාදනය කරයි. validator එය සමඟ සසඳා පරීක්ෂා කරයි. design tokens එයට යොමු වේ. එක ගොනුවක්, බොහෝ භාවිත.
නිර්මාණකරුවෙක් Figma හි token අගයන් යාවත්කාලීන කළ විට, agent වින්යාසය යාවත්කාලීන වේ. agent වින්යාසය යාවත්කාලීන වූ විට, උත්පාදිත components යාවත්කාලීන වේ. සැලසුම යනු කේතයයි, මන්ද ඒ දෙකම එකම schema එකකින් ව්යුත්පන්න වන නිසා.
Claude Code සමඟ ගොඩනැගීම පටන් ගන්නේ කෙසේද
ටෙලිප්රොම්ප්ටර් ආකෘතියෙන් ඉදිරියට යාමට ඔබ සූදානම් නම්, ප්රායෝගික මාර්ගයක් මෙන්න:
පළමු පියවර: ඔබේ ක්ෂේත්ර හඳුනාගන්න
ඔබේ වැඩවල කුමන අංශ පුනරාවර්තන, රීති-බැඳුණු, සන්දර්භය-මත රඳා පවතින ඒවාද? ඒවා skill සඳහා අපේක්ෂකයන්:
- කේත උත්පාදනය
- ලේඛන
- පරීක්ෂාව
- සමාලෝචනය සහ තහවුරු කිරීම
- Design system කළමනාකරණය
- යෙදවීම සහ DevOps
දෙවන පියවර: ඔබේ පළමු skill එක සාදන්න
සරල SKILL.md එකකින් පටන් ගන්න:
---
name: my-component
description: Generate and validate my-component
--- # My Component Skill When user asks about my-component, apply these rules...තෙවන පියවර: Workflows (Commands) එක් කරන්න
workflows/ තුළ මූලික විධාන හය සාදන්න:
| විධානය | අරමුණ |
|---|---|
/generate | අලුත් දේවල් නිර්මාණය කරන්න |
/validate | දැනට ඇති දේ පරීක්ෂා කරන්න |
/improve | වැඩිදියුණු කිරීම් යෝජනා කරන්න |
/document | පැහැදිලි කර වාර්තා කරන්න |
/test | ස්වයංක්රීය පරීක්ෂණ සාදන්න |
/a11y | WCAG අනුකූලතාව පරීක්ෂා කරන්න |
සෑම විධානයක්ම උපදෙස් සහිත markdown ගොනුවකි.
සිව්වන පියවර: Skill යොමු ස්ථාපනය කරන්න
Skills වෙනත් skills වෙත යොමු විය හැක:
## Related Skills This skill uses:
- image (for card images)
- button (for CTAs)
- heading (for titles)මෙම පරායත්තතා සිතියම්ගත කරන්න. ධූරාවලිය ඔබේ ක්ෂේත්රයේ ස්වභාවික ව්යුහයට ගැළපිය යුතුය.
පස්වන පියවර: සංකීර්ණ කාර්යයන් සඳහා Subagents සාදන්න
වෙන් කළ context එකක් හෝ සමාන්තර ක්රියාත්මක කිරීමක් අවශ්ය වූ විට, ~/.claude/agents/ තුළ subagent ගොනුවක් සාදන්න:
---
name: header-builder
description: Build complete header components with navigation, logo, and search
tools: Read, Write, Bash, Glob, Grep
--- You are a header component specialist. When building headers:
1. Check existing header patterns in the codebase
2. Use the nav, button, logo skills for sub-components
3. Ensure responsive design and accessibilityඔබේ Skill පුස්තකාලය ගොඩනඟන්න
ඔබේ skills Atomic Design අනුව සකස් කරන්න:
| වර්ගය | භූමිකාව | උදාහරණ |
|---|---|---|
| Atoms | මූලික ගොඩනැගිලි කොටස් | button, input, checkbox, avatar, badge, icon, link, image |
| Molecules | atoms සංයෝජන | card, modal, tabs, accordion, alert, dropdown, toast |
| Organisms | සංකීර්ණ components | header, footer, dashboard, login-form, hero, sidebar |
සෑම skill එකකටම:
- තමන්ගේම
SKILL.mdවින්යාසයක් ඇත - slash commands සහිත
workflows/ඇත - ලේඛන සහිත
references/ඇත - ස්වයංක්රීයකරණය සඳහා
scripts/ඇත - තමා යොමු වන වෙනත් skills දනී
මෙය Claude සන්දර්භය අනුව නිවැරදි skill එක ස්වයංක්රීයව ක්රියාත්මක කරන, ස්ථාවර හා පුළුල් කළ හැකි පද්ධතියක් නිර්මාණය කරයි.
අනාගතය ඒජන්ට් මූලිකයි
Atomic Design නිර්මාතෘ Brad Frost මේ පරිවර්තනය ගැන කතා කරමින් සිටී: design systems යන්ත්ර-කියවිය හැකි යටිතල පහසුකම් බවට පත් විය යුතුය, මොකද AI ඒජන්ට්ලා දැන් මිනිස් කණ්ඩායම් භාවිත කරන components ම යොදාගෙන UI එකලස් කරනවා.
මෙය 2030 ගැන අනාවැකියක් නොවෙයි. එය දැන්ම සිදුවෙමින් පවතී.
ඔබේ design system එක ඒජන්ට් කෙනෙකුට parse කළ නොහැකි නම්, එය පැරණි (legacy) බවට පත්වෙමින් තිබේ. ඔබේ සංවර්ධන workflow එකේ සෑම පියවරකටම මිනිසෙකු prompt කළ යුතු නම්, එය පුළුල් වෙන්නේ නැහැ. ඔබේ AI අන්තර්ක්රියා සෑම වතාවකම බිංදුවෙන් පටන් ගන්නේ නම්, ඔබ සමුච්චිත දැනුම නාස්ති කරනවා.
AI අලුත් දෙයක් වූ කාලයේ ටෙලිප්රොම්ප්ටර් ආකෘතිය හොඳයි. නමුත් AI යටිතල පහසුකමක් වූ විට එය හොඳ නැහැ.
Prompt කිරීම නවත්වන්න. සැලසුම් කිරීම පටන් ගන්න.
ඒජන්ට්ලා ගොඩනඟන්න. ඔවුන්ට skills දෙන්න. ඔවුන්ට සම්බන්ධීකරණය කරන්න ඉඩ දෙන්න.
අනාගතය අයිති වන්නේ පද්ධති ගෘහනිර්මාණය කරන අයටයි, scripts ලියන අයට නොවේ.
වෙබ් සංවර්ධනයේ අනාගතය උදෙසා ඒජන්ට්-මූලික design systems ගොඩනඟමින්.
තවත් කියවීමට
- සැලසුම යනු කේතයයි (The Design Is the Code) design systems තුළ සෛලීය ස්වයංක්රිය (cellular automata) චින්තනය පිළිබඳ මගේ ගවේෂණය
- Brad Frost ගේ Atomic Design component ධූරාවලි පිටුපස ඇති ක්රමවේදය
- තමන්ම ගොඩනැගෙන පද්ධති සැලසුම් කිරීම ගොඩනඟන්නෙකුගෙන් පද්ධති චින්තකයෙකු වෙත