Design System

design-consultation é uma skill de design-consultation para transformar uma ideia inicial de produto em uma direção de design completa. Ela cria uma fonte única de verdade em DESIGN.md, previews e orientações em nível de sistema para tipografia, cor, espaçamento, layout e motion. É ideal para novos produtos e superfícies de UI que precisam de um ponto de partida coeso.

Use a skill wpds para criar ou revisar UI do WordPress com o WordPress Design System (WPDS). Ela ajuda a validar componentes, tokens, padrões e adequação de pacote usando o servidor WPDS MCP, para que seu guia wpds se mantenha alinhado à documentação canônica, e não a suposições. É ideal para trabalho com wpds em Design Systems em Gutenberg, WooCommerce, WordPress.com, Jetpack e interfaces relacionadas.

figma-use é a skill que deve ser instalada antes de toda chamada a `use_figma`, para que o JavaScript seja executado com segurança no contexto de um arquivo do Figma. Ela dá suporte a trabalhos de implementação de design, como criar e editar nós, conectar variáveis e estilos, montar componentes e variações e inspecionar a estrutura do arquivo de forma programática. O repositório inclui orientações de uso, armadilhas comuns e padrões para reduzir erros frequentes de automação no Figma.

A skill hig-components-content ajuda você a escolher e descrever componentes de exibição de conteúdo do Apple HIG com menos suposição. Use este guia hig-components-content para decisões de UI Design sobre charts, collections, image views, image wells, color wells, activity views, lockups e web views, com orientações de instalação e uso para uma seleção de componentes alinhada ao Apple HIG.

A skill figma-generate-library ajuda você a criar ou atualizar um sistema de design no Figma a partir de uma base de código, com um fluxo organizado para tokens, bibliotecas de componentes, documentação e temas claro/escuro. Use a skill figma-generate-library quando precisar de um guia prático para Design Systems, e não de um mockup pontual. Ela complementa a figma-use para chamadas à Plugin API.

O figma-generate-design ajuda a transformar páginas codificadas, modais, drawers, sidebars, painéis e outras telas com várias seções em Figma usando o design system publicado. Ele localiza componentes, variáveis, estilos e assets de biblioteca a partir do Code Connect e de outras fontes relacionadas, e então monta a tela seção por seção para a Design Implementation, em vez de redesenhar tudo manualmente. Use o guia do figma-generate-design quando você precisar de alta fidelidade ao código e aos tokens.

O figma-use é a skill obrigatória para chamadas seguras de `use_figma` em fluxos de trabalho da Figma Plugin API. Use a skill figma-use para instalá-la e carregá-la antes de escrever, atualizar, inspecionar ou estruturar arquivos do Figma com JavaScript. Ela é especialmente útil para implementação de design, trabalho com componentes, variáveis, auto layout e leitura programática de arquivos.

O figma-generate-library ajuda a transformar um codebase em uma biblioteca de design system no Figma, com tokens, variáveis, componentes, theming e documentação. Use o skill figma-generate-library quando precisar de um fluxo em fases para trabalhos de Design Systems, incluindo instalação, configuração, descoberta, criação, validação e reconciliação com o código.

O figma-generate-design ajuda a transformar uma tela real, página ou layout com várias seções em Figma, reutilizando o design system publicado em vez de formas genéricas. É ideal para reproduzir páginas de produto ou código com alta fidelidade, estrutura editável e consistência baseada em tokens. Use para atualizações de UI em páginas inteiras, não para mockups soltos.

frontend-design-review é uma skill do GitHub para revisar trabalhos de UI no frontend e criar interfaces diferenciadas e prontas para produção do zero. Ela ajuda a avaliar aderência ao design system, acessibilidade, qualidade visual e se uma UI parece genérica ou intencionalmente projetada. Use em revisões de PR, revisões de componentes e no frontend-design-review para design de UI.