【生活娱乐】拾句 —— 你的阅读，有迹可循
你知道自己的穿衣风格、音乐品味、饮食偏好——但你知道自己的阅读人格是什么吗？
大多数人说不出来。不是因为没有读过，而是从来没有人帮你追踪和记录那些真正打动你的瞬间。
一、这是什么
阅读品味不是被告诉出来的，是在一次次「被打动」中慢慢长出来的——但这个生长过程是隐性的。你可能读完一本书觉得好，却说不清好在哪；你在一句话前多停了两秒，自己都没意识到。
拾句做的，就是捕捉这些微弱的信号，帮你看见自己的阅读人格画像。
每一次停留、每一次深读、每一次收藏，都在告诉系统「这种文字打动了我」。系统把这些信号串起来，在你已经知道的偏好和你还没发现的领域之间找到平衡——不是推荐引擎告诉你什么是流行的，而是一个了解你的朋友，帮你看见自己正在成为什么样的读者。
读着读着，你会发现一个越来越清晰的自己。
然后，真正有意思的事情才开始。
当你第一次清晰地看见自己的阅读偏好——「原来我偏爱的是那种在平静叙述中突然击中你的文字，而不是铺陈华丽的辞藻」——你的阅读行为会发生一个微妙但根本性的变化：
你不再是被动的。 以前你打开一本书，是被书单推荐的、被朋友安利的、被封面吸引的——你不知道自己为什么选了它，也不知道自己会不会读完它。但现在你知道自己在找什么了。你会不自觉地在一本书的开头多留意几行，看它是不是那种会击中你的写法；你会跳过那些你知道自己不会被打动的段落，把时间留给更有可能让你停下来的一段。
这不是「算法帮你选书」。恰恰相反——这是算法帮你认识自己，然后你自己选书。 算法扮演的角色在越来越弱化，而你的主体性在越来越强。最终，你不需要拾句了——因为你已经是一个知道自己想读什么的读者了。
二、创作故事
2.1 起点：忍不住刷视频，却不知道该看什么书
说实话，我自己就是那个「总是忍不住刷视频，但有时候又想看点书」的人。
不是不喜欢阅读——恰恰相反，我知道阅读是严肃的、有价值的。但问题是：当我放下手机、想看点书的时候，我不知道该看什么。 书架上有十几本买了超过一年的书，每一本都停留在前 30 页。抖音、小红书、豆瓣的书单我也翻了不少，但翻完之后还是不知道什么文字是真的属于我的。
但我发现了一个规律：有时候，某本书里某一段话会突然吸引我往下读。 不是因为书单推荐了它，不是因为谁说它好——就是那段话恰好击中了我，让我不由自主地读了下去。一段只要两分钟。两分钟总是有的。
但这个「击中」是随机的、偶然的。你可能一年只遇到两三次。如果把那些最有可能击中你的片段集中起来，系统地喂给你呢？ 不是让你两分钟读完一本书，而是用两分钟让你走进一本书——然后由你自己决定要不要继续往下读。
这就是「两分钟理论」：降低从「想读」到「开始读」的门槛，让每一次偶然的击中变成可追踪、可培育的阅读信号。
2.2 灵感：让阅读偏好「可见」
阅读品味不是被告诉出来的，是在一次次「被打动」中慢慢长出来的。
问题是：这个生长过程是隐性的。你读完一本书觉得好，但说不清好在哪；你在一句话前多停了两秒，但你自己都没意识到。所有这些微弱的信号，散落在每一次翻页、每一次滑动、每一次停留里——没有人帮你收集，更没有人帮你呈现。
拾句想做的事很简单：把隐性的阅读偏好，变成显性的、可视化的阅读人格。
每一次停留、每一次深读、每一次收藏——都是你在告诉算法「这种文字打动了我」。算法把这些信号串起来，逐渐描绘出你的偏好画像：你偏爱什么主题（爱情还是哲思）、什么风格（浓烈还是克制）、什么文化区域（东方还是西方）、什么阅读深度（金句速览还是片段沉浸）。然后在「你确定喜欢的」和「你可能会喜欢的」之间帮你找到平衡。
这不是推荐引擎，是阅读培育器。 推荐引擎告诉你什么是流行的，阅读培育器帮你看见自己正在成为什么样的读者。
想象一下：用了一段时间拾句后，你打开偏好面板，看到自己的阅读人格从一个模糊的轮廓，慢慢长成一个有细节、有弧度的立体画像——「原来我偏爱的不是’文学’这个笼统的词，而是那种在平静叙述中突然击中你的文字。原来我读中国古典的时候更感性，读俄罗斯文学的时候更理性。」
这种「自我发现」的过程，本身就是阅读最大的回报。
2.3 想解决的问题
阅读偏好是隐性的，没人帮你看见。 你可能直觉上知道自己「喜欢文学」，但你不知道自己偏爱的是浓烈的抒情还是克制的白描，是对爱情的感伤还是对孤独的沉思。这些偏好藏在每一次无意识的停留里，但从来没有人帮你记录和呈现。
书单推荐的是「别人的品味」，不是你的。 抖音推书单、小红书推书单、豆瓣推书单——它们的逻辑都是「根据别人的行为，告诉你该看什么」。但阅读是一件很私人的事，阅读品味不是被告诉出来的，是在一次次「被打动」中慢慢长出来的。
两分钟的阅读是严肃的。 一段经典文学中的精彩段落，两分钟就能读完——但这两分钟可能让你走进一本书。通勤、排队、睡前，这些时间里你本可以选择刷视频，但现在你选择读一段经典——并且这个选择会被系统记录下来，成为你阅读人格的一部分。
你不需要「找到」自己的阅读品味。它已经在那里了——只是需要一个工具帮你把它看得见。
2.4 方向取舍
这个方向不是没有犹豫：
- 为什么只做片段摘选而不直接提供原文阅读？ 这是一个刻意的定位选择。拾句不是另一个阅读 App——微信读书、掌阅、豆瓣阅读已经做得很好了。拾句的定位是阅读入口：用最短的路径（一两句话）让你被一本书击中，然后由你决定要不要走进去。而且，摘选片段不涉及完整作品的版权问题，让产品在版权合规上更加从容。未来产品化时，拾句可以作为阅读偏好引擎，与成熟的阅读 App 对接——拾句负责帮你发现自己想读什么，阅读 App 负责提供完整的阅读体验。
- 为什么做 Web 而不是 App？ 初赛阶段核心体验优先，Web 端打开即用、无需安装。且本地 JSON 数据确保离线可用。
- 为什么只做公版书籍？ 所有内容均为公共领域作品。在获取正式授权前，拾句不会碰仍在版权保护期内的作品——这是底线。
- 为什么从「金句」升级到「片段」？ v1 只有金句卡，但阅读偏好不能只靠金句来描绘——片段的沉浸阅读能捕捉到更深层、更持久的偏好信号。v2 引入 30 条 100-800 字的精彩片段，让偏好画像更立体。
- 为什么视觉系统要 Luxury/Refined？ 经典文学配经典审美。羊皮纸色背景、古金色装饰线、衬线字体——这些不是为了「好看」，而是让文字获得它应有的庄重感。
三、体验地址
HTML压缩包下载： shiju-demo.zip (228.7 KB)
使用说明：
- 下载并解压 ZIP 文件
- 打开
dist/index.html - 金句卡：键盘方向键 ↑↓←→ 或点击底部
按钮切换 - 片段卡：卡片内可上下滚动阅读完整段落，滚到顶部/底部时再上划切换；也可点击右下角"跳过"按钮
- 深读：单击卡片任意位置，展开 AI 四维解读面板
- 收藏：长按卡片（>500ms）收藏/取消收藏
- 主题：右上角月相图标切换昼夜模式
本地开发运行：
cd shiju-demo
npm install
npm run dev # 启动开发服务器
npm run build # 构建生产版本到 dist/
npm run preview # 预览构建产物
体验截图：
四、TRAE 实践过程
4.1 从零到一
参加 TRAE AI 创造力大赛的时候，我脑子里只有一个方向：做一个和 TikTok 理念类似的阅读产品——摘选书籍中的经典语句和段落，用户可以划走也可以深入阅读。核心理念是用短视频的交互方式承载经典文学，“用魔法打败魔法”，在碎片化信息的今天让更多人走进阅读。
我把这个想法连同大赛的说明文档一起发给了 TRAE：
“我准备参加 TRAE 的 AI 创造力大赛，想做一个和 TikTok 理念类似的阅读软件，摘选书籍中的经典语句或段落，可以划走或者深入阅读，让大家在碎片化信息的今天提升阅读量。以下是我的说明文档，请你阅读后协助我进行创造，有不确定的地方可以询问我。”
从这段话开始，TRAE 接手了所有技术工作——选型、搭建、模块开发，一步步把一个模糊的方向变成了一个能运行的产品。
内容也是 TRAE 帮我准备的。它从《红楼梦》《论语》《道德经》《唐诗三百首》《宋词三百首》《庄子》《诗经》《世说新语》中精选了经典名句，每条都配了完整的深度解读。
4.2 空白页面：我只说了"打开是白的"
v1 第一次运行时，打开页面是一片空白，什么内容都显示不出来。
我去跟 TRAE 说：“打开之后页面是空白的，什么都没显示。”
TRAE 排查后发现，是推荐算法出了问题——当用户的偏好数据积累到一定程度后，算法陷入了循环，导致页面卡死。TRAE 重新设计了推荐逻辑，把原来的合并方式改成了两个独立的流程，先处理偏好内容，再处理探索内容。修复之后页面正常显示了。
这件事让我意识到：只要能准确地描述问题现象，TRAE 就能自己找到根因并修复。
4.3 深读跳卡：我只说了"内容对不上"
v1 的另一个问题：点击卡片打开深读面板，读完关闭面板后，下一条显示的内容和刚才点击的那条不是同一个——它会突然跳到另一条。
我跟 TRAE 说：“点击卡片深读，关闭之后下一条内容变了，不是刚才看的那条。”
TRAE 排查后发现，问题是点击卡片的时候，系统同时做了好几件事：打开深读面板、记录阅读行为、更新推荐队列。这几件事同时发生，导致推荐队列被重新排序，当前位置就变了。
TRAE 的修复方案是：把记录阅读行为和更新推荐队列这两件事，从"点击时"改成"关闭深读面板时"再做。 这样用户在深读过程中，推荐队列不会变动，关闭面板后下一条内容就是预期的那条。
修复之后体验顺畅了很多。
4.4 v2 大升级：我只提了四条需求
v1 完成后，我提了升级需求：
- “内容不能只有中国古典的，要加上日本、俄罗斯、欧洲的文学作品”
- “不能只有一句话的金句，要加上几百字的段落，让用户能沉浸阅读”
- “视觉要升级，现在的风格太普通了，经典文学应该有经典的感觉”
- “要加新用户引导”
四条体验需求。TRAE 接手之后，自己做了需求分析、方案设计、模块拆解——最终拆成了 25 个模块，分四个阶段有序推进：先准备数据，再做核心交互，然后升级推荐算法，最后收尾测试。
我作为产品方的角色是：提出需求、验收体验、反馈问题。技术实现、架构设计、模块拆分——这些都是 TRAE 的事。
25 个模块的复杂工程，一个人也能推动。
4.5 视觉升级：我只说了"庄重一点"
v2 功能完成后，视觉还是通用的风格，跟"经典文学"这个主题不搭。
我给 TRAE 的方向很简单：“视觉要庄重一点，有经典文学的感觉。不要用太常见的模板风格。”
TRAE 自己做了一次全面的视觉系统重构——从色彩、字体、装饰元素到动画规范，全部重新设计。它甚至还自己判断了一些设计原则：不用紫色渐变、不用圆角阴影——这些我没提过，是它自己基于"经典文学"这个主题做出的判断。
经典文学配经典审美，这不是奢侈，是尊重。
4.6 协作全景
| 阶段 | 我负责 | TRAE 负责 | 关键成果 | Session ID |
|---|---|---|---|---|
| 零到一 | 描述产品想法和体验需求 | 技术选型 + 项目搭建 + 内容生成 | 从想法到可运行产品 | 217030417193242:fbadc09f291af81502fe9a69170a1503_...T(2026/6/20 22:04:04) |
| 空白页面修复 | 描述"打开是白的" | 诊断算法问题 → 重新设计推荐逻辑 | 页面正常显示 | .217030417193242:0716dd22400fbfa0ceb45d3f69eeb326_...T(2026/6/28 15:31:40) |
| 深读跳卡修复 | 描述"内容对不上" | 诊断时序问题 → 调整行为记录时机 | 深读后内容不再跳变 | .217030417193242:59708b718fe5876a082f954f938b7133_...T(2026/6/20 22:24:27) |
| v2 升级 | 提出四条功能和体验需求 | 需求分析 + 模块拆解（25 个模块）+ 全栈实现 + 测试 | 200 条内容 + 片段卡 + 推荐升级 + 视觉重构 | v2-规划与分析.md |
| 架构审查 | 确认参赛准备就绪 | 对照参赛标准逐项检查 | 项目架构与创新审查报告 | .217030417193242:bc835373a18fc86abd6938ff33a5351e_...T(2026/6/28 19:14:12) |
TRAE 截图见证：
五、拾句的未来
这只是一个 Demo，但它指向的方向很清晰：让阅读偏好从隐性变成显性，从静态变成活的。
短期 —— 让阅读人格「看得见」：
- 阅读偏好后台：可视化面板实时展示算法捕捉到的偏好信号——你偏爱的主题分布（爱情 / 孤独 / 自然 / 哲思…）、风格倾向（浓烈 / 克制 / 幽默 / 悲悯）、文化区域热度、阅读深度偏好（金句速览型 vs 片段沉浸型）。这不是冰冷的数据图表，而是用直观的方式告诉你「你是一个什么样的读者」
- 扩展公版书籍覆盖面，目标 1000+ 条内容
- AI 解读从「四维度」升级为「对话式」，用户可以追问
中期 —— 让阅读人格「活起来」：
- 阅读人格养成系统：你的阅读行为不只是数据，它会「喂养」一个属于你的阅读人格。你读得越多、越深，这个人格就越立体——它会告诉你「你最近好像对日本文学特别敏感」「你已经很久没有接触诗歌了，要不要试试？」
- 趣味化互动：你的阅读偏好可以具象化为一个虚拟伴侣——它的性格、外貌、口头禅都由你的阅读品味塑造。偏爱俄罗斯文学的人可能养出一只深沉的猫，偏爱唐诗宋词的人可能养出一只优雅的鹤。阅读不再是孤独的行为，而是你和「另一个自己」的对话
- 从「拾句」到「拾书」：当 AI 足够了解你的阅读人格，它不只推荐一句话，而是推荐「你下一本会读完的书」
长期 —— 让阅读偏好「可社交」：
- 阅读人格匹配：发现跟你阅读品味相似的人——不是基于「你们读了同一本书」，而是基于「你们在同一句话前都停了下来」
- 个人阅读年报：这一年，哪些文字打动了你，你的阅读人格经历了怎样的成长轨迹，从年初的「模糊轮廓」到年末的「立体画像」
- 证明算法推荐不只能服务于消费，也可以服务于自我认知——在信息过载的时代，帮你认识一个更清晰的自己
六、已实现功能清单
6.1 AI 四大引擎
| 引擎 | 状态 | 关键能力 |
|---|---|---|
| 智能摘选推荐 |  |
200 条精选内容，偏好/探索 80/20 分桶，类型混合 70/30，地区分散 |
| AI 深度解读 | |
200 条四维解读（上下文还原 / 文学分析 / 跨作品关联 / 现实关联）+ 延伸阅读 |
| 阅读偏好学习 | |
停留时长 / 收藏 / 深读三信号构建偏好画像，Zustand + localStorage 持久化 |
| AI 内容串联 | |
30 个主题跨作品串联，深读面板内可跳转 |
6.2 核心交互
| 交互方式 | 状态 | 说明 |
|---|---|---|
| 键盘方向键 ↑↓←→ | |
桌面端主要切换，300ms tween |
| 点击底部 按钮 |
|
桌面端辅助切换 |
| 触屏边界溢出切换 | |
片段卡专属交互 |
| 单击卡片 | |
打开 AI 深读面板 |
| 长按卡片（>500ms） | |
收藏/取消收藏 |
| 昼夜模式切换 | |
右上角月相图标 |
6.3 数据资产
| 数据集 | 数量 | 说明 |
|---|---|---|
excerpts.json |
200 条 | 170 金句 + 30 片段，7 大文化区域 |
interpretations.json |
200 条 | 四维 AI 解读 + 延伸阅读 |
connections.json |
30 主题 | 跨作品主题串联映射 |
fallback.js |
12 条 | JSON 加载失败兜底 |
文化区域分布：中国古典 / 中国现当代 / 日本 / 俄罗斯 / 欧洲与美国 / 全球诗歌
所有内容均为公共领域作品。
展开查看：技术架构详情
技术栈
| 层级 | 技术 | 版本 |
|---|---|---|
| 框架 | React | 19.2 |
| 构建 | Vite | 8.0 |
| 样式 | TailwindCSS | 3.4 |
| 动画 | Framer Motion | 12.40 |
| 状态管理 | Zustand | 5.0 |
| 持久化 | localStorage（含 v1→v2 自动迁移） | — |
项目结构
shiju-demo/
├── src/
│ ├── components/
│ │ ├── Card/ # 卡片路由层 + QuoteCard + PassageCard
│ │ ├── DeepRead/ # 深读面板（lazy 加载）
│ │ ├── Collection/ # 收藏页
│ │ ├── Onboarding/ # 5 步引导
│ │ └── ThemeToggle/ # 昼夜切换
│ ├── hooks/
│ │ ├── useRecommendations.js # 推荐算法
│ │ ├── useDwell.js # 停留检测
│ │ └── useLongPress.js # 长按 vs 单击
│ ├── store/
│ │ └── index.js # 3 个 Zustand store
│ └── data/
│ ├── excerpts.json # 200 条语句
│ ├── interpretations.json # 200 条解读
│ └── connections.json # 30 个主题串联
├── dist/ # 构建产物（提交内容）
└── shiju-demo.zip # 压缩包（提交内容）
关键设计决策
| 决策 | 方案 | 原因 |
|---|---|---|
| 卡片切换 | tween 300ms | 替代 spring，避免破坏阅读专注 |
| 推荐队列稳定 | deterministicHash | 刷新后顺序不变 |
| 深读调度 | close 时才 recordDeepRead | 避免队列重排导致跳卡 |
| 片段切换 | 边界溢出方案 | 与手机原生交互一致 |
| 字体加载 | Google Fonts swap + preconnect | 首屏 LCP ≤ 2.5s |
| 数据迁移 | Store version + migrate | 老用户不丢数据 |
视觉系统
| 维度 | 规格 |
|---|---|
| 色彩 | 羊皮纸 #F5F1E8 / 深墨 #0E0B08 / 古金 #C9A961 |
| 字体 | Cormorant Garamond + EB Garamond + Noto Serif SC + Inter |
| 圆角 | ≤ 4px |
| 装饰 | 2px 古金竖线 / 60px 居中金线 / 1px 极细金边 |
| 动画 | staggered 淡入（80ms / 400ms / [0.4, 0, 0.2, 1]） |
| 图标 | 全 SVG（Lucide 风格），无 emoji |
| 可访问性 | 对比度 ≥ 4.5:1，正文 ≥ 16px，行高 ≥ 1.7 |
七、报名帖链接
八、相关文档
| 文档 | 链接 |
|---|---|
| v2 版本规划文档 | 拾句v2版本规划文档.md |
| 项目架构与创新审查报告 | 项目架构与创新审查报告.md |
| 文档索引 | 文档索引.md |
附录：当前 Demo 的边界与下一步
以下内容集中说明本次参赛 Demo 的临时性限制，避免这些实现细节分散在正文中影响产品叙事。
本次 Demo 是为了验证「阅读品味培育」核心思想的最小可行版本，因此在以下方面做了简化：
| 维度 | 当前 Demo | 产品化方向 |
|---|---|---|
| 内容规模 | 200 条精选内容（7 大文化区域） | 扩展至 1000+ 条，覆盖更多公版书籍 |
| 内容来源 | 本地 JSON，纯前端运行 | 接入后端内容管理系统，支持动态更新 |
| 平台形态 | Web 端（浏览器打开即用） | 原生 App + 小程序多端覆盖 |
| 偏好可视化 | 数据已采集并持久化，可视化面板待实现 | 实时阅读人格画像面板（详见「五、拾句的未来」） |
| 养成系统 | 算法偏好学习已运行，人格具象化待实现 | 虚拟伴侣/宠物养成系统（详见「五、拾句的未来」） |
| 社交匹配 | 未实现 | 基于阅读人格的品味匹配（详见「五、拾句的未来」） |
| 原文阅读 | 仅提供片段摘选，不含完整作品 | 作为阅读偏好引擎，与成熟阅读 App 对接 |
以上限制均为参赛阶段的临时选择，不影响产品的核心方向。
最后更新：2026-07-05
文档版本：v3.0