Guia de leitura localizado

figma-generate-designFinalidade, utilização e fonte

Use esta habilidade em conjunto com figma-use quando a tarefa envolver a tradução de uma página de aplicativo, visualização ou layout de várias seções para o Figma. Gatilhos: 'escrever no Figma', 'criar no Figma a partir do código', 'enviar página para o Figma', 'pegar isto'app/pagee criar no Figma', 'criar uma tela', 'criar uma landing page no Figma', 'atualizar a tela do Figma para corresponder ao código'. Esta é a habilidade de fluxo de trabalho preferida sempre que o usuário deseja criar ou atualizar uma página, tela ou visualização completa no Figma a partir de código ou descrição. Descobre componentes, variáveis e estilos do sistema de design por meio de search_design_system, importa-os e monta telas incrementalmente, seção por seção, usando tokens do sistema de design em vez de valores fixos.

Fonte recuperada: 2026-10-29

Repositório de origem: openai/skills
SKILL.md: skills/.curated/figma-generate-design/SKILL.md
Estrelas do repositório: 28,420
Atualização do repositório: 2026-10-29
Classificação de Habilidades: Design
Última coleta: 2026-10-31 10:38 UTC+08:00

Licença: Não especificado

SKILL.md original

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

Como funciona o fluxo de trabalho upstream

Fluxo de trabalho paralelo com generate_figma_design (somente para aplicativos da Web)

Ao criar uma tela a partir de um aplicativo web que pode ser renderizada em um navegador, os melhores resultados são obtidos executando ambas as abordagens em paralelo: Comece a criar a tela usando o fluxo de trabalho desta habilidade (use_figma + componentes do sistema de design). Execute.generate_figma_designPara capturar uma captura de tela perfeita em pixels do aplicativo web em execução. Depois que ambas as etapas forem concluídas: Atualize a saída do use_figma para corresponder ao layout perfeito em pixels dogenerate_figma_designA captura fornece o espaçamento, o tamanho e o tratamento visual exatos a serem alcançados, enquanto a sua saída do use_figma contém instâncias de componentes adequadas vinculadas ao sistema de design.

Passagem a montante · L30 ↗

Fluxo de trabalho necessário

Siga estes passos na ordem indicada. Não pule nenhuma etapa.

Passagem a montante · L44 ↗

Etapa1Entenda a tela

Antes de começar a usar o Figma, entenda o que você está criando: se estiver criando a partir de código, leia os arquivos de origem relevantes para compreender a estrutura da página, as seções e quais componentes são usados. Identifique as principais seções da tela (por exemplo, Cabeçalho, Hero, Painéis de Conteúdo, Grade de Preços, Acordeão de Perguntas Frequentes, Rodapé). Para cada seção, liste os componentes de interface do usuário envolvidos (botões, campos de entrada, cards, barras de navegação, acordeões etc.).

Passagem a montante · L48 ↗

Passagem a montante · js ↗

const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

Requisitos e configuração

Pré-requisitos

O servidor Figma MCP deve estar conectado. O arquivo Figma de destino deve ter um sistema de design publicado com componentes (ou acesso a uma biblioteca de equipe).

Passagem a montante · L21 ↗

Limites e verificações de qualidade

Nenhuma passagem de limites separada foi selecionada deste arquivo. Isso não significa que a Skill seja segura para todas as entradas ou ambientes. Analise o código-fonte completo e valide seus próprios resultados.

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.

Especificação de formato e diretório de habilidades ↗

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: 2026-10-29T09:32:23Z
Commit de origem: 49f948faa9258a0c61caceaf225e179651397431
Fonte SHA-256: 45d2b97103bdeb31cb2744fca2c79bcefb659c88faca626bea30ec2f9342dcc9

Voltar ao catálogo completo de habilidades