跳转至

抄 Zenoti + Keepme — 详细版本(File 3)

用途:File 2 Part B 是 high-level 选型(Z1-Z6 / K1-K6 12 个名字 + ranking)。这份是 detail 版 — 每个抄的项目展开:他们的页面长什么样、为什么重要、我们抄过来该显示什么、关键 UI 元素 / 数据字段 / 注意事项

不写代码 / CSS / 组件 props:文字、信息架构、字段映射(指向我们 schema)、关键 interaction、不要踩的坑。

配套:File 1 zenoti-keepme-resources.md(链接 inventory)+ File 2 zenoti-keepme-feature-comparison-and-borrow.md(对比表 + ranking)。

阅读顺序:§1 Zenoti 6 件(Z1-Z6)→ §2 Keepme 6 件(K1-K6)→ §3 开源资源 4 个怎么用(OSS1-OSS4)→ §4 附录:Zenoti 真技术栈解码(HyperConnect / Twilio / Amazon Transcribe — 你这次问的)。


§1. 从 Zenoti 抄(Z1-Z6 详细版)

Z1. Pain-Sidebar Landing 模式 ⭐⭐⭐

他们的页面长什么样(zenoti.com 主页首屏,2026 版):

左侧一列 7 个痛点 + 1 句话 + icon(垂直排列,可点击),右侧根据点中的痛点显示对应 demo card(高保真 mockup,显示一个具体场景)。7 个痛点分别是: 1. The Unheard Voice — 30% of calls go unanswered(对应 AI Receptionist demo) 2. The Incomplete Booking — ~50% of online bookings are abandoned(对应 AI Concierge) 3. The Ghost Lead — Inquiries left for 10 min go cold(对应 AI Lead Manager) 4. The Silent Churn — Losing guests before you know they're gone(对应 AI Digital Marketer / Retention) 5. The Documentation Burden — Providers spend 2 hours/day on notes(对应 AI Scribe) 6. The Revenue Reversal — Defenseless against chargeback disputes(对应 AI Dispute Manager) 7. The Missed Signal — KPI drops go unnoticed for weeks(对应 AI Business Advisor)

为什么重要:这是销售故事的硬抓手。让访客自己点中自己的痛,然后我们才推对应方案 — 比直接 "Here are our 8 features" 强 10 倍。Zenoti 主页就是凭这个 layout 把 30K 商家拉进 demo。

我们的页面该显示什么(健身行业版,6 个痛点,不是 7 个 — 砍掉跟 retaintive 无关的 SOAP / Dispute):

  1. The Unheard Voice"Your front desk missed 30% of calls last week. Did you know which 3 were leads?" → 我们的 Coaching Highlights demo card
  2. The Ghost Lead"Web inquiries left for 10 min lose 90% conversion. Your Speed-to-Lead is 47 min." → Lead Tracker Speed-to-Lead 分布图 demo
  3. The Coaching Black Box"You can't listen to 47 calls a day. We pick the 3 that matter." → Coaching Highlights flagged 3 calls demo
  4. The Silent Churn"3 members called to cancel last week. Were they offered a freeze? You don't know." → cancel saved attempt rate demo
  5. The Lead Follow-Up Forgotten"Your team has 12 leads from last Tuesday with no follow-up task created." → Task page Today tab demo
  6. The Owner Blind Spot"You haven't logged into the dashboard in 3 weeks. Your studio is down 12% MoM. Should you act?" → Owner Email Digest morning preview demo

关键 UI 元素: - 左 sidebar:每个 pain 1 行 = icon + 大字标题 + 一句话(描述痛苦后果)+ 当前选中状态高亮 - 右 demo card:真实 retaintive UI 截图(不是设计稿),配 1 句话标注 "how retaintive shows this" - 页面顶部:Logo + Nav(Salon&Spa / Barbershop / Medspa / Fitness 这种 vertical 切换 → 我们只 Fitness 一个,简化) - CTA:右上角 "Book a demo" 按钮固定显示

字段映射(数据来自 retaintive 哪里): - 痛点的数字("30% calls unanswered" / "12 leads without task")— 来自我们 BI 历史平均(calls.result = 'Missed' ratio / leads table without tasks join) - demo card 显示的真实截图 — 我们已有 dashboard 直接截

注意事项: - ❌ 不要照抄 Zenoti 卡通插画风(Zeenie 萌系机器人) — 健身行业气质硬朗,要简洁不萌 - ❌ 不要 7 个都列 — 砍掉跟我们无关的(SOAP / Chargeback)。列 6 个,精 - ✅ 痛点的数字用我们真实数据(不是 Zenoti 30% 的全行业数字),一开始可以是行业基准,等有客户数据后换成真实数字 - ✅ demo card 用 retaintive 真实 UI 截图(role-deep-dive-v2.html 第 4 个 mockup 的风格),不是 wireframe


Z2. Contact 360 卡片 ⭐⭐(AI Concierge 模式)

他们的页面长什么样(zenoti.com/ai-workforce 的 AI Concierge mockup):

一张大约 400×300px 的卡片,内容分 4 个区块: - 顶部:头像圆形(姓名首字母 EP)+ 全名"Ester Padmore" + 标签链接 "Assign tags" - 第二行:email + phone + 入会日期 + 城市(行业 icon + 文字) - 第三行:3 个 tag(High spender / Member / +3) — 颜色编码,可点击展开 - 第四行:Google review embed(5 ★ + 一段 quote + 日期 + 服务类型 + 金额) - 底部:Appointment 状态(Completed / Scheduled / etc)

为什么重要:role-deep-dive-v2.html 锁定的 Front Desk 设计原则是 "打电话前 3 秒读完上下文"。光看姓名 + 电话不够 — 客户是会员吗?上次抱怨什么?上次消费多少?有没有给好评?这些上下文决定 SA 怎么开口。Zenoti 的 360 卡是这个问题的最简陋有效解(不是 AI 自动写,就是 raw 数据集合在一处展示)。

我们的页面该显示什么(嵌进 Task 页面右 panel):

┌─ Contact Card ────────────────────────────┐
│ 🟢 Sarah Martinez                         │
│ 📞 +1 (555) 123-4567                      │
│ ✉ sarah.m@gmail.com                       │
│ 📍 Joined: Mar 12, 2025 · Member · 8 mo   │
│                                           │
│ Tags: [Member] [Active] [High utilization] │
│                                           │
│ Last activity:                            │
│   ☎ 2 days ago — asked about freeze       │
│   📩 1 week ago — SMS reminder sent       │
│   📞 3 weeks ago — booked intro class     │
│                                           │
│ Lifetime: 47 classes · $1,280 spent       │
│ Avg attendance: 1.4×/week                 │
│ Last class: 12 days ago                   │
│                                           │
│ AI Summary (Claude):                      │
│ "Member for 8 months. Recently asked      │
│ about evening class alternatives. May be  │
│ at risk — schedule changed."              │
└───────────────────────────────────────────┘

关键 UI 元素: - 左侧 Task list,右侧 Contact panel(role-deep-dive-v2 已锁定) - Contact panel 默认折叠,点 task → 自动展开 - 高度自适应(没有 review 就不显示那一行) - 颜色编码:🟢 active / 🟡 at-risk / 🔴 churned / ⚫ DNC

