Slutt å teleprompte AI-leverandøren din – lag subagentar, skills og kommandoar

Frå prompt-avhengnad til intelligente agentsystem

Dei fleste brukar framleis AI som ein teleprompter.

Dei skriv ein prompt. Dei ventar. Dei får eit svar. Dei kopierer det til ein annan stad. Så gjer dei det om att. Og om att. Kvar samtale startar frå null. Kvar samtale gløymer det som kom før.

Dette er ikkje samarbeid. Det er diktat med ekstra steg.

Held du i 2026 framleis på å teleprompte AI-leverandøren din, går du glipp av heile skiftet som skjer under føtene dine.

Teleprompter-problemet

Når du brukar AI som ein teleprompter, behandlar du eit potensielt sjølvstendig system som ein tekstgenerator til eingongsbruk. Mønsteret ser slik ut:

1. Du skriv ein detaljert prompt
2. Du ventar på svaret
3. Du vurderer resultatet manuelt
4. Du justerer og promptar på nytt
5. Du mistar all kontekst når du lukkar chatten

Denne modellen har tre dødelege feil:

Ingen varig kunnskap. Kvar samtale er eit blankt ark. Du forklarar den same konteksten att og att. AI-en din kjenner ikkje kodebasen din, preferansane dine, avgrensingane dine eller historia di.

Ingen delegering. Du er framleis flaskehalsen. Kvar avgjerd, kvar validering, kvart neste steg krev innspel frå deg. AI-en ventar på at du skal seie kva han skal gjere vidare.

Inga spesialisering. Du brukar ein generisk grensesnitt til alt: koding, dokumentasjon, design, testing, utrulling. Éin promptstil. Eitt kontekstvindauge. Éin samtale som gjer jobben til mange.

Teleprompter-modellen ser på AI som eit verktøy. Men verktøy skalerer ikkje autonomi. Agentar gjer det.

Kva som endrar seg når du tenkjer i agentar

I Claude Code består agentarkitekturen av tre byggjeklossar:

• Subagentar: Spesialiserte Claude-instansar med isolerte kontekstvindauge (~/.claude/agents/)
• Skills: Kunnskapsmodular som utløyser seg sjølve, med SKILL.md-filer (~/.claude/skills/)
• Kommandoar: /slash-kommandoar du utløyser sjølv for eksplisitte handlingar (~/.claude/commands/)

Hovudskilnaden frå tradisjonell prompting:

• Skills blir utløyste automatisk av Claude ut frå konteksten
• Kommandoar krev at du skriv /command eksplisitt
• Subagentar køyrer i ein eigen kontekst med eigne verktøy

Tenk over skilnaden:

Teleprompter-tilnærminga:

"Skriv ein kortkomponent for meg med bilete, tittel, brødtekst og ein primærknapp som følgjer designsystemmønstera og tilgjengestandardane våre..."

Claude Code-tilnærminga:

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

Den første er ei førespurnad. Den andre set i gang ein skill som allereie veit kva eit kort er, kva designsystemet ditt krev, kva tilgjengestandardar som gjeld, og korleis han skal validere sitt eige resultat.

Arkitekturen: Subagentar, skills og kommandoar

Her er strukturen som tek over for teleprompter-modellen:

Nivå 1: Subagentar

Subagentar er sjølvstendige markdown-filer i ~/.claude/agents/ som utfører arbeid parallelt. Dei har eigne kontekstvindauge og kan setje i gang skills.

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

Kvar subagentfil har YAML-frontmatter:

• name: Ein tydeleg identifikator
• description: Kva han gjer og når han skal brukast
• tools: Tillatne evner (Read, Write, Bash, Grep, Glob)

