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

html

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

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

Diagrama del modelo Teleprompter vs. Subagentes Agénticos con diagramas de flujo y texto.

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:

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

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:

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

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:

Code snippet with highlighted components and card design preview.

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:

Activa la habilidad de tarjeta: SKILL.md carga en el contexto
Lee el esquema: Valida tus parámetros contra los props permitidos
Referencia otras habilidades: las habilidades de imagen, encabezado, botón proporcionan su experiencia
Ejecuta el flujo de trabajo: workflows/generate.md se ejecuta
Se autovalida: Ejecuta el flujo de trabajo de validar sobre su propio resultado
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/:

Comando	Propósito
`/generate`	Crear nuevos artefactos
`/validate`	Verificar artefactos existentes
`/improve`	Sugerir mejoras
`/document`	Explicar y registrar
`/test`	Crear pruebas automatizadas
`/a11y`	Comprobar cumplimiento de WCAG

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:

Tipo	Rol	Ejemplos
Átomos	Bloques básicos de construcción	botón, input, checkbox, avatar, badge, icono, enlace, imagen
Moléculas	Combinaciones de átomos	tarjeta, modal, pestañas, acordeón, alerta, dropdown, toast
Organismos	Componentes complejos	encabezado, pie de página, panel de control, formulario de inicio de sesión, hero, barra lateral

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