50 plugins de design para Claude: interfaces originais e menos genéricas

Esta pesquisa reúne 50 plugins atuais para Claude Code e, quando oferecido pelo autor, Claude Cowork. O objetivo não é apenas gerar uma interface que "funciona", mas reduzir o aspecto repetitivo associado a muitos projetos criados por IA: páginas sem direção de arte, gradientes gratuitos, cartões demais, hierarquia fraca, tipografia previsível, componentes escolhidos sem relação com a marca e animações usadas como enfeite.

Não existe plugin capaz de substituir gosto, referência e julgamento humano. Os melhores resultados aparecem quando se combina direção visual, identidade própria, design system, ativos coerentes e revisão da página renderizada. Por isso, a seleção inclui plugins de design propriamente ditos e também extensões especializadas em Figma, componentes, mídia, motion, acessibilidade e inspeção visual.

Resumo executivo

Se a intenção é melhorar imediatamente os sites produzidos pelo Claude, os primeiros plugins a testar são:

Frontend Design, por orientar a produção de interfaces deliberadamente distintas e prontas para uso;
Design, por cobrir crítica, UX writing, acessibilidade, sistemas de design e entrega para desenvolvimento;
Bridge DS, por gerar telas Figma a partir do sistema de design real e aprender com as correções da equipe;
Design with Claude, por reunir especialistas em tipografia, cor, motion, dashboards, formulários e responsividade;
Brand.md, por transformar posicionamento, voz e direção visual em contexto persistente no repositório;
Figma, Claude2Figma e Design Drift, quando já existe um sistema de design que deve ser respeitado;
Playwright e Chrome DevTools MCP, porque uma interface só pode ser avaliada corretamente quando é aberta, capturada e testada no navegador.

A lista contém 17 plugins do marketplace oficial, 4 do marketplace Knowledge Work da Anthropic e 29 do marketplace comunitário. Os plugins comunitários passaram pela validação automatizada e triagem de segurança descritas pela Anthropic, mas isso não equivale a uma auditoria completa. Leia o repositório, verifique permissões e dependências e instale apenas o necessário.

Metodologia e critérios

Foram examinados os catálogos atuais oficial, comunitário e Knowledge Work, além das páginas e repositórios dos autores. Um item entrou na lista quando atendia a pelo menos um dos critérios abaixo:

acrescenta conhecimento prático de UI, UX, direção de arte ou design systems;
conecta Claude a uma ferramenta visual real, como Figma, Canva ou Adobe;
ajuda a manter tokens, componentes, tipografia e identidade consistentes;
produz ou trata imagens, vídeo, motion, diagramas ou experiências 3D;
permite inspecionar a página renderizada, responsividade ou acessibilidade;
oferece instalação pelo sistema de plugins do Claude, sem exigir que o usuário improvise uma skill solta.

Não foram priorizados geradores que apenas montam uma landing page genérica. Também não se confundiu popularidade com qualidade: algumas das opções mais interessantes são recentes e pouco conhecidas. As descrições abaixo são uma avaliação prática baseada no escopo declarado por cada projeto; não constituem garantia de qualidade de todo resultado produzido.

Como instalar no Claude

Marketplace oficial

O marketplace claude-plugins-official normalmente já está disponível. Dentro do Claude Code, execute o comando exibido em cada item:

/plugin install nome-do-plugin@claude-plugins-official

Se o marketplace não aparecer ou estiver desatualizado:

/plugin marketplace add anthropics/claude-plugins-official
/plugin marketplace update claude-plugins-official

Marketplace Knowledge Work

Adicione uma vez:

/plugin marketplace add anthropics/knowledge-work-plugins

Depois use os comandos terminados em @knowledge-work-plugins.

Marketplace comunitário

Adicione uma vez:

/plugin marketplace add anthropics/claude-plugins-community

Embora o repositório se chame claude-plugins-community, o identificador usado na instalação é claude-community:

/plugin install nome-do-plugin@claude-community

Depois de instalar ou habilitar plugins durante uma sessão, execute /reload-plugins. No aplicativo desktop ou no Cowork, também é possível abrir o navegador de plugins e procurar pelo nome exato. Os comandos com barra são para uma sessão interativa do Claude Code; no terminal comum, use a forma claude plugin install nome@marketplace.

Direção de arte e combate ao visual genérico

1. Frontend Design — escolha essencial

