Design Systems

Use a skill design-system para gerar ou auditar um sistema de UI, extrair tokens de código existente e revisar a consistência de estilos em repositórios reais.

Use a skill shadcn para inspecionar o contexto do projeto, executar os comandos de CLI corretos, instalar componentes e compor interfaces com padrões documentados para base vs radix, formulários, temas e registries.

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.

ui-ux-pro-max é uma skill completa para design UI/UX assistido por IA. Oferece orientações estruturadas sobre layouts, estilos, sistemas de cores, tipografia e regras de UX para web e mobile. Ideal para devs e equipes que buscam decisões práticas em React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter e HTML/CSS. Use para planejar, revisar e aprimorar interfaces com inteligência de design selecionada.

ckm:design-system ajuda você a criar tokens em três camadas, especificações de componentes, variáveis CSS, mapeamentos Tailwind e slides alinhados à marca a partir de uma arquitetura de tokens clara.

ckm:design é uma skill estruturada de design para direcionar e produzir logos, mockups de CIP, banners, slides e ícones SVG. Inclui referências práticas, opções baseadas em CSV e scripts em Python para fluxos de trabalho reproduzíveis, em vez de saídas genéricas só com prompt.

ckm:brand é uma skill de workflow de branding para criar, atualizar e revisar guidelines de marca, mensagens, tom de voz, identidade visual e sincronização de design tokens com scripts e checklists práticos.

design-system-patterns ajuda equipes a criar bases de UI escaláveis com estrutura de tokens, arquitetura de temas e padrões reutilizáveis de API de componentes para design systems e bibliotecas de componentes.

visual-design-foundations ajuda equipes a criar sistemas de UI práticos com escalas tipográficas, tokens de cor, regras de espaçamento e diretrizes de iconografia. Use a skill para estabelecer uma base sólida de design, criar style guides, auditar a hierarquia visual e gerar variáveis CSS prontas para implementação a partir de restrições de design bem definidas.

A skill web-component-design ajuda equipes a projetar componentes de UI reutilizáveis para React, Vue e Svelte, com padrões sólidos de API, orientações de acessibilidade e referências sobre trade-offs de estilização para design systems.

Use a skill tailwind-design-system para criar design systems em Tailwind CSS v4 com tokens, temas, variantes, acessibilidade e orientações de migração do v3 para o v4.

polish é uma skill de revisão final de UI para identificar problemas de alinhamento, espaçamento, consistência, uso de tokens e microdetalhes antes do lançamento. Funciona melhor em telas, fluxos ou componentes que já estão funcionando, mas ainda não parecem totalmente refinados. Use para aumentar a prontidão para lançamento, melhorar o alinhamento com o design system e elevar a qualidade geral sem redesenhos desnecessários.

figma-create-design-system-rules ajuda você a gerar regras de Design System específicas do projeto para trabalhos de Figma para código. Use-o para registrar convenções de componentes, nomenclatura, tokens, locais de arquivos e o que não deve ser hardcoded, mantendo agentes de codificação com IA consistentes em todo o seu repositório. Requer conexão com um servidor Figma MCP.

site-architecture ajuda a planejar ou reorganizar a hierarquia de páginas de um site, a navegação, os padrões de URL e a linkagem interna. Use para criar sitemaps, especificações de navegação, mapas de URL e diagramas de site em Mermaid ou ASCII para planejamento de marketing e UI/UX.

A skill normalize audita um recurso de UI e o realinha ao seu design system. Veja as opções de instalação do normalize, a preparação necessária em frontend-design e como usar na prática em páginas, rotas e componentes.

A skill extract ajuda equipes a identificar padrões de UI repetidos, tokens e componentes, e depois planejar ou executar a consolidação em um design system existente com uma rota de migração mais segura.

A skill normalize audita uma funcionalidade de UI e a realinha ao seu design system. Entenda o contexto de instalação do normalize, a preparação necessária com /frontend-design e como usá-lo na prática em páginas, rotas e componentes.

A skill extract ajuda equipes a identificar padrões de UI, tokens e componentes repetidos e depois consolidá-los em um design system já existente, com um plano de migração mais seguro.

A skill design-md analisa projetos Stitch e transforma suas telas em uma fonte de verdade semântica em DESIGN.md para garantir consistência de layout, tom, cores e linguagem de componentes. Use o design-md para Design Systems quando você precisar de orientações acionáveis para futuras gerações no Stitch, e não apenas de um resumo visual.

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.

mui é um guia focado em Material UI v7 para React, cobrindo estilização com `sx`, personalização de temas, layouts responsivos e as principais mudanças de migração do v7. Use este skill para instalar, seguir os arquivos centrais e gerar componentes MUI com os padrões atuais de `@mui/material`.

makepad-2.0-theme é um skill de tema para Makepad 2.0, voltado para aplicar variáveis `theme.*`, alternar entre temas claro e escuro e manter a consistência do styling com design tokens. Use este guia para entender a instalação do makepad-2.0-theme e como usar o makepad-2.0-theme em interfaces de produção e sistemas de design.

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.