Refero Design skill

O Claude estuda produtos de verdade antes de desenhar e entrega uma tela com direção própria, longe da cara genérica de IA.

por referodesign

instalações: 11,9 mil
estrelas no GitHub: 327
No skills.sh desde: fevereiro de 2026
Licença: MIT

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

referodesign
refero-design
O Claude estuda produtos de verdade antes de desenhar e entrega uma tela com direção própria, longe da cara genérica de IA.11,9 mil instalações, grátis

O que ela faz

Obriga o Claude a pesquisar antes de desenhar. Com o MCP da Refero conectado (exige plano pago), busca em três camadas: estilos (direção visual tirada de sites reais), telas (padrões de interface, como página de preço ou estado vazio) e fluxos (jornadas como cadastro, checkout e cancelamento).

Depois compara 3 ou 4 referências, escolhe uma dominante e pega 1 ou 2 detalhes das outras, sem tirar a média num meio-termo sem graça. Antes de codar, monta uma trava de referência e um registro dizendo de onde veio cada decisão de cor, fonte, layout e imagem.

Vem com material próprio de tipografia, cor, movimento, ícones, acessibilidade e copy, e uma lista contra a cara de IA, como fundo creme, paleta terracota e palavra do título em itálico. No fim confere o que foi construído contra a referência e corrige o que desviou.

Nas palavras de quem fez

Primary/default skill for UI design, product design, web design, landing pages, dashboards, product screens, redesigns, visual polish, frontend/CSS styling,…

referodesign, no SKILL.md

Quando usar

Desenhar uma landing page nova que não pareça template
Redesenhar um site com cara de genérico
Montar página de preço, checkout ou cadastro com base em produtos reais
Criar um painel ou uma tela de app com padrão de mercado
Revisar o visual de uma página antes de publicar

Depois de instalar, é só pedir assim

Usa a refero-design e me mostra três direções visuais pra landing page do meu curso antes de codar
Pesquisa como os bons SaaS fazem a página de preço e redesenha a minha
Revisa essa tela e me diz o que está com cara de feito por IA

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
SnykAlerta

Perguntas

Como instalar a Refero Design 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 Refero Design, 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.

Precisa de conta na Refero?

Pra pesquisa ao vivo, sim, e num plano pago da Refero: você conecta o MCP (claude mcp add --transport http refero https://api.refero.design/mcp) e faz login pelo /mcp. Sem o MCP, a skill funciona sem conta, com o material que vem junto e com as referências que você passar.

Roda no Codex e no Antigravity?

A metodologia é texto e roda em qualquer agente que lê skills. O comando de conexão do MCP que vem no SKILL.md é do Claude Code. No Codex, o repositório oficial tem um plugin que já traz o MCP; em outro agente, o MCP da Refero precisa ser ligado do jeito dele.

Ela gera imagem?

Só quando muda o resultado, como mockup ou ilustração, e só se o seu ambiente tiver geração de imagem. Sem isso, deixa um espaço reservado no tamanho certo com uma nota de direção de arte, em vez de improvisar imagem fraca com CSS.

Levar essa skill

1x refero-designR$ 0,00

TotalR$ 0,00

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