É o ponto de partida mais direto. Orienta Claude a criar frontends com intenção visual, acabamento de produção e decisões menos previsíveis, em vez de aplicar automaticamente o mesmo conjunto de cards, gradientes e fontes.

Melhor uso: landing pages, portfólios, produtos web e redesigns.
Impacto contra o visual genérico: muito alto.
Instalação: /plugin install frontend-design@claude-plugins-official
Link: Frontend Design

2. Design — processo completo de produto

Plugin da Anthropic para crítica de interface, gestão de design system, UX writing, auditoria de acessibilidade, síntese de pesquisa e handoff. É mais abrangente que um simples gerador de CSS e ajuda a questionar decisões antes de implementá-las.

Melhor uso: produto digital, revisão de telas e documentação de decisões.
Impacto contra o visual genérico: muito alto quando combinado com referências reais.
Instalação: /plugin install design@knowledge-work-plugins
Link: Design

3. Bridge DS — Figma baseado no seu sistema real

Extrai componentes, tokens e estilos do design system existente, produz especificações validadas e gera telas Figma usando instâncias e variáveis reais. Também registra correções feitas pela equipe para melhorar as próximas gerações, em vez de repetir uma estética genérica.

Melhor uso: equipes que já possuem biblioteca Figma e querem gerar telas sem abandonar seus padrões.
Impacto contra o visual genérico: muito alto e direto.
Instalação: /plugin install bridge-ds@claude-community
Link: Bridge DS

4. Design with Claude — 29 especialistas

Transforma conhecimentos específicos de design em comandos especializados: hierarquia visual, tipografia, cor, motion, formulários, navegação, dashboards, mobile, dark mode, onboarding e visualização de dados. O comando de briefing encaminha cada problema ao especialista adequado.

Melhor uso: projetos variados que precisam de crítica por disciplina.
Impacto contra o visual genérico: muito alto.
Instalação: /plugin install designwithclaude@claude-community
Link: Design with Claude

5. The Design Library — referências e ciclos de design

Reúne dezenas de sistemas de marca como referência e skills de UI/UX, acessibilidade, motion e fluxo completo de design. É útil para estudar padrões coerentes, mas não se deve copiar a identidade de outra empresa literalmente.

Melhor uso: explorar linguagens visuais e comparar sistemas maduros.
Impacto contra o visual genérico: alto, desde que as referências sejam reinterpretadas.
Instalação: /plugin install the-design-library@claude-community
Link: The Design Library

6. Universal Design Principles — princípios antes de ornamentos

Biblioteca de princípios de design e HCI organizada em plugins componíveis. Em vez de sugerir apenas estilos, ensina Claude a raciocinar sobre percepção, usabilidade, feedback, carga cognitiva e estrutura.

Melhor uso: produtos em que clareza e comportamento importam tanto quanto aparência.
Impacto contra o visual genérico: alto, principalmente no UX.
Instalação: /plugin install universal-design-principles@claude-community
Link: Universal Design Principles

7. Perception-First Design — psicologia e percepção

Aplica uma estrutura em camadas que parte de restrições cognitivas antes de chegar à solução visual. É uma alternativa interessante ao fluxo em que Claude escolhe um estilo primeiro e tenta justificar depois.

Melhor uso: comunicação, páginas de marketing e decisões de hierarquia.
Impacto contra o visual genérico: alto.
Instalação: /plugin install perception-first-design@claude-community
Link: Perception-First Design

8. AIO Design System — repertório amplo de UI/UX

Pacote geral de conhecimentos de design de software, UI e UX. É menos especializado que algumas opções acima, mas serve como base única para quem não quer começar com muitos plugins pequenos.

Melhor uso: equipes pequenas e primeiros sistemas de design.
Impacto contra o visual genérico: médio a alto.
Instalação: /plugin install aio-design-system@claude-community
Link: AIO Design System

9. Brand.md — identidade persistente no projeto

Cria um arquivo brand.md com estratégia, voz e direção visual. Esse contexto reduz a tendência de Claude reinventar a marca a cada tela e permite que decisões humanas acompanhem o código.

Melhor uso: qualquer produto que ainda não tenha diretrizes de marca.
Impacto contra o visual genérico: muito alto.
Instalação: /plugin install brand-md@claude-community
Link: Brand.md

10. Brand Voice — coerência entre texto e visual

