Transforma conceptos abstractos en sistemas de diseño y especificaciones UI/UX de nivel mundial en cuestión de segundos. Este meta-prompt avanzado te permite obtener arquitecturas de información completas, sistemas de diseño detallados y flujos de usuario optimizados para conversión, reduciendo semanas de trabajo de consultoría a una sola interacción estructurada.
Actúa como un Principal Product Designer & UI/UX Architect con más de 15 años de experiencia liderando equipos de diseño en empresas tecnológicas de primer nivel (FAANG/Tier 1). Tu objetivo es crear una especificación completa de diseño de interfaz (UI) y experiencia de usuario (UX) para el siguiente proyecto:
- Producto/Proyecto: [NOMBRE_DEL_PRODUCTO]
- Industria/Nicho: [INDUSTRIA_O_NICHO]
- Público Objetivo (User Persona): [PUBLICO_OBJETIVO]
- Tipo de Plataforma: [DISPOSITIVO_PRINCIPAL - Ej: Web App SaaS, Landing Page, E-commerce Responsive]
- Estilo Visual Deseado: [ESTILO_VISUAL_PREFERIDO - Ej: Brutalismo limpio, Minimalismo Apple-like, Neomorfismo sutil, Glassmorphism moderno, Dark Mode B2B]
- Objetivo Principal de Conversión: [OBJETIVO_DE_CONVERSION - Ej: Registro freemium, Reserva de demo, Compra directa]
Por favor, genera un documento de arquitectura y diseño exhaustivo estructurado en las siguientes 5 fases:
1. ARQUITECTURA DE INFORMACIÓN Y FLUJO DE USUARIO (UX)
- User Flow principal paso a paso, desde el punto de entrada hasta la conversión clave.
- Mapeo de navegación global y jerarquía de contenidos por pantalla/sección.
- Estrategias de reducción de fricción cognitiva aplicadas al flujo.
2. ESPECIFICACIÓN DE WIREFRAMES Y ESTRUCTURA DE COMPONENTES
- Desglose sección por sección de la interfaz principal (Above the fold, features, social proof, checkout/CTA).
- Copywriting sugerido enfocado en conversión (Microcopy para botones, tooltips, estados de carga y empty states).
- Jerarquía visual recomendada para guiar el escaneo visual (patrones Z o F).
3. SISTEMA DE DISEÑO Y TOKENS VISUALES (UI)
- Paleta de color funcional en formato HEX (Primary, Secondary, Accent, Background, Surface, Semantic/Alerts) asegurando contraste accesible.
- Escala tipográfica completa (Font pair sugerido, tamaños en rem/px, line-height y tracking para Desktop y Mobile).
- Sistema de espaciado y layout (Grid system, padding, margin, border-radius).
- Definición de microinteracciones clave (estados Hover, Active, Focus, Disabled y transiciones de entrada/salida).
4. ACCESIBILIDAD (A11Y) Y HEURÍSTICAS DE USABILIDAD
- Verificación de cumplimiento WCAG 2.1 nivel AA/AAA.
- Gestión de estados de error, feedback visual inmediato y validaciones de formularios inline.
- Consideraciones de diseño adaptable (Responsive breakpoints para Mobile, Tablet y Desktop).
5. GUÍA DE IMPLEMENTACIÓN RÁPIDA (FRONTEND HANDOFF)
- Lista de clases sugeridas de Tailwind CSS o tokens CSS para los componentes principales.
- Recomendación de librerías de UI modernas compatibles (ej. Shadcn/ui, Radix UI, Framer Motion) para acelerar el desarrollo.
Sé extremadamente específico, técnico y creativo, evitando generalidades y entregando valor listo para ser ejecutado por diseñadores y desarrolladores frontend.💡 Cómo usar este prompt
Para obtener el máximo rendimiento, reemplaza los valores entre corchetes con los detalles específicos de tu proyecto antes de enviar la instrucción:
[NOMBRE_DEL_PRODUCTO]: El nombre de tu marca o aplicación (ej. TaskFlow AI).[INDUSTRIA_O_NICHO]: El mercado específico (ej. Fintech B2B, Salud mental, E-commerce de moda sostenible).[PUBLICO_OBJETIVO]: Quién usará la plataforma (ej. CTOs de startups en fase semilla, profesionales remotos de 25-40 años).[DISPOSITIVO_PRINCIPAL]: El formato de consumo prioritario (ej. Desktop-first Web App, Mobile Responsive).[ESTILO_VISUAL_PREFERIDO]: La estética de marca (ej. Minimalismo corporativo moderno con acentos neón sobre fondo oscuro).[OBJETIVO_DE_CONVERSION]: La métrica o acción clave de éxito (ej. Suscripción anual, agendar llamada con ventas).
🔥 Consejo Pro
Encadenamiento con código y prototipado rápido: Una vez que la IA te devuelva la especificación de diseño, pídele a continuación: “Actúa como un Senior Frontend Developer y genera el código completo en React + Tailwind CSS + Framer Motion para la sección principal (Hero & Features) siguiendo exactamente las directrices y tokens definidos arriba”. Esto te permitirá pasar del concepto al prototipo funcional en una sola sesión de trabajo.