LS
Claude · Biblioteca de design

42 Skills para melhorar o design com Claude

Frontend, UI, imagem, vídeo, sistemas, prompts e segurança — organizados em uma única biblioteca.

  • 42SKILLS
  • 6CAMADAS
  • 1SISTEMA

Em vez de pedir apenas “deixa bonito”, use skills específicas para dar ao Claude regras de design, interação, criação visual, estrutura e controle de qualidade.

Camada 110 SKILLS

10 Core Skills

Skills focadas em interface, frontend, consistência visual, movimento e implementação.

  • frontend-design

    FRONTENDCONSTRUIR

    Força layouts mais fortes e decisões visuais mais estruturadas.

    Quando usarQuando a interface parece funcional, mas sem direção visual clara.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • impeccable

    UICONSTRUIR

    Ajuda a evitar interfaces genéricas e com aparência de “feito por IA”.

    Quando usarQuando o resultado parece genérico ou “feito por IA”.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • taste-skill

    DESIGNCONSTRUIR

    Adiciona uma direção estética mais refinada e coerente.

    Quando usarQuando falta um ponto de vista estético mais refinado.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • animate

    MOTIONANIMAR

    Ajuda a criar microinterações e transições.

    Quando usarQuando a interface funciona, mas parece estática.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • design-motion

    MOTIONANIMAR

    Revisa movimento e coerência de animações.

    Quando usarAntes de aprovar animações, para revisar consistência de movimento.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • theme-factory

    DESIGNPADRONIZAR

    Cria e organiza temas e paletas.

    Quando usarAo criar ou organizar um novo tema ou paleta de cores.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • figma-implement

    FRONTENDCONECTAR

    Ajuda a traduzir designs em implementação.

    Quando usarAo transformar um design pronto em código.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • playwright-mcp

    FRONTENDCONECTAR

    Apoia feedback visual no navegador e loops de screenshot.

    Quando usarQuando o Claude precisa ver o resultado no navegador antes de ajustar.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • brandkit

    DESIGNPADRONIZAR

    Mantém identidade visual e diretrizes de marca.

    Quando usarQuando a identidade visual precisa se manter consistente entre peças.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • designer-skills

    UICONECTAR

    Ajuda a estruturar handoff e especificações de design.

    Quando usarAo preparar handoff e especificações para desenvolvimento.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

Essa camada cuida da qualidade visual da interface antes de pensar no resto.

Camada 28 SKILLS

8 Creative Skills

Skills para criação visual, motion, imagem generativa e assets programáticos.

  • nano-banana

    IMAGEMCRIAR

    Texto para imagem a partir do terminal.

    Quando usarPara gerar imagens direto do terminal, a partir de texto.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • banana-claude

    IMAGEMCRIAR

    Estrutura prompts visuais em múltiplos componentes.

    Quando usarAo montar prompts visuais com múltiplos elementos e componentes.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • canvas-design

    IMAGEMCRIAR

    Criação de visuais com foco em assets editáveis.

    Quando usarAo criar visuais que precisam continuar editáveis depois.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • algorithmic-art

    IMAGEMCRIAR

    Arte generativa baseada em regras e matemática.

    Quando usarAo explorar arte generativa baseada em regras e matemática.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • remotion-superpowers

    VÍDEOANIMAR

    Fluxos avançados de vídeo em React.

    Quando usarEm fluxos de vídeo mais avançados, feitos em React.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • claude-remotion

    VÍDEOANIMAR

    Ajuda com títulos, timing e motion.

    Quando usarPara ajustar títulos, timing e motion de um vídeo.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • blender-motion

    MOTIONANIMAR

    Criação de cenas 3D guiadas por código.

    Quando usarAo criar cenas 3D guiadas por código.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • ae-motion

    MOTIONANIMAR

    Automação e scripting para After Effects.

    Quando usarPara automatizar tarefas repetitivas no After Effects.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

Essa camada transforma o Claude de assistente de texto em parceiro visual.

Camadas 3 & 410 SKILLS

10 System Skills

Skills focadas em sistemas, produto, interação, experiência e estrutura.

  • hi-fi-mockups

    PRODUTOCONSTRUIR

    Criação de mockups de alta fidelidade.

    Quando usarAo criar mockups de alta fidelidade para apresentar ou testar.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • brandkit-sync

    DESIGNPADRONIZAR

    Sincroniza guidelines e padrões de marca.

    Quando usarQuando os guidelines de marca precisam ficar sincronizados entre peças.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • slide-decks

    PRODUTOCRIAR

    Estrutura apresentações com templates consistentes.

    Quando usarAo estruturar apresentações com um template consistente.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • figma-mcp

    FRONTENDCONECTAR

    Conecta contexto do Figma ao fluxo de desenvolvimento.

    Quando usarQuando o contexto do Figma precisa entrar direto no fluxo de desenvolvimento.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • token-budgets

    PRODUTOCONECTAR

    Ajuda a controlar orçamento de contexto.

    Quando usarQuando o contexto da sessão está ficando caro ou difícil de controlar.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • turn-repair

    PRODUTOCONECTAR

    Ajuda a recuperar fluxos quando a conversa quebra.

    Quando usarQuando a conversa perde o fio e precisa ser recuperada.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • generative-ui

    PRODUTOCONSTRUIR

    Apoia criação de interfaces responsivas geradas dinamicamente.

    Quando usarAo criar interfaces responsivas geradas dinamicamente.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • progressive-reveal

    PRODUTOPADRONIZAR

    Estrutura revelação progressiva de informação.

    Quando usarQuando a informação precisa ser revelada aos poucos, não tudo de uma vez.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • frustration-checks

    PRODUTOAVALIAR

    Ajuda a identificar pontos de fricção na experiência.

    Quando usarPara identificar pontos de fricção antes que o usuário desista.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • feedback-loops

    PRODUTOAVALIAR

    Organiza ciclos de feedback e iteração.

    Quando usarAo organizar ciclos de teste, feedback e iteração.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

