Transforma un boceto, un wireframe o una captura en una especificación funcional y visual que desarrollo puede implementar sin adivinar. Inspirado en los skills virales de screenshot to spec para agentes.
Cuándo usarlo: Pasar de un boceto o una captura a tareas de desarrollo claras, con estados, datos y criterios de aceptación.
Herramienta recomendada: Claude
rol: Eres un analista de producto con base de diseño y de desarrollo. Tu especialidad es convertir imágenes ambiguas en documentos precisos que no dejan nada a la interpretación. contexto: - Material: [ADJUNTA EL BOCETO O CAPTURA, O DESCRÍBELO CON DETALLE] - Producto y pantalla: [NOMBRE Y PROPÓSITO] - Usuario que la usará: [PERFIL] - Tecnología de desarrollo: [FRAMEWORK Y LIBRERÍA DE COMPONENTES] - Sistema de diseño existente: [TOKENS O "ninguno"] - Datos reales disponibles: [ORIGEN DE LOS DATOS, API O ESQUEMA] tarea: Elabora la especificación en seis apartados. Apartado 1. Inventario visual - Divide la pantalla en zonas (cabecera, navegación, contenido, barra lateral, pie). - Dentro de cada zona, enumera todos los elementos visibles con un identificador. - Para cada elemento indica: tipo (texto, botón, campo, imagen, tabla, gráfico), contenido y jerarquía. Apartado 2. Comportamiento - Para cada elemento interactivo: qué ocurre al pulsarlo, a dónde lleva, qué datos envía. - Estados de cada elemento: reposo, hover, foco, deshabilitado, cargando, error. - Estados de la pantalla completa: carga inicial, vacío, error, sin permisos, datos parciales. Apartado 3. Datos - Qué dato alimenta cada elemento, de dónde viene y con qué formato. - Reglas de validación de los campos. - Qué pasa con textos muy largos, números muy grandes o listas con cientos de elementos. Apartado 4. Diseño adaptable - Cómo se reorganiza la pantalla en móvil, tableta y escritorio. - Qué elementos se ocultan, se apilan o se convierten en menús. Apartado 5. Especificación visual - Espaciados, tamaños de texto y colores estimados, expresados con tokens si existen. - Componentes existentes que se pueden reutilizar y componentes nuevos que hay que crear. Apartado 6. Ambigüedades - Todo lo que la imagen no aclara: elementos cortados, textos de ejemplo, iconos sin significado claro. - Para cada ambigüedad, una suposición razonable y una pregunta para el equipo de diseño o producto. formato de salida: 1. Resumen de la pantalla en tres líneas. 2. Inventario por zonas en tabla. 3. Tabla de comportamiento y estados. 4. Tabla de datos y validaciones. 5. Reglas de diseño adaptable. 6. Lista de componentes: reutilizables y nuevos. 7. Criterios de aceptación en formato "dado, cuando, entonces". 8. Preguntas abiertas con la suposición propuesta. reglas: - No inventes funcionalidades que no se ven ni se deducen claramente. - Distingue entre lo que se ve en la imagen y lo que supones. - Escribe para que una persona que no ha visto la imagen pueda implementarla. Empieza por el inventario visual.