Testada em uma tarefa realOficial da AnthropicDesign e front-end

Frontend Design

Uma página web cujas cores, fontes e layout vêm do seu negócio, não do modelo de IA de sempre.

Instale Frontend Design 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: 7/10
Funciona em: Claude, ChatGPT+7 outras
Claude Code, Claude app, Codex, ChatGPT, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf e mais de 60 ferramentas de IA que leem skills.
Precisa programar?: Não
Tempo até o resultado: 25 min
Criado por: Anthropic
Testada em: 19 de out. de 2026

Mesmo pedido para um acampamento infantil de programação. Sem a skill: a página creme, o robô de desenho animado e os botões laranja que todo site de acampamento tem. Com ela: um robô desenhista sobre uma base de corte que as crianças programam direto na página.

Com a skill — Mesmo pedido para um acampamento infantil de programação. Sem a skill: a página creme, o robô de desenho animado e os botões laranja que todo site de acampamento tem. Com ela: um robô desenhista sobre uma base de corte que as crianças programam direto na página.

A resposta curta

Frontend Design é a skill oficial da Anthropic que faz o Claude escrever um plano de design, compará-lo com uma lista de visuais comuns de IA e depois montar e criticar a página. Serve para pequenos empresários, profissionais de marketing e fundadores que querem uma página inicial ou landing page com personalidade própria. Nosso veredito é 7/10: em quatro testes contra o Claude puro com o mesmo prompt, ela venceu com folga numa página de acampamento infantil com uma ideia de design tirada do tema, enquanto nos outros três o Claude puro foi igualmente bom.

Ideal para: Páginas iniciais, landing pages e páginas de eventos que precisam de um visual próprio, não do modelo de IA de sempre.

Quer esse resultado no seu próprio trabalho?

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

Quando vale a pena usar

Página inicial para uma pequena loja

Você vende produtos artesanais ou de nicho e todo tema parece igual. Você recebe uma página inicial em um arquivo cujas cores e layout vêm do seu ofício, como a página nas cores dos esmaltes com uma prateleira de produtos que ela montou para uma loja de cerâmica no nosso teste.

Landing page para uma oferta

Você está lançando um curso, serviço ou evento e precisa de uma página que explique e gere o clique. Você recebe uma página focada, com texto simples e específico e botões que dizem exatamente o que acontece.

Renove um site com cara de modelo

Sua página atual funciona, mas parece com a de todo mundo. Cole a página e receba um novo plano de design e código que mantêm seu conteúdo, mas tiram a cara de modelo pronto.

Como ter um ótimo resultado

Instale (passos abaixo)
É pura orientação, sem scripts, então não há mais nada para configurar. Depois de ativada, o Claude a usa sempre que você pede uma página ou interface.
Passe seus dados e fotos reais
Cole seus produtos, preços, políticas e a frase de que você gosta, e anexe suas fotos. No nosso teste, o Claude estudou todas as fotos primeiro e tirou as cores dos esmaltes reais da loja.
Leia o plano de design
Antes de qualquer código, o Claude escreve um plano curto: de 4 a 6 cores com nome, fontes, um esboço do layout e princípios, e depois compara com visuais comuns de IA. No nosso teste, a primeira ideia foi creme, serifa e terracota, e ele trocou por azul-marinho Midnight, verde-cinza e aveia.
Deixe ele montar e conferir capturas de tela
O Claude monta a página e, onde consegue tirar capturas de tela, revisa as versões de desktop e celular e remove excessos. No nosso teste, ele fez três rodadas de capturas e cortou uma nota cortada, uma foto repetida e um padrão de bolinhas.
Preencha os placeholders e conecte
Procure [placeholder] na página e preencha datas, links e tudo o que ele não sabia. Depois entregue o arquivo a quem cuida do seu site, porque o carrinho e o formulário da newsletter não estão conectados a nada.

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

O prompt que usamos

Crie a página inicial da minha loja de cerâmica Clay & Co como um único arquivo HTML responsivo, out/index.html (CSS e JS dentro do arquivo). Inclua: um hero, os mais vendidos com preços, como cada peça é feita, as oficinas, avaliações, um cadastro na newsletter e um rodapé. Quero que pareça uma marca artesanal premium, não um modelo.

