# Claude Design 提示词 — PAC 演示页面(客服任务详情)

> 这份提示词丢给 Claude design 让它产出演示页面设计稿(面向管委会)。
> 它能读项目,所以把关键文档 / schema 入口列出来,让它自己消化。

---

## 任务一句话

为 PAC 设计一个**客服视角的召回任务 One-Page Summary 演示页面**,面向集团管委会评审,要在一屏内说清"为什么打这个患者 + 怎么打"。

---

## 项目背景(必读这几份)

按以下顺序读,5 分钟即可建立坐标系:

1. **`docs/pac-goal-alignment.md`** — PAC v1 定位:治疗链外的人工召回引擎(automated_followup vs manual_recall 区分 + 治疗链 5 阶段)
2. **`docs/three-layer-model.md`** — 三层模型:patient_facts → persona → followup_plan(单向数据流 + 证据链)
3. **`docs/scenarios/README.md`** + **`docs/scenarios/treatment_aftercare_recall.md`** — PAC v1 主战场召回算法 + 4 个子场景(根管未戴冠 / 正畸保持期 / 种植年度复查 / 牙周维护)
4. **`docs/design-system.md`** — 已定的设计基调(配色 / 字体 / 信息密度纪律 / 组件清单)
5. **`apps/pac-service/prisma/schema.prisma`** — 真理源,重点看:`FollowupPlan` / `PlanReason` / `PlanScript` / `PlanSummary` / `PlanExecution` / `Persona` / `PersonaFeature` / `Patient` 这 8 个 model

---

## 本页定位

- **使用者**:客服(staff 角色)— 已经被分配了这个召回任务(`FollowupPlan.status = 'assigned'`, `assignee_user_id = <当前客服>`)
- **形态**:**One-Page Summary** — 客服打电话前快读,一屏掌握"打谁 / 为什么 / 怎么打 / 打完怎么记"
- **不是**:列表 / Dashboard / 配置 / 报表
- **核心问题**:页面要直接回答两件事 —
  1. **为什么召回这个患者**(说服客服,这通电话值得打)
  2. **怎么操作**(拨号 / 看话术 / 跳宿主档案 / 回写结果)

---

## 必须包含的内容(信息分层,不规定具体布局)

### 焦点层(永远可见,不折叠)

- 患者身份(姓名脱敏 + 性别 + 年龄 + VIP/普通标签)
- 召回理由摘要(scenario + 一句话 reason,如"种植 11 个月未做年度复查,医嘱要求 1 年内 CBCT")
- 当前召回目标(本次想拉患者回来做什么 — 取自 plan 上下文)
- 优先级表达(渐变条,不直显分数)
- **治疗链可视化区**(下文单独说,这是核心差异化)
- 主 CTA(拨打 / 话术 / 跳档案)+ 执行回写入口

### 次级层(折叠 / 抽屉 / Tab)

- AI 生成的 One-Page Summary 全文(`plan_summaries.summary_type = 'one_page'`)
- 病历摘要 / 治疗链概览(`plan_summaries.summary_type = 'medical_record' / 'treatment_chain'`)
- 话术全文(`plan_scripts`,Markdown,含开场 / 跟进 / 异议处理多子段)
- Persona features(VIP 价值 / 触达活跃度 / 沟通偏好等)
- AI 产物**生成时间**(唯一对客服暴露的元数据)

### 隐藏层(客服看不到)

- `evidence.factIds` 原始证据 ID
- `agent_invocations` 调用账本 / token / cost
- `patient_transactions` rawPayload
- fact / persona / plan 版本历史

---

## 治疗链可视化(核心差异化,要重点设计)

这是 PAC 跟其他召回工具的视觉差异化点,**要做好**。

### 业务约束(必须遵守)

- 一个患者**可能有多条治疗链**(种植链 / 正畸链 / 牙周维护链 ... 互不干扰)
- 每条链对应**已发生**的治疗历史,锚定治疗链 5 阶段(发现机会 → 进入 → 执行 → 术后管理 → 闭环)
  — 5 阶段定义见 `docs/pac-goal-alignment.md` §0
- **不要展示"未来推演"**(治疗链是历史 + 现状,不预测)
- **顶部可标注当前召回目标**(本次召回想触达哪条链的哪个节点)

### 设计自由

- 横向 / 纵向 / 卡片堆叠都可以,你选最合适的
- 多链怎么并列展示,你设计
- 链上节点的视觉语言(实心 / 空心 / 间隔标月数 / 断点高亮)你定
- 这一区可以占页面较大面积,管委会会盯着看

### 不要做的事

- 不要做成 EMR 病历时间轴(信息密度爆炸)
- 不要展示原始 transaction 流水
- 不要做成甘特图(太工程)

---

## 演示场景(自己挑一个最有说服力的患者)

PAC v1 主战场是 `treatment_aftercare_recall`,4 个子场景:

| # | 子场景 | 时间窗 |
|---|---|---|
| 1 | 根管未戴冠 | 30 天-18 个月 |
| 2 | 正畸保持期未回诊 | 6-24 个月 |
| 3 | 种植年度复查 | 330-540 天 |
| 4 | 牙周维护期 | 150-360 天 |

挑一个**故事完整、临床价值高、客服动作清晰**的场景作为演示主案例。如果患者历史上有多条治疗链(例如做过种植 + 正在做正畸),更好,可以展示多链并列。

患者数据自己编(合理脱敏:`张先生` / `138****1234`),金额数值用真实区间(种植 ¥15k-25k / 正畸 ¥30k-50k / 根管 ¥1k-3k)。

---

## 已定的设计基调(不要破坏)

读 `docs/design-system.md`,重点:

- 主色 **teal-600** `#0D9488`,辅助 **indigo-500**;状态色 emerald/amber/rose/sky
- 中性灰阶 **shadcn slate** 不动
- 字体 **PingFang SC** + system font 链(不引外部字体)
- 数字 **`tabular-nums`** 等宽
- 圆角 **8px** base,卡片 `rounded-lg`,chip `rounded-full`
- 阴影 `shadow-sm` 默认 / hover `shadow-md`,**禁重阴影**
- Motion ease-out 150ms,**禁 bounce / 大幅 scale**
- 触控目标最小 **44×44px**
- 中文优先 + 移动优先

---

## 输出要求

1. **完整页面**(mobile 视口 375px 起,sm/md/lg 渐进增强)— 实现成可运行的 Next.js page 在 `apps/pac-web/src/app/` 下
2. **演示数据写死在前端 mock**(不接后端,管委会演示不需要真数据)
3. **可点击的交互骨架**:CTA 弹 outcome 表单 / 抽屉展开次级信息 / 折叠区可开合
4. **配色与组件遵循 shadcn/ui + Tailwind 4 token**,新增组件放 `src/components/`,可复用单元尽量抽出
5. **不引外部资源**(图标用 lucide-react,字体走系统)

---

## 关键决策提醒

- 焦点层只放决策必需信息,其余收抽屉 / 折叠
- 治疗链可视化是亮点,值得多花时间
- 客服角度思考:打这通电话前 30 秒,他需要看到什么
- 别堆功能,**演示页面赢在叙事清晰,不在功能多**
