Přestaňte svému poskytovateli AI dělat nápovědu jako z prompteru a vytvářejte podagenty, dovednosti a příkazy

Přechod od závislosti na promtech k inteligentním agentským systémům

Většina lidí stále používá AI jako čtecí zařízení.

Napíšou prompt. Počkají. Dostanou odpověď. Zkopírují ji někam jinam. Pak to udělají znovu. A znovu. Každá interakce začíná od nuly. Každá konverzace zapomíná, co bylo předtím.

Tohle není spolupráce. Je to diktování s přidanými kroky.

V roce 2026, pokud se svou AI pořád zacházíte jako s teleprompterem, uniká vám celá změna, která se děje přímo pod vámi.

Problém „teleprompteru“

Když AI používáte jako teleprompter, zacházíte s potenciálně autonomním systémem jako s jednorázovým generátorem textu. Vzor vypadá takto:

1. Napíšete detailní prompt
2. Čekáte na odpověď
3. Ručním způsobem vyhodnotíte výstup
4. Upřesníte zadání a znovu promptujete
5. Po zavření chatu přijdete o veškerý kontext

Tento model má tři fatální chyby:

Žádné trvalé znalosti. Každá konverzace je čistý list. Stejný kontext vysvětlujete znovu a znovu. Vaše AI nezná váš kód, vaše preference, omezení ani historii.

Žádná delegace. Stále jste úzkým hrdlem. Každé rozhodnutí, každé ověření, každý další krok vyžaduje váš vstup. AI čeká, až jí řeknete, co má dělat dál.

Žádná specializace. Používáte jedno generické rozhraní na všechno – kódování, dokumentaci, design, testování, nasazení. Jeden styl promptů. Jedno kontextové okno. Jeden rozhovor dělá práci za mnoho.

Model teleprompteru zachází s AI jako s nástrojem. Ale nástroje neškálují autonomii. To dělají agenti.

Co se změní, když začnete myslet v agentech

V Claude Code se agentová architektura skládá ze tří primitiv:

• Subagenti: Specializované instance Claude s oddělenými kontextovými okny (~/.claude/agents/)
• Skills: Automaticky spouštěné znalostní moduly se soubory SKILL.md (~/.claude/skills/)
• Příkazy: Uživatel spouští /slash příkazy pro explicitní akce (~/.claude/commands/)

Klíčový rozdíl oproti tradičnímu promptování:

• Skills se spouštějí automaticky na základě kontextu
• Příkazy vyžadují, abyste explicitně napsali /command
• Subagenti běží v odděleném kontextu s vlastními nástroji

Uvažujte o rozdílu:

Přístup „teleprompter“:

„Napiš mi komponentu karty s obrázkem, titulkem, textem těla a primárním tlačítkem podle našich patternů design systému a standardů přístupnosti…“

Přístup Claude Code:

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

První je požadavek. Druhý vyvolá skill, který už ví, co je karta, co váš design systém vyžaduje, jaké standardy přístupnosti platí a jak sám sebe validovat.

Architektura: Subagenti, Skills & Příkazy

Tady je struktura, která nahrazuje model teleprompteru:

Úroveň 1: Subagenti

Subagenti jsou samostatné markdown soubory v ~/.claude/agents/, které vykonávají práci paralelně. Mají vlastní kontextová okna a mohou vyvolávat skills.

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

Každý soubor subagenta má YAML frontmatter:

• name: Jasný identifikátor
• description: Co dělá a kdy ho vyvolat
• tools: Povolené schopnosti (Read, Write, Bash, Grep, Glob)

Pří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: Skills

Skills jsou automaticky spouštěné znalostní moduly. Když se Claude zeptáte na něco, co odpovídá účelu skillu, Claude ho automaticky použije.

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

Tohle se řídí metodologií Atomic Design: atomy, molekuly, organismy. Každý skill je expert na jednu jedinou věc. Když potřebujete kartu, skill „card“ se spustí automaticky.

Každý skill zná:

• Schéma komponenty (props, sloty, varianty)
• Konvence vašeho design systému
• Patterny specifické pro framework
• Požadavky přístupnosti podle WCAG
• Související skills, na které se může odkazovat

Úroveň 3: Příkazy

Příkazy jsou zkratky spouštěné uživatelem. Napíšete /command a tím je vyvoláte. Žijí ve workflowch skillů nebo globálně:

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

Příkazy mohou vyvolat subagenty pro plánování, zatímco hlavní Claude řeší exekuci. Díky tomu máte strukturované workflow s plným přístupem k nástrojům.

Kompletní příklad: Skill „Card“

Ukážu vám přesně, jak to funguje na reálném skillu:

Struktura skillu

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

Soubor 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žívání slash příkazů

Vygenerování nové karty:

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

Validace existující karty:

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

Kontrola souladu s požadavky přístupnosti:

/a11y card --level="AA"

Zlepšení UX pro konkrétní kontext:

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

Co se děje „pod kapotou“

Když spustíte /generate card, Claude:

