AI ਪ੍ਰੋਵਾਈਡਰ ਨੂੰ ਟੈਲੀਪ੍ਰੌਮਪਟਰ ਵਾਂਗ ਵਰਤਣਾ ਬੰਦ ਕਰੋ: ਸਬਏਜੰਟ, ਸਕਿੱਲਾਂ ਅਤੇ ਕਮਾਂਡਾਂ ਬਣਾਓ

ਪ੍ਰੌਮਪਟ 'ਤੇ ਨਿਰਭਰਤਾ ਤੋਂ ਸਮਝਦਾਰ ਏਜੰਟ ਸਿਸਟਮਾਂ ਵੱਲ

ਬਹੁਤੇ ਲੋਕ ਅਜੇ ਵੀ AI ਨੂੰ ਟੈਲੀਪ੍ਰੌਮਪਟਰ ਵਾਂਗ ਵਰਤ ਰਹੇ ਹਨ।

ਉਹ ਪ੍ਰੌਮਪਟ ਲਿਖਦੇ ਹਨ। ਉਡੀਕ ਕਰਦੇ ਹਨ। ਜਵਾਬ ਮਿਲਦਾ ਹੈ। ਉਸਨੂੰ ਕਾਪੀ-ਪੇਸਟ ਕਰਕੇ ਕਿਤੇ ਹੋਰ ਲਗਾ ਦਿੰਦੇ ਹਨ। ਫਿਰ ਉਹੀ ਸਭ ਕੁਝ ਦੁਬਾਰਾ। ਅਤੇ ਫਿਰ ਦੁਬਾਰਾ। ਹਰ ਗੱਲਬਾਤ ਸਿਫ਼ਰ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ। ਹਰ ਗੱਲਬਾਤ ਪਿਛਲੀ ਗੱਲ ਭੁੱਲ ਜਾਂਦੀ ਹੈ।

ਇਹ ਸਹਿਯੋਗ ਨਹੀਂ ਹੈ। ਇਹ ਕੁਝ ਵਾਧੂ ਪੜਾਵਾਂ ਵਾਲੀ ਡਿਕਟੇਸ਼ਨ ਹੈ।

2026 ਵਿੱਚ, ਜੇ ਤੁਸੀਂ ਅਜੇ ਵੀ ਆਪਣੇ AI ਪ੍ਰੋਵਾਈਡਰ ਨੂੰ ਟੈਲੀਪ੍ਰੌਮਪਟਰ ਵਾਂਗ ਵਰਤ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੇ ਹੇਠਾਂ ਜੋ ਪੂਰੀ ਤਬਦੀਲੀ ਵਾਪਰ ਰਹੀ ਹੈ, ਤੁਸੀਂ ਉਹ ਗੁਆ ਰਹੇ ਹੋ।

ਟੈਲੀਪ੍ਰੌਮਪਟਰ ਦੀ ਸਮੱਸਿਆ

ਜਦੋਂ ਤੁਸੀਂ AI ਨੂੰ ਟੈਲੀਪ੍ਰੌਮਪਟਰ ਵਾਂਗ ਵਰਤਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਸੰਭਾਵੀ ਤੌਰ 'ਤੇ ਖ਼ੁਦਮੁਖ਼ਤਾਰ ਸਿਸਟਮ ਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਵਾਰ ਦਾ ਟੈਕਸਟ ਜਨਰੇਟਰ ਸਮਝ ਰਹੇ ਹੁੰਦੇ ਹੋ। ਇਹ ਪੈਟਰਨ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦਿਸਦਾ ਹੈ:

1. ਤੁਸੀਂ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਪ੍ਰੌਮਪਟ ਲਿਖਦੇ ਹੋ
2. ਤੁਸੀਂ ਜਵਾਬ ਦੀ ਉਡੀਕ ਕਰਦੇ ਹੋ
3. ਤੁਸੀਂ ਨਤੀਜੇ ਨੂੰ ਹੱਥੀਂ ਪਰਖਦੇ ਹੋ
4. ਤੁਸੀਂ ਸੁਧਾਰ ਕਰਕੇ ਦੁਬਾਰਾ ਪ੍ਰੌਮਪਟ ਦਿੰਦੇ ਹੋ
5. ਚੈਟ ਬੰਦ ਕਰਦਿਆਂ ਹੀ ਸਾਰਾ ਸੰਦਰਭ ਗੁਆਚ ਜਾਂਦਾ ਹੈ

ਇਸ ਮਾਡਲ ਵਿੱਚ ਤਿੰਨ ਘਾਤਕ ਕਮੀਆਂ ਹਨ:

ਕੋਈ ਸਥਾਈ ਗਿਆਨ ਨਹੀਂ। ਹਰ ਗੱਲਬਾਤ ਇੱਕ ਕੋਰੀ ਸਲੇਟ ਹੈ। ਤੁਸੀਂ ਇੱਕੋ ਸੰਦਰਭ ਵਾਰ-ਵਾਰ ਸਮਝਾਉਂਦੇ ਹੋ। ਤੁਹਾਡਾ AI ਤੁਹਾਡਾ ਕੋਡਬੇਸ, ਤੁਹਾਡੀਆਂ ਪਸੰਦਾਂ, ਤੁਹਾਡੀਆਂ ਸੀਮਾਵਾਂ ਜਾਂ ਤੁਹਾਡਾ ਇਤਿਹਾਸ ਨਹੀਂ ਜਾਣਦਾ।

ਕੋਈ ਜ਼ਿੰਮੇਵਾਰੀ ਸੌਂਪਣਾ ਨਹੀਂ। ਰੁਕਾਵਟ ਤੁਸੀਂ ਹੀ ਬਣੇ ਰਹਿੰਦੇ ਹੋ। ਹਰ ਫ਼ੈਸਲੇ, ਹਰ ਪੜਤਾਲ, ਹਰ ਅਗਲੇ ਕਦਮ ਲਈ ਤੁਹਾਡੀ ਲੋੜ ਪੈਂਦੀ ਹੈ। AI ਉਡੀਕਦਾ ਰਹਿੰਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਦੱਸੋ ਅੱਗੇ ਕੀ ਕਰਨਾ ਹੈ।

ਕੋਈ ਵਿਸ਼ੇਸ਼ਗਤਾ ਨਹੀਂ। ਤੁਸੀਂ ਕੋਡਿੰਗ, ਦਸਤਾਵੇਜ਼ੀਕਰਨ, ਡਿਜ਼ਾਈਨ, ਟੈਸਟਿੰਗ, ਡਿਪਲੌਏਮੈਂਟ, ਸਭ ਲਈ ਇੱਕੋ ਆਮ ਇੰਟਰਫ਼ੇਸ ਵਰਤਦੇ ਹੋ। ਇੱਕੋ ਪ੍ਰੌਮਪਟ ਸ਼ੈਲੀ। ਇੱਕੋ ਕੰਟੈਕਸਟ ਵਿੰਡੋ। ਇੱਕ ਗੱਲਬਾਤ ਜੋ ਕਈਆਂ ਦਾ ਕੰਮ ਕਰ ਰਹੀ ਹੈ।

ਟੈਲੀਪ੍ਰੌਮਪਟਰ ਮਾਡਲ AI ਨੂੰ ਇੱਕ ਸੰਦ ਸਮਝਦਾ ਹੈ। ਪਰ ਸੰਦ ਖ਼ੁਦਮੁਖ਼ਤਾਰੀ ਨੂੰ ਵਧਾ ਨਹੀਂ ਸਕਦੇ। ਏਜੰਟ ਵਧਾ ਸਕਦੇ ਹਨ।