Analisa materiais existentes, documenta a voz da marca e valida conteúdo gerado. Não desenha componentes, mas evita que uma interface visualmente interessante seja arruinada por títulos e microcopy genéricos.

Melhor uso: sites institucionais, produtos e campanhas com muito texto.
Impacto contra o visual genérico: alto na identidade verbal.
Instalação: /plugin install brand-voice@knowledge-work-plugins
Link: Brand Voice

11. Design Drift — bloqueio de desvios do design system

Compara alterações em arquivos de UI com tokens extraídos do sistema de design. Aponta cores, fontes, espaçamentos e raios fora do padrão, com sugestões específicas de correção.

Melhor uso: produtos existentes nos quais Claude precisa obedecer à marca.
Impacto contra o visual genérico: muito alto em manutenção.
Instalação: /plugin install designs-drift@claude-community
Link: Design Drift

12. Claude2Figma — conformidade entre código e Figma

Faz Claude procurar componentes da biblioteca antes de inventar valores, vincula propriedades a tokens e executa verificações após alterações. Entrega o maior valor quando a equipe já possui uma biblioteca Figma organizada.

Melhor uso: design-to-code com sistema maduro.
Impacto contra o visual genérico: muito alto.
Instalação: /plugin install claude2figma@claude-community
Link: Claude2Figma

Figma, criação visual e ativos de mídia

13. Figma — integração oficial

Permite acessar arquivos, componentes e tokens do Figma e traduzir o design em código. É a ponte principal para impedir que a implementação ignore o trabalho visual já aprovado.

Melhor uso: handoff, extração de contexto e implementação de componentes.
Impacto contra o visual genérico: muito alto com bons arquivos de origem.
Instalação: /plugin install figma@claude-plugins-official
Link: Figma

14. Figma Suite — telas e bibliotecas com variáveis

Complementa o MCP oficial com fluxo para criar telas, editar bibliotecas, sincronizar tokens nos dois sentidos e auditar conformidade. Exige o servidor MCP oficial do Figma.

Melhor uso: times que tratam Figma e código como partes do mesmo sistema.
Impacto contra o visual genérico: muito alto.
Instalação: /plugin install figma-suite@claude-community
Link: Figma Suite

15. PluginOS Figma Operations Platform

Oferece uma camada de operações enxuta para consultar, editar, revisar e auditar arquivos Figma. Requer também o PluginOS Bridge aberto no Figma.

Melhor uso: automações repetitivas e auditorias de vários arquivos.
Impacto contra o visual genérico: alto pela disciplina e pelo lint visual.
Instalação: /plugin install pluginos-figma-operations-platform@claude-community
Link: PluginOS

16. Canva — criação e verificação de marca

Conecta Claude ao Canva para criar, editar, revisar, redimensionar e verificar peças contra a marca. É útil para transformar a identidade do produto em materiais sociais e variações de campanha.

Melhor uso: posts, apresentações, peças promocionais e adaptações.
Impacto contra o visual genérico: alto quando existe um Brand Kit.
Instalação: /plugin install canva@claude-plugins-official
Link: Canva

17. Adobe for Creativity — acabamento de ativos

Reúne recursos Adobe para edição de imagens, remoção de fundo, vetorização, retoque e processamento de múltiplas peças. Ajuda a evitar páginas compostas apenas por texto, gradientes e imagens provisórias.

Melhor uso: imagens de produto, campanhas e tratamento profissional.
Impacto contra o visual genérico: alto nos ativos.
Instalação: /plugin install adobe-for-creativity@claude-plugins-official
Link: Adobe for Creativity

18. Miro — exploração antes do código

Permite ler quadros, criar diagramas e usar a estrutura do Miro como contexto. É mais valioso na exploração de fluxos, arquitetura de informação e jornadas do que na aparência final.

Melhor uso: workshops, mapas de jornada, fluxos e arquitetura.
Impacto contra o visual genérico: médio, mas melhora o raciocínio.
Instalação: /plugin install miro@claude-plugins-official
Link: Miro

19. Cloudinary — pipeline de mídia

Gerencia ativos, transformações, cortes, formatos e otimização. Uma página parece muito mais intencional quando suas imagens têm enquadramento, proporção, qualidade e entrega coerentes.

Melhor uso: sites com muitas imagens e variantes responsivas.
Impacto contra o visual genérico: alto na qualidade de mídia.
Instalação: /plugin install cloudinary@claude-plugins-official
Link: Cloudinary

