Guia de leitura localizado
figma-create-design-system-rulesFinalidade, utilização e fonte
Gera regras de sistema de design personalizadas para a base de código do usuário. Use quando o usuário disser "criar regras de sistema de design", "gerar regras para meu projeto", "configurar regras de design", "personalizar diretrizes de sistema de design" ou desejar estabelecer convenções específicas do projeto para fluxos de trabalho do Figma para o código. Requer conexão com o servidor Figma MCP.
Fonte recuperada:
- Repositório de origem
- openai/skills
- SKILL.md
skills/.curated/figma-create-design-system-rules/SKILL.md- Estrelas do repositório
- 28,420
- Atualização do repositório
- 2026-10-29
- Classificação de Habilidades
- Design
- Última coleta
Licença: Não especificado
Os trechos do fluxo de trabalho são auxiliares de leitura e não instruções executáveis do Codez. Nenhuma Skill de terceiros foi executada para gerar esta página.
Os trechos abaixo, que descrevem o propósito e o fluxo de trabalho, são material original, organizado e traduzido para facilitar a leitura. Eles são distintos da análise editorial da Codez, que possui uma etiqueta separada.
O que esta habilidade faz
Gera regras de sistema de design personalizadas para a base de código do usuário. Use quando o usuário disser "criar regras de sistema de design", "gerar regras para meu projeto", "configurar regras de design", "personalizar diretrizes de sistema de design" ou desejar estabelecer convenções específicas do projeto para fluxos de trabalho do Figma para o código. Requer conexão com o servidor Figma MCP.
Como funciona o fluxo de trabalho upstream
Fluxo de trabalho necessário
Siga estes passos na ordem indicada. Não pule nenhuma etapa.
Passagem a montante · L49 ↗Visão geral
Essa habilidade ajuda você a gerar regras de sistema de design personalizadas, adaptadas às necessidades específicas do seu projeto. Essas regras orientam os agentes de codificação de IA a produzir código consistente e de alta qualidade ao implementar designs do Figma, garantindo que as convenções da sua equipe, os padrões de componentes e as decisões arquitetônicas sejam seguidas automaticamente.
Passagem a montante · L8 ↗Quando usar essa habilidade
Use essa habilidade quando: iniciar um novo projeto que usará designs do Figma; integrar um agente de codificação de IA a um projeto existente com padrões estabelecidos; ou padronizar os fluxos de trabalho de conversão de Figma em código em toda a sua equipe.
Passagem a montante · L39 ↗- IMPORTANT: Always use components from `[YOUR_PATH]` when possible
- Place new UI components in `[COMPONENT_DIRECTORY]`
- Follow `[NAMING_CONVENTION]` for component names
- Components must export as `[EXPORT_PATTERN]`Requisitos e configuração
Pré-requisitos
O servidor Figma MCP deve estar conectado e acessível. É necessário ter acesso ao código-fonte do projeto para análise.
Passagem a montante · L33 ↗Limites e verificações de qualidade
Use IMPORTANTE para regras críticas.
Adicione o prefixo "IMPORTANTE:" às regras que nunca devem ser violadas para garantir que o agente as priorize.
Passagem a montante · L452 ↗Comece com um teste seguro.
- Verifique o host compatível e as instruções de instalação do repositório. Mantenha o diretório Skill e seus scripts, recursos e documentação referenciados juntos;SKILL.mdsozinho pode omitir dependências.
- Forneça ao agente suas entradas reais, a saída desejada e os critérios de aceitação. A sintaxe de invocação e as ferramentas disponíveis dependem do host; este site não pressupõe um comando de instalação universal.
- Teste o fluxo de trabalho original em um projeto descartável ou em uma cópia. Analise as operações que alteram arquivos, serviços remotos ou recursos faturáveis antes de permiti-las.
- Valide o resultado comparando-o com as verificações de qualidade da fonte e com seus próprios requisitos. Um gatilho bem-sucedido ou uma alta contagem de estrelas no repositório não garantem um resultado correto.
Leia mais na fonte.
- Visão geral
- O que são regras de um sistema de projeto?
- Pré-requisitos
- Quando usar essa habilidade
- Fluxo de trabalho necessário
- Etapa1Execute a ferramenta Criar regras do sistema de design.
- Etapa2Analise a base de código.
- Etapa3Gerar regras específicas do projeto
- Etapa4Salvar regras no arquivo de regras apropriado
- Etapa5Validar e iterar
- Regras Essenciais (Sempre Incluir)
- Regras recomendadas (de grande valor)
- Regras opcionais (específicas do projeto)
- Exemplo1Projeto React + Tailwind
- Exemplo2Projeto Vue + CSS personalizado
- Exemplo3Equipe do Sistema de Design
- Comece com o básico, itere.
- Seja específico
- Torne as regras acionáveis.
- Use IMPORTANTE para regras críticas.
- Documente o porquê
- Problema: O agente não está seguindo as regras.
- Problema: As regras entram em conflito entre si.
- Problema: Muitas regras aumentam a latência.
- Problema: As regras ficam desatualizadas à medida que o projeto evolui.
- Compreendendo as regras do sistema de projeto
- Recursos adicionais
Habilidades relacionadas
Tradução e escopo
Este guia de leitura seleciona trechos do texto fixado a montante.SKILL.mdA tradução foi feita com auxílio de ferramentas. Este não é um manual completo nem garante compatibilidade comprovada. Leia o original e os arquivos referenciados antes de usar.
Esta introdução refere-se à versão fixada abaixo; a atividade atual do repositório e o tempo de coleta são mostrados separadamente.
- Fonte fixada
- Leia o original ↗
- Fonte recuperada
- Commit de origem
49f948faa9258a0c61caceaf225e179651397431- Fonte SHA-256
1f4d7e16ba5325a80da32e2e6bde0ea850ba9287f35f4675d51d55d2f0dc6e2a