100 aplicações populares transformadas em especificações de design em Markdown para clonagem da interface do Claude

Um desenvolvedor fez engenharia reversa de 50 aplicativos populares, transformando-os em especificações de design em markdown estruturado, e as alimentou para o Claude reconstruir as UIs. Após iterar, eles encontraram alguns padrões críticos que melhoraram a precisão das clonagens e publicaram o repositório com 100 aplicativos.

O que faz o Claude acertar nas clonagens de UI

• Valores exatos, não faixas: #1A1A1A funciona; "cinza escuro" produz cinco tons diferentes de cinza em cinco telas.
• Cobertura de estados antecipada: Listar cada estado (vazio, carregando, erro, preenchido) impediu que o Claude inventasse seus próprios estados.
• Espaçamento como escala: Use um sistema de espaçamento 4/8/16/24 em vez de anotações de píxels por elemento para layouts mais consistentes.
• Navegação como grafo: Transições explícitas de tela para tela eliminam suposições sobre para onde os botões vão.

Texto mais longo piorou a saída além de certo ponto — brevidade e precisão importam mais que volume.

O que está no repositório

O repositório público em github.com/Meliwat/awesome-ios-design-md contém 100 aplicativos, cada um com três profundidades de especificação: referência rápida, construção padrão e clonagem total em nível de píxel. Todas as especificações são em markdown, licenciadas sob MIT, sem dependências. Solte uma especificação no Claude para obter uma saída de UI mais previsível.

Para quem é isso

Desenvolvedores que usam o Claude para gerar ou clonar componentes de UI, especialmente para iOS ou design geral de aplicativos.