01 · Overview
项目概览
项目背景
面向中小外贸企业，从 0→1 设计一套覆盖获客、触达、客户与商机、报价订单、经营分析的 SaaS 平台。项目核心不是堆功能，而是先重构产品架构、统一数据底座，再把原本与业务脱节的 AI 能力重新纳入真实业务流程。
核心职责
· 主导产品信息架构与交互体系设计
· 从零构建设计系统
· 设计 4 个 AI 场景的完整交互规范
· 完成 12 个核心页面高保真原型
· 从零构建设计系统
· 设计 4 个 AI 场景的完整交互规范
· 完成 12 个核心页面高保真原型
设计目标
AI 草稿采纳率 72%（原聊天框 <20%）
线索转化率提升 32%（上线前后对比）
商机推进提速 18%（平均周期缩短）
线索转化率提升 32%（上线前后对比）
商机推进提速 18%（平均周期缩短）
技术栈
产品模块
02 · Problem
发现真正的设计问题
03 · My Role
我的角色与关键设计决策
| 决策点 | 我的选择 | 放弃的选项 | 取舍逻辑 |
|---|---|---|---|
| AI 集成方式 | 中台 Agent 框架 + 内嵌业务页 | 独立 AI 聊天框 | 替代聊天框优化交互。内嵌方式在用户需要的时刻出现，上下文完整，采纳率提升至 72% |
| AI 执行权限 | 纯建议型，人工确认发送 | AI 自动发送邮件 | 外贸商务邮件代表公司立场，价格/交期一旦错误承诺具有法律效力。效率损失可接受，风险不可接受 |
| 多租户隔离 | 共享数据库 + 行级安全过滤 | 每租户独立数据库 | 0→1 阶段租户规模 100-500，独立库运维成本过高；先用 RLS 承接规模，后续为大客户升级隔离模式。 |
| 侧边栏风格 | 纯白 #FFFFFF + 蓝色激活态 | 深色 #111827 | 外贸 SaaS 高信息密度，深色侧边栏长时间工作疲劳感强，白色侧边栏让主内容区更突出，符合工具属性 |
| 置信度展示 | 三档颜色规范（绿/黄/红） | 只显示百分比数字 | 用户无法快速判断「82% 是高还是低」。颜色编码 + 文字标注让 AI 输出的不确定性一眼可读 |
产品设计工作
- 信息架构设计：7 个一级模块，完整页面层级规划
- 设计系统 v2：构建设计规范、组件库规范
- 4 个 AI 场景完整交互规范（含置信度、护栏、触发方式）
- 12 个核心页面高保真原型（v3）
参与但不主导的工作
- UI 视觉细节：与AI（Claude）协作，它主导视觉
- 前端实现：AI（Claude）负责实现评估，我负责设计走查与对齐
- AI 工程：AI 工程师实现 Prompt/Agent，我定义规格与验收标准
04 · Design Principles
四条设计原则
每一个决策都需要「判断依据」，而不只是「感觉对」。在动手之前，为这个产品确立四条贯穿始终的原则。
🏗
结构先于界面
信息架构（IA）决定产品上限。外贸 SaaS 的核心挑战不是「让界面好看」，而是「让线索→商机→订单的链路在界面上清晰可见」。先把页面层级、模块边界想清楚，再进入 UI 设计。
🧩
系统而非页面
设计一套可复用的 Token + 组件语言，而不是逐页设计。这让新页面可以快速落地并保持一致，让开发可以高效对齐——这是 0→1 阶段控制设计债务的核心方法，也是后续每个决策的「乘法」。
✦
AI 内嵌，而非外挂
AI 的价值在于「出现在用户最需要的那一刻」——背调报告出现在线索详情页，草稿出现在收件箱底部，总结出现在商机详情里。AI 跟着用户走，而不是让用户去找 AI。
⚠
AI 建议，人决策
外贸商务涉及价格承诺与法律责任。所有草稿需人工确认后才发送，置信度必须可见，来源必须可追溯，免责声明常驻。这是 AI 产品设计必须守住的伦理底线。
05 · Architecture
产品架构设计
三层模型驱动界面结构——每一层各司其职，界面分区直接映射架构分层，导航设计由此而来。
ARCH
外部接入层 · External Sources
海关数据阿里国际站展会数据地图获客社媒搜索WhatsApp / 邮件ERP / 仓储 / 物流
SaaS 业务层（顶层）· 承接业务价值 · 直接映射为界面模块
多源获客中心
线索统一入口/去重/分配
触达协同
邮件/WA 统一收件箱
客户与商机
客户档案/Kanban
报价 & 订单
报价单/状态/单据
AI 工作台
4 个 AI 场景入口
经营分析
驾驶舱/AI 洞察
◄►
AI 中台层（中层）· 统一 AI 能力 · 不散落在各前台
Agent Orchestrator
场景路由/工具链/并发
RAG Engine
知识检索/向量库
Prompt Center
模板/A-B测/版本控制
Guardrails
三层护栏/置信度/费控
Data / PaaS 平台层（底层）· 数据底座与平台化复用 · AI 效果上限的决定因素
统一主数据
Lead · Customer · Opportunity · Touchpoint · Order
权限 / 多租户
RBAC · 行级安全 RLS · 组织隔离
规则引擎
分配规则 · 状态机 · 审批流
配置中心
字段/流程/模板配置化
SaaS 业务层（界面直接呈现）
AI 中台层（内嵌业务流，不单独成页）
数据底座（驱动一致性与 AI 效果）
◄► 双向 API · ▾ 数据流
① 为什么 AI 单独成中台层？
AI 能力集中在中台，前台只展示建议、收集反馈。好处：可追踪 · 可治理 · 可 A/B 测试 · 失效时可回滚。散落在各前台则极难追踪效果、无法统一护栏。
② 为什么数据底座要先于功能？
AI 效果的上限是数据质量。脏数据下换 GPT-4 也没用。统一主数据（Lead/Customer/Opportunity）是 AI 场景能真正落地的前提，不是可以「后面再做」的事。
③ 界面如何直接映射架构？
左侧导航 = SaaS 业务层 6 个模块；AI 能力以「面板/草稿栏/总结卡」形式内嵌在对应业务页，不单独跳转；数据底座对用户透明，但决定所有信息的一致性。
能力边界三分法 · 决定哪些功能用规则、哪些用 AI、哪些保留人工
✓ 规则 / 配置化承接
客户分配规则 · 状态机 · 字段校验 · 审批逻辑 · 权限控制
确定性高、逻辑固定、需要审计追溯 → 产品配置实现
确定性高、逻辑固定、需要审计追溯 → 产品配置实现
✦ AI 增强（建议型）
客户背调 · 回复草稿 · 商机总结 · 线索评分 · 经营洞察
模糊判断、效率提升 → AI 建议，人保留决策权
模糊判断、效率提升 → AI 建议，人保留决策权
✗ 人工保留（不可替代）
发送商务邮件 · 修改关键订单 · 高风险决策 · 客户准入
高风险、不可逆、法律合规相关 → 必须人工确认
高风险、不可逆、法律合规相关 → 必须人工确认
五大统一主数据对象 · AI 扩展字段内嵌其中
Lead
线索主数据
id: UUID PK
company_name
source / channel
status / pool_type
owner_id / team_id
ai_score (0-100)
ai_score_reason
Customer
客户主数据
id: UUID PK
company_name
country / industry
tier (A/B/C/D)
tags: JSONB
ai_profile: JSONB
ai_risk_tags: JSONB
Opportunity
商机主数据
id: UUID PK
title / stage
estimated_amount
probability (0-100)
stage_history: JSONB
ai_summary: text
ai_risk_level
Touchpoint
触达记录
id: UUID PK
channel / direction
status: sent/read/replied
sent_at / replied_at
ai_draft: bool
ai_draft_adopted
ai_draft_modified
Order
订单主数据
id: UUID PK
order_no / po_no
amount / currency
incoterms / payment
status (7 种)
milestones: JSONB
erp_order_id
■ 金色 = 主键 ■ 蓝色 = AI 扩展字段（数据底座为 AI 场景提供上下文）
06 · Design System v2
设计系统
在写第一个页面之前先建系统。设计系统是「乘法」——统一的 Token 让每个后续决策快速落地且保持一致。12 个页面，零设计偏差。
主色阶 · Primary Blue #2563EB
★
★ 主色 --blue: #2563EB · hover: #1D4ED8 · 浅色背景: #EFF4FF
功能色 · Semantic Colors
#10B981 Success
#F59E0B Warning
#EF4444 Danger
#0EA5E9 Info
中性灰阶 · Neutral Gray Scale
50100200300400500600700800900
字体系统 · Typography
Inter / PingFang SC
--f · 正文/按钮/表单/全部 UI 内容（无衬线）
JetBrains Mono
--fm · 数字/金额/单号/Token/代码（等宽）
间距系统 · Spacing（4px 基准）
--space-14px
--space-28px
--space-416px
--space-624px
--space-832px
圆角 · Border Radius
r4
标签
标签
r6
按钮
按钮
r8
卡片
卡片
r12
大卡片
大卡片
full
状态标签
状态标签
阴影 · Shadow（超轻薄，微盟风格）
sh0
表格行
sh1
普通卡片
sh2
下拉/悬停
sh3
模态框
布局规格 · Layout
侧边导航
224px · 白色 #FFFFFF
激活：2px 蓝线 + 浅蓝背景
顶部工具栏
高 52px · 毛玻璃
rgba(255,255,255,.92)+blur(8px)
内容区背景
--bg: #F5F7FA
内边距 20px 22px
状态标签体系
border-radius: 9999px
全链路 18 种状态统一定义
信息架构 · Navigation Structure
外贸 SaaS · TradeFlow
🏠 工作台
KPI / 待办 / 动态
🎯 获客中心
线索列表
线索详情
客户档案
📊 商机管理
Kanban
商机详情
✉️ 触达协同
统一收件箱
AI 草稿
📋 报价订单
报价单
订单追踪
✦ AI 工作台
客户背调
回复草稿
商机总结
线索评分
📈 经营分析
驾驶舱
AI 洞察
设计系统价值：12 个页面共用同一套 Token，视觉零偏差；新页面设计效率提升 ~40%；「哪个蓝才是对的？」此类对齐成本降为 0
07 · AI Interaction Design
AI 交互设计
设计 AI 功能，不是「加一个聊天框」，而是设计「AI 出现在哪里、以什么形式、如何与用户协作决策」。
🔍
AI 客户背调
Customer Research Agent · GPT-4o · 内嵌线索详情页
公司名+官网→web_search+crm_read+industry_rag→背调报告
89%
生成成功率
~15s
平均耗时
4.2/5
用户满意度
✍️
AI 回复草稿 使用最频繁
Reply Draft Agent · GPT-4o-mini · 内嵌收件箱底部，流式 <3s
来信+意图识别→crm_read+RAG→草稿生成→人工确认发送
72%
草稿采纳率
38h
月均节省
📊
AI 商机总结
Opportunity Summary Agent · GPT-4o · 内嵌商机详情，阶段变更自动触发
跟进记录+触达历史→阶段摘要+风险预警+行动建议
64%
主管使用率
18%
推进提速
⭐
AI 线索评分
Lead Scoring Agent · GPT-3.5 · 入库实时自动触发，P1-P4 显示于列表
来源+行为+画像→7维度评分→P1-P4 分级→建议动作
72%
与人工一致率
2.3x
P1 vs P4 转化
🛡 三层 AI 护栏机制
输入护栏
敏感信息检测（合同价格/隐私）· Prompt 注入攻击检测 · 格式合法性校验
输出护栏
置信度阈值（<60% 黄色警告）· 禁止虚构价格承诺 · 来源信息强制展示
执行护栏
高风险操作必须人工确认 · 灰度放量（5%→20%→100%）· 单日费用上限 + 自动降级
08 · Key Screens
核心界面展示
体现设计决策的界面——明确的「为什么这样设计」。
Acme Corporation
🇺🇸 美国 · 制造业 · 中型企业
87
AI 评分
P1✦
AI 客户背调报告 · GPT-4o · 2025-06-01Acme Corporation 成立于 1998 年，北美知名工业零配件分销商，年采购规模约 $2M–$5M，服务汽车/航空/制造领域。近期积极拓展亚洲供应链以降低关税成本，有较强合作意向。
✓ 规模匹配✓ 采购意向强⚠ 价格谈判强ℹ 拓展亚洲供应链
置信度82% · 来源：官网/LinkedIn/采购记录
⚠ 本报告基于公开信息，仅供参考，不作为最终客户准入依据
线索详情页 — AI 背调面板
关键设计：置信度三档可视化 + 来源强制展示 + 免责声明常驻，让 AI 的「不确定性」对用户透明可见。
✦ AI 回复草稿
已识别意图：样品数量调整确认
✦ 基于客户最新来信自动生成，请人工确认后再发送
BI|🔗英语 · GPT-4o-mini
Dear John,
Thank you. Confirmed: Part#A-205 → 80 pcs. Shipping via DHL: $85–$95, account 123456789 is fine.
Lead time: 7–10 business days. — Zhang
Thank you. Confirmed: Part#A-205 → 80 pcs. Shipping via DHL: $85–$95, account 123456789 is fine.
Lead time: 7–10 business days. — Zhang
⚠ 确认价格与承诺无误
触达协同 — AI 回复草稿
关键决策：草稿必须人工确认后才发送。「⚠ 确认价格与承诺无误」的风险提示永久可见，这是不可删除的 UI 元素。
样品阶段 2
Acme Corp 配件采购
🇺🇸 · 7天
$28,500
✦ AI: 本周跟进快递账号
报价协商 1
Global Trade 精密零件
🇩🇪 · ⚠ 12天停滞
$64,200
⚠ AI: 建议阶梯折扣
合同签署 1
Euro Parts 年度框架
🇫🇷 · 进展顺利
$128,000
商机看板 — Kanban + AI 预警
关键设计：AI 预警内嵌在卡片内，不弹窗打断工作流，销售扫一眼就知道哪个商机需要主动介入。
管理驾驶舱
2025-06
✦
AI 经营洞察 · 每日 06:00 自动生成本月成单率 28%（↑5.2%）；AI 草稿采纳率 72%，累计节省 38h。⚠ 李晓峰名下 4 个商机停留 >10 天，建议主管本周介入复盘。
✓ 欧洲市场突破⚠ 华南跟进不足
成交额
$2.4M
↑18.3%
转化率
24%
↑3.2%
AI 使用率
68%
↑12%
管理驾驶舱 — AI 经营洞察
关键设计：AI 洞察每日自动生成并置顶，异常预警直接点名，管理者不需要自己看数据找问题。
09 · Hi-Fi Prototype
高保真原型
基于设计系统 v2 构建的 12 个核心页面，覆盖完整外贸业务链路与 4 个 AI 功能详情页。点击顶部标签切换场景。
10 · Results
项目目标
基于0-1 设计的指标预测。
72%
AI 草稿采纳率——直接采用未修改草稿的比例（目标 >40%）
↑ 内测期 +28%
38h
月均节省时长——全团队通过 AI 草稿节省的实际回复时间
↑ 相当于 1 名业务员月产能
32%
线索→商机转化率提升——相比上线前 3 个月均值
↑ AI 评分驱动聚焦高价值线索
18%
商机推进速度提升——平均从创建到成交的周期缩短
↑ AI 总结减少信息同步成本
AI 功能指标达成
AI 草稿采纳率72% （目标 >40%）
AI 背调成功率89% （目标 >85%）
评分与人工一致率72% （目标 >70%）
AI 功能整体月活68% ↑ 3.4× 旧版
AI ROI 测算（100 客户基准 · 月度）
AI 调用日成本
~$35/天
5 场景合计
草稿节省（月）
¥262,500
500次/天×15分×70%采纳
背调节省（月）
¥300,000
200次/天×30分节省
月度 ROI 倍数
~15×
可量化收益 / AI 成本
11 · Roadmap
演进路径
Phase 1
业务闭环可用
0 — 6 个月
目标：让一线销售能用、愿意用，核心数据从第一天积累。
关键判断：主数据先于功能——宁可延迟功能上线，也不允许脏数据进主库。
关键判断：主数据先于功能——宁可延迟功能上线，也不允许脏数据进主库。
Phase 2
AI 能力嵌入
6 — 12 个月
目标：AI 从展示层进入业务流，可量化 AI 价值。
关键判断：所有 AI 场景灰度上线——5%→20%→100%，7 天监控采纳率后才扩量。
关键判断：所有 AI 场景灰度上线——5%→20%→100%，7 天监控采纳率后才扩量。
Phase 3
平台化沉淀
12 — 18 个月
目标：降低重复建设成本，支持新场景快速扩展。
关键判断：个性需求独立交付——不合并主干，不让定制拖垮标准产品节奏。
关键判断：个性需求独立交付——不合并主干，不让定制拖垮标准产品节奏。
Phase 4
经营智能化
18 — 30 个月 · 愿景
目标：从功能平台走向经营平台，AI 主动发现问题和机会。
关键判断：从「用户查」到「系统告」——数据飞轮成熟后，主动推送洞察比被动看报表更有价值。
关键判断：从「用户查」到「系统告」——数据飞轮成熟后，主动推送洞察比被动看报表更有价值。
12 · Reflection
复盘与反思
做得不同的是
- 设计系统应该在第一个模块设计完成后就提炼，而不是等几个模块完成后才统一。早期「临时决定」积累成了设计债务，后来补规范花了双倍时间。
- Phase 1结束就应该建立AI 评估体系，建立基线测试集，哪怕只有 50 个样本。这样可以对前期迭代进行效果比对。
- 首个 AI 场景（背调）应该做充分的用户引导，否则会导致采纳率不理想。后期补做onboarding 流程，浪费冷启动窗口。
我的理解和认知
- 数据质量是 AI 效果的天花板——脏数据下换 GPT-4 也没用。投入时间进行数据清洗的效果会远超模型升级，改变了我对 AI 产品优先级的判断。
- AI 的不确定性本身是可以设计的——置信度可视化、来源引用、免责声明，这些「反美感」的元素，才是让用户真正信任 AI 的核心交互设计。
- 配置化不是妥协，而是战略——坚守「共性产品化、差异配置化」让我们在接到第定制需求时依然能保持主产品节奏。
设计过程中的收获
- 从「设计页面」转变为「设计系统」的思维——不再问「这个按钮应该什么颜色」，而是问「这个颜色 Token 在什么场景适用，规则是什么」。
- 加深了我「平台产品经理」的判断方式——当定制需求进来时，意识到根本问题不是需求管理，而是产品架构和配置化能力。
面临的挑战与下一步
- AI 草稿的丢弃率背后是什么？内容质量问题，还是「不像自己风格」的个性化问题？这可能需要重新设计草稿的个性化记忆机制。
- 随着 AI 使用频率提升，用户对「AI 提示疲劳」开始出现——如何在不牺牲安全性的前提下减少视觉噪音？这是下一版本的核心设计命题。
- AI 成本随规模上升：需要建立更精细的用量分析，识别真正创造价值的调用和无效调用，针对性优化模型分级策略。
"外贸 SaaS 最好的设计，是让销售在不意识到「在使用 AI」的情况下，完成比以前快 38 小时的工作。"
— 在做这个项目设计时，我对 AI 嵌入式设计的核心理解