Prestaňte diktovať svojmu poskytovateľovi AI: vytvorte subagentov, zručnosti a príkazy

Od závislosti na promptoch k inteligentným systémom agentov

Väčšina ľudí stále používa AI ako teleprompter.

Napíšu prompt. Počkajú. Dostanú odpoveď. Skopírujú ju niekam inam. A potom všetko znova. A znova. Každá interakcia začína od nuly. Každý rozhovor zabudne, čo mu predchádzalo.

To nie je spolupráca. Je to diktovanie s pár zbytočnými krokmi navyše.

Ak v roku 2026 stále diktujete svojmu poskytovateľovi AI ako teleprompteru, unikne vám celý posun, ktorý sa odohráva pod vašimi nohami.

Problém s teleprompterom

Keď používate AI ako teleprompter, zaobchádzate s potenciálne autonómnym systémom ako s jednorazovým generátorom textu. Vzorec vyzerá takto:

1. Napíšete podrobný prompt
2. Počkáte na odpoveď
3. Výstup ručne vyhodnotíte
4. Upravíte a zadáte prompt znova
5. Po zatvorení chatu stratíte celý kontext

Tento model má tri zásadné nedostatky:

Žiadne trvalé vedomosti. Každý rozhovor je čistý list. Stále dokola vysvetľujete ten istý kontext. Vaša AI nepozná váš kód, vaše preferencie, vaše obmedzenia ani vašu históriu.

Žiadne delegovanie. Zostávate úzkym hrdlom. Každé rozhodnutie, každá validácia, každý ďalší krok vyžaduje váš vstup. AI čaká, kým jej poviete, čo má robiť ďalej.

Žiadna špecializácia. Na všetko používate jedno univerzálne rozhranie: kódovanie, dokumentáciu, dizajn, testovanie, nasadzovanie. Jeden štýl promptov. Jedno kontextové okno. Jeden rozhovor, ktorý robí prácu mnohých.

Model teleprompteru vníma AI ako nástroj. Nástroje však autonómiu nerozširujú. Agenti áno.

Čo sa zmení, keď začnete myslieť v agentoch

V Claude Code pozostáva architektúra agentov z troch základných prvkov:

• Subagenti: špecializované inštancie Claude s izolovanými kontextovými oknami (~/.claude/agents/)
• Zručnosti (Skills): automaticky spúšťané znalostné moduly so súbormi SKILL.md (~/.claude/skills/)
• Príkazy (Commands): /slash príkazy spúšťané používateľom pre explicitné akcie (~/.claude/commands/)

Kľúčový rozdiel oproti tradičnému zadávaniu promptov:

• Zručnosti Claude spúšťa automaticky podľa kontextu
• Príkazy musíte explicitne napísať ako /command
• Subagenti bežia v samostatnom kontexte s vlastnými nástrojmi

Zamyslite sa nad rozdielom:

Prístup teleprompteru:

"Napíš mi komponent karty s obrázkom, nadpisom, textom a primárnym tlačidlom podľa vzorov nášho dizajnového systému a štandardov prístupnosti..."

Prístup Claude Code:

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

Prvé je žiadosť. Druhé vyvolá zručnosť, ktorá už vie, čo je karta, čo vyžaduje váš dizajnový systém, aké štandardy prístupnosti platia a ako si overiť vlastný výstup.

Architektúra: subagenti, zručnosti a príkazy

Takto vyzerá štruktúra, ktorá nahrádza model teleprompteru:

Úroveň 1: Subagenti

Subagenti sú samostatné markdown súbory v ~/.claude/agents/, ktoré vykonávajú prácu paralelne. Majú vlastné kontextové okná a môžu volať zručnosti.

~/.claude/agents/
├── header-builder.md
├── footer-builder.md
└── dashboard-builder.md

Každý súbor subagenta má YAML frontmatter:

• name: jasný identifikátor
• description: čo robí a kedy ho vyvolať
• tools: povolené schopnosti (Read, Write, Bash, Grep, Glob)