20. Runway API — imagens, vídeo e áudio

Ajuda a integrar a API do Runway para gerar e iterar mídia em escala. Serve para campanhas, histórias em múltiplos planos e conteúdo de produto, mas os serviços e modelos utilizados podem ter cobrança própria.

Melhor uso: mídia de campanha e protótipos audiovisuais.
Impacto contra o visual genérico: alto se houver direção criativa.
Instalação: /plugin install runway-api@claude-plugins-official
Link: Runway API

21. HyperFrames — HTML transformado em vídeo

Usa composições HTML, GSAP, legendas, locução, áudio reativo e captura de sites para renderizar vídeo. É uma opção incomum para manter a linguagem do produto em demos e peças animadas.

Melhor uso: vídeos de produto, motion e demonstrações.
Impacto contra o visual genérico: alto em conteúdo audiovisual.
Instalação: /plugin install hyperframes@claude-plugins-official
Link: HyperFrames

22. QuickDesign — geração e edição multimídia

Integra o CLI QuickDesign a modelos de imagem e vídeo, referências múltiplas, continuidade de voz e upscale. É especializado e depende do ecossistema e dos provedores adotados pelo projeto.

Melhor uso: publicidade, avatares, vídeos e experimentação multimodal.
Impacto contra o visual genérico: variável; direção humana é essencial.
Instalação: /plugin install quickdesign@claude-community
Link: QuickDesign

23. Bulk Image Generation — lotes de imagens

Orquestra geração em lote via Pollinations, com painel HTML e recuperação por seed. É útil para explorar muitas alternativas antes de selecionar e tratar somente as melhores.

Melhor uso: moodboards, variações e inventário visual em lote.
Impacto contra o visual genérico: médio; curadoria continua obrigatória.
Instalação: /plugin install bulk-image-generation@claude-community
Link: Bulk Image Generation

24. Remotion Skills Marketplace — vídeo em React

Empacota conhecimentos de Remotion sobre animação, timing, áudio, legendas, efeitos, ativos e fontes. É uma excelente escolha para produzir vídeo por código com controle de versão.

Melhor uso: vídeos programáticos, demos e peças dinâmicas.
Impacto contra o visual genérico: alto quando existe direção de motion.
Instalação: /plugin install remotion-skills-marketplace@claude-community
Link: Remotion Skills Marketplace

25. VideoZero — animação 2D e explicadores

Gera animações 2D, tipografia cinética, gráficos ilustrativos e explicações de algoritmos. É uma ferramenta especializada, adequada quando o projeto precisa comunicar ideias visualmente e não apenas decorar a página.

Melhor uso: vídeos explicativos, gráficos animados e educação.
Impacto contra o visual genérico: alto para motion.
Instalação: /plugin install videozero@claude-community
Link: VideoZero

26. TouchDesigner MCP — arte generativa e instalações

Permite controlar o TouchDesigner por Claude através de MCP. É uma opção muito menos convencional para experiências audiovisuais, projeções, instalações e gráficos generativos.

Melhor uso: arte interativa, eventos e protótipos audiovisuais.
Impacto contra o visual genérico: muito alto em projetos experimentais.
Instalação: /plugin install touchdesigner-mcp@claude-community
Link: TouchDesigner MCP

27. Unreal Engine Skills for Claude Code

Conecta Claude ao Unreal Editor e expõe ferramentas para atores, materiais, Niagara, sequências, widgets, rigging e testes. Vai muito além de web design, mas é uma das integrações visuais mais poderosas da seleção.

Melhor uso: jogos, experiências 3D, cinematics e visualização.
Impacto contra o visual genérico: alto no nicho 3D.
Instalação: /plugin install unreal-engine-skills-for-claude-code@claude-plugins-official
Link: Unreal Engine Skills

28. Diagrams — diagramas profissionais

Gera diagramas por Kroki em formatos como Mermaid, PlantUML, Graphviz, D2, C4 e ERD, com saída em PNG ou SVG. Diagramas bem escolhidos substituem seções genéricas de cards por comunicação visual útil.

Melhor uso: arquitetura, processos, documentação e conteúdo técnico.
Impacto contra o visual genérico: médio a alto.
Instalação: /plugin install diagrams@claude-community
Link: Claude Diagrams

Design systems, componentes e plataformas

