Guia de leitura localizado
figma-implement-designFinalidade, utilização e fonte
Converte designs do Figma em código de aplicação pronto para produção com1:1fidelidade visual. Use ao implementar código de interface do usuário a partir de arquivos do Figma, quando o usuário menciona "implementar design", "gerar código", "implementar componente", fornece URLs do Figma ou solicita a criação de componentes que correspondam às especificações do Figma. Para escritas em tela do Figma viause_figma, usarfigma-use.
Fonte recuperada:
- Repositório de origem
- openai/skills
- SKILL.md
skills/.curated/figma-implement-design/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: Arquivo de licença pendente de verificação
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
Converte designs do Figma em código de aplicação pronto para produção com1:1fidelidade visual. Use ao implementar código de interface do usuário a partir de arquivos do Figma, quando o usuário menciona "implementar design", "gerar código", "implementar componente", fornece URLs do Figma ou solicita a criação de componentes que correspondam às especificações do Figma. Para escritas em tela do Figma viause_figma, usarfigma-use.
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 · L29 ↗Visão geral
Essa habilidade fornece um fluxo de trabalho estruturado para traduzir designs do Figma em código pronto para produção com precisão perfeita em cada pixel. Ela garante integração consistente com o servidor Figma MCP, uso adequado de tokens de design e1:1Paridade visual com os designs.
Passagem a montante · L8 ↗Etapa2: Obter contexto de design
Correrget_design_contextCom a chave do arquivo e o ID do nó extraídos, são fornecidos os dados estruturados, incluindo: propriedades de layout (Auto Layout, restrições, dimensionamento), valores de cor e tokens de design.
get_design_context(fileKey=":fileKey", nodeId="1-2")Requisitos e configuração
Pré-requisitos
O servidor Figma MCP deve estar conectado e acessível. O usuário deve fornecer um URL do Figma no formato:https://figma.com/design/:fileKey/:fileName?node-id=1-2
Limites e verificações de qualidade
Qualidade do código
Evite valores fixos no código — extraia-os para constantes ou crie tokens. Mantenha os componentes composáveis e reutilizáveis.
Passagem a montante · L156 ↗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
- Limites de Competência
- Pré-requisitos
- Fluxo de trabalho necessário
- Opção A: Analisar a partir do URL do Figma
- Opção B: Usar a seleção atual do aplicativo Figma Desktop (somente para MCP figma-desktop)
- Etapa2: Obter contexto de design
- Etapa3: Capturar Referência Visual
- Etapa4Baixe os recursos necessários
- Etapa5Traduzir para as convenções do projeto
- Etapa6: Alcançar1:1Paridade visual
- Etapa7Validar com o Figma
- Organização de Componentes
- Integração de Sistemas de Projeto
- Qualidade do código
- Exemplo1Implementando um componente de botão
- Exemplo2: Criando um layout de painel de controle
- Comece sempre pelo contexto.
- Validação incremental
- Desvios de Documentos
- Reutilizar em vez de recriar
- Sistema de Design em Primeiro Lugar
- Problema: a saída do Figma está truncada.
- Problema: O design não corresponde após a implementação.
- Problema: Os recursos não estão sendo carregados.
- Problema: Os valores dos tokens de design diferem dos do Figma.
- Compreendendo a Implementação do Design
- 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
63f3d12d444547bbf68c10a12982b1f42e0f6e26fc074324564a13184d4b15ad