Sarto
An AI stylist that lives in your browser and shops any Shopify store the way you already dress.
Timeline
6 hours, Architect × Vercel × Cursor × Corgi hackathon
Team
Me and one teammate
Role
UX design, user flow and the full UI build
Result
2nd place
TL;DR
We built a stylist into the shopping moment itself, in six hours, and took 2nd place
Sarto is a Shopify browser extension. Show it a few photos of your outfits and it works out your style, then shops the store you're on for you. I built it with one teammate, front end and back end, in about six hours. My job was the UX design and user flow: what Sarto asks, what it shows, and how you move between them. The pieces:
01 Style passport
AI reads your outfit photos for vibe, colour tones, shapes, materials and what you avoid, and keeps it as one profile.
02 Ask
Type a brief, Sarto plays back what it understood, picks from that store’s own stock, then refines with one question at a time.
03 Every shop
The passport travels across Shopify stores, so every shop reads you the same way.
How might we give any online shop the eye of a friend who knows what you already wear?
Problem
Shops can search and filter, but they can't see you
We picked e-commerce because it's one of the platforms people use every day, and the intelligence still sits outside the conversation. A shop doesn't know what you already wear or the look you're going for. That gap is widest with clothing.
Clothing is visual
What you like is a mix of colour, shape, fabric and feel. It’s hard to type.
Search is typed
A search box or a size filter flattens all of that into keywords.
Every shop starts over
Each store meets you as a stranger, so you explain yourself again every time.
Mapping
In the first hour, I mapped what goes in and what comes out
Before anyone wrote code, I put the whole idea on one board: what Sarto takes in, where it lives, and what it hands back. It also settled the name: sarto is Italian for tailor, from sartorial, meaning tailored to you.
The mind map. Hover a branch to open it up.
Then I cut it down to two loops: shopping, and the style passport. You can jump to the passport from anywhere, and every pick is re-read through it.
The user flow, mapped from the demo. Hover a step to see what leads in and out of it.
Wireframes
Then I blocked out six screens and wired them together
Lo-fi on purpose: grey blocks for products, real words for everything else, because the words were the design. With six hours, my teammate needed to know exactly which tap leads where, so I drew the screens as a wireflow. It became our build list: every arrow was a thing to code.
Six screens, three for asking and three for the passport. Dashed outlines mark what you tap. Click any screen to play it.
Final design
Ask for an outfit, and Sarto shops the store for you
Ask in your own words
“A birthday outfit that's relaxed but smart enough for dinner.” Sarto plays back the occasion, colours and materials it heard, then picks from that store's own stock.
One question at a time
“How dressed up is the night?” One tap, and the next row finishes the outfit with trousers and shoes.
Your style passport
Taste, fit and one style read, built from your photos and picks. The same passport opens on every Shopify store.
Find similar, finish the outfit
Anchor on a piece you like and Sarto finds alternatives in your register, then asks what goes with it.
Learnings
Six hours taught me to design the conversation before the screens
Show what you understood.
Playing the brief back built more trust than any pick. People forgive a wrong guess they can see.
Ask less, ask better.
One good question beat a page of filters, and it made the AI feel like a stylist, not a search box.
Map first, then build fast.
An hour on the mind map and wireflow saved us from building screens nobody needed.
Next up
