UI Orientado por Anotações: Como Projetar Templates no Figma e Deixar Claude Extrair Coordenadas

Um desenvolvedor criando o Zinecore, um aplicativo de criação de zines com estética anos 90/y2k (rosa choque, contornos grossos, balões de bate-papo, panfletos riot grrrl, páginas estilo MySpace), descobriu que a abordagem óbvia — definir programaticamente os slots de fotos no código — limitava cada template a uma grade entediante. A solução alternativa: projetar templates no Figma (alguns gerados por IA, depois limpos), exportar como PNGs planos e desenhar retângulos coloridos em uma camada separada. Vermelho para slots de foto, azul para texto. Alimente tanto o design quanto a imagem de anotação ao Claude.

O Claude extrai as coordenadas, gera definições de áreas editáveis e conecta os alvos de toque. O resultado: uma tarde de trabalho para o que seriam semanas construindo um mecanismo de layout personalizado. Adicionar um novo template agora requer apenas projetá-lo e desenhar caixas — nenhuma alteração de código. Todo o sistema de ferramentas de design é este pipeline de anotação.

O Padrão Mais Amplo: Design Primeiro no Papel

O desenvolvedor enfatiza uma mudança de fluxo de trabalho:

• Faça todo o pensamento de design no papel antes do Claude ver qualquer coisa.
• Esboce telas à mão, escolha a paleta de cores completa, decida a hierarquia tipográfica.
• Capture telas de aplicativos que você gosta e anote coisas específicas que deseja copiar de cada um.
• Entregue as restrições ao Claude e peça a implementação.

Ir pelo caminho oposto ("projete um aplicativo para mim, faça parecer anos 90") leva a três dias de ajustes até algo que ainda parece genérico. O Claude é forte em implementar fielmente uma visão específica, mas fraco em ter a visão por você. Quando você trata o design como seu trabalho e a implementação como trabalho do Claude, a qualidade do resultado dispara.

Os Detalhes Nada Glamourosos

• Descreva problemas visuais em termos de peso, hierarquia e ritmo em vez de "isso parece estranho, melhore".
• Cole códigos hexadecimais de fotos de referência reais em vez de dizer "rosa quente".
• Seja específico sobre qual aplicativo você está tentando imitar no espaçamento — não apenas nomeie a vibe.

O aplicativo (Zinecore na App Store) é o resultado concreto, mas o método de anotação primeiro no papel é a parte transferível.