Retaintive

    Zenoti + Keepme 借鉴详情

    用途: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.aiSuggestedAction 或 prompt_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.primaryOutcomeReasoning 或 calls.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 ...(用 review_category 已有字段)
    • Impacted Revenue → tasks.assumed_value SUM 按 close_result 加权

    注意事项:

    • ❌ 不要超过 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):

    维度RingCentralHyperConnect
    是什么完整 UCaaS 产品(独立的电话公司)Zenoti 的内嵌 softphone + AI 通话功能模块
    客户用法独立产品,客户单独买必须订阅 Zenoti 才能用
    电话号码RingCentral 自己分配 / port-in必须用 Twilio 号("Only Twilio numbers on HyperConnect are supported")
    底层 carrierRingCentral 自家 + 多 telcoTwilio(verified)
    是否独立产品可以,完全独立不可以,Zenoti 的一个 module
    SoftphoneRingCentral 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
    SoftphoneRingCentral appZenoti 自家 HyperConnect softphone我们不自建
    录音存储RingCentral API → S3Twilio 录音 → AWS S3类似
    Speech-to-Text(STT)DeepgramAmazon TranscribeDeepgram 在电话音频领域行业更优,我们这层选型其实更精
    LLM 分析Kimi K2 / Claude(直接 API)Amazon Bedrock(model 不公开,可能也是 Claude)我们 latency 少一层
    AI agent / coaching 层自家 Lambda + Neon自家 orchestration on AWS
    数据库Neon Postgres + DynamoDB不公开
    总规模待 scale73K 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" 换成真实数字)。