← Receitas de IA do diaTrabalho✓ Verificado 28 de ago. de 2026

Crie um web app funcional com um único prompt usando Claude Code e Fable

Descreva sua ideia em uma frase - receba o código pronto e um guia interativo passo a passo em 10 minutos.

  1. 1.Instale o Node.js (versão LTS) do site oficial, se ainda não o tiver. Verifique a instalação com o comando node -v no terminal - deve aparecer a versão.

    Se o serviço não estiver disponível na sua região diretamente, use VPN na etapa de download.

    Node.js ↗
  2. 2.Instale o Claude Code globalmente via npm. Abra o terminal e execute o comando de instalação, depois faça a autenticação seguindo as instruções no console.

    Claude Code é gratuito para assinantes Claude Pro e Max. Sem assinatura, será necessário um plano pago - veja a seção de custos.

    Claude Code ↗Sobre a ferramenta
    Prompt
    npm install -g @anthropic-ai/claude-code
    O que este prompt fazO comando instala a ferramenta CLI Claude Code globalmente. Não precisa alterar nada - execute como está no terminal.
  3. 3.Crie uma pasta vazia para o projeto, entre nela no terminal e inicie o Claude Code com o comando claude. No primeiro acesso, siga as instruções na tela para vincular sua conta Anthropic.

    Se o serviço não estiver disponível na sua região, será necessário VPN para autenticação.

    Claude Code ↗Sobre a ferramenta
    Prompt
    mkdir my-app && cd my-app && claude
    O que este prompt fazCria a pasta my-app, entra nela e inicia uma sessão interativa do Claude Code. O nome da pasta pode ser trocado por qualquer outro.
  4. 4.Cole o prompt abaixo na sessão do Claude Code. Ele criará a estrutura do projeto, a lógica e os arquivos em um único passo.

    Claude Code criará os arquivos na pasta atual automaticamente. Não é preciso copiar o código manualmente.

    Claude Code ↗Sobre a ferramenta
    Prompt
    Build a single-page web app called «[APP_NAME]» that does the following: [DESCRIBE_WHAT_IT_DOES]. Use vanilla HTML, CSS and JavaScript in one index.html file. Make the UI clean and responsive. Include a heading «[APP_NAME]», an input form, and a results area. Add basic input validation.
    O que este prompt fazO prompt em inglês pede ao Claude Code para criar um web app de página única. Substitua [APP_NAME] pelo nome do seu app (por exemplo, Task Tracker) e [DESCRIBE_WHAT_IT_DOES] pela descrição do que o app faz (por exemplo, lets a user add tasks, mark them done and delete them). Mantenha o restante como está - Claude criará o arquivo index.html na pasta atual.
  5. 5.Acesse o site do Fable, clique em Get Started e faça login com Google ou email. O plano gratuito permite criar guias públicos.

    Não insira dados pessoais ou de pagamento em serviços de terceiros sem necessidade. Fable é usado para gravação de tela.

    Fable ↗
  6. 6.Inicie a gravação de tela no Fable, abra o arquivo index.html no navegador (com duplo clique), demonstre o funcionamento do app - insira dados, mostre o resultado. Pare a gravação e publique o guia, copiando o link.

    Antes de gravar, feche abas com informações pessoais - elas podem aparecer na gravação.

    Fable ↗
💰 Quanto custa acompanharpreços em 2026-08
  • grátisNode.jsTotalmente gratuito para download e uso.
  • assinaturaClaude CodeRequer assinatura Claude Pro ($20/mês) ou Max ($100/mês); sem assinatura, é possível usar via API com pagamento por tokens. Não há plano gratuito.
  • grátisFableO plano gratuito permite criar guias interativos públicos; há planos pagos para equipes.
Experimente e seja o primeiro a marcar

Por que hoje

2
vídeos de criadores em 48 h
2
canais de origem
6,2 mil
total de visualizações
Nate Herk | AI AutomationyoutubeCanal no catálogo
Борис опятьtelegramCanal no catálogo
Anthropic Docsweb
Fableweb
Anthropic Pricingweb

Serviços de IA mudam rápido - interfaces e limites gratuitos podem diferir do descrito.