ORANGE BOOK · TRAE

第七章 生活场景实战

本章 7 个项目一览

编号 项目 难度 预计耗时 用到的核心能力
07.1 桌面文件智能分类器 ★ 15 分钟 Builder + 跑脚本
07.2 家庭账本网页 ★★ 30 分钟 Builder + 数据可视化
07.3 旅行规划页（带地图） ★★ 30 分钟 Builder + #Web 调研
07.4 婚礼/生日邀请函网页 ★ 20 分钟 Builder + 视觉风格
07.5 健身打卡 + 月度排行 ★★ 40 分钟 Builder + 本地存储
07.6 给爸妈的养生天气提醒页 ★ 20 分钟 Builder + 适老化设计
07.7 整理读书笔记成可搜索网页 ★★ 45 分钟 Builder + #Folder + 搜索

07.1 桌面文件智能分类器

痛点

你的桌面 / 下载文件夹有 200 个文件，杂乱无章—— 图片、视频、合同 PDF、表格、安装包、屏幕截图……每次找东西都要翻半天。

目标

让 Trae 写一个脚本，一键把指定文件夹里的所有文件按类型 + 日期归类，比如：

整理后/
├── 图片/
│   ├── 2025-08/
│   └── 2025-09/
├── 文档/
│   ├── 合同/
│   └── 报告/
├── 视频/
├── 安装包/
├── 截图/
└── 其他/

完整提示词

@Builder

帮我做一个 Python 脚本 organize_files.py，功能：

1. 输入：让用户输入一个目标文件夹路径（默认是 ~/Desktop）。
2. 扫描该文件夹下所有文件（不递归子文件夹，避免误处理）。
3. 按以下规则归类，全部移动到同目录下的"整理后/"子文件夹里：
   - 图片（.jpg .jpeg .png .webp .gif .heic）→ 整理后/图片/YYYY-MM/
   - 视频（.mp4 .mov .avi .mkv）→ 整理后/视频/
   - 截图（文件名以 "Screenshot" "屏幕快照" "截图" 开头）→ 整理后/截图/YYYY-MM/
   - PDF（.pdf）→ 整理后/文档/PDF/
   - Office 文档（.docx .xlsx .pptx）→ 整理后/文档/Office/
   - 安装包（.dmg .exe .pkg .zip）→ 整理后/安装包/
   - 其他 → 整理后/其他/
4. 月份按文件创建时间。
5. 处理前先打印出"要移动 N 个文件，确认吗？(y/n)"让用户确认。
6. 执行结束后打印一份汇总：每个类别移动了多少。
7. 出错的文件（比如权限问题）记录到 organize_log.txt，不中断执行。

【约束】
- 用 Python 标准库，不引入任何第三方包。
- 中文友好（输出全部用中文）。
- 不删除任何文件，只移动。
- 如果目标文件夹下已经有"整理后"目录，提示用户但不要中断。

操作步骤

  1. 新建文件夹 ~/Documents/trae-projects/file-organizer。

  2. Trae 打开它。

  3. 把上面的提示词粘贴到 Builder 对话框，发送。

  4. Trae 会创建 organize_files.py，点"全部接受"。

  5. 让 Trae 跑一下：

    先在 ~/Desktop/test 创建几个测试文件试试，跑通后再处理真实桌面。

  6. Trae 会创建测试文件、执行脚本、打印结果。

  7. 测试 OK 之后，把目标改成你真实的 ~/Desktop 或 ~/Downloads。

效果

跑完之后你会看到：

要移动 156 个文件，确认吗？(y/n) y

正在处理...
✓ 图片: 移动 67 个 → 整理后/图片/2025-08/ (32个), 整理后/图片/2025-09/ (35个)
✓ 视频: 移动 5 个
✓ 截图: 移动 42 个
✓ PDF: 移动 18 个
✓ Office: 移动 12 个
✓ 安装包: 移动 8 个
✓ 其他: 移动 4 个

完成！耗时 0.8 秒。
日志: organize_log.txt

