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

Teste a UI existente sob estresse com dados extremos realistas e um alternador de comparação apenas para desenvolvimento; relate as falhas antes de corrigi-las.

Código-fonte do componente, dados de demonstração existentes e limites dos campos; um app em execução e um navegador para verificação visual.

• Testes de estresse de UI
• Fixtures de casos extremos
• Relatório de revisão

Diagnostique quadros perdidos em animações web: custo de renderização, disputa pela thread principal, atualizações do React a cada quadro e variáveis CSS herdadas.

Código da animação e uma interação reproduzível; profiling no navegador e um dispositivo real de destino para verificar o desempenho.

• Animação web
• Desempenho de quadros
• Revisão diagnóstica

Recrie uma captura de tela fornecida no app existente, depois renderize na viewport de referência e corrija as diferenças visíveis.

Forneça uma imagem de referência legível, a viewport de destino, acesso ao projeto e os assets disponíveis. A renderização no navegador é necessária para verificar a correspondência visual. Não é necessário ter conta no UIZZE nem conexão com MCP.

• Captura de tela para código
• Correspondência com a referência
• Implementação de UI

Direcione pedidos de vídeo ao fluxo de trabalho certo, retome projetos existentes e coordene composição, mídia, prévia e renderização em HTML.

A CLI exige Node.js 22+ e FFmpeg. Comece pelas skills principais; os fluxos de criação são instalados sob demanda. Serviços de mídia e renderização na nuvem podem acrescentar requisitos.

• HTML para vídeo
• Roteamento de fluxo de trabalho
• Produção de vídeo

Explique ideias técnicas com mecanismos isométricos em SVG bem elaborados e interação orientada por modelo.

O kit exige Node.js 20.10+ e Chrome ou Chromium para as verificações. A CLI de skills tem seu próprio requisito de Node; o README registra 22.20+ para a CLI 1.7.1.

• SVG isométrico
• Explicações técnicas
• Figuras interativas

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
• Código UI

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.

• Motion & Video
• Código UI

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.

• Web & UI
• Código UI

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

• Web & UI
• 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.

• Web & UI

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

Mantenha cada achado de acessibilidade conectado ao elemento afetado, à correção proposta e ao resultado da verificação.

Python para as ferramentas incluídas, acesso ao código-fonte e um navegador ou configuração de tecnologia assistiva para validação em contexto.

• Acessibilidade
• Revisão de design
• Front-end

Planeje uma apresentação acadêmica em torno de seu argumento, de suas evidências e dos títulos dos slides; uma ferramenta separada cria o arquivo PPTX.

Exige uma skill PPTX separada. A entrada lista markitdown, PptxGenJS, LibreOffice e Poppler como dependências relacionadas à implementação.

• Apresentações
• Pesquisa acadêmica
• PowerPoint

Escreva scripts de ExtendScript para criar e editar documentos, artes e exportações do Illustrator.

Adobe Illustrator CC ou posterior; os scripts gerados são executados no ambiente ExtendScript dele.

• Design Vetorial
• Automação
• Illustrator

Agrupe observações de pesquisa em temas preservando os vínculos com a evidência original.

Use um agente capaz de ler as transcrições ou anotações fornecidas. Informe os IDs dos participantes e a pergunta de design; a skill sintetiza evidências existentes, não coleta entrevistas.

• Pesquisa de UX
• Síntese

Dê a uma transição um propósito claro e um perfil de movimento que apoie a mudança de estado da interface.

Forneça os estados anterior e posterior da interface, o gatilho e os dispositivos de destino. Use uma prévia executável para verificar o tempo, a interrupção e o comportamento de movimento reduzido.

• Movimento de interface
• Orientação de design

Comece pelos objetos e restrições reais do produto antes de escolher um tratamento visual.

Um agente capaz de ler arquivos do projeto; suporte de renderização para verificações visuais. O UIZZE MCP pago é opcional.

• Design de UI
• Revisão de design

