Сіздің ЖИ қызмет жеткізушіңізге «телесуфлер» жазуды доғарыңыз да, оның орнына ішкі агенттер, дағдылар мен командалар құрыңыз

Промптқа тәуелділіктен интеллектуалды агент жүйелеріне көшу

Көп адамдар әлі де ЖИ‑ды жай ғана суфлёр сияқты пайдаланып жүр.

Олар промпт жазады. Күтіп отырады. Жауап алады. Оны басқа жерге көшіріп қояды. Сосын бәрін қайтадан жасайды. Тағы да. Әрбір әрекет нөлден басталады. Әр әңгіме алдындағының бәрін ұмытады.

Бұл ынтымақтастық емес. Бұл – артық қадамдары бар диктовка.

2026 жылы егер сіз ЖИ провайдеріңізді әлі де суфлёр сияқты қолдансаңыз, аяқ астында болып жатқан бүкіл бетбұрысты жіберіп аласыз.

Телесуфлёр мәселесі

ЖИ‑ды суфлёр ретінде пайдаланғанда, сіз әлеуетті автономды жүйені бір реттік мәтін генераторы ретінде қарастырасыз. Үлгі шамамен былай көрінеді:

1. Сіз егжей‑тегжейлі промпт жазасыз
2. Жауабын күтесіз
3. Шығарылымды қолмен бағалайсыз
4. Түзетіп, қайта промпт бересіз
5. Чатты жапқанда бүкіл контекст жоғалады

Бұл модельдің үш өлімші кемшілігі бар:

Тұрақты білім жоқ. Әр әңгіме – таза парақ. Сіз бірдей контексті қайта‑қайта түсіндіресіз. Сіздің ЖИ‑ыңыз сіздің кодтық базаңызды, талғамыңызды, шектеулеріңізді, тарихыңызды білмейді.

Делегация жоқ. Тұйық жер – әлі де сіз. Әрбір шешім, әрбір тексеру, әрбір келесі қадам сіздің араласуыңызды қажет етеді. ЖИ келесіде не істеу керектігін сіз айтқанша күтіп тұрады.

Мамандану жоқ. Сіз бәріне – код, құжаттама, дизайн, тестілеу, деплой – бір ғана жалпы интерфейсті пайдаланасыз. Бір стильдегі промпт. Бір контекст терезесі. Бір әңгіме бірнешеуінің жұмысын істеп тұр.

Телесуфлёр моделі ЖИ‑ды құрал ретінде қарайды. Бірақ құралдар автономияны масштабтамайды. Оны агенттер жасайды.

Агенттер тұрғысынан ойлағанда не өзгереді

Claude Code ішінде агент архитектурасы үш примитивтен тұрады:

• Субагенттер: бөлек контекст терезелері бар мамандандырылған Claude даналары (~/.claude/agents/)
• Дағдылар (Skills): автоматты түрде іске қосылатын, SKILL.md файлдары бар білім модульдері (~/.claude/skills/)
• Командалар: айқын әрекеттерге арналған пайдаланушы іске қосатын /slash командалар (~/.claude/commands/)

Классикалық промпт беруден негізгі айырмашылығы:

• Дағдылар контекстке қарай Claude тарапынан автоматты түрде іске қосылады
• Командалар сіздің /command деп қолмен теруіңізді қажет етеді
• Субагенттер жеке контекстте, өз құралдарымен жұмыс істейді

Айырмашылықты қарастырайық:

Телесуфлёр тәсілі:

«Біздің дизайн жүйесінің паттерндарына және қолжетімділік стандарттарына сай, суреті, тақырыбы, негізгі мәтіні және primary батырмасы бар card компонентін жаз...»

Claude Code тәсілі:

/generate card --variant=default --with-image=true --with-button=true

Біріншісі – сұрау. Екіншісі – card деген не, сіздің дизайн жүйеңіз не талап ететінін, қандай қолжетімділік стандарттары қолданылатынын және өзінің нәтижесін қалай тексеру керегін алдын ала білетін дағдыны шақыру.

Архитектура: субагенттер, дағдылар және командалар

Телесуфлёр моделін алмастыратын құрылым мынандай:

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-деңгей: дағдылар (Skills)

Дағдылар – автоматты түрде іске қосылатын білім модульдері. Claude‑тан дағдының мақсатына сай бір нәрсе сұрасаңыз, ол дағды автоматты түрде қолданылады.

~/.claude/skills/
├── card/
│   ├── SKILL.md
│   ├── workflows/
│   │   ├── generate.md
│   │   ├── validate.md
│   │   └── improve.md
│   ├── references/
│   │   └── schema.yml
│   └── scripts/
│       └── validate.py

Бұл Atomic Design методологиясын ұстанады: атомдар, молекулалар, организмдер. Әр дағды тек бір нәрсенің маманы. Card керек болса, card дағдысы автоіске қосылады.

Әр дағды біледі:

• Компонент схемасын (props, slots, варианттар)
• Сіздің дизайн жүйеңіздің конвенцияларын
• Фреймворкке тән паттерндерді
• WCAG қолжетімділік талаптарын
• Сілтеме жасай алатын туыс дағдыларды

3-деңгей: командалар

Командалар – пайдаланушы іске қосатын шорткаттар. Оларды шақыру үшін /command деп тересіз. Олар дағдылардың workflow‑ларында не глобалды деңгейде тұрады:

~/.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 өзі жүргізеді. Бұл сізге толық құралдарға қолжетімді, құрылымды workflow‑лар береді.

Толық мысал: Card дағдысы

Бұл қалай жұмыс істейтінін нақты дағды арқылы көрсетейін:

Дағдының құрылымы

~/.claude/skills/card/
├── SKILL.md           # Негізгі промпт пен нұсқаулар
├── workflows/         # Slash‑командалар
│   ├── generate.md
│   ├── validate.md
│   ├── improve.md
│   ├── document.md
│   ├── test.md
│   └── a11y.md
├── references/        # Контекстке жүктелетін құжаттама
│   └── schema.yml
└── scripts/           # Орындауға болатын Python/Bash скрипттері
    └── 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‑командаларды пайдалану

Жаңа card генерациялау:

/generate card \   --variant="default" \   --title="Welcome" \   --with-image=true \   --with-button=true

Бар card‑ты тексеру:

/validate card \   --file="components/card.jsx"

Қолжетімділік сәйкестігін тексеру:

/a11y card --level="AA"

Белгілі бір контекстке арналған UX‑ті жақсарту:

/improve card \   --context="e-commerce product listing" \   --focus="conversion"

Ішінде не болып жатады

/generate card командасын шақырғанда, Claude:

1. Card дағдысын іске қосады: SKILL.md контекстке жүктеледі
2. Схеманы оқиды:  Сіз берген параметрлерді рұқсат етілген props‑пен сәйкестендіреді
3. Басқа дағдыларға сілтеме жасайды:  image, heading, button дағдылары өз саласындағы білімді қосады
4. Workflow‑ты орындайды: workflows/generate.md іске қосылады
5. Өзін‑өзі тексереді: Өз нәтижесіне validate workflow‑ын жүргізеді
6. Нәтижені қайтарады:  Компонентті және ескертулер болса, олармен бірге береді

Card дағдысы жай ғана markup жасамайды. Ол әрқайсысы өз доменінің маманы болып табылатын мамандар жүйесін оркестрлейді.

Неге бұл маңызды: орындаушыдан жүйелік ойлаушыға дейін

Телесуфлёр моделі сізді оператор ретінде ұстап тұрады. Дағдылар моделі сізді архитектор етеді.

Мен промпт жазудан дағдыларды жобалауға ауысқанда бірнеше нәрсе өзгерді:

Контекстті қайталауды қойдым. Әр дағды өз доменін біледі. Card керек болған сайын, card деген не екенін қайта түсіндірмеймін.

Композиция тұрғысынан ойлай бастадым. Бет — бір промпт емес, организмдердің үйлесімі, олар молекулалардың үйлесімі, ал молекулалар атомдардың үйлесімі. Әр қабаттың өзінің дағдысы бар.

Тексеруді делегирледім. Әрбір нәтижені қолмен қараудың орнына, /validate командасы құрылымды, /a11y командасы WCAG сәйкестігін, /test командасы автоматтандырылған тесттерді тексереді. Мен тек ерекшеліктерді қараймын, әр нәтижені емес.

Институционалдық білім құрдым. Бір дағдының SKILL.md файлын жақсартсам, бұл жақсарту сақталады. Жүйе бір әңгіме аясында ғана емес, уақыт өте келе ақылды бола береді.

Бұл – ЖИ‑ды пайдалану мен ЖИ‑мен бірге салудың айырмашылығы.

Дизайн – бұл код

Дизайн жүйелерімен жұмыс істей жүріп, мен мына қағидаға келдім: Дизайн – бұл код.

Дизайн токендері, компонент схемалары және агент конфигурациялары теңестірілген кезде, дизайнерлер сипаттайтын нәрсе мен девелоперлер жасайтын нәрсе арасында аударма қабаты болмайды. Спецификация – бұл жүзеге асырудың өзі.

Агенттер бұл идеяны былайша іске асырады:

# Schema – жалғыз ақиқат көзі 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‑қадам: workflow‑тар (командалар) қосыңыз

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

Дағдылар кітапханаңызды құру

Дағдыларыңызды Atomic Design бойынша құрылымдаңыз:

Әр дағды:

• Өзінің SKILL.md конфигурациясына ие
• Slash‑командалары бар workflows/‑қа ие
• Құжаттамасы бар references/‑ке ие
• Автоматтандыруға арналған scripts/‑ке ие
• Қандай басқа дағдыларға сілтеме жасайтынын біледі

Бұл Claude контекстке қарай тиісті дағдыларды автоіске қосатын, бірізді әрі масштабталатын жүйе жасайды.

Болашақ – агенттердің қолында

Atomic Design авторы Брэд Фрост бұл бетбұрыс туралы айтып жүр: дизайн жүйелері енді ЖИ агенттері адамдар пайдаланатын компоненттердің өзінен UI жинай алуы үшін машина оқи алатын инфрақұрылымға айналуы тиіс.

Бұл 2030 жылға арналған жорамал емес. Бұл қазір болып жатыр.

Егер сіздің дизайн жүйеңізді агент парсалай алмаса, ол біртіндеп легасиға айналып келеді. Егер сіздің девелоперлік процесіңізде әр қадамда адам промпт беруі керек болса, ол масштабталмайды. Егер ЖИ‑мен әрбір әрекет нөлден басталса, сіз жиналған білімді зая кетіріп отырсыз.

ЖИ ойыншық болған кезде телесуфлёр моделі жарайтын. ЖИ инфрақұрылымға айналғанда – жарамайды.

Промпт беруді тоқтатыңыз. Дизайндауды бастаңыз.

Агенттер құрыңыз. Оларға дағдылар беріңіз. Бір‑бірімен үйлесіп жұмыс істеуіне мүмкіндік беріңіз.

Болашақ сценарий жазатындарға емес, жүйе құратындарға тиесілі.

Веб‑разработканың болашағы үшін агенттік дизайн жүйелерін салу.

Қосымша оқу

• The Design Is the Code  Дизайн жүйелеріндегі «клеткалық автоматтар» ойлау тәсіліне менің зерттеуім
• Atomic Design by Brad Frost  Компонент иерархияларының артындағы методология
• Designing Systems That Build Themselves  Орындаушыдан жүйелік ойлаушыға көшу