Role: Solo Project (Concept, UI/UX, & AI Implementation)
Duration: ~3 weeks
Tools: Cursor, Gemini, & Google AI Studio
Duration: ~3 weeks
Tools: Cursor, Gemini, & Google AI Studio
Project Essence: Skin Decoder is a web app that transforms fragmented skincare routines into a structured data ecosystem. By integrating Gemini AI, the app analyzes real-time environmental factors (UV, Humidity), user-logged skin conditions, and product ingredient lists to provide proactive, personalized skincare advice.
Try it now: https://skin-decoder-hk.web.app/
Try it now: https://skin-decoder-hk.web.app/
Design Philosophy: The "Tech-Clinical" Aesthetic
The overall visual direction is a fusion of Clinical Reliability and Technological Innovation. By utilizing monospaced accents, structured layouts, and high-contrast color blocks, the design transforms a personal routine into a "Data-Driven Mission." This "Tech-first" approach positions Skin Decoder not just as a beauty app, but as a powerful analytical tool in the user’s pocket.
Typography: To reinforce the core concept of "decoding" skincare data, the typography system balances technical precision with modern readability:
Roboto Mono (Latin): A monospaced typeface chosen to evoke a "coding" aesthetic. It mirrors the underlying AI logic and the process of data analysis, giving the app a distinct technical edge.
Noto Sans HK (Traditional Chinese): A clean, versatile sans-serif that ensures seamless character support and a consistent visual experience across all Chinese interfaces.
Color Palette: The color strategy breaks away from traditional "feminine-centric" skincare aesthetics, opting for a high-contrast, gender-neutral palette that appeals to all skin types and users.
Light Mode: Primary (#f75200): A vibrant orange symbolizing energy and active skin health; Secondary (#0025db): A deep, reliable blue representing data and professional intelligence.
Dark Mode: Primary (#ff6f3d): Optimized for low-light legibility with a softer glow; Secondary (#6078ff): A bright, electric blue to maintain visual impact on dark surfaces.