Communitygithub.com

PatNoO/design-extractor

Uma Skill de Agente de IA para Claude Code que extrai automaticamente sistemas de design de bases de código. Gera um único script Figma pronto para execução que reconstrói tokens, componentes e quadros com precisão de 1:1.

O que é design-extractor?

PatNoO/design-extractor é uma Skill especializada para o Claude Code que automatiza a extração de sistemas de design diretamente de bases de código. Seu principal objetivo é analisar o código-fonte (como estilos CSS, variáveis de tema, componentes de UI) e gerar um único script Figma que recria fielmente tokens de design, componentes e layouts de quadros (frames) com precisão de 1:1. Isso é extremamente útil para desenvolvedores que desejam manter a consistência entre código e design, permitindo a migração ou sincronização de design systems para o Figma de forma rápida e automatizada. A Skill suporta a plataforma Claude Code e funciona analisando a estrutura do código, identificando padrões de design e produzindo um script executável que pode ser rodado diretamente no ambiente do Figma. O resultado é uma redução significativa do trabalho manual de transposição de código para design, garantindo que os tokens, componentes e frames sejam representados com alta fidelidade.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add PatNoO/design-extractor

Perguntar na sua IA favorita

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

Documentação

O que design-extractor faz?

Uma Skill de Agente de IA para Claude Code que extrai automaticamente sistemas de design de bases de código. Gera um único script Figma pronto para execução que reconstrói tokens, componentes e quadros com precisão de 1:1.

Habilidades Relacionadas