KnowledgebaseCAPITAL

PROMPT PERFECTO BASE - CAPITALTA

📋 Documento de Contexto Completo para Desarrollo

Versión: 1.0
Fecha: Diciembre 2025
Estado: Fase 1 Completada - Fundamentos Listos

🎯 Resumen Ejecutivo

Este documento consolida todo el contexto necesario para desarrollar la plataforma completa de Capitalta, una SOFOM ENR especializada en créditos para el sector de la construcción en México. La plataforma incluye landing page, dashboard de clientes, panel administrativo, y sistemas de evaluación crediticia automatizada mediante IA.

📁 Estructura de Documentación

✅ Documentación Completada (Fase 1)

1. Arquitectura Frontend

Ubicación: /contexto/docs/tecnologia/arquitectura-frontend.mdx

Contenido:

Decisiones Clave:

2. Wireframes de Alta Fidelidad

Ubicación: /contexto/docs/sitio/wireframes-alta-fidelidad.mdx

Páginas Documentadas:

  1. Landing Page - Hero, beneficios, productos, testimonios, FAQ, footer
  2. Dashboard Cliente - Resumen, solicitudes, documentos, notificaciones
  3. Solicitud de Crédito - Formulario multi-step con 5 pasos
  4. Dashboard Admin - Pipeline, métricas, gestión de solicitudes
  5. Detalle de Solicitud (Admin) - Evaluación completa, documentos, análisis

Especificaciones Incluidas:

3. API Endpoints Críticos

Ubicación: /contexto/docs/tecnologia/api-endpoints-criticos.mdx

10 Endpoints Documentados:

  1. POST /auth/register - Registro de usuarios
  2. POST /auth/login - Inicio de sesión
  3. POST /solicitudes - Crear solicitud de crédito
  4. GET /solicitudes/{id} - Obtener detalle de solicitud
  5. GET /solicitudes - Listar solicitudes (con filtros y paginación)
  6. PATCH /solicitudes/{id} - Actualizar solicitud
  7. POST /solicitudes/{id}/documentos - Subir documentos
  8. POST /cfdi/conectar - Conectar con SAT para análisis CFDI
  9. POST /avm/solicitar - Solicitar valuación automatizada
  10. GET /dashboard/metricas - Obtener métricas del dashboard

Especificaciones Incluidas:

4. User Flows Principales

Ubicación: /contexto/docs/proceso/user-flows-principales.mdx

3 Flujos Documentados:

Flow 1: Registro y Onboarding Completo

Flow 2: Solicitud de Crédito (Persona Física)

Flow 3: Evaluación y Aprobación (Vista Admin)

📚 Documentación Existente (Pre-Fase 1)

Contexto de Negocio

Productos y Servicios

Tecnología e IA

Sitio Web

🚀 Estado Actual del Proyecto

✅ Completado (Fase 1 - Fundamentos)

  1. Arquitectura Frontend Definida

    • Stack tecnológico seleccionado y justificado
    • Estructura de carpetas y organización
    • Patrones de diseño establecidos
    • Estrategia de state management
    • Plan de testing y CI/CD

  2. Wireframes de Alta Fidelidad

    • 5 páginas principales completamente especificadas
    • Componentes UI identificados y documentados
    • Interacciones y microanimaciones definidas
    • Responsive design considerado
    • Accesibilidad incluida

  3. API Endpoints Especificados

    • 10 endpoints críticos documentados
    • Request/Response con ejemplos reales
    • Validaciones y reglas de negocio
    • Manejo de errores estandarizado
    • Autenticación y seguridad

  4. User Flows Documentados

    • 3 flujos principales mapeados end-to-end
    • Validaciones y casos edge considerados
    • Métricas y analytics definidas
    • Estrategia de recuperación de sesión
    • Notificaciones y comunicación

⚠️ Pendiente (Fases 2-5)

Fase 2: Contenido y Diseño

Prioridad Alta:

  1. Copy Completo

    • Todas las páginas de la landing
    • Emails transaccionales (15+ templates)
    • Mensajes de error y validación
    • Tooltips y ayuda contextual
    • Términos y condiciones legales
    • Aviso de privacidad

  2. Assets Gráficos

    • Logo en todas las variantes
    • Iconografía personalizada
    • Ilustraciones para landing
    • Imágenes de productos
    • Fotos de equipo
    • Testimonios con fotos reales

  3. Animaciones y Microinteracciones

    • Transiciones entre páginas
    • Loading states
    • Success/error animations
    • Scroll animations
    • Hover effects
    • Progress indicators

  4. Documentos Legales

    • Términos y condiciones completos
    • Aviso de privacidad (LFPDPPP)
    • Contrato de crédito digital
    • Pagaré digital
    • Autorización de consulta de buró

