Pular para o conteúdo
Skillpedia
Deploy e nuvem (DevOps)101 mil · #607

od-figma-migration

Ajuda seu agente a migrar designs do Figma. Ele extrai elementos, mapeia tokens e gera o design. Útil para transferir interfaces visuais entre ferramentas.

O que ela faz

Esta ferramenta ajuda a transferir o design de um arquivo do Figma para um site. Ela pega as informações do seu design no Figma e as transforma em código para um site.

Quando usar

  • ✓Quando você quer transformar um design do Figma em um site.
  • ✓Ao migrar um projeto de design do Figma para a web.
  • ✓Para criar um protótipo de site a partir de um design do Figma.

Exemplo do que pedir para a IA

“Transforme este design do Figma em um site.”

Quer saber mais? Abra as seções abaixo.

Como usar

O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.

Link da skill

https://github.com/nexu-io/open-design/blob/main/plugins/_official/scenarios/od-figma-migration/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/nexu-io/open-design/blob/main/plugins/_official/scenarios/od-figma-migration/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
Como funciona

A ferramenta primeiro extrai os detalhes do seu design do Figma. Depois, ela organiza essas informações e as usa para gerar o código do site.

Instalação

Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.

No terminal (Claude Code, Codex, Cursor), na pasta do projeto:

npx skills add nexu-io/open-design --skill od-figma-migration

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/scenarios/od-figma-migration/SKILL.md -o SKILL.md
Conteúdo técnico (SKILL.md)

Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.

od-figma-migration (cenário)

Especificação §1 / §10.1 / §21.3.1 / §23.3.3: o fluxo canônico de migração do Figma. O pipeline é sequenciado de forma que a saída de cada estágio seja a entrada do próximo estágio — figma-extract escreve figma/tree.json, token-map escreve token-map/colors.json (etc.), e generate lê ambos antes de produzir o artefato HTML.

Pipeline padrão

{
  "stages": [
    { "id": "extract",  "atoms": ["figma-extract"] },
    { "id": "tokens",   "atoms": ["token-map"] },
    { "id": "generate", "atoms": ["file-write", "live-artifact"] },
    {
      "id": "critique", "atoms": ["critique-theater"],
      "repeat": true,
      "until": "critique.score>=4 || iterations>=3"
    }
  ]
}

Superfícies GenUI necessárias

O cenário espera duas superfícies oauth-prompt / form da camada do plugin:

  • figma-oauth — oauth.route='connector', connectorId='figma', persiste no nível do projeto para que o trabalho de várias conversas não solicite novamente.
  • file-pick — kind='form', captura o URL do arquivo Figma na primeira interação para que figma-extract saiba onde ler.

O daemon deriva automaticamente a superfície figma-oauth quando od.connectors.required[].id='figma' é declarada e o conector ainda não está autorizado (regra implícita de solicitação de OAuth da especificação §10.3.1).

Perguntas frequentes

O que é 'pipeline'?

É uma sequência de passos que a ferramenta segue para completar a tarefa, como uma linha de montagem.

O que são 'stages'?

São as etapas principais dentro do pipeline, onde cada etapa faz uma parte do trabalho.

Por que a ferramenta pede para conectar com o Figma?

Ela precisa acessar seu arquivo do Figma para poder extrair as informações do design.

Detalhes

Descrição original do autor

Default reference pipeline for the figma-migration taskKind — figma-extract → token-map → generate → critique.

repo: nexu-io/open-design

Popularidade

Estrelas no GitHub
101 mil
Posição no ranking
#607
Licença
Apache-2.0
Atualizada em
16/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas