为什么打通？

Claude Code 是终端里的 AI 编程智能体——读代码、写代码、分析需求、输出文档。NanoBanana（Nano Banana Pro） 是基于 Gemini Image API 的 AI 图像生成工具——文字生成产品结构图、架构图、流程图、原型界面。聆犀AI录音卡 是你的离线拾音器——产品讨论、需求沟通、架构评审，一键高清录制。

三者打通之后，一条完整的「语音→分析→可视化」流水线就此形成：

你只需要对着录音卡说话，产品结构图、架构图、原型界面自动生成。

---

一、核心能力：口述产品需求 → 自动出图

通过 SonicNote MCP Server + Claude Code + NanoBanana 的串联，实现从「口头表达」到「可视化输出」的闭环：

能力	示例指令
口述→产品结构图	“把我刚才描述的产品功能模块画成结构图”
口述→系统架构图	“根据刚才技术评审录音，生成微服务架构图”
口述→流程图	“把刚才讨论的用户注册流程画成流程图”
口述→原型界面	“根据产品需求录音，生成首页的原型界面”
口述→ER 图	“把刚才讨论的数据表关系画成 ER 图”
口述→思维导图	“把产品路线图讨论整理成思维导图”
口述→对比图	“把新旧两版架构的差异画成对比图”
多段录音→完整方案	“把三场需求评审的录音整合，出一套完整产品方案图”

---

二、五大核心场景

🗺️ 场景一：产品需求讨论 → 自动生成产品结构图

产品经理和团队讨论新功能模块：
  🎙️ 录音卡录制全程讨论
  💬 "用户端需要三个模块：首页推荐、智能搜索、个人中心"
  💬 "管理后台要有数据看板、用户管理、内容审核"
  💬 "首页推荐分热门推荐和个性化推荐两个子模块……"

会后 → Claude Code 读取录音：
  "查一下刚才产品讨论的录音"
  "提取所有功能模块和子模块，整理成结构化描述"
  "用 NanoBanana 生成产品功能结构图"

       ↓ NanoBanana 输出

  📊 一张完整的产品功能结构图
  ├── 首页推荐
  │   ├── 热门推荐
  │   └── 个性化推荐
  ├── 智能搜索
  │   ├── 关键词搜索
  │   └── 语音搜索
  └── 个人中心
      ├── 用户资料
      └── 历史记录

效果： 产品讨论会结束，产品结构图已经生成。不需要会后打开 Axure/Figma 重新画。

🏗️ 场景二：技术架构评审 → 自动生成架构图

技术团队讨论系统架构：
  🎙️ 录音卡录制
  💬 "前端用 React + Next.js，用 Vercel 部署"
  💬 "后端拆成三个微服务：用户服务、订单服务、商品服务"
  💬 "数据库用 PostgreSQL，缓存用 Redis，消息队列用 RabbitMQ"

Claude Code 分析录音：
  "查一下架构评审录音"
  "提取技术选型和架构设计"
  "用 NanoBanana 生成系统架构图"

       ↓ NanoBanana 输出

  🏗️ 一张完整的系统架构图
  展示：前端层 → API 网关 → 微服务 → 数据层
  包含所有技术组件的连接关系和数据流向

效果： 白板上的架构讨论，直接变成可放入技术文档的架构图。

🔄 场景三：业务流程讨论 → 自动生成流程图

团队讨论用户注册登录流程：
  🎙️ 录音卡录制
  💬 "新用户先输入手机号，发送验证码"
  💬 "验证通过后设置密码，然后跳转到兴趣选择页"
  💬 "如果手机号已注册，直接走登录流程……"

Claude Code 分析录音：
  "提取刚才讨论的注册登录流程"
  "用 NanoBanana 生成用户注册登录流程图"

       ↓ NanoBanana 输出

  🔄 一张完整的业务流程图
  展示：输入手机号 → 验证码 → 设置密码 → 兴趣选择
  包含分支判断（新用户/老用户）和异常处理

效果： 流程讨论结束，流程图直接可用。不需要打开 ProcessOn/draw.io 重新画。

🎨 场景四：产品原型讨论 → 自动生成界面原型

产品经理对着录音卡描述页面需求：
  🎙️ "首页顶部是一个搜索框，下面是一个轮播 Banner"
  🎙️ "再往下是分类图标，4 列排列，共 8 个分类"
  🎙️ "最下面是推荐商品列表，瀑布流布局，每个卡片有图片、标题、价格"

Claude Code 分析录音：
  "提取首页的 UI 布局描述"
  "用 NanoBanana 生成首页的原型界面图"

       ↓ NanoBanana 输出

  🎨 一张首页原型界面图
  展示：搜索框 → Banner → 分类图标 → 商品瀑布流
  可直接用于产品评审或开发参考

效果： 产品经理口述页面，NanoBanana 直接出原型图。不用等设计师出稿就能对齐预期。

📊 场景五：多场录音整合 → 完整产品方案图

一个产品的需求分散在多场会议中：
  🎙️ 第 1 场：市场定位和用户画像讨论
  🎙️ 第 2 场：核心功能模块和 MVP 范围
  🎙️ 第 3 场：技术选型和基础设施

Claude Code 交叉分析：
  "把这三场录音的需求整合在一起"
  "梳理出完整的产品方案"
  "用 NanoBanana 生成一套产品方案图：
   ① 用户画像图 ② 功能结构图 ③ 技术架构图 ④ MVP 路线图"

       ↓ NanoBanana 批量输出

  📦 一套完整的产品方案图（4 张）
  可直接用于投资路演、团队宣讲、PRD 文档

效果： 三场会议的录音，整合成一套完整的产品方案图。从碎片讨论到体系化输出。

---

三、安装与配置（10 分钟完整打通）

整体架构

第 1 步：安装 Claude Code + 配置录音卡 MCP

安装 Claude Code：

# macOS / Linux
npm install -g @anthropic-ai/claude-code
claude --version   # 验证安装

# 或通过 Homebrew
brew install claude-code

安装 SonicNote MCP Server：

npm install -g sonicnote-mcp-server-1.0.1.tgz
sonicnote-mcp-server --version   # 验证安装

获取 API Key：

打开妙记 App → 我的 → API Key 管理 → 创建 Key

格式：sk-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

配置 Claude Code MCP：

claude mcp add --scope user sonicnote \
  --env MCP_API_KEY=sk-your-key-here \
  -- npx -y sonicnote-mcp-server

将 sk-your-key-here 替换为你的实际 API Key。

第 2 步：安装 NanoBanana

安装前置依赖（uv）：

# macOS
brew install uv

# 验证
uv --version

安装 NanoBanana Skill：

npx skills add yazelin/nanobanana-pro-fallback

配置 Gemini API Key：

# 方式一：环境变量（推荐）
export GEMINI_API_KEY="your-gemini-api-key"

# 方式二：持久化到 shell 配置
echo 'export GEMINI_API_KEY="your-gemini-api-key"' >> ~/.zshrc
source ~/.zshrc

获取 Gemini API Key：https://aistudio.google.com/apikey

验证 NanoBanana 是否可用：

# 测试生成一张简单图片
uv run ~/.claude/skills/nanobanana-pro-fallback/scripts/generate_image.py \
  --prompt "A simple product structure diagram showing three modules: User, Admin, System" \
  --filename "test-output.png" \
  --resolution 1K

如果看到 MEDIA: 开头的输出，说明安装成功。

第 3 步：在 Claude Code 中串联使用

基础验证——确认录音卡可用：

Claude Code 中输入：
你：帮我看看最近有什么录音
Claude：找到以下录音：
 1. 2026-07-02 产品需求讨论（14:00，45分钟）
 2. 2026-07-01 技术架构评审（10:00，60分钟）

串联 NanoBanana——录音→分析→出图：

Claude Code 中输入：
你：查一下刚才产品需求讨论的录音
   提取所有功能模块，整理成结构化的描述
   然后用 NanoBanana 生成一张产品功能结构图

Claude Code 执行：
  Step 1: 通过 SonicNote MCP 获取录音转写和总结
  Step 2: 分析提取功能模块和层级关系
  Step 3: 构造 NanoBanana 的图片生成 prompt
  Step 4: 调用 uv run 生成图片
  Step 5: 输出：product-structure-20260702.png ✅

---

四、NanoBanana 出图指南

支持出图类型

图类型	适用场景	示例 Prompt 结构
产品功能结构图	梳理功能模块层级	“Product feature hierarchy diagram showing…”
系统架构图	技术方案可视化	“System architecture diagram with frontend, backend, database layers…”
业务流程图	用户操作流程	“User registration flow diagram with decision branches…”
ER 图/数据模型图	数据库设计	“Entity relationship diagram showing tables and their connections…”
原型界面图	产品原型讨论	“Mobile app homepage wireframe with search bar, banner, category icons…”
思维导图	头脑风暴整理	“Mind map showing the product roadmap with milestones…”
对比图	方案对比	“Side-by-side comparison diagram of two architecture approaches…”
时序图	接口调用流程	“Sequence diagram showing API calls between services…”
用户旅程图	用户体验分析	“User journey map from discovery to purchase…”

NanoBanana 命令模板

单图生成：