字段映射(数据来自 retaintive schema): - 姓名 / 电话 / email → contacts.firstName + lastName + phone + email - 入会日期 → contacts.acquiredAt(我之前看到 schema 有这个字段) - Lifecycle stage → contacts.lifecycleStage(lead / member / churned / unknown)+ Lifecycle state(active / frozen / terminal) - Tags → contacts 表里的 tags 字段(如有);否则是 notes 提取 - Last activity → contact-timeline 表前 3 条事件(timestamp DESC) - Lifetime classes / spent → 需要从 client 的 Mindbody / Glofox connector 拉(等 connector ship)。第一版可以省略,只显示通话 + 短信历史 - AI summary → contacts.notes(AI 写的)或现场 LLM 调用 contacts.customer_summary

注意事项: - ❌ 不要复刻 Zenoti 那个 Google review embed — 我们 schema 没有 review 数据(除非接 Google Reviews API,工作量大)。第一版不要这一块 - ❌ 不要让 AI summary 实时生成(每次打开 task 都跑 LLM 太贵)。预生成 + cache 在 contacts.aiSummary 字段,定期刷新 - ✅ 上课 / 消费数据等 Mindbody connector ship 后再加(File 2 Part B #9 的依赖)。没 connector 时这一块 placeholder 显示 "Connect your Mindbody to see attendance" - ✅ Tag 颜色编码用 retaintive 现有色(不是 Zenoti 紫色) - ✅ 卡片底部加一个 **"Open in CRM" 按钮 → 跳到客户 Mindbody / Glofox 详情(过渡期 OK,长期我们想取代这个跳转)


Z3. AI Business Advisor — 自然语言问 KPI ⭐⭐

他们的页面长什么样(zenoti.com/ai-workforce 的 Business Advisor mockup):

完整 chat 框 + 自动渲染图表模式: - 顶部 chat 输入框:"How are the collections for the last six months and compare this with same time last year?"(用户输入) - 中间:AI 回应 — 一张折线图(蓝线 = 当年 / 红线 = 去年),X 轴 Jul-Dec,Y 轴 $80k-$120k 等距 - 图表下方:一句话文字解释"Peak collections in November — $119,700, indicating..." - 旁边小字:数据来源 / 时间范围 / 计算口径

为什么重要: - Owner / Manager 没时间学 BI 工具。Power BI / Tableau / Looker 太复杂。但 "过去半年比去年同期怎么样" 这种问题每天都问 - Zenoti 这个把自然语言 → SQL → 图表 → 解释整合到一个对话框,Allen 型 deep digger owner 会每天用(Will 型 scanner 不会用,但不冲突) - retaintive 的 BI 数据全在 Neon,加一个 LLM 包装就能做 — 但要做好才不会胡说

我们的页面该显示什么:

新页面 /insights(Owner / Manager 角色都能看到):

┌─ Insights ────────────────────────────────────────┐
│ Ask anything about your studio                    │
│ ┌──────────────────────────────────────────┐ ┌──┐ │
│ │ How is intro booking conversion trending? │ │↩ │ │
│ └──────────────────────────────────────────┘ └──┘ │
│                                                   │
│ ▼ Suggested questions:                            │
│ • Compare staff productivity this week vs last    │
│ • Which lead source converts best?                │
│ • Show calls categorized as cancellation last 7d  │
│                                                   │
│ ─────── Conversation ───────                      │
│                                                   │
│ 🧑 You: How is intro booking conversion trending? │
│                                                   │
│ 🤖 retaintive:                                    │
│   Intro booking conversion is up +8% week-over-   │
│   week, currently at 34% (industry baseline 30%). │
│   Main driver: Nadia's calls converted 47% (vs    │
│   her 4-week avg 31%).                            │
│                                                   │
│   📊 [折线图: Conversion % over 8 weeks]           │
│       (实际是 echarts 渲染)                       │
│                                                   │
│   📋 Data source: 142 intro calls last 7 days     │
│   Period: Apr 28 - May 4, 2026                    │
│                                                   │
│   ⓘ Want to drill down? Try:                      │
│   "Show me Nadia's intro calls last week"         │
│                                                   │
└───────────────────────────────────────────────────┘

关键 UI 元素: - chat 输入框(单行,Enter 发送)+ submit 按钮 - Suggested questions 模块(预设 5-8 个常见问题,点了直接发送) — 帮 Owner 知道"我能问什么" - 对话历史滚动,最新在上面 - AI 回应包含 4 个区块:文字回答 + 图表 + 数据源 + drill-down 建议 - 图表用我们已有的 ECharts(role-deep-dive-v2 提到)

字段映射 / 后端: - 输入 → LLM(Claude 或 Kimi)做 text-to-SQL(对 Neon 数据库) - 安全层:SQL allowlist(只允许 SELECT,只允许特定 table 和列,WHERE 强制带 franchise_id 隔离) - 执行 SQL → 拿到原始数据 - 第二次 LLM call:把数据 + 用户原问题 → 生成自然语言解释 + 决定图表类型(折线 / 柱 / 饼) - 图表元数据返回前端 → ECharts 渲染

注意事项: - ⚠️ Codex BLOCKING 提醒过:demo 4-6 周可以,生产 V1 至少 8-12 周。要做的额外工作: - Semantic layer(把"intro booking" → SQL tasks WHERE typeCategory = 'intro_booking' 这种 mapping 维护好,不让 LLM 自己猜) - SQL allowlist(防 LLM 写 DROP TABLE) - Tenant isolation(强制 franchise_id filter,防跨租户数据泄露) - PII handling(不让 chat 历史存敏感 phone / email) - Chart selection logic(LLM 选错图表类型很常见 — 要 fallback 规则) - Bad-answer eval(20-question golden set,验证数字正确率 + 拒答率) - Confidence + fallback(LLM 不确定时显示 "我不确定,这是最相关的数据",不要装作懂) - ❌ 不要让 LLM 直接执行 SQL(高危) — 必须有 allowlist 中间层 - ❌ 不要假装精确:如果数据只覆盖最近 6 个月,Owner 问"去年同期"必须明说 "You only have 6 months of data — comparing month-over-month instead"(role-deep-dive-v2 已说我们这个 limitation) - ✅ 第一版只支持 5-10 个问题模板(不真做 text-to-SQL),用 LLM 选择哪个模板 + 填参数。生产可信再放开 - ✅ 保留对话历史(不只是问答),让 Owner 能看到 "我上周问的问题"


Z4. AI Dispute Manager 的 "AI 起草 + 人工编辑" 双 panel UX 模式

他们的页面长什么样(zenoti.com/ai-workforce/dispute-manager mockup):

两栏布局: - 左栏:Cover letter(AI 起草) — 顶部标签 "Created with AI ✨" + "Edit manually" 按钮 → 一段 4-5 行的 chargeback 反驳信草稿 - 左栏底部:Rewrite / Make Variations 按钮(让 AI 重写 / 出多个版本) - 右栏:Supporting evidence 表格 — Evidence name / Status(Uploaded ✓)/ File 链接(Payment history.pdf / Appointment history.pdf / Membership purchase / etc) - 右栏顶部:Dispute List 摘要表(每个客户一行 — Guest name / Amount / Status [Won])

