MODULO 5.3

📸 Skills Praticas: Screenshot to Website

Domine a skill mais impressionante do ecossistema: converter screenshots de design em paginas web pixel-perfect com HTML semantico e Tailwind CSS.

6
Topicos
35
Minutos
Intermediario
Nivel
Pratica
Tipo
1

🎯 O que a Skill Faz

A skill Screenshot to Website e uma das mais poderosas e impressionantes do ecossistema Claude Code. Ela recebe uma imagem de um design (screenshot de Figma, Dribbble, site existente) e gera uma pagina web responsiva que replica o design com 95%+ de fidelidade visual.

🎯 Conceito Principal

O workflow da skill segue um pipeline de 5 etapas que transforma pixels em codigo:

  • • Input: Screenshot ou imagem do design desejado (PNG, JPG, Figma export)
  • • Analise: Claude examina o layout, grid, espacamento, cores e tipografia
  • • Planejamento: Estrutura HTML semantica e mapeamento de componentes
  • • Implementacao: Construcao com Tailwind CSS, responsivo e acessivel
  • • Verificacao: Loop de comparacao visual ate atingir 95%+ de match

💡 Dica Pratica

Esta skill funciona melhor com screenshots de alta resolucao e designs com layout claro. Designs muito complexos (dashboards com 20+ componentes) devem ser divididos em secoes menores. Invoque a skill uma vez por secao para resultados mais precisos.

2

🔍 Analise de Layout

O primeiro step da skill e a analise profunda do design. O Claude examina o screenshot pixel a pixel, identificando os elementos estruturais que compoem o layout. Essa analise e o fundamento para todo o codigo que sera gerado.

🎯 Conceito Principal

A analise cobre quatro dimensoes criticas do design:

  • • Grid System: Numero de colunas, gaps entre elementos, alinhamento. O Claude identifica se e um grid de 12 colunas, flexbox, ou layout customizado
  • • Espacamento: Padding e margin entre secoes, dentro de cards, entre texto e bordas. Valores exatos em pixels convertidos para classes Tailwind
  • • Cores: Extracao de hex values exatos para backgrounds, textos, bordas, sombras e gradientes. Cada cor e mapeada para o design system
  • • Tipografia: Font families, tamanhos (em rem), pesos (light, regular, bold), line-heights e letter-spacing

💡 Dica Pratica

Se voce tem acesso ao arquivo Figma original, exporte com 2x de resolucao e inclua a paleta de cores e tokens de tipografia junto com o screenshot. Quanto mais informacao o Claude tiver, mais preciso sera o resultado. Um screenshot de 1920x1080 e o minimo recomendado.

3

🏗️ Planejamento de HTML Semantico

Antes de escrever uma linha de codigo, a skill planeja a estrutura HTML semantica. Isso garante acessibilidade, SEO e manutenibilidade. O Claude mapeia cada elemento visual para a tag HTML mais apropriada.

🎯 Conceito Principal

  • • Hierarquia de headings: h1 para titulo principal, h2 para secoes, h3 para subsecoes. Nunca pular niveis
  • • Tags semanticas: header, nav, main, section, article, aside, footer. Cada regiao do layout recebe a tag apropriada
  • • Componentes reutilizaveis: Cards, botoes, badges que aparecem multiplas vezes sao identificados para reutilizacao
  • • Elementos interativos: Botoes, links, forms, inputs. Cada um com roles ARIA apropriados quando necessario

💡 Dica Pratica

A fase de planejamento evita retrabalho massivo. Se o Claude pular direto para codigo sem planejar, o resultado tende a ser uma sopa de divs. Inclua na skill a instrucao explicita: "Antes de escrever codigo, liste a estrutura HTML completa em formato de outline".

4

🎨 Construcao com Tailwind

A implementacao usa Tailwind CSS por padrao, o que permite construcao rapida sem CSS customizado. O Claude traduz cada elemento visual analisado em classes Tailwind precisas, mantendo o codigo limpo e consistente.

