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
Mensagem pronta para colar
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-migrationOu 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.mdConteú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 quefigma-extractsaiba 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
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
bun-runtime
Faz seu agente usar o Bun para rodar, organizar e testar código. Ajuda a escolher o Bun em vez de outras ferramentas e a migrar projetos existentes.
affaan-m/ECC
database-migrations
Ajuda seu agente a fazer mudanças seguras em bancos de dados. Ele garante que as alterações possam ser desfeitas e minimiza o tempo de inatividade.
affaan-m/ECC
deployment-patterns
Configura fluxos de implantação e CI/CD, containerização e estratégias de rollback para garantir lançamentos seguros.
affaan-m/ECC