Testada em uma tarefa realOficial da AnthropicDesign e front-end

Web Artifacts Builder

Crie uma ferramenta interativa com várias telas e um kit completo de componentes, empacotada em um único arquivo HTML.

Instale Web Artifacts Builder grátis

Deixe seu email e os passos de instalação abrem aqui mesmo: um prompt para colar na sua ferramenta de IA. Vale para as 149 skills.

Nossa nota: 4/10
Funciona em: Claude Code, Codex+6 outras
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf e mais de 60 ferramentas de IA que leem skills.
Precisa programar?: Um pouco
Tempo até o resultado: 11 min
Criado por: Anthropic
Testada em: 19 de out. de 2026

Sem a skill — As duas primeiras telas são quase iguais (mesmo título com serifa, mesmo slogan e mesma foto de esmalte); a versão da skill abre com uma caneca já no conjunto e uma lista compacta, enquanto o Claude puro abre com cards grandes de foto e kits prontos.

Com a skill — As duas primeiras telas são quase iguais (mesmo título com serifa, mesmo slogan e mesma foto de esmalte); a versão da skill abre com uma caneca já no conjunto e uma lista compacta, enquanto o Claude puro abre com cards grandes de foto e kits prontos.

A resposta curta

Web Artifacts Builder é uma skill da Anthropic que monta um projeto web de verdade com React, Tailwind CSS e shadcn/ui (blocos populares para construir interfaces web), faz o Claude construir a ferramenta ali e depois empacota tudo em um único arquivo HTML. Ela é pensada para ferramentas maiores, com várias telas, abas e janelas, e exige Node.js e disposição para deixar o Claude corrigir erros de build. Nosso veredito é 4/10: nosso construtor de conjuntos saiu correto e bonito, mas o Claude puro fez um igualmente bom com o mesmo prompt sem nenhuma etapa de build.

Ideal para: Desenvolvedores criando ferramentas maiores, com várias telas, que realmente precisam de React e de um kit de componentes pronto, não widgets de uma tela só.

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale Web Artifacts Builder em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Quando vale a pena usar

Construtor de conjuntos ou kits de produtos

Os clientes escolhem peças, quantidades e cores e veem o total com seus descontos. No nosso teste, a dona de uma loja de cerâmica recebeu um construtor de conjuntos funcionando, com seletor de esmalte para cada peça, uma prévia desenhada do conjunto e uma janela de resumo, tudo num arquivo só.

Planejador ou ferramenta de orçamento com abas

Você quer uma ferramenta com abas para receitas, despesas e metas. As abas, formulários, controles deslizantes e tabelas prontos da skill servem para ferramentas com várias telas e números que reagem uns aos outros.

Quiz com tela de resultado

Você quer que os visitantes respondam algumas perguntas e recebam uma recomendação. Você recebe um quiz de várias etapas com tela de resultado, empacotado num único arquivo para compartilhar.

Como ter um ótimo resultado

Instale (passos abaixo)
Use onde o Claude pode executar código com Node.js 18 ou mais novo e conexão com a internet. Se a ferramenta de pacotes pnpm estiver faltando, o script de configuração a instala no computador inteiro, então conte com isso.
Descreva cada tela e cada regra
Liste o que as pessoas escolhem ou digitam, o que a ferramenta precisa calcular e seus preços e ofertas exatos. Nosso prompt citou as quatro peças, os 10% de desconto com 4 ou mais e o frete grátis acima de $75, e as contas saíram certas.
Deixe o Claude configurar e resolver os erros
O Claude roda um script de configuração que cria um projeto completo com mais de 40 componentes prontos. No nosso teste, ele esbarrou num bug de macOS nesse script e corrigiu à mão, então diga ao Claude para seguir em frente se uma etapa falhar.
Empacote em um arquivo
O Claude roda o script de empacotamento para juntar tudo num único arquivo HTML. O nosso falhou duas vezes e passou na terceira tentativa depois de duas mudanças de configuração; o arquivo final ficou com cerca de 387 KB.
Abra e clique em tudo
Clique duas vezes no arquivo para abri-lo no navegador e teste pedidos reais. A skill trata testes como opcionais, então peça ao Claude para testar os totais e o layout no celular, como o nosso fez.

Este é o prompt exato com que começamos o nosso teste:

O prompt que usamos

Crie uma ferramenta interativa de 'monte seu próprio conjunto' para o site da Clay & Co: o cliente escolhe as peças (Speckled Mug, Ash Glaze Bowl, Bud Vase, Serving Platter) com quantidades, escolhe um esmalte para cada uma e vê uma prévia ao vivo do conjunto, o total, o desconto de 10% com 4 peças ou mais e o frete grátis acima de $75. Entregue como um único arquivo HTML independente em out/ que eu possa abrir no navegador.

Tudo o que ela criou

Cada peça abaixo é um resultado real do nosso teste, aberta do jeito que você abriria.