进阶玩法

  • 让 Trae 给脚本加一个"逆操作"功能 → restore_files.py，能恢复原状。
  • 加一个 cron 定时任务，每周日晚上自动整理一次。
  • 把脚本封装成 Mac 的 Shortcut 或 Windows 的 .bat，双击即跑。

07.2 家庭账本网页

痛点

家里 4 个人，老婆记账在手机记账 App，你记账在 Excel，老人买菜记在小本子。 没有一个地方能看到全家的总收支。

目标

做一个本地 HTML 账本，全家共用一份 JSON 数据文件，看：

  • 本月总支出 / 总收入。
  • 按"吃饭 / 教育 / 医疗 / 娱乐 / 房贷 / 其他"的饼图。
  • 每个家庭成员的支出占比柱状图。
  • 最近 30 天每天的支出折线图。
  • 一个表格列出所有交易，可筛选、可排序。

完整提示词

@Builder

帮我做一个家庭账本网页 family-ledger.html，要求：

【数据】
- 数据存在同目录的 transactions.json，结构：
  {
    "transactions": [
      {"id": 1, "date": "2026-04-01", "person": "爸爸", "category": "吃饭", "amount": -85, "note": "早餐外卖"},
      {"id": 2, "date": "2026-04-01", "person": "妈妈", "category": "吃饭", "amount": -120, "note": "买菜"},
      ...
    ]
  }
- amount 负数是支出，正数是收入。
- 我会用文本编辑器手动维护这个 JSON。

【功能】
1. 顶部：本月总支出 / 总收入 / 净结余三个大数字卡片。
2. 中部左：饼图展示本月各分类支出占比。
3. 中部右：柱状图展示本月各家庭成员支出占比。
4. 中部下：折线图展示最近 30 天每天的支出。
5. 底部：完整交易表格，可按列排序，顶部有"按人 / 按分类 / 按月"三个筛选下拉。
6. 表格右上角"添加交易"按钮，点击弹窗填入新交易，**保存时直接下载更新后的 JSON 让我替换原文件**（不写入服务器，纯前端）。

【视觉】
- 配色：莫兰迪色系，米白背景。
- 字体：思源黑体。
- 圆角 + 柔和阴影。
- 移动端友好（手机上图表自动堆叠）。

【技术栈】
- 单文件 HTML。
- TailwindCSS（CDN）。
- Chart.js（CDN）。
- 原生 JS。

【交付】
- family-ledger.html（页面）
- transactions.json（示例数据，包含 2026-04 月各家庭成员各类支出共 30 条假数据）
- README.md（用法说明，包括"怎么添加新交易""怎么备份"）

【先告诉我方案，我确认后再写】

关键学习点

  • 用 JSON 当"轻量数据库"——非程序员也能维护。
  • 纯前端实现"添加 + 下载新 JSON"，没有后端的复杂度。
  • Chart.js 的饼图 / 柱图 / 折线图三种图表的基础用法。

进阶玩法

  • 加一个"导入微信账单"功能（需要先在微信导出账单 CSV）。
  • 加一个"月度复盘"——AI 自动分析"本月你在哪类花得最多 / 比上月增加了多少"。
  • 加一个"家庭目标"——比如"今年存款 5 万"，进度条展示。

07.3 旅行规划页（带地图）

痛点

每次和家人 / 朋友规划旅行，群里 10 几个人各发各的链接、各推各的餐厅，没有一个地方汇总。

目标

做一个带地图的旅行规划网页——

  • 行程按天分块。
  • 每个景点 / 餐厅有：图、地址、推荐理由、人均、营业时间。
  • 顶部一张地图标出所有点。
  • 可以选择"按时间顺序"或"按距离最优顺序"重排。

完整提示词

@Builder

帮我做一个旅行规划网页 trip-plan.html，目的地是日本京都，5 天 4 晚，2 个人。