ਏਜੰਟਾਂ ਵਾਂਗ ਸੋਚਣ ਨਾਲ ਕੀ ਬਦਲਦਾ ਹੈ

Claude Code ਵਿੱਚ ਏਜੰਟ ਆਰਕੀਟੈਕਚਰ ਤਿੰਨ ਮੂਲ ਇਕਾਈਆਂ ਤੋਂ ਬਣਦਾ ਹੈ:

• ਸਬਏਜੰਟ: ਅਲੱਗ ਕੰਟੈਕਸਟ ਵਿੰਡੋਆਂ ਵਾਲੇ ਵਿਸ਼ੇਸ਼ Claude ਇੰਸਟੈਂਸ (~/.claude/agents/)
• ਸਕਿੱਲਾਂ: SKILL.md ਫ਼ਾਈਲਾਂ ਵਾਲੇ, ਆਪਣੇ-ਆਪ ਚੱਲਣ ਵਾਲੇ ਗਿਆਨ ਮਾਡਿਊਲ (~/.claude/skills/)
• ਕਮਾਂਡਾਂ: ਸਪੱਸ਼ਟ ਕਾਰਵਾਈਆਂ ਲਈ ਵਰਤੋਂਕਾਰ ਵੱਲੋਂ ਚਲਾਈਆਂ ਜਾਣ ਵਾਲੀਆਂ /slash ਕਮਾਂਡਾਂ (~/.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

ਇਹ ਐਟਮਿਕ ਡਿਜ਼ਾਈਨ ਵਿਧੀ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ: ਐਟਮ, ਮੌਲੀਕਿਊਲ, ਆਰਗੈਨਿਜ਼ਮ। ਹਰ ਸਕਿੱਲ ਠੀਕ ਇੱਕ ਚੀਜ਼ ਦੀ ਮਾਹਿਰ ਹੈ। ਜਦੋਂ ਤੁਹਾਨੂੰ ਕਾਰਡ ਚਾਹੀਦਾ ਹੈ, ਕਾਰਡ ਸਕਿੱਲ ਆਪਣੇ-ਆਪ ਜਾਗ ਪੈਂਦੀ ਹੈ।

ਹਰ ਸਕਿੱਲ ਜਾਣਦੀ ਹੈ:

• ਕੰਪੋਨੈਂਟ ਦੀ ਸਕੀਮਾ (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.py

SKILL.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

Slash ਕਮਾਂਡਾਂ ਦੀ ਵਰਤੋਂ

ਨਵਾਂ ਕਾਰਡ ਬਣਾਓ:

/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:

1. ਕਾਰਡ ਸਕਿੱਲ ਨੂੰ ਜਗਾਉਂਦਾ ਹੈ: SKILL.md ਕੰਟੈਕਸਟ ਵਿੱਚ ਲੋਡ ਹੋ ਜਾਂਦੀ ਹੈ
2. ਸਕੀਮਾ ਪੜ੍ਹਦਾ ਹੈ:  ਤੁਹਾਡੇ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਮਨਜ਼ੂਰਸ਼ੁਦਾ props ਨਾਲ ਪਰਖਦਾ ਹੈ
3. ਹੋਰ ਸਕਿੱਲਾਂ ਦਾ ਹਵਾਲਾ ਦਿੰਦਾ ਹੈ:  image, heading, button ਸਕਿੱਲਾਂ ਆਪਣੀ ਮੁਹਾਰਤ ਦਿੰਦੀਆਂ ਹਨ
4. ਵਰਕਫ਼ਲੋ ਚਲਾਉਂਦਾ ਹੈ: workflows/generate.md ਚੱਲਦੀ ਹੈ
5. ਆਪਣੀ ਪੜਤਾਲ ਆਪ ਕਰਦਾ ਹੈ: ਆਪਣੇ ਹੀ ਨਤੀਜੇ 'ਤੇ validate ਵਰਕਫ਼ਲੋ ਚਲਾਉਂਦਾ ਹੈ
6. ਨਤੀਜਾ ਵਾਪਸ ਕਰਦਾ ਹੈ:  ਕੰਪੋਨੈਂਟ ਦੇ ਨਾਲ ਕੋਈ ਵੀ ਚੇਤਾਵਨੀਆਂ ਦਿੰਦਾ ਹੈ

ਕਾਰਡ ਸਕਿੱਲ ਸਿਰਫ਼ ਮਾਰਕਅੱਪ ਨਹੀਂ ਬਣਾਉਂਦੀ। ਇਹ ਮਾਹਿਰਾਂ ਦੇ ਇੱਕ ਪੂਰੇ ਸਿਸਟਮ ਦਾ ਤਾਲਮੇਲ ਕਰਦੀ ਹੈ, ਜਿਨ੍ਹਾਂ ਵਿੱਚੋਂ ਹਰ ਕੋਈ ਆਪਣੇ ਖੇਤਰ ਦੀ ਮੁਹਾਰਤ ਪਾਉਂਦਾ ਹੈ।

ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ: ਬਣਾਉਣ ਵਾਲੇ ਤੋਂ ਸਿਸਟਮ-ਚਿੰਤਕ ਤੱਕ

ਟੈਲੀਪ੍ਰੌਮਪਟਰ ਮਾਡਲ ਤੁਹਾਨੂੰ ਸੰਚਾਲਕ ਬਣਾਈ ਰੱਖਦਾ ਹੈ। ਸਕਿੱਲ ਮਾਡਲ ਤੁਹਾਨੂੰ ਆਰਕੀਟੈਕਟ ਬਣਾਉਂਦਾ ਹੈ।

ਜਦੋਂ ਮੈਂ ਪ੍ਰੌਮਪਟ ਲਿਖਣ ਤੋਂ ਸਕਿੱਲਾਂ ਡਿਜ਼ਾਈਨ ਕਰਨ ਵੱਲ ਗਿਆ, ਕਈ ਚੀਜ਼ਾਂ ਬਦਲ ਗਈਆਂ:

ਮੈਂ ਸੰਦਰਭ ਦੁਹਰਾਉਣਾ ਬੰਦ ਕਰ ਦਿੱਤਾ। ਹਰ ਸਕਿੱਲ ਆਪਣੇ ਖੇਤਰ ਨੂੰ ਪਹਿਲਾਂ ਹੀ ਜਾਣਦੀ ਹੈ। ਜਦੋਂ ਵੀ ਮੈਨੂੰ ਕਾਰਡ ਚਾਹੀਦਾ ਹੈ, ਮੈਨੂੰ ਇਹ ਨਹੀਂ ਸਮਝਾਉਣਾ ਪੈਂਦਾ ਕਿ ਕਾਰਡ ਕੀ ਹੁੰਦਾ ਹੈ।

ਮੈਂ ਜੋੜ-ਬਣਤਰ (composition) ਵਿੱਚ ਸੋਚਣ ਲੱਗਾ। ਇੱਕ ਪੰਨਾ ਇੱਕ ਪ੍ਰੌਮਪਟ ਨਹੀਂ ਹੈ, ਇਹ ਆਰਗੈਨਿਜ਼ਮਾਂ ਦਾ ਤਾਲਮੇਲ ਹੈ, ਜੋ ਮੌਲੀਕਿਊਲਾਂ ਦਾ ਤਾਲਮੇਲ ਹਨ, ਜੋ ਐਟਮਾਂ ਦਾ ਤਾਲਮੇਲ ਹਨ। ਹਰ ਪਰਤ ਦੀ ਆਪਣੀ ਸਕਿੱਲ ਹੈ।

ਮੈਂ ਪੜਤਾਲ ਦੀ ਜ਼ਿੰਮੇਵਾਰੀ ਸੌਂਪ ਦਿੱਤੀ। ਹਰ ਨਤੀਜੇ ਨੂੰ ਹੱਥੀਂ ਵੇਖਣ ਦੀ ਥਾਂ, /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/ ਵਿੱਚ ਛੇ ਮੁੱਖ ਕਮਾਂਡਾਂ ਬਣਾਓ:

ਹਰ ਕਮਾਂਡ ਹਦਾਇਤਾਂ ਵਾਲੀ ਇੱਕ 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

ਆਪਣੀ ਸਕਿੱਲ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਉਸਾਰੀ

ਆਪਣੀਆਂ ਸਕਿੱਲਾਂ ਨੂੰ ਐਟਮਿਕ ਡਿਜ਼ਾਈਨ ਮੁਤਾਬਕ ਢਾਲੋ:

ਹਰ ਸਕਿੱਲ:

• ਦੀ ਆਪਣੀ SKILL.md ਕੌਨਫ਼ਿਗਰੇਸ਼ਨ ਹੁੰਦੀ ਹੈ
• ਕੋਲ slash ਕਮਾਂਡਾਂ ਵਾਲਾ workflows/ ਹੁੰਦਾ ਹੈ
• ਕੋਲ ਦਸਤਾਵੇਜ਼ਾਂ ਵਾਲਾ references/ ਹੁੰਦਾ ਹੈ
• ਕੋਲ ਆਟੋਮੇਸ਼ਨ ਲਈ scripts/ ਹੁੰਦਾ ਹੈ
• ਜਾਣਦੀ ਹੈ ਕਿ ਉਹ ਹੋਰ ਕਿਹੜੀਆਂ ਸਕਿੱਲਾਂ ਦਾ ਹਵਾਲਾ ਦਿੰਦੀ ਹੈ

ਇਸ ਨਾਲ ਇੱਕ ਇਕਸਾਰ, ਵਧਣ-ਯੋਗ ਸਿਸਟਮ ਬਣਦਾ ਹੈ ਜਿੱਥੇ Claude ਸੰਦਰਭ ਦੇ ਆਧਾਰ 'ਤੇ ਸਹੀ ਸਕਿੱਲ ਆਪਣੇ-ਆਪ ਚਲਾ ਦਿੰਦਾ ਹੈ।

ਭਵਿੱਖ ਏਜੰਟ-ਅਧਾਰਿਤ ਹੈ

ਐਟਮਿਕ ਡਿਜ਼ਾਈਨ ਦੇ ਸਿਰਜਣਹਾਰ ਬ੍ਰੈਡ ਫ਼ਰੌਸਟ (Brad Frost) ਇਸ ਤਬਦੀਲੀ ਬਾਰੇ ਗੱਲ ਕਰਦੇ ਆ ਰਹੇ ਹਨ: ਡਿਜ਼ਾਈਨ ਸਿਸਟਮਾਂ ਨੂੰ ਮਸ਼ੀਨ ਦੁਆਰਾ ਪੜ੍ਹਨ-ਯੋਗ ਬੁਨਿਆਦੀ ਢਾਂਚਾ ਬਣਨਾ ਪਵੇਗਾ, ਕਿਉਂਕਿ AI ਏਜੰਟ ਹੁਣ ਉਨ੍ਹਾਂ ਹੀ ਕੰਪੋਨੈਂਟਾਂ ਨਾਲ UI ਜੋੜ ਰਹੇ ਹਨ ਜੋ ਮਨੁੱਖੀ ਟੀਮਾਂ ਵਰਤਦੀਆਂ ਹਨ।

ਇਹ 2030 ਬਾਰੇ ਕੋਈ ਭਵਿੱਖਬਾਣੀ ਨਹੀਂ ਹੈ। ਇਹ ਹੁਣੇ ਵਾਪਰ ਰਿਹਾ ਹੈ।

ਜੇ ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਨੂੰ ਕੋਈ ਏਜੰਟ ਪਾਰਸ ਨਹੀਂ ਕਰ ਸਕਦਾ, ਤਾਂ ਉਹ ਪੁਰਾਣਾ (legacy) ਬਣਦਾ ਜਾ ਰਿਹਾ ਹੈ। ਜੇ ਤੁਹਾਡੇ ਡਿਵੈਲਪਮੈਂਟ ਵਰਕਫ਼ਲੋ ਵਿੱਚ ਹਰ ਕਦਮ ਲਈ ਮਨੁੱਖ ਨੂੰ ਪ੍ਰੌਮਪਟ ਦੇਣਾ ਪੈਂਦਾ ਹੈ, ਤਾਂ ਉਹ ਵਧ ਨਹੀਂ ਸਕਦਾ। ਜੇ ਤੁਹਾਡੀ ਹਰ AI ਗੱਲਬਾਤ ਹਰ ਵਾਰ ਸਿਫ਼ਰ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਜਮ੍ਹਾਂ ਹੋਇਆ ਗਿਆਨ ਅਜਾਈਂ ਗੁਆ ਰਹੇ ਹੋ।

ਟੈਲੀਪ੍ਰੌਮਪਟਰ ਮਾਡਲ ਉਦੋਂ ਠੀਕ ਸੀ ਜਦੋਂ AI ਇੱਕ ਨਵੀਂ ਅਜੂਬਾ-ਚੀਜ਼ ਸੀ। ਜਦੋਂ AI ਬੁਨਿਆਦੀ ਢਾਂਚਾ ਬਣ ਚੁੱਕਾ ਹੈ, ਉਦੋਂ ਇਹ ਠੀਕ ਨਹੀਂ।

ਪ੍ਰੌਮਪਟ ਦੇਣਾ ਬੰਦ ਕਰੋ। ਡਿਜ਼ਾਈਨ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੋ।

ਏਜੰਟ ਬਣਾਓ। ਉਨ੍ਹਾਂ ਨੂੰ ਸਕਿੱਲਾਂ ਦਿਓ। ਉਨ੍ਹਾਂ ਨੂੰ ਤਾਲਮੇਲ ਕਰਨ ਦਿਓ।

ਭਵਿੱਖ ਉਨ੍ਹਾਂ ਦਾ ਹੈ ਜੋ ਸਿਸਟਮਾਂ ਦੇ ਆਰਕੀਟੈਕਟ ਹਨ, ਉਨ੍ਹਾਂ ਦਾ ਨਹੀਂ ਜੋ ਸਕ੍ਰਿਪਟਾਂ ਲਿਖਦੇ ਹਨ।

ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦੇ ਭਵਿੱਖ ਲਈ ਏਜੰਟ-ਅਧਾਰਿਤ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਬਣਾਉਂਦਿਆਂ।

ਹੋਰ ਪੜ੍ਹਨ ਲਈ

• ਡਿਜ਼ਾਈਨ ਹੀ ਕੋਡ ਹੈ  ਡਿਜ਼ਾਈਨ ਸਿਸਟਮਾਂ ਵਿੱਚ ਸੈਲੂਲਰ ਆਟੋਮਾਟਾ ਸੋਚ ਦੀ ਮੇਰੀ ਪੜਚੋਲ
• ਬ੍ਰੈਡ ਫ਼ਰੌਸਟ ਦਾ ਐਟਮਿਕ ਡਿਜ਼ਾਈਨ  ਕੰਪੋਨੈਂਟ ਲੜੀ-ਬਣਤਰ ਪਿੱਛੇ ਦੀ ਵਿਧੀ
• ਖ਼ੁਦ ਨੂੰ ਬਣਾਉਣ ਵਾਲੇ ਸਿਸਟਮਾਂ ਦਾ ਡਿਜ਼ਾਈਨ  ਬਣਾਉਣ ਵਾਲੇ ਤੋਂ ਸਿਸਟਮ-ਚਿੰਤਕ ਤੱਕ