Communitygithub.com

open-pencil/open-pencil

Trabalhe com arquivos de design .fig do Figma e o editor OpenPencil em execução — inspecione a estrutura, consulte nós, analise tokens de design, exporte PNG/SVG/PDF/JSX e modifique designs programaticamente. Use quando for solicitado a abrir, inspecionar, exportar, analisar ou editar arquivos .fig, ou controlar o aplicativo OpenPencil em execução.

O que é open-pencil?

Esta skill permite que agentes de IA interajam diretamente com arquivos de design do Figma (formato .fig) e com o editor OpenPencil em tempo real. Com ela, você pode inspecionar a estrutura hierárquica do design (como quadros, grupos e camadas), consultar propriedades específicas de nós (como cor, tipografia, preenchimento e borda), analisar tokens de design para encontrar valores e estilos reutilizáveis, e exportar elementos em formatos como PNG, SVG, PDF ou JSX. Além disso, é possível modificar designs programaticamente — por exemplo, ajustar cores, textos ou dimensões — e controlar o editor OpenPencil (como abrir arquivos, executar comandos ou selecionar componentes). É suportada nos principais agentes de IA como Claude Code, Cursor, Codex e outros, sendo ideal para fluxos de trabalho de design-para-código e automação de tarefas de UI.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/open-pencil/skills/tree/main/skills/open-pencil

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que open-pencil faz?

Trabalhe com arquivos de design .fig do Figma e o editor OpenPencil em execução — inspecione a estrutura, consulte nós, analise tokens de design, exporte PNG/SVG/PDF/JSX e modifique designs programaticamente. Use quando for solicitado a abrir, inspecionar, exportar, analisar ou editar arquivos .fig, ou controlar o aplicativo OpenPencil em execução.

Habilidades Relacionadas