Com a skill, no celular — Com a skill, cada peça ganha sua própria linha de esmalte e uma prateleira desenhada mostra o conjunto, com total, desconto e frete num painel lateral e uma janela de resumo atrás de 'Add set to cart'.

Sem a skill, no celular — A versão do Claude puro põe um seletor de esmalte em cada card de foto, acrescenta kits prontos no estilo 'Coffee for two' e uma barra fixa no celular, e faz as mesmas contas num arquivo doze vezes menor.

Como foi a sessão

A conversa do nosso teste, resumida. Cerca de 11 minutos do primeiro prompt até o resultado final.

Você: Use a skill web-artifacts-builder para isto. Crie uma ferramenta interativa de 'monte seu próprio conjunto' para o site da Clay & Co: o cliente escolhe as peças (Speckled Mug, Ash Glaze Bowl, Bud Vase, Serving Platter) com quantidades, escolhe um esmalte para cada uma e vê uma prévia ao vivo do conjunto, o total, o desconto de 10% com 4 peças ou mais e o frete grátis acima de $75. Entregue como um único...
AI: O script de configuração esbarrou num bug de aspas do sed no macOS que deixou um arquivo perdido e a linha do favicon. Corrigi os dois à mão.
AI: Pronto: out/clay-set-builder.html. Escolhas que fiz: um esmalte por peça, com um atalho "All in" para dar o mesmo esmalte a todas as unidades de uma peça. Uma prévia ao vivo: peças desenhadas em código numa prateleira, cada uma no esmalte escolhido. As cores são aproximadas, e a página avisa. 10% de desconto com 4+ peças; frete grátis acima de $75, senão [placeholder: valor do frete]. "Add set to cart" abre uma janela de resumo com um...

O que funcionou e onde deixou a desejar

O que funcionou

As contas estavam certas e ao vivo: subtotal, 10% de desconto com 4 peças ou mais, frete grátis acima de $75 e o total, tudo atualiza a cada clique
Cada peça individual ganha sua própria linha de esmalte (Mug 1, Mug 2...) com um atalho 'All in', e uma prateleira desenhada mostra cada peça no seu esmalte
'Add set to cart' abre uma janela de resumo caprichada do kit de componentes shadcn, com um placeholder claro onde o checkout real seria conectado
Ela se ateve aos fatos e marcou o valor desconhecido do frete abaixo de $75 como placeholder

Onde deixou a desejar

Os próprios scripts da skill quebraram num Mac: a configuração instalou uma ferramenta de pacotes no sistema todo e esbarrou num bug de edição do macOS, e o empacotamento falhou duas vezes antes de dois ajustes de configuração. O Claude resolveu, mas quem não programa não conseguiria
O Claude puro, com o mesmo prompt, fez uma ferramenta igualmente boa sem nenhuma etapa de build e acrescentou coisas que esta não tem: conjuntos prontos para começar ('Coffee for two'), barras de progresso até o desconto e o frete grátis, botões de remover e um conjunto que é lembrado ao recarregar
O arquivo final tem cerca de 387 KB porque carrega uma biblioteca de componentes inteira, contra cerca de 32 KB da versão do Claude puro, que faz o mesmo trabalho

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale Web Artifacts Builder em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Prompts que funcionam

Troque as partes entre colchetes pelos seus próprios dados. Não precisa citar a skill: peça o trabalho e sua ferramenta de IA usa a skill sozinha.

Ferramenta de monte seu conjunto

Use a skill web-artifacts-builder. Crie uma ferramenta interativa de 'monte seu próprio conjunto' para minha loja: o cliente escolhe [produtos] com quantidades, escolhe um(a) [cor / acabamento] para cada um e vê uma prévia ao vivo do conjunto, o total, [regra de desconto] e [regra de frete grátis]. Entregue como um único arquivo HTML independente que eu possa abrir no navegador.

Ferramenta de orçamento com abas

Use a skill web-artifacts-builder para criar uma ferramenta de orçamento para meu [tipo de negócio] com abas para receitas, despesas e metas, como um único arquivo HTML que eu possa abrir offline.

Quiz de recomendação de produtos

Use a skill web-artifacts-builder para criar um quiz de várias etapas que faça a um cliente [3 a 5] perguntas sobre [as necessidades dele] e recomende um dos meus [produtos: liste-os], com uma tela de resultado, como um único arquivo HTML.

Calculadora de orçamentos para clientes

Use a skill web-artifacts-builder para criar uma calculadora de orçamentos para meu [serviço] com abas para [pacotes, adicionais e deslocamento] e um total corrente com imposto de [taxa]% como campo editável, como um único arquivo HTML que eu possa mandar aos clientes.

Dicas do nosso teste

