Wireframe Mobile-First de Página de Producto E-commerce
Genera wireframes mobile-first optimizados para conversión en páginas de producto de comercio electrónico.
Objetivo del Prompt
Crear wireframes de alta fidelidad que aumenten la tasa de conversión en un 15% mediante una arquitectura de información validada.
Ejemplo Real de Uso
Tienda online de moda femenina 'BellaStilo' en México necesitaba redesignar sus páginas de producto que tenían una tasa de conversión del 2.1%. Usando este prompt generaron wireframes mobile-first que reorganizaron la información del producto por orden de prioridad visual, resultando en una tasa de conversión del 3.4% después de implementar el diseño.
Prompt
Eres un UX Designer senior especializado en comercio electrónico mobile-first. Tu tarea es crear un wireframe detallado para una página de producto en versión móvil. [DESCRIPCIÓN DEL PRODUCTO]: Describe brevemente el producto [CATEGORÍA]: Indica la categoría del producto [PRECIO]: Indica el rango de precio [CARACTERÍSTICAS CLAVE]: Lista 3-5 características principales del producto [PUBLICO OBJETIVO]: Define el perfil demográfico y psicográfico [OBJETIVO PRINCIPAL]: Conversión directa / Generación de leads / Educación del usuario [CTA PRINCIPAL]: Indica la acción que deseas que realice el usuario INSTRUCCIONES: 1. Usa sistema de grid de 12 columnas con gutters de 16px 2. Establece jerarquía visual siguiendo el patrón F-pattern 3. Prioriza elementos por orden de importancia: imagen hero, título, precio, CTA, características, testimonios, footer sticky 4. Incluye zona táctil mínima de 44x44px para todos los elementos interactivos 5. Diseña un sticky CTA button en la parte inferior con contraste mínimo de 4.5:1 6. Implementa micro-copy para reducir fricción (Garantía de devolución, Envío gratis, etc.) 7. Reserva 60% del viewport superior para contenido de decisión de compra 8. Incluye indicadores de confianza (badges, sellos, estadísticas) FORMATO DE SALIDA: - Layout en formato ASCII/texto con medidas en px y rem - Lista de componentes con su descripción funcional - Orden de prioridad de cada sección - Notas de accesibilidad WCAG 2.1 AA - Recomendaciones de estados (default, hover, disabled, loading) - Callouts para elementos de urgencia/escasez - Versión desktop responsive (vista colapsada de las secciones móviles)
Abrir directamente en una IA (el texto va pre-rellenado):
Cómo usar este prompt
- 1Pega el prompt directamente en ChatGPT, Claude, Gemini o cualquier asistente de IA.
- 2Personaliza los campos entre corchetes [así] con tu información específica.
- 3Para mejores resultados, proporciona contexto adicional sobre tu caso de uso.
- 4Combina múltiples prompts en una conversación para resultados más completos.
- 5Guarda los prompts que más usas para acceso rápido en el futuro.
Prompts relacionados
Ver todosPrompt de Wireframes #1
Prompt profesional de Wireframes
Wireframe Detallado de Aplicación Móvil con Especificaciones de Componentes UI
Genera wireframes de alta fidelidad para interfaces móviles con descripción completa de componentes
Generador de Wireframes de Alta Fidelidad con Sistema de Diseño
Crea wireframes detallados con sistema de diseño integrado para apps y sitios web.
Generación de Wireframes UI Detallados con Especificaciones Técnicas
Crea wireframes de baja fidelidad con anotaciones de usabilidad, flujo de navegación y decisiones de diseño explicadas.
Suscríbete a AIClases para desbloquear
Accede a 10.000+ prompts listos para usar en cualquier profesión, además de todos los cursos de la plataforma.
Cancela cuando quieras. Sin penalidades.