29. UI Theme Designer — SAP Fiori e tokens

Especializado no UI Theme Designer da SAP, parâmetros de tema e tokens usados por UI5, Web Components e Fundamental Styles. Não é uma solução geral, mas é muito valioso quando o produto vive no ecossistema SAP.

Melhor uso: aplicações empresariais SAP/Fiori.
Impacto contra o visual genérico: alto no nicho.
Instalação: /plugin install ui-theme-designer@claude-plugins-official
Link: UI Theme Designer

30. Tailwind Design System

Audita estilos existentes, define tokens semânticos de cor e tipografia, extrai componentes e ajuda a migrar projetos Tailwind com Next.js. É especialmente útil para substituir centenas de decisões locais por regras coerentes.

Melhor uso: organizar ou refatorar produtos Tailwind.
Impacto contra o visual genérico: muito alto.
Instalação: /plugin install tailwind-design-system@claude-community
Link: Tailwind Design System

31. Rayden UI Design Skill

Ensina Claude a gerar React e designs Figma usando componentes, tokens, regras de composição, anti-padrões e layouts do Rayden UI.

Melhor uso: projetos que adotam especificamente a biblioteca Rayden.
Impacto contra o visual genérico: alto, mas a estética fica ligada ao kit.
Instalação: /plugin install rayden-ui-design-skill@claude-community
Link: Rayden UI Design Skill

32. UI Kit — componentes Aurora Fluid

Oferece um catálogo grande de componentes React sem dependências, skills para descoberta e geração, referência do sistema e revisão de acessibilidade. É uma opção pronta para quem gosta da linguagem Aurora Fluid.

Melhor uso: protótipos React com biblioteca visual consistente.
Impacto contra o visual genérico: médio a alto.
Instalação: /plugin install ui-kit@claude-community
Link: UI Kit

33. Doom Design System — neobrutalismo

Adiciona conhecimento do Doom Design System, uma biblioteca React neobrutalista, além de tokens, componentes e padrões. É uma escolha estilística forte e deliberada, não uma solução neutra para qualquer marca.

Melhor uso: produtos que assumem visual neobrutalista.
Impacto contra o visual genérico: alto.
Instalação: /plugin install doom-design-system@claude-community
Link: Doom Design System

34. Craft UI — estética de scrapbook

Ensina a configuração e o catálogo do Craft UI, incluindo uma linguagem visual de scrapbook. É pequeno e específico, justamente por isso pode produzir algo mais memorável que outro dashboard corporativo azul.

Melhor uso: sites editoriais, pessoais e projetos lúdicos.
Impacto contra o visual genérico: alto no estilo proposto.
Instalação: /plugin install craft-ui@claude-community
Link: Craft UI

35. Plex UI — componentes, cores e ícones

Fornece conhecimento detalhado de dezenas de componentes, escala de tamanhos, cores semânticas, dark mode e centenas de ícones do Plex UI.

Melhor uso: aplicações React que já usam ou pretendem usar Plex UI.
Impacto contra o visual genérico: médio; a consistência é seu forte.
Instalação: /plugin install plex-ui@claude-community
Link: Plex UI

36. Shopify Polaris — UI correta para apps Shopify

Ensina os web components Polaris, suas propriedades, eventos, slots e padrões. Evita que Claude improvise componentes incompatíveis com a linguagem da plataforma.

Melhor uso: interfaces administrativas e extensões Shopify.
Impacto contra o visual genérico: alto no ecossistema Shopify.
Instalação: /plugin install shopify-polaris@claude-community
Link: Shopify Polaris

37. Expo — mobile multiplataforma

Plugin oficial para React Native e Expo, incluindo UI com Expo Router, SwiftUI, Jetpack Compose, Tailwind, depuração e distribuição. Seu valor visual está em aproximar o projeto dos padrões nativos de cada plataforma.

Melhor uso: aplicativos móveis e interfaces multiplataforma.
Impacto contra o visual genérico: alto com componentes nativos.
Instalação: /plugin install expo@claude-plugins-official
Link: Expo

38. React Native HiFi

Fluxo composto de skills para orientar projetos React Native e Expo com maior fidelidade. É uma alternativa comunitária focada em disciplinar o processo do agente, não apenas fornecer trechos isolados.

Melhor uso: protótipos móveis de alta fidelidade.
Impacto contra o visual genérico: médio a alto.
Instalação: /plugin install react-native-hifi@claude-community
Link: React Native HiFi

