Nehajte vse narekovati svojemu ponudniku UI: ustvarite podagente, veščine in ukaze

Od odvisnosti od pozivov k inteligentnim sistemom agentov

Večina ljudi UI še vedno uporablja kot teleprompter.

Vtipkajo poziv. Počakajo. Dobijo odgovor. Kopirajo ga kam drugam. Potem vse znova. In znova. Vsak pogovor se začne pri ničli. Vsak pogovor pozabi, kaj je bilo prej.

To ni sodelovanje. To je narekovanje z dodatnimi koraki.

Če svojemu ponudniku UI leta 2026 še vedno narekujete kot teleprompter, zamujate celoten premik, ki se dogaja pod vašimi nogami.

Težava teleprompterja

Kadar UI uporabljate kot teleprompter, potencialno samostojen sistem obravnavate kot enkratni generator besedila. Vzorec je tak:

1. Napišete podroben poziv
2. Počakate na odgovor
3. Rezultat ročno ocenite
4. Izboljšate in znova pošljete poziv
5. Ko zaprete klepet, izgubite ves kontekst

Ta model ima tri usodne pomanjkljivosti:

Brez trajnega znanja. Vsak pogovor je prazen list. Isti kontekst razlagate v nedogled. Vaš UI ne pozna vaše kodne baze, vaših nastavitev, vaših omejitev ali vaše zgodovine.

Brez delegiranja. Ostajate ozko grlo. Vsaka odločitev, vsako preverjanje, vsak naslednji korak potrebuje vaš vnos. UI čaka, da mu poveste, kaj naj stori naslednje.

Brez specializacije. Za vse uporabljate en sam splošen vmesnik: kodiranje, dokumentacijo, oblikovanje, testiranje, uvajanje. En slog pozivov. Eno kontekstno okno. En pogovor, ki opravlja delo mnogih.

Model teleprompterja UI obravnava kot orodje. A orodja ne povečajo avtonomije. Agenti jo.

Kaj se spremeni, ko razmišljate v agentih

V Claude Code agentno arhitekturo sestavljajo trije gradniki:

• Podagenti: specializirane instance Claudea z izoliranimi kontekstnimi okni (~/.claude/agents/)
• Veščine: samodejno sprožena znanjska modula z datotekami SKILL.md (~/.claude/skills/)
• Ukazi: uporabniško sproženi ukazi /slash za izrecna dejanja (~/.claude/commands/)

Ključna razlika v primerjavi s tradicionalnim pozivanjem:

• Veščine Claude sproži samodejno glede na kontekst
• Ukaze morate izrecno vtipkati kot /command
• Podagenti tečejo v ločenem kontekstu z lastnimi orodji

Poglejte razliko:

Pristop teleprompterja:

"Napiši mi komponento kartice s sliko, naslovom, besedilom in primarnim gumbom po vzorcih našega oblikovalskega sistema in standardih dostopnosti ..."

Pristop Claude Code:

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

Prvo je prošnja. Drugo sproži veščino, ki že ve, kaj je kartica, kaj zahteva vaš oblikovalski sistem, kateri standardi dostopnosti veljajo in kako preveriti lasten izdelek.

Arhitektura: podagenti, veščine in ukazi

Takole izgleda struktura, ki nadomesti model teleprompterja:

1. raven: podagenti

Podagenti so samostojne markdown datoteke v ~/.claude/agents/, ki delo izvajajo vzporedno. Imajo lastna kontekstna okna in lahko kličejo veščine.

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

Vsaka datoteka podagenta ima YAML frontmatter:

• name: jasen identifikator
• description: kaj počne in kdaj ga priklicati
• tools: dovoljene zmožnosti (Read, Write, Bash, Grep, Glob)

