Figma

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.

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.

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.

O figma-create-new-file cria um novo arquivo em branco do Figma Design ou um board do FigJam nos rascunhos. Use-o quando precisar de um ponto de partida novo antes de ações mais profundas no Figma, incluindo use_figma. Ele suporta design ou figjam, nomeação opcional do arquivo e pode resolver o acesso ao plano com whoami quando necessário.

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.

O figma-code-connect-components ajuda a mapear componentes de design do Figma para componentes de código correspondentes com o Figma Code Connect. Use-o para alinhar implementação de design, fazer correspondência de variants e props e encontrar o componente local certo antes de criar mapeamentos. É ideal para fluxos de trabalho de connect, map ou link-to-code, não para escrever no canvas nem para gerar páginas completas.

Use o figma para extrair contexto de design, capturas de tela, variáveis e assets do servidor MCP do Figma e, em seguida, converter nós do Figma em decisões de UI prontas para implementação. Este skill de figma é ideal quando você tem uma URL do Figma ou um node ID e precisa de uso preciso do figma para trabalho de design para código, configuração ou troubleshooting.

O skill industrial-brutalist-ui para UI Design cria interfaces mecânicas e de alta densidade, com grids no estilo suíço, contraste tipográfico extremo, paletas utilitárias e textura analógica. Use este guia de industrial-brutalist-ui para dashboards, sistemas editoriais e páginas de portfólio que precisam de uma aparência disciplinada de painel de controle.

wwas é uma skill de prompt para Planning de Requisitos que transforma ideias vagas em itens de backlog no formato Why-What-Acceptance. Use a skill wwas para registrar o contexto de negócio, definir a mudança com clareza e escrever critérios de aceite testáveis para trabalho pronto para sprint.

Use a skill user-stories para transformar funcionalidades em histórias prontas para o backlog, com os 3 C’s, critérios INVEST, links de design e critérios de aceitação testáveis. Ideal para escrever user stories, dividir funcionalidades em itens de backlog e usar user-stories no planejamento de requisitos com escopo mais claro e menos suposições.

Use o skill job-stories para transformar ideias de funcionalidades em job stories no estilo JTBD, no formato “Quando [situação], eu quero [motivação], para que eu possa [resultado].”. Isso ajuda a criar itens de backlog mais claros, a usar job-stories no planejamento de requisitos e a definir critérios de aceitação ancorados no contexto do usuário.

A skill enhance-prompt transforma ideias vagas de UI em prompts mais claros e prontos para o Stitch, com estrutura mais forte, vocabulário de UI/UX e contexto de design system. Use este guia de enhance-prompt para aumentar a precisão dos prompts, reduzir suposições e obter resultados mais consistentes na escrita de prompts e na geração de interfaces.

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.

diagram-generator ajuda a criar e editar diagramas do draw.io, Mermaid e Excalidraw a partir de entradas estruturadas. Suporta fluxogramas, diagramas de sequência, diagramas de classes, diagramas ER, mapas mentais, diagramas de arquitetura e topologias de rede, além de ler arquivos .drawio, .mmd e do Excalidraw existentes para facilitar atualizações.

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.

Use a skill network para criar diagramas de topologia de rede em PlantUML com ícones de dispositivos mxGraph, auto-layout, agrupamento por zonas e semântica clara de links. Ela é indicada para diagramas de LAN, WAN, enterprise, data center, wireless, segurança e específicos de fornecedores, com exemplos de uso de network e orientação sobre quando usar network em vez de uml ou cloud.

A skill infographic transforma conteúdo estruturado em layouts de infográfico refinados com a DSL `infographic`. Use-a para cards de KPI, linhas do tempo, roadmaps, fluxos passo a passo, comparações A vs B, SWOTs, funis, organogramas e gráficos simples. É uma ótima opção para infographic para UI Design e resumos em estilo de apresentação com 4 a 8 itens. Não é ideal para análise de dados complexa nem para diagramas técnicos.

O logo-generator ajuda você a criar logos profissionais em SVG e imagens de showcase refinadas para produtos, marcas e conceitos. Ele combina orientação de padrões de design, mais de 6 variações de logo, exportação de SVG para PNG e geração de fundos de showcase. Use o skill logo-generator quando precisar de um guia rápido e estruturado de logo-generator para Branding, com saída editável e prévias prontas para apresentação.

figma-designer analisa arquivos ou capturas de tela do Figma via Figma MCP para extrair especificações visuais, design tokens, componentes e gerar handoff em PRD pronto para implementação por equipes de design de UI.

A stitch-design-taste é uma skill de sistema de design do Google Stitch para implementação de design. Ela gera orientações em DESIGN.md, pensadas para agentes, com UI premium e nada genérica, incluindo tipografia clara, cores calibradas, layouts assimétricos, regras de motion e padrões proibidos. Use quando quiser um guia repetível de stitch-design-taste, em vez de um prompt pontual.

A skill hand-drawn-diagrams transforma prompts em linguagem natural em diagramas Excalidraw com aparência de desenho à mão, fluxos, explicações, wireframes e mockups de páginas. Ela valida a saída e pode retornar uma URL de edição junto com imagens exportáveis. É ideal para diagramar rápido quando você quer um resultado em estilo esboço, não arte vetorial polida.

A skill figma-implement-design converte designs do Figma em código de aplicação pronto para produção, com fidelidade visual de 1:1. Use-a ao implementar código de UI a partir de arquivos do Figma, ao reproduzir um componente ou tela específica, ou ao seguir um guia figma-implement-design para Design Implementation. Ela não serve para editar nós da canvas do Figma.

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.