Crie gráficos com AntV G2 v5 usando suas marcas, codificações, escalas e interações.

Exige @antv/g2 v5 ou o bundle para navegador documentado. A recuperação opcional de referências usa o serviço externo de contexto AntV.

• Data Visualization
• Gráficos
• JavaScript

Visualize dados de rede com o AntV G6 v5, incluindo layouts de grafo e exploração interativa.

Um aplicativo que use @antv/g6 v5, um contêiner de grafo no navegador e acesso à rede, caso o serviço de recuperação de referências documentado seja necessário. Verifique as APIs na versão instalada.

• Visualização de grafos
• Redes
• AntV

Crie um editor de diagramas de nós e arestas com o AntV X6, incluindo conexões, comportamento de edição e os plugins necessários.

Use a API documentada do @antv/x6 v3, com um canvas de navegador e os plugins necessários. Buscar referências adicionais exige acesso à rede. Confira os exemplos com a versão instalada.

• Editores de diagramas
• Interfaces de nós
• AntV

Crie um vídeo explicativo original, baseado em fontes, com narração e uma linguagem visual deliberadamente consistente.

Exige o projeto Remotion/Node fornecido, scripts auxiliares em Python, capacidade de renderização e uma rota de TTS adequada. Os padrões documentados para chinês e inglês usam mecanismos de voz diferentes; a construção com vários agentes faz parte do fluxo de trabalho descrito.

• Motion graphics
• Vídeo
• Remotion

Componha um conjunto coordenado de imagens para a página de um app em loja a partir de capturas de tela, legendas e ativos visuais.

Exige o editor Next.js empacotado, um ambiente compatível de Node e gerenciador de pacotes e um navegador. A exportação PNG usa html-to-image; capturas de origem, fontes e outros ativos precisam ter direitos de uso adequados.

• Marketing de apps
• Capturas de tela
• Localização

Revise interfaces de plataformas Apple com base em orientações de design e acessibilidade específicas da plataforma.

Python 3 para o verificador, que usa apenas a biblioteca padrão; as Human Interface Guidelines (HIG) da Apple atuais; e acesso a dispositivo ou simulador para verificações de comportamento.

• UI nativa
• Acessibilidade
• Revisão de design

Planeje e gere ilustrações que expliquem ideias-chave nos pontos relevantes de um artigo.

É preciso um backend de geração raster disponível e os arquivos de referência e configuração da Skill; o acesso ao backend e o custo são separados.

• Ilustração editorial
• Design de conteúdo

Planeje o que cada quadro ensina antes de gerar as páginas do quadrinho.

Um backend de imagem disponível; Bun ou um ambiente Bun baseado em npx para o script de mesclagem em PDF fornecido.

• Quadrinhos
• Design educacional
• Narrativa

Gere uma capa de artigo em torno de uma ideia central, com composição e estilo visual definidos.

Um backend de imagem raster disponível e as referências de configuração e de direção de arte da Skill.

• Design editorial
• Imagens de capa

Use um fluxo de design baseado em arquivos para protótipos, conceitos de apresentação e sistemas visuais reutilizáveis.

Um agente com acesso a arquivos e a metodologia, os guias integrados, os documentos de referência e os scripts do repositório. Os caminhos de exportação e importação têm seus próprios pré-requisitos.

• Prototipagem
• Sistemas de design
• Apresentações

Mantenha relações, rótulos e caminhos de conectores explícitos em um arquivo vetorial inspecionável.

Um ambiente de texto/código para SVG; Bun ou Bun via npx para o script de conversão PNG fornecido.

• Diagramas
• SVG
• Design de informação

Execute tarefas de geração e edição de imagens por meio de provedores compatíveis, incluindo fluxos em lote.

Bun ou um ambiente Bun baseado em npx, adaptadores de provedor completos e credenciais ou login para a rota compatível escolhida.

• Geração de imagens
• Fluxos em lote
• Ativos visuais