Design não é apenas aparência. Essa camada cuida de como o sistema responde.

Camada 58 SKILLS

8 Prompt Skills

Skills para controlar a forma como o Claude pensa, responde e segue padrões.

  • system-structure

    PROMPTSPADRONIZAR

    Organiza a anatomia do prompt e instruções do sistema.

    Quando usarAo montar a anatomia de um prompt ou instrução de sistema.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • persona-architecture

    PROMPTSPADRONIZAR

    Define traços, limites e comportamento de persona.

    Quando usarAo definir traços, limites e comportamento de uma persona.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • tone-calibration

    PROMPTSPADRONIZAR

    Controla nível de formalidade, calor e tom.

    Quando usarQuando o tom das respostas precisa de mais ou menos formalidade.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • emotional-design

    PROMPTSPROTEGER

    Ajuda a reduzir atrito em interações sensíveis.

    Quando usarEm interações sensíveis, onde o atrito emocional importa.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • template-design

    PROMPTSPADRONIZAR

    Cria formatos de resposta parametrizados.

    Quando usarAo criar formatos de resposta parametrizados e reaproveitáveis.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • few-shot-patterns

    PROMPTSPADRONIZAR

    Usa exemplos para ensinar o padrão desejado.

    Quando usarQuando exemplos ensinam o padrão desejado melhor que instruções.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • chain-of-thought

    PROMPTSCONSTRUIR

    Estrutura raciocínio em etapas quando apropriado.

    Quando usarQuando a tarefa exige raciocínio em etapas antes da resposta final.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • constraint-spec

    PROMPTSPADRONIZAR

    Define limites rígidos de formato e comportamento.

    Quando usarQuando o formato ou comportamento da resposta precisa de limites rígidos.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

Boas respostas começam por boas restrições.

Camada 66 SKILLS

6 Security Skills

Skills para segurança, avaliação, transparência e confiabilidade.

  • guardrails

    SEGURANÇAPROTEGER

    Define limites e barreiras de segurança.

    Quando usarAo definir limites e barreiras de segurança para o comportamento do Claude.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • trust-calibration

    SEGURANÇAPROTEGER

    Ajuda a calibrar evidência, confiança e fontes.

    Quando usarAo calibrar quanta confiança depositar em uma evidência ou fonte.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • transparency-patterns

    SEGURANÇAPROTEGER

    Estrutura transparência sobre incerteza e limitações.

    Quando usarQuando é preciso deixar clara a incerteza ou os limites de uma resposta.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • quality-rubrics

    SEGURANÇAAVALIAR

    Cria critérios objetivos para avaliar resultado.

    Quando usarAo criar critérios objetivos para avaliar um resultado.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • task-decomposition

    SEGURANÇAPADRONIZAR

    Quebra tarefas grandes em partes menores.

    Quando usarAo quebrar uma tarefa grande em partes menores e verificáveis.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

  • handoff-protocols

    SEGURANÇACONECTAR

    Cria transições claras entre etapas, pessoas ou agentes.

    Quando usarAo criar transições claras entre etapas, pessoas ou agentes.

    INSTALAÇÃO
    Link

    [ADICIONAR LINK]

    Comando

    [ADICIONAR COMANDO]

    Documentação

    [ADICIONAR DOCUMENTAÇÃO]

    Compatibilidade

    [VERIFICAR COMPATIBILIDADE]

Design melhor também exige confiança, controle e critérios claros.

Como escolher

Você não precisa das 42.

O objetivo não é instalar tudo. É montar uma stack que resolva os problemas reais do seu fluxo.

Pontos de partida

Stacks recomendadas

Stack 01

Frontend

Stack 02

Design visual

Stack 03

Motion

Stack 04

Produto

Stack 05

Prompts

Stack 06

Qualidade & segurança

Essas stacks são pontos de partida, não regras.

Não instale 42 skills. Monte seu sistema.

Escolha as que realmente melhoram seu fluxo e volte aqui quando surgir um novo problema.

  • 42SKILLS
  • 6CAMADAS
  • 1SISTEMA
Ver minha stackVer mais conteúdos
Voltar ao topo