Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Skills de design e UI/UX pro Claude Code
As skills que fazem o agente parar de entregar tela com cara de template: hierarquia, tipografia, cor, animação e o jeito de cada design system.
Pra começar: Frontend Design, UI UX Pro Max, Impeccable, Claude Design e Web Design Guidelines (por que essas cinco).
1.414 skills neste corredorAtualizada em 26 de outubro de 2026
Design e interface
Anthropic
frontend-
Sua landing page ou seu app sai com identidade própria, tirada do assunto do seu negócio, e não com aquela cara de site gerado por IA.OficialAuditada1 milhão de instalações, grátisdesign Vercel Labs
web-
Você aponta os arquivos do site e recebe a lista do que fere as boas práticas de interface, com o arquivo e a linha de cada problema.Oficial784,3 mil instalações, grátisdesign- guidelines leonxlnx
design-
O agente parte de direções de arte tiradas de 247 sites de galerias de design, monta a página com a ideia do seu negócio e confere o resultado em print.677 mil instalações, grátistaste- frontend high-
Sua landing page sai com cara de site premiado, sem a fonte, o ícone e a grade de três colunas que denunciam um template.Auditada458,8 mil instalações, grátisend- visual- design redesign-
Ela só aponta pra design-taste-frontend, que audita a página no navegador, mantém o conteúdo e o que funciona e refaz o visual com antes e depois.Auditada458,7 mil instalações, grátisexisting- projects minimalist-
O Claude sai do visual genérico de SaaS e entrega uma interface enxuta, com tipografia de revista, bordas finas e cor só onde ela tem função.Auditada425,1 mil instalações, grátisui nextlevelbuilder
ui-
O Claude escolhe estilo, cores e fontes pelo tipo do seu produto e monta a tela seguindo regras de acessibilidade e de uso no celular.Auditada414,9 mil instalações, grátisux- pro- max gpt-
Landing page sem cara de feita por IA: título em até três linhas, grade sem buraco, seções que se mexem no scroll e chamada forte pra compra no fim.Auditada399,5 mil instalações, grátistaste industrial-
Telas com cara de manual técnico ou terminal militar: título gigante, dados em fonte mono, grade aparente e uma cor de destaque só.Auditada396,9 mil instalações, grátisbrutalist- ui stitch-
Escreve um DESIGN.md com regras de tipografia, cor e layout pro Google Stitch gerar as telasAuditada394,9 mil instalações, grátisdesign- taste brandkit
Uma imagem com a marca inteira, como num estudo de identidade: logo com significado, paleta, tipografia, mockups e frase de marca.Auditada390,7 mil instalações, grátisimagegen-
Gera uma imagem horizontal por seção pra definir a direção visual de landing pages e sites de marketing380,1 mil instalações, grátisfrontend- web imagegen-
Gera telas e fluxos de apps de celular como imagens, pra definir a direção de arteAuditada373,8 mil instalações, grátisfrontend- mobile pbakaus
impeccable
Você pede uma landing page, um painel ou um ajuste e recebe a tela pronta, com ponto de vista de design e conferida nos tamanhos de tela em que vai ao ar.360,7 mil instalações, grátisdesign-
Versão 1 do taste-skill, mantida pra quem depende do comportamento original de direção de arteAuditada330,3 mil instalações, grátistaste- frontend- v1 emilkowalski
review-
Cada animação do seu site passa por dez critérios e sai numa tabela de antes e depois, com veredito claro: aprova ou barra.Auditada256 mil instalações, grátisanimations apple-
Gaveta, carrossel e botão que respondem no toque, seguem o dedo e podem ser pegos no meio do movimento, como num iPhone.Auditada244 mil instalações, grátisdesign animation-
Viu um efeito num site e não sabe como chama? Descreve do seu jeito e recebe o termo exato pra pedir certo à IA.Auditada238,6 mil instalações, grátisvocabulary improve-
Você descobre quais animações deixam o site lento ou estranho e recebe um plano de correção tão detalhado que até um modelo mais barato executa.Auditada223,6 mil instalações, grátisanimations find-
Você recebe uma lista curta de onde a animação ajuda de verdade, com curva e duração exatas, e outra de onde ela só atrapalharia.Auditada208,5 mil instalações, grátisanimation- opportunities prototype
Monta várias versões bem diferentes de um pedaço de interface num seletor visual pra comparar ao vivoAuditada173,9 mil instalações, grátisanimate
Botão, menu, modal e aviso ganham movimento que parece certo, com tempo e curva medidos, e o que não deve animar fica parado.Auditada172,2 mil instalações, grátisuizze
uizze-
Cria e melhora UI/UX com o código do projeto e exemplos reais de apps e design systems do uizze.comAuditada144 mil instalações, grátisui arvindrk
extract-
Você passa o endereço de um site e o Claude devolve a paleta, as fontes e as escalas dele em arquivos prontos pra começar o seu projeto.130,6 mil instalações, grátisdesign- system shadcn-ui
shadcn
O Claude monta formulários, painéis e chats com os componentes certos do shadcn/ui, nas cores e no estilo que o seu projeto já usa.123 mil instalações, grátiscanvas-
Uma peça visual de uma página, pôster ou arte, com composição pensada e pouco texto, entregue em PNG ou PDF junto com a filosofia que a guiou.OficialAuditada122,2 mil instalações, grátisdesign brand-
O Claude deixa seus slides, documentos e páginas com a cara da Anthropic: as cores certas, Poppins nos títulos e Lora no texto.OficialAuditada109,9 mil instalações, grátisguidelines higgsfield-ai
higgsfield-
Cria sistemas de identidade visual pela CLI da Higgsfield: paleta, logo em SVG, tipografia e aplicações101,6 mil instalações, grátisbrandkit theme-
Você escolhe um tema num catálogo visual e o Claude aplica as mesmas cores e fontes em todo o material, cuidando do contraste e da leitura.OficialAuditada95,3 mil instalações, grátisfactory polish
Faz o acabamento final da interface: alinhamento, espaçamento, consistência e detalhesAuditada85,2 mil instalações, grátiscritique
Avalia um design pela ótica de UX: hierarquia visual, arquitetura da informação e carga cognitiva82,6 mil instalações, grátisaudit
Audita acessibilidade, performance, temas e responsividade e entrega relatório por prioridadeAuditada81,9 mil instalações, grátisadapt
Adapta designs a outros tamanhos de tela, dispositivos e plataformas, com breakpoints e toqueAuditada81,7 mil instalações, grátisanimate
Acrescenta animações e microinterações com propósito a uma tela para melhorar a usabilidadeAuditada81,7 mil instalações, grátisclarify
Melhora textos confusos de interface: mensagens de erro, rótulos, botões e instruçõesAuditada81,2 mil instalações, grátiscolorize
Põe cor com critério em interfaces monocromáticas, mantendo hierarquia e acessibilidadeAuditada80,9 mil instalações, grátisbolder
Deixa designs seguros demais mais ousados, com impacto visual sem perder a usabilidadeAuditada80 mil instalações, grátisdelight
Acrescenta personalidade e pequenos momentos de encanto que deixam a interface memorávelAuditada79,8 mil instalações, grátisdistill
Simplifica designs tirando a complexidade desnecessária e deixando só o essencialAuditada79,5 mil instalações, grátisquieter
Suaviza designs agressivos ou carregados demais, baixando a intensidade sem perder a qualidadeAuditada78,7 mil instalações, grátisgreensock
gsap-
Ensina o agente a usar o núcleo do GSAP: tweens, easing, stagger e media queries responsivasAuditada75,1 mil instalações, grátiscore jakubkrehel
make-
O Claude acerta os detalhes que fazem uma tela parecer cara, como cantos, sombras, ícones, números e animações, e revisa o que já está pronto.Auditada73,3 mil instalações, grátisinterfaces- feel- better gsap-
Seu site ganha seções que se mexem conforme a pessoa rola, ficam presas na tela ou correm pro lado, com o código no padrão oficial do GSAP.Auditada72 mil instalações, grátisscrolltrigger wshobson
tailwind-
As cores, os cantos e os componentes do seu site ficam definidos num lugar só, e o Claude faz as telas novas sempre no mesmo padrão.Auditada70,4 mil instalações, grátisdesign- system nutlope
hallmark
Faz sites e páginas novas parecerem desenhados, não gerados, fugindo do visual genérico de IA70,1 mil instalações, grátisgsap-
Deixa animações GSAP fluidas a 60fps: prefere transforms, agrupa operações e evita layout thrashingAuditada69,2 mil instalações, grátisperformance gsap-
Sequencia e coreografa animações em várias etapas com as timelines do GSAPAuditada69 mil instalações, grátistimeline gsap-
Usa os plugins do GSAP: ScrollSmoother, Flip, Draggable, SplitText, morph de SVG e maisAuditada67,1 mil instalações, grátisplugins gsap-
Ensina a usar o GSAP no React e no Next.js com o hook useGSAP e limpeza automáticaAuditada66,2 mil instalações, grátisreact gsap-
Usa os utilitários gsap.utils: clamp, mapRange, interpolate, random, snap, wrap e outrosAuditada65,1 mil instalações, grátisutils break-
Tenta quebrar a interface com dados extremos: nomes longos, campos vazios e contagens enormesAuditada65 mil instalações, grátisui Google Labs
design-
As telas que você já desenhou no Stitch viram um DESIGN.md que faz as próximas telas saírem com a mesma cara.Oficial64,7 mil instalações, grátismd typeset
Melhora a tipografia: escolha de fontes, hierarquia, tamanhos, pesos e legibilidadeAuditada64,7 mil instalações, grátisaddyosmani
accessibility
Audita e melhora a acessibilidade web seguindo a WCAG 2.2, de leitor de tela a contrasteAuditada64,1 mil instalações, grátisoverdrive
Leva interfaces além do convencional com shaders, física de mola, reveals na rolagem e 60fpsAuditada62,8 mil instalações, grátisgsap-
Usa o GSAP em Vue, Svelte, Nuxt e outros frameworks, com ciclo de vida e limpeza ao desmontarAuditada62,4 mil instalações, grátisframeworks enhance-
Transforma ideias vagas de interface em prompts caprichados para o Stitch, com contexto do design systemOficialAuditada58,3 mil instalações, grátisprompt normalize
Audita a interface e realinha ao design system: espaçamento, tokens e padrõesAuditada54,3 mil instalações, grátisshadcn-
O Claude escolhe, instala e ajusta os componentes do shadcn/ui no seu projeto, com as cores da sua marca, modo escuro e acessibilidade.OficialAuditada53,4 mil instalações, grátisui extract
Extrai componentes, tokens de design e padrões repetidos para o design system do projetoAuditada53,2 mil instalações, grátisfrontend-
Cria interfaces de front-end com identidade, sem cara de IA genérica (descontinuada, virou impeccable)Auditada53,2 mil instalações, grátisdesign onboard
Desenha e melhora onboarding, estados vazios e primeira experiência até o usuário ver valorAuditada53,1 mil instalações, grátisharden
Deixa a interface pronta para produção: tratamento de erros, estados vazios, i18n e overflow de textoAuditada53 mil instalações, grátisalchaincyf
huashu-
Protótipo, apresentação ou vídeo em HTML com cara de estúdio de design, partindo de três caminhos visuais que você escolhe antes de tudo.50,3 mil instalações, grátisdesign teach-
Coleta o contexto de design do projeto e salva na config da IA (descontinuada, virou /impeccable teach)Auditada50 mil instalações, grátisimpeccable design-
Monta a arquitetura de tokens, as especificações de componentes e os slides de um design systemAuditada42,5 mil instalações, grátissystem design
Reúne identidade de marca, tokens, estilo de UI, logos (55 estilos), slides, banners e ícones numa só skillAuditada41,2 mil instalações, grátisui-
Cria interfaces bonitas e acessíveis com shadcn/ui, Radix UI e Tailwind CSS, além de visuais em canvasAuditada40,6 mil instalações, grátisstyling banner-
Cria banners para redes sociais, anúncios, heroes de site e impressão, com várias direções de arte39,4 mil instalações, grátisdesign better-
Dá acabamento a superfícies, ícones e movimento, com valores exatos de raio, sombra e animaçãoAuditada39,2 mil instalações, grátisui arrange
Melhora layout, espaçamento e ritmo visual: corrige grids monótonos e hierarquia fracaAuditada39,1 mil instalações, grátisanimation-
Mantém animações web dentro do orçamento de quadros, animando só propriedades de composiçãoAuditada36,3 mil instalações, grátisperformance better-
Define e revisa a tipografia: escala, espaçamento, recursos da fonte, quebra de linha e pontuaçãoAuditada34,1 mil instalações, grátistypography Firecrawl
firecrawl-
Extrai o sistema visual de um site num DESIGN.md: logo, cores, fontes e a mensagem da homeOficial33,1 mil instalações, grátiswebsite- design- clone ckm:
Monta um design system: tokens em três camadas, variáveis CSS, especificação de componentes e slides32,8 mil instalações, grátisdesign- system better-
Cria e confere sistemas de cor: paletas, tokens semânticos, conversão de formatos e contrasteAuditada32,5 mil instalações, grátiscolors ckm:
O Claude cuida da parte visual do negócio: logo, papelaria da marca, banners no tamanho de cada rede, ícones, apresentações e posts.32,5 mil instalações, grátisdesign ckm:
Cria interfaces acessíveis com shadcn/ui (Radix e Tailwind), Tailwind CSS e estilos em canvas32,4 mil instalações, grátisui- styling ckm:
Cria banners para redes sociais, anúncios, heros de site e impressão, com várias direções de arte32 mil instalações, grátisbanner- design GitHub
excalidraw-
O Claude transforma uma descrição em português num arquivo .excalidraw com caixas, setas e cores, pronto pra abrir e ajustar no Excalidraw.OficialAuditada31,7 mil instalações, grátisdiagram- generator dammyjay93
interface-
Projeta interfaces de dashboards, painéis admin, apps SaaS, ferramentas e telas de configuraçãoAuditada30,8 mil instalações, grátisdesign better-
Define agrupamento, alinhamento, ordem de leitura e estrutura responsiva, com folga para traduçãoAuditada30,7 mil instalações, grátislayout shape
Planeja a UX e a UI de uma funcionalidade antes de codar: entrevista de descoberta e briefing de designAuditada30 mil instalações, grátisbetter-
Revisa uma tela ou fluxo (acessibilidade, layout, texto, tipografia, cor) e entrega um relatório priorizadoAuditada29,9 mil instalações, grátisinterface better-
Revisa e corrige teclado, foco, ARIA, nomes acessíveis, formulários, leitores de tela e zoom pela WCAG 2.2Auditada29,5 mil instalações, grátisaccessibility better-
Escreve e revisa textos de interface (rótulos, erros, estados vazios, confirmações) na voz do produtoAuditada29 mil instalações, grátiswriting warpdotdev
brandalf
Guia a criação e a revisão de materiais com a marca Warp ou Oz: páginas, docs, componentes e mockups28,1 mil instalações, grátislayout
Melhora layout, espaçamento e ritmo visual: corrige grades monótonas, espaços irregulares e hierarquia fracaAuditada26,4 mil instalações, grátisstitch-
Você descreve a tela do seu jeito e o Claude pede ao Stitch uma versão caprichada, coerente com o resto do projeto, e baixa o HTML e a imagem.Oficial25,1 mil instalações, grátisdesign ibelick
baseline-
As telas que o Claude faz saem limpas e consistentes, sem gradiente roxo, brilho e animação sobrando, e cada problema achado na revisão vem com a correção.Auditada24,2 mil instalações, grátisui software-mansion
argent-
Propõe várias variações visuais de um elemento da tela e deixa você escolher na janela do Argent Lens22,5 mil instalações, grátislens giuseppe-trisciuoglio
shadcn-
Ensina os padrões da biblioteca shadcn/ui: instalação, configuração e componentes React acessíveisAuditada22,4 mil instalações, grátisui fixing-
Audita e corrige acessibilidade em HTML: rótulos ARIA, teclado, foco, contraste e erros de formulárioAuditada21,9 mil instalações, grátisaccessibility wheresryan22
anatomy
Cria figuras SVG isométricas interativas que explicam uma ideia técnica como um objeto físico21,6 mil instalações, grátisjakubantalik
transitions-
Traz 32 transições CSS prontas pra web: badges, dropdowns, modais, painéis e troca de páginaAuditada20,4 mil instalações, grátisdev taste-
Um DESIGN.md com regras exatas de cor, fonte e layout pro Google Stitch gerar telas que não parecem feitas por IA.OficialAuditada20,2 mil instalações, grátisdesign
Por onde começar
Sem skill, o Claude tende a entregar a tela de sempre: degradê roxo, cards iguais e cara de template. Estas cinco mudam isso, cada uma por um caminho.
A oficial da Anthropic. Antes de programar, o Claude define cores, fontes e layout a partir do assunto do seu negócio e confere o plano contra os vícios de página feita por IA. Não pede programa nem chave.
O Claude consulta um banco de estilos, paletas e pares de fonte separados por tipo de produto e monta um design system que fica salvo pro projeto. Precisa do Python no computador.
Põe o Claude como diretor de design, com comandos pra planejar, criticar, auditar e dar o acabamento. Trata landing page com ousadia e painel com precisão.
Entrega página, apresentação ou protótipo em HTML, com o sistema visual definido antes de construir. Quando o pedido é vago, propõe três direções e espera você escolher.
A revisão, da Vercel: você aponta os arquivos do site e recebe a lista do que fere as boas práticas de interface, com o arquivo e a linha de cada problema.
por Anthropic
por nextlevelbuilder
por pbakaus
por jiji262
por Vercel LabsFrontend Design, UI UX Pro Max ou Impeccable?
As três melhoram a tela por caminhos diferentes. A frontend-design é um jeito de pensar: só instrução, e o Claude decide como um estúdio decidiria. A UI UX Pro Max é um catálogo: regra pronta de cor, fonte e acessibilidade, consultada num script. A Impeccable é um kit de direção de arte, com comandos pra criticar e polir o que já existe. Pra começar, a frontend-design. Se você não confia no próprio olho, a UI UX Pro Max. Pra lapidar uma tela pronta, a Impeccable. Elas convivem: dá pra instalar duas.
Lojas deste corredor
As empresas e os criadores com mais skills levadas aqui.
O guia deste corredor
Claude Design: o que é e como usarA ferramenta da Anthropic que cria tela, protótipo e slide conversando, e como levar o resultado pro Claude Code.Com a cara decidida, o código do site fica em Sites e apps; arte pra post e vídeo, em Vídeo, imagem e conteúdo.
Perguntas
Qual a melhor skill de design pro Claude Code?
Pra maioria, a frontend-design, da Anthropic: é oficial, não pede nada instalado e muda a cara do resultado já no primeiro pedido. A UI UX Pro Max e a Impeccable vêm logo atrás, e a diferença entre as três está na comparação acima.
A skill claude-design é o Claude Design da Anthropic?
Não. O Claude Design é a ferramenta da Anthropic de criar tela conversando, explicada em Claude Design. A claude-design daqui é uma skill de outro autor, que faz o Claude trabalhar como designer e entregar o resultado em HTML.
Tem skill pra Figma?
Tem. A loja oficial do Figma publica as dela, que levam o design do Figma pro código e o código de volta pro Figma, e outras do corredor leem o arquivo do Figma. Procure “figma” na busca do shopping.
Skill de design funciona no Codex e no Antigravity?
Funciona. Skill é uma pasta com um SKILL.md, e o instalador põe a mesma skill no Claude Code, no Codex e no Antigravity. As que rodam script, como a UI UX Pro Max, precisam do Python em qualquer agente.
As mais procuradas no Brasil
As skills que o brasileiro mais procura no Google, cada uma com a página explicada em português.
- Claude Design skill
- Framer Motion skill
- Drawio Skill
- Drawio skill
- Excalidraw Diagram skill
- Draw Io skill
- Expo Animation skill
- Daisyui skill
- Refero Design skill
- Superdesign skill
- Text To Lottie skill
- Figma Use skill
- iOS HIG Design skill
- Tailwind V4 Shadcn skill
- Antislop skill
- Shadcn Svelte skill
- Figma Implement Design skill
- Magicpath skill
- Figma Generate Design skill
- Liquid Glass Design skill
- Oklch Skill
- Figma Generate Library skill
- Create Design MD skill
- Tldraw Skill
- Tailwindcss skill
- Figma Code Connect skill
- Material 3 skill
- Apple HIG skill
- Kill AI Slop skill
- Tailwind CSS skill
- Swiftui Design skill
- Figma Create Design System Rules skill
- Godot UI skill
- Lottie Animation skill
- Illustrator skill
- Photoshop skill
- Roku skill
- Tailwind Best Practices skill
- Aceternity UI skill
- Magic UI skill
- Mui skill
- Anti UI Slop skill
- Apple UI Designer skill
- Tailwind V4 skill
- HIG skill
- Antigravity Design Expert skill
- Anime JS skill
- Awesome Design MD skill
- Tailwind 4 skill
- Nothing Design skill
- Motion Dev Animations skill
- Webgl skill
- Figma Design skill
- Material 3 Expressive skill
- Emil Design Eng skill