Transforme conteúdo em uma infografia usando um layout de comparação, hierarquia, processo ou visão geral adequado ao material.

Um backend de imagem raster disponível, além de referências de layout, estilo e configuração.

• Infográficos
• Design de informação

Gere slides ilustrados e monte uma apresentação baseada em imagens para compartilhar; os objetos individuais dos slides não são editáveis.

Um backend de geração de imagens raster e Bun, ou Bun via npx, para os scripts de montagem de PPTX/PDF.

• Apresentações
• Design editorial

Crie uma série visualmente consistente de cards de imagem para o Xiaohongshu, com uma ideia principal por card.

Um backend raster disponível com suporte adequado a referências, além de configuração e referências de layout de cards.

• Gráficos para redes sociais
• Design de conteúdo
• Cards de imagem

Transforme material de origem em um artigo HTML legível, com tipografia, layout e ilustrações editoriais.

O build documentado usa Node/npm, Vite, React, TypeScript e Reacticle. A extração de documentos e a saída opcional em PDF podem exigir ferramentas adicionais; imagens geradas precisam de um backend disponível separadamente.

• Design editorial
• HTML
• Texto longo

Analise os agrupamentos de cartões dos participantes para propor categorias de navegação e identificar itens ambíguos.

Forneça os resultados completos do card sorting, incluindo as colocações e os rótulos de cada participante e o método do estudo. A skill analisa as evidências fornecidas; o recrutamento e a coleta de dados são etapas separadas.

• Pesquisa de UX
• Síntese

Planeje um teste de primeiro clique para verificar se as pessoas conseguem identificar por onde começar uma tarefa.

Forneça a tela ou o protótipo, o objetivo do usuário e os critérios de recrutamento. A skill cria um plano de teste; executar as sessões e coletar os cliques exige uma configuração de estudo separada.

• UX
• Orientação de Design

Transforme material de origem em slides ilustrados e monte um PPTX com conteúdo de slides baseado em imagens, e não editável individualmente.

Python 3, um backend de geração de imagens disponível e os scripts de montagem e registro de estado do repositório. Os documentos de fluxo de trabalho referenciados são necessários para a execução real.

• Apresentações
• Geração de imagens

Transforme uma cor de marca em um conjunto utilizável de papéis de interface e combinações de primeiro plano e fundo.

Forneça as cores da marca, os papéis da interface e as metas de acessibilidade. Use estados reais dos componentes e uma ferramenta de verificação de contraste para avaliar as combinações de cores propostas.

• Design de cor
• Orientação de design

Torne um componente implementável explicando seu comportamento com o mesmo cuidado dedicado à aparência.

Informe a finalidade do componente, as variantes visuais e a plataforma de destino. O resultado é uma especificação para implementação e testes, não um componente implementado.

• Design Systems
• Especificações

Projete o que o sistema diz, o que ele espera receber de volta e como se recupera quando as duas coisas não coincidem.

Forneça as tarefas compatíveis, as restrições do canal e os requisitos de confirmação. Fluxos de voz também exigem testes em dispositivos e de reconhecimento de fala; um diálogo escrito, por si só, não permite estabelecer a qualidade do reconhecimento.

• UX
• Orientação de design

Traduza a hierarquia da interface para superfícies escuras em vez de inverter as cores.

Comece com uma paleta existente do modo claro, exemplos de componentes e ativos de mídia. Use uma interface renderizada para verificar o contraste no modo escuro, a troca de tema e o tratamento de imagens.

• Design de cor
• Orientação de design

Gere layouts alternativos de slides a partir de uma única fonte de conteúdo e use o editor local para visualizá-los e exportá-los.

Exige Node.js 20+, npm e o gerador incluído no pacote do skill. Use o serviço local de pré-visualização para os recursos de edição e exportação; um servidor estático genérico não oferece essas APIs.

• Apresentações
• Slides HTML
• PPTX

Escolha o gráfico que torna a comparação compreensível, não o gráfico que parece mais elaborado.