Tudo o que ela criou

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

Com a skill, a página inteira: uma cor de marcador por semana, o dia do acampamento desenhado como uma barra de tempo e um formulário de inscrição ao lado de um recibo que vai se atualizando.

Como foi a sessão

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

Você: Crie a página inicial da minha loja de cerâmica Clay & Co como um único arquivo HTML responsivo (CSS e JS dentro do arquivo). Inclua: um hero, os mais vendidos com preços, como cada peça é feita, as oficinas, avaliações, um cadastro na newsletter e um rodapé. Quero que pareça uma marca artesanal premium, não um modelo. [Ficha de dados e 8 fotos da loja anexadas.]
AI: O briefing está claro: uma loja de cerâmica premium de uma pessoa só, vendendo para compradores e participantes de oficinas. Vou escrever um plano de design antes de qualquer código.
AI: Primeiro instinto: fundo creme, serifa de alto contraste, destaque terracota tirado da foto da tigela, uma grade de cards de produto. Esse é o primeiro e o quarto visual da lista de padrões de IA da skill, então vou mudar. As cores agora vêm dos seus três esmaltes: Midnight #1C2431, Ash Green #7D8A72, Speckled Oat #D9CFBD, mais um tom cinza-claro para a página. Fontes: Alegreya para títulos e preços, Alegreya Sans para o texto.
AI: A única coisa ousada: "Handmade stoneware for slow mornings." composta letra por letra, cada letra levemente inclinada e diferente a cada visita, porque cada peça é um pouco diferente. Os mais vendidos ficam numa linha de prateleira, não em cards. Números só nas cinco etapas de produção.
AI: Desisti de um seletor de esmalte por produto: seus dados não dizem em quais esmaltes cada peça vem, então ele inventaria informação.
AI: Pelas capturas de tela, removi uma nota lateral cortada no hero, uma foto de vaso duplicada ao lado da avaliação e um padrão de pontos que parecia bolinhas; corrigi as alturas das imagens e deixei a inclinação das letras mais forte.
AI: Pronto: out/index.html. Datas das oficinas, o que levar, frequência da newsletter, o link da Etsy e a página de frete estão marcados como [placeholder]. As oficinas são reservadas por e-mail, já que não há sistema de agendamento. O atacado está no rodapé. Deixei de fora o glazes.jpg porque ele mostra muitas cores de esmalte, não as suas três. Uns 25 minutos.

O que funcionou e onde deixou a desejar

O que funcionou

Na página do acampamento infantil, ela colocou um robô desenhista sobre uma base de corte que as crianças podem programar (repetir, girar, cor da caneta), o que leva direto ao depoimento do pai sobre explicar loops. O Claude puro fez a página creme de sempre com um robô de desenho animado.
Na página da feira noturna, a primeira versão transformou as 2,000 lanternas de papel da feira em um dossel sobre as barracas, uma ideia que o Claude puro não teve.
Ela pega o próprio primeiro instinto: na loja de cerâmica, trocou o visual de IA creme e terracota por cores tiradas dos nomes reais dos esmaltes da loja.
Ela foi honesta com os fatos em todos os testes, marcando detalhes ausentes como [placeholder] em vez de inventá-los.

Onde deixou a desejar

O primeiro hero da feira noturna ficou poluído: um título gigante sobre uma parede de lanternas. Depois de uma rodada de feedback as duas versões ficaram lindas, e a do Claude puro foi no mínimo tão boa quanto.
Em um dashboard de vendas para uma loja de velas, a versão do Claude puro foi igualmente clara e útil.
Na loja de cerâmica, a página mais sóbria trazia menos conteúdo que a versão do Claude puro.
Formulários, agendamento e checkout são demonstrações de front-end sem conexão real.

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale Frontend Design 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.

Página inicial para uma marca artesanal

