> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt. # 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) — 不能只收集不用 *** ### Z5. AI Agent Cards Gallery 模式 **他们的页面长什么样**(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](mailto: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](mailto: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): | 维度 | 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"_ 换成真实数字)。