Lopeta tekoälytoimittajasi teleprompterointi ja luo aliedustajia, taitoja ja komentoja

Siirtyminen prompt-riippuvuudesta älykkäisiin agenttijärjestelmiin

Useimmat ihmiset käyttävät tekoälyä yhä kuin teleprompteria.

He kirjoittavat promptin. He odottavat. He saavat vastauksen. He kopioivat ja liittävät sen johonkin. Sitten he tekevät saman uudelleen. Ja uudelleen. Jokainen vuorovaikutus alkaa nollasta. Jokainen keskustelu unohtaa kaiken aiemmin tapahtuneen.

Tämä ei ole yhteistyötä. Tämä on sanelua, johon on lisätty ylimääräisiä vaiheita.

Vuonna 2026, jos edelleen “teleprompteroit” tekoälypalveluasi, missaat koko pinnan alla tapahtuvan murroksen.

Teleprompter-ongelma

Kun käytät tekoälyä teleprompterina, kohtelet potentiaalisesti autonomista järjestelmää kertaluonteisena tekstigeneraattorina. Kaava näyttää tältä:

1. Kirjoitat yksityiskohtaisen promptin
2. Odotat vastausta
3. Arvioit tuotoksen käsin
4. Hiot ja promptaat uudelleen
5. Menetät kaiken kontekstin, kun suljet keskustelun

Tässä mallissa on kolme kohtalokasta virhettä:

Ei pysyvää tietoa. Jokainen keskustelu on tyhjä taulu. Selität saman kontekstin yhä uudelleen. Tekoäly ei tunne koodipohjaasi, mieltymyksiäsi, rajoitteitasi tai historiaasi.

Ei delegointia. Sinä olet yhä pullonkaula. Jokainen päätös, jokainen validointi ja jokainen seuraava askel vaatii sinun panostasi. Tekoäly odottaa, että kerrot mitä sen pitää tehdä seuraavaksi.

Ei erikoistumista. Käytät yhtä geneeristä käyttöliittymää kaikkeen – koodaukseen, dokumentointiin, suunnitteluun, testaukseen, julkaisuun. Yksi prompt-tyyli. Yksi konteksti-ikkuna. Yksi keskustelu hoitamassa monen työn.

Teleprompter-malli kohtelee tekoälyä työkaluna. Mutta työkalut eivät skaalaa autonomiaa. Agentit skaalaavat.

Mitä muuttuu, kun ajattelet agenteilla

Claude Code -ympäristössä agenttiarkkitehtuuri koostuu kolmesta peruspalikasta:

• Aliagentit: Eriytyneillä konteksti-ikkunoilla varustetut erikoistuneet Claude-instanssit (~/.claude/agents/)
• Taidot (Skills): Automaattisesti laukeavat tietomoduulit, joissa on SKILL.md-tiedostot (~/.claude/skills/)
• Komennot: Käyttäjän käynnistämät /slash-komennot eksplisiittisiä toimia varten (~/.claude/commands/)

Keskeinen ero perinteiseen promptaamiseen:

• Taidot laukeavat automaattisesti Clauden toimesta kontekstin perusteella
• Komennot vaativat, että kirjoitat eksplisiittisesti /command
• Aliagentit toimivat erillisessä kontekstissa omilla työkaluillaan

Harkitse eroa:

Teleprompter-lähestymistapa:

“Kirjoita minulle korttikomponentti, jossa on kuva, otsikko, leipäteksti ja ensisijainen painike, noudattaen design-järjestelmämme malleja ja saavutettavuusstandardeja...”

Claude Code -lähestymistapa:

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

Ensimmäinen on pyyntö. Toinen kutsuu taitoa, joka jo tietää, mitä kortti tarkoittaa, mitä design-järjestelmäsi edellyttää, mitkä saavutettavuusstandardit pätevät ja miten se validoi oman tuotoksensa.

Arkkitehtuuri: aliagentit, taidot & komennot

Tässä on rakenne, joka korvaa teleprompter-mallin:

Taso 1: Aliagentit

Aliagentit ovat itsenäisiä markdown-tiedostoja hakemistossa ~/.claude/agents/, jotka suorittavat työtä rinnakkain. Niillä on omat konteksti-ikkunansa, ja ne voivat kutsua taitoja.

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

Jokaisessa aliagenttitiedostossa on YAML-alkutiedot:

• name: Selkeä tunniste
• description: Mitä se tekee ja milloin se tulisi kutsua
• tools: Sallitut kyvykkyydet (Read, Write, Bash, Grep, Glob)

Esimerkki aliagentista (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...

Taso 2: Taidot

Taidot ovat automaattisesti laukeavia tietomoduuleja. Kun pyydät Claudelta jotain, mikä vastaa taidon tarkoitusta, Claude soveltaa sitä automaattisesti.

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

Tämä noudattaa Atomic Design -metodologiaa: atomit, molekyylit, organismit. Jokainen taito on ekspertti täsmälleen yhdessä asiassa. Kun tarvitset korttia, card-taito laukeaa automaattisesti.

Jokainen taito tuntee:

• Komponentin skeeman (propsit, slotit, variantit)
• Design-järjestelmäsi konventiot
• Framework-kohtaiset mallit
• WCAG-saavutettavuusvaatimukset
• Liittyvät taidot, joihin se voi viitata

Taso 3: Komennot

Komennot ovat käyttäjän käynnistämiä pikakuvakkeita. Kirjoitat /command kutsuaksesi niitä. Ne sijaitsevat taitojen workflowissa tai globaalisti:

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

Komennot voivat kutsua aliagentteja suunnitteluun, ja pää-Claude hoitaa sitten toteutuksen. Näin saat rakenteistettuja työnkulkuja, joilla on täysi pääsy työkaluihin.

Täydellinen esimerkki: Card-taito

Näytän tarkalleen, miten tämä toimii oikean taidon avulla:

Taidoon liittyvä rakenne

~/.claude/skills/card/
├── SKILL.md           # Ydinprompt ja ohjeet
├── workflows/         # Slash-komennot
│   ├── generate.md
│   ├── validate.md
│   ├── improve.md
│   ├── document.md
│   ├── test.md
│   └── a11y.md
├── references/        # Kontekstiin ladattava dokumentaatio
│   └── schema.yml
└── scripts/           # Suoritettavat Python/Bash-skriptit
    └── validate.py

SKILL.md-tiedosto

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

Slash-komentojen käyttäminen

Luo uusi kortti:

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

Validioi olemassa oleva kortti:

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

Tarkista saavutettavuuden taso:

/a11y card --level="AA"

Paranna käyttökokemusta tietyssä kontekstissa:

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

Mitä konepellin alla tapahtuu

Kun kutsut komennon /generate card, Claude:

1. Laukaisee card-taidon: SKILL.md ladataan kontekstiin
2. Lukee skeeman:  Validoi parametrit sallittuja propseja vastaan
3. Viittaa muihin taitoihin:  image-, heading- ja button-taidot tuovat oman asiantuntemuksensa
4. Ajaa workflow’n: workflows/generate.md suoritetaan
5. Itsevalidointi: Ajaa validate-workflow’n omaan tuotokseensa
6. Palauttaa tuloksen:  Toimittaa komponentin sekä mahdolliset varoitukset

Card-taito ei vain generoi merkkausta. Se orkestroi erikoistuneiden osaajien järjestelmää, jossa kukin tuo oman erikoisosaamisensa.

Miksi tämä on tärkeää: tekijästä systeemiajattelijaksi

Teleprompter-malli pitää sinut operaattorina. Taitomalli tekee sinusta arkkitehdin.

Kun siirryin promptien kirjoittamisesta taitojen suunnitteluun, useampi asia muuttui:

Lopetin kontekstin toistamisen. Jokainen taito tuntee jo oman aihealueensa. En selitä joka kerta, mitä kortti tarkoittaa.

Aloin ajatella koostamista. Sivun luominen ei ole yksi prompti – se on organismien koordinointia, jotka koordinoivat molekyylejä, jotka koordinoivat atomeja. Jokaisella tasolla on oma taitonsa.

Delegoin validoinnin. Sen sijaan, että tarkistaisin joka tuotoksen käsin, /validate-komento tarkistaa rakenteen, /a11y-komento tarkistaa WCAG-vaatimusten noudattamisen ja /test-komento ajaa automaattiset testit. Tarkastan poikkeukset, en jokaista tulosta.

Rakensin institutionaalista tietoa. Kun parannan taidon SKILL.md-tiedostoa, tuo parannus säilyy. Järjestelmä tulee ajan myötä älykkäämmäksi, ei vain yksittäisen keskustelun ajaksi.

Tässä on ero tekoälyn käyttämisen ja tekoälyn kanssa rakentamisen välillä.

Design on koodi

Työssäni design-järjestelmien parissa olen päätynyt periaatteeseen: Design on koodi.

Kun designtokenit, komponenttiskeemat ja agenttikonfiguraatiot ovat linjassa, suunnittelijoiden määrittämän ja kehittäjien rakentaman välissä ei ole tulkkauskerrosta. Määrittely on toteutus.

Näin agentit tekevät tästä totta:

# 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ämä skeema ei ole pelkkää dokumentaatiota. Se on totuuden lähde. Agentti generoi komponentit sen perusteella. Validaattori tarkistaa sitä vasten. Designtokenit viittaavat siihen. Yksi tiedosto, monta käyttötarkoitusta.

Kun suunnittelija päivittää token-arvoja Figmassa, agenttikonfiguraatio päivittyy. Kun agenttikonfiguraatio päivittyy, generoitu komponentti päivittyy. Design on koodi, koska molemmat johdetaan samasta skeemasta.

Miten aloittaa rakentaminen Claude Codella

Jos olet valmis menemään teleprompter-mallia pidemmälle, tässä käytännöllinen polku:

Vaihe 1: Tunnista osa-alueesi

Mitkä työsi osa-alueet ovat toistuvia, sääntöpohjaisia ja kontekstisidonnaisia? Niistä tulee taitokandidaatteja:

• Koodin generointi
• Dokumentointi
• Testaus
• Arviointi ja validointi
• Design-järjestelmän hallinta
• Julkaisu ja DevOps

Vaihe 2: Luo ensimmäinen taitosi

Aloita yksinkertaisella SKILL.md-tiedostolla:

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

Vaihe 3: Lisää workflow’t (komennot)

Luo kuusi ydinkomentoa hakemistoon workflows/:

Jokainen komento on markdown-tiedosto, jossa on ohjeet.

Vaihe 4: Määritä taitoviittaukset

Taidot voivat viitata toisiin taitoihin:

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

Kartoitä nämä riippuvuudet. Hierarkian tulisi vastata domainisi luonnollista rakennetta.

Vaihe 5: Luo aliagentteja monimutkaisiin tehtäviin

Kun tarvitset eristetyn kontekstin tai rinnakkaista suoritusta, luo aliagenttitiedosto hakemistoon ~/.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

Oman taitokirjaston rakentaminen

Rakenna taitosi Atomic Designin mukaan:

Jokainen taito:

• Omistaa oman SKILL.md-konfiguraationsa
• Omistaa workflows/-hakemiston slash-komennoille
• Omistaa references/-hakemiston dokumentaatiolle
• Omistaa scripts/-hakemiston automaatiolle
• Tietää, mihin muihin taitoihin se viittaa

Näin syntyy yhtenäinen, skaalautuva järjestelmä, jossa Claude laukaisee oikean taidon automaattisesti kontekstin perusteella.

Tulevaisuus on agenttipohjainen

Atomic Designin luoja Brad Frost on puhunut tästä muutoksesta: design-järjestelmistä täytyy tulla koneen luettavaa infrastruktuuria, koska tekoälyagentit kokoavat nyt käyttöliittymiä samoista komponenteista, joita ihmistiimit käyttävät.

Tämä ei ole ennustus vuodesta 2030. Tämä tapahtuu nyt.

Jos design-järjestelmääsi ei voi jäsentää agentilla, se muuttuu legacyksi. Jos kehitysprosessisi vaatii ihmistä promptaamaan jokaisen vaiheen, se ei skaalaudu. Jos tekoälyvuorovaikutuksesi alkavat joka kerta nollasta, haaskaat kertynyttä tietoa.

Teleprompter-malli oli riittävä, kun tekoäly oli kuriositeetti. Se ei riitä, kun tekoäly on infrastruktuuri.

Lopeta promptaaminen. Ala suunnitella.

Rakenna agentteja. Anna niille taitoja. Anna niiden koordinoida.

Tulevaisuus kuuluu niille, jotka arkkitehturoivat järjestelmiä, ei niille, jotka kirjoittavat skriptejä.

Agenttipohjaisten design-järjestelmien rakentamista web-kehityksen tulevaisuutta varten.

Lisälukemista

• The Design Is the Code  Tutkimukseni solullisen automaation ajattelusta design-järjestelmissä
• Atomic Design by Brad Frost  Komponenttihierarkioiden taustalla oleva metodologia
• Designing Systems That Build Themselves  Tekijästä systeemiajattelijaksi