14.升级之前做的工具-衍挚资源站

先做第一个：A. 旅行助手升级（30分钟）

在 Trae 里打开 travel-agent.html

第 1 步：备份

文件 → 另存为 → travel-agent-backup.html（万一改坏了能恢复）

第 2 步：发需求给 AI

按 Ctrl + L，完整复制下面这段话：

plain

我已经有一个3步骤的旅行助手Agent（分析目的地→规划行程→旅行贴士），接入Kimi API（kimi-k2.6，temperature:1）。
现在请帮我升级，增加2个步骤，变成5步Agent：

Step 4：预算计算器
- 调用Kimi，提示词："请为[目的地]估算一个3天2夜旅行的预算，包括：交通、住宿、餐饮、门票、购物，给出每项的预估金额和总预算"
- 显示状态："正在计算预算..."
- 结果用表格形式展示（项目、预估金额）

Step 5：生成精美攻略卡片
- 调用Kimi，提示词："请把前面的分析综合起来，生成一份精美的旅行攻略，包含：目的地亮点、3天行程、预算参考、必备清单。用emoji装饰，分段清晰，像小红书笔记一样美观"
- 显示状态："正在生成攻略卡片..."
- 结果用一个漂亮的卡片区域展示，背景浅色，带边框阴影，像一张精美的旅游海报

其他要求：
1. 5个步骤依次执行，每个步骤完成后显示✅，当前步骤显示⏳
2. 最后加一个"重新规划"按钮，点击后清空所有内容，可以重新输入目的地
3. 加一个"复制攻略"按钮，点击后复制Step 5的攻略内容
4. 保持粉色系风格
5. 每行代码加中文注释
6. 给我完整代码，直接替换原来的travel-agent.html

第 3 步：应用、保存、测试

点应用
Ctrl + S 保存（覆盖原来的 travel-agent.html）
双击测试，输入”成都”，看5步是否依次完成
测试”复制攻略”和”重新规划”按钮

2
第 1 步：备份

Trae 里打开 ai-copywriter.html文件 → 另存为 → ai-copywriter-backup.html

第 2 步：发需求给 AI

按 Ctrl + L，完整复制下面这段话，按回车：

plain

我已经有一个接入Kimi API的小红书文案生成器（模型kimi-k2.6，temperature:1）。
现在请帮我升级，增加以下功能：

1. 风格选择：
   - 在输入框上方加一排按钮/下拉菜单，可以选择4种平台风格：
     * 小红书（种草风，带emoji，分段）
     * 抖音（口语化，有网感，短句，带#话题）
     * 朋友圈（生活化，真情实感，配图文案）
     * 微博（热搜感，短平快，带话题和表情）
   - 默认选中"小红书"

2. 一键复制：
   - 生成结果区域加一个"📋 复制文案"按钮
   - 点击后把生成的文案复制到剪贴板
   - 复制后按钮文字变成"✅ 已复制"，2秒后恢复

3. 重新生成：
   - 生成结果旁边加一个"🔄 重新生成"按钮
   - 点击后用同样的产品和风格再生成一版不同的文案

4. 字数统计：
   - 结果显示区域底部显示"共XX字"

5. 历史记录：
   - 页面右侧或底部显示"最近生成"，保存最近3条记录，点击可以快速查看

技术要求：
- 用HTML/CSS/JS实现
- API Key用变量存储，模型kimi-k2.6，temperature:1
- 根据选择的风格，在系统提示词里切换不同的角色设定
- 保持粉色系、圆角、现代感
- 适配手机和电脑
- 每行代码加中文注释
- 给我完整代码，直接替换原来的ai-copywriter.html

第 3 步：应用、保存、测试

看历史记录有没有保存

点应用

Ctrl + S 保存（覆盖原来的 ai-copywriter.html）

双击测试：

输入”口红”

选”抖音”风格，点生成，看文案是不是抖音风格（带#话题）

点”复制文案”，看能不能复制

点”重新生成”，看是不是不同内容

计算器升级
第 1 步：备份

Trae 里打开 calculator.html文件 → 另存为 → calculator-backup.html

第 2 步：发需求给 AI

按 Ctrl + L，完整复制下面这段话，按回车：

plain

我已经有一个网页计算器（支持加减乘除）。
现在请帮我升级，增加以下功能：

1. 计算过程可视化：
   - 每次计算时，在结果显示上方显示公式步骤
   - 比如输入 5 + 3，显示："计算过程：5 + 3 = 8"
   - 比如输入 10 * 2，显示："计算过程：10 × 2 = 20"

2. 历史记录：
   - 计算器右侧或下方显示"计算历史"
   - 保存最近10条计算记录（时间 + 公式 + 结果）
   - 点击历史记录可以快速回填到输入框
   - 有一个"清空历史"按钮

3. 科学计算功能：
   - 加4个新按钮：平方(x²)、开方(√)、百分比(%)、取反(±)
   - 点击后实时计算并显示过程

4. 键盘支持：
   - 按数字键和回车键可以直接输入和计算
   - 按ESC键清空

技术要求：
- 用HTML/CSS/JS实现
- 保持和现有网站一致的深色/现代风格（和主页匹配）
- 适配手机和电脑
- 每行代码加中文注释
- 给我完整代码，直接替换原来的calculator.html

第 3 步：应用、保存、测试

按键盘数字键看能不能输入

点应用

Ctrl + S 保存（覆盖原来的 calculator.html）

双击测试：

输入 5 + 3，看有没有显示”计算过程”

看右侧有没有历史记录

点历史记录能不能回填

测试平方、开方按钮

主页大升级
第 1 步：备份

Trae 里打开 index.html文件 → 另存为 → index-backup.html

第 2 步：发需求给 AI

按 Ctrl + L，完整复制下面这段话，按回车：

plain

我已经有一个AI学习作品集主页（8个作品卡片，深色背景，悬停动画）。
现在请帮我做一次视觉大升级，增加以下效果：

1. 粒子动态背景：
   - 页面背景加Canvas粒子效果（星星/光点）
   - 粒子缓慢飘动，鼠标移动时粒子会散开或跟随
   - 颜色用淡蓝色/淡紫色，和深色背景融合
   - 不遮挡文字内容

2. 打字机效果标题：
   - "欢迎来到我的AI学习作品集"这个标题
   - 页面加载时，文字像打字一样逐字出现
   - 有闪烁的光标（|）
   - 打完字后光标消失或停止闪烁

3. 访问计数器：
   - 导航栏或页脚加一个"👁️ 您是第 X 位访客"
   - 用localStorage实现（每次刷新数字+1，换浏览器会重置，但演示效果够用了）

4. 滚动进度条：
   - 页面顶部加一个细长的进度条
   - 随着页面滚动，进度条从左到右填充
   - 颜色用渐变色（蓝到紫）

5. 卡片点击波纹效果：
   - 点击作品卡片时，从点击位置扩散出圆形波纹
   - 像Material Design的水波纹

6. 返回顶部按钮：
   - 页面滚动超过一定距离后，右下角出现一个"↑"按钮
   - 点击后平滑滚动到顶部

技术要求：
- 用HTML/CSS/JS实现，粒子效果用Canvas
- 保持现有的8个作品卡片、布局、颜色风格
- 所有新增效果不要影响原有功能
- 适配手机和电脑
- 每行代码加中文注释
- 给我完整代码，直接替换原来的index.html