Skills de Design para Claude Code, Codex e Seu Agente.

Arte generativa com p5.js: partículas semeadas, campos de fluxo e parâmetros ajustáveis.

Necessita: p5.js

• Images & Generative Art
• Generative art
• No OpenDesign

Aplica as cores e tipografia oficiais da marca Anthropic a qualquer artefato. Marca Anthropic apenas.

• Brand & Design Systems
• No OpenDesign

Cartazes originais e peças visuais estáticas entregues como PNG ou PDF.

• Images & Generative Art
• PNG / PDF
• No OpenDesign

Define uma direção visual, tipografia e layout distintos para interfaces web novas ou existentes.

• Web & UI
• Código UI
• No OpenDesign

GIFs animados que atendem aos limites de tamanho e dimensão do Slack.

• Motion & Video
• GIF
• No OpenDesign

Aplica ou gera temas de cor e tipografia para páginas, slides e documentos.

• Brand & Design Systems
• No OpenDesign

Artefatos HTML interativos com múltiplos componentes usando React, Tailwind e shadcn/ui.

• Web & UI
• HTML
• No OpenDesign

Consultoria de design de produto que propõe um sistema de design completo: estética, tipografia, cor, layout, movimento.

• Brand & Design Systems
• Design system
• No OpenDesign

Produz HTML/CSS com qualidade de produção a partir de uma direção de design acordada.

• Web & UI
• HTML

QA com olhar de designer de uma página construída: inconsistências, espaçamento, hierarquia, padrões de desleixo; depois os corrige.

• Revisão de Design e Acessibilidade
• Relatório de revisão
• No OpenDesign

Gera várias variantes de design em paralelo e abre um painel de comparação para feedback.

• Web & UI
• Código UI

Transforma uma descrição ou código-fonte Mermaid em um arquivo Excalidraw editável mais SVG e PNG renderizados.

Necessita: Excalidraw

• Diagramas e Visualização de Dados
• Diagram

Auditoria de design visual de aplicativos iOS em hardware real.

• Aplicativos Móveis
• Relatório de revisão

Revisa um plano de design quanto à completude e risco de experiência antes da implementação.

• Revisão de Design e Acessibilidade
• Relatório de revisão
• No OpenDesign

Banners para redes sociais, anúncios, heróis de sites e impressão.

• Images & Generative Art
• Image

Voz da marca, identidade visual, frameworks de mensagem e consistência da marca.

• Brand & Design Systems

Identidade de marca, design tokens, estilo de UI, geração de logotipos e programas de identidade corporativa.

Necessita: Serviço de geração de imagens (Gemini, Atlas Cloud ou MuAPI)

• Brand & Design Systems

Tokens de design em três níveis, especificações de componentes e geração de slides.

• Brand & Design Systems
• Design system

Decks de slides HTML estratégicos com Chart.js, tokens de design e layouts responsivos.

Requer: Chart.js

• Presentations
• HTML slides
• No OpenDesign

Estilização de UI acessível com shadcn/ui, Tailwind CSS e visuais baseados em canvas.

Requer: shadcn/ui, Tailwind CSS

• Web & UI
• Código UI

Inteligência de design UI/UX para web, mobile e desktop: layout, cor, tipografia e regras de UX.

• Web & UI
• Código UI
• No OpenDesign

Adiciona, busca, corrige, estiliza e compõe componentes shadcn em um projeto.

Requer: shadcn/ui

• Web & UI
• Código UI

Constrói interfaces de usuário acessíveis, responsivas e com qualidade de produção.

• Web & UI
• Código UI

Boards premium de brand guidelines, sistemas de logo e decks de identidade via geração de imagem.

Requer: Serviço de geração de imagem

• Brand & Design Systems
• Image
• No OpenDesign

Design de frontend anti-superficial para landing pages, portfólios e redesigns.

• Web & UI
• Código UI
• No OpenDesign

Layouts editoriais, variedade de layout e motion com GSAP em uma única skill frontend.

Requer: GSAP

• Web & UI
• Código UI

