Deja de usar al proveedor de IA como un teleprompter y crea subagentes, habilidades y comandos.

Pasando de la dependencia de los prompts a los sistemas de agentes inteligentes

La mayoría de las personas todavía usan la IA como un teleprompter.

Escriben un prompt. Esperan. Obtienen una respuesta. La copian y pegan en algún lugar. Luego lo hacen de nuevo. Y otra vez. Cada interacción comienza desde cero. Cada conversación olvida lo que vino antes.

Esto no es colaboración. Es dictado con pasos adicionales.

En 2026, si todavía estás usando tu proveedor de IA como teleprompter, estás perdiendo todo el cambio que ocurre debajo de ti.

El Problema del Teleprompter

Cuando usas IA como un teleprompter, estás tratando a un sistema potencialmente autónomo como un generador de texto de una sola vez. El patrón se ve así:

1. Escribes un prompt detallado
2. Esperas la respuesta
3. Evalúas manualmente el resultado
4. Refinas y vuelves a hacer el prompt
5. Pierdes todo el contexto al cerrar el chat

Este modelo tiene tres fallos fatales:

No hay conocimiento persistente. Cada conversación es un lienzo en blanco. Explicas el mismo contexto repetidamente. Tu IA no conoce tu base de código, tus preferencias, tus restricciones o tu historial.

No hay delegación. Sigues siendo el cuello de botella. Cada decisión, cada validación, cada paso siguiente requiere tu aporte. La IA espera que le digas qué hacer después.

No hay especialización. Usas una interfaz genérica para todo: codificación, documentación, diseño, pruebas, implementación. Un estilo de prompt. Una ventana de contexto. Una conversación haciendo el trabajo de muchos.

El modelo de teleprompter trata a la IA como una herramienta. Pero las herramientas no escalan la autonomía. Los agentes sí.

Qué Cambia Cuando Piensas en Agentes

En Claude Code, la arquitectura de agentes consiste en tres primitivas:

• Subagentes: Instancias de Claude especializadas con ventanas de contexto aisladas (~/.claude/agents/)
• Habilidades: Módulos de conocimiento autoactivados con archivos SKILL.md (~/.claude/skills/)
• Comandos: Comandos slash activados por el usuario para acciones explícitas (~/.claude/commands/)

La diferencia clave con respecto al prompt tradicional:

• Habilidades se activan automáticamente por Claude en función del contexto
• Comandos requieren que escribas /command explícitamente
• Subagentes funcionan en un contexto separado con sus propias herramientas

Considere la diferencia:

Enfoque de Teleprompter:

"Escribe un componente de tarjeta con una imagen, título, texto de cuerpo y un botón principal siguiendo los patrones de nuestro sistema de diseño y estándares de accesibilidad..."

Enfoque de Claude Code:

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

El primero es una solicitud. El segundo invoca una habilidad que ya sabe qué es una tarjeta, qué requiere tu sistema de diseño, qué estándares de accesibilidad se aplican y cómo validar su propio resultado.

La Arquitectura: Subagentes, Habilidades y Comandos

Esta es la estructura que reemplaza el modelo de teleprompter:

Nivel 1: Subagentes

Los subagentes son archivos markdown independientes en ~/.claude/agents/ que realizan el trabajo en paralelo. Tienen sus propias ventanas de contexto y pueden invocar habilidades.

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

Cada archivo de subagente tiene frontmatter YAML:

• nombre: Identificador claro
• descripción: Lo que hace y cuándo invocarlo
• herramientas: Capacidades permitidas (Leer, Escribir, Bash, Grep, Glob)

Ejemplo de subagente (header-builder.md):

---
name: header-builder
description: Construir componentes de encabezado completos con navegación
tools: Leer, Escribir, Bash, Glob, Grep
--- Eres un especialista en componentes de encabezado...

Nivel 2: Habilidades

Las habilidades son módulos de conocimiento autoactivados. Cuando le pides a Claude algo que coincide con el propósito de una habilidad, Claude la aplica automáticamente.

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

Esto sigue la metodología de Diseño Atómico: átomos, moléculas, organismos. Cada habilidad es experta en exactamente una cosa. Cuando necesitas una tarjeta, la habilidad de la tarjeta se autoactiva.

Cada habilidad conoce:

• El esquema del componente (props, slots, variantes)
• Las convenciones de tu sistema de diseño
• Patrones específicos del marco
• Requisitos de accesibilidad de WCAG
• Habilidades relacionadas que puede referenciar

Nivel 3: Comandos

Los comandos son atajos activados por el usuario. Escribes /command para invocarlos. Viven en los flujos de trabajo de habilidades o globalmente:

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

Los comandos pueden invocar subagentes para planificación, luego el Claude principal maneja la ejecución. Esto te brinda flujos de trabajo estructurados con acceso completo a herramientas.

Ejemplo Completo: Habilidad de Tarjeta

Déjame mostrarte exactamente cómo funciona esto con una habilidad real:

La Estructura de la Habilidad

~/.claude/skills/card/
├── SKILL.md           # Pregunta principal e instrucciones
├── workflows/         # Comandos slash
│   ├── generate.md
│   ├── validate.md
│   ├── improve.md
│   ├── document.md
│   ├── test.md
│   └── a11y.md
├── references/        # Documentación cargada en el contexto
│   └── schema.yml
└── scripts/           # Scripts ejecutables de Python/Bash
    └── validate.py

El Archivo SKILL.md

---
name: card
description: Generar y validar componentes de tarjeta 
  para cualquier sistema de diseño con verificaciones de accesibilidad
---  # Habilidad de Tarjeta  Cuando el usuario solicita componentes de tarjeta, esta habilidad 
se autoactiva en función del contexto.
 ## Esquema  props:
  title: string
  body: string
  image: { src, alt, width }
  variant: default | horizontal | overlay
 slots:
  header: Contenido de encabezado personalizado
  footer: Botones, enlaces
 ## Habilidades Relacionadas  Esta habilidad puede referenciar:
- imagen
- encabezado
- botón
- enlace
- texto

Uso de Comandos Slash

Generar una nueva tarjeta:

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

Validar una tarjeta existente:

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

Comprobar cumplimiento de accesibilidad:

/a11y card --level="AA"

Mejorar la UX para un contexto específico:

/improve card \   --context="listado de productos de comercio electrónico" \   --focus="conversión"

Qué Sucede Bajo el Capó

Cuando invocas /generate card, Claude:

1. Activa la habilidad de tarjeta: SKILL.md carga en el contexto
2. Lee el esquema:  Valida tus parámetros contra los props permitidos
3. Referencia otras habilidades:  las habilidades de imagen, encabezado, botón proporcionan su experiencia
4. Ejecuta el flujo de trabajo: workflows/generate.md se ejecuta
5. Se autovalida: Ejecuta el flujo de trabajo de validar sobre su propio resultado
6. Devuelve el resultado:  Proporciona el componente más cualquier advertencia

La habilidad de tarjeta no solo genera marcado. Orquesta un sistema de especialistas, cada uno contribuyendo con su experiencia en el dominio.

Por Qué Importa Esto: De Constructor a Pensador de Sistemas

El modelo de teleprompter te mantiene como operador. El modelo de habilidades te convierte en arquitecto.

Cuando pasé de escribir prompts a diseñar habilidades, varias cosas cambiaron:

Dejé de repetir contexto. Cada habilidad ya conoce su dominio. No explico qué es una tarjeta cada vez que necesito una.

Empecé a pensar en composición. Una página no es un prompt, es una coordinación de organismos, que son coordinaciones de moléculas, que son coordinaciones de átomos. Cada capa tiene su propia habilidad.

Delegué la validación. En lugar de revisar manualmente cada resultado, el comando /validate verifica la estructura, el comando /a11y verifica el cumplimiento de WCAG, y el comando /test realiza verificaciones automatizadas. Reviso excepciones, no cada resultado.

Construí conocimiento institucional. Cuando mejoro el SKILL.md de una habilidad, esa mejora persiste. El sistema se vuelve más inteligente con el tiempo, no solo durante una sola conversación.

Esta es la diferencia entre usar IA y construir con IA.

El Diseño Es el Código

En mi trabajo con sistemas de diseño, he llegado a un principio: El Diseño Es el Código.

Cuando los tokens de diseño, los esquemas de componentes y las configuraciones de agentes se alinean, no hay una capa de traducción entre lo que los diseñadores especifican y lo que los desarrolladores construyen. La especificación es la implementación.