uv run ~/.claude/skills/nanobanana-pro-fallback/scripts/generate_image.py \
  --prompt "你想要的图的描述" \
  --filename "output-name.png" \
  --resolution 1K

图片编辑（基于已有图修改）：

uv run ~/.claude/skills/nanobanana-pro-fallback/scripts/generate_image.py \
  --prompt "修改说明" \
  --filename "output-name.png" \
  -i "existing-image.png" \
  --resolution 2K

分辨率选择：

分辨率	适用场景	生成速度
1K	日常草图、讨论用图	最快（~10s）
2K	正式文档、PRD 配图	中等（~20s）
4K	高清输出、打印/路演	较慢（~40s）

出图质量提升技巧

1. 在 prompt 中明确图类型：“A professional system architecture diagram” 比 “draw the system” 好
2. 指定颜色风格：“Clean corporate style, blue and white color scheme”
3. 指定语言：“All text labels in Chinese” 或 “English labels”
4. 指定画布比例：“Horizontal layout, 16:9 aspect ratio”
5. 参考真实风格：“In the style of AWS architecture diagrams”

---

五、进阶玩法

🚀 工作流一：录音→分析→出图→归档（全自动）

录音卡录制产品讨论
    ↓
Claude Code（MCP 自动检测新录音）
    ↓
自动分析 → 提取结构 → 生成 Prompt
    ↓
NanoBanana 自动生成产品结构图
    ↓
图片自动归档到 Obsidian / 项目文件夹
    ↓
推送通知："产品结构图已生成"

🔗 工作流二：多轮迭代出图

第 1 轮：口述初版→出图
第 2 轮：录音讨论修改意见→Claude Code 分析→NanoBanana 基于 V1 修改
    "把这张产品结构图的用户端模块拆成更细的二级模块"
第 3 轮：团队评审录音→再次迭代
    "根据评审意见，把订单模块拆为下单、支付、退款三个子模块"

每轮都是：录音 → Claude Code 理解 → NanoBanana 改图

🎯 工作流三：一键生成完整 PRD 配图

Claude Code 输入：
"读取产品需求讨论的录音
 帮我做四件事：
 ① 生成 PRD 文档框架（Markdown）
 ② 用 NanoBanana 出产品功能结构图
 ③ 用 NanoBanana 出核心业务流程图
 ④ 用 NanoBanana 出系统架构图
 全部图片嵌入 PRD 文档"

输出：一份带图的完整 PRD 文档 📄

🧩 工作流四：与 Obsidian 联动

录音卡录制
    ↓
Claude Code 分析 + NanoBanana 出图
    ↓
图片 + 分析结果自动写入 Obsidian
    ↓
Obsidian 中形成完整的「需求→分析→设计稿」知识链
    ↓
后续随时通过 Obsidian 检索和回溯

---

六、为什么是这套组合？

没有这套组合	有聆犀 + Claude Code + NanoBanana
产品讨论完靠笔记回忆，再手动画图	讨论录音直接驱动出图
画产品结构图要 2-4 小时	讨论结束后 5 分钟出图
需求理解偏差导致反复改图	基于真实录音内容出图，偏差最小化
改一版图要重新画	录音反馈→NanoBanana 基于原图修改
图、文档、代码互相割裂	Claude Code 串联全部，一次输出
多场会议讨论分散、难以整合	交叉分析多段录音，输出完整方案图

各组件角色

组件	角色	核心价值
聆犀AI录音卡	👂 耳朵	高保真捕捉口头讨论，不遗漏任何信息
妙记 App	🧠 短期记忆	ASR 转写 + AI 总结，把语音变成结构化数据
SonicNote MCP	🔗 桥梁	标准化接口，让 Claude Code 能直接读取录音
Claude Code	🧠 大脑	理解录音内容、提取结构、构造出图 Prompt
NanoBanana	🎨 画笔	AI 图像生成，把文字描述变成专业图表

---

七、适用人群

• 产品经理 — 需求讨论直接出产品结构图和原型，告别手动画图
• 技术 Leader — 架构评审直接出架构图，技术文档配图一键生成
• 创业者 — 和投资人聊完，立即生成产品方案图用于 BP
• 咨询顾问 — 客户访谈→分析→出方案图，全链路加速
• 远程团队 — 异步沟通，录音即设计输入，时差不再是问题
• 独立开发者 — 一个人搞定需求→设计→文档→开发的全部可视化

---

配套资源

• 妙记 App 下载 → https://ainote.easylinkin.com
• MCP Server 配置教程 → https://ainote.easylinkin.com/download/mcp.html
• NanoBanana 官方 → https://github.com/yazelin/nanobanana-pro