Perfecto.

Antes de pasar a arquitectura, quiero ajustar el alcance.

Reduce el proyecto a un MVP muy simple para poder desarrollarlo rápido.

Debe incluir solo:

- crear oportunidad,
- ver listado,
- editar estado,
- añadir próxima acción,
- ver dashboard básico.

Deja fuera por ahora:

- multiusuario complejo,
- automatizaciones de email,
- permisos avanzados,
- integraciones externas,
- pipeline visual tipo kanban,
- informes avanzados.

Reformula el MVP final, las pantallas necesarias y los datos mínimos que habría que guardar.

Perfecto. Ahora convierte esta definición en un Documento Maestro del Proyecto en formato Markdown.

Quiero usarlo como memoria de contexto para continuar el desarrollo con ChatGPT.

Debe incluir:

# Nombre del proyecto
# Objetivo
# Alcance del MVP
# Funcionalidades incluidas
# Funcionalidades fuera de alcance
# Pantallas necesarias
# Datos a guardar
# Reglas de trabajo
# Riesgos iniciales
# Próximos pasos

Hazlo claro, breve y accionable. No generes código todavía.

Perfecto.

Ahora quiero convertir el Documento Maestro en una aplicación visualizable.

Actúa como Product Designer Senior especializado en aplicaciones SaaS.

Antes de hablar de arquitectura técnica o código, ayúdame a definir cómo sería la experiencia de usuario de la primera versión.

Diseña el wireframe funcional de estas pantallas:

1. Dashboard
2. Listado de oportunidades
3. Crear oportunidad
4. Editar oportunidad

Para cada pantalla indica:

- Objetivo principal
- Distribución visual
- Bloques o tarjetas
- Campos
- Botones
- Acciones del usuario
- Información mostrada

Al final genera un resumen visual del flujo completo del usuario:

Dashboard
↓
Listado
↓
Crear oportunidad
↓
Editar oportunidad

Importante:

No generes código.
No hables todavía de bases de datos.
No hables de arquitectura técnica.

Quiero una respuesta pensada para que un diseñador pueda crear un mockup en Canva o Figma y para que posteriormente podamos convertirlo en una aplicación real.

Perfecto.

Ahora actúa como diseñador de producto SaaS senior.

Basándote en el Documento Maestro y en los wireframes definidos, genera un briefing visual para crear un mockup moderno y profesional.

La aplicación debe inspirarse visualmente en:

- Notion
- Linear
- HubSpot simplificado

Describe:

- estructura visual general,
- colores recomendados,
- tipografía,
- tarjetas,
- tablas,
- botones,
- navegación,
- densidad visual,
- experiencia de usuario.

Después genera una descripción detallada de la pantalla Dashboard y de la pantalla Listado de oportunidades como si fueran a convertirse en una imagen o mockup profesional.

No generes código.
No hables de arquitectura técnica todavía.

Perfecto.

Ahora quiero que conviertas el briefing visual en un mockup HTML estático de la aplicación.

No quiero funcionalidad real todavía.
No quiero base de datos.
No quiero PHP.

Solo quiero una maqueta visual en HTML + CSS que represente la primera versión del producto.

Crea un único archivo `mockup.html` con:

1. Sidebar izquierda.
2. Dashboard con tarjetas resumen.
3. Tabla de próximas acciones.
4. Pantalla/listado de oportunidades.
5. Botón “Nueva oportunidad”.
6. Estética inspirada en Notion, Linear y HubSpot simplificado.

Condiciones:

- Debe verse moderno, limpio y profesional.
- Mucho espacio en blanco.
- Tarjetas suaves.
- Tabla clara.
- Estados como badges.
- Diseño responsive básico.
- No uses librerías externas.
- Todo el CSS debe ir dentro del mismo archivo.

El objetivo es poder abrir el archivo en el navegador y ver una primera maqueta visual antes de programar la aplicación real.