I Built FaceFit: An AI Face Shape Detector with Hairstyle and Glasses Recommendations

hao ai — Sun, 21 Jun 2026 23:10:18 +0000

As developers, we often build tools that solve technical problems: dashboards, APIs, automation systems, internal tools, and SaaS products.

This time, I wanted to build something a little more visual, personal, and practical.

So I created FaceFit — an AI-powered face shape detector that helps users find their closest face-shape match from a photo and get personalized hairstyle and glasses recommendations.

You can try it here: FaceFit - AI Face Shape Detector

Why I built it

Many people search for questions like:

What is my face shape?
Do I have an oval or round face?
What hairstyles suit my face shape?
What glasses look good on my face?

The problem is that most advice online is either too generic or requires users to manually compare their face with diagrams.

I wanted to create a tool that makes this process easier.

Instead of asking users to guess their face shape, FaceFit lets them upload a photo, get a closest match, and then explore style recommendations based on that result.

What FaceFit does

FaceFit currently focuses on six common face-shape categories:

Oval
Round
Square
Heart
Diamond
Oblong

After analyzing the uploaded photo, the tool gives users a closest face-shape match and then provides guidance such as:

hairstyle directions for that face shape
glasses and frame recommendations
style tips based on facial proportions
related face-shape guides and blog content

The goal is not just to output a label like “oval” or “round.”

The goal is to help users understand what that result means and how they can use it when choosing hairstyles, glasses, or personal style references.

Product idea

A lot of AI tools stop at detection.

But for a consumer-facing product, detection alone is usually not enough.

If a user uploads a photo and only gets a result like:

Your face shape is round.

That is interesting, but not very useful.

So I wanted FaceFit to go one step further:

Your closest match is round, and here are hairstyle and glasses directions that may work better for your facial proportions.

This makes the experience more practical.

The AI result becomes a starting point for decision-making, not just a raw output.

Tech stack

The project is built as a modern web app.

The current stack includes:

Next.js for routing and frontend structure
React for UI components
AI / face analysis logic for estimating face-shape signals
Responsive design for desktop and mobile users
SEO-focused content pages for face shape, hairstyle, and glasses guides

I also built supporting pages for different face shapes so users can continue exploring after getting their result.

For example, someone who gets a round face result can continue reading about round face hairstyles or glasses recommendations.

Challenges I faced

One of the biggest challenges was handling real-world user photos.

In a perfect test environment, every image would have:

front-facing angle
good lighting
clear facial outline
no heavy shadows
no extreme camera distortion
no hair covering the face

But real users do not upload perfect test images.

They upload photos with different lighting, angles, expressions, hairstyles, backgrounds, and image quality.

So the product needs to be designed with uncertainty in mind.

Instead of presenting the result as an absolute truth, FaceFit uses the idea of a closest face-shape match.

This feels more honest and more useful.

Face shape is not always a strict category. Many people are between two shapes, such as oval and oblong, or round and heart. The product needs to explain that clearly.

Another challenge: recommendations

Another challenge was mapping face-shape results to meaningful recommendations.

It is not enough to say:

Round face → short hair
Square face → soft hair
Oval face → anything works

That kind of advice is too shallow.

A useful recommendation system needs to consider:

face length
visual width
jawline softness or angularity
chin shape
balance between forehead, cheekbones, and jaw
whether the goal is to soften, balance, lengthen, or highlight features

This is where the product becomes more than a simple detector.

It becomes a style recommendation experience.

SEO and content strategy

Since this is a public-facing product, I also spent time thinking about SEO.

Many users do not search for the product name. They search for problems and questions.

So I created content around topics like:

What is my face shape?
How to determine your face shape
Hairstyles for different face shapes
Glasses for different face shapes
Face shape guides for oval, round, square, heart, diamond, and oblong faces

The idea is to make the tool discoverable through useful educational content, not only through the homepage.

One example is this guide:

What Is My Face Shape?

What I learned

Building FaceFit reminded me that AI products are not only about the model.

The model is only one part of the experience.

A useful AI product also needs:

clear user flow
understandable results
good explanations
trust and privacy considerations
useful next steps
content that helps users take action

For this kind of product, the output should not feel like a black box.

Users should understand why they received a certain result and what they can do with it.

Future improvements

Some improvements I am considering next:

better result explanations
stronger face-shape confidence signals
more hairstyle recommendation pages
more glasses and frame examples
better support for different photo conditions
improved mobile upload experience
more educational content around facial proportions
possibly makeup or beard style recommendations in the future

Feedback wanted

I would love feedback from the DEV community.

Especially on:

the product idea
the user flow
the AI result explanation
the SEO/content structure
the recommendation experience

You can try the project here:

https://www.findfaceshape.net

What would you improve first: the AI analysis, the recommendation system, or the user experience?

DEV Community: hao ai