为什么重要 — 这是个 UX 模式,不是产品: - "AI 给草稿 + 人工编辑" 这个 pattern 我们至少有 3 个地方能套用: 1. Suggested Action Playbook(role-deep-dive-v2 已锁定):AI 给前台一个 5 步话术,SA 可以编辑或反馈"helpful / not relevant" 2. Email Digest 模板:AI 给 Owner 草稿 cliffhanger,Owner 点 "don't show this metric next time" 可以调 3. Customer-defined Gold Standard editor(killer feature):AI propose 一个新 standard,Owner 点 "Add to standard"(File 2 Part B 的 K3) - 共同的设计哲学:AI 不替你拍板,AI 帮你减少 90% 工作量,你审最后 10%。这是 trust 模式

我们的页面该显示什么 — 套用到 3 个场景:

场景 A:Suggested Action Playbook(已锁定)

┌─ Suggested Action Playbook ───────────────────────┐
│ For: Lisa Chen — Cancellation Risk                 │
│ Generated by AI ✨ · [Edit Manually]               │
│                                                    │
│ 1. Acknowledge + Empathize                         │
│    "I totally understand, schedules change..."     │
│    [Edit] [Skip]                                   │
│                                                    │
│ 2. Highlight her achievement                       │
│    "You've been with us 8 months and done 47       │
│    classes — that's incredible progress."          │
│    [Edit] [Skip]                                   │
│                                                    │
│ 3. Offer alternatives                              │
│    "We have a 6:45am class that a lot of           │
│    members love..."                                │
│    [Edit] [Skip]                                   │
│                                                    │
│ ... (5 steps total)                                │
│                                                    │
│ ──────────                                         │
│ 💬 Was this playbook helpful?                      │
│    👍 Yes, used it    👎 Not relevant              │
│    [Add comment...]                                 │
│                                                    │
│ [🔄 Rewrite for this customer]                     │
└────────────────────────────────────────────────────┘

场景 B:Owner Email Digest preview(let Owner shape it)

┌─ Tomorrow's Morning Digest preview ────────────────┐
│ AI generated this for OTF Totowa · [Edit]          │
│                                                    │
│ Subject: 🍊 Your Tuesday update — 3 things to see  │
│                                                    │
│ Yesterday:                                         │
│ • 5 intros, 2 conversions (+$318)                  │
│ • 18% outbound rate (↓ from last week)             │
│ • Staff productivity dipped 8% — see who           │
│                                                    │
│ ⚙ Customize what's in this digest:                 │
│ ☑ Intro bookings    ☑ Cancellation calls           │
│ ☑ Outbound %        ☐ Voicemail count(off)         │
│ ☑ Impacted Revenue  ☐ Per-class breakdown(off)     │
│                                                    │
│ [Save as default for OTF Totowa]                   │
└────────────────────────────────────────────────────┘

场景 C:Add to Gold Standard(killer feature MVP)

┌─ Standard Update Proposal ─────────────────────────┐
│ AI noticed: ✨                                     │
│                                                    │
│ Of the 8 successful Cancel Saves last 30 days,    │
│ 7 followed this pattern:                           │
│                                                    │
│ → Acknowledge schedule change first                │
│ → Highlight tenure/achievement                     │
│ → Offer freeze BEFORE alternative class            │
│ → Use phrase "let's explore what works"            │
│                                                    │
│ Want to add this to your Cancel Risk standard?     │
│                                                    │
│ [Add to Standard]   [Edit before adding]   [Skip] │
│                                                    │
│ ⓘ This will be used to coach future Cancel calls. │
└────────────────────────────────────────────────────┘

关键 UI 元素(三个场景共享): - 顶部明显标 "Generated by AI ✨" + 可见 "Edit" 按钮(透明 + 信任) - 每个 AI 输出至少 3 个 action:Accept / Edit / Skip-Reject - 反馈机制:👍 / 👎 + 文字 comment(收集 training data 给 prompt 优化用) - Audit trail(谁 accept / edit / skip 了什么,什么时候)— 长期 trust 数据来源

字段映射: - AI 输出文本 → 存 tasks.aiSuggestedActionprompt_versions.draft - 用户编辑后版本 → 同字段 + 标 edited_by_user_id + edited_at - 反馈 → 新表 ai_feedback(record_type / record_id / vote / comment / user_id / timestamp)

注意事项: - ❌ 不要让 AI 自动 apply — recommendation loop MVP 必须 human-in-the-loop。Codex 提醒过这个 - ❌ 不要把 AI 的解释藏起来 — 明白显示"AI 看了过去 30 天 8 通 Cancel Save 总结的"。trust 来自 transparency - ✅ 每个 AI 建议旁边都要有 Skip / Reject — 用户能拒,AI 才被信任 - ✅ 反馈数据要真用起来(每月看 thumbs-up rate,优化 prompt) — 不能只收集不用


他们的页面长什么样(zenoti.com/ai-workforce 主区域):

N×3 卡片网格,每张卡片 = 一个 AI agent。卡片内容: - 顶部:agent 名字 + 卡通头像 / icon(大字) - 中部:1 句话介绍(Sends personalized reminders, upsells, and follow-ups automatically) - 底部:关键 KPI 数字("$8K saved per location/month" / "94% accuracy")+ "Learn more →" 链接

为什么重要: - 我们也会有多个 AI capability(Coaching / Lead 跟进 / Recommendation / Business Advisor 等)。用 agent gallery 可视化 = 让 owner 一眼看到我们 AI 全集,不用读长文档 - 但是我们不要做拟人化 agent(Will 不要 16 个机器人在他后台)。抄 layout 不抄 framing:卡片代表的是功能模块,不是"虚拟员工"

我们的页面该显示什么(/features 或落在主页二屏):

3×2 卡片网格: 1. Coaching Insights"We pick the 3 calls a day that matter for your team" / "15-20% of calls flagged for review" 2. Lead Speed-to-Lead Tracker"Track first-attempt response time on every web inquiry" / "Industry leaders respond in <5 min" 3. Customer-defined Standards(coming soon)— "Your sales playbook codified, every call graded against it" 4. Owner Morning Digest"30 seconds of clarity on every studio every day" / "Email + dashboard + cliffhangers" 5. Task auto-creation"From call to follow-up task in 30 seconds" / "No more 'forgot to call back'" 6. Insights Chat"Ask anything about your studio in plain English"(coming soon)

关键 UI 元素: - 卡片大小一致,信息密度低(标题 + 1 句话 + 1 个数字 + 1 个链接) - 不要卡通插画 — 用简洁 icon(line / outline 风格,跟 retaintive 现有 design 一致) - "Coming soon" 卡片用淡色 + 标签清晰 - 每个卡片可点击 → 进对应 feature 详情页(渐进信息架构)