Forneça os dados reais, as definições dos campos, a pergunta do leitor e as restrições de exibição. A skill orienta o design do gráfico; a validação dos dados e a implementação do gráfico continuam sendo tarefas separadas.

• Data Visualization
• Orientação de design

Dê às decisões visuais nomes e relações que os componentes possam reutilizar.

Forneça os valores visuais existentes, exemplos de componentes e restrições de nomenclatura. A skill define nomes e relações de tokens; ferramentas de exportação e integração com frameworks exigem configuração separada.

• Design Systems
• Especificações

Capture experiências que se desenrolam entre as sessões, em vez de tentar reconstruí-las em uma única entrevista.

Informe o objetivo da pesquisa, os critérios dos participantes, o período de tempo e as ferramentas de registro viáveis. O resultado é um plano de estudo; o recrutamento, os check-ins e a coleta de dados dos participantes ainda precisam ser realizados.

• Pesquisa de UX
• Planejamento de estudos

Estabeleça primeiro a captura de tela desejada e depois use-a como alvo da implementação.

Exige uma imagem-alvo ou acesso à geração de imagens, caso nenhuma seja fornecida. Os requisitos detalhados de ferramentas dependem do fluxo de trabalho referenciado selecionado e não foram estabelecidos apenas pela entrada.

• Iteração visual
• Design de jogos
• Prototipagem

Compartilhe a perspectiva de um usuário mantendo a evidência direta separada da interpretação.

Um agente que consiga ler suas anotações de pesquisa, um usuário ou segmento definido e a decisão de design que o mapa deve embasar.

• Pesquisa de UX
• Síntese

Faça com que as falhas expliquem o que aconteceu e deem às pessoas um caminho a seguir sem perder o trabalho feito.

Um agente que consiga ler os fluxos afetados, os casos de falha conhecidos e as ações de recuperação que seu produto realmente oferece.

• UX
• Orientação de design

Mapeie componentes publicados do Figma para os componentes de código correspondentes com o Code Connect.

Figma MCP conectado, acesso aos componentes publicados e ao código-fonte, além de direito de uso atual do Code Connect e permissões de edição.

• Figma
• Design systems
• Handoff para desenvolvedores

Documente os caminhos do repositório, os componentes e as convenções que um agente deve usar para implementar designs do Figma.

Conexão com o Figma MCP e acesso à base de código de destino; o formato de regras de destino depende do host de codificação.

• Figma
• Design Systems
• Regras para agentes

Crie uma tela editável no Figma que permaneça conectada ao seu design system.

Figma MCP conectado, acesso ao arquivo de destino, um design system publicado e o Skill complementar figma-use para operações no canvas.

• Figma
• Design de UI
• Design systems

Crie uma biblioteca Figma reutilizável, começando pelos design tokens e depois adicionando componentes.

Figma MCP com acesso a arquivo editável, acesso ao repositório e a Skill complementar figma-use, além das referências auxiliares.

• Figma
• Design Systems
• Bibliotecas de componentes

Implemente um design do Figma usando os componentes e as convenções do repositório de destino e, depois, compare o resultado com o design.

Figma MCP conectado, acesso ao design selecionado e ao repositório de destino, além de uma prévia executável para validação visual.

• Figma
• Design de front-end
• Handoff para desenvolvedores

Especifique o caminho do primeiro campo até o envio bem-sucedido, incluindo correções e retornos posteriores.

Um agente que consiga ler o briefing do formulário, os campos obrigatórios e as regras de validação, e as telas de formulário existentes.

• UX
• Orientação de design

Transforme uma tarefa de modelagem com dimensões em objetos do FreeCAD que continuem inspecionáveis e ajustáveis.

FreeCAD com o Python incluído; o trabalho com GUI usa também o PySide incluído, e o trabalho com scenegraph usa o Pivy.

• Design 3D
• CAD
• Python

Gere e salve recursos de imagem por meio de um provedor compatível, usando as credenciais configuradas do projeto.

