我用Trae 做了一个有意思的Agent 「网页内容重构助手」。 点击 https://s.trae.com.cn/a/b65d7e 立即复刻，一起来玩吧！

Agent 简介

网页内容重构助手能使用 Playwright 抓取网页 HTML 结构与内容元素，借助 LLM 分析网页布局并给出优化建议，例如调整内容展示顺序、优化导航结构等。再通过 MCP 协调，利用 Playwright 的 JavaScript 执行能力动态修改网页结构，实现即时的网页重构预览，让用户可以实时查看修改效果，打造更优质的网页浏览体验。

Agent 创作构思

目标定位

用户群体：主要面向网页设计者、开发者、内容创作者以及需要优化网页展示效果的个人和企业。

核心需求：帮助用户快速分析网页布局，提出优化建议，并实时预览修改效果，减少手动调整的时间和精力。

应用场景

网页设计与开发：帮助设计师和开发者快速优化网页布局，提升用户体验。

内容创作：内容创作者可以通过优化网页布局，更好地展示内容，吸引用户。

企业官网优化：企业可以利用该工具优化官网布局，提升品牌形象和用户满意度。

创新点

实时预览：用户可以即时看到修改效果，无需手动刷新页面。

智能分析：借助 LLM 的强大分析能力，提供专业的优化建议。

动态修改：通过 Playwright 的 JavaScript 执行能力，实现网页结构的动态调整。

技术实现

这个智能体主要由以下几个核心模块组成：

1. Playwright 模块：负责抓取网页的 HTML 结构和内容元素，以及动态修改网页结构并实现即时预览。
2. LLM 分析模块：对抓取到的网页内容进行分析，识别布局结构，生成优化建议。
3. MCP 协调模块：作为中间层，协调 Playwright 和 LLM 的工作，确保流程的高效和流畅。
4. 用户交互模块：提供用户界面，接收用户输入，展示优化建议和预览效果。

创建智能体

1，进入 Trae 右侧栏 选择智能体 点击创建即可

2，输入名称 填写提示词

3，添加并配置所需 MCP

然后直接将下面的配置复制进去

当MCP确定可用后，在智能体中添加工具。

效果展示

提取并分析掘金链接

更改导航栏颜色

删除导航栏

重新生成一个导航栏

总结

通过基于 Trae 的网页内容重构助手的创建与应用，我们能够充分感受到智能化工具在提升网页设计与重构效率方面的重要价值。从环境部署到智能体创建、Prompt 编排、工具配置，再到效果展示，整个过程为用户呈现了一个实用、高效的网页优化解决方案。该智能助手不仅能准确分析网页问题，提供专业优化建议，还能利用 Playwright 的动态修改能力实现即时预览，让用户实时查看重构效果，大大简化了传统网页重构的繁琐流程，降低了对专业人员的依赖，使网页设计与重构变得更加便捷、高效，为提升用户体验和网站运营效果提供了有力支持。