0. 先和大家打个招呼吧 
你好，我是一名产品经理，日常工作中需要处理大量碎片信息——开会记要点、通勤听播客记灵感、看到好文章想收藏、随时冒出产品点子想留住。
做这个 Demo 之前，我以为自己需要一个更强大的笔记 App。但和 TRAE「配合」了一晚上之后，我意识到：我需要的不是又一个笔记工具，而是一个能帮我把「记下来之后的事情」自动做掉的助手。
整个 Demo 从零到可交互，我花了大约 1 小时，分 6 个 Session 跟 TRAE 对话。最让我觉得「原来这么简单」的瞬间是：我只用一句话描述了「点 + 号输入文字，1.5 秒后 AI 自动分类」这个交互，TRAE 就直接给出了完整的可运行代码——包括处理中动画、计分制分类逻辑、toast 反馈。这一步原本我以为需要手写至少半小时的状态管理，结果一句话就跨过去了。
1. Demo 简介
是什么： 灵犀 LYNX 是一款基于 Expo (React Native) 的手机端 AI 智能记录应用。用户通过文字随手记录，AI 自动完成分类、结构化处理、早报规划和复盘，形成完整的效率闭环。本次提交的是一个浏览器内可交互的 HTML Demo（lynx-demo.html），完整还原 APP 的核心体验。
面向谁： 产品经理、高校研究者、自由撰稿人——所有需要在碎片时间里高效捕获和管理信息的人。
主要功能：
功能 01 · 随手记录 + AI 自动分类
- 点右下角「+」弹出输入面板，输入文字后提交
- 卡片先显示「AI 处理中…」脉冲动画，1.5 秒后自动分类完成
- AI 采用计分制分类：每个分类（待办/灵感/知识/收藏）独立计分，最高分胜出，平分时按具体度优先（archive > knowledge > idea > todo）
- 待办自动生成优先级：紧急/马上/今天 → P0，明天+截止动词 → P1，其余 → P2
- 灵感自动提取标签（碎片化/产品/AI/设计/参考等），知识/收藏自动生成 AI 摘要
功能 02 · 四 Tab 完整体验
- 首页：今日待办概览 + AI 早报入口卡片 + 最近记录列表
- 记录：分类筛选（全部/待办/灵感/知识/收藏）+ 搜索 + 完整列表
- 复盘：今日概览数据 + AI 早报全文 + 完成率进度条 + 本周趋势
- 我的：AI 模型配置 + 通知设置 + 隐私策略（100% 本地）
功能 03 · 细节交互
- 待办点击复选框 → 划线 + 打勾 + toast 反馈
- AI 分类完成时卡片有 flash 高亮动画
- 设置页 toggle 开关状态实时同步
- 状态栏时间每 10 秒更新，Esc 键关闭 Modal
产品截图：
- 首页：待办列表 + AI 早报卡片 + 最近记录（见配图 P2）
- 核心交互：快速记录 + AI 分类动画（见配图 P4）
- 设置页：AI 模型配置 + 通知 + 隐私（见配图 P7）
2. Demo 创作思路
灵感来源
我是产品经理，每天通勤路上会在微信、备忘录、Notion 之间切换：听到播客里一句话想引用，打开微信文件传输助手发给自己；会上突然冒出一个产品点子，记在备忘录里；看到一篇好文章，收藏到 Notion。
一周后想找那条灵感，我翻遍了 5 个 App 也找不到。 更要命的是，待办散落在各处经常遗漏，收藏的链接从不回头看，记下的知识点考前还要重新整理。
我盘点了一下：一周产生约 30 条碎片信息，真正被用起来的不超过 3 条。
想解决的问题
不是"再做一个笔记 App"，而是让记录之后的事情自动发生：
- 分类自动化：用户只管记，AI 判断它是待办、灵感、知识还是收藏，不需要手动选
- 处理差异化：待办自动提取优先级，知识自动生成摘要，收藏自动归档——不同类型做不同的事
- 闭环主动化：不等人翻，AI 每天早上主动推送早报，安排今天的待办和复习
为什么做这个方向
考察了 Flomo、滴答清单、Notion 后，我发现一个空白：没有一款产品同时做到"极简输入 + AI 原生 + 主动服务 + 开放模型"。Flomo 记录好但 AI 浅，滴答清单待办强但没知识沉淀，Notion 功能全但手机端太重。
技术选型上选 Expo 有三个理由：一套代码双端运行；开箱即用（相机、通知、SQLite 全部内置）；数据 100% 本地，用户自带 API Key，隐私可控。
3. Demo 体验地址
交互式可体验的 HTML 格式文件，已使用 Zip 格式打包上传：
附件：
lynx-demo.zip (18.0 KB)
（解压后为 lynx-demo.html）
体验方式：
- 下载附件并解压
- 双击
lynx-demo.html在浏览器中打开 - 左侧是手机模拟器，右侧是产品信息面板
可交互的内容：
- 点击底部 Tab 切换首页 / 记录 / 复盘 / 我的四个页面
- 点击右下角 + 弹出快速记录面板，输入文字后提交
- 观察 AI 分类动画：提交后卡片先显示「AI 处理中…」，1.5 秒后自动分类完成，卡片 flash 高亮
- 试试不同内容：输入"明天开会讨论方案"→ 待办 P1；输入"如果做一个 AI 工具"→ 灵感；输入"useEffect 是 React 的副作用钩子"→ 知识
- 点击待办复选框 标记完成（划线 + 打勾 + toast）
- 在记录页切换分类筛选 和搜索
- 点击首页早报卡片 跳转到复盘页查看 AI 早报内容
- 设置页 toggle 开关 状态实时同步
整页为单文件 HTML，零外部依赖，双击即用。推荐 Chrome / Edge / Safari。
4. TRAE 实践过程
4.1 开发流程概览
整个 Demo 从零到可交互，我跟 TRAE 进行了 6 轮对话，总耗时约 1 小时。每一轮对应一个明确的开发目标，前一轮的产出是后一轮的输入。开发使用的 Prompt 模板保存在 HTML-Demo-Prompt模板.md 中，共 10 个 Prompt 分三个阶段（构建 / 测试 / 交付）：
| 轮次 | 时间 | 目标 | 对应 Prompt | 配图 | Session ID |
|---|---|---|---|---|---|
| Session 1 | 7/8 23:39 | 生成骨架 + 模拟数据 | Prompt 1+2 | P1、P2、P3 | 3991664159628224:07e846ed… |
| Session 2 | 7/8 23:57 | 添加核心交互 | Prompt 3 | P4 | 3991664159628224:7804144e… |
| Session 3 | 7/9 00:04 | 补全页面 + 细节打磨 | Prompt 4+5 | P5、P6-1、P6-2 | 3991664159628224:b91ae76b… |
| Session 4 | 7/9 00:09 | Bug 修复 | — | BUG修复 | 3991664159628224:165885e1… |
| Session 5 | 7/9 00:26 | 功能回归 + 边界测试 | Prompt 6+7 | P7 | 3991664159628224:3e707b11… |
| Session 6 | 7/9 00:31 | 视觉验收 + 兼容性 | Prompt 8+9 | P7-2 | 3991664159628224:338d81c9… |
4.2 Session 1 · 生成骨架 + 模拟数据（23:39 → 23:51）
使用的 Prompt（模板 Prompt 1 + Prompt 2 合并）：
“我要为「灵犀 LYNX」——一款 Expo React Native 手机 APP——做一个网页版可交互 Demo，用于比赛展示。要求：1) 页面中央是 375×720 的手机模拟器外框（黑色圆角边框 + 顶部刘海），模拟 iPhone 外观；2) 手机屏幕内分为状态栏、内容区、底部 Tab 栏（4 个 Tab：首页/记录/复盘/我的）；3) 右侧放一个信息面板（320px 宽），展示产品定位、核心交互说明、技术架构；4) 四个 Tab 可点击切换……”
“在 Demo 里加入模拟数据并渲染：定义 7 条模拟笔记数据，覆盖 4 个分类——todo（待办）：2-3 条，含 priority 和 dueDate；idea（灵感）：2 条，含 tags；knowledge（知识）：1 条，含 AI summary；archive（收藏）：1 条，含链接和 AI 摘要……”
TRAE 做了什么： 7 分 16 秒内生成了完整的 HTML 骨架——深色主题手机外框（含刘海）、状态栏（时间 + 信号 + 电池 SVG 图标）、四 Tab 导航、首页全部内容区块、右侧信息面板。同时写入了 7 条贴近真实场景的模拟数据，包括「完成灵犀 App 需求文档 v2」「碎片化信息需要锚点才能被有效回忆」「《心流》第三章笔记」等，每条带分类图标、相对时间、AI 标签、优先级/标签/摘要等差异化字段。
截图： P1 展示了 TRAE 对话界面 + 浏览器实时预览的 split-screen；P2 展示了完成后的模块清单表格和手机模拟器渲染效果；P3 展示了模拟数据的规格定义（7 条笔记覆盖 4 个分类的对照表）。
Session ID： 3991664159628224:07e846ede7155a7a780d7f139f15f028_6a4e6f3d24583f6ee3dd7851.6a4e6f3d24583f6ee3dd7854.6a4e6f3d24583f6ee3dd7852:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 23:39:41)
4.3 Session 2 · 添加核心交互（23:57 → 00:01）
使用的 Prompt（模板 Prompt 3）：
“添加核心交互——快速记录 + AI 自动分类动画：1) 右下角悬浮 + 按钮，点击弹出底部 Modal；2) 提交后立即关闭 Modal，列表顶部插入新卡片，状态为 processing，显示’AI 处理中…'脉冲动画；3) 1.5 秒后模拟 AI 分类完成：根据内容关键词判断分类，更新卡片配色和标签，底部弹 toast。关键词规则：含’买/回复/提交/开会’→todo，含’想法/灵感/创意’→idea，含’学习/知识/笔记’→knowledge，含’http/链接/文章’→archive。”
TRAE 做了什么： 一次性写完了完整的交互链路——Modal slideUp 动画、textarea + 提交按钮（空内容 disabled）、卡片插入 fadeIn 动画、AI 处理中脉冲动画、1.5s 后分类逻辑、toast 提示。
关键实现细节： AI 分类没有用简单的 if-else，而是采用了计分制——定义 KEYWORD_RULES 数组，每个分类有一组关键词，遍历内容对每个分类累计命中次数，最高分胜出。平分时按具体度优先（archive > knowledge > idea > todo），因为越具体的分类优先级越高。这比顺序匹配更健壮，避免了"整理微信收藏"里的"整理"误命中 todo 规则的问题。
待办优先级也用了正则：/紧急|马上|立刻|尽快|今天|现在/ → P0，/明天.*(交|截止|提交|完成|报告)|本周|这周/ → P1，其余 → P2。灵感类型会根据内容自动提取标签（碎片化/产品/AI/设计/参考），知识/收藏类型自动生成 AI 摘要。
截图： P4 展示了 TRAE 确认「核心交互已全部添加完成」的对话 + 手机模拟器中首页完整效果。
Session ID： 3991664159628224:7804144e02ffbeaa00edc67442807e63_6a4e6f3d24583f6ee3dd7851.6a4e735d24583f6ee3dd7929.6a4e735d24583f6ee3dd7927:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 23:57:17)
4.4 Session 3 · 补全页面 + 细节打磨（00:04 → 00:08）
使用的 Prompt（模板 Prompt 4 + Prompt 5 合并）：
“补充复盘页和设置页的内容：复盘页含今日概览（4 个数字卡片）、AI 早报全文、完成率进度条、本周趋势；设置页含 AI 模型配置组、通知设置组、数据管理组……”
“最后打磨这些细节：1) 待办点击复选框→划线+打勾+toast；2) 搜索未匹配卡片隐藏；3) 状态栏时间每 10 秒更新；4) Esc 键关闭 Modal；5) 手机外框多层 box-shadow 质感；6) 卡片圆角统一、按钮圆角统一；7) 隐藏滚动条。不要加多余的动画，保持克制。”
TRAE 做了什么： 7 项全部落地。复盘页包含完整的 AI 早报文案（待办提醒 + 时间建议 + 灵感回顾）、完成率进度条（67% + 本周平均 72%）、本周趋势数据（28 条记录 +12%、AI 节省 45 分钟）。设置页三组配置齐全，toggle 开关有交互。最后那句"不要加多余的动画，保持克制"很关键——防止 AI 过度装饰。
截图： P5 展示了复盘页和设置页的规格定义 + 手机模拟器渲染；P6-1 和 P6-2 展示了 7 项打磨的汇总表格（每项含实现方式和效果说明）+ 首页最终效果。
Session ID： 3991664159628224:b91ae76b36836afeb79b408d471c9af8_6a4e6f3d24583f6ee3dd7851.6a4e750a24583f6ee3dd7993.6a4e750a24583f6ee3dd7991:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 00:04:26)
4.5 Session 4 · Bug 修复（00:09 → 00:11）
发现的问题： 设置页的「晚间复盘」开关打开后，旁边的文字没有从「已关闭」同步变成「已开启」。
我给 TRAE 的 Prompt：
“设置页的晚间复盘 toggle 打开后，旁边文字还是显示’已关闭’，应该同步更新为’已开启’。”
TRAE 做了什么： 定位到 toggle 的事件处理函数，补上了文字状态同步逻辑。修复后 toast 正确提示「晚间复盘已开启」。这种"状态变了但衍生 UI 没更新"的 bug 很典型——状态和视图的绑定不完整。
截图： BUG修复.png 展示了 bug 报告对话 + 修复后的设置页效果（toggle 打开、文字同步为「已开启」、toast 提示出现）。
Session ID： 3991664159628224:165885e1f2d57c2330c3e25b420b8438_6a4e6f3d24583f6ee3dd7851.6a4e763e24583f6ee3dd7a07.6a4e763e24583f6ee3dd7a05:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 00:09:34)
4.6 Session 5 · 功能回归 + 边界测试（00:26 → 00:30）
使用的 Prompt（模板 Prompt 6 + Prompt 7 合并）：
“对灵犀 LYNX Demo 做一轮完整的功能回归测试。逐项验证以下场景，每项标注
/
/
，失败项给出原因和修复建议：1) 快速记录完整链路（输入’明天开会讨论产品方案’→应分类为待办+P1）；2) AI 分类准确性（5 条用例）；3) 待办完成交互；4) 取消记录；5) Tab 切换；6) 搜索过滤。发现问题就修复，不要只报告不修。”
“检查 Demo 在以下边界情况下的表现：空内容提交、纯空格、超长文本、特殊字符（XSS）、emoji 输入、换行输入、连续快速提交、提交后立即切 Tab、连续点击复选框、空数据状态……发现问题就修复。”
TRAE 做了什么： 功能回归 13 项 + 边界测试 10 项，共 23 项检查。发现并修复了 3 个问题：
- 输入"明天开会讨论产品方案"时优先级误判 → 修复 P1 正则规则
- 多行文本换行符丢失 → 补加
white-space:pre-line - 首页空数据无提示 → 增加空状态检查和「还没有记录，点击 + 开始」文案
截图： P7 展示了测试报告表格 + 设置页效果；P7-2 展示了问题详情与修复建议。
Session ID： 3991664159628224:3e707b11284c19f64afde71a021d83cf_6a4e6f3d24583f6ee3dd7851.6a4e7a2924583f6ee3dd7aa3.6a4e7a2924583f6ee3dd7aa1:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 00:26:17)
4.7 Session 6 · 视觉验收 + 兼容性扫描（00:31 → 00:35）
使用的 Prompt（模板 Prompt 8 + Prompt 9 合并）：
“对 Demo 做视觉和交互体验验收，逐项检查：四分类配色一致性、圆角统一性、字号层级、间距协调、Modal slideUp 动画、新卡片 fadeIn、AI 脉冲动画、FAB 点击缩放、Tab 颜色过渡、手机外框阴影深度、状态栏实时时间、滚动条隐藏、Tab 栏固定、信息面板完整性、窄屏自适应。视觉问题直接修。”
“检查 Demo 在 Chrome / Edge / Safari 的表现。已知兼容性风险点：backdrop-filter 在旧版 Safari 可能不支持、flexbox gap 在旧版 Safari 有 bug……有风险的直接修。”
TRAE 做了什么： 15 项视觉检查发现 1 个问题——信息面板缺少赛道信息，直接补充。兼容性扫描发现 2 个风险并修复：
backdrop-filter无 fallback → 补加@supports not ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px)))纯色背景flex gap无 fallback → 补加@supports not (gap:1px)margin 方案
最终结果：39/39 项全部通过
Session ID： 3991664159628224:338d81c909134b4d10fef66fb016bddb_6a4e6f3d24583f6ee3dd7851.6a4e7b6d24583f6ee3dd7af0.6a4e7b6d24583f6ee3dd7aee:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 00:31:41)
4.8 开发关键步骤截图汇总
| 配图 | 对应 Session | 内容 |
|---|---|---|
| P1 | Session 1 | TRAE 生成骨架的对话界面 + 浏览器实时预览 |
| P2 | Session 1 | 完成后的模块清单表格 + 手机模拟器渲染效果 |
| P3 | Session 1 | 7 条模拟数据规格定义（4 分类覆盖表） |
| P4 | Session 2 | 核心交互完成确认 + 首页完整效果 |
| P5 | Session 3 | 复盘页 + 设置页规格定义 + 渲染效果 |
| P6-1 | Session 3 | 7 项细节打磨汇总表 + 首页最终效果 |
| P6-2 | Session 3 | 打磨完成后手机模拟器正面效果 |
| BUG修复 | Session 4 | toggle 状态同步 bug 修复对话 + 修复后效果 |
| P7 | Session 5 | 功能回归测试报告 + 设置页渲染 |
| P7-2 | Session 5 | 问题详情分析与修复建议 |
5. 经验总结与踩坑复盘
测试数据
整个测试过程共 4 轮、39 项检查、发现 6 个问题、全部修复并通过验证：
| 轮次 | 问题 | 修复方案 |
|---|---|---|
| 功能回归 | "明天开会"优先级误判 | P1 正则改为"明天 + 截止动词"才触发 |
| 边界测试 | 多行文本换行丢失 | note-body 添加 white-space:pre-line |
| 边界测试 | 首页空数据无提示 | 增加空状态检查 + 「还没有记录，点击 + 开始」 |
| 视觉验收 | 信息面板缺赛道信息 | 新增赛道/目标用户/核心差异/竞品区块 |
| 兼容性 | backdrop-filter 无 fallback | @supports not 纯色背景 fallback |
| 兼容性 | flex gap 无 fallback | @supports not(gap:1px) margin fallback |
TRAE 最让我惊喜的三点
一句话能生成完整交互链路。 Session 2 里我只描述了"点 + 号 → 输入 → 提交 → AI 处理中 → 1.5s 后分类完成 → toast 提示"这个流程，TRAE 就一次性写完了全部代码——包括 Modal 动画、计分制分类逻辑、优先级正则、标签自动提取、flash 高亮。而且它自己选择了计分制而非简单 if-else，这个设计决策比我想的更健壮。
"不要占位"和"保持克制"这两个约束很关键。 我在 prompt 里加了"不要写 TODO"和"不要加多余的动画，保持克制"，AI 就真的没占位、没过度装饰。一个小约束换来整轮干净。
AI 能自己测自己的代码。 Session 5 和 6 里我让 TRAE 做功能回归和视觉验收，它真的逐项检查了 39 个场景，发现了 6 个真实问题并全部修复。其中"明天开会"误判优先级这个 bug，我自己手动测试时根本没注意到。
踩过的坑
坑一：关键词分类用 if-else 会有优先级冲突。 如果用顺序匹配，"整理微信收藏"里的"整理"可能命中 todo 规则。TRAE 自己选了计分制——每个分类独立累计命中次数，最高分胜出，平分时按具体度优先。这个设计比我预想的更合理。
坑二：CSS 的 div 默认不保留换行符。 输入多行文本后，卡片里全挤成一行。原因是 div 的 white-space 默认是 normal，不保留 \n。加一行 white-space:pre-line 就修好了，但这个问题如果不是系统测试，手动很难发现。
坑三：toggle 状态同步容易漏。 设置页的开关打开后，旁边的描述文字没跟着变。这种"状态变了但衍生 UI 没更新"的 bug 很典型——状态和视图的绑定不完整。TRAE 一句话就定位并修好了。
给后来者的一句话
TRAE 不是"替你写代码"，是"替你把已经想清楚的东西快速落地"。 你想得越具体，它落地得越准。把任务拆成可独立验证的小步、每步 prompt 带上明确约束、最后让 AI 自己测自己——这三件事让我的开发效率提升了约 5–8 倍。