Astro 7

Caramide AI Skincare Assistant

Demo interactiva y premium para prescribir rutinas científicas personalizadas de cuidado de la piel en tiempo real, integrando OpenRouter y Gemini con comparadores a Amazon y Google.

AstroTailwind CSSTypeScriptOpenRouterGeminiPlaywrightVercel
Caramide AI Skincare Assistant — vista principal
Astro v7 Arquitectura orientada a rendimiento
< 65ms Latencia de respuesta con typewriter
2 LLMs Redundancia (OpenRouter + Gemini)
100% Mock Tests responsive Playwright mockeados

El reto

Encontrar productos para el cuidado de la piel científicamente respaldados puede ser abrumador debido al marketing invasivo y a la falta de asesoramiento rápido. Los usuarios suelen navegar entre cientos de reseñas o pagar consultas costosas solo para saber qué tipo de rutina básica les conviene.

El reto técnico consistía en desarrollar un consultor virtual interactivo integrado directamente en el Hero de la landing page. Este debía procesar los inputs del usuario, determinar de manera clínica su tipo de piel y necesidades, y recetar una rutina con marcas conocidas sin atarse a un catálogo exclusivo (enlaces directos a Amazon España y Google Shopping).

Lo que hice

Diseño Clinical Minimalist: Diseñé una interfaz pixel-perfect de estética científica, limpia y de alto contraste (Flat Stack, bordes de 1px, tipografías Manrope y IBM Plex Sans, y uso quirúrgico del rojo clínico #bc0100).

Integración y redundancia de IA: Implementé la lógica en el servidor para ocultar las API keys de forma segura en Vercel Serverless. Utilicé OpenRouter como proveedor primario de LLM y configuré un fallback automático a Google Gemini 2.5 Flash en caso de fallos de red o de cuota.

Efecto e interacción interactiva: Programé un efecto de escritura a 65ms para dar una sensación fluida en tiempo real y añadí luces dinámicas de fondo simulando la refracción de laboratorio.

Tests robustos: Desarrollé una suite de pruebas E2E con Playwright mockeando las llamadas de IA para asegurar robustez sin costes de ejecución.

Caramide AI Skincare Assistant — captura secundaria 1
Caramide AI Skincare Assistant — captura secundaria 2

Resultado

Una demo interactiva premium que ilustra cómo la IA conversacional puede integrarse de forma fluida en sectores como la cosmética de lujo y la farmacia clínica. El sitio se despliega de forma instantánea gracias a las optimizaciones de Astro v7 y Tailwind CSS v4.

Como proyecto personal, demuestra la capacidad de diseñar herramientas de inteligencia artificial orientadas a la conversión y a la experiencia del usuario (UX) con un alto nivel de detalle técnico, manteniendo un código limpio y testing automatizado robusto.

Astro v7Tailwind CSS v4TypeScriptOpenRouter APIGoogle Gemini APIPlaywrightVercel Serverless