Ensina detalhes de agência high-end: tipografia, espaçamento, sombras, cards e motion.

• Web & UI

Gera e analisa uma imagem de design primeiro, depois implementa a página correspondente.

Requer: Serviço de geração de imagem

• Web & UI
• Código UI

Conceitos e fluxos de telas mobile de alta fidelidade via geração de imagens.

Requer: Serviço de geração de imagem

• Aplicativos Móveis
• Image
• No OpenDesign

Referências de design de websites seção por seção via geração de imagens.

Requer: Serviço de geração de imagem

• Web & UI
• Image
• No OpenDesign

Interfaces brutalistas que fundem tipografia suíça com estética de terminal.

• Web & UI
• Código UI

Interfaces limpas, monocromáticas e de estilo editorial.

• Web & UI
• Código UI

Audita um website ou app existente e o aprimora para qualidade visual premium.

• Revisão de Design e Acessibilidade
• Relatório de revisão

Escreve um DESIGN.md para Google Stitch com ênfase em distinção visual.

Requer: Google Stitch

• Brand & Design Systems
• DESIGN.md

Uma skill para projetar, criticar, auditar, polir, animar e refinar interfaces.

• Revisão de Design e Acessibilidade
• Código UI
• No OpenDesign

Transforma texto, notas ou um artigo em um vídeo explicativo sem rosto com visuais de cena inventados.

Requer: HyperFrames

• Motion & Video
• Video

Importa assets do Figma, tokens de marca e storyboards em uma composição HyperFrames.

Requer: HyperFrames, Figma

• Motion & Video
• Video

Cria ou edita um vídeo HyperFrames personalizado com várias cenas quando nenhum modelo se encaixa.

Requer: HyperFrames

• Motion & Video
• Video

Regras de animação, blueprints de cena, transições e adaptadores de runtime para HyperFrames.

Requer: HyperFrames

• Motion & Video
• Video

Direção criativa para vídeos HyperFrames: paleta, tipografia, composição, locução, ritmo.

Requer: HyperFrames

• Motion & Video
• Video

Punch-ins, zooms, reenquadramentos, movimentos Ken Burns e keyframes 2D/3D para HyperFrames.

Requer: HyperFrames

• Motion & Video
• Video

Motion graphics curtos voltados para design: tipografia cinética, contadores de estatísticas, vinhetas de logo, lower thirds.

Requer: HyperFrames

• Motion & Video
• Video

Transforma uma URL de produto, roteiro ou briefing em um vídeo de lançamento ou promocional de produto.

Requer: HyperFrames

• Motion & Video
• Video

Apresentações de slides HyperFrames interativas com fragmentos, ramificações e modo apresentador.

Requer: HyperFrames

• Presentations
• HTML slides

Decks de slides para desenvolvedores com Markdown, componentes Vue, destaque de código e animação.

Needs: Slidev

• Presentations
• HTML slides

Interfaces compatíveis com WCAG 2.2 com acessibilidade mobile e suporte a tecnologias assistivas.

• Revisão de Design e Acessibilidade
• Código UI

Entrevista de identidade de marca primeiro, depois gera e itera uma landing page através do Stitch.

Requer: Google Stitch

• Web & UI
• Código UI

Sistemas de design escaláveis: tokens, infraestrutura de temas, arquitetura de componentes.

• Brand & Design Systems
• Design system

Microinterações, movimento, transições e padrões de feedback do usuário.

• UX & Research

Dashboards de KPIs: seleção de métricas, escolha de gráficos, layout e padrões em tempo real.

• Diagramas e Visualização de Dados
• Dashboard

Interface Android nativa com Material Design 3 e Jetpack Compose.

• Aplicativos Móveis
• Código UI

Interface iOS nativa seguindo as diretrizes Human Interface Guidelines da Apple com SwiftUI.

• Aplicativos Móveis
• Código UI

Valida e repara decks PPTX editáveis quanto a geometria, acessibilidade e integridade do pacote.

• Presentations
• PPTX

Analisa um PPTX de referência quanto a tema, tipografia, ritmo de layout e diagnósticos.