É necessária uma chave de API de um provedor compatível e acesso à rede; a disponibilidade de modelos e as cobranças de uso devem ser verificadas separadamente.

• Geração de imagens
• Recursos visuais

Projete o que acontece antes, durante e depois de um gesto, não apenas a ação final do deslize.

Um agente que consiga ler o briefing de interação, as plataformas-alvo e as ações disponíveis por botões ou menus.

• UX
• Orientação de design

Prepare prompts de imagem e execute a geração ou a edição por meio de uma ferramenta de imagem nativa disponível ou do fluxo de API local configurado.

O modo de API local exige ativação explícita no Garden, scripts Node e credenciais configuradas. O modo nativo depende da ferramenta de imagem do host. Acesso a modelos, preços e parâmetros compatíveis devem ser verificados nesse ambiente.

• Geração de imagens
• Design de prompts
• Edição de imagens

Revise a usabilidade de interfaces e documente as evidências por trás de cada achado, sem apresentar o julgamento de especialistas como pesquisa com participantes.

Um agente capaz de inspecionar a interface, um conjunto definido de tarefas dos usuários e as restrições relevantes do domínio.

• UX
• Orientação de design

Escolha um tratamento de foil ou uma transformação de imagem inteira que depende do ângulo antes de montar o card.

Exige geração de imagens, Python, Blender e um ambiente web para o visualizador entregue. A fonte menciona a instalação local de dependências durante o pipeline.

• Design 3D
• Cards Colecionáveis
• Blender

Crie um curta a partir de uma direção de arte, não de uma sequência de transições de slides. O Huashu Art Motion combina cenas desenhadas em código, sprites de personagens e revisão de movimento em um fluxo de renderização local.

A renderização local exige uv, FFmpeg e Playwright Chromium. Forneça quadros de personagens existentes ou use um fluxo separado de geração de imagens para sprites de aparência humana; áudio e fontes precisam de seus próprios arquivos e permissões.

• Animação artística
• Canvas
• Curtas-metragens

Crie uma skill de design reutilizável a partir de referências visuais, regras de design e tokens.

Exige acesso a arquivos, ferramentas adequadas para inspecionar referências, Node para validate.mjs e revisão no navegador para maior confiança visual. A disponibilidade das ferramentas afeta a fidelidade da extração.

• Sistemas de design
• Criação de Skills
• Tokens de design

Dê aos ícones um sistema consistente de construção e nomenclatura, em vez de reunir símbolos sem relação entre si.

Um agente capaz de inspecionar ícones representativos, seus tamanhos previstos e os formatos de design e de código necessários.

• Design Systems
• Especificações

Dê às ilustrações encomendadas ou recorrentes uma linguagem visual compartilhada e uma função clara na interface.

Um agente capaz de analisar referências visuais, cores do produto e as telas e tamanhos em que as ilustrações vão aparecer.

• UX
• Orientação de design

Converta slides visuais em uma apresentação estruturada, em vez de colocar capturas de tela atrás de texto editável.

Exige a CLI editppt, recursos adequados de geração de imagens e execução multiagente para execuções com várias páginas. O PaddleOCR é um auxiliar opcional configurado; as dicas offline têm um perfil de qualidade diferente.

• Apresentações
• PowerPoint
• Reconstrução

Decida onde cada informação deve ficar antes de decidir qual será a aparência da navegação.

Exige conteúdo do produto e evidências sobre as tarefas dos usuários; a fonte não exige um aplicativo de design específico.

• Estratégia de UX
• Estrutura de Conteúdo

Transforme objetivos de pesquisa em perguntas que convidem a relatar evidências em vez de sugerir uma resposta.

Objetivos de pesquisa, critérios de participantes e restrições da sessão são as principais entradas; nenhum serviço de gravação ou recrutamento é fornecido.

• Pesquisa de UX
• Entrevistas

Reformule uma decisão de produto em torno do que a pessoa está tentando realizar.

