Web Artifacts Builder skill

O Claude cria uma interface com vários componentes, estado e navegação e entrega tudo num arquivo HTML só, sem servidor pra configurar.

por AnthropicPublicada pela própria empresa

instalações: 112,6 mil
estrelas no GitHub: 183,8 mil
No skills.sh desde: janeiro de 2026
Licença: Sem licença declarada

Atualizada no GitHub em 9 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

Anthropic
web-artifacts-builder
O Claude cria uma interface com vários componentes, estado e navegação e entrega tudo num arquivo HTML só, sem servidor pra configurar.Oficial112,6 mil instalações, grátis

O que ela faz

Cria um projeto já configurado com React 18, TypeScript, Vite, Tailwind CSS 3.4.1 e mais de 40 componentes do shadcn/ui instalados, com as dependências do Radix e os atalhos de caminho prontos. Tudo sai de um script só, o init-artifact.sh.

Depois que o Claude escreve o código, o bundle-artifact.sh empacota tudo com o Parcel e põe JavaScript, CSS e dependências dentro de um único bundle.html. Esse arquivo pode ser mostrado como artifact no claude.ai ou aberto direto no navegador.

Traz uma regra de estilo contra a cara de 'feito por IA': nada de tudo centralizado, gradiente roxo, cantos arredondados iguais e fonte Inter. É pra coisas maiores, com estado, rotas ou componentes do shadcn; pra um HTML simples de um arquivo, ela não é necessária.

Nas palavras de quem fez

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use…

Anthropic, no SKILL.md

Quando usar

Fazer uma calculadora ou simulador de orçamento pra mandar pro cliente
Montar um painel com abas, filtros e gráficos num arquivo só
Prototipar a tela de um app antes de contratar quem programe
Criar uma ferramenta interna com formulário e várias telas

Depois de instalar, é só pedir assim

Usa a web-artifacts-builder e faz uma calculadora de orçamento de reforma em três etapas, com resumo no final
Cria um painel com abas de vendas, clientes e metas, usando os componentes do shadcn, e me entrega o bundle.html

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketAlerta
SnykPassou

Perguntas

Como instalar a Web Artifacts Builder no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Web Artifacts Builder, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que precisa ter instalado?

Node 18 ou mais novo e um terminal com bash. Os scripts instalam o resto (Vite, Parcel, Tailwind, shadcn/ui) dentro do projeto. Não pede chave de API nem conta paga.

Roda no Codex e no Antigravity?

Sim. Qualquer agente que rode os dois scripts no terminal monta o projeto e gera o bundle.html. Só a parte de mostrar como artifact é do claude.ai; nos outros, você abre o arquivo no navegador.

Ela publica o site?

Não. Entrega um arquivo HTML. Hospedar, ligar domínio ou banco de dados fica fora dela.

Levar essa skill

1x web-artifacts-builderR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/anthropics/skills

Aprenda a usar

Criar site com IA: o passo a passo no Claude Code
Como eu crio site com IA pros clientes sem saber programar: no Claude Code, no Codex ou de graça no Antigravity. O passo a passo, sem cara de template.