Fase 3: Marketing Digital

Prioridad Alta:

  1. SEO

    • Keyword research completo
    • Meta tags para todas las páginas
    • Schema markup (Organization, Product, Review)
    • Sitemap XML
    • Robots.txt
    • Open Graph y Twitter Cards
    • Estrategia de contenido (blog)

  2. Funnel de Conversión

    • Mapa del customer journey completo
    • Landing pages específicas por producto
    • A/B testing plan
    • Lead magnets (calculadoras, guías)
    • Email sequences (nurturing)
    • Retargeting strategy

  3. Analytics y Tracking

    • Google Analytics 4 setup
    • Google Tag Manager
    • Eventos personalizados
    • Conversiones y goals
    • Funnels de conversión
    • Heatmaps (Hotjar/Clarity)
    • Session recording

  4. Optimización de Conversión (CRO)

    • Análisis de puntos de fricción
    • Optimización de formularios
    • Social proof strategy
    • Urgency y scarcity tactics
    • Exit-intent popups
    • Chat en vivo / Chatbot

  5. Paid Advertising

    • Google Ads (Search, Display)
    • Facebook/Instagram Ads
    • LinkedIn Ads (B2B)
    • Remarketing campaigns
    • Budget allocation
    • KPIs y ROI tracking

Fase 4: Operaciones y Compliance

Prioridad Media:

  1. Procesos Operativos

    • Manual de operaciones
    • Workflows de evaluación crediticia
    • Proceso de desembolso
    • Proceso de cobranza
    • Manejo de incumplimientos
    • Proceso de renovación

  2. Customer Support

    • Base de conocimiento (FAQ extendido)
    • Scripts de atención al cliente
    • Escalation matrix
    • SLAs de respuesta
    • Integración con CRM
    • Chatbot training data

  3. Compliance y Regulatorio

    • Cumplimiento CNBV
    • Prevención de lavado de dinero (PLD)
    • Conoce a tu cliente (KYC)
    • Reportes regulatorios
    • Auditoría y controles internos
    • Políticas de privacidad y seguridad

  4. Reportes y Dashboards

    • Dashboard ejecutivo
    • Reportes de cartera
    • Análisis de riesgo
    • Reportes regulatorios
    • Métricas operativas
    • Alertas y notificaciones

Fase 5: Testing y Launch

Prioridad Alta:

  1. Testing Completo

    • Unit tests (>80% coverage)
    • Integration tests
    • E2E tests (Playwright/Cypress)
    • Performance testing (Lighthouse)
    • Security testing (OWASP)
    • Accessibility testing (WCAG 2.1 AA)
    • User acceptance testing (UAT)

  2. Deployment y DevOps

    • CI/CD pipeline completo
    • Staging environment
    • Production environment
    • Monitoring y logging (Sentry, LogRocket)
    • Backup y disaster recovery
    • Escalabilidad y auto-scaling
    • CDN y optimización de assets

  3. Documentación Técnica

    • README completo
    • Guía de instalación
    • Guía de desarrollo
    • Guía de deployment
    • API documentation (Swagger/OpenAPI)
    • Troubleshooting guide

  4. Launch Plan

    • Soft launch con usuarios beta
    • Feedback collection
    • Bug fixes y ajustes
    • Marketing launch campaign
    • PR y comunicación
    • Post-launch monitoring
    • Iteración y mejora continua

🎨 Sistema de Diseño

Paleta de Colores

Primarios:

Secundarios:

Neutros:

Tipografía

Primaria: Inter (Sans-serif)

Secundaria: JetBrains Mono (Monospace)

Espaciado

Sistema de 8px:

Componentes Base (Shadcn/ui)

Instalados:

🔧 Stack Tecnológico Completo

Frontend

Backend (Recomendado)

IA y Análisis

DevOps

📊 Métricas Clave (KPIs)

Negocio

Producto

Técnico

🔐 Seguridad y Compliance

Seguridad

Compliance

📝 Checklist de Desarrollo

Pre-desarrollo

Desarrollo Frontend

Desarrollo Backend

Testing

