案例摘要
为公关传媒公司启传按其产品文档交付的 AI 搜索产品“启传 GEO”前端：首页搜索、带引用来源的对话页、分享页、登录注册、设置与会员页，桌面、平板、手机三端适配。首页 Lighthouse 性能、无障碍、最佳实践三项均为 100 分。
- 客户
- 启传（公关传媒）
- 交付范围
- 7 个页面的可点击 UI 与验收记录
- 技术
- FastAPI、Jinja2、原生 JavaScript
- 说明
- 检索与大模型后端不在本期范围
100
Lighthouse 性能、无障碍、最佳实践得分
1.22s
首页最大内容绘制（LCP），CLS 为 0
21
张三端原型图：7 个页面 × 3 种尺寸
背景与挑战
客户规划一款生成式搜索产品，需要先把交互和视觉做实，用于内部评审和融资演示。AI 搜索的界面难点在于：答案和来源要能互相对照，用户能快速判断可信度。
解决方案
- 答案与证据并排：正文中的引用编号与右侧来源卡片一一对应，来源标注可信等级与日期。
- 性能优先：服务端模板加原生 JavaScript，不引入大型前端框架。
- 逐项验收：需求追踪矩阵对照产品文档；桌面 77 个、手机 84 个可点击元素完成点击审计。
交付成果
- 7 个页面、21 张三端原型图与 20 项自动化用例交付。
- 首页 Lighthouse 性能、无障碍、最佳实践均为 100，LCP 1.22 秒，CLS 0，TBT 0 毫秒。
技术栈
- FastAPI
- Jinja2
- JavaScript
- Playwright
- Lighthouse