【行程数据】
我会在 trip-data.json 维护，结构：
{
  "trip": {
    "destination": "京都",
    "days": 5,
    "people": 2,
    "budget": 15000
  },
  "schedule": [
    {
      "day": 1,
      "date": "2026-05-01",
      "items": [
        {
          "type": "景点", // 景点 / 餐厅 / 酒店 / 交通
          "name": "清水寺",
          "address": "京都市東山区清水1丁目294",
          "lat": 34.9949, "lng": 135.7851,
          "image": "https://...", // 占位图
          "reason": "京都必去，黄昏景色绝美",
          "price": "门票 400 日元",
          "open": "06:00 - 18:00",
          "duration": "1.5 小时",
          "tips": "穿舒适的鞋"
        },
        ...
      ]
    },
    ...
  ]
}

【页面功能】
1. 顶部：行程概览卡片（目的地 / 天数 / 人数 / 总预算 / 当前花费）。
2. 地图：用 Leaflet（开源）+ OpenStreetMap 瓦片（不用 Google），标出所有点，按天用不同颜色。
3. 行程：按"Day 1 / Day 2..."分卡片，每天展示当天的景点、餐厅、酒店。
4. 每个景点卡片有：图、名字、地址、推荐理由、人均、营业时间、预计停留、Tips。
5. 右上角"打印行程"按钮，CSS 适配 A4 打印。

【视觉】
- 风格：日式淡雅，米白 + 抹茶绿 + 樱花粉。
- 字体：思源黑体（中文）+ Noto Serif JP（日文景点名）。
- 移动端友好。

【技术栈】
- 单文件 HTML（数据除外）。
- TailwindCSS（CDN）。
- Leaflet（CDN）+ OpenStreetMap。
- 原生 JS。

【交付】
- trip-plan.html
- trip-data.json（包含京都 5 天的真实行程示例数据）
- README.md（使用说明）

【先告诉我方案，我确认后再写】

进阶玩法

  • 用 #Web 让 Trae 抓"小红书 / 马蜂窝 京都 5 天"的真实攻略，自动填充推荐景点。
  • 加"行程优化"按钮——AI 按最短距离重排同一天的景点。
  • 加"打卡"功能——出发后每到一个景点点一下打勾。

07.4 婚礼/生日邀请函网页

痛点

发请帖太正式，发微信图片不专业，建电子请柬要付费。 你想要一个有点设计感、能转发、能让客人在线 RSVP的电子请柬。

目标

做一个能微信转发的电子邀请函网页——

  • 顶部一张大图（婚纱照 / 宝宝照 / 生日主题）。
  • 一段优美的文案介绍场合。
  • 时间、地点、地图。
  • "我会去 / 我去不了" 两个按钮，点击后弹出可填写的表单。
  • 提交后数据存到 localStorage（纯前端，不需要服务器）。
  • 主办方点"查看回复"按钮可以看所有 RSVP 列表。

完整提示词

@Builder

帮我做一个生日邀请函 birthday-invitation.html，是给我女儿 5 岁生日的。

【信息】
- 主角：朵朵
- 年龄：5 岁
- 时间：2026 年 5 月 1 日 下午 4:00
- 地点：杭州西湖边某餐厅（地址：杭州市西湖区南山路 100 号）
- 主题：粉色公主
- 主办：朵朵爸妈

【页面要求】

1. 顶部：宝宝照片占位图 + 一行毛笔字风格"朵朵 5 岁啦"。
2. 第二屏：手写体文案——
   "亲爱的朋友：
    朵朵就要 5 岁啦！
    诚挚邀请您参加她的生日派对，
    一起见证她的成长瞬间～
    爱你的 朵朵爸妈"
3. 第三屏：时间地点卡片，地点带"复制地址 / 导航"按钮（导航跳到高德地图链接）。
4. 第四屏：派对流程时间轴（4:00 入场 / 4:30 切蛋糕 / 5:00 游戏 / 6:00 晚餐 / 7:30 散场）。
5. 第五屏："我会去 / 我去不了" 两个按钮。
   - 点"我会去"弹窗：姓名、人数（含小孩）、是否对食物过敏。
   - 点"我去不了"弹窗：姓名、留言（可选）。
   - 提交后数据存 localStorage。