Deployment

Post-Launch

🎯 Próximos Pasos Inmediatos

Para Completar Fase 2 (Contenido y Diseño)

  1. Escribir Copy Completo (Prioridad 1)

    • Landing page completa (hero, beneficios, productos, FAQ)
    • Emails transaccionales (15+ templates)
    • Mensajes de error y validación
    • Tooltips y ayuda contextual

  2. Crear/Obtener Assets Gráficos (Prioridad 1)

    • Logo en variantes (color, blanco, negro, isotipo)
    • Ilustraciones para landing (hero, beneficios, productos)
    • Iconografía personalizada
    • Fotos de equipo
    • Testimonios con fotos

  3. Documentos Legales (Prioridad 1)

    • Términos y condiciones (revisar con abogado)
    • Aviso de privacidad LFPDPPP compliant
    • Contrato de crédito digital
    • Pagaré digital
    • Autorización de consulta de buró

  4. Definir Animaciones (Prioridad 2)

    • Transiciones entre páginas
    • Loading states
    • Success/error animations
    • Scroll animations

Para Completar Fase 3 (Marketing)

  1. SEO (Prioridad 1)

    • Keyword research
    • Meta tags para todas las páginas
    • Schema markup
    • Estrategia de contenido

  2. Analytics (Prioridad 1)

    • Setup de Google Analytics 4
    • Eventos personalizados
    • Funnels de conversión

  3. Funnel de Conversión (Prioridad 2)

    • Landing pages específicas
    • Lead magnets
    • Email sequences

💡 Recomendaciones Finales

Para Desarrollo Eficiente

  1. Empezar con MVP

    • Enfocarse en el flujo principal: Registro → Solicitud → Evaluación
    • Landing page simple pero efectiva
    • Dashboard básico funcional
    • Admin panel con funcionalidades core

  2. Iterar Rápido

    • Lanzar versión beta con usuarios reales
    • Recopilar feedback constantemente
    • Ajustar basado en datos reales

  3. Priorizar Seguridad y Compliance

    • No comprometer en temas regulatorios
    • Consultar con abogados especializados
    • Implementar mejores prácticas desde el inicio

  4. Automatizar Todo lo Posible

    • CI/CD desde el día 1
    • Testing automatizado
    • Deployment automatizado
    • Monitoring y alertas

  5. Documentar Mientras Desarrollas

    • README actualizado
    • Comentarios en código crítico
    • Changelog de versiones
    • Guías de troubleshooting

📞 Contacto y Soporte

Para preguntas sobre el contexto:

Para decisiones de negocio:

Para decisiones técnicas:

📄 Documentos de Referencia

Documentación Técnica

Regulatorio

Diseño

Última actualización: Diciembre 2025
Versión: 1.0
Estado: ✅ Fase 1 Completada - Listo para Fase 2

🚀 PROMPT PARA DESARROLLO

Cuando estés listo para iniciar el desarrollo, usa este prompt:

Vamos a desarrollar la plataforma completa de Capitalta basándonos en el contexto documentado.

CONTEXTO COMPLETO:
- Arquitectura: /contexto/docs/tecnologia/arquitectura-frontend.mdx
- Wireframes: /contexto/docs/sitio/wireframes-alta-fidelidad.mdx
- API: /contexto/docs/tecnologia/api-endpoints-criticos.mdx
- User Flows: /contexto/docs/proceso/user-flows-principales.mdx
- Diseño: /contexto/docs/tecnologia/guia-diseno.mdx
- Negocio: /contexto/docs/empresa/overview.mdx

STACK:
- Next.js 14 + TypeScript + TailwindCSS + Shadcn/ui
- React Hook Form + Zod
- Zustand + React Query
- Recharts + Framer Motion

SCAFFOLD:
- Usar: web-db-user (incluye auth, database, backend API)

PRIORIDADES:
1. Landing page funcional y atractiva
2. Sistema de autenticación completo
3. Formulario de solicitud multi-step
4. Dashboard de cliente básico
5. Panel admin para evaluación

REQUISITOS:
- Responsive design (mobile-first)
- Accesibilidad WCAG 2.1 AA
- Performance (Lighthouse >90)
- SEO optimizado
- Seguridad (HTTPS, encriptación, rate limiting)

Empecemos por inicializar el proyecto y crear la estructura base.

Este documento es la base para todo el desarrollo. Mantenerlo actualizado conforme avance el proyecto.