Príklad subagenta (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...

Úroveň 2: Zručnosti

Zručnosti sú automaticky spúšťané znalostné moduly. Keď sa Claude opýtate na niečo, čo zodpovedá účelu nejakej zručnosti, Claude ju použije automaticky.

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

Vychádza to z metodológie Atomic Design: atómy, molekuly, organizmy. Každá zručnosť je expertom na presne jednu vec. Keď potrebujete kartu, automaticky sa spustí zručnosť card.

Každá zručnosť pozná:

• Schému komponentu (props, sloty, varianty)
• Konvencie vášho dizajnového systému
• Vzory špecifické pre framework
• Požiadavky na prístupnosť podľa WCAG
• Súvisiace zručnosti, na ktoré môže odkazovať

Úroveň 3: Príkazy

Príkazy sú skratky spúšťané používateľom. Vyvoláte ich napísaním /command. Žijú vo workflowoch zručností alebo globálne:

~/.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

Príkazy môžu vyvolať subagentov na plánovanie a samotné vykonanie potom zvládne hlavný Claude. Získate štruktúrované workflowy s plným prístupom k nástrojom.

Kompletný príklad: zručnosť Card

Ukážem vám presne, ako to funguje na reálnej zručnosti:

Štruktúra zručnosti

~/.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

Súbor 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

Používanie slash príkazov

Vygenerovanie novej karty:

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

Validácia existujúcej karty:

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

Kontrola súladu s prístupnosťou:

/a11y card --level="AA"

Vylepšenie UX pre konkrétny kontext:

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

Čo sa deje pod kapotou

Keď vyvoláte /generate card, Claude:

1. Spustí zručnosť card: SKILL.md sa načíta do kontextu
2. Prečíta schému:  overí vaše parametre voči povoleným props
3. Odkáže na ďalšie zručnosti:  zručnosti image, heading a button prispejú svojou odbornosťou
4. Spustí workflow: vykoná sa workflows/generate.md
5. Sám sa overí: spustí workflow validate nad vlastným výstupom
6. Vráti výsledok:  poskytne komponent spolu s prípadnými upozorneniami

Zručnosť card negeneruje iba značky. Riadi systém špecialistov, z ktorých každý prispieva svojou doménovou odbornosťou.

Prečo na tom záleží: od tvorcu k systémovému mysliteľovi

Model teleprompteru z vás robí operátora. Model zručností z vás robí architekta.

Keď som prešiel od písania promptov k navrhovaniu zručností, zmenilo sa niekoľko vecí:

Prestal som opakovať kontext. Každá zručnosť už svoju doménu pozná. Nevysvetľujem, čo je karta, zakaždým, keď ju potrebujem.

Začal som myslieť v kompozícii. Stránka nie je jeden prompt, je to koordinácia organizmov, ktoré sú koordináciou molekúl, tie zase koordináciou atómov. Každá vrstva má vlastnú zručnosť.

Delegoval som validáciu. Namiesto ručnej kontroly každého výstupu štruktúru kontroluje príkaz /validate, súlad s WCAG príkaz /a11y a automatizované kontroly spúšťa príkaz /test. Kontrolujem výnimky, nie každý výsledok.

Vybudoval som inštitucionálnu pamäť. Keď vylepším SKILL.md nejakej zručnosti, vylepšenie zostane. Systém múdrie v čase, nielen počas jedného rozhovoru.

To je rozdiel medzi používaním AI a budovaním s AI.

Dizajn je kód

Pri práci s dizajnovými systémami som dospel k princípu: Dizajn je kód.

Keď sa dizajnové tokeny, schémy komponentov a konfigurácie agentov zhodujú, medzi tým, čo dizajnéri špecifikujú, a tým, čo vývojári postavia, nie je žiadna prekladová vrstva. Špecifikácia je implementácia.

Takto to agenti robia skutočnosťou:

# 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

Táto schéma nie je len dokumentácia. Je to zdroj pravdy. Agent z nej generuje komponenty. Validátor kontroluje voči nej. Dizajnové tokeny sa na ňu odkazujú. Jeden súbor, mnoho použití.

Keď dizajnér aktualizuje hodnoty tokenov vo Figme, aktualizuje sa konfigurácia agenta. Keď sa aktualizuje konfigurácia agenta, aktualizujú sa generované komponenty. Dizajn je kód, pretože oboje vychádza z tej istej schémy.

Ako začať stavať s Claude Code

Ak ste pripravení opustiť model teleprompteru, tu je praktická cesta:

Krok 1: Určte svoje domény

Ktoré oblasti vašej práce sú opakujúce sa, riadené pravidlami a závislé od kontextu? Tie sú kandidátmi na zručnosti:

• Generovanie kódu
• Dokumentácia
• Testovanie
• Revízia a validácia
• Správa dizajnového systému
• Nasadzovanie a DevOps

Krok 2: Vytvorte svoju prvú zručnosť

Začnite jednoduchým SKILL.md:

---
name: my-component
description: Generate and validate my-component
---  # My Component Skill  When user asks about my-component, apply these rules...

Krok 3: Pridajte workflowy (príkazy)

Vytvorte šesť základných príkazov v workflows/:

Každý príkaz je markdown súbor s pokynmi.

Krok 4: Určte odkazy medzi zručnosťami

Zručnosti môžu odkazovať na iné zručnosti:

## Related Skills  This skill uses:
- image (for card images)
- button (for CTAs)
- heading (for titles)

Zmapujte tieto závislosti. Hierarchia by mala zodpovedať prirodzenej štruktúre vašej domény.

Krok 5: Vytvorte subagentov pre zložité úlohy

Keď potrebujete izolovaný kontext alebo paralelné vykonávanie, vytvorte súbor subagenta v ~/.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

Budovanie knižnice zručností

Zručnosti štruktúrujte podľa Atomic Design:

Každá zručnosť:

• Má vlastnú konfiguráciu SKILL.md
• Má workflows/ so slash príkazmi
• Má references/ s dokumentáciou
• Má scripts/ pre automatizáciu
• Vie, na ktoré ďalšie zručnosti odkazuje

Tak vznikne konzistentný, škálovateľný systém, v ktorom Claude podľa kontextu automaticky spustí tú správnu zručnosť.

Budúcnosť je agentická

Brad Frost, tvorca Atomic Design, hovorí o tomto posune: dizajnové systémy sa musia stať strojovo čitateľnou infraštruktúrou, pretože AI agenti dnes skladajú používateľské rozhrania z rovnakých komponentov, aké používajú ľudské tímy.

Nie je to predpoveď o roku 2030. Deje sa to už teraz.

Ak váš dizajnový systém agent nedokáže spracovať, stáva sa z neho záťaž z minulosti. Ak váš vývojový workflow vyžaduje, aby človek zadával prompt pri každom kroku, nedá sa škálovať. Ak vaše interakcie s AI začínajú zakaždým od nuly, mrhať nahromadenými vedomosťami.

Model teleprompteru bol v poriadku, keď bola AI novinkou. Nie je v poriadku, keď je AI infraštruktúrou.

Prestaňte zadávať prompty. Začnite navrhovať.

Budujte agentov. Dajte im zručnosti. Nechajte ich koordinovať sa.

Budúcnosť patrí tým, ktorí navrhujú systémy, nie tým, ktorí píšu skripty.

Budujem agentické dizajnové systémy pre budúcnosť webového vývoja.

Ďalšie čítanie

• The Design Is the Code  Moje skúmanie myslenia bunkových automatov v dizajnových systémoch
• Atomic Design by Brad Frost  Metodológia za hierarchiami komponentov
• Designing Systems That Build Themselves  Od tvorcu k systémovému mysliteľovi