Figma Create Design System Rules skill

O Claude estuda o seu código e escreve no CLAUDE.md as regras pra toda tela vinda do Figma sair com os componentes e as cores do projeto.

por OpenAIPublicada pela própria empresa

instalações: 2.900
estrelas no GitHub: 28,3 mil
No skills.sh desde: março de 2026
Licença: Sem licença declarada

Atualizada no GitHub em 8 de setembro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

OpenAI
figma-create-design-system-rules
O Claude estuda o seu código e escreve no CLAUDE.md as regras pra toda tela vinda do Figma sair com os componentes e as cores do projeto.OficialAuditada2.900 instalações, grátis

O que ela faz

Feita pela OpenAI, a skill monta as regras que um agente segue quando transforma um design do Figma em código: onde ficam os componentes, como se chamam, de onde vêm cores, fontes e espaçamentos e o que nunca pode ficar escrito à mão. É o que um dev da casa ensinaria pra quem acabou de chegar.

Primeiro ela chama a ferramenta create_design_system_rules do servidor MCP do Figma, informando linguagem e framework. Depois o Claude analisa o projeto (pastas de componentes, Tailwind ou CSS Modules, tokens, nomes, rotas) e escreve regras com os caminhos reais, incluindo puxar o contexto e o print do Figma antes de codar.

As regras vão pro arquivo de cada agente: CLAUDE.md no Claude Code, AGENTS.md no Codex e .cursor/rules no Cursor. Depois vem o teste com um componente simples, pra ver se o agente obedece, e o ajuste do que não funcionou.

Nas palavras de quem fez

Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design…

OpenAI, no SKILL.md

Quando usar

Começar um projeto que vai sair de telas do Figma
Fazer o agente parar de inventar cor e componente ao copiar um design
Padronizar como o time inteiro passa Figma pra código
Atualizar as regras depois que o projeto mudou

Depois de instalar, é só pedir assim

Cria as regras de design system desse projeto pra quando eu mandar telas do Figma
Analisa meu projeto em React com Tailwind e salva no CLAUDE.md as regras pro Figma
O projeto mudou a pasta de componentes, atualiza as regras do Figma no CLAUDE.md

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Figma Create Design System Rules no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Figma Create Design System Rules, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que a figma-create-design-system-rules precisa pra funcionar?

Do servidor MCP do Figma conectado e acessível, e do código do projeto aberto pro Claude analisar. Sem o MCP do Figma, o primeiro passo do fluxo não roda.

Roda no Codex e no Antigravity?

No Codex, sim: a skill salva as regras no AGENTS.md, que tem limite de 32 KiB somados. O Antigravity não está entre os agentes que ela cita (Claude Code, Codex e Cursor).

Ela transforma o design em código?

Não. Ela escreve as regras que o agente segue quando for transformar. Implementar cada tela é outro trabalho, feito depois, com as regras já carregadas.

Levar essa skill

1x figma-create-design-system-rulesR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/openai/skills

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.