Así es como los agentes hacen realidad esto:

# El esquema ES la fuente de verdad 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

Este esquema no es solo documentación. Es la fuente de verdad. El agente genera componentes a partir de él. El validador verifica contra él. Los tokens de diseño lo referencian. Un archivo, muchos usos.

Cuando un diseñador actualiza los valores de los tokens en Figma, la configuración del agente se actualiza. Cuando la configuración del agente se actualiza, los componentes generados se actualizan. El diseño es el código porque ambos se derivan del mismo esquema.

Cómo Comenzar a Construir con Claude Code

Si estás listo para dejar atrás el modelo de teleprompter, aquí hay un camino práctico:

Paso 1: Identifica Tus Dominios

¿Qué áreas de tu trabajo son repetitivas, basadas en reglas y dependientes del contexto? Esas son candidatas para habilidades:

• Generación de código
• Documentación
• Pruebas
• Revisión y validación
• Gestión de sistemas de diseño
• Implementación y DevOps

Paso 2: Crea Tu Primera Habilidad

Comienza con un SKILL.md simple:

---
name: my-component
description: Generar y validar mi-componente
---  # Habilidad de Mi Componente  Cuando el usuario pregunta por mi-componente, aplica estas reglas...

Paso 3: Añade Flujos de Trabajo (Comandos)

Crea los seis comandos principales en workflows/:

Cada comando es un archivo markdown con instrucciones.

Paso 4: Establece Referencias de Habilidades

Las habilidades pueden referenciar otras habilidades:

## Habilidades Relacionadas  Esta habilidad usa:
- imagen (para imágenes de tarjeta)
- botón (para llamadas a la acción)
- encabezado (para títulos)

Mapa estas dependencias. La jerarquía debe coincidir con la estructura natural de tu dominio.

Paso 5: Crea Subagentes para Tareas Complejas

Cuando necesites un contexto aislado o ejecución paralela, crea un archivo de subagente en ~/.claude/agents/:

---
name: header-builder
description: Construir componentes de encabezado completos con navegación, logo y búsqueda
tools: Leer, Escribir, Bash, Glob, Grep
--- Eres un especialista en componentes de encabezado. Al construir encabezados:
1. Consulta patrones de encabezado existentes en la base de código
2. Usa las habilidades de nav, botón, logo para subcomponentes
3. Asegúrate de que el diseño sea responsive y accesible

Construyendo Tu Biblioteca de Habilidades

Estructura tus habilidades siguiendo el Diseño Atómico:

Cada habilidad:

• Tiene su propia configuración SKILL.md
• Tiene workflows/ con comandos slash
• Tiene references/ con documentación
• Tiene scripts/ para automatización
• Sabe qué otras habilidades refiere

Esto crea un sistema consistente y escalable donde Claude autoactiva la habilidad correcta en función del contexto.

El Futuro Es Agencial

Brad Frost, el creador del Diseño Atómico, ha estado hablando sobre este cambio: los sistemas de diseño deben convertirse en infraestructuras legibles por máquinas porque los agentes de IA ahora ensamblan interfaces de usuario con los mismos componentes que usan los equipos humanos.

Esto no es una predicción sobre 2030. Está sucediendo ahora.

Si tu sistema de diseño no puede ser analizado por un agente, se está volviendo obsoleto. Si tu flujo de desarrollo requiere que un humano haga un prompt en cada paso, no escala. Si tus interacciones con IA comienzan desde cero cada vez, estás desperdiciando conocimiento acumulado.

El modelo de teleprompter estaba bien cuando la IA era una novedad. No está bien cuando la IA es infraestructura.

Deja de dar instrucciones. Empieza a diseñar.

Construye agentes. Dales habilidades. Déjalos coordinar.

El futuro pertenece a quienes arquitectan sistemas, no a quienes escriben scripts.

Construyendo sistemas de diseño agenciales para el futuro del desarrollo web.

Lecturas Adicionales

• El Diseño Es el Código  Mi exploración del pensamiento en autómatas celulares en sistemas de diseño
• Diseño Atómico por Brad Frost  La metodología detrás de las jerarquías de componentes
• Diseñando Sistemas que se Construyen Solos  De constructor a pensador de sistemas