注意事项: - ❌ 不要给每个 capability 起拟人化名字("Sally 帮你接电话" / "Tom 给你做 coaching") — 健身行业气质硬朗,owner 不喜欢 cute - ❌ 不要列:Email Digest auto-send / SMS reminders 这种底层机制 — 这些藏在功能里,不是 capability 卡 - ✅ KPI 数字用我们真实 metrics(从客户 case study 拿,没有就标 "target""industry baseline") - ✅ 卡片顺序按 Owner / Manager / FD 角色相关性(Owner 看到的卡片在前)


Z6. Front Desk Redesign Annotated Screenshots ⭐(免费可看的最高价值视觉源)

他们的页面长什么样(help.zenoti.com/en/appointments/new-front-desk-experience.html):

完整的新版 Front Desk redesign annotated screenshots — 不是 marketing,是官方 docs 详细注释。包括: - Top ribbon(快速操作:New Appointment / Search / Notifications / Settings) - 左侧 nav sidebar(Calendar / Clients / Inventory / Reports / etc — 折叠展开) - 中间 schedule grid(预约日历,时间纵向,员工横向 — colored cell) - 右侧 detail panel(选中预约后显示客户 + 服务 + 备注) - Cmd+K quick actions(键盘快捷) - Color coding(预约状态:confirmed / completed / cancelled / no-show)

为什么重要: - 这是 Zenoti 2024-2025 redesign 的核心产物,他们花了几百万美元做 UX 研究 + design - 官方截图 + 注释 + workflow 描述 = 比 Marketing page 更 raw,更能学到信息架构和密度选择 - 我们的 Front Desk Task page 是 retaintive 最重要的高频界面(SA 每天看 8 小时),这个 page 是免费的 design reference

我们抄什么:

不抄整个布局(我们不是 booking 系统,role-deep-dive-v2 已锁定 Task 页面是 SA 的"工作台"不是日历)。抄 4 个具体模式:

  1. Top ribbon 简洁 quick actions:retaintive Task 页面顶部加 Search bar(by phone/name)+ Today's stats badges(12 tasks today / 3 overdue)+ Quick filter chips
  2. 左侧 nav 信息密度:Zenoti 把 nav 折叠成 icon-only 模式给重度用户(SA 一天用 8 小时),我们的 Vue Router 也要支持这个折叠
  3. Color coding:Zenoti 用 5 种颜色编码状态(同色不同饱和度区分严重度)。我们抄这个 — Task 卡片左边 4px color stripe(LEAD red / FOLLOW orange / CANCEL purple / RETENTION green / WIN_BACK blue),已在 role-deep-dive-v2 mockup 里
  4. Cmd+K 快速操作:我们 Task 页面加 Cmd+K → Quick Search(by phone/name/contact)+ Quick Action(Close Task / Add Note / Reassign)。SA 操作速度立刻 2x

注意事项: - ❌ 不要复刻 schedule grid(那是 booking 系统的视图,我们不是 booking 系统) - ❌ 不要照搬 Zenoti 紫色主题(retaintive 色系不变) - ✅ 取信息密度感觉:Zenoti 一屏能塞 30+ 个预约 + 元信息,密度高但不乱 — 因为对齐 + 留白处理好。我们的 Task 页面 listing 也要这种密度 - ✅ 键盘 first 哲学:Zenoti 给重度用户做了完整快捷键,我们 SA 是高频用户,完整 keyboard navigation 必须做


§2. 从 Keepme 抄(K1-K6 详细版)

K1. Conversation Timeline / 3-Pane Omnichannel Inbox 视觉 ⭐⭐(Intercom 风格)

他们的页面长什么样(keepme.ai 7-min CEO demo + Intercom 模式):

3 栏布局: - 左栏(channel + conversation list):280px 宽。顶部 channel filter(All / WhatsApp / SMS / Email / Voice / IG DM),下方滚动列表 = 客户头像 + 名字 + 最新消息 preview + timestamp - 中栏(conversation thread):flex 自适应。像 iMessage / WhatsApp 的对话泡泡 — 客户消息靠左、AI/SA 消息靠右,每条带 timestamp + 已读状态。重点:跨渠道消息按时间合并到一条 thread(不是 4 个 tab 分开) - 右栏(context panel):380px 宽。客户 360 信息(姓名 / 电话 / lifecycle / tags / 历史)+ 当前对话元数据(call duration / sentiment / topics) + AI suggestions(下一步该说什么)

为什么重要: - retaintive 已经有 contact-timeline 表(schema 支持),但没有 UI。这是个纯前端工作 schema 全已支持 - Front Desk SA 接电话的时候,真实需要看到的是这个客户在所有渠道的完整对话历史(不只是这通电话) — 不然她不知道 "客户上周已经在 SMS 里说过他想 freeze 了" - Intercom 是这个 pattern 的业界标准(SaaS 客服都用),Keepme 抄它,我们也抄它

我们的页面该显示什么(嵌进 Task 页面 / Call detail 页面):

┌─ Channels ──┐ ┌─ Sarah Martinez · Conversation ────┐ ┌─ Context ────────┐
│ All (47)    │ │                                    │ │ 🟢 Sarah Martinez │
│ ─────────── │ │ Apr 22 · 14:32 · ☎ Inbound call    │ │ Member · 8 mo     │
│ ☎ Calls(12) │ │ ┌────────────────────────────────┐ │ │ +1 555-0123       │
│ 📱 SMS  (8) │ │ │ "Hi, I want to ask about       │ │ │                   │
│ ✉ Email (3) │ │ │  freezing my membership..."    │ │ │ Tags:             │
│ 💬 Web  (24)│ │ │ Duration: 4m 12s · Sentiment:  │ │ │ [Active] [Member] │
│ ─────────── │ │ │ Concerned → Calm               │ │ │ [High utiliz.]    │
│             │ │ └────────────────────────────────┘ │ │                   │
│ Sarah M.    │ │                                    │ │ Lifetime:         │
│ "freeze..." │ │ Apr 22 · 16:08 · 📱 SMS to Sarah   │ │ 47 classes        │
│ 2h ago      │ │ ┌────────────────────────────────┐ │ │ $1,280 spent      │
│ ─────────── │ │ │ "Hi Sarah! I confirmed your    │ │ │                   │
│ Mike J.     │ │ │  freeze for May. Let us know   │ │ │ Last class:       │
│ "thanks"    │ │ │  if you want to come back."    │ │ │ 12 days ago       │
│ 5h ago      │ │ └────────────────────────────────┘ │ │                   │
│ ─────────── │ │                                    │ │ AI suggests:      │
│ Lisa C.     │ │ Apr 25 · 09:14 · ✉ Email reply    │ │ "Schedule a       │
│ "schedule.."│ │ ┌────────────────────────────────┐ │ │  check-in call    │
│ 1d ago      │ │ │ "Thank you for the freeze!     │ │ │  in 3 weeks."     │
│             │ │ │  Will I get charged?"          │ │ │                   │
│             │ │ └────────────────────────────────┘ │ │ [Snooze][Snap 📷] │
└─────────────┘ └────────────────────────────────────┘ └───────────────────┘

关键 UI 元素: - Channel icon(每个 message 顶端有一个小 icon 标 channel — ☎/📱/✉/💬) - Sentiment trend(每条 call 显示语义流动 — Concerned → Calm 这种) - Cross-channel thread merging:同一个 contact 的所有 channel 合并到一条 timeline,按时间排序 - AI suggestions 在右栏底部(不是中间,不打断阅读) - Snooze / Snap / Reassign 三个 quick action 按钮(Milly 的 Grab Snap 直接在这里)

