200+ Especificações de Design de App em Markdown – Arraste para o Claude ou Cursor para Clones Exatos de UI

Descrever uma interface de usuário para o Claude em prosa chega perto, mas erra — cores erradas, espaçamento errado, estados ausentes. A solução? Entregue uma especificação exata em vez de uma descrição. Um desenvolvedor mantém uma lista compilada de mais de 200 aplicativos populares já escritos como especificações de design em markdown estruturado, disponível em spectr.to/gallery.

O que contém cada especificação

• Códigos hexadecimais exatos para cores
• Definições de escala tipográfica
• Valores de espaçamento (padding, margem, gaps)
• Todos os estados de tela (carregamento, vazio, erro, etc.)
• Gráfico de navegação mostrando transições de tela
• Especificações separadas para os renderizadores SwiftUI, Jetpack Compose e Expo

Cada especificação é um arquivo markdown sem dependências — você o arrasta diretamente para o Claude, Cursor ou qualquer agente de IA, e ele tem os valores reais em vez de adivinhar.

Como usar

Navegue pela galeria em spectr.to/gallery para encontrar um aplicativo. Baixe (ou copie) a especificação markdown para o seu framework alvo. Coloque o arquivo no contexto do seu agente de IA ou cole-o inline. O agente então usa a especificação exata para gerar o código da interface.

O mantenedor está ativamente buscando feedback sobre dois pontos: quais aplicativos adicionar a seguir, e se arrastar a especificação como arquivo ou colá-la inline produz melhores resultados — eles oscilam entre os dois, então contribuições do mundo real são bem-vindas.