implement-design

Traduz designs do Figma em código pronto para produção com fidelidade visual pixel-perfect. Requer conexão com o servidor MCP do Figma e uma URL do Figma com chave de arquivo e ID de nó para extrair contexto de design, capturas de tela e assets. Fluxo de trabalho estruturado em sete etapas: analisar URL, buscar contexto de design, capturar referência visual, baixar assets, traduzir para as convenções do projeto, alcançar paridade 1:1 e validar contra o Figma. Prioriza a reutilização do design system em vez de duplicação; mapeia tokens do Figma para o design do projeto...

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

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…

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...

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…