Хватит да диктирате свом AI провајдеру: направите субагенте, вештине и команде
Од зависности од упита ка интелигентним агентским системима
Већина људи још увек користи вештачку интелигенцију као телепромптер.
Укуцају упит. Сачекају. Добију одговор. Копирају га и налепе негде. Па све испочетка. И испочетка. Свака интеракција креће од нуле. Сваки разговор заборавља шта је било пре њега.
То није сарадња. То је диктирање са додатним корацима.
Ако у 2026. и даље диктирате свом AI провајдеру, измиче вам читав заокрет који се одвија испод ваших ногу.
Проблем телепромптера
Када AI користите као телепромптер, потенцијално аутономан систем третирате као генератор текста за једнократну употребу. Образац изгледа овако:
- Напишете детаљан упит
- Сачекате одговор
- Ручно процените резултат
- Дотерате и поново поставите упит
- Изгубите сав контекст чим затворите ћаскање
Овај модел има три кобне мане:
Нема трајног знања. Сваки разговор је чист лист. Изнова објашњавате исти контекст. Ваш 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:
- Покреће вештину картице: SKILL.md се учитава у контекст
- Чита шему: проверава ваше параметре у односу на дозвољене props
- Позива друге вештине: вештине image, heading и button уносе своју стручност
- Извршава ток рада: извршава се workflows/generate.md
- Сам себе проверава: над сопственим резултатом покреће ток рада за проверу
- Враћа резултат: даје компоненту заједно са евентуалним упозорењима
Вештина картице не генерише само 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 инфраструктура.
Престаните да постављате упите. Почните да дизајнирате.
Градите агенте. Дајте им вештине. Пустите их да се координишу.
Будућност припада онима који пројектују системе, а не онима који пишу скрипте.
Градимо агентске дизајн системе за будућност веб развоја.
Додатна литература
- Дизајн је код Моје истраживање мишљења засноване на целуларним аутоматима у дизајн системима
- Атомски дизајн, Brad Frost Методологија која стоји иза хијерархије компоненти
- Системи који граде сами себе Од градитеља до системског мислиоца