6. 隐藏入口：地址栏加 ?admin=1 显示"已收到回复"列表，可以导出 CSV。

【视觉】
- 整体：粉色 + 金色，少女心但不土。
- 字体：手写体（中文用"霞鹜文楷"WebFont，英文用 Pacifico）。
- 圆角大、阴影柔、配少量花朵装饰图（CSS 画或 SVG）。
- 入场动画：每屏滚动到时淡入。
- 移动端必须完美（这是发微信用的）。

【技术栈】
- 单文件 HTML。
- TailwindCSS（CDN）+ Google Fonts（CDN）。
- 原生 JS（动画用 Intersection Observer）。

【交付】
- birthday-invitation.html
- README.md

【先告诉我方案，我确认后再写】

进阶玩法

  • 把这个改成婚礼邀请函（信息换一下即可）。
  • 让 AI 用 Web Audio API 加一段背景音乐（可静音）。
  • 用 GitHub Pages 或 Vercel 把页面发出去（第十一章会教）。

07.5 健身打卡 + 月度排行

痛点

全家想一起健身——爸爸跑步、妈妈瑜伽、自己撸铁、孩子跳绳—— 但是没有一个地方能看大家都在坚持，互相督促。

目标

做一个全家健身打卡网页：

  • 每个人独立打卡（跑步 / 瑜伽 / 撸铁 / 跳绳 / 自由）。
  • 月度排行榜：谁打卡天数最多。
  • 个人页：每月日历视图，看哪天打了哪天没打。
  • 数据本地存储 + 可以一键导出 / 导入 JSON 备份。

完整提示词

@Builder

帮我做一个家庭健身打卡网页 family-fitness.html。

【家庭成员】
预设 4 人，可以在设置里改：
- 爸爸（默认运动：跑步）
- 妈妈（默认运动：瑜伽）
- 我（默认运动：撸铁）
- 孩子（默认运动：跳绳）
每个人有自己的颜色（爸爸蓝、妈妈粉、我绿、孩子橙）。

【页面布局】
1. 顶部 Header：今天日期 + "今日打卡进度 N/4 人"。
2. 主区分两栏：
   - 左：本月排行榜（按打卡天数排序，前三名有 🥇🥈🥉）。
   - 右：每个成员一张卡片，今天是否打卡 / 本月共打卡 X 天 / 连续打卡 Y 天 / 大大的"打卡"按钮。
3. 点某成员卡片进入个人页：日历视图（一个月），打卡的日子用该成员颜色填充，点格子能看当天写的备注。
4. 设置页：
   - 修改家庭成员（增删改名 / 改颜色 / 改默认运动）。
   - 一键导出全家数据为 JSON。
   - 一键导入 JSON 恢复。

【数据】
- 全部存 localStorage。
- 数据结构清晰，方便手动编辑。

【视觉】
- 整体：简洁、舒服、不花哨。
- 配色：白底 + 4 种成员色 + 灰色辅助。
- 移动端友好（手机打开就是一日一打卡的简洁视图）。

【技术栈】
- 单文件 HTML。
- TailwindCSS（CDN）。
- 原生 JS。

【交付】
- family-fitness.html
- README.md

【先告诉我方案，我确认后再写】

进阶玩法

  • 加一个"本月目标"——比如"全家共打卡 80 次"，进度条展示。
  • 加"挑战"——七夕情人节那一周大家都打卡，全员加冕"健身夫妻"徽章。
  • 把数据存到云（用 Supabase 免费版，第十一章会教）。

07.6 给爸妈的养生天气提醒页

痛点

爸妈年纪大，每天看天气、记吃药、读养生公众号，眼花缭乱。 你想给他们做一个手机首页书签的简单页面——一打开就能看到关键信息。

目标