Exige pesquisa com usuários ou hipóteses claramente identificadas; a skill não realiza entrevistas por conta própria.

• Pesquisa de UX
• Estratégia de Produto

Conecte pontos de contato isolados na experiência que a pessoa realmente vive.

Usa personas, pesquisas e análises já existentes; não há medição automática de sentimento.

• Pesquisa de UX
• Mapeamento de jornada

Conecte o argumento da página e suas regras visuais em torno de uma única conversão pretendida.

Nenhum runtime de aplicação específico é necessário; os exemplos de implementação fazem referência a valores do Tailwind, IntersectionObserver e ferramentas opcionais de animação.

• Landing Pages
• Copywriting
• Web Design

Conecte uma proposta de produto real às seções da página antes de gerar os componentes.

Um projeto React ou Next.js compatível com Tailwind; os componentes de UI referenciados e as ferramentas opcionais de análise de marca podem exigir configuração separada.

• Landing Pages
• Copywriting
• Frontend

Defina colunas, margens e comportamento responsivo compartilhados para layouts de página relacionados.

Não há dependência de execução nomeada; requer restrições reais de conteúdo para escolher valores de grade úteis.

• Design de UI
• Layout responsivo

Mostre o que está acontecendo durante uma espera sem enganar as pessoas sobre o progresso.

O tempo preciso das operações e os recursos de progresso devem vir da equipe de produto ou de implementação.

• Design de interação
• UX de carregamento

Prepare a interface para diferenças de idioma, não apenas para strings traduzidas.

Exige texto na localidade de destino, fontes e revisão linguística ou cultural adequada; nenhuma plataforma de localização automática está incluída.

• Sistemas de design
• Localização

Construa e teste a marca antes de expandi-la para um kit de marca completo.

A fonte descreve scripts auxiliares em Python sem dependências, mas a renderização real de imagens precisa de um renderizador disponível, como CairoSVG, Inkscape, Chrome ou outra opção compatível.

• Branding
• Logo Design
• SVG

Entregue à engenharia o comportamento por trás de uma pequena interação, e não apenas uma referência de animação.

Não é necessária nenhuma biblioteca de animação específica; ainda assim, é preciso testar no dispositivo de destino.

• Design de interação
• Handoff de UI

Torne as decisões de animação reutilizáveis entre componentes e equipes.

Exige uma implementação de tokens ou equivalente da plataforma; a fonte não obriga o uso de um framework de animação.

• Design Systems
• Movimento

Gere ou edite imagens com OpenRouter usando imagens de referência e um script Python incluído.

uv, o script Python incluído e uma OPENROUTER_API_KEY com acesso adequado aos modelos e créditos.

• Edição de imagem
• Composição

Transforme uma hierarquia de informação em controles de navegação reconhecíveis e caminhos claros entre destinos.

Requer uma hierarquia de informação e as prioridades de tarefas; nenhum pacote de componentes de navegação é fornecido.

• Design de interação
• Navegação

Ajude novos usuários a chegar a um resultado útil antes de pedir que aprendam o produto inteiro.

Exige definições de ativação específicas do produto e instrumentação para qualquer medição posterior.

• Design de interação
• Onboarding

Aplique um sistema de marca a uma página ou apresentação HTML, usando regras de layout adequadas ao formato escolhido.

A extração de marca por URL exige o Firecrawl. As saídas padrão evitam dependências externas de JavaScript, mas fontes ou imagens ainda podem exigir disponibilidade e direitos próprios.

• Web design
• Apresentações
• Sistemas de marca

Um guia de frontend com opiniões fortes para landing pages expressivas, portfólios e apresentações interativas.

Um projeto de frontend e quaisquer bibliotecas de animação escolhidas deliberadamente; o guia não exige um único runtime.

• Design de frontend
• Movimento
• Tipografia

Mantenha o texto e o tempo das legendas em uma estrutura de dados definida antes de estilizá-las na linha do tempo do vídeo.

