Sluta teleprompta din AI-leverantör – skapa subagenter, skills och kommandon

Från beroende av prompter till intelligenta agentsystem

De flesta använder fortfarande AI som en teleprompter.

De skriver en prompt. De väntar. De får ett svar. De kopierar och klistrar in det någonstans. Sedan gör de om det. Och om det igen. Varje interaktion börjar från noll. Varje samtal glömmer det som kom före.

Det här är inte samarbete. Det är diktamen med extra steg.

Om du år 2026 fortfarande teleprompter-styr din AI-leverantör missar du hela skiftet som pågår under dina fötter.

Teleprompter-problemet

När du använder AI som en teleprompter behandlar du ett potentiellt självständigt system som en textgenerator för engångsbruk. Mönstret ser ut så här:

1. Du skriver en detaljerad prompt
2. Du väntar på svaret
3. Du utvärderar resultatet manuellt
4. Du justerar och promptar igen
5. Du förlorar all kontext när du stänger chatten

Den här modellen har tre ödesdigra brister:

Ingen bestående kunskap. Varje samtal är ett oskrivet blad. Du förklarar samma sammanhang gång på gång. Din AI känner inte till din kodbas, dina preferenser, dina begränsningar eller din historik.

Ingen delegering. Du förblir flaskhalsen. Varje beslut, varje validering, varje nästa steg kräver din input. AI:n väntar på att du ska tala om vad den ska göra härnäst.

Ingen specialisering. Du använder ett enda generiskt gränssnitt till allt: kodning, dokumentation, design, testning, driftsättning. En promptstil. Ett kontextfönster. Ett samtal som gör många uppgifters arbete.

Teleprompter-modellen ser AI som ett verktyg. Men verktyg skalar inte autonomi. Agenter gör det.

Vad som förändras när du tänker i agenter

I Claude Code består agentarkitekturen av tre byggstenar:

• Subagenter: Specialiserade Claude-instanser med isolerade kontextfönster (~/.claude/agents/)
• Skills: Automatiskt utlösta kunskapsmoduler med SKILL.md-filer (~/.claude/skills/)
• Kommandon: Användarstyrda /slash-kommandon för uttryckliga åtgärder (~/.claude/commands/)

Den avgörande skillnaden mot traditionell prompting:

• Skills utlöses automatiskt av Claude utifrån sammanhanget
• Kommandon kräver att du uttryckligen skriver /command
• Subagenter körs i en separat kontext med egna verktyg

Tänk på skillnaden:

Teleprompter-metoden:

"Skriv ett kortkomponent med en bild, rubrik, brödtext och en primär knapp enligt vårt designsystems mönster och våra standarder för tillgänglighet..."

Claude Code-metoden:

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

Det första är en begäran. Det andra anropar en skill som redan vet vad ett kort är, vad ditt designsystem kräver, vilka tillgänglighetsstandarder som gäller och hur den validerar sitt eget resultat.

Arkitekturen: Subagenter, Skills & Kommandon

Här är strukturen som ersätter teleprompter-modellen:

Nivå 1: Subagenter

Subagenter är fristående markdown-filer i ~/.claude/agents/ som utför arbete parallellt. De har egna kontextfönster och kan anropa skills.

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

Varje subagentfil har YAML-frontmatter:

• name: Tydlig identifierare
• description: Vad den gör och när den ska anropas
• tools: Tillåtna förmågor (Read, Write, Bash, Grep, Glob)

Exempel 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 är automatiskt utlösta kunskapsmoduler. När du ber Claude om något som matchar en skills syfte tillämpar Claude den automatiskt.

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

Det här följer Atomic Design-metodiken: atomer, molekyler, organismer. Varje skill är expert på exakt en sak. När du behöver ett kort utlöses kortskillen automatiskt.

Varje skill känner till:

• Komponentens schema (props, slots, varianter)
• Ditt designsystems konventioner
• Ramverksspecifika mönster
• WCAG-krav på tillgänglighet
• Relaterade skills den kan hänvisa till

Nivå 3: Kommandon

Kommandon är användarstyrda genvägar. Du skriver /command för att anropa dem. De finns i skills arbetsflöden 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

Kommandon kan anropa subagenter för planering, och sedan sköter huvud-Claude genomförandet. Det ger dig strukturerade arbetsflöden med full tillgång till verktygen.

Komplett exempel: Kortskillen

Låt mig visa exakt hur det fungerar med en riktig skill:

Skillens struktur

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

Filen 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

Använda slash-kommandon

Generera ett nytt kort:

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

Validera ett befintligt kort:

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

Kontrollera att tillgänglighetskraven uppfylls:

/a11y card --level="AA"

Förbättra UX för ett specifikt sammanhang:

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

Vad som händer under huven

När du anropar /generate card gör Claude så här:

1. Utlöser kortskillen: SKILL.md laddas in i kontexten
2. Läser schemat:  Validerar dina parametrar mot tillåtna props
3. Hänvisar till andra skills:  skillsen image, heading och button bidrar med sin expertis
4. Kör arbetsflödet: workflows/generate.md exekveras
5. Självvaliderar: Kör validate-arbetsflödet på sitt eget resultat
6. Returnerar resultatet:  Ger komponenten plus eventuella varningar

Kortskillen genererar inte bara markup. Den orkestrerar ett system av specialister, som alla bidrar med sin domänexpertis.

Därför spelar det roll: Från byggare till systemtänkare

Teleprompter-modellen gör dig till operatör. Skill-modellen gör dig till arkitekt.

När jag gick från att skriva prompter till att designa skills förändrades flera saker:

Jag slutade upprepa kontext. Varje skill kan redan sin domän. Jag förklarar inte vad ett kort är varje gång jag behöver ett.

Jag började tänka i komposition. En sida är inte en prompt, den är en samordning av organismer, som är samordningar av molekyler, som är samordningar av atomer. Varje lager har sin egen skill.

Jag delegerade valideringen. I stället för att granska varje resultat för hand kontrollerar kommandot /validate strukturen, /a11y kontrollerar WCAG-efterlevnad och /test kör automatiska kontroller. Jag granskar undantagen, inte varje resultat.

Jag byggde upp institutionell kunskap. När jag förbättrar en skills SKILL.md består förbättringen. Systemet blir klokare över tid, inte bara under ett enskilt samtal.

Det är skillnaden mellan att använda AI och att bygga med AI.

Designen är koden

I mitt arbete med designsystem har jag landat i en princip: Designen är koden.

När designtokens, komponentscheman och agentkonfigurationer är i linje finns det inget översättningslager mellan det designers specificerar och det utvecklare bygger. Specifikationen är implementationen.

Så här gör agenter det verkligt:

# 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

Det här schemat är inte bara dokumentation. Det är den enda sanningskällan. Agenten genererar komponenter utifrån det. Validatorn kontrollerar mot det. Designtokens refererar till det. En fil, många användningar.

När en designer uppdaterar tokenvärdena i Figma uppdateras agentkonfigurationen. När agentkonfigurationen uppdateras uppdateras de genererade komponenterna. Designen är koden eftersom båda härleds från samma schema.

Så börjar du bygga med Claude Code

Är du redo att lämna teleprompter-modellen bakom dig finns här en praktisk väg:

Steg 1: Identifiera dina domäner

Vilka delar av ditt arbete är repetitiva, regelstyrda och beroende av kontext? Det är kandidater för skills:

• Kodgenerering
• Dokumentation
• Testning
• Granskning och validering
• Hantering av designsystem
• Driftsättning och DevOps

Steg 2: Skapa din första skill

Börja med en 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: Lägg till arbetsflöden (kommandon)

Skapa de sex grundkommandona i workflows/:

Varje kommando är en markdown-fil med instruktioner.

Steg 4: Upprätta skill-referenser

Skills kan hänvisa till andra skills:

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

Kartlägg de här beroendena. Hierarkin bör spegla din domäns naturliga struktur.

Steg 5: Skapa subagenter för komplexa uppgifter

När du behöver isolerad kontext eller parallell körning skapar du en 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 ditt skill-bibliotek

Strukturera dina skills enligt Atomic Design:

Varje skill:

• Har sin egen SKILL.md-konfiguration
• Har workflows/ med slash-kommandon
• Har references/ med dokumentation
• Har scripts/ för automatisering
• Vet vilka andra skills den hänvisar till

Det skapar ett konsekvent, skalbart system där Claude automatiskt utlöser rätt skill utifrån sammanhanget.

Framtiden är agentisk

Brad Frost, skaparen av Atomic Design, har pratat om det här skiftet: designsystem måste bli maskinläsbar infrastruktur eftersom AI-agenter nu sätter ihop gränssnitt av samma komponenter som mänskliga team använder.

Det här är ingen förutsägelse om 2030. Det händer nu.

Om ditt designsystem inte kan tolkas av en agent håller det på att bli legacy. Om ditt utvecklingsflöde kräver att en människa promptar varje steg skalar det inte. Om dina AI-interaktioner börjar från noll varje gång slösar du bort ackumulerad kunskap.

Teleprompter-modellen funkade bra när AI var en nyhet. Den funkar inte när AI är infrastruktur.

Sluta prompta. Börja designa.

Bygg agenter. Ge dem skills. Låt dem samordna.

Framtiden tillhör dem som arkitekterar system, inte dem som skriver skript.

Jag bygger agentiska designsystem för webbutvecklingens framtid.

Vidare läsning

• Designen är koden  Min utforskning av cellulära automater som tankesätt i designsystem
• Atomic Design av Brad Frost  Metodiken bakom komponenthierarkier
• System som bygger sig själva  Från byggare till systemtänkare