Cliente
Mauro Marchisio del Rivero
Rol
Fullstack No-code Developer
Año
2026
Herramientas
Antigravity, MCP, Firebase, Skills
Diseño Multimodal & Vibe Coding
El desarrollo de mauromarchisio.com no es solo la creación de un portafolio web de alto impacto, sino un experimento práctico y exitoso del paradigma del Vibe Coding. La plataforma fue concebida, diseñada y desarrollada orquestando flujos de trabajo con distintos Agentes de Inteligencia Artificial, demostrando cómo la IA puede colaborar activamente en la toma de decisiones arquitectónicas, diseño UX/UI, optimización de rendimiento y despliegue continuo.
El Paradigma del "Vibe Coding"
A diferencia del desarrollo web tradicional orientado puramente a escribir sintaxis, esta plataforma fue construida dirigiendo Agentes Autónomos Especializados. El proceso se centró en la arquitectura del sistema, la dirección de producto y la validación de resultados a través de instrucciones en lenguaje natural estructurado: Orquestación de Agentes con Roles: Se asignaron "Personas" específicas a la IA (Ingeniero de Producto, Site Reliability Engineer, Líder de Diseño). Cada uno actuó bajo sus propias reglas de negocio y estrictos umbrales de calidad (Definition of Done), impidiendo fusiones de código que no cumplieran, por ejemplo, con el rendimiento mínimo exigido. Micro-habilidades ("Skills") Automatizadas: Se utilizaron "skills" pre-programadas para tareas críticas. La skill de SEO Auditor analizó autónomamente la jerarquía web para proponer mejoras semánticas y de enlazado interno. La skill Commiter gestionó un historial de Git impecable siguiendo el estándar de Conventional Commits. Ciclo de Desarrollo Convergente: La web evolucionó conversacionalmente. Cada componente pasó por un bucle iterativo de Diagnóstico > Implementación > Refactorización dirigido por la IA bajo constante supervisión estratégica humana.
Stack Tecnológico Estratégico
Para garantizar un rendimiento de primer nivel y alinearse con las reglas autoimpuestas de "Minimalismo de Librerías" y "Presupuesto de Rendimiento (SRE)", se eligió el siguiente stack, priorizando la velocidad y seguridad: Frontend: Next.js 14+ (App Router) y React 19, aprovechando las funciones Server-Side para un SEO óptimo y tiempos de carga reducidos. Estilos & UI: Tailwind CSS 4.0. Se dio prioridad a interfaces "Glassmorphism" oscuras, gradientes sutiles y transiciones 100% CSS nativo en lugar de abusar de dependencias pesadas de animación de terceros. Backend & Almacenamiento: Arquitectura Serverless con Firebase (Firestore) para la persistencia ágil de datos y Firebase Storage para el alojamiento multimedia. Seguridad & Autenticación: Firebase Auth gestionando accesos restringidos mediante tokens seguros, protegiendo las rutas de administración y endpoints sin exponer datos sensibles.
Características Principales y Arquitectura
1. Panel de Administración a Medida (Custom CMS) Se descartó el uso de sistemas heredados como WordPress. En su lugar, se desarrolló un panel administrativo privado (/admin) moderno, seguro y totalmente a medida, integrado en el mismo repositorio. Gestión Intuitiva de Bento Grids: Interfaz modular para editar, agregar, reordenar (Drag & Drop lógico) y eliminar servicios y herramientas del layout principal sin tocar una sola línea de código. Portafolio Multimodal Dinámico: Un CRUD avanzado de proyectos y Reels. Permite la subida asíncrona de videos nativos (.mp4/.webm) e imágenes directamente al Storage, ajustar "Content Blocks" (bloques narrativos para cada caso de estudio) y determinar milimétricamente el espacio que ocupan en el grid (Span). Edición en Vivo y Configuraciones Globales: Control total sobre copys estratégicos como el "Hero Text" de inicio, configuraciones SEO meta, y elementos dinámicos como enlaces de redes sociales.
2. Rendimiento Extremo y Experiencia de Usuario (UI/UX) Zero Layout Shift (CLS): Estructura calculada para evitar cualquier salto visual durante cargas asíncronas (esqueletos de carga, dimensiones estrictas). Micro-interacciones Fluidas: Retroalimentación táctil, animaciones hover con Glow Effects, modales de contacto inmediatos y un reproductor nativo de Reels inmersivo. 3. SEO Automatizado y Semántico Metadatos y Robots: Inyección dinámica automatizada de Open Graph, Twitter Cards, sitemap.xml y robots.txt orientada al App Router. Contenido Optimizado por Agentes: Copys, estructura encabezados (H1/H2) y densidad de palabras clave fueron auditados iterativamente por modelos LLM especializados en SEO semántico.
Conclusión
Este proyecto ejemplifica el rol emergente del Diseñador Multimodal & Vibe Coder. La capacidad de concebir una experiencia visual de alto estándar y materializarla orgánicamente en código de producción, utilizando modelos de IA como motor táctico de ejecución, permite desdibujar la barrera técnica entre la idea creativa y el producto funcional, todo ello preservando un rigor arquitectónico absoluto.
Lo Siguiente
Siguiente Proyecto