分享下前几天给家里人做的一个照片AI风格化网页
功能很简单：上传一张人物照片(比如全家福)，自动生成一个可访问的网页，包含风格化的人物小卡和虚拟出游合照。让爹妈也见识下 Vibe Coding 的神奇，还能转发到群里光宗耀祖😆
成果一览：family-portrait-example.versun.me
(照片图源：免版权图库（CC0）)
工具链
- Kimi CLI + Kimi 2.5：国内访问顺畅，代码生成稳定。
- Insforge：一站解决 Model Gateway + 静态托管，避免自己折腾 Cloudflare 或 Vercel
- 图片生成模型：Gemini 3 Pro Image Preview，直接通过 Insforge 调用，无需订阅 Gemini
实施步骤
1. 安装 Kimi CLI
参考Kimi官方文档进行安装
```bash
# 安装 Kimi CLI
# Linux / macOS
curl -LsSf https://code.kimi.com/install.sh | bash
# Windows (PowerShell)
Invoke-RestMethod https://code.kimi.com/install.ps1 | Invoke-Expression
```
2. 配置 Insforge MCP
在 Insforge 上创建一个新项目，选择新加坡节点，国内访问快些，并在 Model Gateway 中启用 Gemini 3 Pro Image Preview 模型
在终端中执行下面的命令添加 MCP (记得修改 api key 和 url)
```bash
kimi mcp add --transport stdio \
--env API_KEY=YOUR_API_KEY \
--env API_BASE_URL="YOUR_BASE_URL" \
insforge \
-- npx -y @insforge/mcp@latest
```
3. 项目初始化
```bash
mkdir family_portrait
cd family_portrait
kimi
```
4. 核心提示词
将全家福放入文件夹（假设命名为 `family.jpg`），在 Kimi CLI 中输入：
```
请根据照片 @family.jpg 做一个2026年春节小卡合集墙的网页。
技术要求：
- 使用 HTML + Tailwind CSS + 原生 JavaScript，生成单页静态网站
- 移动端优先响应式设计，确保微信内置浏览器正常访问
功能需求：
1. 页面顶部展示原片，下方为生成内容区域，整体采用新中式视觉风格（暖色调、 subtle 纹理背景）
2. 为照片中每个人物生成4种风格的小卡：水墨手绘风、Q版手办风、动森风格、二次元平面风
- 小卡背景需统一风格（使用图案纹理，不得出现文字）
- 必须保持人物五官特征与年龄痕迹，避免过度美化
3. 实现风格切换按钮，点击后整组小卡无缝切换显示对应风格
4. 基于人物外貌特征与年龄段，生成10张"出游拍立得"合照：
- 场景为随机城市地标（需体现地域特征）
- 手持自拍视角，全家共同入镜
- 画面需自然真实，避免明显的AI畸变
5. 完成后自动部署到 Insforge 上
注意：生成图片时调用 Insforge Model Gateway 的 gemini-3-pro-image-preview 模型。
```
5. 等待完成
Kimi 会自动调用 MCP 工具链：
1. 通过 `generate_image` 调用 Gemini 3 Pro 批量生图（3个人物约22张）
2. 生成前端代码
3. 自动调用 `deploy` 工具推送至 Insforge CDN
整个过程约 10 分钟左右，终端会返回类似 `https://xxxxx.insforge.site` 的访问链接。
踩坑记录
1.五官一致性问题
照片尽量保持在5个人以内，且均为正面照，背景色和人物尽量区分开
2.成本
以 3 人全家福为例：
- 4 风格 × 3 人 = 12 张人物卡
- 10 张拍立得合照
- 总计约 22 次图像生成调用
- 总成本约 $6
如果预算有限，可以修改 Prompt 减少风格数量（如只保留水墨+二次元两种），成本可降至 $3 以内。