Primer podagenta (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. raven: veščine

Veščine so samodejno sprožena znanjska modula. Ko Claudea vprašate nekaj, kar ustreza namenu veščine, jo Claude samodejno uporabi.

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

To sledi metodologiji Atomic Design: atomi, molekule, organizmi. Vsaka veščina je strokovnjak za natanko eno stvar. Ko potrebujete kartico, se samodejno sproži veščina kartice.

Vsaka veščina pozna:

• shemo komponente (props, slots, variante)
• konvencije vašega oblikovalskega sistema
• vzorce, specifične za ogrodje
• zahteve dostopnosti WCAG
• sorodne veščine, na katere se lahko sklicuje

3. raven: ukazi

Ukazi so uporabniško sprožene bližnjice. Za priklic vtipkate /command. Živijo v delovnih tokovih veščin ali globalno:

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

Ukazi lahko za načrtovanje pokličejo podagente, izvedbo pa nato prevzame glavni Claude. Tako dobite strukturirane delovne tokove s polnim dostopom do orodij.

Celoten primer: veščina kartice

Poglejmo, kako to natančno deluje na pravi veščini:

Struktura veščine

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

Datoteka 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

Uporaba ukazov slash

Ustvarite novo kartico:

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

Preverite obstoječo kartico:

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

Preverite skladnost z dostopnostjo:

/a11y card --level="AA"

Izboljšajte uporabniško izkušnjo za določen kontekst:

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

Kaj se dogaja v ozadju

Ko pokličete /generate card, Claude:

1. Sproži veščino kartice: SKILL.md se naloži v kontekst
2. Prebere shemo:  preveri vaše parametre glede na dovoljene props
3. Se sklicuje na druge veščine:  veščine image, heading in button prispevajo svoje strokovno znanje
4. Zažene delovni tok: izvede se workflows/generate.md
5. Sam preveri rezultat: na lastnem izdelku zažene delovni tok validate
6. Vrne rezultat:  poda komponento in morebitna opozorila

Veščina kartice ne ustvarja le označevanja. Orkestrira sistem specialistov, od katerih vsak prispeva svoje strokovno področje.

Zakaj je to pomembno: od graditelja do sistemskega misleca

Model teleprompterja vas drži v vlogi operaterja. Model veščin vas naredi za arhitekta.

Ko sem prešel od pisanja pozivov k oblikovanju veščin, se je spremenilo več stvari:

Nehal sem ponavljati kontekst. Vsaka veščina že pozna svoje področje. Ne razlagam, kaj je kartica, vsakič, ko jo potrebujem.

Začel sem razmišljati v kompoziciji. Stran ni en poziv, temveč usklajevanje organizmov, ti pa so usklajevanje molekul, te pa usklajevanje atomov. Vsaka plast ima svojo veščino.

Delegiral sem preverjanje. Namesto ročnega pregledovanja vsakega izdelka ukaz /validate preveri strukturo, ukaz /a11y skladnost z WCAG, ukaz /test pa zažene samodejne preglede. Pregledam izjeme, ne vsakega rezultata.

Zgradil sem institucionalno znanje. Ko izboljšam SKILL.md veščine, izboljšava ostane. Sistem sčasoma postaja pametnejši, ne le med enim pogovorom.

To je razlika med uporabo UI in gradnjo z UI.

Oblikovanje je koda

Pri svojem delu z oblikovalskimi sistemi sem prišel do načela: Oblikovanje je koda.

Ko se oblikovalski žetoni, sheme komponent in konfiguracije agentov uskladijo, med tem, kar določijo oblikovalci, in tem, kar zgradijo razvijalci, ni več prevajalske plasti. Specifikacija je izvedba.

Takole agenti to uresničijo:

# 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

Ta shema ni le dokumentacija. Je vir resnice. Agent iz nje ustvarja komponente. Preverjevalnik preverja glede nanjo. Oblikovalski žetoni se sklicujejo nanjo. Ena datoteka, mnogo uporab.

Ko oblikovalec v Figmi posodobi vrednosti žetonov, se posodobi konfiguracija agenta. Ko se posodobi konfiguracija agenta, se posodobijo ustvarjene komponente. Oblikovanje je koda, ker oboje izhaja iz iste sheme.

Kako začeti graditi s Claude Code

Če ste pripravljeni preseči model teleprompterja, je tu praktična pot:

1. korak: določite svoja področja

Katera področja vašega dela so ponavljajoča se, vezana na pravila in odvisna od konteksta? To so kandidati za veščine:

• Ustvarjanje kode
• Dokumentacija
• Testiranje
• Pregled in preverjanje
• Upravljanje oblikovalskega sistema
• Uvajanje in DevOps

2. korak: ustvarite svojo prvo veščino

Začnite s preprosto datoteko SKILL.md:

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

3. korak: dodajte delovne tokove (ukaze)

V workflows/ ustvarite šest osnovnih ukazov:

Vsak ukaz je markdown datoteka z navodili.

4. korak: vzpostavite sklicevanja med veščinami

Veščine se lahko sklicujejo na druge veščine:

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

Preslikajte te odvisnosti. Hierarhija naj ustreza naravni strukturi vašega področja.

5. korak: za zahtevne naloge ustvarite podagente

Kadar potrebujete izoliran kontekst ali vzporedno izvajanje, ustvarite datoteko podagenta 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

Gradnja knjižnice veščin

Veščine strukturirajte po načelih Atomic Design:

Vsaka veščina:

• ima svojo konfiguracijo SKILL.md
• ima workflows/ z ukazi slash
• ima references/ z dokumentacijo
• ima scripts/ za avtomatizacijo
• ve, na katere druge veščine se sklicuje

Tako nastane dosleden, razširljiv sistem, v katerem Claude glede na kontekst samodejno sproži pravo veščino.

Prihodnost je agentna

Brad Frost, ustvarjalec Atomic Designa, govori o tem premiku: oblikovalski sistemi morajo postati strojno berljiva infrastruktura, saj UI agenti zdaj sestavljajo uporabniške vmesnike iz istih komponent, kot jih uporabljajo človeške ekipe.

To ni napoved za leto 2030. To se dogaja zdaj.

Če vašega oblikovalskega sistema agent ne more razčleniti, postaja zapuščina. Če vaš razvojni potek zahteva, da človek poziva vsak korak, ne skalira. Če se vaše interakcije z UI vsakič začnejo pri ničli, zapravljate nakopičeno znanje.

Model teleprompterja je bil v redu, ko je bil UI novost. Ni v redu, ko je UI infrastruktura.

Nehajte pozivati. Začnite oblikovati.

Gradite agente. Dajte jim veščine. Pustite, naj se usklajujejo.

Prihodnost pripada tistim, ki arhitektirajo sisteme, ne tistim, ki pišejo skripte.

Gradim agentne oblikovalske sisteme za prihodnost spletnega razvoja.

Za nadaljnje branje

• The Design Is the Code  Moje raziskovanje razmišljanja s celičnimi avtomati v oblikovalskih sistemih
• Atomic Design by Brad Frost  Metodologija za hierarhijami komponent
• Designing Systems That Build Themselves  Od graditelja do sistemskega misleca