Awwwards skill

De um pedido curto, tipo "faz meu portfólio, meu nome é Ana", o Claude entrega um site com conceito, tipografia, animação e QA no navegador.

por juliobsz

instalações: 1.300
estrelas no GitHub: 951
Licença: MIT

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

juliobsz
awwwards
De um pedido curto, tipo "faz meu portfólio, meu nome é Ana", o Claude entrega um site com conceito, tipografia, animação e QA no navegador.Auditada1.300 instalações, grátis

O que ela faz

A skill põe o Claude no papel de diretor de criação, designer e dev ao mesmo tempo, com a régua dos sites que ganham Site do Dia no Awwwards. Sem questionário: ele deduz o público e o objetivo do site, anota as suposições e decide sozinho.

Gera três conceitos de áreas diferentes, dá nota e escolhe um; define paleta, fontes, grade e jeito de animar num DESIGN.md; e constrói em Next.js (ou Astro, quando a animação é o produto) com GSAP, Lenis e, se o conceito pedir, WebGL, com página interna e 404 desenhada.

Depois testa a versão de produção: tira prints no celular e no desktop, mede carregamento, acessibilidade, teclado e hover, e chama um crítico separado pra dar nota. Repete até toda nota chegar a 8 ou mais, e só publica com o seu ok.

Nas palavras de quem fez

Build award-caliber websites from a one-line prompt such as "make me a portfolio, my name is Ana". Uses the bar of sites that win Awwwards Site of the Day as a…

juliobsz, no SKILL.md

Quando usar

Fazer um portfólio pessoal que chame atenção
Criar o site de um estúdio, agência ou lançamento de marca
Montar uma landing page que precisa impressionar
Refazer um site que ficou com cara de template
Pôr animação de rolagem e transição entre páginas num projeto que já existe

Depois de instalar, é só pedir assim

Faz meu portfólio, meu nome é Carla e sou fotógrafa de casamento
Cria o site de lançamento da minha marca de café com nível de site premiado
Usa a régua do Awwwards pra refazer a home desse projeto Next.js, sem trocar a stack

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
SocketPassou
SnykPassou

Perguntas

Como instalar a Awwwards 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 Awwwards, 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 a awwwards skill precisa pra funcionar?

De Node 20 ou mais novo, e do Playwright e do axe-core no projeto pra tirar prints e checar acessibilidade; o Claude instala junto. Não pede chave de API. Se houver ferramenta de gerar imagem, ela usa; se não, usa arte feita em código ou fotos do Unsplash marcadas pra trocar.

Roda no Codex e no Antigravity?

Roda em qualquer agente que executa comandos. O crítico separado depende de o agente abrir subagentes; sem isso, a própria skill manda o Claude dar a nota olhando só os prints.

Ela inventa prêmio, cliente ou número?

Não. O que faltar (profissão, projetos, clientes) vira suposição marcada como provisória e listada no fim pra você trocar. Pra só dar nota num site sem mexer nele, o autor indica outra skill, a /jury.

Levar essa skill

1x awwwardsR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/juliobsz/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.