Superdesign skill

O Claude desenha versões da tela, do slide ou do post num canvas online, no estilo do seu projeto, pra você comparar, escolher e ajustar.

por superdesigndev

instalações: 11,2 mil
estrelas no GitHub: 904
No skills.sh desde: janeiro de 2026
Licença: MIT

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

superdesigndev
superdesign
O Claude desenha versões da tela, do slide ou do post num canvas online, no estilo do seu projeto, pra você comparar, escolher e ajustar.11,2 mil instalações, grátis

O que ela faz

A skill liga o Claude ao Superdesign, um agente de design que roda pela linha de comando (npx @superdesign/cli). Ele cria telas, fluxos de várias páginas, design systems, componentes, apresentações e artes como pôster, capa, post e anúncio. Tudo aparece num canvas em superdesign.dev, com link pra acompanhar ao vivo.

Em projeto com código, a skill primeiro analisa o repositório e grava o contexto em .superdesign/init/: componentes, layouts, rotas, tema e páginas. Assim o desenho sai no estilo que o site já tem. Sem código, o Claude pergunta o que você quer construir, pra quem e com que referências.

Dá pra escolher o modelo de IA de cada desenho, comparar modelos lado a lado, copiar a linguagem visual de um site pela URL, gerar imagem ou vídeo de apoio e exportar apresentação em PPTX editável. O projeto fica salvo, e a sessão seguinte continua de onde parou.

Nas palavras de quem fez

Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models. Use whenever the user wants to design…

superdesigndev, no SKILL.md

Quando usar

Redesenhar a página de vendas antes de mexer no código
Ver três caminhos visuais pra mesma tela e escolher um
Montar um deck de apresentação com o visual da marca
Fazer capa, post ou anúncio no mesmo estilo do site
Tirar o design system de um site de referência

Depois de instalar, é só pedir assim

Redesenha a home desse projeto no Superdesign com três variações e me manda o link do canvas
Puxa o estilo do site dessa URL e monta um design system pro meu produto
Cria uma apresentação de 10 slides sobre a minha mentoria com o visual da marca

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
SocketAlerta
SnykAlerta

Perguntas

Como instalar a Superdesign 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 Superdesign, 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 superdesign precisa pra funcionar?

De uma conta no Superdesign: o Claude faz o login pelo navegador antes do primeiro comando. Cada geração gasta créditos da conta, por isso a skill só gera mais variações depois que você escolhe o que quer. Também precisa do Node, pra rodar o npx, e de um agente que execute comandos no terminal.

Roda no Codex e no Antigravity?

Roda no Codex e em outros agentes que executam comandos no terminal, como o Antigravity, porque tudo passa pela CLI do Superdesign. No chat comum do ChatGPT, sem ferramentas, não funciona.

Precisa ter um projeto com código?

Não. Sem código, o Claude pergunta o que você quer, o público e as referências, e desenha do zero. Pôster, post, apresentação e imagem avulsa nem passam pela análise do repositório.

Levar essa skill

1x superdesignR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/superdesigndev/superdesign-skill

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.