Pare de ditar roteiros ao seu provedor de IA e crie subagentes, habilidades e comandos

Mudando da dependência de prompts para sistemas de agentes inteligentes

A maioria das pessoas ainda usa IA como se fosse um teleprompter.

Elas digitam um prompt. Esperam. Recebem uma resposta. Copiam e colam em algum lugar. Depois fazem tudo de novo. E de novo. Cada interação começa do zero. Cada conversa esquece o que veio antes.

Isso não é colaboração. É ditado, só que com etapas a mais.

Em 2026, se você ainda estiver usando seu provedor de IA como um teleprompter, vai perder toda a mudança que está acontecendo bem debaixo de você.

O Problema do Teleprompter

Quando você usa IA como teleprompter, está tratando um sistema potencialmente autônomo como um gerador de texto “tiro único”. O padrão é assim:

1. Você escreve um prompt detalhado
2. Você espera pela resposta
3. Você avalia manualmente o resultado
4. Você refina e pede de novo
5. Você perde todo o contexto quando fecha o chat

Esse modelo tem três falhas fatais:

Sem conhecimento persistente. Cada conversa é uma folha em branco. Você explica o mesmo contexto repetidas vezes. Sua IA não conhece seu codebase, suas preferências, suas restrições nem seu histórico.

Sem delegação. Você continua sendo o gargalo. Cada decisão, cada validação, cada próximo passo depende da sua entrada. A IA espera você dizer o que fazer em seguida.

Sem especialização. Você usa uma interface genérica para tudo: código, documentação, design, testes, deploy. Um estilo de prompt. Uma janela de contexto. Uma conversa fazendo o trabalho de várias.

O modelo de teleprompter trata a IA como ferramenta. Mas ferramentas não escalam autonomia. Agentes escalam.

O que Muda Quando Você Pensa em Agentes

No Claude Code, a arquitetura de agentes consiste em três elementos primários:

• Subagentes: Instâncias especializadas do Claude com janelas de contexto isoladas (~/.claude/agents/)
• Skills (habilidades): Módulos de conhecimento acionados automaticamente, com arquivos SKILL.md (~/.claude/skills/)
• Commands (comandos): Comandos de barra acionados pelo usuário para ações explícitas (~/.claude/commands/)

A diferença-chave em relação ao prompting tradicional:

• Skills são acionadas automaticamente pelo Claude com base no contexto
• Commands exigem que você digite explicitamente /command
• Subagentes rodam em um contexto separado, com suas próprias ferramentas

Considere a diferença:

Abordagem teleprompter:

“Escreva um componente de card com imagem, título, texto de corpo e um botão primário seguindo os padrões do nosso design system e as normas de acessibilidade...”

Abordagem Claude Code:

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

A primeira é um pedido. A segunda invoca uma skill que já sabe o que é um card, o que o seu design system exige, quais padrões de acessibilidade se aplicam e como validar a própria saída.

A Arquitetura: Subagents, Skills & Commands

Veja a estrutura que substitui o modelo de teleprompter:

Nível 1: Subagents

Subagentes são arquivos markdown independentes em ~/.claude/agents/ que executam trabalho em paralelo. Eles têm suas próprias janelas de contexto e podem invocar skills.

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

Cada arquivo de subagente tem um frontmatter YAML:

• name: Identificador claro
• description: O que faz e quando deve ser invocado
• tools: Capacidades permitidas (Read, Write, Bash, Grep, Glob)

