irina-bandura/claude-skill-figma-implement

Figma Implement — Design para Código

Converta qualquer design do Figma em código de produção. Fluxo guiado descobre seu projeto, mapeia componentes do sistema de design para componentes de código e gera código que corresponde às suas convenções.

Na Ativação

Verifique o modelo atual. Se NÃO for opus, avise o usuário:

"Atenção — você está usando atualmente [nome do modelo]. Este plugin funciona melhor com Claude Opus para uma tradução precisa de design para código. Para alternar, execute:

/model opus

Ou continue com o modelo atual se preferir."

Se já for opus, pule esta mensagem silenciosamente.

Em seguida, inicie o fluxo guiado. Faça uma pergunta de cada vez. Aguarde cada resposta.

---

Fase 0: Conectar ao Figma

Verifique se o Figma MCP está conectado.

Tente chamar mcp__figma__whoami ou mcp__plugin_figma_figma__whoami silenciosamente. Se funcionar, vá para a Fase 1.

Se falhar:

"O Figma MCP não está conectado. Siga as instruções de configuração no README do plugin (seção de Configuração Figma MCP) — você precisará de um token de acesso do Figma e um comando CLI. Diga-me quando estiver pronto e eu verificarei."

Aguarde a resposta. Tente whoami novamente. Se funcionar, continue. Se ainda falhar, sugira verificar o token e reiniciar o Claude Code.

---

Fase 1: Descobrir Seu Projeto

Escaneie o projeto para entender a stack, convenções e componentes existentes.

"Deixe-me escanear seu projeto para entender como você escreve código..."

Execute estas verificações silenciosamente:

1a. Detecção de framework

Ler package.json → identificar: React? Vue? Svelte? Next.js? Remix? Astro?
Ler tsconfig.json → TypeScript ou JavaScript?

1b. Detecção de framework CSS

Verificar: tailwind.config.* → Tailwind CSS
Verificar: *.module.css → CSS Modules
Verificar: styled-components ou @emotion → CSS-in-JS
Verificar: arquivos .scss → Sass
Verificar: .css puro → vanilla CSS

1c. Detecção de biblioteca de componentes

Ler dependências do package.json para:
  @mui/* → Material UI
  @chakra-ui/* → Chakra UI
  antd → Ant Design
  @eds/* → Epic Design System
  @radix-ui/* → Radix
  Personalizado → escanear src/components/ para biblioteca interna

1d. Inventário de componentes existentes

Glob: src/components/**/*.{tsx,jsx,vue,svelte}
Para cada: extrair nome do componente, interface de props, padrões de uso

1e. Convenções de código

Verificar nomenclatura de arquivos: PascalCase.tsx? kebab-case.tsx? index.tsx em pastas?
Verificar estilo de importação: absoluta (@/components) ou relativa (../components)?
Verificar estilo de exportação: export default ou named export?

Apresente a descoberta:

"Aqui está o que encontrei no seu projeto:

Framework: [React/Vue/etc.] com [TypeScript/JavaScript] CSS: [Tailwind/CSS Modules/etc.] Biblioteca de componentes: [MUI/Chakra/Personalizada/Nenhuma] Componentes existentes: [N] encontrados em src/components/ [Listar os 10-15 principais nomes de componentes] Convenções: [arquivos PascalCase, imports absolutos, exports default, etc.]

Está correto? Há algo que eu deva saber sobre a configuração do seu projeto?"

Aguarde a resposta. Ajuste o entendimento se eles corrigirem algo.

---

Fase 2: Obter o Design do Figma

"Compartilhe a URL do design Figma (com um frame/nó específico selecionado)."

Aguarde a resposta. Extraia fileKey e nodeId da URL.

Então busque o design:

get_design_context({ nodeId, fileKey })
get_screenshot({ nodeId, fileKey })

Mostre a captura de tela:

"Aqui está o design que implementarei: [captura de tela]

Posso ver: [breve descrição das seções e elementos]

Este é o frame correto?"

Aguarde confirmação.

