【标签】 生活娱乐/社会公益
【生活娱乐赛道】古人朋友圈 —— 让李白苏轼穿越来评评你今天的摸鱼
0. 先和大家打个招呼 
大家好！我是一名大一学生。
说实话，做这个 Demo 之前，"写一个网页应用"对我来说是挺遥远的事。大一入学，专业课还在打基础，HTML 和 JavaScript 看着像天书，更别说从零搭一个有交互、有视觉设计、有生成逻辑的完整产品。但这次和 TRAE 配合的过程，让我发现：原来"想法落地"并不需要先啃完一摞技术书。
我的想法很简单——每天大学生活里有各种鸡毛蒜皮：早八起不来、食堂饭菜踩雷、社团活动累成狗、考前熬夜背书……如果让李白、苏轼这些古人穿越过来，用他们的方式发条朋友圈评评这些事，会是什么样？
我就这么把想法一句话讲给了 TRAE。我的做法是：不急着让它写代码，先描述清楚"我想要什么感觉"——比如"选完古人后，画面要像一张宣纸信笺"“古人头像用水墨画风”“生成的内容要像朋友圈，有点赞有评论”。TRAE 听懂了这些描述，主动帮我拆解成产品结构：8 位古人角色卡、古风视觉设计、本地古文生成引擎、朋友圈交互，一步步搭出来。
最让我"原来这么简单"的一刻，是调试阶段。我试了几个自定义输入，发现"输入朋友聚会，生成内容却文不对题"。我以为这下要自己读代码找 bug 了，结果 TRAE 自己定位到了问题（中间模板没有引用用户输入的具体内容），然后重写了一整套生成逻辑：加了情感分析、场景识别、还有把"彩票"翻译成"天降横财"、“猫咪"翻译成"狸奴"的转译表。我全程只是描述"哪里不对、我想要什么效果”，它就帮我把坎跨过去了。这种"描述想法 → 它帮你实现 → 反馈问题 → 它帮你修"的循环，让我第一次觉得，做产品不是写代码，而是把脑子里的想法表达清楚。
- Demo 简介
是什么： 古人朋友圈是一个纯前端网页应用（单个 HTML 文件，打开即用），用户输入今天发生的事，选择一位古代文人，TA 就会以自己的诗风和口吻，生成一条"古风朋友圈"来评价你的日常。
面向谁： 喜欢古诗词、想用幽默方式排解日常压力的学生和年轻人；也适合用来做朋友圈文案灵感、社交分享。
主要功能：
功能一：8 位古人角色，各具诗风
李白豪放、苏轼豁达、诸葛亮严谨、李清照婉约、王维禅意、杜甫忧国、庄子逍遥、辛弃疾豪迈——每位古人有专属的开头名句、中间评价、结尾吐槽模板，文风各不相同，还配有水墨风 SVG 头像和专属印章。
功能二：智能古文生成引擎
不是简单的模板填空，而是三层智能匹配：
情感分析：识别 7 种情绪（愤怒/焦虑/委屈/疲惫/无奈/开心/无聊），影响选词
场景识别：识别 8 种场景（工作/人际/生活/金钱/健康/社交/出行/天气）
现代词→古文转译：70+ 条映射，如"彩票→天降横财"“猫咪→狸奴”“开会→聚议”“体检→请脉问诊”
输入"今天中了500万彩票"，李白会说"天降横财之事，倒也痛快"；输入"房租又涨了500块"，杜甫会用"安得广厦千万间"开头。
功能三：朋友圈完整交互
生成的古风朋友圈卡片支持：点赞（带动画）、评论（古人粉丝 mock 评论）、分享（复制文案）、换一条（重新生成不同文案）、保存图片（html2canvas 截图）、历史记录（20 条，可点击回看、导出 txt）。
- Demo 创作思路
灵感来源： 刷朋友圈时发现，大家吐槽生活的方式都很雷同——“又是早八的一天”“食堂又踩雷了”“emo 了”。如果换一种表达方式，用古人的口吻来评这些事，既幽默又有文化味，可能比直接抱怨更有意思。古人经历的那些起落，其实和我们今天大学生的烦恼本质相通——杜甫颠沛流离，和期末周兵荒马乱也没什么两样。
想解决的问题： 日常吐槽太单调，缺乏新鲜感。很多人喜欢古诗词但平时用不上，这个 Demo 把古文"激活"成日常表达工具，让传统文化以一种轻松、接地气的方式重新进入生活。
为什么做这个方向： 生活娱乐赛道需要"有趣 + 有共鸣"。古人评现代生活天然有反差萌——李白评开会、杜甫评房租、庄子评内卷，这种跨时空碰撞本身就自带传播属性。而且纯前端实现，体验门槛低，打开即用，特别适合在群里分享。
-
Demo 体验地址
古人朋友圈_Demo.zip (29.5 KB)
-
TRAE 实践过程
整个 Demo 的开发经历了 5 个关键阶段，全部在 TRAE 中完成。作为一个大一学生，我没有写一行手敲代码，全靠和 TRAE 对话推进。
阶段一：从零搭建（初始生成）
向 TRAE 描述了产品概念：“做一个古人朋友圈生成器，用户输入今天的事，选一位古人，TA 用自己的文风生成一条古风朋友圈。” TRAE 一次性生成了完整的单文件 HTML，包含：8 位古人角色卡、10 个预设话题、宣纸水墨视觉风格、7 幅 SVG 古人头像、生成逻辑、历史记录。打开就能用，第一眼看到成品时挺震撼的。
关键对话 Session ID：【1061441503236316:0f2bf63966492d7afd8ee0cd6b30df95_6a47dc5e05126818bc993008.6a47e4c005126818bc9930cc.6a47e4c005126818bc9930ca:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/4 00:35:12)】
阶段二：体验模式自定义输入修复
发现体验模式下输入自定义内容（不在预设话题里），只能返回随机预设文案，文不对题。TRAE 定位到 generateMock 函数的逻辑缺陷（匹配不到关键词就随机返回），然后从零实现了一个本地古文生成器：情感分析 + 场景识别 + 古人句式库，每位古人有 8+ 开头、3 中间、4 结尾模板，可生成 100+ 种组合。
关键对话 Session ID：【在此粘贴 Session ID】
![本地生成器截图 —— 请替换为实际截图]
阶段三："换一条"功能修复
点"换一条"没反应，还是同一条。TRAE 发现原因：generate() 调用 generateMock，会先匹配预设关键词，匹配到就每次返回同一条。修复方案：给 generate() 加 regenerate 参数，"换一条"传 true 跳过预设匹配，强制走本地生成器，并加去重机制（记录上次结果，相同则重选）。
关键对话 Session ID：【1061441503236316:da4f86f4709a85d3224d185aea19f775_6a47dc5e05126818bc993008.6a49f2cef576bb5f516e807d.6a49f2cdf576bb5f516e807b:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/5 13:59:42)】
阶段四：生成内容与话题不符（核心修复）
测试发现输入"中了500万彩票"，生成内容完全不提中奖；输入"猫咪把杯子打碎"，完全不提猫。根本原因：中间评价是纯模板，只根据场景类型套词，不引用用户输入的具体内容。
TRAE 实现了三层修复：
关键词提取（extractKeywords）：从用户输入提取核心词，支持多词合并
古风转译（translateToAncient）：70+ 现代词→古文映射，长词优先匹配
模板重写：8 位古人的中间评价全部改为嵌入关键词，如 今日遇"${k}“一事，倒也痛快
同时扩充了情感分析（新增"聚会/吃了顿好的/喝多了"等隐含开心的词）和场景识别（新增出行、天气），并让开头名句、结尾吐槽都根据情感过滤——开心时不用"寻寻觅觅，冷冷清清”，改用"白日放歌须纵酒"。
关键对话 Session ID：【1061441503236316:0ce2a0f626028cec50d3ef4aa12ac801_6a47dc5e05126818bc993008.6a49f99df576bb5f516e81f9.6a49f99df576bb5f516e81f7:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/5 14:28:45)】
阶段五：细节完善
历史记录 onclick 字符串拼接改为 data-index + 事件委托，消除 XSS 风险
朋友圈点赞/评论/分享加交互反馈（点赞动画、mock 评论弹窗）
输入框加回车提交（Shift+Enter 换行）
历史记录上限扩充到 20 条，标题显示条数
生成按钮 loading spinner 动画
关键对话 Session ID：【1061441503236316:8a92c46564454f401d849ca313a19acb_6a47dc5e05126818bc993008.6a4a0696f576bb5f516e82a0.6a4a0681f576bb5f516e829e:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/5 15:24:06)】
经验总结（一个大一新生的踩坑复盘）
和 TRAE 配合做这个 Demo，最大的感受是：描述清楚"要什么效果"比会写代码更重要。
作为一个大一学生，我本来以为做产品得先学完一整套前端课程。但 TRAE 让我发现，关键不是技术能力，而是能不能把脑子里的想法讲清楚。我全程没写一行代码，只是描述：“我想要宣纸质感”“古人头像要水墨风”“输入朋友聚会要能识别出开心”——TRAE 就帮我把这些描述变成了实际的功能。
TRAE 最让我惊喜的是它不是被动执行指令的工具，而是能理解意图、主动定位问题、给出方案的搭档。比如我说"生成内容和话题不符"，它没有等我给方案，而是自己分析了原因（模板没引用用户输入），然后设计了一套三层生成器来修复。
踩过的坑：
本地生成器的情感一致性需要反复调试——开心的事不该用悲句评价，这个看起来简单，但涉及开头、中间、结尾三层模板的情感过滤，调了好几轮才稳定
关键词转译要注意长词优先（"猫咪"要先于"猫"匹配），否则会截断成奇怪的结果
html2canvas 截图 SVG 时需要配置 useCORS 和 allowTaint，否则图片空白，这个坑排查了好一会儿
整体来说，从想法到可体验的 Demo，全程和 TRAE 对话完成。这种"描述想法 → TRAE 实现 → 反馈问题 → TRAE 修复"的循环，让开发变成了一种很自然的协作过程。对一个刚入学、技术基础还很薄弱的学生来说，这种体验真的很鼓舞人——原来做出一个能用的产品，离我并没有那么远。