Repolode
Enviar
BIAsia

BIAsia/c2d2c

Skills do Claude Code que levam designs do Figma para a base de código e sincronizam o código de volta para o Figma, além de uma skill para governança do sistema de estilos.

Alternativa open source a:Figma Dev Mode

Ver no GitHubSite
Estrelas
57
Forks
2
Issues abertas
0
Último commit
há 3 meses

O que é?

c2d2c é um conjunto de três skills do Claude Code que conectam o Figma a uma base de código de produção nos dois sentidos. A skill d2c transforma um link de design do Figma em código, fazendo um levantamento dos componentes existentes, revisando o plano, implementando o design em escala 1:1, criando uma página de regressão, validando a aceitação por capturas de tela e abrindo automaticamente um merge request. A skill c2d faz o caminho inverso: exporta componentes, estados e tokens de design do código-fonte para arquivos do Figma.

A terceira skill, ds-govern, atua apenas no código. Ela faz um inventário do uso de estilos, como o raio das bordas, propõe uma única fonte da verdade, migra todo o projeto para ela e adiciona uma etapa de CI para evitar divergências. Um plugin opcional do Figma, Token Sync, permite que designers enviem alterações de volta ao código como merge requests.

Instale com npx skills add. Cada skill é acionada por solicitações em linguagem natural, e as configurações do projeto são salvas no arquivo C2D2C.md, na raiz do repositório, na primeira execução. O conector Figma MCP é necessário para as etapas que envolvem o design.

Recursos principais

  • 01Implementação de Figma para código, com levantamento dos componentes reutilizáveis antes do desenvolvimento
  • 02Exportação de componentes, estados e tokens de design do código para o Figma
  • 03Unificação do sistema de estilos com uma única fonte de tokens e uma etapa de CI
  • 04Ferramenta de capturas de tela para regressão baseada em Playwright, com capturas de página inteira e ampliações de seções
  • 05Plugin opcional do Figma que envia alterações dos designers de volta ao código como merge requests

Casos de uso

  • Implementar um design do Figma em escala 1:1 em uma base de código frontend existente
  • Exportar os componentes de uma base de código para o Figma para revisão de design
  • Unificar valores dispersos de espaçamento, raio de borda ou cor em uma única escala de tokens

Início rápido

  1. 1

    Instale as skills com o gerenciador de pacotes

    npx skills add BIAsia/c2d2c
  2. 2

    Conecte o conector Figma MCP (acesso de leitura para d2c e de escrita para c2d)

  3. 3

    Peça ao agente para executar uma skill, informando o que você quer fazer e o link do Figma; na primeira execução, a configuração é inicializada em C2D2C.md

Antes de usar

  • O conector Figma MCP é um pré-requisito obrigatório.
  • O README recomenda executar com Claude Fable 5 e informa que modelos anteriores costumam pular etapas.

Tópicos

#claude-code#figma#design-tokens#design-system#code-generation#agent-skills

Perguntas frequentes

O que é c2d2c?
Skills do Claude Code que levam designs do Figma para a base de código e sincronizam o código de volta para o Figma, além de uma skill para governança do sistema de estilos. c2d2c é um conjunto de três skills do Claude Code que conectam o Figma a uma base de código de produção nos dois sentidos. A skill d2c transforma um link de design do Figma em código, fazendo um levantamento dos componentes existentes, revisando o plano, implementando o design em escala 1:1, criando uma página de regressão, validando a aceitação por capturas de tela e abrindo automaticamente um merge request. A skill c2d faz o caminho inverso: exporta componentes, estados e tokens de design do código-fonte para arquivos do Figma.
c2d2c é gratuito? Qual é a licença?
c2d2c é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
c2d2c ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de c2d2c foi em 3 de ago. de 2026.
Para que posso usar c2d2c?
Implementar um design do Figma em escala 1:1 em uma base de código frontend existente Exportar os componentes de uma base de código para o Figma para revisão de design Unificar valores dispersos de espaçamento, raio de borda ou cor em uma única escala de tokens
Como instalar c2d2c?
Instale as skills com o gerenciador de pacotes: npx skills add BIAsia/c2d2c Conecte o conector Figma MCP (acesso de leitura para d2c e de escrita para c2d) Peça ao agente para executar uma skill, informando o que você quer fazer e o link do Figma; na primeira execução, a configuração é inicializada em C2D2C.md
Onde consigo c2d2c?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/BIAsia/c2d2c

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados