Feature 01
照片与偏好输入
用户上传正脸照、侧脸照和喜欢的发型参考图，并选择韩系、日系、港风、清爽、低打理、可烫、可染等偏好。
返回 AI 产品
AI Product Demo
HairPlan AI Demo
剪之前，先知道适不适合你
面向男士发型决策的 AI 产品 Demo，模拟从照片上传、头脸条件分析、发型匹配推荐，到生成理发店沟通卡的完整体验，帮助用户在剪发前判断「适不适合自己」。
AI 产品形象决策发型推荐Mock AINext.js
Overview
项目概览
HairPlan AI Demo 是一个面向男士发型决策的应用。它围绕「剪之前，先知道适不适合你」这个场景，模拟从上传照片、分析头脸条件、生成发型推荐，到输出理发店沟通卡的完整体验。当前版本使用本地 Mock 数据和规则推荐逻辑，适合用于产品原型、交互演示，以及后续接入真实 AI 识别能力前的界面验证。
Pain Points
用户痛点
01
很多人剪发前只能依赖网红图、明星图或理发师经验，难以判断某个发型是否真的适合自己的脸型、头型与发质。
02
用户即使拿着效果图去理发店，也常常无法准确表达层次、长度、烫染方式和打理方式。
03
理发师与用户之间存在沟通信息差，导致「想象效果」和「实际效果」偏差较大。
Features
核心功能
Feature 02
参考图识别演示
上传参考图后，页面展示发型名称、风格标签、关键结构、适配分和风险提醒。
Feature 03
AI 基础分析
基于 Mock 数据展示脸型、头型、发量、发质、发际线、当前问题、推荐方向和避免方向。
Feature 04
发型推荐
系统根据本地发型规则库计算匹配分，推荐 3 款适合当前用户条件的发型。
Feature 05
理发说明卡
为单个发型生成可带去理发店沟通的卡片，包含目标效果、剪发说明、烫发说明、染发建议、打理方式、避坑提醒和可复制沟通话术。
Flow
产品流程
1
首页：展示产品主张和 Demo 入口
2
上传页：上传正脸照、侧脸照、参考图并选择偏好
3
分析页：展示头脸条件与当前发型问题
4
推荐页：展示 3 款发型推荐与匹配理由
5
理发说明卡：输出可复制、可展示给理发师的沟通内容
Recommendation Logic
推荐逻辑
当前版本不依赖真实 AI 接口，而是通过本地 Mock 数据和规则推荐逻辑模拟 AI 产品体验。推荐算法会从脸型匹配、头型匹配、发质与发量匹配、风格偏好、打理难度、是否接受烫染等维度为发型打分，最终返回综合分最高的 3 个方案。
输入
脸型
头型
发质
发量
发际线
风格偏好
计算
本地规则库评分
匹配度排序
风险提醒
输出
3 款推荐发型
推荐理由
理发沟通卡
Build
技术实现
Next.js 15React 19TypeScriptTailwind CSSlucide-react本地 Mock 数据本地发型规则库前端图片预览
Demo Notes
Demo 说明
当前应用没有真实后端接口，上传图片仅用于浏览器本地预览，不会持久化保存。AI 分析结果来自预设 Mock 数据，推荐结果由本地规则计算生成，不依赖外部 AI 服务。
Next
后续扩展方向
接入真实人脸、头型和发质识别能力
将用户上传图片保存到对象存储，并增加隐私与删除机制
将 Mock 分析结果替换为服务端 AI 分析接口
扩充发型库，增加性别、发长、职业场景等维度
支持保存个人发型方案集和历史推荐记录