39. SwiftUI Guidance for macOS

Conhecimento aprofundado de SwiftUI para macOS, incluindo identidade de views, observação, concorrência, integração com AppKit, desempenho e acessibilidade. Evita que Claude trate um aplicativo Mac como uma página web dentro de uma janela.

Melhor uso: aplicativos macOS recentes em SwiftUI.
Impacto contra o visual genérico: alto no nicho.
Instalação: /plugin install swiftui-guidance-for-macos@claude-community
Link: SwiftUI Guidance for macOS

40. Build with WordPress

Plugin da Automattic para criar temas, plugins, comércio e aplicações WordPress. É melhor que pedir HTML genérico quando o resultado precisa respeitar a arquitetura e as ferramentas do ecossistema.

Melhor uso: sites e temas WordPress de produção.
Impacto contra o visual genérico: médio; depende muito do briefing.
Instalação: /plugin install build-with-wordpress@claude-plugins-official
Link: Build with WordPress

41. Wix — sites, widgets e Wix Design System

Combina skills de desenvolvimento com MCP para gerenciar sites, e-commerce, CMS, widgets e extensões usando as ferramentas e o sistema visual do Wix.

Melhor uso: projetos que já vivem na plataforma Wix.
Impacto contra o visual genérico: médio a alto com identidade definida.
Instalação: /plugin install wix@claude-plugins-official
Link: Wix

42. B12 Claude Plugin — gerar e editar sites

Inclui uma skill para gerar sites B12 e outra para editar um site ao vivo com acesso de navegador no Cowork. É conveniente para pequenos negócios, mas deve ser usado com direção de marca para não produzir uma aparência de template.

Melhor uso: sites institucionais rápidos e edição visual assistida.
Impacto contra o visual genérico: médio.
Instalação: /plugin install b12-claude-plugin@knowledge-work-plugins
Link: B12 Claude Plugin

43. Sanity Plugin — conteúdo e Visual Editing

Permite consultar e escrever conteúdo, trabalhar com GROQ, projetar schemas e configurar Visual Editing. Ajuda a construir experiências editoriais reais, nas quais o design nasce da estrutura do conteúdo e não de blocos genéricos.

Melhor uso: sites editoriais, catálogos e produtos com CMS.
Impacto contra o visual genérico: alto em arquitetura de conteúdo.
Instalação: /plugin install sanity-plugin@knowledge-work-plugins
Link: Sanity Agent Toolkit

44. Mintlify — documentação visualmente consistente

Cria e modifica documentação em MDX usando corretamente os componentes da plataforma. É especializada, mas excelente para evitar portais de documentação improvisados e inconsistentes.

Melhor uso: documentação de produto, API e developer experience.
Impacto contra o visual genérico: médio a alto no nicho.
Instalação: /plugin install mintlify@claude-plugins-official
Link: Mintlify

Movimento, implementação e revisão visual

45. Animation Helper — CSS e Framer Motion

Gera animações em CSS ou Framer Motion. Deve ser aplicado depois que hierarquia e layout estiverem resolvidos; movimento não corrige uma interface ruim e, em excesso, reforça o aspecto artificial.

Melhor uso: transições funcionais, feedback e microinterações.
Impacto contra o visual genérico: médio, quando usado com moderação.
Instalação: /plugin install animation-helper@claude-community
Link: Animation Helper

46. Modern Web Guidance — práticas atuais de frontend

Projeto do time Google Chrome para manter o agente alinhado a práticas modernas da web. Não escolhe uma direção artística, mas reduz soluções envelhecidas, frágeis ou incompatíveis com a plataforma.

Melhor uso: revisão técnica de qualquer frontend moderno.
Impacto contra o visual genérico: indireto, porém importante.
Instalação: /plugin install modern-web-guidance@claude-plugins-official
Link: Modern Web Guidance

47. Chrome DevTools MCP — ver o resultado real

Controla e inspeciona o Chrome, lê console e rede, registra desempenho e automatiza ações. Permite pedir que Claude abra o site, observe falhas reais e compare a implementação com a intenção visual.

Melhor uso: revisão visual, debugging e desempenho.
Impacto contra o visual genérico: alto quando usado em ciclos de captura e correção.
Instalação: /plugin install chrome-devtools-mcp@claude-plugins-official
Link: Chrome DevTools MCP