做一个适老化的本地天气 + 养生提醒页：

  • 字号大（基础 22px+）。
  • 颜色对比强（深色文字 + 浅色背景）。
  • 最少元素，不放装饰。
  • 顶部：今天日期、星期。
  • 上方：今天的天气、温度、穿衣建议。
  • 中部：今日吃药提醒（可自己配置）。
  • 下方：今日养生小知识（一条，每天换）。
  • 底部：紧急联系电话（自己 / 配偶 / 120）。

完整提示词

@Builder

帮我做一个适合 60 岁父母用的简洁信息页 elder-info.html。

【目标用户】
- 60-70 岁老人。
- 视力下降，需要大字号。
- 不熟悉手机操作，所有内容必须一打开就看到，不需要点击。

【内容板块】（按从上到下顺序）

1. 日期：今天是 2026 年 4 月 19 日 星期六（农历也显示）。
2. 天气：从 wttr.in 免费 API 获取（无需 Key）。
   - 温度（巨大字号）。
   - 一句话穿衣建议（基于温度）。
   - 是否下雨提醒（如果今天有雨："下午有雨，记得带伞"）。
3. 今日吃药：
   - 列出我配置的药品 + 时间。
   - 配置存 localStorage，子女可以远程改（暂时手动）。
   - 药未吃显示红色"未吃"，点击变绿色"已吃"。
4. 今日养生小知识：
   - 一段 50-100 字的科普（轮流展示，每天换）。
   - 内置 30 条预制内容（"多喝温水""适当晒太阳""一日三餐定时"等）。
5. 紧急联系：
   - 三个大按钮："女儿（点击拨号）" "老伴（点击拨号）" "120 急救"。

【视觉】
- 字号：基础 22px，关键信息 36px+。
- 配色：白底 + 黑字 + 红色（重点）+ 蓝色（链接）。
- 字体：思源黑体 Bold（粗一点，老人看得清）。
- 不要任何装饰图、不要动画。
- 间距宽松。
- 移动端默认（爸妈用手机）。

【技术栈】
- 单文件 HTML。
- 内联所有 CSS 和 JS。
- 不依赖任何 CDN（避免他们家网络慢）。
- 唯一外部 API: wttr.in（直接 fetch）。

【交付】
- elder-info.html
- 详细 README.md（图文教爸妈"怎么把这个加到手机首页书签"）

【先告诉我方案，我确认后再写】

关键技巧

  • wttr.in 是个免费的天气 API，返回 JSON，不需要注册：https://wttr.in/Hangzhou?format=j1
  • 让 Trae 在做完之后特别写一份"教爸妈用"的图文 README，截图说明"怎么把这个网页加到手机首页"。
  • 后续可以让 Trae 用 GitHub Pages 把页面发布出去（第十一章），爸妈直接收藏网址。

进阶玩法

  • 加"一键叫车"按钮（跳到滴滴小程序）。
  • 加"在线挂号"快捷入口（跳到当地 12320 / 微医平台）。
  • 加"今日新闻"（用 RSS 抓人民日报头条）。

07.7 整理读书笔记成可搜索网页

痛点

你这几年读了 80 本书，笔记散在 Notion、印象笔记、微信收藏、word 文档里—— 找一句话要花 20 分钟。

目标

做一个本地可搜索的读书笔记网页：

  • 把所有笔记导出成 .md 文件放在一个文件夹。
  • Trae 自动扫描这个文件夹，做成网页。
  • 顶部一个搜索框，全文搜索。
  • 左侧按"书名 / 作者 / 标签"分类。
  • 点击某条笔记可以看完整内容、原书 / 章节信息。

完整提示词

@Builder

我桌面有个文件夹 ~/Desktop/我的读书笔记/，里面有 80 个 .md 文件，每个文件是一本书的笔记。

每个 .md 文件的结构大致是：
---
title: 《被讨厌的勇气》
author: 岸见一郎
read_date: 2024-03-15
tags: [心理学, 哲学, 个人成长]
rating: 5
---

## 章节 1 标题
- 笔记 1
- 笔记 2

## 章节 2 标题
...

帮我做一个 notes-viewer.html 网页，功能：

