Deixa de fer servir el teu proveïdor d’IA com un teleprompter i crea subagents, habilitats i ordres

Passar de la dependència dels prompts a sistemes d’agents intel·ligents

La majoria de gent encara fa servir la IA com un teleprompter.

Escriuen un prompt. Esperen. Reben una resposta. La copien i l’enganxen en algun lloc. Després ho tornen a fer. I una altra vegada. Cada interacció comença de zero. Cada conversa oblida el que ha vingut abans.

Això no és col·laboració. És dictar amb passos extres.

El 2026, si encara estàs fent servir el teu proveïdor d’IA com un teleprompter, t’estàs perdent tot el canvi que s’està produint per sota teu.

El problema del teleprompter

Quan utilitzes la IA com un teleprompter, tractes un sistema potencialment autònom com un generador de text d’un sol tir. El patró és així:

Escrius un prompt detallat
Esperes la resposta
Avalúes manualment el resultat
Refines i tornes a fer el prompt
Perds tot el context quan tanques el xat

Diagrama del model Teleprompter vs. Subagents Agèncics amb diagrames de flux i text.

Aquest model té tres defectes fatals:

No hi ha coneixement persistent. Cada conversa és una pàgina en blanc. Expliques el mateix context repetidament. La teva IA no coneix el teu codi, les teves preferències, les teves limitacions ni el teu historial.

No hi ha delegació. Tu continues sent el coll d’ampolla. Cada decisió, cada validació, cada pas següent requereix la teva intervenció. La IA espera que li diguis què ha de fer després.

No hi ha especialització. Fas servir una sola interfície genèrica per a tot: codi, documentació, disseny, proves, desplegament. Un sol estil de prompt. Una sola finestra de context. Una conversa fent la feina de moltes.

El model del teleprompter tracta la IA com una eina. Però les eines no escalen l’autonomia. Els agents sí.

Què canvia quan penses en agents

A Claude Code, l’arquitectura d’agents consta de tres primitives:

Subagents: Instàncies especialitzades de Claude amb finestres de context aïllades (~/.claude/agents/)
Skills (habilitats): Mòduls de coneixement autoactivats amb fitxers SKILL.md (~/.claude/skills/)
Commands (ordres): Comandes de barra inclinada activades per l’usuari per a accions explícites (~/.claude/commands/)

La diferència clau respecte al prompting tradicional:

Les skills s’activen automàticament per Claude en funció del context
Els commands requereixen que escriguis explícitament /command
Els subagents s’executen en un context separat amb les seves pròpies eines

Considera la diferència:

Enfocament teleprompter:

“Escriu-me un component targeta amb una imatge, títol, text del cos i un botó principal seguint els patrons del nostre sistema de disseny i els estàndards d’accessibilitat...”

Enfocament Claude Code:

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

El primer és una petició. El segon invoca una skill que ja sap què és una targeta, què requereix el teu sistema de disseny, quins estàndards d’accessibilitat s’apliquen i com validar el seu propi resultat.

L’arquitectura: Subagents, Skills i Commands

Aquesta és l’estructura que substitueix el model del teleprompter:

Flowchart of agent architecture showing subagents, skills, and commands.

Nivell 1: Subagents

Els subagents són fitxers markdown independents a ~/.claude/agents/ que executen feina en paral·lel. Tenen les seves pròpies finestres de context i poden invocar skills.

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

Cada fitxer de subagent té un frontmatter YAML:

name: Identificador clar
description: Què fa i quan s’ha d’invocar
tools: Capacitats permeses (Read, Write, Bash, Grep, Glob)

Exemple de 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...

Nivell 2: Skills

Les skills són mòduls de coneixement autoactivats. Quan li demanes alguna cosa a Claude que coincideix amb el propòsit d’una skill, Claude l’aplica automàticament.

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

Això segueix la metodologia Atomic Design: àtoms, molècules, organismes. Cada skill és experta en exactament una cosa. Quan necessites una targeta, la skill de targeta s’autoactiva.

Cada skill sap:

L’esquema del component (props, slots, variants)
Les convencions del teu sistema de disseny
Patrons específics del framework
Requisits d’accessibilitat WCAG
Skills relacionades que pot referenciar

Nivell 3: Commands

Els commands són dreceres activades per l’usuari. Escrius /command per invocar-los. Viuen dins els workflows d’una skill o de manera global:

Slash commands workflow graphic with six colorful boxes.

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

Els commands poden invocar subagents per a la planificació, i després el Claude principal s’encarrega de l’execució. Això et dóna workflows estructurats amb accés complet a les eines.

Exemple complet: Skill de targeta

Deixa’m mostrar-te exactament com funciona això amb una skill real:

Code snippet with highlighted components and card design preview.

L’estructura de la skill

~/.claude/skills/card/
├── SKILL.md           # Prompt i instruccions principals
├── workflows/         # Comandes de barra inclinada
│   ├── generate.md
│   ├── validate.md
│   ├── improve.md
│   ├── document.md
│   ├── test.md
│   └── a11y.md
├── references/        # Documentació carregada al context
│   └── schema.yml
└── scripts/           # Scripts Python/Bash executables
    └── validate.py

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

Ús de les comandes de barra inclinada

Generar una targeta nova:

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

Validar una targeta existent:

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

Comprovar el compliment d’accessibilitat:

/a11y card --level="AA"

Millorar la UX per a un context específic:

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

Què passa sota el capó

Quan invoques /generate card, Claude:

Activa la skill de targeta: SKILL.md es carrega al context
Llegeix l’esquema: valida els teus paràmetres contra les props permeses
Reference altres skills: les skills d’imatge, heading i button aporten la seva experiència
Executa el workflow: s’executa workflows/generate.md
Es valida ell mateix: executa el workflow de validate sobre el seu propi resultat
Retorna el resultat: proporciona el component i qualsevol avís

La skill de targeta no només genera markup. Orquestra un sistema d’especialistes, cadascun aportant la seva expertesa de domini.

Per què això importa: de constructor a pensador de sistemes

El model del teleprompter et manté com a operador. El model de skills et converteix en arquitecte.

Quan vaig passar d’escriure prompts a dissenyar skills, diverses coses van canviar:

Vaig deixar de repetir context. Cada skill ja coneix el seu domini. No explico què és una targeta cada vegada que en necessito una.

Vaig començar a pensar en composició. Una pàgina no és un sol prompt: és la coordinació d’organismes, que són coordinacions de molècules, que són coordinacions d’àtoms. Cada capa té la seva pròpia skill.

Vaig delegar la validació. En lloc de revisar manualment cada resultat, la comanda /validate comprova l’estructura, la comanda /a11y comprova el compliment WCAG, i la comanda /test executa proves automatitzades. Jo reviso les excepcions, no cada resultat.

Vaig construir coneixement institucional. Quan milloro el SKILL.md d’una skill, aquesta millora persisteix. El sistema es torna més intel·ligent amb el temps, no només durant una sola conversa.

Aquesta és la diferència entre fer servir IA i construir amb IA.

El disseny és el codi

En la meva feina amb sistemes de disseny, he arribat a un principi: el disseny és el codi.

Quan els design tokens, els esquemes de components i les configuracions dels agents s’alineen, no hi ha cap capa de traducció entre el que especifiquen els dissenyadors i el que construeixen els desenvolupadors. L’especificació és la implementació.

Així és com els agents ho fan real:

# 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

Aquest esquema no és només documentació. És la font de veritat. L’agent genera components a partir seu. El validator hi comprova el resultat. Els design tokens el referencien. Un sol fitxer, molts usos.

Quan un dissenyador actualitza els valors dels tokens a Figma, s’actualitza la configuració de l’agent. Quan s’actualitza la configuració de l’agent, s’actualitzen els components generats. El disseny és el codi perquè tots dos deriven del mateix esquema.

Com començar a construir amb Claude Code

Si estàs a punt per superar el model del teleprompter, aquí tens un camí pràctic:

Pas 1: Identifica els teus dominis

Quines àrees de la teva feina són repetitives, governades per regles i dependents del context? Aquestes són candidates a skill:

Generació de codi
Documentació
Proves
Revisió i validació
Gestió de sistemes de disseny
Desplegament i DevOps

Pas 2: Crea la teva primera skill

Comença amb un SKILL.md senzill:

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

Pas 3: Afegeix workflows (commands)

Crea les sis comandes bàsiques al directori workflows/:

Command	Finalitat
`/generate`	Crear artifacts nous
`/validate`	Comprovar artifacts existents
`/improve`	Suggerir millores
`/document`	Explicar i documentar
`/test`	Crear proves automatitzades
`/a11y`	Comprovar el compliment WCAG

Cada comanda és un fitxer markdown amb instruccions.

Pas 4: Estableix referències entre skills

Les skills poden referenciar altres skills:

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

Mapeja aquestes dependències. La jerarquia hauria de coincidir amb l’estructura natural del teu domini.

Pas 5: Crea subagents per a tasques complexes

Quan necessitis context aïllat o execució en paral·lel, crea un fitxer de subagent a ~/.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

Construir la teva biblioteca de skills

Organitza les teves skills seguint Atomic Design:

Tipus	Funció	Exemples
Àtoms	Blocs bàsics	button, input, checkbox, avatar, badge, icon, link, image
Molècules	Combinacions d’àtoms	card, modal, tabs, accordion, alert, dropdown, toast
Organismes	Components complexos	header, footer, dashboard, login-form, hero, sidebar

Cada skill:

Té la seva pròpia configuració SKILL.md
Té workflows/ amb comandes de barra inclinada
Té references/ amb documentació
Té scripts/ per a l’automatització
Sap quines altres skills referencia

Això crea un sistema coherent i escalable on Claude autoactiva la skill adequada segons el context.

El futur és agentic

Brad Frost, el creador d’Atomic Design, fa temps que parla d’aquest canvi: els sistemes de disseny han d’esdevenir infraestructura llegible per màquines perquè els agents d’IA ara estan muntant interfícies d’usuari amb els mateixos components que fan servir els equips humans.

Això no és una predicció per al 2030. Està passant ara mateix.

Si el teu sistema de disseny no pot ser analitzat per un agent, s’està convertint en llegat. Si el teu flux de desenvolupament requereix que una persona faci prompts a cada pas, no escala. Si les teves interaccions amb la IA comencen de zero cada vegada, estàs desaprofitant coneixement acumulat.

El model del teleprompter era acceptable quan la IA era una novetat. No ho és quan la IA és infraestructura.

Deixa de fer prompts. Comença a dissenyar.

Construeix agents. Dona’ls skills. Deixa que es coordinin.

El futur pertany a qui arquitecta sistemes, no a qui escriu scripts.

Construint sistemes de disseny agentics per al futur del desenvolupament web.

Més lectures

The Design Is the Code La meva exploració del pensament d’autòmats cel·lulars aplicat als sistemes de disseny
Atomic Design by Brad Frost La metodologia darrere de les jerarquies de components
Designing Systems That Build Themselves De constructor a pensador de sistemes