Eksempel på subagent (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...

Nivå 2: Skills

Skills er kunnskapsmodular som utløyser seg sjølve. Når du spør Claude om noko som passar føremålet til ein skill, brukar Claude han automatisk.

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

Dette følgjer Atomic Design-metodikken: atom, molekyl, organismar. Kvar skill er ekspert på nøyaktig éin ting. Treng du eit kort, utløyser kort-skillen seg sjølv.

Kvar skill kjenner til:

• Skjemaet til komponenten (props, slots, variantar)
• Konvensjonane i designsystemet ditt
• Rammeverkspesifikke mønster
• WCAG-krav til tilgjenge
• Relaterte skills han kan vise til

Nivå 3: Kommandoar

Kommandoar er snarvegar du utløyser sjølv. Du skriv /command for å køyre dei. Dei ligg i skill-arbeidsflytar eller globalt:

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

Kommandoar kan setje i gang subagentar for planlegging, medan hovud-Claude står for utføringa. Då får du strukturerte arbeidsflytar med full tilgang til verktøya.

Fullstendig eksempel: Kort-skillen

La meg vise nøyaktig korleis dette fungerer med ein ekte skill:

Skill-strukturen

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

---
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

Slik brukar du slash-kommandoar

Lag eit nytt kort:

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

Valider eit eksisterande kort:

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

Sjekk at tilgjengekrava er oppfylte:

/a11y card --level="AA"

Forbetre brukaropplevinga for ein bestemt samanheng:

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

Kva som skjer under panseret

Når du køyrer /generate card, gjer Claude dette:

1. Utløyser kort-skillen: SKILL.md blir lasta inn i konteksten
2. Les skjemaet:  Validerer parametrane dine mot tillatne props
3. Viser til andre skills:  image-, heading- og button-skillane bidreg med ekspertisen sin
4. Køyrer arbeidsflyten: workflows/generate.md blir utført
5. Sjølvvaliderer: Køyrer validate-arbeidsflyten på sitt eige resultat
6. Returnerer resultatet:  Gir deg komponenten saman med eventuelle åtvaringar

Kort-skillen genererer ikkje berre markup. Han orkestrerer eit system av spesialistar som kvar bidreg med fagkunnskapen sin.

Derfor er det viktig: Frå byggjar til systemtenkjar

Teleprompter-modellen gjer deg til operatøren. Skill-modellen gjer deg til arkitekten.

Då eg gjekk frå å skrive promptar til å designe skills, endra fleire ting seg:

Eg slutta å gjenta konteksten. Kvar skill kjenner allereie domenet sitt. Eg forklarar ikkje kva eit kort er kvar gong eg treng eitt.

Eg byrja å tenkje i samansetjing. Ei side er ikkje éin prompt – ho er ei koordinering av organismar, som er koordineringar av molekyl, som er koordineringar av atom. Kvart lag har sin eigen skill.

Eg delegerte valideringa. I staden for å gå gjennom kvart resultat manuelt sjekkar /validate-kommandoen strukturen, /a11y-kommandoen sjekkar WCAG-samsvar, og /test-kommandoen køyrer automatiske kontrollar. Eg går gjennom unntaka, ikkje kvart einaste resultat.

Eg bygde institusjonell kunnskap. Når eg forbetrar SKILL.md til ein skill, blir forbetringa ståande. Systemet blir smartare over tid, ikkje berre i ein enkelt samtale.

Dette er skilnaden mellom å bruke AI og å bygge med AI.

Designet er koden

I arbeidet mitt med designsystem har eg landa på eit prinsipp: Designet er koden.

Når designtokens, komponentskjema og agentkonfigurasjonar er samstemte, finst det ikkje noko omsetjingslag mellom det designarar spesifiserer og det utviklarar bygger. Spesifikasjonen er implementasjonen.

Slik gjer agentar dette til røyndom:

# 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

Dette skjemaet er ikkje berre dokumentasjon. Det er sanningskjelda. Agenten genererer komponentar frå det. Validatoren sjekkar mot det. Designtokenane viser til det. Éi fil, mange bruksområde.

Når ein designar oppdaterer tokenverdiane i Figma, blir agentkonfigurasjonen oppdatert. Når agentkonfigurasjonen blir oppdatert, blir dei genererte komponentane oppdaterte. Designet er koden fordi begge er utleidde frå det same skjemaet.

Slik kjem du i gang med Claude Code

Er du klar til å gå forbi teleprompter-modellen, er her ein praktisk veg:

Steg 1: Finn domena dine

Kva delar av arbeidet ditt er repetitive, regelstyrte og kontekstavhengige? Der finn du skill-kandidatane:

• Kodegenerering
• Dokumentasjon
• Testing
• Gjennomgang og validering
• Styring av designsystem
• Utrulling og DevOps

Steg 2: Lag den første skillen din

Start med ei enkel SKILL.md:

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

Steg 3: Legg til arbeidsflytar (kommandoar)

Lag dei seks kjernekommandoane i workflows/:

Kvar kommando er ei markdown-fil med instruksjonar.

Steg 4: Etabler skill-referansar

Skills kan vise til andre skills:

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

Kartlegg desse avhengnadene. Hierarkiet bør spegle den naturlege strukturen i domenet ditt.

Steg 5: Lag subagentar til komplekse oppgåver

Treng du isolert kontekst eller parallell utføring, lag ei subagentfil i ~/.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

Bygg skill-biblioteket ditt

Strukturer skillane dine etter Atomic Design:

Kvar skill:

• Har sin eigen SKILL.md-konfigurasjon
• Har workflows/ med slash-kommandoar
• Har references/ med dokumentasjon
• Har scripts/ for automatisering
• Veit kva andre skills han viser til

Dette gir eit konsistent, skalerbart system der Claude utløyser rett skill ut frå konteksten.

Framtida er agentisk

Brad Frost, skaparen av Atomic Design, har snakka om dette skiftet: designsystem må bli maskinlesbar infrastruktur, fordi AI-agentar no set saman brukargrensesnitt av dei same komponentane som menneskelege team brukar.

Dette er ikkje ei spådom om 2030. Det skjer no.

Kan ikkje designsystemet ditt tolkast av ein agent, er det på veg til å bli legacy. Krev utviklingsflyten din at eit menneske promptar kvart steg, skalerer han ikkje. Startar AI-bruken din frå null kvar gong, kastar du bort samla kunnskap.

Teleprompter-modellen var grei nok då AI var ein nyheit. Han er ikkje grei når AI er infrastruktur.

Slutt å prompte. Byrj å designe.

Bygg agentar. Gi dei skills. La dei koordinere.

Framtida høyrer til dei som designar system, ikkje dei som skriv skript.

Eg bygger agentiske designsystem for framtida til nettutvikling.

Vidare lesing

• Designet er koden  Mi utforsking av tenking frå cellulære automatar i designsystem
• Atomic Design av Brad Frost  Metodikken bak komponenthierarki
• Designe system som byggjer seg sjølve  Frå byggjar til systemtenkjar