【数据】
- 自动扫描 ~/Desktop/我的读书笔记/ 下所有 .md 文件，解析 frontmatter（用 js-yaml CDN）和内容。
- 由于浏览器不能直接读本地文件夹，请生成一个辅助脚本 build-data.py（Python 标准库），扫描文件夹生成 notes-data.json。
- 网页加载 notes-data.json 渲染。

【页面布局】
1. 顶部：搜索框（占据一整行），实时搜索（输入即过滤）。
2. 左侧：
   - 按"标签"分组（点击标签筛选）。
   - 按"作者"列表。
   - 按"评分 ★★★★★"筛选。
3. 主区：
   - 默认展示所有书的卡片（书名、作者、读完日期、评分、标签）。
   - 选中筛选后过滤。
   - 点击某本书进入"详情视图"，显示完整笔记内容（Markdown 渲染）。
4. 顶部右：当前总书数 / 本月读完几本 / 今年读完几本。

【视觉】
- 仿 Notion 的清爽风格。
- 配色：白底 + 黑字 + 浅灰辅助。
- 字体：中文思源黑体，英文 system-ui。
- 主区两栏式（手机自动堆叠）。

【交付】
- notes-viewer.html（页面）
- build-data.py（扫描 .md 生成 JSON 的辅助脚本）
- notes-data.json（示例数据，5 本书）
- README.md（用法）

【先告诉我方案，我确认后再写】

关键技巧

  • 浏览器不能直接读本地文件夹（安全限制），所以拆成"先扫描 → 生成 JSON → 网页加载 JSON"的两步。
  • 配上一个"双击运行"的脚本（Mac 的 .command / Windows 的 .bat），让"重新扫描"变成一键操作。
  • 让 Trae 自动给笔记做"AI 摘要"——批量调 DeepSeek 给每本书写一句话总结。

进阶玩法

  • 让 Trae 自动给每本书"生成关键词标签云"。
  • 加"今日重读"——随机推送一条历史笔记到首页。
  • 接到 Notion 数据库做双向同步（用 MCP，第九章会讲）。

八、本章常见的疑问

Q1：我做完这些项目之后，能放到云上让别人也能用吗？

能。第十一章会教你完整的"从本地到上线"流程，免费的 Vercel + 一个自己的域名就够。

Q2：我做出来的工具能"打包成 App"吗？

能。HTML 工具可以用 Tauri / Electron 打包成桌面 App，让 Trae 帮你做。但对小工具来说不必要——浏览器就够了。

Q3：我做的工具数据存在 localStorage，换电脑就没了，怎么办？

每个项目都给"导出 / 导入 JSON"按钮（本章 7.5 已经有），换电脑导一下即可。长期方案：第十一章会教用 Supabase 免费数据库。

Q4：如果 Trae 第一次给的代码有 Bug 怎么办？

直接告诉它："第 3 步点击保存按钮没反应，浏览器控制台报 xxxx"，它会帮你修。不用自己看代码。

Q5：这些项目我做完之后还能加新功能吗？

能。每次重新打开项目，对话框继续给指令——"加一个 XX 按钮""把 YY 改成 ZZ"，Trae 会接着改。

Q6：我没有时间做 7 个，挑一个最有价值的开始呢？

新手推荐 07.1 桌面文件智能分类器——15 分钟就能跑通，立刻有"我会用 Trae 了"的成就感。然后 07.4 邀请函，能直接发给朋友炫耀。

九、本章一图回顾（文字版）

本章你学会了什么？
    │
    ├─ 用 Builder 做 7 个生活小工具
    ├─ 把 JSON 当"轻量数据库"的思路
    ├─ 用 localStorage 做"无后端的应用"
    ├─ 用免费 API（wttr.in / OpenStreetMap）替代付费服务
    └─ 适老化设计 / 适合儿童 / 适合家庭场景的具体做法

下一步呢？
    │
    └─ 第八章：8 个工作场景实战，把这些能力搬到职场

下一章 第八章 工作场景实战，我们把"生活级"工具升级到"职场级"——周报、客户跟进、Excel 透视、PDF 拆合……