Generador de Briefs de Diseño de Apps Sin Código

Aquí tienes el brief de diseño de la aplicación, listo para entregar a Bubble o FlutterFlow: --- **Brief de Diseño de Aplicación - [Nombre del Proyecto]** **1. Resumen del Producto** - **Propósito:** [Describe el objetivo principal de la app, ej. conectar freelancers con clientes locales] - **Público objetivo:** [Edad, hábitos, necesidades principales] - **Plataformas:** iOS y Android (responsive) **2. Estructura UX (Flujo de Pantallas)** - **Onboarding (3 pasos):** Bienvenida -> Permisos (notificaciones) -> Selección de intereses. - **Autenticación:** Login/Registro con email o Google. Opción "Continuar como invitado" (limitada). - **Pantalla principal (Home):** Tab bar inferior con 5 secciones: Inicio, Buscar, Crear (botón central flotante), Actividad, Perfil. - **Flujo de creación:** Home -> Botón "+" -> Formulario paso a paso (título, descripción, foto, ubicación) -> Vista previa -> Publicar. - **Detalle de ítem:** Imagen grande, título, descripción, autor, botón de acción (Contactar/Comprar). - **Perfil:** Datos del usuario, estadísticas (publicaciones, seguidores), configuración (privacidad, notificaciones, idioma). **3. Estilo Visual** - **Paleta de colores:** - Primario: `#4A90E2` (azul confiable) - Secundario: `#F5A623` (ámbar para CTAs) - Fondo: `#F8F9FA` (gris claro) - Texto: `#2C3E50` (gris oscuro) - **Tipografía:** Fuente sans-serif (ej. Inter o Roboto). Títulos en negrita (18-24px), cuerpo en regular (14-16px). - **Iconografía:** Iconos lineales (grosor 2px), estilo consistente (ej. Feather Icons). - **Espaciado:** Márgenes de 16px, tarjetas con radio de 12px y sombra suave (`box-shadow: 0 2px 8px rgba(0,0,0,0.1)`). - **Micro-interacciones:** Animaciones de fade/slide al cambiar de tab, botones con efecto de presión (scale 0.98). **4. Características Principales** - **Búsqueda avanzada:** Filtros por categoría, precio, distancia (usando geolocalización). - **Sistema de favoritos:** Corazón en tarjetas, lista persistente en el perfil. - **Chat en tiempo real:** Mensajes directos entre usuarios (solo texto e imágenes). - **Notificaciones push:** Alertas de nuevos mensajes, ofertas y recordatorios. - **Modo offline:** Caché de datos básicos (últimas publicaciones vistas). **5. Layout por Pantalla (Wireframe Descriptivo)** - **Home:** Barra de búsqueda superior -> Carrusel de categorías (horizontal) -> Feed de tarjetas (2 columnas, masonry). - **Detalle:** Imagen a pantalla completa (swipeable) -> Título y precio -> Descripción -> Mapa de ubicación -> Botón "Contactar" fijo en la parte inferior. - **Crear:** Formulario con campos agrupados (paso 1: fotos, paso 2: detalles, paso 3: ubicación). Barra de progreso superior. - **Perfil:** Foto de portada (banner) -> Avatar superpuesto -> Nombre y bio -> Tabs internos (Publicaciones, Guardados, Ajustes). **6. Lógica y Reglas de Negocio** - **Autenticación:** Sesión persistente (token JWT). Regenerar token cada 24h. - **Permisos:** Solicitar acceso a cámara, galería y ubicación solo cuando sea necesario (en el flujo de creación). - **Validaciones:** - Título: mínimo 5 caracteres, máximo 80. - Descripción: mínimo 20 caracteres, máximo 500. - Imágenes: máximo 5 por publicación, formato JPG/PNG, tamaño máximo 5MB. - **Privacidad:** Perfiles públicos por defecto. Opción de cuenta privada (solo seguidores aprobados). - **Moderación:** Sistema de reportes (3 reportes = revisión manual). Bloqueo automático de palabras ofensivas en el chat. - **Geolocalización:** Calcular distancia en km entre usuario y publicación (fórmula haversine). Mostrar "a X km" en tarjetas. - **Estado de publicación:** Borrador (visible solo para el autor) vs. Publicado (visible para todos). Editar solo en borrador. **7. Requisitos Técnicos para el Build** - **Base de datos:** Tablas para Usuarios, Publicaciones, Favoritos, Mensajes, Reportes. - **API:** Endpoints REST para CRUD de publicaciones, autenticación, y búsqueda con filtros. - **Almacenamiento:** Bucket para imágenes (ej. AWS S3 o Firebase Storage) con URLs firmadas. - **Rendimiento:** Lazy loading en el feed (cargar 10 ítems por scroll). Optimizar imágenes (compresión al 80%). - **Analytics:** Eventos de registro, creación de publicación, y clic en "Contactar". **8. Criterios de Aceptación (Checklist Final)** - [ ] Flujo de onboarding completo sin errores. - [ ] Búsqueda con filtros devuelve resultados en < 2 segundos. - [ ] Chat envía y recibe mensajes en tiempo real (< 1 segundo de latencia). - [ ] La app funciona sin conexión para ver publicaciones cacheadas. - [ ] Todos los formularios validan correctamente y muestran errores claros. --- **Notas para el equipo de desarrollo:** Priorizar la implementación del flujo de creación y el feed principal. El chat puede ser una fase 2 si hay limitaciones de tiempo. Usar componentes reutilizables para tarjetas y botones para mantener consistencia.

Generador de Briefs de Diseño de Apps Sin Código

Contenido del PromptGuardar

Iniciá sesión para ver el prompt completo

Uso

Referencias

Discusión