字段映射: - 左栏 channel filter → query contact-timeline table by event_type - 中栏对话 → join calls + messages + contact-timeline ORDER BY timestamp DESC - Sentiment → calls.primaryOutcomeReasoningcalls.aiAnalysis.sentiment - AI suggestions → calls.suggestedActions(JSON 数组,已有) - Context panel → 跟 Z2 共享同一个 Contact 360 卡

注意事项: - ❌ 不要复刻 Intercom 的 chatbot 自动回应 — 我们不接 AI 回应,只做 review + coaching - ❌ 不要做实时 typing indicator(那是 chat 产品,我们是 review 产品) - ✅ 跨 channel merging 是核心 — 这个比 "4 个 tab 分开" 强 100x。SA 看一眼知道全貌 - ✅ Voice / SMS / Email 的视觉用不同泡泡形状或 icon(语音用 audio-wave icon,SMS 普通 bubble,Email 用 envelope 边框) - ✅ 一定要做时间线分组(Today / Yesterday / Last week / Earlier),不要让 SA 滚 100 条找最新


K2. Coaching Highlights → Daily Slack/Email 推送 ⭐⭐(主动外联)

Keepme 的对应做法:Keepme 是 in-call AI agent,他们直接在对话里做。但他们的 Veritas 产品有日 / 周报告 push 给 manager(blog: One Year of Antares 提到)。

我们的做法(借鉴 + 改造):

Manager 每天早上 8 AM 收到 Slack 消息或 Email(retaintive Slack app 或 retaintive@retaintive.ai):

🌅 Good morning Milly · OTF Harlem · Tuesday May 1

Yesterday: 47 calls handled, 3 need your attention.

⚡ NK · Nadia K. → David Park (Member, 8 mo)
   Retention Technique
   Cancel call with 0 save attempt — 8mo tenure, high
   chance of save with freeze offer.
   [Listen 4:12] [Coach Now]

⚡ KL · Kyle L. → +1 (914) 555-0187 (New Lead)
   Booking Ask
   Warm lead asked pricing + schedule but Kyle didn't
   close with booking ask. Said "I'll think about it."
   [Listen 7:03] [Coach Now]

🌟 RW · Ryan W. → Lisa Chen (Member, 14 mo)
   Great Save
   Textbook retention — acknowledged concern, used
   data to reframe value, offered concrete freeze.
   Member kept membership.
   [Listen 5:24] [Share with team]

──
📊 Yesterday's stats:
Total: 47 · Coaching-worthy: 9 · Flagged: 3 (6.4%)
Trend: ↓2% vs last week (improving!)

[Open Dashboard] [Pause notifications]

为什么重要 — File 2 Part B 排第 3 不是偶然: - Milly 真实 workflow"看 Slack → 截图 → 转发",不是 "打开 dashboard"。她每天滑手机比开电脑多 - 0 onboarding 摩擦 — 不用她登录 retaintive,Slack 来一条她就读 - 触达频次 = 留存的根本。Dashboard 是 pull,Slack/Email 是 push - 这个一旦 ship,Manager 角色 retention 一档跳

关键 UI 元素: - Slack message 用 Slack Block Kit(可点击按钮,不是普通文本) - Email(HTML,响应式)— manager 可以在手机邮件 app 里直接读 - 每条 flagged call 包含:🆔 staff 名字 → 客户 + lifecycle + 通话原因 + 1 句话总结 + Listen 按钮 + Coach 按钮 - 底部 stats summary(yesterday total / coaching-worthy / flag rate trend) - 管理控件:Pause notifications(休假) / Customize(选哪些类别推) / Daily 还是 weekly

字段映射 / 后端: - 触发:每天 8 AM(或 manager 自定义时间)cron job - Query:calls WHERE date = yesterday AND franchise_id = X AND coaching_worthy = TRUE ORDER BY severity DESC LIMIT 3 - Coaching-worthy filter:duration > 60s AND result NOT IN ('voicemail', 'wrong_number') AND review_category != 'NOT_REQUIRED'(role-deep-dive-v2 已锁定逻辑) - Slack:用 retaintive Slack app(OAuth 连入 manager Slack workspace) - Email:从 retaintive@retaintive.ai 发(SES / Postmark)

注意事项: - ❌ 不要每天都推 5 条(role-deep-dive-v2 锁定:宁少勿多)。每天最多 3 条,真没值得看的就推 0 条 + 一句话 "All quiet today" - ❌ 不要在 Slack 里直接放音频 — 文件大,Slack 慢。放 link,点了去 dashboard 听 - ✅ 第一周让 manager 选时间 + 频次(每天 / 周一 / 自定义) - ✅ Pause 选项必须明显 — manager 出差 / 休假时她应该能 1 click pause(不是 unsubscribe forever) - ✅ Slack 比 email 优先 — manager 看 Slack 比 email 频繁。Email 当 fallback(没装 Slack 的 manager)


K3. "Add to our standard" 按钮 ⭐(Recommendation Loop MVP — 0 ML)

Keepme 的对应做法:Box of Authority 提到 "If an edge case occurs, we adjust the global guardrails" — 但他们没有公开的 "Manager 一键 add" UI。这是我们借鉴他们 trust 模式 + 自创 UI

我们的做法:

Coaching Highlights 模块的"Great Save" 卡片(role-deep-dive-v2 第 587 行已 mockup),在卡片底部加一个按钮:

┌─ Great Save ────────────────────────────┐
│ 🌟 RW · Ryan W. → Lisa Chen              │
│ Retention Technique                      │
│                                          │
│ Member called to cancel citing cost.     │
│ Ryan acknowledged her concern, checked   │
│ her attendance (3x/week), calculated     │
│ per-class cost ($12/class), and offered  │
│ a 2-month freeze while she sorts         │
│ finances. Member agreed to freeze.       │
│                                          │
│ ✨ Why highlighted: Textbook retention.  │
│ Acknowledged → Used data → Offered       │
│ concrete alternative.                    │
│                                          │
│ [Listen to call] [View transcript]       │
│                                          │
│ ──────────                               │
│ 📋 Want this to coach future calls?      │
│ [Add to our Cancel Risk standard]   ←   │
│ [Skip — this is just one good call]      │
└──────────────────────────────────────────┘

点击 "Add to our Cancel Risk standard" 后:

┌─ Add to Standard ──────────────────────────────┐
│ AI extracted these patterns from this call:     │
│                                                 │
│ ☑ Acknowledge schedule/cost concern first       │
│ ☑ Reference attendance data                     │
│ ☑ Calculate per-class value                     │
│ ☑ Offer freeze BEFORE alternative class         │
│ ☐ Use phrase "let's explore what works"         │
│                                                 │
│ Select which patterns to add to your standard.  │
│ Future Cancel Risk calls will be graded against │
│ these criteria.                                 │
│                                                 │
│ [Confirm — Add 4 patterns] [Edit before adding] │
│                                                 │
│ ⚠ This change applies to all your studios       │
│ (Harlem, Totowa, Westside).                     │
└─────────────────────────────────────────────────┘

