项目背景
背景与目标
Pisell 是澳洲多渠道商业 SaaS 平台，服务预约制服务业、零售、演出票务和会员制商家。Pisell One 是为商业管理者设计的 AI 运营工作台 — 将散落的后台模块整合进一个可主动预警、可快速处置的统一工作区。
01
经营总览
30 天营收、履约率、AI 加购命中率、风险预警；每日 AI 晨报；机会看板；风险 Watchlist。
02
统一工作台
7 个业务模块标签页，统一搜索筛选，左列表 + 中详情 + 右 AI Sidecar，支持备注持久化。
03
深色指挥舱
实时告警队列、房间负载监控、模块级同步控制、事件流日志 — 一键处理告警处置。
04
客户 360
高价值 / 成长 / 流失风险 / 新客四维分群；旅程视图；AI 回访脚本生成。
🎯 核心设计目标
将原本分散的「数据后台」和「运营后台」合并为一套界面 — 管理者不再需要在多个系统之间切换。所有业务数据、动作入口和 AI 建议都在一个屏幕上可见、可操作、可追踪。设计原则：用清晰的分区层级和 AI Copilot 上下文感知能力，实现高信息密度下的低认知负担。
AI 能力设计
AI Copilot 能力设计
AI Copilot 以常驻右侧 Sidecar 的形式贯穿整个工作台 — 根据当前模块和选中对象动态生成上下文相关建议，而不只是一个通用聊天框。
记录摘要
每当选中一条预约、顾客或支付记录，Copilot 即时生成关键信息摘要、行为历史和风险信号 — 让管理者在 3 秒内获得全局视图。
风险优先级排序
根据当前告警队列和业务数据，AI 自动评分并排序风险项 — 优先呈现最紧急问题，确保没有遗漏。
回访话术生成
在客户 360 视图中，根据顾客层级（沉默 / 成长 / 高价值）和旅程状态生成话术 — 可直接复制或在行内编辑后发出。
同步状态播报
在指挥舱模式下，Copilot 实时播报各模块同步状态，提供根因分析和恢复建议 — 无需手动翻查日志。
核心设计决策
设计决策
01
亮色工作台 + 深色指挥舱
日常运营使用亮色主题（清晰、高效、长时间使用不疲惫）；实时监控切换为深色指挥舱（高对比告警、雷达感紧迫性）。两套主题对应两种截然不同的操作节奏。
02
三列布局 · 上下文 AI
左侧列表（数据索引）+ 中间详情（操作舞台）+ 右侧 AI Sidecar（上下文建议）。AI 能力内嵌进工作流 — 不是额外入口 — 建议在需要时正好出现。
03
信息密度 vs 认知负担
任何运营 Dashboard 的核心挑战是在显示大量信息的同时不造成混乱。清晰的区域分割、字体层级、徽章系统和渐进式展开，在高数据密度下维持界面的有序感。
设计过程
如何完成这个项目
从零到一打造 Pisell One — 从产品逻辑出发，用 AI 辅助完成设计到交付全链路，最终产出完整可运行的交互原型。
STEP 01
需求拆解
与 Claude 协作拆解 Pisell 多渠道产品逻辑，定义核心用户（运营管理者、值班人员），确定 4 大核心场景优先级。
STEP 02
信息架构
设计 4 层导航结构（总览 / 工作台 / 指挥舱 / 客户 360），定义三列布局框架和 AI Sidecar 入口策略。
STEP 03
视觉设计
在 Figma 中完成亮色工作台和深色指挥舱的视觉规范，定义 Token 系统、徽章系统和状态色板。
STEP 04
Vibe Coding
Cursor 辅助将设计稿转化为自包含静态 Demo，内嵌完整演示数据、模拟同步和 AI Copilot 逻辑。
STEP 05
交付 & 演示
打包为自包含静态站点 — 无外部依赖，完全在浏览器内运行，可随时随地部署。
技术实现
技术栈
目标是打造完整可运行的静态 Demo — 无构建工具，纯 HTML/CSS/JS 实现完整 SaaS 级交互体验。
🖼️
HTML / CSS
CSS 变量驱动双主题；Flexbox + Grid 支撑三列自适应布局；CSS Transition 处理所有状态动效。
⚡
Vanilla JS
模块级状态机；搜索 / 筛选 / 排序；模拟实时同步；LocalStorage 备注持久化；Copilot 上下文生成。
📦
自包含
所有演示数据内联在 data.js，零外部 API 请求，零 CDN 依赖 — 双击即可在任何环境打开运行。
🤖
AI 工具链
Claude 负责需求分析和 IA；Cursor + GPT-4o 负责组件代码生成；Figma AI 加速视觉产出。
项目成果
成果数据
从零到可运行原型的完整端到端交付，覆盖 Pisell SaaS 平台的核心运营场景，验证了 AI Copilot 在 B2B SaaS 中整合落地的具体路径。
4
核心视图场景
7
业务模块统一
2
主题模式（亮 / 暗）
1
完整运营工作台 Demo
LIVE DEMO
在线体验 · Pisell One 可交互演示
以下为完整可交互 Demo，支持亮 / 暗主题切换、场景切换、模块搜索筛选、AI Copilot 对话、备注持久化。自包含无外部依赖，可直接体验完整的运营工作台交互流程。