---

Fase 3: Mapeamento de Componentes

Mapeie cada elemento do Figma para um componente de código. Esta é a etapa crítica.

"Deixe-me mapear o design para seus componentes de código..."

Para cada elemento no design do Figma:

1. Verifique se existe um componente correspondente no projeto (do inventário da Fase 1d)
2. Se sim → reutilize-o com as props corretas
3. Se não → criará um novo componente seguindo as convenções do projeto

Apresente o mapeamento:

"Aqui está meu plano de implementação:

Reutilizando componentes existentes:

Elemento Figma	Seu componente	Props que definirei
Botão primário	<Button variant="primary">	label, onClick
Campo de texto	<TextField>	label, placeholder
Avatar	<Avatar>	src, name, size
...	...	...

Novos componentes a criar:

Elemento Figma	Novo componente	Localização
Cartão de estatísticas	<StatsCard>	src/components/StatsCard.tsx
...	...	...

[N] elementos reutilizam componentes existentes. [M] novos componentes necessários.

Posso prosseguir?"

Aguarde confirmação.

---

Fase 4: Implementar Seção por Seção

Construa incrementalmente — não tudo de uma vez:

1. Estrutura de layout — contêiner externo, grid, breakpoints responsivos
2. Navegação — cabeçalho, barra lateral, breadcrumbs (reutilize os existentes se disponíveis)
3. Conteúdo principal — área de recurso principal
4. Conteúdo secundário — barras laterais, rodapés
5. Conteúdo de dados — tabelas, cartões, formulários com dados realistas

Após cada seção:

• Salve o arquivo
• Verifique no navegador se o servidor de desenvolvimento está rodando
• Compare com a captura de tela do Figma

Regras de implementação

1. Reutilize componentes existentes. Nunca crie um novo Button se já existir um.
2. Siga as convenções. Nomenclatura de arquivos, importações, exportações — siga o que o projeto já faz.
3. Siga a abordagem CSS. Se Tailwind → Tailwind. Se CSS Modules → CSS Modules. Não misture.
4. Especificações do Figma são a fonte da verdade. Corresponda exatamente a espaçamento, cores e tipografia.
5. Cálculo de posição: posição CSS = filho Figma − pai Figma para elementos absolutos. Use flexbox/grid para layout automático.
6. Sanitização de SVG. Remova preserveAspectRatio="none" de SVGs.

---

Fase 5: Verificar com Playwright

"Implementação concluída. Deixe-me verificar se corresponde ao design..."

Use o Playwright MCP para comparar a implementação com o Figma:

1. Pergunte pela URL do servidor de desenvolvimento se não souber (ex.: http://localhost:5173)
2. Navegue: browser_navigate({ url })
3. Corresponda o viewport ao tamanho do frame do Figma: browser_resize({ width: [largura figma], height: [altura figma] })
4. Tire uma captura de tela do navegador: browser_take_screenshot({ type: "png" })
5. Compare com a captura de tela do Figma da Fase 2
6. Verifique erros no console: browser_console_messages({ level: "error" })
7. Obtenha o snapshot de acessibilidade: browser_snapshot() — verifique se a estrutura corresponde

"Aqui está a comparação:

• Figma: [captura de tela]
• Navegador: [captura de tela]
• Erros no console: [quaisquer erros, ou 'Nenhum']
• Divergências: [listar diferenças, ou 'Parece bom!']

Deseja que eu ajuste algo ou execute uma validação completa com /figma-validate?"

---

Regras Críticas

• A Fase 0 é obrigatória. Nunca pule a verificação de conexão Figma.
• A Fase 1 é executada uma vez por projeto. Armazene em cache a descoberta para a sessão.
• O mapeamento da Fase 3 requer confirmação. Não gere código até que o usuário aprove o plano.
• Reutilize em vez de recriar. Sempre verifique os componentes existentes primeiro.
• Siga o projeto. Não imponha novos padrões, frameworks ou convenções.
• Seção por seção. Nunca gere a página inteira de uma só vez.