Exemplo de subagente (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...

Nível 2: Skills

Skills são módulos de conhecimento acionados automaticamente. Quando você pede algo ao Claude que corresponde ao propósito de uma skill, o Claude a aplica automaticamente.

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

Isso segue a metodologia Atomic Design: átomos, moléculas, organismos. Cada skill é especialista em exatamente uma coisa. Quando você precisa de um card, a skill de card é acionada automaticamente.

Cada skill sabe:

• O schema do componente (props, slots, variantes)
• As convenções do seu design system
• Padrões específicos de framework
• Requisitos de acessibilidade WCAG
• Skills relacionadas às quais ela pode recorrer

Nível 3: Commands

Commands são atalhos acionados pelo usuário. Você digita /command para invocá-los. Eles vivem em workflows de skills ou 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

Commands podem invocar subagentes para planejamento, e então o Claude principal cuida da execução. Isso oferece fluxos de trabalho estruturados com acesso completo às ferramentas.

Exemplo Completo: Skill de Card

Veja exatamente como isso funciona com uma skill real:

A Estrutura da Skill

~/.claude/skills/card/
├── SKILL.md           # Prompt e instruções principais
├── workflows/         # Comandos de barra
│   ├── generate.md
│   ├── validate.md
│   ├── improve.md
│   ├── document.md
│   ├── test.md
│   └── a11y.md
├── references/        # Documentação carregada no contexto
│   └── schema.yml
└── scripts/           # Scripts executáveis em Python/Bash
    └── validate.py

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

Usando Comandos de Barra

Gerar um novo card:

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

Validar um card existente:

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

Verificar conformidade de acessibilidade:

/a11y card --level="AA"

Melhorar a UX para um contexto específico:

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

O que Acontece nos Bastidores

Quando você invoca /generate card, o Claude:

1. Aciona a skill de card: SKILL.md é carregado no contexto
2. Lê o schema:  Valida seus parâmetros em relação às props permitidas
3. Consulta outras skills:  as skills de image, heading e button fornecem sua expertise
4. Roda o workflow: workflows/generate.md é executado
5. Se auto-valida: Roda o workflow de validate sobre a própria saída
6. Devolve o resultado:  Entrega o componente mais eventuais avisos

A skill de card não só gera markup. Ela orquestra um sistema de especialistas, cada um contribuindo com seu conhecimento de domínio.

Por que Isso Importa: De Executor a Pensador de Sistemas

O modelo de teleprompter mantém você como operador. O modelo de skills faz de você o arquiteto.

Quando deixei de escrever prompts para começar a projetar skills, várias coisas mudaram:

Parei de repetir contexto. Cada skill já conhece seu domínio. Eu não explico o que é um card toda vez que preciso de um.

Passei a pensar em composição. Uma página não é um prompt só: é a coordenação de organismos, que coordenam moléculas, que coordenam átomos. Cada camada tem sua própria skill.

Eu deleguei a validação. Em vez de revisar manualmente cada saída, o comando /validate checa a estrutura, o comando /a11y checa a conformidade com a WCAG, e o comando /test roda verificações automatizadas. Eu reviso exceções, não cada resultado.

Eu construí conhecimento institucional. Quando melhoro o SKILL.md de uma skill, essa melhoria permanece. O sistema fica mais inteligente ao longo do tempo, não só durante uma conversa.

Essa é a diferença entre usar IA e construir com IA.

O Design É o Código

No meu trabalho com design systems, cheguei a um princípio: O Design É o Código.

Quando tokens de design, schemas de componentes e configurações de agentes estão alinhados, não existe uma camada de tradução entre o que designers especificam e o que desenvolvedores constroem. A especificação é a implementação.

Veja como agentes tornam isso 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

Esse schema não é só documentação. É a fonte da verdade. O agente gera componentes a partir dele. O validador checa com base nele. Os design tokens o referenciam. Um arquivo, muitos usos.

Quando um designer atualiza os valores dos tokens no Figma, a configuração do agente é atualizada. Quando a configuração do agente muda, os componentes gerados mudam. O design é o código porque ambos são derivados do mesmo schema.

Como Começar a Construir com Claude Code

Se você está pronto para ir além do modelo de teleprompter, aqui vai um caminho prático:

Passo 1: Identifique Seus Domínios

Quais áreas do seu trabalho são repetitivas, baseadas em regras e dependentes de contexto? Essas são candidatas a virar skills:

• Geração de código
• Documentação
• Testes
• Revisão e validação
• Gestão de design system
• Deployment e DevOps

Passo 2: Crie Sua Primeira Skill

Comece com um SKILL.md simples:

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

Passo 3: Adicione Workflows (Commands)

Crie os seis comandos principais em workflows/:

Cada comando é um arquivo markdown com instruções.

Passo 4: Estabeleça Referências entre Skills

Skills podem referenciar outras skills:

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

Mapeie essas dependências. A hierarquia deve refletir a estrutura natural do seu domínio.

Passo 5: Crie Subagents para Tarefas Complexas

Quando você precisar de contexto isolado ou execução em paralelo, crie um arquivo de subagente em ~/.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

Construindo Sua Biblioteca de Skills

Estruture suas skills seguindo o Atomic Design:

Cada skill:

• Tem sua própria configuração SKILL.md
• Tem workflows/ com comandos de barra
• Tem references/ com documentação
• Tem scripts/ para automação
• Sabe quais outras skills ela referencia

Isso cria um sistema consistente e escalável, em que o Claude aciona automaticamente a skill certa com base no contexto.

O Futuro é Agentic

Brad Frost, criador do Atomic Design, vem falando sobre essa mudança: design systems precisam se tornar infraestrutura legível por máquina, porque agentes de IA agora estão montando UIs com os mesmos componentes que times humanos usam.

Isso não é uma previsão para 2030. Está acontecendo agora.

Se o seu design system não pode ser interpretado por um agente, ele está virando legado. Se o seu fluxo de desenvolvimento exige um humano para dar prompt em cada etapa, ele não escala. Se suas interações com IA começam do zero toda vez, você está desperdiçando conhecimento acumulado.

O modelo de teleprompter era aceitável quando IA era novidade. Não é aceitável quando IA é infraestrutura.

Pare de só pedir. Comece a projetar.

Construa agentes. Dê skills a eles. Deixe que se coordenem.

O futuro pertence a quem arquiteta sistemas, não a quem escreve scripts.

Construindo design systems agentic para o futuro do desenvolvimento web.

Leitura Adicional

• The Design Is the Code  Minha exploração do pensamento de autômatos celulares em design systems
• Atomic Design by Brad Frost  A metodologia por trás de hierarquias de componentes
• Designing Systems That Build Themselves  De executor a pensador de sistemas