AI PRODUCT · WEB DEV · Vibe Coding
Virtual Stylist
A photo-free AI styling experience helping users explore hairstyles with greater privacy, flexibility, and inclusivity.
Problem & Objective
Existing AI styling apps often rely on user photos, raising privacy and inclusivity concerns related to gender and ethnicity. I wanted to create a gender-inclusive, photo-free styling experience that lets users explore hairstyles without compromising identity or personal data.
Privacy
Hairstyle visualization often requires users to upload personal photos before they can explore different looks.
Representation
Existing tools can reinforce narrow assumptions around gender, appearance, and who styling experiences are designed for.
Inspiration & Social Context
Digital Self-Representation
The article Life as a Trans Bitmoji inspired my exploration of digital self-representation. It shows how a virtual avatar can help someone express identity shifts before they happen in real life.
Similarly, anime fan art communities reveal the importance of visualization for people who rarely get to see themselves represented.
Solution
I built a photo-free system using HTML, CSS, JavaScript, and OpenAI APIs. Instead of uploading an image, users enter attributes such as age, gender identity, and style preferences to generate personalized hairstyle recommendations.
01 · Hairstyle Description
Generate detailed hairstyle recommendations based on the user's preferences and identity.
02 · AI Visualization
Translate the recommendation into an AI-generated preview without requiring a personal photo.
Key Design Decisions
Key Process Stages
Research
Created user personas and a journey map based on interviews and competitor analysis, particularly YouCam, focusing on pain points around gender inclusivity and data privacy.
Coding & Prompting
Developed the app with HTML, CSS, JavaScript, a Deno backend, and OpenAI APIs. I iterated on prompts to improve the relevance and accuracy of generated results.
Prototyping & Testing
Built and tested wireframes in Figma and functional prototypes in the browser.
Testing led me to support input rewriting and real-time regeneration, giving users more control over how they explored different styles.
Designing Around AI Bias
Testing revealed a limitation beyond the interface itself. When demographic details were underspecified, generated previews often defaulted toward young white women, exposing biases in the underlying model.
What I Observed
Even a seemingly neutral interface could produce narrow representations because generated results were shaped by biases beyond the UI.
How It Changed My Approach
I became more intentional about language, user control, and how inputs are framed rather than assuming a photo-free workflow alone would make the experience inclusive.
AI-Assisted Iteration
Further testing revealed three opportunities: reduce typing, save favorite looks for later reference, and consider users' existing hair when evaluating generated styles.
Selectable Preferences
Replace text-heavy inputs with quick, structured choices.
Saved Looks
Let users collect and revisit styles to share with their hairstylist.
Hair-Aware Guidance
Consider current hair texture, color, and treatment history to make recommendations more realistic.
I vibe coded with AI tools to rapidly explore and test these ideas. The generated prototypes, however, still revealed gender and ethnicity biases—making AI inclusivity an ongoing exploration in this project.
Figma Make
Claude Code
Lovable
Reflection
Inclusivity Goes Beyond Removing Photos
Virtual Stylist challenged my assumption that removing photos alone would make AI styling tools more inclusive. Testing showed that inclusivity is also shaped by how gender options are framed, which defaults appear first, and how prompts influence generated results.
Designing for Agency, Not Automation
This project reshaped how I approach AI-powered UX: not as the pursuit of seamless automation, but as a balance between user agency, system constraints, and ethical responsibility.
