మీ AI ప్రొవైడర్కు టెలిప్రాంప్టర్లా చదివించడం ఆపండి: సబ్ఏజెంట్లు, స్కిల్స్, కమాండ్లను సృష్టించండి
ప్రాంప్ట్ మీద ఆధారపడటం నుంచి తెలివైన ఏజెంట్ వ్యవస్థల వైపు
చాలామంది ఇప్పటికీ AIని టెలిప్రాంప్టర్లా వాడుతున్నారు.
ప్రాంప్ట్ టైప్ చేస్తారు. ఎదురుచూస్తారు. సమాధానం వస్తుంది. దాన్ని ఎక్కడో కాపీ-పేస్ట్ చేస్తారు. మళ్లీ అదే పని. మళ్లీ మళ్లీ. ప్రతి సంభాషణా మొదటి నుంచే మొదలవుతుంది. ప్రతి సంభాషణా అంతకు ముందు జరిగినదాన్ని మర్చిపోతుంది.
ఇది సహకారం కాదు. అదనపు దశలతో కూడిన డిక్టేషన్ మాత్రమే.
2026లో కూడా మీరు మీ AI ప్రొవైడర్కు టెలిప్రాంప్టర్లా చదివిస్తూనే ఉంటే, మీ కింద జరుగుతున్న పెద్ద మార్పును పూర్తిగా కోల్పోతున్నారు.
టెలిప్రాంప్టర్ సమస్య
AIని టెలిప్రాంప్టర్లా వాడినప్పుడు, స్వయంప్రతిపత్తి సాధించగల వ్యవస్థను ఒక్కసారికి మాత్రమే పనికొచ్చే టెక్స్ట్ జనరేటర్గా చూస్తున్నారు. ఈ పద్ధతి ఇలా ఉంటుంది:
- వివరంగా ప్రాంప్ట్ రాస్తారు
- సమాధానం కోసం ఎదురుచూస్తారు
- ఫలితాన్ని చేతులారా మదింపు చేస్తారు
- మెరుగుపరచి మళ్లీ ప్రాంప్ట్ ఇస్తారు
- చాట్ మూసేసిన క్షణమే సందర్భమంతా పోతుంది
ఈ నమూనాలో మూడు ప్రాణాంతక లోపాలు ఉన్నాయి:
శాశ్వత జ్ఞానం లేదు. ప్రతి సంభాషణా ఖాళీ పలకే. అదే సందర్భాన్ని మళ్లీ మళ్లీ వివరించాలి. మీ కోడ్బేస్, మీ ఇష్టాయిష్టాలు, మీ పరిమితులు, మీ చరిత్ర ఏవీ మీ AIకి తెలియవు.
బాధ్యత అప్పగింత లేదు. అడ్డంకి మీరే అవుతారు. ప్రతి నిర్ణయం, ప్రతి ధృవీకరణ, ప్రతి తదుపరి అడుగుకూ మీ ఇన్పుట్ కావాలి. తర్వాత ఏం చేయాలో మీరు చెప్పే వరకు AI ఎదురుచూస్తూ ఉంటుంది.
ప్రత్యేకత లేదు. కోడింగ్, డాక్యుమెంటేషన్, డిజైన్, టెస్టింగ్, డిప్లాయ్మెంట్ అన్నింటికీ ఒకే సాధారణ ఇంటర్ఫేస్ వాడతారు. ఒకే ప్రాంప్ట్ శైలి. ఒకే కాంటెక్స్ట్ విండో. చాలామంది చేయాల్సిన పనిని ఒకే సంభాషణ చేస్తుంది.
టెలిప్రాంప్టర్ నమూనా AIని ఒక పనిముట్టుగా చూస్తుంది. కానీ పనిముట్లు స్వయంప్రతిపత్తిని విస్తరించలేవు. ఏజెంట్లు విస్తరించగలవు.
ఏజెంట్లలో ఆలోచించినప్పుడు ఏం మారుతుంది
Claude Codeలో ఏజెంట్ నిర్మాణం మూడు మూలాధారాలతో ఉంటుంది:
- సబ్ఏజెంట్లు: వేర్వేరు కాంటెక్స్ట్ విండోలతో ప్రత్యేకీకరించిన Claude ఇన్స్టెన్సులు (~/.claude/agents/)
- స్కిల్స్: SKILL.md ఫైళ్లతో, సందర్భాన్ని బట్టి ఆటోమేటిక్గా ప్రేరేపితమయ్యే జ్ఞాన మాడ్యూల్స్ (~/.claude/skills/)
- కమాండ్లు: స్పష్టమైన చర్యల కోసం వినియోగదారు ప్రేరేపించే /స్లాష్ కమాండ్లు (~/.claude/commands/)
సంప్రదాయ ప్రాంప్టింగ్తో ముఖ్యమైన తేడా:
- స్కిల్స్ను సందర్భాన్ని బట్టి Claude ఆటోమేటిక్గా ప్రేరేపిస్తుంది
- కమాండ్లకు మీరు
/commandఅని స్పష్టంగా టైప్ చేయాలి - సబ్ఏజెంట్లు తమ సొంత టూల్స్తో విడిగా ఉన్న కాంటెక్స్ట్లో నడుస్తాయి
తేడాను గమనించండి:
టెలిప్రాంప్టర్ పద్ధతి:
"మా డిజైన్ సిస్టమ్ నమూనాలు, యాక్సెసిబిలిటీ ప్రమాణాలను అనుసరిస్తూ, చిత్రం, శీర్షిక, బాడీ టెక్స్ట్, ప్రాథమిక బటన్తో ఒక కార్డ్ కాంపోనెంట్ రాసివ్వు..."
Claude Code పద్ధతి:
/generate card --variant=default --with-image=true --with-button=trueమొదటిది ఒక అభ్యర్థన. రెండోది ఒక స్కిల్ను పిలుస్తుంది. కార్డ్ అంటే ఏమిటో, మీ డిజైన్ సిస్టమ్ ఏం కోరుతుందో, ఏ యాక్సెసిబిలిటీ ప్రమాణాలు వర్తిస్తాయో, తన ఫలితాన్ని తానే ఎలా ధృవీకరించుకోవాలో ఆ స్కిల్కు ఇప్పటికే తెలుసు.
నిర్మాణం: సబ్ఏజెంట్లు, స్కిల్స్ & కమాండ్లు
టెలిప్రాంప్టర్ నమూనా స్థానంలో వచ్చే నిర్మాణం ఇది:
స్థాయి 1: సబ్ఏజెంట్లు
సబ్ఏజెంట్లు ~/.claude/agents/లో ఉండే స్వతంత్ర markdown ఫైళ్లు; ఇవి పనిని సమాంతరంగా నిర్వహిస్తాయి. వాటికి సొంత కాంటెక్స్ట్ విండోలు ఉంటాయి, స్కిల్స్ను కూడా పిలవగలవు.
~/.claude/agents/
├── header-builder.md
├── footer-builder.md
└── dashboard-builder.mdప్రతి సబ్ఏజెంట్ ఫైల్లో YAML frontmatter ఉంటుంది:
- name: స్పష్టమైన గుర్తింపు పేరు
- description: అది ఏం చేస్తుంది, ఎప్పుడు పిలవాలి
- tools: అనుమతించిన సామర్థ్యాలు (Read, Write, Bash, Grep, Glob)
ఉదాహరణ సబ్ఏజెంట్ (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: స్కిల్స్
స్కిల్స్ ఆటోమేటిక్గా ప్రేరేపితమయ్యే జ్ఞాన మాడ్యూల్స్. ఒక స్కిల్ ఉద్దేశానికి సరిపోయేదేదైనా మీరు 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). ప్రతి స్కిల్ సరిగ్గా ఒకే విషయంలో నిపుణుడు. మీకు కార్డ్ కావాలంటే, కార్డ్ స్కిల్ ఆటోమేటిక్గా ప్రేరేపితమవుతుంది.
ప్రతి స్కిల్కు తెలిసినవి:
- కాంపోనెంట్ స్కీమా (props, slots, variants)
- మీ డిజైన్ సిస్టమ్ సంప్రదాయాలు
- ఫ్రేమ్వర్క్కు ప్రత్యేకమైన నమూనాలు
- WCAG యాక్సెసిబిలిటీ అవసరాలు
- అది ప్రస్తావించగల సంబంధిత స్కిల్స్
స్థాయి 3: కమాండ్లు
కమాండ్లు వినియోగదారు ప్రేరేపించే షార్ట్కట్లు. వాటిని పిలవడానికి /command అని టైప్ చేస్తారు. అవి స్కిల్ వర్క్ఫ్లోలలో లేదా గ్లోబల్గా ఉంటాయి:
~/.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 cardకమాండ్లు ప్రణాళిక కోసం సబ్ఏజెంట్లను పిలవగలవు, ఆ తర్వాత ప్రధాన Claude అమలును చూసుకుంటుంది. దీనివల్ల పూర్తి టూల్ యాక్సెస్తో నిర్మాణాత్మక వర్క్ఫ్లోలు మీకు దక్కుతాయి.
పూర్తి ఉదాహరణ: కార్డ్ స్కిల్
ఇది ఎలా పనిచేస్తుందో నిజమైన స్కిల్తో ఖచ్చితంగా చూపిస్తాను:
స్కిల్ నిర్మాణం
~/.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
- textస్లాష్ కమాండ్లను వాడటం
కొత్త కార్డ్ సృష్టించండి:
/generate card \ --variant="default" \ --title="Welcome" \ --with-image=true \ --with-button=trueఉన్న కార్డ్ను ధృవీకరించండి:
/validate card \ --file="components/card.jsx"యాక్సెసిబిలిటీ సమ్మతిని తనిఖీ చేయండి:
/a11y card --level="AA"ఒక నిర్దిష్ట సందర్భానికి UXను మెరుగుపరచండి:
/improve card \ --context="e-commerce product listing" \ --focus="conversion"తెర వెనుక ఏం జరుగుతుంది
మీరు /generate card అని పిలిచినప్పుడు, Claude ఇలా చేస్తుంది:
- కార్డ్ స్కిల్ను ప్రేరేపిస్తుంది: SKILL.md కాంటెక్స్ట్లోకి లోడ్ అవుతుంది
- స్కీమాను చదువుతుంది: మీ పారామితులను అనుమతించిన props తో సరిచూస్తుంది
- ఇతర స్కిల్స్ను ప్రస్తావిస్తుంది: image, heading, button స్కిల్స్ తమ నైపుణ్యాన్ని అందిస్తాయి
- వర్క్ఫ్లోను నడుపుతుంది: workflows/generate.md అమలవుతుంది
- స్వీయ-ధృవీకరణ చేస్తుంది: తన ఫలితంపైనే validate వర్క్ఫ్లోను నడుపుతుంది
- ఫలితాన్ని ఇస్తుంది: కాంపోనెంట్తో పాటు ఏవైనా హెచ్చరికలను అందిస్తుంది
కార్డ్ స్కిల్ కేవలం మార్కప్ను సృష్టించదు. తమ తమ రంగాల నైపుణ్యాన్ని అందించే నిపుణుల వ్యవస్థను అది సమన్వయం చేస్తుంది.
ఇది ఎందుకు ముఖ్యం: నిర్మాత నుంచి వ్యవస్థా ఆలోచనాపరుడి వైపు
టెలిప్రాంప్టర్ నమూనా మిమ్మల్ని ఆపరేటర్గా ఉంచుతుంది. స్కిల్ నమూనా మిమ్మల్ని ఆర్కిటెక్ట్ను చేస్తుంది.
ప్రాంప్ట్లు రాయడం నుంచి స్కిల్స్ రూపకల్పన వైపు నేను మళ్లినప్పుడు, అనేక విషయాలు మారాయి:
సందర్భాన్ని మళ్లీ చెప్పడం మానేశాను. ప్రతి స్కిల్కు తన రంగం ఇప్పటికే తెలుసు. కార్డ్ కావలసిన ప్రతిసారీ కార్డ్ అంటే ఏమిటో వివరించను.
సమ్మేళనంలో ఆలోచించడం మొదలుపెట్టాను. ఒక పేజీ ఒకే ప్రాంప్ట్ కాదు. అది జీవుల (organisms) సమన్వయం; ఆ జీవులు అణుసముదాయాల (molecules) సమన్వయం; అవి అణువుల (atoms) సమన్వయం. ప్రతి పొరకూ తన స్కిల్ ఉంటుంది.
ధృవీకరణను అప్పగించాను. ప్రతి ఫలితాన్నీ చేతులారా సమీక్షించే బదులు, /validate కమాండ్ నిర్మాణాన్ని, /a11y కమాండ్ WCAG సమ్మతిని తనిఖీ చేస్తాయి, /test కమాండ్ ఆటోమేటెడ్ తనిఖీలను నడుపుతుంది. నేను మినహాయింపులను సమీక్షిస్తాను, ప్రతి ఫలితాన్ని కాదు.
సంస్థాగత జ్ఞానాన్ని నిర్మించాను. ఒక స్కిల్ SKILL.mdని మెరుగుపరిచినప్పుడు, ఆ మెరుగుదల నిలిచిపోతుంది. వ్యవస్థ కేవలం ఒక సంభాషణలోనే కాదు, కాలంతో పాటు తెలివిగా మారుతుంది.
AIని వాడటానికీ, AIతో నిర్మించడానికీ ఉన్న తేడా ఇదే.
డిజైనే కోడ్
డిజైన్ సిస్టమ్స్తో నా పనిలో ఒక సూత్రానికి వచ్చాను: డిజైనే కోడ్.
డిజైన్ టోకెన్లు, కాంపోనెంట్ స్కీమాలు, ఏజెంట్ కాన్ఫిగరేషన్లు ఒకే వరుసలో ఉన్నప్పుడు, డిజైనర్లు నిర్దేశించేదానికీ డెవలపర్లు నిర్మించేదానికీ మధ్య అనువాద పొర ఏదీ ఉండదు. స్పెసిఫికేషనే అమలు.
ఏజెంట్లు దీన్ని ఎలా నిజం చేస్తాయో చూడండి:
# 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ఈ స్కీమా కేవలం డాక్యుమెంటేషన్ కాదు. ఇదే సత్యానికి మూలం. ఏజెంట్ దీని నుంచే కాంపోనెంట్లను సృష్టిస్తుంది. వాలిడేటర్ దీనితోనే సరిచూస్తుంది. డిజైన్ టోకెన్లు దీన్నే ఆధారంగా తీసుకుంటాయి. ఒకే ఫైల్, ఎన్నో ఉపయోగాలు.
డిజైనర్ Figmaలో టోకెన్ విలువలను నవీకరించినప్పుడు, ఏజెంట్ కాన్ఫిగరేషన్ నవీకరణ అవుతుంది. ఏజెంట్ కాన్ఫిగరేషన్ నవీకరణ అయితే, సృష్టించిన కాంపోనెంట్లు నవీకరణ అవుతాయి. రెండూ ఒకే స్కీమా నుంచి పుట్టాయి కాబట్టే డిజైనే కోడ్.
Claude Codeతో నిర్మించడం ఎలా ప్రారంభించాలి
టెలిప్రాంప్టర్ నమూనాను దాటి ముందుకు వెళ్లడానికి సిద్ధమైతే, ఆచరణాత్మక దారి ఇది:
దశ 1: మీ రంగాలను గుర్తించండి
మీ పనిలో ఏవి పునరావృతమయ్యేవి, నియమాలకు లోబడినవి, సందర్భంపై ఆధారపడినవి? అవే స్కిల్స్గా మారదగినవి:
- కోడ్ జనరేషన్
- డాక్యుమెంటేషన్
- టెస్టింగ్
- సమీక్ష, ధృవీకరణ
- డిజైన్ సిస్టమ్ నిర్వహణ
- డిప్లాయ్మెంట్, DevOps
దశ 2: మీ మొదటి స్కిల్ను సృష్టించండి
సరళమైన SKILL.mdతో మొదలుపెట్టండి:
---
name: my-component
description: Generate and validate my-component
--- # My Component Skill When user asks about my-component, apply these rules...దశ 3: వర్క్ఫ్లోలను (కమాండ్లను) చేర్చండి
workflows/లో ఆరు ప్రధాన కమాండ్లను సృష్టించండి:
| కమాండ్ | ప్రయోజనం |
|---|---|
/generate | కొత్త ఆర్టిఫాక్ట్లను సృష్టించడం |
/validate | ఉన్న ఆర్టిఫాక్ట్లను తనిఖీ చేయడం |
/improve | మెరుగుదలలను సూచించడం |
/document | వివరించి నమోదు చేయడం |
/test | ఆటోమేటెడ్ టెస్ట్లను సృష్టించడం |
/a11y | WCAG సమ్మతిని తనిఖీ చేయడం |
ప్రతి కమాండ్ సూచనలతో కూడిన ఒక markdown ఫైల్.
దశ 4: స్కిల్ రెఫరెన్సులను ఏర్పాటు చేయండి
స్కిల్స్ ఇతర స్కిల్స్ను ప్రస్తావించగలవు:
## Related Skills This skill uses:
- image (for card images)
- button (for CTAs)
- heading (for titles)ఈ ఆధారపడటాలను మ్యాప్ చేయండి. శ్రేణి మీ రంగపు సహజ నిర్మాణానికి సరిపోవాలి.
దశ 5: సంక్లిష్ట పనుల కోసం సబ్ఏజెంట్లను సృష్టించండి
విడిగా ఉన్న కాంటెక్స్ట్ లేదా సమాంతర అమలు అవసరమైనప్పుడు, ~/.claude/agents/లో ఒక సబ్ఏజెంట్ ఫైల్ సృష్టించండి:
---
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మీ స్కిల్ లైబ్రరీని నిర్మించడం
Atomic Designను అనుసరించి మీ స్కిల్స్ను నిర్మించండి:
| రకం | పాత్ర | ఉదాహరణలు |
|---|---|---|
| Atoms | ప్రాథమిక నిర్మాణ ఖండాలు | button, input, checkbox, avatar, badge, icon, link, image |
| Molecules | అణువుల కలయికలు | card, modal, tabs, accordion, alert, dropdown, toast |
| Organisms | సంక్లిష్ట కాంపోనెంట్లు | header, footer, dashboard, login-form, hero, sidebar |
ప్రతి స్కిల్:
- తన సొంత
SKILL.mdకాన్ఫిగరేషన్ కలిగి ఉంటుంది - స్లాష్ కమాండ్లతో కూడిన
workflows/కలిగి ఉంటుంది - డాక్యుమెంటేషన్తో కూడిన
references/కలిగి ఉంటుంది - ఆటోమేషన్ కోసం
scripts/కలిగి ఉంటుంది - తాను ఏ ఇతర స్కిల్స్ను ప్రస్తావిస్తుందో తెలుసుకుంటుంది
దీనివల్ల సందర్భాన్ని బట్టి సరైన స్కిల్ను Claude ఆటోమేటిక్గా ప్రేరేపించే, స్థిరమైన, విస్తరించగల వ్యవస్థ ఏర్పడుతుంది.
భవిష్యత్తు ఏజెంటిక్
Atomic Design సృష్టికర్త Brad Frost ఈ మార్పు గురించి మాట్లాడుతున్నారు: డిజైన్ సిస్టమ్స్ యంత్రాలు చదవగలిగే మౌలిక సదుపాయంగా మారాలి, ఎందుకంటే మానవ బృందాలు వాడే కాంపోనెంట్లతోనే ఇప్పుడు AI ఏజెంట్లు UIలను అమర్చుతున్నాయి.
ఇది 2030 గురించిన జోస్యం కాదు. ఇది ఇప్పుడే జరుగుతోంది.
మీ డిజైన్ సిస్టమ్ను ఏజెంట్ చదవలేకపోతే, అది పాతబడిపోతున్నట్టే. ప్రతి అడుగుకూ మనిషి ప్రాంప్ట్ ఇవ్వాల్సిన డెవలప్మెంట్ వర్క్ఫ్లో విస్తరించలేదు. మీ AI పరస్పర చర్యలు ప్రతిసారీ సున్నా నుంచి మొదలైతే, పోగుపడిన జ్ఞానాన్ని వృథా చేస్తున్నారు.
AI ఒక కొత్తదనం మాత్రమే అయినప్పుడు టెలిప్రాంప్టర్ నమూనా సరిపోయింది. AI మౌలిక సదుపాయం అయినప్పుడు అది సరిపోదు.
ప్రాంప్ట్ చేయడం ఆపండి. డిజైన్ చేయడం మొదలుపెట్టండి.
ఏజెంట్లను నిర్మించండి. వాటికి స్కిల్స్ ఇవ్వండి. వాటిని సమన్వయం చేసుకోనివ్వండి.
భవిష్యత్తు వ్యవస్థలను రూపొందించేవారిదే, స్క్రిప్టులు రాసేవారిది కాదు.
వెబ్ డెవలప్మెంట్ భవిష్యత్తు కోసం ఏజెంటిక్ డిజైన్ సిస్టమ్స్ను నిర్మిస్తున్నాను.
మరింత చదవడానికి
- The Design Is the Code డిజైన్ సిస్టమ్స్లో సెల్యులార్ ఆటోమేటా ఆలోచనపై నా అన్వేషణ
- Atomic Design by Brad Frost కాంపోనెంట్ శ్రేణుల వెనుక ఉన్న పద్ధతి
- Designing Systems That Build Themselves నిర్మాత నుంచి వ్యవస్థా ఆలోచనాపరుడి వైపు