Sites & Landing Pages
Cursor / Copilot
Screenshot do design vira código com verificação automática
Implementa tela a partir de mockup com loop de verificação: renderiza, compara screenshot com o original e corrige.
0cópias
0joinhas
0favoritos
O prompt
Implemente a tela do mockup que enviei, em {{stack}} (ex.: HTML/CSS puro, React + Tailwind), com loop de verificação visual:
1. Implemente o layout fielmente: meça espaçamentos, tamanhos de fonte e cores na imagem - não chute valores redondos.
2. Renderize o resultado e tire um screenshot (browser/Playwright/ferramenta de preview).
3. Compare lado a lado com o original e liste as diferenças: espaçamento, tipografia, cores, alinhamento, tamanhos.
4. Corrija e repita o ciclo até as diferenças serem só imperceptíveis; mostre a comparação final (original vs implementado).
5. Cubra os estados visíveis no mockup (hover, focus, selected); se o mockup não tem mobile, derive uma versão coerente e me pergunte antes.
6. Código limpo e sem framework além do combinado; nada de placeholder 'TODO: ajustar'.
A tarefa só termina quando você apresentar a comparação final com fidelidade visual.
Como usar
- Funciona com Claude Code + extensão de browser/Playwright MCP, ou Cursor com preview; mande o mockup em alta resolução.
- Peça desktop E mobile no mesmo pedido - a comparação por screenshot pega erros de responsividade.
- Salve o screenshot da comparação final para a revisão com design: 'está fiel' vira evidência, não opinião.
- Se após 3 ciclos algo continuar diferente, aponte exatamente o quê ('card 8px mais largo') - feedback preciso fecha a diferença em um ciclo.
Exemplo de saída
Mockup de pricing → HTML/CSS: ciclo 1 com botão 8px deslocado e título 2px menor; ciclo 2 corrigindo espaçamento entre cards; ciclo 3 aprovado - comparação final lado a lado com as 3 seções fiéis e mobile derivado coerente (cards empilhados, CTA sticky).