Um projeto Remotion, @remotion/captions e os arquivos de referência relevantes de transcrição, importação e exibição.

• Vídeo
• Legendas

Configure um projeto e uma composição Remotion a partir de um briefing de vídeo, com prévia disponível durante o desenvolvimento.

Node.js, Git, instalação de pacotes, o Studio do Remotion e as referências relacionadas de composição e layout.

• Vídeo
• React

Torne um vídeo editável no Studio alterando a forma como o código React expõe camadas, tempo e controles.

É necessária uma versão do Remotion compatível com as APIs Interactive documentadas; @remotion/paths também é necessário para a interpolação de caminhos editável descrita.

• Vídeo
• React
• Interação

Crie mapas animados em Remotion, escolhendo a técnica de mapeamento, o provedor e os dados para o plano pretendido.

Remotion mais as bibliotecas e os dados da técnica selecionada; o Mapbox exige uma chave, segundo a fonte capturada.

• Vídeo
• Mapas

Escreva markup React que se comporta como uma linha do tempo de vídeo, e não como uma página web com animação CSS.

Remotion e pacotes específicos de recursos compatíveis com a versão do projeto; as referências vinculadas determinam requisitos adicionais de mídia, efeitos, fontes ou exportação.

• Vídeo
• React
• Movimento

Escolha uma macro para uma sequência de comandos e um script quando a tarefa de modelagem exigir lógica.

Rhino 7 ou posterior; o Rhino 8 é o ambiente recomendado pela fonte para o Script Editor unificado.

• Design 3D
• CAD
• Automação

Uma viagem de câmera pré-renderizada controlada pela rolagem, não um mundo 3D em tempo real.

O pipeline documentado usa Higgsfield e um caminho de vídeo Monid, além de ffmpeg/ffprobe e de um ambiente de navegador. Contas em provedores, créditos, recursos dos modelos e qualquer rota opcional de imagem exigem nova verificação.

• Animação com Scroll
• Vídeo
• Landing Pages

Projete a experiência completa de recuperação de informações, incluindo as buscas que falham.

Os serviços de busca e a instrumentação de consultas são externos a esta orientação.

• Design de interação
• Busca

Revele o trabalho operacional por trás do que o cliente vê.

Exige evidências de stakeholders e de processos; não acessa sistemas operacionais por conta própria.

• Estratégia de UX
• Design de Serviços

Escreva shaders Slang e verifique como suas entradas, recursos e saídas se conectam ao renderizador.

Um ambiente de compilação Slang e de renderização adequado ao backend de destino; é necessária validação no lado do host para afirmações sobre a integração.

• Shaders
• Gráficos de GPU
• Design 3D

Escolha o espaçamento pela relação e pela finalidade, não por ajustes isolados de pixels.

Nenhuma ferramenta de tokens específica é necessária; a aplicação depende do sistema de componentes existente.

• Design de UI
• Design Tokens

Descreva o que pode acontecer a seguir a partir de cada estado de um componente.

Nenhum pacote state-machine específico é necessário; a implementação real e os testes continuam sendo trabalho posterior.

• Design de interação
• Modelagem de comportamento

Permita que uma única biblioteca de componentes mude de aparência sem duplicar a estrutura.

A implementação usa o sistema de tokens do projeto ou equivalentes da plataforma; a troca em tempo de execução precisa ser construída e testada.

• Design Systems
• Temas

Recupere uma marca ou um ícone de serviço já existente no formato de que seu projeto precisa.

Exige acesso à rede para o registro ou a CDN. As integrações com React, CLI, Figma e MCP são superfícies opcionais, não pré-requisitos para a simples recuperação de URLs.

• Ativos de marca
• SVG
• Diagramas de nuvem

Defina uma estratégia de reprodução e blending para um modelo de personagem ou produto já carregado.

Um projeto Three.js e um renderer funcionando; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

• 3D
• Three.js

Escolha uma representação de forma antes de adicionar estilo de superfície ou animação.