• Presentations
• Relatório de revisão

Cria especificações JSON com coordenadas explícitas para apresentações PPTX editáveis.

• Presentations
• PPTX

Seleciona e posiciona ícones, imagens, SVGs e infográficos aprovados em uma apresentação PPTX.

• Presentations
• PPTX

Estilização React Native, navegação e animações com Reanimated.

Necessita: React Native

• Aplicativos Móveis
• Código UI

Layouts responsivos com container queries, tipografia fluida, CSS Grid e breakpoints mobile-first.

• Web & UI
• Código UI

Testa aplicações web com leitores de tela VoiceOver, NVDA e JAWS.

• Revisão de Design e Acessibilidade
• Relatório de revisão

Design systems com Tailwind CSS v4: tokens, bibliotecas de componentes, padrões responsivos.

Necessita: Tailwind CSS

• Brand & Design Systems
• Design system

Tipografia, teoria das cores, sistemas de espaçamento e iconografia para visuais coesos.

• Brand & Design Systems

Auditorias WCAG 2.2 com testes automatizados, verificações manuais e orientação de correção.

• Revisão de Design e Acessibilidade
• Relatório de revisão

Padrões de componentes reutilizáveis React, Vue e Svelte e estratégias de composição.

• Web & UI
• Código UI

Cria e edita arquivos de diagrama draw.io (.drawio, .drawio.svg, .drawio.png).

Necessita: draw.io

• Diagramas e Visualização de Dados
• Diagram

Gera diagramas Excalidraw e mapas mentais a partir de linguagem natural.

Necessita: Excalidraw

• Diagramas e Visualização de Dados
• Diagram

Parallax, seções fixas, rolagem horizontal e animações de rolagem de texto.

Requer: GSAP

• Motion & Video
• Código UI

Design profissional de UI/UX, componentes e sistemas de design no Penpot através de ferramentas MCP.

Necessita: Penpot MCP

• Web & UI
• Arquivo de design

Design de relatórios Power BI: seleção de gráficos, layout, legibilidade, acessibilidade.

Necessita: Power BI

• Diagramas e Visualização de Dados
• Dashboard

Inspeciona visualmente um site em execução e localiza e corrige problemas de layout.

• Revisão de Design e Acessibilidade
• Relatório de revisão

Constrói uma animação do zero, decidindo propósito, ferramenta, propriedades, curva e duração em ordem.

• Motion & Video
• Código UI

Gestos, molas e transições para React Native e Expo.

Requer: React Native / Expo

• Aplicativos Móveis
• Código UI

Glossário reverso que transforma uma descrição vaga de movimento no termo exato.

• Motion & Video

Gestos, movimento físico e hierarquia espacial da Apple traduzidos para a web.

• UX & Research
• Código UI

A filosofia de Emil Kowalski sobre polish de UI, design de componentes e decisões de animação.

• UX & Research
• No OpenDesign

Encontra lugares em uma UI que devem ser animados, com sugestões de parâmetros, e rejeita o resto.

• Motion & Video
• Relatório de revisão

Audita código de movimento existente e produz planos de implementação priorizados e autônomos.

• Revisão de Design e Acessibilidade
• Relatório de revisão

Constrói várias versões genuinamente diferentes de um elemento de UI com um seletor visual ao vivo.

• Web & UI
• Código UI

Revisa código de animação quanto a timing, interação e acabamento contra um padrão de alta qualidade.

• Revisão de Design e Acessibilidade
• Relatório de revisão
• No OpenDesign

Transições de página com sensação nativa usando a View Transition API do React.

Requer: React

• Motion & Video
• Código UI

Slides HTML ricos em animação do zero ou convertidos de arquivos PowerPoint (PPT).

• Presentations
• HTML slides
• No OpenDesign

Renderiza especificações JSON em UIs de terminal interativas com Ink.

Necessário: Ink

• Web & UI
• UI de terminal

Gera ou edita imagens raster: ilustrações, fotos, texturas, sprites, mockups.

Requer: Serviço de geração de imagem

• Images & Generative Art
• Image
• No OpenDesign