48. Playwright — screenshots e testes em navegador

Automatiza páginas, tira screenshots, preenche formulários e executa testes end-to-end. É indispensável para revisar estados, tamanhos de tela e fluxos, em vez de considerar concluído o primeiro HTML gerado.

Melhor uso: comparação visual, responsividade e regressão.
Impacto contra o visual genérico: alto por permitir iteração baseada em evidência.
Instalação: /plugin install playwright@claude-plugins-official
Link: Playwright

49. Accessibility Audit — relatório WCAG

Produz relatórios de conformidade WCAG. O escopo é simples, porém traz uma etapa frequentemente esquecida por interfaces geradas rapidamente: verificar se a experiência funciona para pessoas com diferentes necessidades.

Melhor uso: auditoria antes de publicar.
Impacto contra o visual genérico: indireto; melhora qualidade e inclusão.
Instalação: /plugin install accessibility-audit@claude-community
Link: Accessibility Audit

50. A11y Fixer — correções em HTML e JSX

Examina HTML e JSX em busca de problemas de acessibilidade. Complementa a auditoria com foco prático no código, embora ferramentas automáticas nunca substituam teste por teclado, leitor de tela e avaliação humana.

Melhor uso: correção contínua durante a implementação.
Impacto contra o visual genérico: indireto, mas eleva o acabamento.
Instalação: /plugin install a11y-fixer@claude-community
Link: A11y Fixer

Combinações recomendadas

Kit mínimo para sites realmente melhores

Instale somente estes seis no começo:

/plugin install frontend-design@claude-plugins-official
/plugin install modern-web-guidance@claude-plugins-official
/plugin install chrome-devtools-mcp@claude-plugins-official
/plugin install playwright@claude-plugins-official
/plugin marketplace add anthropics/knowledge-work-plugins
/plugin install design@knowledge-work-plugins
/plugin marketplace add anthropics/claude-plugins-community
/plugin install bridge-ds@claude-community
/reload-plugins

Essa combinação cobre direção, UX, implementação moderna, crítica anti-clichê e observação do resultado real.

Kit para quem trabalha com Figma e design system

/plugin install figma@claude-plugins-official
/plugin marketplace add anthropics/claude-plugins-community
/plugin install claude2figma@claude-community
/plugin install figma-suite@claude-community
/plugin install designs-drift@claude-community
/plugin install brand-md@claude-community

Não é necessário usar Claude2Figma, Figma Suite e PluginOS simultaneamente. Comece com Figma mais uma extensão complementar e mantenha a que se encaixar melhor no seu fluxo.

Kit para motion e conteúdo visual

/plugin install adobe-for-creativity@claude-plugins-official
/plugin install cloudinary@claude-plugins-official
/plugin install hyperframes@claude-plugins-official
/plugin marketplace add anthropics/claude-plugins-community
/plugin install remotion-skills-marketplace@claude-community

Runway, Adobe, Canva, Cloudinary, QuickDesign e outros serviços podem exigir conta, autenticação, API ou plano pago. O plugin pode ser gratuito enquanto o serviço conectado não é.

Um fluxo que realmente reduz o aspecto de IA

1. Escreva uma direção visual antes do código

Defina público, sensação pretendida, referências, coisas proibidas, escala tipográfica, paleta, densidade, tipo de imagem e comportamento de movimento. Use Brand.md ou um documento próprio, mas registre decisões concretas.

2. Dê referências específicas

Não diga apenas "faça moderno". Informe o que deve ser aprendido de cada referência: ritmo editorial, contraste tipográfico, navegação, proporção das imagens, tratamento das bordas ou transições. Referência não significa cópia.

3. Peça três direções realmente diferentes

Antes de implementar, solicite três conceitos com fontes, composição, paleta e motivo claramente distintos. Elimine duas direções e desenvolva uma. Variações que trocam apenas a cor não são direções diferentes.

4. Congele tokens e componentes

Depois de escolher a direção, defina tokens semânticos de cor, espaçamento, tipografia, raio, sombra e movimento. Dê preferência a componentes existentes e proíba valores aleatórios sem justificativa.

5. Renderize e critique em ciclos

Use Playwright ou Chrome DevTools MCP para abrir desktop e mobile, capturar screenshots e verificar console. Peça crítica de hierarquia, legibilidade, ritmo, alinhamento, estados vazios, foco, hover, carregamento e erros.

