Image To Code skill

O que ela faz

A image-to-code muda a ordem do trabalho: antes de qualquer código, o agente gera as imagens de referência do site, uma imagem grande por seção. Uma landing page de 8 seções vira 8 imagens, mais imagens de detalhe quando o texto ou os botões ficam pequenos demais pra ler.

Depois ele estuda cada imagem como se fosse a especificação: textos, tamanhos de letra, espaçamentos, cores, formato dos botões, grade. Se uma parte não está clara, gera aquela seção de novo, sozinha, em vez de recortar a imagem antiga. Só então programa, copiando o desenho em vez de cair num layout genérico.

Ela também traz regras contra a cara de IA: nada de caixa dentro de caixa, de etiquetas e pílulas de enfeite ou de marca falsa como Acme. O título do topo fica em até três linhas, e a primeira tela tem que ser legível num notebook pequeno.

Nas palavras de quem fez

Quando usar

• Criar uma landing page bonita do zero no Codex
• Refazer o visual de um site que ficou com cara de modelo pronto
• Desenhar só a seção do topo de uma página nova
• Montar um site de várias seções com o mesmo estilo do começo ao fim

Depois de instalar, é só pedir assim

• Usa a image-to-code: faz uma landing page de 8 seções pro meu curso de confeitaria, gerando as imagens antes de programar
• Gera a imagem do topo da página da minha agência, estuda e depois programa igual
• Refaz o site do meu estúdio de tatuagem em 4 seções, uma imagem por seção antes do código

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketAlerta
• SnykPassou

Perguntas