Decks PPT HTML horizontais de arquivo único em estilo magazine ou suíço, com visão de palestrante e sincronização.

• Presentations
• HTML slides
• No OpenDesign

Define ou aplica diretrizes de marca para qualquer produto: cor, tipo, logo e voz.

• Brand & Design Systems

Captura identidade de marca uma vez através de um assistente de 10 perguntas para documentos e decks posteriores.

• Brand & Design Systems
• Design system

Converte um deck Markdown em slides com marca.

• Presentations
• HTML slides

Design tokens, documentação de componentes, cálculos responsivos e handoff para desenvolvedores.

• Brand & Design Systems
• Design system

Personas baseadas em dados, mapas de jornada, frameworks de teste de usabilidade e síntese de pesquisa.

• UX & Research
• Documento de pesquisa

Protótipos HTML de alta fidelidade, slides, animação e visualizações; começa com três rascunhos.

• Web & UI
• HTML

Auditoria WCAG 2.1 AA de um design ou página: contraste, teclado, áreas de toque.

• Revisão de Design e Acessibilidade
• Relatório de revisão

Feedback estruturado de design sobre usabilidade, hierarquia e consistência.

• Revisão de Design e Acessibilidade
• Relatório de revisão

Especificações de handoff para desenvolvedores a partir de um design: layout, tokens, estados de componentes, breakpoints.

• Brand & Design Systems
• Especificação de handoff

Audita, documenta ou estende um design system existente.

• Brand & Design Systems
• Design system

Sintetiza entrevistas, pesquisas e notas de testes em temas e recomendações.

• UX & Research
• Documento de pesquisa

Planeja, conduz e sintetiza entrevistas com usuários, pesquisas e testes de usabilidade.

• UX & Research
• Documento de pesquisa

Escreve ou revisa textos de UX: microtextos, mensagens de erro, estados vazios, CTAs.

• UX & Research

API principal do GSAP: to/from/fromTo, easing, stagger, matchMedia, movimento reduzido.

Requer: GSAP

• Motion & Video
• Código UI
• No OpenDesign

GSAP em Vue, Svelte e outros frameworks não-React: ciclo de vida, escopo e limpeza.

Requer: GSAP

• Motion & Video
• Código UI
• No OpenDesign

Desempenho com GSAP: transforms, evitando layout thrash, will-change, batching.

Requer: GSAP

• Motion & Video
• Código UI
• No OpenDesign

Plugins GSAP: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG e física.

Requer: GSAP

• Motion & Video
• Código UI
• No OpenDesign

GSAP no React e Next.js com o hook useGSAP, refs, contexto e limpeza.

Requer: GSAP

• Motion & Video
• Código UI
• No OpenDesign

Animação vinculada ao scroll com ScrollTrigger: fixação, scrub, triggers, parallax.

Requer: GSAP

• Motion & Video
• Código UI
• No OpenDesign

Timelines do GSAP: parâmetro de posição, aninhamento e controle de reprodução.

Requer: GSAP

• Motion & Video
• Código UI
• No OpenDesign

Auxiliares do gsap.utils: clamp, mapRange, interpolate, snap, wrap, pipe.

Requer: GSAP

• Motion & Video
• Código UI
• No OpenDesign

Paletas de cores prontas para apresentação e combinações de fontes para PPT e tarefas de design.

• Brand & Design Systems

Um sistema visual consistente para slides PPT a partir de receitas de raio e espaçamento.

• Presentations

Transforma fotos de pessoas, animais de estimação, objetos ou logotipos em quatro stickers GIF com legenda.

• Motion & Video
• GIF
• No OpenDesign

Gera, edita e lê apresentações de slides PowerPoint (PPTX) editáveis.

• Presentations
• PPTX
• No OpenDesign

Shaders GLSL: ray marching, SDFs, fluidos, partículas, visuais procedurais.

Requer: GLSL / WebGL

• Images & Generative Art
• Generative art
• No OpenDesign

Implementa slides individuais de PowerPoint com PptxGenJS.

Requer: PptxGenJS

