Хватит да диктирате свом AI провајдеру: направите субагенте, вештине и команде

Од зависности од упита ка интелигентним агентским системима

Већина људи још увек користи вештачку интелигенцију као телепромптер.

Укуцају упит. Сачекају. Добију одговор. Копирају га и налепе негде. Па све испочетка. И испочетка. Свака интеракција креће од нуле. Сваки разговор заборавља шта је било пре њега.

То није сарадња. То је диктирање са додатним корацима.

Ако у 2026. и даље диктирате свом AI провајдеру, измиче вам читав заокрет који се одвија испод ваших ногу.


Проблем телепромптера

Када AI користите као телепромптер, потенцијално аутономан систем третирате као генератор текста за једнократну употребу. Образац изгледа овако:

  1. Напишете детаљан упит
  2. Сачекате одговор
  3. Ручно процените резултат
  4. Дотерате и поново поставите упит
  5. Изгубите сав контекст чим затворите ћаскање

 

 

Овај модел има три кобне мане:

Нема трајног знања. Сваки разговор је чист лист. Изнова објашњавате исти контекст. Ваш AI не познаје ваш код, ваше склоности, ваша ограничења ни вашу историју.

Нема delegiranja. Ви остајете уско грло. Свака одлука, свака провера, сваки следећи корак чека на вас. 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: субагенти

Субагенти су самосталне markdown датотеке у ~/.claude/agents/ које извршавају посао паралелно. Имају сопствене контекстне прозоре и могу да позивају вештине.

~/.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, варијанте)
  • конвенције вашег дизајн система
  • обрасце специфичне за framework
  • 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"

Побољшање корисничког искуства за одређени контекст:

/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. Сам себе проверава: над сопственим резултатом покреће ток рада за проверу
  6. Враћа резултат:  даје компоненту заједно са евентуалним упозорењима

Вештина картице не генерише само markup. Она организује читав систем специјалиста, од којих сваки доприноси својом облашћу стручности.


Зашто је то важно: од градитеља до системског мислиоца

Модел телепромптера вас држи у улози оператера. Модел вештина од вас прави архитекту.

Када сам са писања упита прешао на пројектовање вештина, променило се неколико ствари:

Престао сам да понављам контекст. Свака вештина већ познаје своју област. Не објашњавам шта је картица сваки пут када ми затреба.

Почео сам да мислим у композицији. Страница није један упит, већ усклађеност организама, који су усклађеност молекула, који су усклађеност атома. Сваки слој има своју вештину.

Пренео сам проверу на њих. Уместо да ручно прегледам сваки резултат, команда /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

Изградња ваше библиотеке вештина

Структуришите своје вештине по атомском дизајну:

ТипУлогаПримери
АтомиОсновни градивни блоковиbutton, input, checkbox, avatar, badge, icon, link, image
МолекулиКомбинације атомаcard, modal, tabs, accordion, alert, dropdown, toast
ОрганизмиСложене компонентеheader, footer, dashboard, login-form, hero, sidebar

Свака вештина:

  • Има сопствену конфигурацију SKILL.md
  • Има workflows/ са slash командама
  • Има references/ са документацијом
  • Има scripts/ за аутоматизацију
  • Зна на које друге вештине упућује

Тако настаје доследан, скалабилан систем у којем Claude на основу контекста аутоматски покреће праву вештину.


Будућност је агентска

Brad Frost, твorac атомског дизајна, говори управо о овом заокрету: дизајн системи морају постати машински читљива инфраструктура, јер AI агенти већ склапају корисничке интерфејсе од истих компоненти које користе људски тимови.

Ово није прогноза за 2030. Дешава се сада.

Ако ваш дизајн систем агент не може да разуме, он постаје застарео. Ако ваш процес развоја захтева да човек покреће сваки корак, он се не може проширити. Ако ваше AI интеракције сваки пут крећу од нуле, расипате накупљено знање.

Модел телепромптера је био у реду док је AI био новотарија. Није у реду када је AI инфраструктура.

Престаните да постављате упите. Почните да дизајнирате.

Градите агенте. Дајте им вештине. Пустите их да се координишу.

Будућност припада онима који пројектују системе, а не онима који пишу скрипте.

Градимо агентске дизајн системе за будућност веб развоја.


Додатна литература

Teleprompter vs. Agentic Subagents model diagram with flowcharts and text.