50 Aplicativos Populares Reversamente Engenhados em Especificações de Design Legíveis por Claude: Padrões Chave para Clonagem de UI

u/meliwat passou semanas aplicando engenharia reversa em 50 aplicativos populares, transformando-os em especificações de design estruturadas em markdown, e os forneceu ao Claude para reconstruir as UIs. A diferença entre clones quase perfeitos e saídas divergentes se resumiu a algumas práticas concretas observadas em volume.

O Que Fez o Claude Acertar os Clones de UI

• Valores exatos, não intervalos. #1A1A1A funciona. "cinza escuro" produz cinco tons diferentes em cinco telas.
• Cobertura de estados antecipada. Listar todos os estados (vazio, carregando, erro, preenchido) impediu que o Claude inventasse os seus próprios.
• Espaçamento como escala, não pixels por elemento. Um sistema de espaçamento 4/8/16/24 produziu layouts mais consistentes do que anotar cada intervalo.
• Navegação como grafo. Transições explícitas entre telas eliminaram o achismo de "para onde vai este botão".

O Que Não Ajudou

Prosa mais longa. A partir de certo ponto, mais palavras pioraram a saída, não melhoraram. Mantenha as especificações concisas.

Recursos Disponíveis

Toda a coleção é open-source no GitHub em github.com/Meliwat/awesome-ios-design-md. Cada aplicativo vem com 3 níveis de especificação: referência rápida, construção padrão ou clone completo em nível de pixel. Tudo em markdown, licença MIT, sem dependências.

Pergunta para a Comunidade

O autor pergunta: se você já fez clonagem de UI com Claude, quais padrões você encontrou que estão faltando nesta lista? Quais aplicativos valem a pena adicionar em seguida?