AI 时代的产品体验架构与研发效能跃迁

多产品矩阵的共同瓶颈

中心正从单点科研突破走向多产品商业化出海。每条产品线都在独立解决前端与体验问题 —— 这是“烟囱式”结构的必然结果，不是哪个团队做得不好。

Design-to-Code 工作流革命

告别传统“画图 → 切图 → 返工”瀑布流，对齐硅谷一流 AI 团队（Anthropic / OpenAI）的 Design Engineering 模式。

设计输出不再是图纸，而是能上线的代码

以 HKMeeting 客户端下载页为例 —— 同一套流程，可以直接复用到各产品线。

hkmeeting-download.vercel.app/free.html

Vercel 实时预览

hkmeeting-download.vercel.app

Git 仓库 · 研发 clone 即用

hkmeeting-download/
├─ index.html        正式版
├─ free.html         限免推广版
├─ tutorial-free.mp4
├─ logo.png · logo-icon.png
├─ README.md         交接说明
└─ explorations/     淘汰方案

代码包里有什么

• 响应式，375 – 1440px 实测无溢出
• 滚动揭示、鼠标跟随声波等微动效
• 繁中 / EN 双语一键切换
• 零依赖 HTML / CSS / JS，研发直接接

首页：从宣传页，变成打开就能干活的工作台

重构前

旧版 Web · 首页

123

1. 1首屏是营销口号，不是工作台
2. 2三个入口只有功能名，没有状态、没有上下文
3. 3看不到任何一场会议 —— 不知道上次的会议处理好了没

重构后

新版 Web · 首页

123

1. 1开始前就确认麦克风、系统音频、线上 / 线下
2. 2最近会议带处理状态：失败可重试、处理中、已完成
3. 3右侧 AI Chat + 本周行动项，打开就能接着干

会议详情：从一篇长文，到能直接用的结论与行动项

重构前

旧版 Web · 会议纪要

123

1. 1纪要是一整篇长文，结论和待办埋在段落里
2. 2「编辑 & 问答」面板大片空白
3. 3转录藏在另一个 Tab，没法对照原话

重构后

新版 Web · 会议详情

123

1. 1概览 + 章节，时间戳点一下就跳转
2. 2决策、行动项独立成块，带负责人和日期
3. 3纪要与转录同屏，逐句可编辑、可复制

上传：把用户需要知道的，放在提交之前

重构前

旧版 Web · 上传

123

1. 1只有文件名和大小，看不出还要传多久
2. 2备注框占了半屏，真正要确认的信息却没有
3. 3「提交」前没有任何说明，点下去才知道结果

重构后

新版 Web · 上传

123

1. 1进度、剩余时间、替换 / 移除一目了然
2. 2标题自动取自文件名，少填一步
3. 3底部写明上传完才开始 · 消耗 48 credits

App：和 Web 同一套逻辑，装进口袋

纪要 / 转录、播放器、行动项在两端位置一致 —— 用户在电脑上学会的，拿起手机不用再学一遍。

Agent：不另起炉灶，在同一套 UI 里长出新能力

现状

旧版 Web · Office 助手

123

1. 1「Q&A / Office」切换藏在页面顶部，侧栏仍是会议那一套
2. 2另起「iPollo」品牌，同一屏标题重复两次 —— 和 HKMeeting 割裂
3. 3输入框沉在底部，和上方的建议卡片脱节
4. →每加一个能力就多一个 Tab，结构撑不住后续扩展

设计方案

HKMeeting Agent · 首页

123

1. 1整体性：侧栏顶部「Meetings | Agent」一键切换，同一账号、同一额度、同一套组件
2. 2延展性：任务、定时、模板、集成直接挂进同一个侧栏，加能力不用改骨架
3. 3先选会议、再下指令 —— Agent 从你的会议出发，产出 Deck、纪要、邮件