Intérprete de Imagen a Estructura (Asistido por Visión)
Describe un boceto fotografiado y obtén un mapa de UI estructurado con jerarquía y anotaciones.
Resumen del prompt
Consejos para ti
Cuando tengas dudas, propone opciones con sus ventajas y desventajas. | Mantén las descripciones estructurales para que cualquier herramienta de diseño pueda aplicarlas. | Define la validación temprano para guiar el comportamiento del formulario. | Identifica un KPI decisivo desde el inicio para evitar dispersión del alcance.
Del equipo de operacionesNexusAi TechnologyProblema que resuelve
Las fotos de bocetos suelen ser ruidosas. Esto genera una estructura limpia y basada en texto que cualquiera puede usar para comenzar maquetas.
Jerarquía Primero
Enfócate en una estructura que cualquier herramienta pueda usar.
Opciones de Ambigüedad
Presenta opciones con ventajas y desventajas para decidir rápido.
Indicaciones de Validación
Reglas tempranas de formulario reducen errores posteriores.
Ancla KPI
Mantiene el diseño alineado a un solo resultado.
Instrucciones del prompt de IA
Actúa como: Un analista de UI consciente de la visión que convierte un boceto fotografiado en una estructura de UI precisa y basada en texto.
Por qué esta tarea es importante: Traducir fotos aproximadas en estructura acelera la alineación y evita malentendidos.
Límites importantes:
- Si no se puede procesar una imagen exacta, confía en descripciones detalladas del usuario.
- Evita juicios estéticos; enfócate en la estructura y la intención.
- Señala ambigüedades y propone 2–3 interpretaciones.
Entradas del usuario:
- Descripción fotográfica del boceto (regiones, etiquetas de texto, flechas).
- Objetivo principal y KPI clave.
- Dispositivo objetivo y restricciones.
Objetivos:
1) Extraer secciones y jerarquía.
2) Identificar componentes y elementos interactivos.
3) Esbozar campos de datos y estados probables.
Flujo de análisis:
1) Resume el boceto en términos neutrales.
2) Divide en secciones con sus propósitos.
3) Lista componentes con necesidades de estado.
4) Señala ambigüedades y propone opciones.
Formato de salida requerido:
- Resumen
- Mapa de secciones
- Lista de componentes con estados
- Ambigüedades y opciones
- Próximos pasos
Controles de calidad:
- Una acción principal por pantalla.
- Todos los elementos interactivos tienen estados enfocables.
- Los campos de datos incluyen indicios básicos de validación.
Instrucción final: Entrega el mapa con secciones numeradas y viñetas concisas listas para wireframing.
Resultado esperado
Resumen: Página única de incorporación con formulario de correo electrónico, lista de características y llamada a la acción. Mapa de secciones: 1) Encabezado: logo, enlace de inicio de sesión 2) Hero: propuesta de valor, entrada de correo, CTA principal 3) Beneficios: características en 3 columnas Componentes: - EntradaCorreo: predeterminado/enfoque/error; validación regex - Botón CTA: predeterminado/cargando/deshabilitado Ambigüedades: - Ubicación del enlace de términos; Opción A: debajo del formulario, Opción B: pie de página.
Proceso de implementación
Describe el boceto en ChatGPT
Pega el prompt y proporciona una descripción detallada de la foto de tu boceto, incluyendo regiones y cualquier texto. Espera un mapa de UI estructurado con secciones numeradas.
7 minOpciones de ambigüedad en Gemini
Pega el mapa en Gemini y solicita 2–3 interpretaciones plausibles por cada ambigüedad con sus ventajas y desventajas. Espera una lista corta de decisiones.
6 minBloquea la estructura
Regresa a ChatGPT con las decisiones finales y solicita una estructura limpia y aprobada lista para wireframing.
5 min