Awesome Design MD skill

O Claude escolhe o estilo de uma marca grande que combina com o seu produto e redesenha as telas com as cores, fontes e espaçamentos dela.

por wearescientist

instalações: 658
estrelas no GitHub: 9
No skills.sh desde: maio de 2026
Licença: MIT

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

wearescientist
awesome-design-md
O Claude escolhe o estilo de uma marca grande que combina com o seu produto e redesenha as telas com as cores, fontes e espaçamentos dela.Auditada658 instalações, grátis

O que ela faz

A skill traz uma biblioteca de arquivos DESIGN.md, cada um descrevendo o visual de uma empresa conhecida: Apple, Stripe, Linear, Vercel, Notion, Spotify, Coinbase, Binance, xAI, Ferrari, Nike e outras. Quando o pedido é desenhar ou melhorar uma tela, o Claude escolhe um estilo e lê só o arquivo dele, sem carregar a biblioteca inteira.

Se você não diz qual estilo quer, ele olha o tipo de produto e escolhe: Linear, Stripe ou Vercel pra painel de SaaS; Apple, Airbnb ou Notion pra produto de consumo; Coinbase ou Wise pra finanças; Ferrari, Tesla ou Nike pra página de marca. Antes de mexer, avisa qual escolheu.

O estilo entra como guia de layout, cor, tipografia, espaçamento, sensação de interação e acabamento dos componentes, com os valores concretos do arquivo. Em app que já existe, o visual evolui sem quebrar os fluxos, e um DESIGN.md próprio do projeto é respeitado.

Nas palavras de quem fez

Select and apply a fitting Awesome Design MD `DESIGN.md` style for frontend/UI work. Use when the user asks to design UI, redesign a page, beautify a frontend,…

wearescientist, no SKILL.md

Quando usar

Dar cara profissional a um painel que ficou com jeito de template
Redesenhar a landing page com o visual de uma marca que você admira
Montar um dashboard de SaaS limpo, no estilo Linear ou Stripe
Acertar hierarquia, cores e espaçamento de uma tela que já funciona

Depois de instalar, é só pedir assim

Redesenha a página de vendas do meu curso no estilo da Apple
Melhora o visual deste painel administrativo, escolhe o estilo que combinar melhor
Monta a tela inicial do meu app de finanças com cara de Coinbase

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 Awesome Design MD 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 Awesome Design MD, 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 awesome-design-md skill precisa pra funcionar?

Nada além dela: a biblioteca de estilos vem junto, dentro da pasta da skill, e é lida de lá. Não pede chave de API, conta paga nem programa extra. Basta ter o código da tela que você quer mudar.

Ela copia o site da marca?

Não. Ela usa o DESIGN.md da marca como guia de cor, fonte, espaçamento e componentes, e mantém a acessibilidade, a quantidade de informação e as convenções do seu projeto. Também não copia o arquivo de estilo pro seu projeto, a menos que você peça.

Roda no Codex e no Antigravity?

É texto e arquivos de referência, sem nada preso ao Claude Code. Um agente que lê SKILL.md e abre arquivos consegue seguir. Os comandos de exemplo da skill são de PowerShell, mas qualquer jeito de ler arquivo serve.

Levar essa skill

1x awesome-design-mdR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/wearescientist/awesome-design-md

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.