1. Spustí skill „card“: SKILL.md se načte do kontextu
2. Načte schéma: Ověří vaše parametry vůči povoleným props
3. Odkáže se na jiné skills: Skilly image, heading, button dodají svoji expertizu
4. Spustí workflow: Provede se workflows/generate.md
5. Samotestuje se: Spustí validační workflow nad vlastním výstupem
6. Vrátí výsledek: Dodá komponentu a případná varování

Skill card nedělá jen generování markupu. Orchestru je systém specialistů, z nichž každý přináší svou doménovou odbornost.

Proč na tom záleží: Od „buildera“ k systémovému architektovi

Model teleprompteru vás drží v roli operátora. Model skillů z vás dělá architekta.

Když jsem přešel od psaní promptů k navrhování skills, změnilo se několik věcí:

Přestal jsem opakovat kontext. Každý skill už zná svou doménu. Nemusím pokaždé vysvětlovat, co je karta, když nějakou potřebuji.

Začal jsem myslet v kompozici. Stránka není jeden prompt – je to koordinace organismů, které jsou koordinací molekul, které jsou koordinací atomů. Každá vrstva má svůj vlastní skill.

Delegoval jsem validaci. Místo ručního procházení každého výstupu kontroluje strukturu příkaz /validate, shodu s WCAG příkaz /a11y a příkaz /test spouští automatické testy. Reviduji výjimky, ne každý výsledek.

Budoval jsem institucionální znalost. Když vylepším SKILL.md nějakého skillu, zlepšení přetrvá. Systém se časem stává chytřejším, ne jen v rámci jedné konverzace.

Tohle je rozdíl mezi používáním AI a stavěním s AI.

Design je kód

Při práci s design systémy jsem dospěl k principu: Design je kód.

Když jsou design tokens, schémata komponent a konfigurace agentů sladěné, neexistuje mezivrstva mezi tím, co designéři specifikují, a tím, co vývojáři staví. Specifikace je implementace.

Tady je, jak to agenti dělají reálným:

# 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

Toto schéma není jen dokumentace. Je to zdroj pravdy. Agent z něj generuje komponenty. Validátor proti němu kontroluje. Design tokens se na něj odkazují. Jeden soubor, mnoho použití.

Když designér aktualizuje hodnoty tokenů ve Figmě, aktualizuje se konfigurace agenta. Když se aktualizuje konfigurace agenta, aktualizované komponenty se znovu vygenerují. Design je kód, protože obojí vychází ze stejného schématu.

Jak začít stavět s Claude Code

Pokud jste připraveni posunout se za model teleprompteru, tady je praktická cesta:

Krok 1: Identifikujte své domény

Které oblasti vaší práce jsou opakující se, řízené pravidly a závislé na kontextu? To jsou kandidáti na skills:

• Generování kódu
• Dokumentace
• Testování
• Revize a validace
• Správa design systémů
• Nasazení a DevOps

Krok 2: Vytvořte svůj první skill

Začněte 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: Přidejte workflow (příkazy)

Vytvořte šest základních příkazů ve složce workflows/:

Každý příkaz je markdown soubor s instrukcemi.

Krok 4: Založte reference mezi skills

Skills se mohou odkazovat na jiné skills:

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

Zmapujte tyto závislosti. Hierarchie by měla odpovídat přirozené struktuře vaší domény.

Krok 5: Vytvářejte subagenty pro složité úkoly

Když potřebujete izolovaný kontext nebo paralelní běh, vytvořte soubor 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

Budování vaší knihovny skills

Strukturovaně budujte skills podle Atomic Design:

Každý skill:

• Má vlastní konfiguraci SKILL.md
• Má workflows/ se slash příkazy
• Má references/ s dokumentací
• Má scripts/ pro automatizaci
• Ví, na které jiné skills se odkazuje

Tím vzniká konzistentní, škálovatelný systém, ve kterém Claude automaticky spouští správný skill na základě kontextu.

Budoucnost je agentická

Brad Frost, autor Atomic Design, o téhle změně mluví už nějakou dobu: design systémy se musí stát strojově čitelnou infrastrukturou, protože AI agenti dnes skládají UI ze stejných komponent, jaké používají lidské týmy.

Tohle není předpověď na rok 2030. Děje se to teď.

Pokud váš design systém neumí zpracovat agent, stává se z něj „legacy“. Pokud váš vývojový workflow vyžaduje člověka, aby promptoval každý krok, neškáluje. Pokud každá vaše AI interakce začíná od nuly, plýtváte nahromaděnými znalostmi.

Model teleprompteru byl v pořádku, když byla AI novinka. Není v pořádku, když je AI infrastrukturou.

Přestaňte promptovat. Začněte navrhovat.

Stavte agenty. Dejte jim skills. Nechte je koordinovat.

Budoucnost patří těm, kdo navrhují systémy, ne těm, kdo píší skripty.

Budování agentických design systémů pro budoucnost webového vývoje.

Další čtení

• The Design Is the Code  Moje úvahy o myšlení v termínech celulárních automatů v design systémech
• Atomic Design by Brad Frost  Metodologie stojící za hierarchií komponent
• Designing Systems That Build Themselves  Od buildera k systémovému thinkerovi