I built an AI hairstyle try-on tool because haircut regret is expensive

bigben qin — Thu, 12 Mar 2026 07:43:25 +0000

A bad haircut is annoying because you live with it for weeks, not minutes. I wanted a way to sanity-check a new look before booking anything, so I built AI Hairstyle Changer.

It is simple on purpose:

upload a selfie
pick a preset style or describe one
generate a preview in a few seconds
try hair color too if you want

A few things I learned while building it:

Most people do not want a blank prompt box first. They want a few good starting options.
"Does this suit my face?" matters more than perfect image sharpness.
Privacy defaults matter a lot.

If you want to try it, it is here:
https://hairstyleaichanger.com

I am still tuning prompt quality and hairstyle presets, so I would love blunt feedback:

which styles are missing
what makes a result feel fake
whether you would trust a tool like this before a real haircut

Building an AI Hairstyle Try-On App with Next.js

bigben qin — Sat, 17 Jan 2026 10:45:29 +0000

I recently launched AI Hairstyle Changer—a web application that lets you

preview a new hairstyle on your own photo before deciding on a haircut.

👉 Online Demo: https://hairstyleaichanger.com/

What I Built

The core workflow is simple:

Upload a selfie (front-facing photos are best).
Choose a hairstyle (or enter a suggestion).
Generate a result image.
Save to history (and optionally request publication).

I intentionally designed the user experience with a "prompt-first" approach: users should always see the prompts they are using.

This prevents confusion between the "category" and

the actual instructions to the model.

Product Constraints I Consider "Non-Negotiationable"

1) No Changing the Person

If a user uploads their own face, the output must maintain the same identity.

A "cool hairstyle" is meaningless if it looks like someone else's.

Therefore, I made "maintaining identity" a hard rule: system prompts will add

strict constraints, such as:

Only change hairstyle
Keep face/facial features/skin tone/expression/pose/background

unchanged

Avoid using beauty filters, facial retouching, face swapping, changing gender/age, etc.

These restrictions are enforced on the server side, so the client cannot bypass them.

2) Cost Control and Anti-Abuse

Image editing is costly. I designed a simple free policy:

Login required
Logged-in users receive 3 free trials, after which a paid trial is required.

While not perfect, it significantly reduces anonymous abuse and allows

real users to quickly gain an "aha" moment.

3) Maintain SEO friendliness and avoid over-design

I created a /ideas directory containing hairstyle pages for search intent:

/ideas for browsing
/ideas/{slug} for specific hairstyle themes

I maintain consistency in canonical URLs and avoid indexing filter/search result pages.

Hairstyle Preview：

Technology Stack

I initially used ShipAny (an AI SaaS template based on Next.js), and then did extensive customization:

Including:

Next.js application routing (React 19)
next-intl for internationalization (i18n)
Drizzle ORM + Postgres
Cloudflare R2 for storing generated images
FAL (image editing) for changing hairstyles
Creem for payments (subscription + one-time package)
Vercel for deployment

Architecture (Overview)

Client uploads image → Backend stores it in R2
Client sends "hairstyle + hint" → Server merges according to strict

identity constraints

Server calls image model
Server stores generated image in R2
Save generation history (for history and administrator review)

For free users, I add a watermark upon upload so paid users get a clean

result.

What Surprised Me

"Hint Presets" Need to Be Very Specific

If two hairstyle hints are too vague in their description of the hair, the result will look

almost identical. Even if the model is technically feasible, users will feel the product is "unprofessional."

My Solution: Treat each hairstyle preset as a "specification":

Length + Parting + Bangs + Volume + Outline
Explicitly add "Avoid…" to exclude similar styles

Hairstyle Preview：

Some Small SEO and Sharing Details Matter

Some catalogs scrape Open Graph tags. If your og:image is still

a template preview image, the product looks incomplete.

I replaced the default OG preview image and added a version number (?v=2) to force

the scraper to refresh the cached preview image.

Next Steps

A more comprehensive hairstyle library (more choices, less duplication)
Favorites and collections
Improved backend user content moderation tools
Performance optimization (mobile LCP optimization)
Support for more languages (besides English and Chinese)

If you are developing an AI consumer application, my most important advice is: **When designing,

first and foremost, earn the user's trust.** If the model's output changes the user,

then the product will immediately lose credibility.

Thank you for reading—feel free to ask questions.

DEV Community: bigben qin