Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Web Design Engineer skill
Cria ou redesenha páginas, dashboards, protótipos e slides no navegador com HTML, CSS, JavaScript e React
- instalações
- 8.700
- estrelas no GitHub
- 13,3 mil
- No skills.sh desde
- abril de 2026
- Licença
- MIT
Atualizada no GitHub em 25 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
Nas palavras de quem fez
Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI…
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 Web Design Engineer 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 Web Design Engineer, 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.
Levar essa skill
1x web-design-engineerR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/conardli/garden-skills
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.
Na mesma prateleira
Ver as 1.414 skills do corredorsuperdesigndev
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átisdiffusionstudio
text-
Você descreve a animação e o Claude entrega o arquivo Lottie pronto: logo animado, loader, título, gráfico ou chamada pra rede social.10,7 mil instalações, grátisto- lottie Figma
figma-
O Claude cria e ajusta telas, componentes e variáveis direto no seu arquivo do Figma, seguindo o padrão que o arquivo já tem.OficialAuditada9.100 instalações, grátisuse agents365-ai
drawio-
Você descreve o sistema ou aponta o código e recebe um arquivo .drawio que abre e se edita no draw.io, junto com a imagem pronta.Auditada9.000 instalações, grátisskill bahayonghang
drawio
Você pede o diagrama em português, o agente escreve a especificação em YAML e entrega o .drawio editável junto com a imagem pronta.8.500 instalações, grátiscoleam00
excalidraw-
O diagrama sai num arquivo do Excalidraw e mostra o raciocínio pela forma, com exemplos reais dentro, em vez de um monte de caixinhas com nome.8.500 instalações, grátisdiagram wondelai
ios-
O Claude desenha e revisa telas de app de iPhone e iPad do jeito que a Apple recomenda, com nota até 10 e o que falta pra chegar lá.Auditada8.200 instalações, grátishig- design secondsky
tailwind-
O Claude configura o Tailwind v4 com shadcn/ui na ordem certa e evita os erros conhecidos de cor, de tema e de build.Auditada8.100 instalações, grátisv4- shadcn
Mais da loja conardli
Ver a loja conardliconardli
web-
Transforma um artigo ou roteiro numa apresentação web 16:9 que parece vídeo, com narração opcional5.800 instalações, grátisvideo- presentation gpt-
Gera e edita imagens com o GPT Image 2 pela API compatível com OpenAI ou como guia de prompt pro agente5.700 instalações, grátisimage- 2 kb-
Busca e responde perguntas numa pasta local de documentos, lendo PDF e Excel com pdfplumber e pandasAuditada5.000 instalações, grátisretriever beautiful-
Transforma URL, PDF, DOCX, Markdown, texto ou screenshot em artigo HTML de arquivo único, bonito e offline3.700 instalações, grátisarticle