为什么重要: - 这是 customer-defined gold standards 的 MVP(File 2 Part B 战略级单一 move 的入口) - 0 ML 工作量 — AI 就抽 pattern + propose,人审最后 - 数据信号收集:每次 manager add 一个 pattern,我们就知道 "这个客户认为这个行为是好的"。半年下来积累成完整的 customer-specific standard - Onboarding 极轻:不要求客户预先编辑 standard,日常用着就在 build

关键 UI 元素: - 按钮文案:不是 "Save as template"(太抽象),是 "Add to our Cancel Risk standard"(具体行为) - AI 抽取的 patterns 显示出来,checkbox 让 manager 选(不是全 add) - 预览 standard 影响范围("This change applies to Harlem, Totowa, Westside" — 多店要明示) - 撤回机制:settings 页面能看到所有 added patterns,可以 revert

字段映射 / 后端: - Coaching-worthy + great-save call 的 transcript → LLM 提取 patterns(prompt:"What 3-5 specific behaviors made this call successful?") - 提取结果 store 在 prompt_patterns 新表(franchise_id / call_type / pattern_text / source_call_id / added_by_manager_id / added_at / active) - 下一次 same call_type 通话评分时,把 active patterns 拼进 grading prompt

注意事项: - ❌ 不要让 AI 自动 apply patterns — 必须 manager 点 - ❌ 不要把 patterns 数量做无上限 — 标准累积太多会冲突。每个 call_type 上限 10-15 patterns,超过提示 manager 删旧的 - ✅ Audit trail 必做:谁 add 了什么 pattern 什么时候,可以 revert - ✅ Cross-studio 影响明示 — 多店 owner 加 pattern 会影响所有店,这个明示是 trust(避免 "我以为只影响我这家" 的尴尬) - ✅ AI 拒答机制:如果某通 call 的 pattern AI 抽不出有意义的(比如就是个简单 yes/no call),不显示 "Add to standard" 按钮 — 不要逼人 add 噪声


K4. Box of Authority Narrative(audit trail + escalation + grounded knowledge)

Keepme 的对应做法(keepme.ai/why-antares-is-safe 6 个 safeguards): 1. Grounded Knowledge & Compliance(grounded exclusively in your approved data) 2. Automatic Handoff(confidence-threshold escalation to human) 3. Negative Constraints & Brand Voice("never say" lists) 4. Integration-First & Total Reversibility(architectural promise) 5. Centralised Visibility(central control centre) 6. Full Auditability(100% transparent audit trail)

为什么重要: - 客户最怕:AI 胡说、AI 替员工得罪客户、AI 跑飞了控不住。Keepme 这套 narrative 把"信任"做成产品页 — 让客户先放心再 demo - 我们也有 audit trail / escalation / customer-defined boundaries(一些已有,一些是 K3 / 战略 move 在做)。说法本身就是产品价值 - 不抄技术(他们的 Box of Authority 解码就是标准 RAG + guardrails 没什么神秘),抄怎么把 trust 做成销售 narrative

我们的页面该显示什么(/why-retaintive-is-safe 或 sales deck 一节):

不是营销吹牛,是写出我们已经/即将做的事 + 为什么这是 trust:

  1. Customer-defined coaching standards"AI grades against YOUR playbook, not our generic template. You define what 'good' means for your studio."
  2. AI escalation, not autonomy"Our AI never closes a task or sends a message on your behalf. It proposes, your team approves."(K3 的 Add to standard 模式,Z4 的 AI draft + edit 模式都是这个)
  3. 100% transparent grading"Every coaching flag includes: which transcript triggered it, which standard rule it violated, why the AI scored it that way. No black box."
  4. One-click revert anywhere"Wrong flag? Wrong pattern added to your standard? You can undo any AI decision."
  5. No data sharing across customers"Your call recordings, transcripts, and standards are yours. We don't train AI on your data."(GDPR / CCPA / SOC 2 已合规,我们要 ship 这些 cert)
  6. You own the knowledge base"Cancel-saving patterns Will perfected at OTF stay at OTF. Adam's Mariana Tek tactics stay at his studio. We don't aggregate."

关键 UI 元素: - 1 屏 6 个 trust point,每个配 1 个 icon + 标题 + 1 段话(70-80 字) - 可点击展开:每个点击展开看更详细的实现 + screenshot("Here's what 'transparent grading' looks like in your dashboard...") - 底部 CTA:"See it in action" + "Ask us anything about how we handle your data"

注意事项: - ❌ 不要用 "Box of Authority" 这个词 — Keepme brand,我们不抄品牌名 - ❌ 不要吹我们没做的("100% accuracy" / "Zero hallucinations") — Keepme 用 marketing 语言但底下还是 RAG + guardrails,我们不要重复这种 hype。说我们真做的,不夸大 - ❌ 不要复刻 Keepme 的 trust 6 项一模一样 — 学结构(用一组 trust point + 详细解释)+ 改内容(我们的 trust 来源不一样:human-coaching vs AI-handler) - ✅ 每点都有可 demo 的 evidence"transparent grading" 不是空话,是真实截图;"customer-defined standards" 是真实功能。先 ship 功能,再写 trust narrative - ✅ 优先级:这页不是立刻做 — 是Mindbody connector + Killer feature 部分 ship 后做(File 2 Part B 排 🟡 2-3 月内不是偶然)


K5. Performance Dashboard 卡片设计(Total Calls / Bookings / Sales / Time Saved)

Keepme 的对应做法(keepme.ai/antares 主页 embedded screenshot):

4 个大数字卡片水平排列,每个卡片: - 顶部:指标名(Total Calls Handled / Tour Bookings Made / Sales Closed / Time Saved) - 中间:大数字(60,000+ / 450 / 38 / $11k) - 底部:时间维度 / 对比("Last 30 days" / "+34% vs prior period") - 可选:Sparkline mini chart(过去 30 天趋势)

为什么重要: - Owner / Manager 第一眼要看 4 个数字 — "这周生意怎么样"。卡片化呈现是行业标准,但选哪 4 个数字反映你的产品哲学 - Keepme 选:Calls Handled / Tour Booked / Sales Closed / Time Saved — 反映他们 lead-funnel 故事 - 我们要选反映 retaintive 故事的 4 个

我们的页面该显示什么(Owner / Manager Dashboard 第 1 屏):

4 个卡片(对 Owner 视角,Manager 切到 SA breakdown):

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ INTRO BOOKINGS  │ │ TASKS COMPLETED │ │ COACHING FLAGS  │ │ IMPACTED REVENUE│
│                 │ │                 │ │                 │ │                 │
│        7        │ │     8 of 11     │ │       18%       │ │     +$1,274     │
│                 │ │                 │ │                 │ │                 │
│ 5 CC captured   │ │ 73% completion  │ │ ↓2% vs last wk  │ │ 30 days · ↑12%  │
│ Yesterday       │ │ Yesterday       │ │ Last 7 days     │ │                 │
│ ───── /\___/    │ │ ─────/─\─\___   │ │ ─\__\__/─/      │ │ ───/──/─/─/     │
└─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘

