Inspiration Beauty and fashion choices don't exist in a vacuum—how our skin looks and what we wear are two halves of the exact same personal identity. Yet in modern e-commerce, beauty and apparel operate in completely isolated silos. A consumer might buy a vibrant outfit online, only to discover upon arrival that its color highlights facial flushing or clashes with their natural skin undertone. Worse, wearing tight synthetic fabrics over compromised skin barriers often leads to irritation and immediate returns.
Most online fashion purchases come down to an expensive guessing game, driving returns upward of 30% for fashion retailers. We built Holistic Mirror to eliminate that guesswork. By pairing real-time skin health diagnostics with generative apparel try-ons inside an autonomous AI agentic loop, we bridge the gap between beauty insights and personal styling.
What it does Holistic Mirror is an Agentic AI Personal Shopper & Stylist that unifies YouCam Skin AI diagnostics with YouCam Generative Apparel Virtual Try-On (VTO).
Dual-Image Context Ingestion: Users capture or upload a facial close-up and a full-body photo alongside their target occasion (e.g., Executive Summit, Gala, Outdoor Summer Festival).
Skin Health & Undertone Analysis: The app triggers the YouCam Skin AI REST API to extract undertone classifications, hydration scores, redness indices, and barrier sensitivity metrics.
Autonomous Color & Fabric Agent: An LLM agent processes the diagnostic metrics and calculates ideal color harmony vectors and fabric safety constraints for the user's skin profile.
Hyper-Realistic VTO Rendering: The system queries YouCam Generative Apparel VTO to overlay matched garments onto the user's body double.
Dynamic Environment & Return Risk Engine: Users can switch lighting environments (Daylight, Golden Hour, Evening Glow) to observe real-time color shifts and review a quantitative Return Risk Score before purchasing.
How we built it We engineered Holistic Mirror as an enterprise-grade full-stack web application using Next.js 14 (App Router), TypeScript, Tailwind CSS, and Framer Motion.
Architecture & Workflows +---------------------------------+ | Client Dashboard (Next.js 14) | +----------------+----------------+ | v +---------------------------------+ | API Route Handler Orchestrator | +---+-------------------------+---+ | | +--------------+ +--------------+ | | v v +------------------------+ +------------------------+ | YouCam REST APIs | | LLM Agentic Engine | | - Skin AI Diagnostics | | - Color Harmony Math | | - Generative Apparel | | - Fabric Safety Rules | | Virtual Try-On | | - Skincare Regimen | +------------------------+ +------------------------+
Built With
- agentic-ai
- apparel-vto
- artificial-intelligence
- color-theory
- computer-vision
- e-commerce
- framer-motion
- generative-ai
- gpt-4o
- html5
- lucide-react
- mcp
- next.js
- node.js
- openai
- react
- recharts
- rest-api
- retail-tech
- skin-ai
- tailwindcss
- typescript
- virtual-try-on
- youcam-api
Log in or sign up for Devpost to join the conversation.