Figma Create Design System Rulespor OpenAI

Figma Create Design System Rules Skill.

Substitua instruções vagas como "siga o design system" por caminhos e convenções concretos.

Figma
Design Systems
Regras para agentes

Revisão da fonte · Figma Create Design System RulesSKILL.md

Tarefa Figma Produz • Uma seção ou arquivo de regras de implementação do Figma específico para o projeto • Orientação concreta sobre componentes, tokens e localização de assets • Uma pequena verificação de implementação usada para refinar as regras Antes de começar Conexão com o Figma MCP e acesso à base de código de destino; o formato de regras de destino depende do host de codificação.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Transforme as convenções do repositório em regras de implementação do Figma

Um fluxo de análise de repositório que escreve e testa regras concretas para agentes na implementação do Figma.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

O Figma Create Design System Rules produz orientações específicas do projeto para o trabalho futuro de Figma para código. Ele analisa onde os componentes ficam, como a estilização é tratada, onde os tokens são definidos e quais convenções de arquitetura as implementações devem preservar. A entrega é um arquivo de regras, não uma biblioteca de componentes do Figma nem uma tela redesenhada.

A fonte oferece suporte a formatos de regras para Claude Code, Codex e Cursor. Regras úteis citam caminhos reais de componentes e fontes de tokens, em vez de impor um padrão genérico de React ou Tailwind a todo repositório. O fluxo termina testando as regras em um componente pequeno e refinando o que não funcionou, pois uma instrução escrita não prova que um agente a seguirá de forma consistente.

Entregas esperadas

Uma seção ou arquivo de regras de implementação do Figma específico para o projeto
Orientação concreta sobre componentes, tokens e localização de assets
Uma pequena verificação de implementação usada para refinar as regras

Ver o briefing de exemplo

Do briefing à revisão

01
Inspecione as convenções existentes
Primeiro, obtenha o modelo básico da ferramenta create_design_system_rules do Figma MCP. Depois, leia a organização dos componentes, a estilização, as importações, o roteamento e as regras de agente existentes antes de redigir acréscimos específicos do projeto.
02
Escreva mapeamentos acionáveis
Cite os arquivos reais de componentes e tokens, descreva o contexto necessário do Figma e o fluxo de capturas de tela, e preserve o framework do projeto.
03
Salve e teste as regras
Use o formato de regras apropriado ao host sem sobrescrever instruções não relacionadas. Teste uma pequena implementação do Figma e remova orientações conflitantes ou inúteis.

02 Quando usar

Quando usar

Conexão com o Figma MCP e acesso à base de código de destino; o formato de regras de destino depende do host de codificação.

Bom encaixe

Onboarding de agentesÚtil quando novas sessões de implementação duplicam componentes repetidamente ou fixam valores que já têm tokens.
Registro das convenções da equipeServe para uma equipe de design system que queira transformar o conhecimento não escrito do repositório em orientações revisáveis.

Limites a verificar

Regras não são fiscalizaçãoUm arquivo de regras pode orientar um agente, mas não substitui linting, testes nem comparação visual.
As instruções existentes devem ser preservadasAdicionar orientações do Figma não deve apagar regras não relacionadas do repositório nem introduzir requisitos de arquitetura contraditórios.

Traga estes insumos

Acesso ao repositórioForneça o projeto real, incluindo componentes representativos e arquivos de estilização.
Host do agenteIdentifique o formato de regras usado pela equipe, como AGENTS.md, CLAUDE.md ou regras do Cursor.
Decisões conhecidas da equipeInforme convenções que não podem ser inferidas com confiabilidade, incluindo responsabilidades e exceções aprovadas.

03 Decisões importantes

Decisões que importam

Caminhos específicos em vez de slogans
Um componente Button e um arquivo de tokens nomeados são mais acionáveis do que um pedido genérico de consistência.
Adapte-se ao repositório
A fonte trata a representação gerada pelo Figma como contexto de design a ser adaptado ao framework e aos estilos do próprio repositório.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Use a skill selecionada com o mecanismo de instruções já existente no projeto. Estes materiais Beta são regidos pelos Termos para Desenvolvedores do Figma. Revise o efeito das alterações no arquivo de regras sobre o comportamento futuro dos agentes.

Arquivo de origem upstream

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-create-design-system-rules/SKILL.md

Conexão com o Figma MCP e acesso à base de código de destino; o formato de regras de destino depende do host de codificação.

Comece com uma única entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use o figma-create-design-system-rules para documentar nossas convenções existentes de Figma para código. Inspecione o repositório primeiro, preserve o AGENTS.md atual e adicione uma seção focada que cite nossos caminhos de componentes, tokens e assets. Não introduza um novo framework de estilização. Valide a orientação em um componente pequeno e sinalize qualquer convenção que exija uma decisão da equipe.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

Todo caminho de componente e de token citado existe.
As novas regras não contradizem nem substituem as instruções existentes do projeto.
Uma pequena implementação segue as convenções pretendidas de reutilização e estilização.

O OpenDesign oferece um espaço de trabalho de design local para agentes de codificação. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte, vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte: OpenAI
Repositório: openai/skills
Arquivo da skill: skills/.curated/figma-create-design-system-rules/SKILL.md
Licença: Termos do Figma
Versão revisada: 2026-10-07 · 49f948faa925

Resumo editorial da fonte

Um fluxo de análise de repositório que escreve e testa regras concretas para agentes na implementação do Figma.

Resumo original do OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um indicador de popularidade datado, não uma medida de uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Ela cria tokens dentro do Figma?

Não. Sua principal saída é uma orientação de projeto legível por agentes. Criar variáveis e bibliotecas de componentes no Figma é outra Skill.

Meu projeto precisa usar React e Tailwind?

Não. A fonte pede explicitamente que o agente detecte o framework e a abordagem de estilização do repositório e adapte as regras de acordo.

Toda convenção deve virar regra?

A fonte recomenda começar pelos problemas recorrentes mais importantes e manter as orientações específicas, em vez de encher o contexto com regras raramente úteis.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design