为什么这 4 个(直接对应 role-deep-dive-v2 锁定决策): - Intro Bookings = Owner 关心的 #1(role-deep-dive-v2 锁定) - Tasks Completed = 团队是否在干活 - Coaching Flags = 团队质量(我们独有指标) - Impacted Revenue = retaintive ROI 证明(锁定 Will 命名)

关键 UI 元素: - 大数字字号特别大(60-80px) - Sparkline 可选(开了显示 + 不开显示对比文字) - 颜色编码:正常黑、好绿、坏红 - 可点击 → 跳到 detail page(Drill-down,role-deep-dive-v2 已锁 cliffhanger 模式)

字段映射: - Intro Bookings → tasks WHERE typeCategory='intro_booking' AND closeResult='converted' AND closedAt = yesterday - Tasks Completed → tasks WHERE status='closed' AND closedAt = yesterday - Coaching Flags → calls WHERE reviewCategory != 'NOT_REQUIRED' AND date BETWEEN ... ORDER BY ...(用 reviewcategory 已有字段) - Impacted Revenue → tasks.assumed_value SUM 按 closeresult 加权

注意事项: - ❌ 不要超过 4 个卡片 — 多了 owner 扫不动(role-deep-dive-v2 "3 秒决策" 原则) - ❌ Manager 切到 per-SA 视图时,卡片数据自动变成"per SA 平均值"或"top performer",不是 studio 总数(role-deep-dive-v2 锁定 Manager 视角) - ✅ 每个卡片必有时间标记(Yesterday / Last 7 days / etc)— 数字没时间维度无意义 - ✅ 多店 owner 看汇总,可以切单店(切换器在顶部)


K6. Pin 真实 Time-to-Value 数字

Keepme 的对应做法: - "20-day deployment"(2 phases) - "Less than 5 hours of internal staff time" - 多 site rollout "4-6 weeks accelerated / 8-12 weeks staged"

为什么重要: - 销售时"多快能见效"是 owner 第 1 个问题 - Keepme 把这个数字钉死写在 adopting-antares 页 — 销售对话不用绕弯 - retaintive 0 paying customer = 没有真实 onboarding 数据。但你必须 pin 一个数字,否则 sales 永远在 "depends..."

我们的页面该显示什么(landing 页面 + sales deck):

Trust Statement(landing 第 2-3 屏):

"From RingCentral connect to your first Manager Coaching Highlights digest — 10 days

Day 1-2: We connect to your RingCentral account. No phone migration, no number change. Day 3-7: We analyze your last 30 days of calls, build your team's Speed-to-Lead baseline, and configure your first Coaching Highlights filter. Day 8: Your Manager receives the first Daily Coaching Highlights email. Day 10: Your Owner receives the first Morning Digest with cliffhangers to your dashboard.

No CRM swap. No phone migration. No 6-month implementation.

Just RingCentral connect, configure, and go.

关键 UI 元素: - 大数字 "10 days" 醒目 - 逐日分解(让 owner 看到具体每一天发生什么) — 这比一句"快"有信任感 - 3 个 NO(no CRM swap / no phone migration / no 6-month) — 直接对比 Zenoti / Keepme 的痛点 - CTA:"Start your 10-day onboarding"(不是 "Book a demo",更直接)

字段映射 — 不需要数据,这是产品承诺: - 但要 ship 一个 Onboarding Tracker dashboard(给客户看 Day 1 / 3 / 7 / 10 进度),否则数字立不住 - Tracker 自动从 rcStores.connectedAt + calls 数量 + tasks 第一次创建时间推算

注意事项: - ❌ 不要只挂数字,必须 ship onboarding tracker(让客户真实感受到进度) - ❌ 不要在第一个客户没跑过完整 10 天前写到 landing 上 — 否则承诺立不住,失信代价大 - ❌ 不要写"5 minutes"或"1 day" — 不真实,owner 一上来就不信 - ✅ 第一个真实客户(Will?)跑完 10 天 onboarding 后,把他实际经历放到 landing 上当 case study("Will at OTF Totowa onboarded in 9 days") - ✅ 如果某些 phase 慢于 10 天,明面承认("Day 1-2 might extend if your RingCentral has multi-extension config") — 真比快重要


§3. 开源资源 4 个 — 怎么用(OSS1-OSS4 详细)

OSS1. TailAdmin Vue Tailwind Admin Dashboard ⭐⭐⭐(github.com/TailAdmin/vue-tailwind-admin-dashboard)

这是什么:开源的 Vue 3 + Tailwind dashboard 模板,直接兼容 retaintive stack(其他模板都是 React/Next 要 port,这个不用)。包含 sidebar nav / topbar / KPI cards / tables / charts / forms / modals 等几十个组件。CRM 变体专门为我们这种 use case 设计。

怎么用 — 3 个用法:

  1. 直接 fork 当 scaffold(最激进):整个 retaintive frontend 项目从这个模板起步。改主题色 / 字体 / nav 后直接迭代业务功能。省 1-2 周前端基础工作前提:retaintive 现在前端是不是已经写了一堆?如果是,这个用法不适用
  2. 只 copy 组件(最常用):看到我们要做的 component(KPI 卡片 / Tables / Modal),直接 copy TailAdmin 的源码 + 改我们的字段 / 样式。比从零写省 50% 工作量
  3. 当 design reference(最轻):不 copy code,只看 layout / 间距 / 配色 / 状态组合的处理方式。给设计师当工作 input。0 工作量,纯学习

抄什么具体组件: - Sidebar nav(可折叠 icon-only 模式 — Z6 提到的) - Topbar(notifications + search + user menu) - KPI cards(K5 4 卡的基础模板) - Data table(分页 + 排序 + filter — Lead Tracker / Task list 用) - Form components(Close Task 弹窗用) - Modal(Add to Standard / Edit Playbook) - Toast notifications(操作反馈)

注意事项: - ❌ 不要照搬主题色 — TailAdmin 默认色不是 retaintive 色 - ❌ 不要全部组件都用 — 我们只用 30-40% 的组件,其他不导入(防 bundle 膨胀) - ✅ License 检查 — TailAdmin Free 是 free for personal but commercial maybe needs license。ship 前确认 license terms - ✅ 保留 attribution — 如 license 要求,在 README / about 页加 "UI components based on TailAdmin"


OSS2. Intercom UI Kit Figma(免费 community file)⭐⭐

这是什么:Figma community 上的免费 Intercom-style UI kit。包含 Intercom 的 3-pane inbox / conversation thread / contact card / quick actions 等所有视觉组件。Keepme 的对话 timeline 视觉灵感就是 Intercom,这个 kit 是 K1 的直接 design reference。

怎么用:

  1. 设计师下载到 Figma 当 reference:看 Intercom 怎么处理对话气泡 / channel icon / sentiment 标记 / context panel — 我们抄结构改细节
  2. 不要照抄一模一样 — Intercom 是客服产品,我们是 review + coaching 产品,某些 element 不适用(realtime typing / chatbot widget)
  3. 生成 retaintive 自己的 Figma library:基于这份 kit 改 retaintive 色系 / 字体 / 标签 / iconography,build 我们自己的内部 design system

