Stylish: AI-Powered Outfit Generator

Inspiration

We wanted a way to give our customers inspiration when they are on a clothing website. A lot of times, people feel overwhelmed by the amount of new apparrel or different styles of clothes, so we implemented a service that gives users a preview from the clothing site that they are on, of a style or era that they are thinking of.

$$ \text{Goal: } \min(\text{Returns}) \quad \text{while maximizing} \quad \text{Customer Confidence} $$

What it does

Stylish allows users to:

  • Upload a picture of themselves.
  • Generate AI-powered outfit recommendations based on preferences of theme or fashion era.
  • See realistic virtual try-ons directly on their own body.
  • Purchase items easily through Shopify integration.

How we built it

  • Frontend: React + Tailwind.
  • Backend: ExpressJS connected to Shopify APIs.
  • AI Layer: OpenAI image + text generation for outfit styling and try-on.
  • Deployment: Vercel for frontend, Render for backend.

We used Shopify’s Storefront API to fetch product data (edges + nodes GraphQL pattern) and OpenAI’s image APIs to overlay clothing suggestions onto user images.

Challenges we ran into

  • Getting realistic try-ons required fine-tuning prompts and debuggin.
  • Handling image uploads securely while keeping inference fast.
  • Using GraphQL with shopify's storefront API

Accomplishments that we're proud of

  • Built a working prototype in < 36 hours.
  • Got a pretty good try on preview.
  • Designed a smooth Shopify integration .

What we learned

  • How to work with Shopify’s GraphQL schema (edges/nodes).
  • How to prompt engineer to control generative image outputs.
  • The importance of user experience design.

What's next for Stylish

  • Spectacles From snapchat with AR try-on.
  • Using to include accessories + footwear.
  • Leveraging Shopify Remix + Polaris for merchant dashboards.

Built With

Share this project:

Updates