Crie a página inicial da minha [tipo de loja] [nome do negócio] como um único arquivo HTML responsivo. Inclua: um hero, os mais vendidos com preços, [como é feito / sobre quem faz], [oficinas / serviços], avaliações, um cadastro na newsletter e um rodapé. Quero que pareça uma marca artesanal premium, não um modelo. Use só estes dados e marque o resto como [placeholder]: [cole os dados]. Fotos: [anexe].

Landing page para uma oferta

Crie uma landing page para meu [produto, curso ou serviço]. É para [público] e a única coisa que eles devem fazer é [agendar uma conversa / comprar / se cadastrar]. Aqui estão meu texto e meus preços reais: [cole o texto]. Me mostre o plano de design antes de escrever código.

Redesenhe uma página existente

Redesenhe esta página para ela parar de parecer um modelo genérico. Mantenha meu conteúdo e as cores da minha marca [códigos hex], mas repense o layout e a tipografia. Esta é a página atual: [cole o HTML ou anexe uma captura de tela].

Portfólio com ponto de vista

Crie um portfólio de uma página para meu trabalho de [fotografia / ilustração / design de interiores] com uma pegada [editorial / calma / divertida] forte. Use estes projetos: [lista com uma linha cada]. Me mostre as cores, as fontes e um esboço do layout antes de qualquer código.

Dicas do nosso teste

Dê a ela as palavras do seu ofício: materiais, ferramentas, nomes de produtos, de esmaltes ou de tecidos. A skill tira suas escolhas marcantes do universo do seu tema, e foi assim que uma página de cerâmica ganhou cores a partir de três nomes de esmaltes.
Diga para usar só seus dados e marcar o resto como [placeholder]. No nosso teste, isso a impediu de inventar em quais esmaltes cada produto vem.
Peça para ver o plano antes do código. Mudar uma lista de cores e fontes é muito mais fácil do que mudar uma página pronta.
Se você já tem cores, fontes ou um visual de marca que ama, diga. A skill instrui o Claude que as palavras do seu briefing sempre vencem, inclusive sobre a lista de visuais a evitar.
Espere uma ideia ousada e o resto sóbrio. Se quiser mais seções, como uma faixa de benefícios ou um bloco de atacado, peça pelo nome.
Confira a ideia ousada no celular. No nosso teste, as letras levemente inclinadas do hero eram sutis a ponto de parecerem um defeito de fonte, então peça ao Claude para reforçar ou tirar se não parecer intencional.

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. Esta skill é só orientação, sem scripts nem software extra..

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/frontend-design -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/frontend-design -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: Também disponível via /plugin marketplace add anthropics/skills e depois /plugin install example-skills@anthropic-agent-skills.

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

Preciso saber programar para usar a skill Frontend Design?

Não. Você descreve o negócio e a página, e o Claude escreve o HTML, o CSS e qualquer script pequeno. Você vai precisar de um jeito de colocar a página no ar ou de entregá-la a quem cuida do seu site, porque o resultado é uma página, não uma loja funcionando.

De qual plano ou 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. A skill em si é só orientação, sem scripts nem software extra.

Ela funciona no Claude.ai ou só no Claude Code?

Nos dois. No Claude.ai e no app desktop, é uma das skills de exemplo da Anthropic que você liga em Customize > Skills, com execução de código ativada. Ela também funciona no Claude Code (passos de instalação abaixo).

É melhor do que simplesmente pedir ao Claude?

É mais diferente do que melhor. Com o mesmo prompt, o Claude puro fez uma página caprichada no visual de fundo creme, serifa e terracota que a skill aponta como o sinal mais comum de IA; com a skill, o Claude pegou essa mesma primeira ideia no plano e trocou para cores dos esmaltes da loja, uma prateleira de produtos em vez de cards e menos enfeites. A página do Claude puro tinha mais conteúdo, então escolha a skill quando parecer diferente for o mais importante.

Posso fazê-la usar as cores e fontes que minha marca já tem?

Sim. A skill instrui o Claude a seguir seu briefing à risca em tudo o que você definir e a ter liberdade criativa só nas partes que você deixar em aberto. Passe seus códigos hex e nomes de fontes logo de início.