抄什么: - 3-pane layout(left list / middle thread / right context) - Message bubble 设计(in / out 不同方向 + 颜色) - Channel icon system(每个 channel 对应一个明确 icon) - Context panel 信息密度处理 - Hover state / quick action 出现位置

注意事项: - ❌ 不要做 chatbot widget — Intercom 是客服 chatbot,我们不做 chatbot - ❌ 不要照抄 Intercom 蓝色 — retaintive 色系不变 - ✅ 下载 + 改色 + 改字体 = retaintive 内部 starter,以后所有 designer 都基于这个迭代


OSS3. Behance: Fitness Management SaaS by Ruslan Kosinov ⭐⭐

这是什么:Behance 上 2,600+ 点赞的健身行业 SaaS dashboard 设计案例。包含 schedule / revenue / class management 全套页面 mockup。生产级健身行业 design vocabulary(色系 / 字体 / 信息密度都按健身行业气质定的)。

怎么用:

  1. 设计师下载图片当色彩 + 字体 reference:健身行业不是医疗 / 金融 / SaaS 通用 — 它有特定的视觉气质(active / strong / clean,不能太软)。这份是好范本
  2. 学习信息架构:Ruslan 怎么把 schedule + revenue + class 三个不同模块放在同一 dashboard 而不打架
  3. 不抄具体设计(版权问题) — 抄视觉决策(为什么用这个色 / 这个间距 / 这种字号层级)

抄什么: - 配色方案(主色 / 辅色 / 警告 / 成功 — 怎么搭出健身气质) - 字体层级(Heading / Body / Numbers / Labels) - 数字呈现(健身行业重数字 — class count / revenue / member count 怎么呈现得 punchy) - Card / table 间距(不要太挤,但也别太松)

注意事项: - ❌ 不要 1:1 复刻(版权)— 抄思路不抄具体设计 - ✅ 联系 Ruslan 询问商业 license(如 budget 允许,直接付他做我们的设计) — 但 retaintive 早期不一定要


OSS4. Zenoti Newbie Tutorial YouTube ⭐(youtube.com/watch?v=wq5O6ZIi9OM,2025-03)

这是什么:第三方独立 SaaS reviewer 录制的 Zenoti 完整 walkthrough 视频(2025 年 3 月)。比 Zenoti 自家 marketing demo raw,展示真实客户用 Zenoti 时碰到的步骤 / UI 困惑 / workflow。

怎么用:

  1. 设计师 / PM 看一遍(1-2 小时):看真实用户怎么 navigate Zenoti,哪些地方卡住 — 我们绝不抄那些坑
  2. 截图记录:用户 frustrate 的瞬间 / nav 不直观的位置 / 多步操作合理的流程,各截 5-10 张图
  3. 整理成 retaintive 不要做什么 list:"Don't ask user to click 5 times to do X" / "Don't bury filter in submenu" / "Don't use cryptic abbreviations like 'CC captured'"

抄什么: - 学反例 — 看用户卡住的地方,我们的 UI 设计避开 - 学真实操作流(不是 marketing demo 的理想路径,是真实用户路径) - 学 keyboard / mouse 习惯(用户最常用什么 — 我们快捷键设计参考)

注意事项: - ❌ 不要直接复刻 Zenoti 任何具体 UI(它就是个反例库,不是抄袭对象) - ✅ 观察用户的语言("OK so I want to see..." / "Hmm where is...")— 这些是 retaintive 文案 / nav label 的灵感 - ✅ 看完写一份 "Lessons from Zenoti's friction points" 内部 doc,1-2 页


§4. 附录:Zenoti 真技术栈解码(回答 Max 的问题)

4.1 HyperConnect 是什么 — 不是 RingCentral 同类

verified 事实(WebSearch + Zenoti help docs):

维度 RingCentral HyperConnect
是什么 完整 UCaaS 产品(独立的电话公司) Zenoti 的内嵌 softphone + AI 通话功能模块
客户用法 独立产品,客户单独买 必须订阅 Zenoti 才能用
电话号码 RingCentral 自己分配 / port-in 必须用 Twilio 号("Only Twilio numbers on HyperConnect are supported")
底层 carrier RingCentral 自家 + 多 telco Twilio(verified)
是否独立产品 可以,完全独立 不可以,Zenoti 的一个 module
Softphone RingCentral app(独立 app) Zenoti 内置 softphone(浏览器 + 物理 VoIP phone + Zenoti Mobile)
类比 电信运营商 Slack 内置的 Huddle 通话

含义: - HyperConnect 不是 RingCentral 替代品。客户如果用 RingCentral,不能直接用 HyperConnect。要用 Zenoti AI 通话功能,客户要把电话号 port 到 Twilio + 用 Zenoti softphone - 这是 Zenoti 的lock-in 招 — 一旦客户上 HyperConnect,电话号都在 Twilio 上(给 Zenoti 用),换平台又要 port 一遍

4.2 Zenoti 通话录音 / 转录技术栈(verified via AWS case study)

retaintive(我们) Zenoti(他们) 评论
接电话 / 通话基础设施 RingCentral(webhook) Twilio(verified) 都锁单一 carrier
Softphone RingCentral app Zenoti 自家 HyperConnect softphone 我们不自建
录音存储 RingCentral API → S3 Twilio 录音 → AWS S3 类似
Speech-to-Text(STT) Deepgram Amazon Transcribe Deepgram 在电话音频领域行业更优,我们这层选型其实更精
LLM 分析 Kimi K2 / Claude(直接 API) Amazon Bedrock(model 不公开,可能也是 Claude) 我们 latency 少一层
AI agent / coaching 层 自家 Lambda + Neon 自家 orchestration on AWS
数据库 Neon Postgres + DynamoDB 不公开
总规模 待 scale 73K calls/月(2024 AWS case study)

关键 takeaway: 1. 我们 STT 选型(Deepgram)比他们(Amazon Transcribe)在电话场景上更专业 — 这是 marketing 可以打的牌 2. 我们 LLM(直接调 Kimi/Claude)比他们(走 Bedrock)latency 少一层 — 但他们 Bedrock 给企业合规背书 3. 两边都有 carrier lock-in — 我们锁 RingCentral,他们锁 Twilio。这条对比是 symmetric 的,不是单边优势(narrative 修正过的,跟之前文档一致) 4. Zenoti 公开 0 vendor,我们如果反过来公开技术栈,可以dev-friendly 牌 — 透明度本身是 differentiation


Update Log

  • v1 (2026-05-05): 初版。§1 Zenoti 6 件详细版(Z1-Z6,每个 200-400 字 + 截图描述 + 字段映射 + 注意事项)。§2 Keepme 6 件详细版(K1-K6,同结构)。§3 开源资源 4 个怎么用。§4 附录:Zenoti 真技术栈解码(HyperConnect = Twilio,Zenoti CI = Amazon Transcribe + Bedrock)。
  • 未来 update:Phase 0 5-owner concierge MVP 跑完后 update K3 / K4(基于真实反馈)。第一个 paying customer onboarding 完成后 update K6(把假设 "10 days" 换成真实数字)。