• Presentations
• PPTX

Remove rapidamente problemas de UI no código corrigindo espaçamento, hierarquia, tipografia e pequenos problemas de layout.

• Revisão de Design e Acessibilidade
• Código UI

Cria ou atualiza um DESIGN.md a partir de um repositório de produto existente ou site público.

• Brand & Design Systems
• DESIGN.md

Audita e corrige erros de ARIA, teclado, foco, contraste e formulários.

• Revisão de Design e Acessibilidade
• Relatório de revisão

Encontra e corrige animação CSS/JS travada e movimento vinculado ao scroll.

• Motion & Video
• Relatório de revisão

Audita uma superfície de produto em relação às suas próprias evidências de design e escreve planos de implementação.

• Revisão de Design e Acessibilidade
• Relatório de revisão

Analisa projetos Stitch e escreve um DESIGN.md semântico.

Requer: Google Stitch

• Brand & Design Systems
• DESIGN.md
• No OpenDesign

Reescreve ideias de UI vagas em prompts polidos e otimizados para Stitch.

Requer: Google Stitch

• Web & UI
• No OpenDesign

Converte designs Stitch em dashboards React + Vite com TanStack Query.

Requer: Google Stitch

• Web & UI
• Código UI

Vídeos de walkthrough de projetos Stitch com transições e zooms Remotion.

Precisa de: Google Stitch, Remotion

• Motion & Video
• Video
• No OpenDesign

Integração e customização de componentes shadcn/ui: descoberta, instalação, boas práticas.

Requer: shadcn/ui

• Web & UI
• Código UI
• No OpenDesign

Converte código frontend em um design Stitch por meio de HTML estático e extração de design-system.

Requer: Google Stitch

• Web & UI
• Arquivo de design

Extrai um DESIGN.md completo de código-fonte frontend em qualquer framework.

• Brand & Design Systems
• DESIGN.md

Extrai snapshots de HTML estático autocontido com CSS e imagens inline.

• Web & UI
• HTML

Gera, edita e cria variações de telas no Stitch a partir de texto ou imagens de referência.

Requer: Google Stitch

• Web & UI
• Arquivo de design

Cria, atualiza e aplica design systems no Stitch através de ferramentas MCP.

Requer: Google Stitch

• Brand & Design Systems
• Design system

Converte ou sincroniza designs Stitch em componentes React + Vite modulares.

Requer: Google Stitch

• Web & UI
• Código UI

Converte ou sincroniza designs HTML Stitch em componentes React Native.

Necessita: Google Stitch, React Native

• Aplicativos Móveis
• Código UI

Design de interface craft-first para dashboards, painéis de admin, ferramentas SaaS e páginas de configuração.

• Web & UI
• Código UI

Princípios de design-engineering para polimento de hover, sombra, borda, ícone, tipografia e microinterações.

• UX & Research

Audita e melhora acessibilidade web seguindo WCAG 2.2.

• Revisão de Design e Acessibilidade
• Relatório de revisão

Aplica princípios de motion design: timing, easing, coreografia e fundamentos de animação.

• Motion & Video

Assistente completo de pesquisa de usuário: qualitativa e quantitativa, guias e planos.

• UX & Research
• Documento de pesquisa

Implementa tokens, componentes e layouts adaptativos do Material Design 3.

• Aplicativos Móveis
• Código UI

Movimento intencional de interação, ou revisão de animação existente, segundo Kowalski, Krehel e Tompkins.

• Motion & Video

Nomenclatura, teoria, espaços, paletas, rampas, gradientes, conversões e contraste de cores.

• Brand & Design Systems
• No OpenDesign

Renderiza dados como gráficos de barra, linha, pizza, radar, Sankey, mapa mental e fluxo através da API AntV.

Necessita: API AntV

• Diagramas e Visualização de Dados
• Imagem de gráfico

Cria infográficos a partir de um texto fornecido.

Necessita: API AntV

• Diagramas e Visualização de Dados
• Image

Microcopy centrado no usuário e acessível: botões, rótulos, erros, formulários, onboarding.

• UX & Research