/image-to-code-skillProgramaçãoConverter print de interface em código
Recebe a imagem de uma tela e devolve HTML e CSS estruturados — útil para o esqueleto, não para a entrega final.
Para: Devs frontend
O que é
Você recebe um print, um Figma exportado como imagem ou a foto de um rascunho e precisa transformar aquilo em código. A parte mecânica — montar a estrutura, aproximar espaçamentos, identificar a grade — é o que essa skill faz rápido.
O que ela entrega bem: hierarquia de elementos, layout em flex ou grid, aproximação de tamanhos e cores. O que ela não entrega: os seus componentes, os seus tokens, comportamento responsivo pensado e os estados que não aparecem na imagem estática.
Quando usar
- Para vencer a estrutura inicial de uma tela e ter algo com que trabalhar
- Ao reconstruir uma interface antiga da qual só existe captura de tela
- Para transformar rascunho em protótipo navegável rapidamente
Quando não usar
- Quando existe o arquivo de design real — extrair medidas da fonte é sempre melhor que inferir de pixels
- Se o seu projeto tem design system consolidado: o código gerado vai ignorar seus componentes e você vai reescrever de qualquer jeito
- Para gerar código de produção direto, sem revisão
O erro mais comum
Aceitar os valores absolutos que saem da conversão. Uma imagem tem pixels, então o resultado vem cheio de padding: 23px e #4a4a52 — valores que não existem na sua escala e que corroem o design system em silêncio.
Passe sempre um segundo momento trocando número cru por variável. É rápido e é o que separa "código gerado" de "código do projeto".
Instalação
$ npx skills add anthropics/skillsOutras skills de Programação
- /create-skillCriar suas próprias skills para o Claude CodeTransforma uma instrução que você repete toda semana em uma skill reutilizável, com estrutura e documentação corretas.
- /feature-plannerTransformar uma ideia solta em plano de implementaçãoPega um 'quero adicionar X' e devolve arquivos afetados, riscos, estimativa e pontos de decisão — antes de escrever código.
- /cost-reducerAchar onde sua infraestrutura está queimando dinheiroAnalisa a stack e aponta desperdício — consultas N+1, recursos ociosos, chamadas de API evitáveis — com estimativa de economia por item.