🎯 Proposito da Skill
A skill "Screenshot to Website" recebe uma imagem (screenshot, mockup ou wireframe) e gera o codigo HTML + Tailwind CSS que reproduz visualmente o design. E a ponte entre design e implementacao, eliminando horas de traducao manual.
🎯 Conceito Principal
# Purpose
Converter screenshot/mockup de interface em codigo HTML + Tailwind CSS
funcional e responsivo. Reproduzir o layout, cores, tipografia e
espacamento do design original com a maior fidelidade possivel.A skill funciona com qualquer tipo de imagem: screenshots de sites existentes, mockups do Figma exportados como PNG, wireframes desenhados a mao, ou ate prints de apps mobile que voce quer replicar para web.
💡 Dica Pratica
Quanto maior a resolucao do screenshot, melhor o resultado. Imagens de 1920x1080 ou superior permitem que o Claude identifique detalhes de espacamento, fontes e icones com muito mais precisao. Evite screenshots cortados ou de baixa resolucao.
🔍 Analise de Layout
O primeiro passo da skill e analisar a imagem e decompor o layout em componentes. O Claude identifica header, sidebar, cards, grids, formularios e outros elementos antes de escrever uma unica linha de codigo.
🎯 Conceito Principal
- •Hierarquia visual: Identificar header, main content, sidebar, footer
- •Sistema de grid: Quantas colunas, gaps, breakpoints implicitos
- •Paleta de cores: Extrair cores dominantes, acentos, backgrounds
- •Tipografia: Tamanhos, pesos, hierarquia h1-h6, body text
- •Componentes repetidos: Cards, list items, botoes com mesmo estilo
💡 Dica Pratica
Adicione notas ao screenshot antes de enviar. Um texto como "navbar fixa", "card clicavel" ou "dark mode" sobre a imagem ajuda o Claude a tomar decisoes melhores sobre implementacao. Anotacoes visuais economizam tokens de explicacao.
📐 Planejamento HTML
Antes de gerar o codigo final, a skill cria um plano de estrutura HTML. Isso garante que o markup seja semantico, acessivel e organizado antes de aplicar os estilos Tailwind.
🎯 Conceito Principal
# Step 2: HTML Planning
Antes de escrever codigo, crie um outline da estrutura:
- nav > logo + menu items + CTA button
- main > hero section (h1 + subtitle + 2 buttons)
- main > features grid (3 columns, each with icon + title + desc)
- main > testimonials (carousel or grid)
- footer > 4 column links + copyright
Usar tags semanticas: nav, main, section, article, footer
Garantir acessibilidade: alt texts, aria-labels, roles💡 Dica Pratica
O planejamento previne o problema mais comum: codigo espaguete com divs aninhadas sem logica. Um bom outline gera codigo que qualquer dev consegue manter. Se o outline nao faz sentido, o codigo tambem nao vai fazer.
🎨 Tailwind Build
Com o layout analisado e o HTML planejado, a skill gera o codigo completo usando classes Tailwind CSS. Responsive por padrao, com breakpoints sm/md/lg e utilitarios modernos.
🎯 Conceito Principal
- •CDN approach: Usa Tailwind CDN para resultado imediato sem build step
- •Responsive: Mobile-first com breakpoints para tablet e desktop
- •Cores exatas: Usa arbitrary values [#hex] quando cores Tailwind padrao nao batem
- •Interatividade: Hover states, transitions, focus rings incluidos
💡 Dica Pratica
Especifique na skill se quer single-file HTML (tudo junto com CDN) ou componentes separados. Para prototipos rapidos, single-file e perfeito. Para projetos reais, peca componentes que podem ser importados no seu framework (React, Vue, etc).
🔄 Loop de Comparacao
A skill inclui um passo de comparacao visual onde o Claude compara o resultado gerado com o screenshot original e faz ajustes. Esse loop de feedback e o que diferencia um resultado "ok" de um resultado "pixel-perfect".
🎯 Conceito Principal
# Step 5: Comparison Loop
1. Abrir o HTML gerado no navegador (ou visualizar mentalmente)
2. Comparar com o screenshot original:
- Espacamentos estao corretos? (padding, margin, gap)
- Cores batem? (background, text, borders)
- Tipografia esta proporcional? (size, weight, line-height)
- Layout responsivo faz sentido em mobile?
3. Listar diferencas encontradas
4. Aplicar correcoes
5. Repetir ate nenhuma diferenca significativa restar💡 Dica Pratica
Se estiver usando o Claude Code com um MCP de browser (como Puppeteer), o loop de comparacao pode ser automatico: o Claude tira screenshot do resultado, compara com o original, e itera. Sem MCP de browser, voce pode colar o screenshot do resultado para ele comparar manualmente.
✅ Quality Checklist
O checklist final garante que o codigo gerado nao so parece correto, mas tambem e funcional, acessivel e production-ready.
🎯 Conceito Principal
- ✓HTML valido (sem tags abertas, aninhamento correto)
- ✓Responsivo em 3 breakpoints (mobile, tablet, desktop)
- ✓Todas as imagens com alt text descritivo
- ✓Contraste de cores WCAG AA minimo
- ✓Interacoes (hover, focus) em todos os elementos clicaveis
- ✓Nenhum CSS customizado - 100% Tailwind utilities
💡 Dica Pratica
Adicione "100% Tailwind utilities, zero CSS customizado" no checklist se voce quer consistencia com o resto do projeto. Sem essa restricao, o Claude pode criar classes CSS avulsas que quebram o padrao do Tailwind e dificultam a manutencao.