Frontends com Vibecoding: do briefing ao deploy
Construa interfaces que parecem (e são) profissionais dirigindo a IA: você especifica e revisa, ela escreve o código. Em 22 módulos focados em stacks de tecnologia, do briefing ao deploy, com seis engenharias reversas embutidas nos capítulos de stack — Booking, Stripe, Mercado Livre, LATAM, Apple e Temu — um capítulo de benchmark comparando Mercado Livre, Amazon, Apple e Duolingo, um capítulo forense sobre a stack de 26 sites de alto padrão, e um capstone que moderniza projetos existentes em cinco ondas de agentes especialistas.
O que você vai aprender
Ao final, você saberá dirigir um agente de IA para construir frontends acessíveis e rápidos: especificar telas com clareza, escolher a stack certa, gerar componentes e design systems, montar dataviz e animação com moderação, e levar tudo do protótipo ao deploy com qualidade e descoberta.
Este é um curso de frontend prático: stacks, design, layout e as técnicas que tornam uma interface profissional — construídas dirigindo um agente de IA, que escreve o código enquanto você especifica e revisa. Gratuito, em 22 módulos focados em tecnologia (cerca de 710 minutos), do briefing ao deploy: React, Astro, Svelte e HTML, com componentes acessíveis, dataviz, animação, performance e acessibilidade WCAG 2.2 — mais CSS de plataforma 2026, diagramas-as-code e grafos, tabelas e data grids em escala, mapas sem lock-in e analytics direto no navegador — seis engenharias reversas reais embutidas nos próprios capítulos de stack (Booking, Stripe, Mercado Livre, LATAM, Apple e Temu), um capítulo de benchmark comparando Mercado Livre, Amazon, Apple e Duolingo, e um capítulo forense que disseca a stack de 26 sites de alto padrão de design.
O frontend em 2026, em seis formatos: você dirige, a IA constrói
Antes de mergulhar nos módulos, veja o mapa completo do curso. Vídeo-guia, podcast, debate, infográfico, carrossel e pitch deck — todos gerados a partir de uma pesquisa profunda e datada (frameworks, ferramentas de IA, CSS, performance, acessibilidade e deploy) do estado do frontend hoje.
Duas vozes destrincham o panorama: o que mudou no frontend, os dados de 2026 e por que revisar virou o gargalo.
Defesa e ceticismo sobre construir com IA: velocidade, dívida técnica, acessibilidade e dependência — com um mediador.
Você abre o terminal, descreve a tela que quer e ela aparece em segundos. Parece mágica. Não é.
Este curso é sobre frontend — as stacks, o design, o layout e as técnicas que fazem uma interface profissional. O que muda é o método: em vez de datilografar sintaxe, você descreve a intenção a um agente de IA — o Claude Code — que escreve e edita o código. Você diz o quê e por quê; a IA resolve o como.
O gargalo no vibecoding não é digitar — é especificar. A qualidade do resultado depende da clareza da intenção e da disciplina da revisão, não da velocidade de geração.
Antes de pedir qualquer coisa, termine esta frase em voz alta: "Esta tela deu certo se ___". Se você não consegue completá-la, a IA também não vai conseguir. O critério de sucesso é o que separa um prompt de um desejo.
Onde vibecoding exige cautela redobrada: lógica de negócio crítica (cálculo financeiro, cobrança, permissões), qualquer coisa de segurança (autenticação, validação de entrada, tratamento de dados sensíveis) e integrações com sistemas de pagamento. A IA gera código plausível que pode estar sutilmente errado. Nesses pontos, a revisão humana linha a linha não é opcional — e código que você não entende não vai para produção. Vibecoding acelera o frontend; não terceiriza a responsabilidade.
Vibecoding acontece numa oficina de quatro estações: o agente que escreve, o app que roda, o browser que inspeciona e o git que protege. Neste módulo você vai operá-las como um ciclo único.
Um harness não é um chat. O Claude Code escreve e edita os arquivos do seu projeto diretamente — a diferença entre conversar sobre código e trabalhar junto dentro do repositório.
Estações 1 e 2 — criar o projeto e ver o resultado
Você precisa de um esqueleto rodando: Next.js para apps interativos, Astro para conteúdo, Vite para algo mínimo. Com o npm run dev no ar, o hot reload recarrega o navegador a cada save da IA — é o feedback que fecha o loop. Mantenha-o ligado a sessão inteira.
Estação 3 — o MCP e o browser que se audita
O MCP (Model Context Protocol) conecta o Claude Code a ferramentas externas. A que mais transforma o frontend é o browser Chrome via MCP: o agente abre a tela que gerou, lê o console, mede o contraste, roda auditoria estilo Lighthouse e enxerga o resultado renderizado — não só o código. Ele descobre sozinho que um texto está ilegível, porque consegue ver a tela como o usuário vê.
Veja um prompt que aciona essa auditoria automática logo após gerar uma tela
Repare na última instrução: pedir para reabrir e confirmar fecha o loop dentro do próprio agente. Ele corrige, reaudita e só então diz "passou". Você revisa o resultado já verificado, não a primeira tentativa crua.
Deixe a auditoria via browser MCP fazer parte do seu prompt de geração, não de um passo separado que você esquece. Acrescente ao fim dos pedidos de tela: "depois de gerar, audite contraste e console no browser e corrija o que reprovar". O contraste vira um requisito automático, não uma checagem manual que escapa.
Estação 4 — git como rede de segurança
A IA é rápida e às vezes destrutiva. A regra: commit a cada tela que funciona. Commits pequenos transformam o git numa malha de pontos de retorno — você experimenta sem medo porque sabe onde estava o último estado bom.
O ciclo completo, do início ao fim
Junte as quatro estações e você tem o ritmo de trabalho do vibecoding maduro.
- 01
npm run devrodando numa aba — o app está no ar. - 02Você descreve a tela ao Claude Code com critérios de sucesso.
- 03Ele gera os arquivos; o hot reload mostra o resultado.
- 04Ele abre a tela no browser via MCP, audita contraste e console, corrige e confirma.
- 05Você revisa o resultado já verificado e aprova.
- 06
git commit— o ponto de retorno fica salvo. - 07Próxima tela. O ciclo recomeça.
Ferramentas do ambiente e para que servem
| Ferramenta | Função | Quando você a aciona |
|---|---|---|
| Claude Code (harness) | Lê e escreve os arquivos do projeto | Sempre — é o motor da geração e edição |
Servidor de dev (npm run dev) | Roda o app com hot reload | Mantenha ligado durante toda a sessão |
| Browser Chrome via MCP | Audita contraste, console e Lighthouse na tela renderizada | Após cada geração de tela visual |
| Git | Versiona e cria pontos de retorno | A cada tela que funciona (commit) |
| MCP (protocolo) | Conecta o agente a ferramentas externas | Por baixo — habilita o browser e outras integrações |
Confirme antes de avançar: (1) Você consegue explicar por que o Claude Code ser um harness que escreve arquivos muda o trabalho em relação a um chat comum? (2) Você sabe descrever o que o browser via MCP permite que a IA faça que ela não consegue olhando só o código-fonte? (3) Você consegue justificar por que commitar a cada tela boa é o que torna a iteração agressiva segura?
npm install -g @anthropic-ai/claude-code # instala o harness
│
▼
claude # inicia sessão no terminal
│
├── abre o projeto atual
├── lê os arquivos do repo
└── começa a escrever e editar diretamente
│
▼
npm run dev (em paralelo, outro terminal ou integrado)
│
├── hot-reload: browser atualiza a cada save do Claude
└── você vê o resultado em tempo real sem F5
│
▼
git commit -m "tela X funcionando" # ponto de retorno seguro
│
└── itere a próxima dimensão com confiançaExercício prático
Construa e audite um ciclo completo. Crie um projeto Vite ou Next, peça ao Claude uma tela simples de cadastro de newsletter (campo de e-mail, botão, mensagem de sucesso) e então avalie a qualidade dela usando o browser MCP: peça a auditoria de contraste, console e teclado, e mande corrigir o que reprovar.
Critérios de sucesso: ao final, (1) o servidor de dev está rodando e a tela aparece no navegador, (2) a auditoria via MCP reportou contraste de cada texto com valor numérico e nenhum par ficou abaixo de AA, (3) o console está sem erros, (4) o foco é visível ao navegar por teclado e (5) você fechou ao menos um commit com mensagem descritiva. Saber recuperar o estado anterior com git restore também conta como sucesso.
Domando o Claude Code: memória, MCP, subagentes e automação
Agora você vai configurar o próprio agente — onde a curva de produtividade vira. Operar é repetir as mesmas instruções a cada sessão; dirigir é gravar essas regras no harness uma vez, de forma que o agente já as saiba ao abrir o projeto. Em frontend isso pesa porque as regras que mais importam — tokens, contraste WCAG, foco visível, estados de loading e erro, a stack — são as mesmas em todo componente. Gravadas no harness, viram piso automático.
- CLAUDE.md: a memória do projeto que o agente lê todo início:
O CLAUDE.md na raiz é lido automaticamente a cada sessão: stack, convenções, comandos e regras de design — o onboarding que o agente relê de graça toda vez. Mantenha-o curto e operacional: regras vagas ("escreva bom código") não mudam nada; concretas e verificáveis ("texto secundário usa text-slate-600, nunca text-slate-400") mudam cada geração.
# CLAUDE.md
## Stack
- Next.js 16 (App Router) + React 19 + TypeScript estrito
- Tailwind v4; tokens em src/styles/tokens.css (cores em OKLCH)
- Sem bibliotecas de UI externas; primitivas headless via Radix quando precisar de a11y nao-trivial
## Regras de frontend (PISO, nao negociavel)
- Contraste WCAG AA minimo: 4.5:1 texto normal, 3:1 texto grande
- Cor SEMPRE via token var(--color-*); nunca hex espalhado no JSX
- Todo componente interativo tem foco visivel (focus-visible:ring-2)
- Toda lista trata o estado vazio; todo fetch trata loading e erro
- Texto secundario: text-slate-600 (NUNCA slate-400 sobre branco)
## Comandos
- Dev: npm run dev (porta 3000)
- Qualidade: npm run verify (tsc + lint + test) antes de cada commit
- Build de producao: npx next build
## Convencoes
- Componentes em src/components, um arquivo por componente, export nomeado
- Mensagens de commit em ingles, no imperativoVocê não precisa escrever isso a mão. O jeito mais rápido é pedir ao próprio agente que leia o projeto e proponha o arquivo — depois você edita o que importa:
Leia a estrutura deste projeto (package.json, tsconfig, a pasta src e os arquivos de estilo) e crie um CLAUDE.md na raiz com:
1. A stack real que voce detectou (framework, versoes, sistema de estilo).
2. Os comandos de dev, lint, teste e build que existem no package.json.
3. As convencoes que voce conseguir inferir do codigo ja escrito (estrutura de pastas, padrao de export, sistema de tokens de cor).
4. Uma secao "Regras de frontend" com o piso de acessibilidade: contraste WCAG AA, foco visivel, estado vazio em listas, loading e erro em todo fetch.
Nao invente convencoes que o codigo nao mostra. Para cada regra, deixe-a concreta e verificavel, nao generica. Ao terminar, liste as 3 regras que voce acha que eu deveria revisar ou ajustar.Granularidade importa: o CLAUDE.md da raiz vale para o projeto inteiro, mas você pode colocar um CLAUDE.md dentro de uma subpasta (por exemplo src/components/) com regras locais que só valem ali. E existe um arquivo de memória global do seu usuário, fora do projeto, para preferências que valem em todo lugar. Comece pelo da raiz; ele resolve 90% dos casos.
- MCP servers (.mcp.json): conectar ferramentas e dados ao agente:
O MCP (Model Context Protocol) dá ao agente a capacidade de agir — consultar um banco, abrir uma URL, ler um board de design. A memória é conhecimento; o MCP é ação. Os servidores ficam num .mcp.json versionado, então quem clona o repositório ganha as mesmas conexões.
Vale criar um MCP server seu quando o agente precisa de um dado ou ação de um sistema só seu — a API interna de tokens oficiais, o catálogo de componentes aprovados. Em vez de colar esses dados a cada sessão, o agente os busca sozinho. Um MCP server mínimo é um processo que expõe "ferramentas" que o agente pode chamar:
Com esse servidor no .mcp.json, você pede "use a cor de destaque oficial" e o agente chama buscar_token e aplica o valor exato. Não crie um MCP para tudo: só vale quando o dado é dinâmico, vive num sistema seu e seria repetitivo colar a mão.
- Skills e slash commands: fluxos reutilizáveis:
Um prompt longo que você repete toda semana merece virar um slash command: um markdown em .claude/commands/ invocado por /nome. Uma skill vai além — carrega lógica e arquivos auxiliares (checklist, script de validação) e o agente a aciona sozinho quando a tarefa casa com sua descrição.
<!-- .claude/commands/auditar-tela.md => invocado por /auditar-tela -->
---
description: Audita a tela aberta no browser MCP (contraste, console, teclado) e corrige
---
Abra http://localhost:3000$ARGUMENTS no browser via MCP e:
1. Leia o console; aponte erros e warnings.
2. Meca o contraste de cada texto contra o fundo; cite valores abaixo de WCAG AA.
3. Teste navegacao por teclado; confirme foco visivel.
4. Corrija no codigo o que reprovar, reabra a tela e confirme que passou.
Nao altere o layout; ajuste so cores e o necessario para acessibilidade.Agora /auditar-tela /login roda o fluxo inteiro; o $ARGUMENTS recebe a rota, então o mesmo fluxo serve a qualquer tela. Toda tela passa pelo mesmo crivo, sem depender de você lembrar de cada passo.
- Hooks: rodar comandos em eventos, com código (não com boa vontade):
O CLAUDE.md *pede* que o agente rode o lint; um hook *garante* isso — um comando que o harness dispara sempre num evento do ciclo de vida. A regra em texto o agente pode pular; o hook é determinístico. Para frontend, o uso matador é o gate de qualidade: formatar ao salvar e rodar tsc + lint + build antes de qualquer commit, barrando se algo reprovar.
Hooks executam comandos da sua máquina automaticamente, sem te pedir confirmação a cada disparo. Trate o .claude/settings.json com o mesmo cuidado de um script de deploy: nunca cole um hook de fonte desconhecida sem ler o que ele roda, e jamais coloque um comando destrutivo (como rm -rf ou git push --force) num hook. Um hook mal escrito roda em todo evento — o estrago se multiplica.
- Subagentes: delegar tarefas isoladas em paralelo:
Os subagentes deixam o principal delegar uma tarefa fechada a um subagente que roda com contexto e permissões próprios, em paralelo, devolvendo só o resultado — mais rápido e sem poluir o seu contexto. O padrão que muda o frontend: enquanto um escreve um componente, outro audita contraste e acessibilidade, sem travar você.
Faca estas duas coisas EM PARALELO, cada uma num subagente proprio:
Subagente 1 (escrever): crie o componente <CardPlano> em React + Tailwind, com props { titulo, preco, destaque }, seguindo os tokens e regras do CLAUDE.md.
Subagente 2 (auditar): abra a tela /precos no browser via MCP e audite contraste WCAG AA, foco por teclado e erros de console em TODOS os cards ja existentes; liste cada reprovacao com o valor medido e o seletor.
Quando ambos terminarem, consolide: me mostre o novo componente e a lista de reprovacoes da auditoria, separadamente.- Plan mode: planejar antes de executar um refactor grande:
O loop curto é ótimo para uma tela, mas perigoso numa mudança ampla (renomear um token em 40 componentes, migrar de lib): o agente edita antes de você ver o plano inteiro. O plan mode faz o agente investigar e apresentar um plano passo a passo, sem editar nada, até você aprovar — correção barata no plano, não cara no código já alterado.
Entre em plan mode. Quero migrar todas as cores hardcoded (hex no JSX) para tokens var(--color-*).
NAO edite nada ainda. Primeiro: varra src/, liste cada arquivo com cor hardcoded e o token equivalente que voce usaria, sinalize os hex que NAO tem token (preciso decidir) e proponha a ordem de migracao com os pontos de risco. So depois que eu aprovar o plano voce comeca a editar.- Git worktree: iterações paralelas sem conflito:
Duas ideias no mesmo projeto colidem se rodam na mesma pasta. O git worktree dá a cada linha de trabalho sua própria pasta com seu próprio branch, compartilhando o histórico — um Claude Code em cada uma, sem se tocarem. Os subagentes podem rodar cada um na sua worktree temporária, removida sozinha quando terminam sem mudanças.
- O harness inteiro num quadro:
| Peça do harness | O que resolve | Quando usar |
|---|---|---|
| CLAUDE.md | Repetir stack, convenções e regras a cada sessão | Sempre — é a base; primeiro arquivo a criar |
| MCP (.mcp.json) | Dar ao agente acesso a ferramentas e dados externos | Browser que se audita, Figma, banco, API interna |
| MCP server próprio | Buscar dados dinâmicos de um sistema só seu | Tokens oficiais, catálogo de componentes aprovados |
| Slash command | Repetir o mesmo prompt longo manualmente | Auditoria de tela, scaffold de componente padrão |
| Skill | Fluxo com lógica e arquivos auxiliares, acionado sozinho | Quando o comando precisa de checklist/script junto |
| Hook | Garantir uma regra com código, não com boa vontade | Formatar ao salvar; lint + build antes do commit |
| Subagente | Delegar tarefa isolada em paralelo, contexto próprio | Auditar enquanto escreve; revisar enquanto você segue |
| Plan mode | Editar cedo demais num refactor amplo | Migração, renomeação em massa, reestruturação |
| Git worktree | Experimentos paralelos colidindo na mesma pasta | Duas features/ideias ao mesmo tempo sem conflito |
O fio que une tudo: cada peça tira uma decisão repetitiva da sua cabeça e a grava no ambiente — o briefing, o gate de qualidade, a auditoria, a divisão de trabalho. Você deixa de ser o operador que repete e vira o diretor que define o sistema uma vez e revisa resultados já filtrados.
Ordem de adoção que rende mais cedo: comece pelo CLAUDE.md (impacto imediato em toda geração), some um slash command de auditoria (padroniza a qualidade visual), depois um hook de lint + build no commit (trava regressão). Subagentes, plan mode e worktree você adota quando o projeto cresce e a paralelização passa a valer a pena. Não tente montar tudo de uma vez.
Plugins e design visual do Claude: frontend-design, marketplaces e Claude Design
Depois de gravar o harness, o passo seguinte é distribuir essas configurações — o que a Anthropic padronizou em 2026 com os plugins: um pacote instalável que reúne skills, subagentes, hooks, servidores MCP e LSP. Alguém empacota uma vez; o resto instala com um comando. No mesmo ano a Anthropic abriu uma camada visual própria: a skill frontend-design, o Claude Design no claude.ai e os Live Artifacts no Claude Cowork. Este módulo é prático: você vê o painel por dentro, instala a bancada de frontend e encaixa as ferramentas visuais no ciclo.
- O que é um plugin e o que é um marketplace:
Um marketplace é um catálogo de plugins (como uma loja de apps); adicioná-lo registra o catálogo, instalar um plugin é um segundo passo item a item. O oficial claude-plugins-official já vem disponível; o community (triado e fixado num commit) e o de demonstração são adicionados à mão.
- O painel
/pluginpor dentro:
O comando /plugin abre um painel com quatro abas (Tab para alternar): Discover (navegar), Installed (ligar, desligar, remover), Marketplaces (gerir catálogos) e Errors (plugins que falharam). No Discover, o que é relevante para a pasta atual aparece fixado no topo.
A aba de detalhes mostra três coisas que valem a leitura: o custo de contexto (tokens por turno), a data da última atualização e a seção Will install (comandos, skills, agentes, hooks e MCP/LSP que ele adiciona). Cada plugin pesa no contexto; um com MCP custa mais quando as ferramentas não são adiadas.
- Instalação, passo a passo:
O fluxo completo tem cinco passos — e o passo 3 (revisar antes de confirmar) é o que separa quem instala com cuidado de quem entope o contexto.
Você escolhe onde o plugin vale, com o escopo: user (todos os seus projetos, o padrão), project (compartilhado via .claude/settings.json) e local (só este repositório). Pela CLI, o --scope resolve; pela interface, Enter no plugin e escolha.
As skills de um plugin ficam com namespace do plugin. Depois de instalar o commit-commands, por exemplo, a skill é invocada como /commit-commands:commit, não só /commit. Isso evita conflito de nomes entre plugins e deixa claro de onde cada comando veio. Se um comando recém-instalado não aparece, rode /reload-plugins; se ainda assim falta, o cache pode estar velho — limpe ~/.claude/plugins/cache, reinicie e reinstale.
- Instalar o time inteiro de uma vez:
O admin declara o marketplace e os plugins no .claude/settings.json do repositório; quando o colega confia na pasta, o Claude Code propõe instalar tudo — toda a equipe na mesma bancada.
- A skill frontend-design: estética antes do código:
A skill frontend-design (mantida pela Anthropic, +270 mil instalações até março de 2026) muda a ordem do trabalho: antes de gerar código, o agente define propósito, público, direção estética e o elemento memorável. O objetivo é fugir do *AI slop* — a interface genérica que toda ferramenta de IA produz por padrão.
As diretrizes que a skill carrega são concretas e, em alguns pontos, deliberadamente provocativas
| Dimensão | O que a skill orienta | O que ela evita |
|---|---|---|
| Tipografia | Parear uma fonte de display marcante com uma de corpo refinada | Fontes genéricas como Inter, Roboto e Arial |
| Cor | Uma cor dominante com acentos nítidos, via variáveis CSS | Paletas tímidas e o clichê do gradiente roxo sobre branco |
| Movimento | Animações CSS, revelações escalonadas no carregamento, microinterações | Movimento decorativo sem intenção |
| Composição | Layouts assimétricos, sobreposição, espaço negativo generoso | Grades previsíveis e componentes de molde |
| Detalhe | Texturas, ruído, sombras dramáticas, profundidade em camadas | Falta de atmosfera e de caráter específico ao contexto |
O segredo é alimentá-la com contexto e restrições: um prompt vago devolve estética aleatória; um com propósito, público e direção declarada devolve uma tela coerente. Note as proibições explícitas e o piso do CLAUDE.md reafirmado no fim:
Use a skill frontend-design para a landing de um atelie de joias autorais.
Proposito: transmitir exclusividade e feito a mao; publico: clientes de alto padrao.
Direcao estetica: editorial, tipografia serifada de display marcante, muito espaco
negativo, uma unica cor dominante quente com acento sobrio.
Proibido: gradiente roxo, fontes Inter/Roboto/Arial, layout centralizado simetrico.
Elemento memoravel: um titulo serifado grande alinhado a borda esquerda, com a foto
do produto sangrando para fora da grade.
Depois de definir a direcao, implemente em React + Tailwind seguindo os tokens e o
piso de acessibilidade do CLAUDE.md (contraste WCAG AA, foco visivel, estados de
loading e erro). Antes de finalizar, liste as escolhas esteticas que fez e por que.A skill empurra escolhas estéticas ousadas — e isso pode brigar com legibilidade. A regra do curso não muda: contraste WCAG AA continua sendo piso inegociável. Quando a skill propuser texto claro sobre fundo de baixo contraste, uma fonte de display num parágrafo inteiro ou animação que ignora prefers-reduced-motion, segure. O piso de acessibilidade que você gravou no CLAUDE.md vence a vontade de impressionar. Personalidade visual e contraste não são opostos; o trabalho é entregar os dois — por isso o exemplo acima reafirma o piso no próprio prompt.
- Inteligência de código: o plugin que pega o erro na hora:
Os plugins de LSP ligam o servidor de linguagem ao agente (a tecnologia que dá inteligência de código ao VS Code). Com o typescript-lsp, após cada edição o servidor devolve erros automaticamente — prop errada, import faltando, retorno incompatível — e o agente conserta no mesmo turno, sem rodar o compilador a cada passo.
O plugin de LSP exige o binário do servidor instalado na máquina (para TypeScript, o typescript-language-server). Se a aba Errors mostrar Executable not found in $PATH, é isso que falta. E cuidado em monorepos: o servidor pode acusar falso positivo de import não resolvido se o workspace não estiver bem configurado — não afeta a capacidade do agente de editar, mas confunde a leitura.
- Plugins parceiros que mudam o frontend:
Vários plugins são só um servidor MCP pré-configurado para um serviço externo. Os que mais rendem em frontend
- figma — "leia o frame *Tela de preços* no Figma e implemente fiel: use as cores, os espaçamentos e a tipografia do design, não invente". O agente lê o arquivo de origem em vez de adivinhar.
- vercel — "faça deploy desta branch de preview e me traga os logs de runtime se algo quebrar". Fecha o ciclo entre escrever a tela e vê-la publicada.
- playwright — "abra /checkout num browser real, preencha o formulário com dados inválidos e confirme que as mensagens de erro aparecem". Testa estados de verdade, não só o caminho feliz.
- github e sentry — "abra um PR com estas mudanças" e "leia os três erros mais frequentes em produção desta semana e me diga quais vêm do frontend".
- A camada visual do Claude em 2026:
Além dos plugins, a Anthropic abriu três superfícies visuais — cada uma resolve uma etapa diferente do frontend.
Claude Design (claude.ai, 17/abr/2026) gera protótipos, mockups e apresentações a partir de texto e lê o código e o design do time para montar um design system reutilizável (exporta Canva, PDF, PPTX ou HTML). No fluxo do curso: use-o para explorar a direção e gerar tokens e componentes antes de pedir a implementação no repositório.
Live Artifacts (Claude Cowork, 20/abr/2026) são painéis HTML interativos conectados aos seus apps via MCP que se atualizam com o dado atual sempre que reabertos — ideais para um dashboard de métricas sempre vivo. Some as visualizações inline (gráficos em SVG/HTML direto na resposta) e a visão melhorada, que reconhece uma tela e devolve o código.
- Qual ferramenta para qual etapa:
| Etapa do trabalho | Ferramenta | Por quê |
|---|---|---|
| Explorar direção visual e gerar o design system | Claude Design (claude.ai) | Tira protótipo e tokens de uma conversa, lê o design existente |
| Implementar a tela no repositório | Skill frontend-design (Claude Code) | Estética intencional + código production-grade no seu projeto |
| Manter o tipo certo a cada edição | typescript-lsp (Claude Code) | Diagnóstico automático, conserto no mesmo turno |
| Ler o design de origem | Plugin figma | Implementa fiel ao que o designer desenhou |
| Testar estados de verdade | Plugin playwright | Dirige um browser real: clica, preenche, confirma |
| Publicar e investigar | Plugins vercel, sentry | Deploy, logs de runtime e erros de produção |
| Entregar um painel que vive | Live Artifact (Cowork) | HTML interativo que atualiza com dado real via MCP |
- O fluxo que amarra tudo:
- 01Direção — no Claude Design, gere direções visuais e o design system (tokens, tipografia, componentes-base).
- 02Piso — traga os tokens para o
CLAUDE.mde o arquivo de tokens, com as regras de acessibilidade. - 03Implementação — no Claude Code, com
frontend-designetypescript-lspativos, peça os componentes; ofigmaajuda a fidelidade. - 04Verificação — o subagente de auditoria confere contraste e teclado; o
playwrighttesta os estados. - 05Entrega — publique com
vercele exponha métricas num Live Artifact via MCP.
Plugins e marketplaces são componentes altamente confiáveis: executam código arbitrário na sua máquina, com os seus privilégios. A Anthropic não controla o que cada plugin de terceiros contém e não garante que funcione como anunciado. Instale apenas de fontes confiáveis, leia a seção Will install antes de confirmar, e prefira o catálogo oficial ou o community (que passa por triagem e fixa cada plugin num commit) a marketplaces avulsos. O mesmo cuidado que você teria com um hook desconhecido vale para um plugin inteiro — ele pode trazer hooks, MCP e LSP de uma vez. Organizações podem restringir, por managed settings, quais marketplaces os membros têm permissão de adicionar.
EXTRA: o ecossistema ficou agente-nativo (MCPs, skills e guidelines oficiais)
Em 2024, o agente improvisava a API de uma biblioteca a partir do que estava no treinamento — e errava sempre que a lib tinha mudado. Em 2026, uma biblioteca séria não deixa mais isso ao acaso: ela publica contexto oficial para agentes — um MCP, uma skill, um AGENTS.md ou um llms.txt. Isso reescreve a tese central do módulo 1. A nova primeira pergunta, antes de qualquer prompt sobre uma lib de API extensa, não é mais "como escrevo o prompt?", e sim: existe MCP ou skill oficial desta biblioteca? Se existe, você carrega o contexto e a alucinação de API deixa de ser um erro a revisar depois — ela some na fonte.
Este extra NÃO repete a mecânica de .mcp.json que você já viu no STEP_HARNESS. O ângulo aqui é outro: o catálogo de contexto oficial que o ecossistema publicou — quais bibliotecas já entregam MCP/skill e como você as pluga no seu projeto de frontend.
- Inventário comentado: quem já publica contexto oficial, e para quê
Não é tendência isolada — é o mesmo movimento acontecendo camada por camada da stack de frontend
- shadcn MCP Server — o agente lista, busca e instala componentes de qualquer registry por linguagem natural ("add a login form"), incluindo registries privados. Inicializa com npx shadcn@latest mcp init --client claude (fonte: ui.shadcn.com/docs/mcp).
- Motion AI Kit + MCP — a documentação inteira vira *resources* pesquisáveis, mais skills de boas práticas, auditoria de performance de animação e 400+ exemplos. É a diferença entre o agente alucinar a API antiga do Framer Motion e o agente consultar o MCP para a API atual do Motion (fonte: motion.dev/docs/ai-kit).
- React Aria — MCP oficial (@react-aria/mcp) e docs reformuladas amigáveis a IA desde a v1.14, para o agente gerar componentes acessíveis a partir da fonte canônica (fonte: react-aria.adobe.com/releases/v1-14-0).
- MapLibre — repositório oficial maplibre/maplibre-agent-skills, com Skills prontas de padrões PMTiles e estilização (fonte: github.com/maplibre/maplibre-agent-skills).
- AntV — antvis/chart-visualization-skills, skills oficiais de dataviz que traduzem dados em linguagem visual correta (fonte: github.com/antvis/chart-visualization-skills).
- AG Grid — AI Toolkit e suporte MCP first-party: a documentação gigante da lib vira contexto estruturado em vez de fonte de alucinação (fonte: rv-grid.com/blog/best-js-datagrid-in-2026).
- O achado de ouro para fechar uma tela: Vercel Web Interface Guidelines
A Vercel publicou uma lista viva de centenas de regras objetivas de interface — MUST, SHOULD e NEVER — cobrindo interações, formulários, dark mode, safe areas, hidratação e anti-padrões. E publicou em dois formatos consumíveis por agente: um AGENTS.md para o agente aplicar durante a geração e um slash command /web-interface-guidelines (com suporte a Claude Code) que audita o código de UI e devolve os achados no formato arquivo:linha (fonte: github.com/vercel-labs/web-interface-guidelines). Isto é um gate de qualidade de UX pronto e mantido — complementar, não substituto, ao auditor de contraste via Chrome MCP que o curso já usa.
O novo loop padrão para fechar qualquer tela do curso: gerar o código -> rodar /web-interface-guidelines -> corrigir os achados arquivo:linha -> auditar contraste via Chrome MCP. As guidelines pegam regressão estrutural de UX; o Chrome MCP pega o que só se vê renderizado. Um não dispensa o outro.
- O catálogo no seu projeto: um
.mcp.jsonde bibliotecas de UI
No STEP_HARNESS você viu a mecânica; aqui o ponto é o conteúdo do catálogo. Um .mcp.json que reúne shadcn (componentes), React Aria (acessibilidade) e Motion (animação) dá ao agente as três APIs de frontend mais fáceis de alucinar — todas a partir da fonte oficial:
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": ["shadcn@latest", "mcp"]
},
"react-aria": {
"command": "npx",
"args": ["-y", "@react-aria/mcp"]
},
"motion": {
"command": "npx",
"args": ["-y", "motion-mcp"]
}
}
}A entrada shadcn é escrita para você por npx shadcn@latest mcp init --client claude — não a monte na mão. A react-aria usa o pacote @react-aria/mcp, publicado desde a v1.14. O comando exato do Motion está em motion.dev/docs/ai-kit: confira a página oficial em vez de confiar no nome do pacote acima. Regra geral: o .mcp.json é derivado da doc oficial de cada lib, nunca da memória do modelo.
- A política escrita no CLAUDE.md: obrigar a consulta antes de gerar
Configurar o MCP não basta se o agente esquecer de usá-lo. Institua a regra na memória do projeto — é o mesmo padrão de guardrail que o curso aplica para acessibilidade e contraste:
## Política de contexto de biblioteca
Antes de gerar código de qualquer biblioteca de API extensa (componentes,
gráficos, mapas, data grids, animação), verifique se há MCP ou skill oficial
configurado no projeto.
- Se HOUVER: consulte-o antes de escrever o código. Não improvise a API a
partir da memória de treino.
- Se NÃO houver: avise e proponha configurá-lo antes de prosseguir.
A documentação oficial (MCP/skill/AGENTS.md/llms.txt) é a fonte. A memória do
modelo é o último recurso, não o primeiro.- O experimento reproduzível: a mesma geração, com e sem a skill
A melhor prova de que contexto oficial melhora a geração é medir. Rode o mesmo prompt de gráfico duas vezes — uma com a skill oficial da AntV (antvis/chart-visualization-skills) descarregada, outra com ela carregada — e compare quantos critérios de aceite cada versão cumpre de primeira, sem retrabalho. É a tese do módulo 1 aplicada ao ecossistema, virando evidência empírica no seu próprio projeto:
Gere um dashboard de uma página com AntV G2, lendo este JSON de receita por
canal e mês [cole seus dados aqui]: um gráfico de barras empilhadas (receita
por canal ao longo dos meses) e um heatmap de coorte (retenção por mês de
entrada).
Critérios de aceite (verifique cada um antes de me devolver):
1. Use a API ATUAL do G2 (v5), nunca a sintaxe da v4.
2. Eixos com título e unidade; sem sobreposição de rótulos.
3. Paleta categórica com contraste AA que NÃO dependa só de cor (rótulo direto
na série ou padrão distinguível).
4. Tooltip navegável por teclado e uma tabela alternativa com os mesmos dados.
5. Responsivo; o gráfico não pode inicializar em contêiner de largura zero.
6. Zero valores hardcoded de cor: consuma os tokens do projeto via var(--...).
Ao terminar, liste quais dos 6 critérios você cumpriu de primeira.Com este extra, você sabe transformar a evolução do ecossistema em governança do agente: perguntar "existe MCP ou skill oficial?" antes de cada lib de API extensa, plugar dois MCPs de biblioteca no seu projeto via .mcp.json, instituir a política de consulta no CLAUDE.md, instalar o /web-interface-guidelines e fechar qualquer tela com o loop completo — gerar, auditar por regra, corrigir e conferir contraste no Chrome MCP. A biblioteca agora fala com o agente; o seu trabalho é garantir que ele escute.
Perguntas frequentes
Preciso saber programar para fazer este curso?
O que é vibecoding?
Que ferramentas o curso usa?
Vibecoding substitui o desenvolvedor?
O curso cobre menus e navegação?
O curso ensina a fazer apresentações?
O curso é gratuito?
Como eu configuro o Claude Code para trabalhar do meu jeito?
O curso ensina a fazer formulários com validação de verdade?
Como buscar dados de uma API sem o frontend virar uma bagunça?
Qual biblioteca de gerenciamento de estado eu devo usar?
O curso trata de segurança e autenticação no frontend?
Dá para fazer um site em vários idiomas com vibecoding?
O curso ajuda a aparecer no Google e a ser citado pelas IAs?
Como faço meu site funcionar offline ou virar um app instalável?
O curso ensina acessibilidade além de só passar no checador automático?
Como levo o projeto do protótipo até o deploy com qualidade?
Vale a pena montar um design system com Storybook?
O curso cobre os recursos novos de CSS de 2026?
Como fazer animações sofisticadas sem travar a página no celular?
Qual biblioteca de gráficos usar quando o Recharts não dá conta?
Para animação baseada em ilustração, Lottie ou Rive?
Que conjunto de ícones e ilustrações devo escolher?
shadcn/ui, Mantine ou MUI: qual biblioteca de componentes adotar?
Vale a pena usar um motor de CSS como Panda, vanilla-extract ou UnoCSS?
Qual biblioteca de tabela usar quando os dados crescem de verdade?
Dá para colocar um mapa no site sem pagar licença nem depender de um fornecedor?
Preciso de um BI para fazer análise de dados, ou o navegador dá conta?
Como transformar um processo ou uma arquitetura em diagrama sem desenhar à mão?
Alexandre Caramaschi
CEO da Brasil GEO, ex-CMO da Semantix (Nasdaq), advisor estratégico de IA da Nuvini (Nasdaq: NVNI), cofundador da AI Brasil
Este curso faz parte do material educacional da Brasil GEO para democratizar o acesso à tecnologia. Os exemplos usam projetos e ferramentas reais para tornar o aprendizado de frontend assistido por IA concreto e prático.