【学习工作赛道】AI 网页任务导航仪：把复杂网页变成可执行路径

TRAE AI 创造力大赛 【大赛初赛专区】
1

【标签】 学习工作

【标题】【学习工作赛道】AI 网页任务导航仪：把复杂网页变成可执行路径

【正文】 如下

0. 先和大家打个招呼吧 :waving_hand:

  • 大家好，我是一名正在学习用 AI 工具的医学毕业生，正处于探索职业转行的过渡期。
  • 我平时经常遇到一种情况：明明只是想下载一个工具、提交一个作品、找一个官方入口，但打开官网、社区、文档页后，页面里到处都是按钮、链接、FAQ 和规则说明，看了很久还是不知道下一步该点哪里。
  • 于是这次我用 TRAE 做了一个 Demo：AI 网页任务导航仪。 它不是单纯总结网页内容，而是根据用户目标，在真实网页截图中判断当前页面、指出推荐入口、提醒容易漏掉的步骤，并输出可复制的行动清单。

1. Demo 简介

  • Demo 名称： AI 网页任务导航仪；产品形态：交互式 HTML 网页 Demo（未来想做成一个网页插件）

  • 面向谁：不熟悉复杂官网和产品文档的新手用户，经常需要下载工具、查找入口、提交材料的学生或创作者，面对比赛报名、社区发帖、官方文档时容易迷路的人；

  • 主要功能：根据用户目标判断当前网页状态——在网页截图中高亮推荐入口——给出下一步操作建议——提醒容易遗漏的风险点——输出可复制的行动清单。

  • 当前 Demo 展示了两个真实网页任务：1. 下载 Python 官方安装包

    演示1Python下载导航
    演示1Python下载导航1911×1376 289 KB

    2. 找到 TRAE 初赛发帖入口并发布 Demo 作品帖

    演示2寻找trae初赛发帖入口
    演示2寻找trae初赛发帖入口1958×1388 341 KB

2. Demo 创作思路

  • 灵感来源：这个想法来自我自己的真实经历。 我在报名比赛、找工具下载页、看教程和文档时，经常不是不会搜索，而是卡在“下一步到底点哪里”。很多网页信息很多，入口很多，官方说明又分散在不同页面里。对熟悉的人来说可能很简单，但对第一次接触的人来说，很容易绕很久；

  • 想解决的问题：我想做的不是一个“网页总结器”，而是一个“网页任务导航仪”。 它更像一个站在旁边的助手：你告诉它想做什么——它判断你现在在哪个页面——它告诉你下一步应该点哪里——它提醒你哪些地方容易漏——最后帮你整理出行动清单；

  • 为什么做这个方向：我做这个方向时做了一个取舍，初赛 Demo 不追求直接读取真实网页和自动操作浏览器，而是先用真实网页截图模拟核心体验。这样可以更集中地展示产品逻辑，也更容易控制演示稳定性。

3. Demo 体验地址（三选一）

  • Demo 体验文件： 本作品提供交互式 HTML Demo 文件。 我已将 HTML 文件打包为 Zip 格式上传到本帖附件中。

  • 文件名： AI网页任务导航仪_初赛Demo.zip 打开方式： 解压后双击 HTML 文件即可体验。 建议优先在电脑端体验，电脑端可以看到更完整的悬浮窗引导效果。

  • AI网页任务导航仪_初赛Demo.zip (2.9 MB)

4. TRAE 实践过程

  • 这个 Demo 是我和 TRAE 多轮配合完成的。 一开始我只有一个很模糊的想法：能不能做一个工具，帮助用户在复杂网页里找到下一步。后来我把这个想法拆成几个问题交给 TRAE——这个 Demo 应该展示什么核心体验？——初赛阶段哪些功能必须做，哪些可以先不做？——如何用真实网页截图模拟“AI 指路”的感觉？——如何做高亮框、提示气泡和步骤切换？——如何让移动端也能稳定浏览？

  • 开发过程中，TRAE 帮我完成了：1、页面结构搭建 2、真实网页任务演示区 3、两个任务流程的切换 4、AI 助手面板 5、高亮框和提示气泡 6、自动滚动定位 7、风险提醒和行动清单 8、移动端布局适配 9、最终文案和页面收束

  • 中间也踩了很多坑，比如手机端图片不显示、网页框和 AI 面板不对齐、长图滚动不明显、步骤切换闪烁等。每一轮我都把问题描述给 TRAE，再让它做小范围修复，最后才把页面收束到现在这个版本。

  • 关键步骤截图：1、Session1 初赛Demo需求拆解

    session1需求拆解
    session1需求拆解2560×1528 274 KB
    2、Session2 核心交互Demo开发

    session2核心交互开发1
    session2核心交互开发11920×1146 195 KB
    3、Session3 UI与手机端优化

    session3 ui与手机端优化
    session3 ui与手机端优化2560×1528 440 KB
    4、Session4 真实网页案例增强

    session4a
    session4a2560×1528 394 KB

  • 关键任务对话的 Session ID： 1、Session1 初赛Demo需求拆解 ： 4087310816907162:4dc6fc5f863fe939f2ba01344e418e83_6a3a71247dd4840444cf35f9.6a4a4aaa04219643f42a0aa1.6a4a4aaa73dc8b736bea42ae:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/5 20:15:01) ***2、Session2 核心交互Demo开发 ：***4087310816907162:8540a2a9aefbd227128eca0ba649ef85_6a3a71247dd4840444cf35f9.6a4a4e5b04219643f42a0aad.6a4a4e5b2e09f310efa5d8e0:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/5 20:36:24) ***3、Session3 UI与手机端优化：***4087310816907162:e313a6c5eccb3aa38a8a083206b3f986_6a3a71247dd4840444cf35f9.6a4b73b33bdb710b52f6ef7e.6a4b73b3f260a8180d1391d2:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/6 17:21:56) ***4、Session4 真实网页案例增强：***4087310816907162:8ee4c298ef0993d1542383b797994b65_6a3a71247dd4840444cf35f9.6a4c8774455d7c8e23b6080e.6a4c877396645130878ed5bb:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 12:58:30)

5. 对应的报名审核通过的帖子链接：https://forum.trae.cn/t/topic/43403?u=ruhe

1 个赞