🎯 Conceito Principal

  • • Utility-first: Cada propriedade visual vira uma classe Tailwind. bg-slate-900 text-white p-6 rounded-xl em vez de CSS customizado
  • • Responsividade: Breakpoints mobile-first com prefixos sm:, md:, lg:
  • • Dark mode: Suporte automatico com prefixo dark: quando o design incluir versao escura
  • • Cores customizadas: Valores hex que nao existem no Tailwind padrao sao adicionados via arbitrary values bg-[#1a2b3c]

💡 Dica Pratica

Para resultados production-ready, inclua na skill a instrucao de usar CDN do Tailwind para prototipagem rapida e migrar para build local (PostCSS) para producao. O CDN e perfeito para demonstracoes e prototipagem, mas nao deve ser usado em producao.

5

🔄 Loop de Comparacao Visual

O diferencial desta skill e o loop de comparacao visual. Apos gerar o codigo, o Claude compara o resultado com o screenshot original e itera ate atingir 95%+ de fidelidade. Nao e "gerar e entregar", e "gerar, comparar, ajustar, repetir".

🎯 Conceito Principal

  • • Iteracao 1: Geracao inicial do codigo baseado na analise. Captura aproximadamente 80-85% do design
  • • Iteracao 2: Ajustes de espacamento, cores exatas e tipografia. Sobe para 90-93%
  • • Iteracao 3: Refinamentos finais: sombras, gradientes, border-radius, transicoes. Atinge 95%+
  • • Criterio de parada: O loop continua ate que todos os quality checks estejam satisfeitos ou o numero maximo de iteracoes seja atingido

💡 Dica Pratica

Limite o loop a 3-4 iteracoes na skill para controlar custos de token. Apos a terceira iteracao, os ganhos marginais sao pequenos. Se o resultado nao estiver satisfatorio apos 3 iteracoes, o problema provavelmente esta na qualidade do screenshot de referencia.

6

✅ Checklist de Qualidade

O checklist de qualidade da skill Screenshot to Website cobre seis dimensoes criticas que determinam se o output e production-ready ou precisa de mais trabalho.

🎯 Conceito Principal

☐ Layout matches: Posicao e proporcao dos elementos correspondem ao screenshot original
☐ Cores exatas: Hex values identicos ao design, sem aproximacoes
☐ Tipografia fiel: Font family, size, weight e line-height corretos
☐ Responsivo: Funciona em mobile (320px), tablet (768px) e desktop (1280px+)
☐ Hover + Focus states: Botoes, links e elementos interativos com estados visuais
☐ Sem erros no console: Zero erros JavaScript, zero warnings CSS

💡 Dica Pratica

Use o DevTools do navegador para comparar lado a lado: screenshot original na esquerda, resultado gerado na direita. Foque primeiro nos problemas mais visiveis (layout, cores) e depois nos detalhes finos (shadows, border-radius). Essa ordem de prioridade e a mesma que a skill segue internamente.

🏋️

Exercicio Pratico

🏋️

Exercicio: Implementar Screenshot to Website

Tempo estimado: 25-30 minutos

1

Criar a skill no projeto

Crie o arquivo .claude/commands/screenshot-to-website.md usando o template do modulo 5.2 com os steps especificos deste modulo.

2

Escolher um screenshot de referencia

Use um design simples para o primeiro teste: landing page de uma pagina, card de produto ou section hero. Evite dashboards complexos.

3

Invocar e testar

> /screenshot-to-website

Forneca o screenshot e observe o Claude seguir os steps da skill.

4

Comparar e avaliar

Abra o resultado no navegador e compare com o screenshot original. Verifique cada item do checklist de qualidade.

✅ Criterios de Sucesso

☐ Skill criada e funcionando
☐ HTML semantico gerado
☐ Layout responsivo
☐ 90%+ fidelidade visual

📋 Resumo do Modulo

✓
Screenshot to Website transforma pixels em codigo - Pipeline de 5 etapas: input, analise, planejamento, implementacao, verificacao.
✓
Analise de 4 dimensoes - Grid, espacamento, cores e tipografia extraidos do screenshot.
✓
HTML semantico antes de codigo - Planejamento da estrutura previne "sopa de divs".
✓
Tailwind CSS utility-first - Responsivo, dark mode e cores customizadas via classes inline.
✓
Loop de comparacao visual - 3 iteracoes para atingir 95%+ de fidelidade ao design original.
✓
6 criterios de qualidade - Layout, cores, tipografia, responsividade, interatividade, zero erros.

Proximo Modulo:

5.4 - Skills Praticas: Lead Research e Code Review

← Modulo Anterior Voltar para Trilha Proximo Modulo →