ios-mirror-vibecoding

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

ios-mirror-vibecoding

★ 111 Open GitHub ↗

iOS 端的[补光灯+镜子]软件,前置支持放大全屏显示查看皮肤细节,加7色预设补光色系,开箱即用

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# MirrorGlow 镜光 — Web 放大补光镜子相机

✨ **在线体验**：[https://xuluu0816-lab.github.io/ios-mirror-vibecoding](https://link.wtturl.cn/?target=https%3A%2F%2Fxuluu0816-lab.github.io%2Fios-mirror-vibecoding&scene=im&aid=497858&lang=zh)
一款复刻 iOS 原生交互，集 **5 倍放大镜面 + 多色氛围补光** 一体的轻量化网页美妆工具，无需下载 App，浏览器直接打开即用。

## 📖 项目简介

针对 iOS 原生前置相机两大痛点：**无法高倍放大查看妆容细节、缺少多色氛围补光**，参考线下 LED 化妆镜与热门《小猫补光灯》App 产品思路，打造「放大镜 + 补光灯」二合一 Web 工具。
采用双界面架构，支持前置摄像头 1–5 倍数码变焦、7 套预设氛围色卡、全屏柔光补光，覆盖女生外出补妆、细节护肤检查、氛围感自拍等多元场景。
仓库内置完整产品 PRD 文档，适合前端学习者、产品新人参考「从需求文档到代码落地」完整实战流程。

## ✨ 核心功能亮点

### 🪞 美妆级放大镜面（差异化核心）

- 1~5 倍数码变焦，默认 2x 黄金放大倍率，超 3x 画质衰减友好提示
- 全屏沉浸式镜像画面，极简 UI，仅保留半透明返回控件
- 长按画面冻结帧，解放双手细致查看眼线、毛孔、口红边缘
- 底部可收起控制面板，亮度 / 色温一键快速调节

### 🎨 7 色氛围补光系统

- 7 套成熟预设色卡,自由调节饱和度和亮度
- 全屏柔光补光模式，屏幕拉满亮度，暗光替代便携 LED 补光灯
- 0~100% 无极亮度调节，适配自拍、补妆、微距拍摄

### 📱 iOS 原生拟态交互

完全遵循 Apple HIG 设计规范，毛玻璃面板、胶囊圆角、顺滑弹簧动画、原生触控反馈，还原 iOS App 操作质感。

### ⚡ 零依赖轻量化实现

纯原生 HTML/CSS/JS + WebRTC 开发，无框架、无打包工具，双击本地文件即可运行，全移动端浏览器兼容。

### 📚 配套完整产品文档

`docs/` 目录存放完整 PRD 需求文档，包含用户画像、竞品分析、界面流程图、交互规范、机型适配方案，适合产品 / 前端学习参考。

## 🛠️ 技术栈

- 摄像头核心：WebRTC `getUserMedia` 实时视频流
- 页面基础：HTML5 / CSS3 / Vanilla JavaScript
- UI 特性：CSS backdrop-filter 毛玻璃、原生手势缩放、自定义滑动动画
- 适配方案：移动端响应式布局，针对 iPhone 设备深度优化

## 📂 项目目录结构

```
ios-mirror-vibecoding/
├── index.html                 # 项目入口主页面
├── README.md                  # 项目说明文档
├── assets/
│   └── images/                # 全部UI图标素材
│       ├── 镜子.png
│       ├── 调色盘.png
│       ├── 返回.png
│       └── 摄像头反转.png
└── docs/
    └── PRD-镜子补光相机App.md # 完整产品需求文档
```

## 🚀 快速启动

### 方式 1：在线直接使用（推荐）

访问顶部在线体验链接，授权摄像头权限即可使用，无需本地部署。

### 方式 2：本地运行

1. 克隆仓库

```
git clone https://github.com/xuluu0816-lab/ios-mirror-vibecoding.git
cd ios-mirror-vibecoding
```

2. 启动本地静态服务（解决本地打开摄像头权限拦截）

```
npx serve .
```

3. 打开终端输出的本地地址，允许相机权限即可体验

## 🎯 适用场景

1. 外出无化妆镜：放大检查底妆、睫毛、皮肤细节
2. 暗光自拍：多色氛围光打造冷白皮 / 复古氛围感照片
3. 便携补光：全屏纯色光源，替代小型 LED 补光灯
4. 技术学习：WebRTC 相机开发、移动端交互、PRD 产品实战案例

## 📊 竞品差异化对比

表格

| 功能 | 手机原生相机 | 小猫补光灯 App | 本项目 MirrorGlow |
| --- | --- | --- | --- |
| 最高 5 倍放大镜面 | ❌ | ❌ | ✅ 核心独有 |
| 全屏极简镜子模式 | ❌ | ❌ | ✅ |
| 长按画面冻结帧 | ❌ | ❌ | ✅ |
| 7 色自定义氛围补光 | ❌ | ✅ | ✅ 支持色相微调 |
| 免安装网页端 | ❌ | ❌ | ✅ 浏览器直接打开 |
| 配套完整产品 PRD | ❌ | ❌ | ✅ 学习向附加价值 |

## 📄 开源协议

本项目采用 **MIT License**，可自由学习、二次修改、商用，保留项目来源标注即可。

## 💡 补充说明

1. 最佳体验设备：iPhone Safari 浏览器，交互贴合原生 iOS 设计
2. 变焦超过 3 倍会存在画质衰减，建议光线充足环境使用
3. 全屏补光模式耗电较高，长时间使用建议连接充电设备

## 🌟 Star 支持

如果你觉得这个项目实用、适合学习，欢迎 Star 收藏！
有 Bug 反馈、功能优化建议，欢迎提交 Issue；也欢迎提交 PR 共同完善项目。

ios-mirror-vibecoding

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README