Como Ensinar Agentes de IA a Projetar Sem Templates e Montar Apresentações em Vídeo

Qualquer pessoa que já pediu ao Claude ou Cursor para criar uma landing page conhece esse resultado. O código gerado funciona tecnicamente, mas visualmente parece uma página típica de 2018 com botões azuis e cards arredondados. Os modelos conhecem a sintaxe de CSS e React, mas não possuem bom gosto de design integrado e compreensão da estrutura do projeto.

O repositório garden-skills do desenvolvedor chinês ConardLi resolve esse problema através do formato Agent Skills. Este é um conjunto de módulos seguindo a especificação SKILL.md que transformam Claude Code, Cursor, Codex e outros agentes de terminal em engenheiros especializados.

O Que São Agent Skills e Como Funcionam

A Anthropic recentemente propôs um padrão aberto para estender as capacidades dos agentes. Essencialmente, uma skill é uma pasta separada no seu projeto ou diretório home contendo um manifesto SKILL.md com um cabeçalho YAML, instruções de texto, scripts prontos e guias de referência.

O agente escaneia o campo description no manifesto. Quando a tarefa do usuário corresponde à descrição, o modelo carrega o contexto relevante diretamente durante a conversa. Isso elimina a necessidade de copiar prompts longos do sistema em cada chat.

O repositório garden-skills contém cinco módulos prontos para tarefas reais de trabalho.

Skills Prontos no Repositório

Cada skill é adaptada a um cenário específico e contém regras de interação rigorosas para evitar que o agente alucine ou pule aprovações de etapas.

1. web-design-engineer

O módulo foca em layout de páginas, dashboards, protótipos e componentes interativos. Em vez de templates genéricos, ele usa um banco de 25 estilos visuais prontos. Estes incluem a estética do Linear, o terminal da Bloomberg, estilo suíço, neumorfismo, retro-futurismo e minimalismo inspirado pelo designer queniano Kenya Hara (Muji).

A skill força o modelo a trabalhar em cinco parâmetros: densidade de elementos, dinâmica de animação, dependência de assets, alinhamento com a marca e variabilidade. O agente primeiro valida o conceito e a paleta em oklch(), depois constrói um protótipo inicial v0, e só escreve o código React final após aprovação.

2. web-video-presentation

Esta skill pega texto fonte, um artigo técnico ou notas de aula e monta uma apresentação web interativa em resolução fixa de 1920×1080 usando a stack Vite, React e TypeScript.

A apresentação é controlada por etapas e cliques de teclado, então cada ênfase semântica é sincronizada com a etapa visual na tela. Elementos da UI escondem ao passar o mouse, permitindo gravar uma tela limpa para vídeo.

O módulo suporta 23 temas integrados e se integra com geração de voz via MiniMax CLI, OpenAI TTS, ElevenLabs ou o utilitário do sistema macOS say.

3. beautiful-article

A ferramenta converte dados brutos (links, PDFs, DOCX, notas ou despejos de chat) em um layout de artigo legível. A skill depende da biblioteca de componentes Reacticle e de 11 perfis de designers (Tufte, Bodoni, Vignelli, Knuth).

O módulo oferece 10 formatos de publicação, desde tutoriais detalhados com 90% de preservação do texto original até explicadores interativos com reformulação profunda de conteúdo. Durante a montagem, o agente обязательно делает паузы para подтверждения темы, структуры и стратегии иллюстраций.

4. gpt-image-2 e kb-retriever

Duas outras skills cobrem tarefas mais específicas:

• gpt-image-2 contém 79 templates de prompts estruturados para gerar diagramas, diagramas arquitetônicos, banners e mockups de UI via APIs compatíveis com OpenAI. Pode funcionar em modo de geração de código ou simplesmente como consultor para compor prompts.
• kb-retriever organiza busca local em uma pasta estruturada com documentos, PDFs e planilhas Excel. Em vez de alimentar arquivos pesados para o agente inteiro e entupir a janela de contexto, a skill lê índices de árvore data_structure.md, usa utilitários como grep ou pdftotext, e encontra trechos precisos em no máximo 5 iterações.

Formas de Instalar no Projeto

A forma mais rápida de adicionar skills ao seu ambiente de trabalho é usar o gerenciador de pacotes npx skills. O utilitário detecta automaticamente qual assistente de IA está rodando no diretório e coloca os arquivos na pasta correta.

Instalando todos os módulos de uma vez:

npx skills add ConardLi/garden-skills

Instalando uma skill específica na configuração global:

npx skills add ConardLi/garden-skills -s web-design-engineer --global

Se você usa Claude Code, pode conectar plugins diretamente através do marketplace integrado:

/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skills

Para versões fixas em CI/CD ou projetos com requisitos rígidos de dependência em releases, o repositório fornece arquivos .zip assinados com checksums SHA-256. Basta descompactar o arquivo para .claude/skills/ ou .agents/skills/.

Compatibilidade com Agentes

O formato é aberto, então as skills funcionam não apenas com o ecossistema da Anthropic. O projeto foi testado com as seguintes ferramentas:

• Claude Code e a interface web do Claude.ai (via seção Capabilities)
• Cursor (pasta .agents/skills/<name>/)
• Codex CLI
• Gemini CLI
• OpenCode

Para Quem Este Projeto Será Útil

A coleção de ConardLi economiza tempo para quem usa agentes de IA diariamente no terminal ou editor de código. Em vez de configurar manualmente o contexto e corrigir erros infantis de layout, você obtém um pipeline previsível com pontos de verificação e tokens de design de qualidade.

A forma mais fácil de começar é com web-design-engineer ou beautiful-article. Eles dão resultados visíveis já na primeira solicitação e mostram como compor suas próprias instruções para a especificação SKILL.md.