create-design-system-rules

Regras personalizadas de design system para implementação consistente de Figma para código em todo o seu projeto. Gera convenções específicas do projeto para organização de componentes, estilos, design tokens e manipulação de assets que orientam agentes de IA a produzir código consistente. Suporta três formatos de arquivo de regras: CLAUDE.md para Claude Code, AGENTS.md para Codex CLI e .cursor/rules/figma-design-system.mdc para Cursor. Requer conexão com o servidor MCP do Figma e análise do codebase para descobrir padrões existentes antes das regras...

npx skills add https://github.com/figma/mcp-server-guide --skill create-design-system-rules

Baixar ZIP GitHub

Mais skills de figma

video-interaction-mapper

Esta habilidade deve ser usada quando o usuário solicitar a análise de uma gravação de tela de interface do usuário e mapear estados de interação no Figma. Acione para solicitações como "colocar vídeo…

figma-code-connect

Cria e mantém arquivos de template do Figma Code Connect que mapeiam componentes do Figma para trechos de código. Use quando o usuário mencionar Code Connect, componente do Figma…

figma-implement-motion

Traduz movimentos e animações do Figma em código de aplicação pronto para produção. Use ao implementar animação/movimento a partir de um design do Figma — o usuário menciona…

Tradução SwiftUI ↔ Figma. Use sempre que o usuário mencionar Swift, SwiftUI, iOS, iPhone ou iPad — em QUALQUER direção — traduzindo um design do Figma para…

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

Esta habilidade ajuda agentes a usarem a ferramenta MCP use_figma do Figma no contexto de Slides. Pode ser usada em conjunto com figma-use, que possui contexto fundamental para usar o…

figma-use-figjam

Esta habilidade ajuda agentes a usarem a ferramenta MCP use_figma do Figma no contexto do FigJam. Pode ser usada em conjunto com o figma-use, que possui contexto fundamental para usar o…

code-connect-components

Estabelece links bidirecionais entre componentes de design do Figma e implementações de código usando Code Connect. Requer conexão com o servidor MCP do Figma e componentes publicados nos planos Organization ou Enterprise. Identifica automaticamente componentes não mapeados nas seleções do Figma e, em seguida, varre seu codebase em busca de componentes de código correspondentes por nome, estrutura e props. Apresenta os componentes correspondentes para sua revisão antes de criar os mapeamentos, permitindo aceitação ou rejeição seletiva. Suporta múltiplos...