Tente primeiro o Claude puro para ferramentas de uma tela. No nosso teste, o Claude puro montou o mesmo construtor de conjuntos em cerca de 20 minutos como um arquivo de 32 KB e ainda acrescentou conjuntos prontos e um carrinho que fica lembrado.
Passe cada preço, desconto e regra de frete no prompt. As duas versões do nosso teste acertaram as contas porque as regras estavam explícitas, e as duas marcaram o valor desconhecido do frete como placeholder.
Se a configuração ou o empacotamento falhar, peça ao Claude para ler o erro e corrigir. No nosso teste, o script de configuração esbarrou num bug de macOS e a etapa de empacotamento falhou duas vezes antes de funcionar.
Peça pelo nome os recursos que você quer, como kits prontos, barras de progresso até um desconto ou um botão de remover. A skill dá ao Claude componentes, não ideias, e nossa versão com a skill deixou isso de fora.
Passe suas cores e fontes, se tiver. A skill só diz ao Claude para evitar o visual comum de IA (layouts centralizados, degradês roxos, cantos arredondados idênticos, a fonte Inter); ela não conhece sua marca.
Mantenha as fotos junto do arquivo. Nosso arquivo empacotado apontava para as fotos dos produtos numa pasta ao lado, então mova tudo junto se for compartilhar.

O que você precisa: Skills no app do Claude funcionam em todos os planos, incluindo o Free, com Execução de código e criação de arquivos ativadas; o Claude Code exige Pro ou superior, Node.js 18 ou mais novo e internet para a primeira instalação (ela baixa muitos pacotes), A ferramenta de pacotes pnpm (o script de configuração tenta instalá-la no sistema todo se estiver faltando).

Como instalar

As skills seguem o padrão aberto Agent Skills, então esta não depende de uma única empresa. Escolha a ferramenta de IA que você usa. Na dúvida? A primeira aba cobre a maioria em um passo só.

Mais fácil: cole isto em sua ferramenta de IA

Instale esta skill para mim para que ela funcione em todos os projetos: rode `npx skills add https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder -g -y` no meu terminal. Se faltar o Node.js, me diga primeiro como instalar. Quando terminar, confirme que a skill foi instalada e me diga como começar a usar.

Ou faça você mesmo:

Um comando instala a skill nas ferramentas de IA do seu computador. Ele encontra as que você tem e pergunta em quais adicionar: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode e mais de 60 outras.

$npx skills add https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder -g

Você precisa ter o Node.js instalado (grátis, em nodejs.org). A opção -g deixa a skill disponível em todos os projetos.

Bom saber: É exagero para páginas simples de um arquivo só.

Libere os passos de instalação

Grátis. Deixe seu email uma vez para liberar os passos de instalação das 149 skills e receber as melhores skills novas todo mês.

Como verificamos

Confirmamos a skill na fonte original em 18 de outubro de 2026: o SKILL.md está onde deveria, os arquivos foram atualizados no último ano e a licença (Apache-2.0) permite o uso. Depois, em 19 de outubro de 2026, instalamos, usamos na tarefa acima sem mudar a skill e anotamos o que aconteceu, inclusive o que deu errado.

Perguntas frequentes

É melhor do que simplesmente pedir ao Claude?

Não para o trabalho do nosso teste. Com a skill, o Claude montou um construtor de conjuntos correto em cerca de 11 minutos, mas só depois de consertar um script de configuração quebrado e duas tentativas de empacotamento que falharam, e o arquivo saiu com cerca de 387 KB. Sem ela, o Claude puro fez uma ferramenta igualmente caprichada em cerca de 20 minutos como um arquivo de 32 KB, com extras que a versão da skill não tinha: kits prontos, barras de progresso até o desconto e o frete grátis e um conjunto que fica lembrado ao recarregar.

Preciso programar para usar o Web Artifacts Builder?

Você não escreve código, mas é uma skill técnica: o Claude instala e roda ferramentas de build de desenvolvedor nos bastidores. No nosso teste, essas ferramentas quebraram duas vezes e o Claude teve que corrigir arquivos de configuração, então você precisa deixá-lo resolver os erros.

De qual plano e ferramentas ela precisa?

Skills no app do Claude funcionam em todos os planos, incluindo o Free, com Execução de código e criação de arquivos ativadas; o Claude Code exige Pro ou superior. No seu computador, ela precisa de Node.js 18 ou mais novo, da ferramenta de pacotes pnpm (o script a instala se estiver faltando) e de internet para a primeira instalação.

Ela funciona no app do Claude ou só no Claude Code?

É uma das skills de exemplo da Anthropic que você pode ligar no app do Claude em Customize > Skills, com execução de código ativada, e também está disponível para o Claude Code. Testamos no Claude Code num Mac.

Posso compartilhar a ferramenta pronta?

Sim. O código e o estilo ficam empacotados num único arquivo HTML que abre em qualquer navegador, e ele pode ser exibido como artifact numa conversa do Claude. Ele não tem servidor, então não salva pedidos nem se conecta a um checkout real até alguém fazer essa ligação.