6. Remova sinais de excesso

Revise criticamente:

gradientes, brilho e glassmorphism sem relação com a marca;
raios grandes aplicados a absolutamente tudo;
uma sequência monótona de cartões com ícone, título e duas linhas;
texto centralizado demais e heros que ocupam toda a primeira dobra;
títulos genéricos como "Transforme sua experiência";
ícones decorativos inconsistentes ou emojis usados como substituto de arte;
animação em todos os elementos, sem função;
páginas bonitas no screenshot, mas ruins no teclado e no celular.

Essa lista não é uma lei estética. Um visual pode usar qualquer um desses recursos e continuar excelente; o problema é a aplicação automática, repetida e sem relação com o conteúdo.

Prompt-base recomendado

Antes de escrever código, proponha três direções visuais realmente diferentes
para este produto. Para cada uma, descreva conceito, referências, tipografia,
paleta, composição, densidade, tratamento de imagens, componentes e motion.

Não use uma estética genérica de landing page de IA. Evite decisões automáticas
como gradiente roxo, glassmorphism, cartões arredondados em toda seção, hero
centralizado previsível e microcopy vazia, exceto se houver justificativa
explícita ligada à marca.

Depois que eu escolher a direção, registre tokens e regras, implemente uma
página completa, abra-a no navegador em desktop e mobile, capture screenshots,
faça uma crítica visual rigorosa e corrija os problemas encontrados. Preserve
acessibilidade, desempenho e responsividade.

Riscos e limitações

Contexto e desempenho: instalar muitos plugins pode aumentar o contexto e dificultar a escolha da ferramenta correta. Instale conjuntos pequenos.
Permissões: plugins podem incluir código, hooks e servidores MCP com os privilégios do usuário. Trate-os como software, não como prompts inocentes.
Serviços pagos: Canva, Adobe, Runway, Cloudinary, Figma e outros podem exigir autenticação ou cobrança separada.
Projetos recentes: plugins comunitários podem mudar de nome, versão ou manutenção. O marketplace fixa cada entrada a uma revisão, mas isso não garante suporte futuro.
Acessibilidade: scanners automáticos cobrem apenas parte dos problemas.
Originalidade: copiar o sistema visual da Linear, Stripe ou Apple ainda é uma forma de parecer genérico. Use referências para compreender decisões, não para reproduzir uma marca alheia.

Recomendações práticas

Para um fluxo geral, comece por Frontend Design + Design + Bridge DS + Playwright + Chrome DevTools MCP. Acrescente Brand.md quando o projeto não tiver identidade documentada. Se houver Figma, adicione a integração oficial e apenas um dos complementos especializados.

Faça um teste comparável: escolha uma tela real, salve o briefing e gere uma primeira versão com seu fluxo atual. Depois repita com direção de marca, restrições explícitas e o kit recomendado. Compare screenshots desktop/mobile, hierarquia, número de estilos improvisados, contraste, consistência e quantidade de correções manuais. Esse experimento revela mais que instalar dezenas de plugins sem método.

Não instale os 50 de uma vez. Vários se sobrepõem, alguns são destinados a plataformas específicas e outros acionam serviços externos. Uma boa seleção de cinco a oito plugins, acompanhada de referências e revisão humana, tende a dar resultado melhor que um catálogo inteiro ativo.

Conclusão

Os plugins mais capazes de reduzir diretamente o aspecto genérico são Frontend Design, Bridge DS, Design with Claude, Design, Brand.md, Claude2Figma e Design Drift. Porém, o salto de qualidade não vem de uma extensão isolada. Ele surge de uma sequência disciplinada: direção de arte, referência, tokens, componentes coerentes, ativos próprios, renderização real, crítica visual e correção.

Para projetos web, a recomendação objetiva é instalar primeiro o kit mínimo de seis plugins, usar o prompt-base desta pesquisa e só então adicionar Figma, motion, componentes ou plataformas específicas. Assim Claude deixa de ser um gerador de primeira versão e passa a trabalhar dentro de um processo de design mais próximo do que uma equipe cuidadosa faria.

Fontes consultadas

Nota sobre atualidade

Pesquisa concluída em 23 de julho de 2026. Catálogos de plugins, comandos, dependências, preços e compatibilidade podem mudar. Confirme a página do plugin e as permissões solicitadas antes de instalar.

Related documents