Um projeto Three.js e um renderizador funcionando; confira os exemplos da fonte com a versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

• 3D
• Three.js

Conecte um gesto ao objeto 3D pretendido usando as coordenadas reais do canvas e da câmera.

Um projeto Three.js e um renderer funcionando; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

• 3D
• Three.js

Deixe um modelo legível com uma iluminação planejada, em vez de brilho indiscriminado.

Um projeto Three.js funcional e um renderer; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

• 3D
• Three.js

Combine o modelo de sombreamento com a superfície e depois inspecione-o sob a iluminação pretendida.

Um projeto Three.js funcional e um renderizador; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

• 3D
• Three.js

Trate os efeitos de tela como um pipeline de renderização ordenado, e não como filtros independentes.

Um projeto Three.js e um renderer funcionando; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

• 3D
• Three.js

Use comportamento personalizado de vértices ou pixels quando as predefinições de material não conseguem expressar o efeito.

Um projeto e um renderer Three.js funcionando; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

• 3D
• Three.js

Atribua a cada imagem o papel correto antes de diagnosticar uma superfície esticada ou desbotada.

Um projeto Three.js funcional e um renderizador; verifique os exemplos da fonte com a versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

• 3D
• Three.js

Crie uma hierarquia legível a partir de um pequeno conjunto de estilos de texto documentados.

Exige os arquivos de fonte reais ou as fontes disponíveis na plataforma para uma validação visual significativa.

• Design de UI
• Tipografia

Decida o que o estudo precisa descobrir antes de agendar as sessões.

Exige um artefato de teste utilizável e acesso a participantes; nenhuma plataforma de recrutamento ou de sessões é fornecida.

• Pesquisa de UX
• Teste de usabilidade

Mostre as rotas que um usuário pode seguir para concluir um objetivo.

A fonte não exige nenhum aplicativo de diagramação; o formato de saída escolhido deve preservar uma notação clara.

• Prototipagem
• Fluxos de usuário

Dê às decisões de produto uma referência de usuário consistente, sem inventar uma história de cliente.

Exige evidências reais de usuários para afirmações baseadas em pesquisa; URLs de produto fornecidas podem exigir investigação separada.

• Pesquisa de UX
• Personas

Planeje e monte um vídeo de produto com Remotion a partir de capturas de interface, instruções de planos e uma composição cronometrada.

Exige um ambiente Remotion/Node, captura pelo navegador e ffmpeg. Alguns componentes precisam de pacotes relacionados ao Three.js; a análise de música e a exportação para Jianying, ambas opcionais, adicionam dependências próprias. Verifique por conta própria a licença aplicável de Remotion.

• Vídeo de produto
• Remotion
• Motion design

Escolha o que deve ser notado primeiro e faça a composição sustentar essa escolha.

Exige conteúdo real e revisão da interface renderizada; nenhuma ferramenta de pontuação visual está incluída.

• Design de UI
• Composição

Estabeleça uma direção visual, construa uma interface representativa e revise-a no navegador antes de expandir o design.

Exige um agente capaz de programar e um ambiente de frontend renderizável no navegador. Alguns padrões selecionados podem usar React, Babel, gráficos ou outras bibliotecas; a aceitação no navegador exige uma ferramenta de navegador adequada.

• Design de frontend
• Prototipagem
• Sistemas de design

Crie apresentações no navegador com cenas visuais cronometradas e narração opcional; a gravação é uma etapa separada.

Usa Vite, React, TypeScript e ferramentas Node. O TTS opcional depende do provedor escolhido, das credenciais e do adaptador; a gravação final exige captura pelo navegador ou software de gravação.

• Apresentações
• Movimento
• Narração

Deixe uma tela de baixa fidelidade precisa o bastante para discutir comportamento e conteúdo.

Não é necessária nenhuma ferramenta de wireframe específica; um briefing utilizável precisa incluir informações de conteúdo e de estados.

• Prototipagem
• Wireframes