img-to-html
Img → HTML
O que é
Skill para transformar um mock de interface (PNG/JPG/WebP) numa recriação HTML fiel, passo a passo.
Entrada: uma imagem de referência (anexada no chat, path, ou URL). Se faltar, peça.
Saída: pasta design-systems/<slug>/ com a referência copiada, o wireframe, o index.html e uma pasta assets/ com o CSS, o JS e as mídias geradas.
O entrypoint final deve se chamar exatamente index.html. Não use outro nome para o HTML principal.
<slug> = nome curto do mock em kebab-case (ex.: chatgpt-glass-dash). Se o usuário não indicar, derive do nome do arquivo ou pergunte.
Por que em etapas
Recriar a tela inteira de uma vez falha (cores, glass, ícones e fontes misturam erros). O fluxo é bottom-up: cada camada só começa depois da anterior aprovada pelo usuário. O wireframe define o que existe e seu plano indica quando e como implementar cada região. Assets entram conforme sua função: imagens que compõem o fundo são feitas junto dele.