UI impulsado por anotaciones: Cómo diseñar plantillas en Figma y permitir que Claude extraiga coordenadas

Un desarrollador que construye Zinecore, una aplicación para crear fanzines con estética de los 90/y2k (rosa chicle, contornos gruesos, burbujas de chat, volantes riot grrrl, páginas estilo MySpace), descubrió que el enfoque obvio—definir programáticamente ranuras para fotos en el código—limitaba cada plantilla a una cuadrícula aburrida. La solución: diseñar plantillas en Figma (algunas generadas por IA, luego limpiadas), exportarlas como PNG planos y dibujar rectángulos de colores en una capa separada. Rojo para ranuras de foto, azul para texto. Alimenta tanto el diseño como la imagen de anotación a Claude.

Claude extrae las coordenadas, genera definiciones de áreas editables y configura los objetivos táctiles. El resultado: una tarde de trabajo por lo que habrían sido semanas construyendo un motor de diseño personalizado. Agregar una nueva plantilla ahora solo requiere diseñarla y dibujar cuadros—sin cambios de código. Todo el sistema de herramientas de diseño es este pipeline de anotación.

El Patrón Más Amplio: Diseño Primero en Papel

El desarrollador enfatiza un cambio de flujo de trabajo:

• Haz todo el pensamiento de diseño en papel antes de que Claude vea nada.
• Dibuja pantallas a mano, elige la paleta de colores completa, decide la jerarquía tipográfica.
• Toma capturas de pantalla de aplicaciones que te gusten y anota cosas específicas que quieras copiar de cada una.
• Entrega las restricciones a Claude y pide la implementación.

Ir al revés ("diseñame una aplicación, haz que parezca de los 90") lleva a tres días de ajustes para algo que aún se siente genérico. Claude es fuerte implementando fielmente una visión específica, pero débil en tener la visión por ti. Una vez que tratas el diseño como tu trabajo y la implementación como el de Claude, la calidad del resultado aumenta.

Los Detalles Poco Glamurosos

• Describe problemas visuales en términos de peso, jerarquía y ritmo en lugar de "esto se ve mal, mejóralo".
• Pega códigos hex de fotos de referencia reales en lugar de decir "rosa cálido".
• Sé específico sobre qué espaciado de qué aplicación estás tratando de imitar—no solo menciones la vibra.

La aplicación (Zinecore en la App Store) es el resultado concreto, pero el método de anotación primero en papel es la parte transferible.