鱼皮AI导航
鱼皮AI导航
  • 主页
  • 社区
  • AI工具
  • AI知识库
  • AI提示词
  • MCP
  • Skills
  • AI学习资源
  • AI资讯
  • GitHub开源
登录/注册
站长：程序员鱼皮 老鱼简历 商务合作 增值电信业务经营许可证
2026 鱼皮AI导航 | 沪ICP备19026706号-6
11
7
2

使用字节 TRAE 半小时开发一个牛马工具

luckySnail
luckySnail
2025-01-21 23:13
阅读 2363
luckySnail
2025-01-21 23:13
阅读 2363

大家好我是 luckySnail。在浏览流媒体的时候，发现都在推荐这个工具，字节刚刚发布了 AI 编辑器 - TRAE（The Real AI Engineer），真正的 AI 引擎吗？，必须赶紧体验一波，刚好想要开发一个小工具，希望它不要让我失望。偷偷说一下它已经让 windows 用户失望了，因为它目前仅支持 mac 电脑。你可以看冴羽的这篇了解TRAE：https://juejin.cn/post/7461825527059611686

初体验

让我们新建一个文件夹，为什么叫这个名字，接下来你就知道了。

image-20250120234325232

接下来我们要做一个工具来帮我监控我的公司项目是否都正常运行。如果出问题了，就需要赶紧通知我出事了，赶紧爬起来修 bug ！

简单的梳理了一下需求，我使用了它的 builder 能力来初始化项目，提问：“我要做一个小的工具来帮我们监控我的公司项目是否都正常运行。如果出问题了，就需要赶紧通知我出事了，赶紧修 bug 。通知方式是邮箱通知，使用前端技术实现，我如何实现？我目前调研可以使用 Playwright 来做充分的网站可用性检测，使用nodemailer 来进行邮箱通知，由于 nodemailer 是必须 node 环境，所以你需要给我搭建一个 node 服务”，这里我是预先告诉了它如何实现，防止它给出不合理的实现方式。

然后它很快理解了我们的需求，并且搭建好了一个基础服务：

image-20250121022615877

启动项目后发现邮箱服务是有问题的，于是我把错误信息给它，然后问它为什么？如何修复？但是会出现：

image-20250121011726558

于是我只能切换 chat 模式，发现是正常的，我把问题和相关代码（使用引用能力）给到它。它也很快发现了问题，然后给出了解决的方法。

我模拟了一个网站出现问题的场景，然后我们可以看到当检查网站存在问题的时候，就会触发发送邮件的逻辑：

image-20250121012111907

到这里基本的流程算是跑通了，我们可以继续提问 AI，代码层面是否可以继续优化：

image-20250121020151382

它给出了一些比较好的建议，我们可以点击“全部接受”，然后先安装依赖，再次启动查看一下效果：

image-20250121020340837

这一次，它给出了更加细致的日志信息，但是我们发现最后一个 error 不太正常，我们问一下 AI 这个是否是正常日志，AI 发现了问题，并进行了修复，我们重启验证逻辑没有问题

image-20250121020902787

邮箱也收到了告警信息！

到这里其实基本的牛马已经做好了，它能够实时的帮我监控网站是否运行良好，保证服务异常及时通知到人。但是真正场景下，需要的不仅仅是网站正常加载，还有很多其他需要监控的东西。

下面我们来看看 AI 的代码水平怎么样吧！

▼
js
复制代码
const { chromium } = require("@playwright/test");
const nodemailer = require("nodemailer");
const cron = require("node-cron");
const winston = require("winston"); // 添加日志库

// 配置日志
const logger = winston.createLogger({
  format: winston.format.combine(winston.format.timestamp(), winston.format.json()),
  transports: [
    new winston.transports.File({ filename: "error.log", level: "error" }),
    new winston.transports.File({ filename: "combined.log" }),
    new winston.transports.Console(),
  ],
});

// 邮件配置
const transporter = nodemailer.createTransport({
  host: "smtp.qq.com",
  port: 465, // 修改为465端口
  secure: true, // 设置为true
  auth: {
    user: "3074994545@qq.com", // 补充完整的QQ邮箱地址
    pass: "xxxx", // QQ邮箱授权码
  },
});

// 要监控的网站列表
const websites = [
  {
    name: "老鱼简历",
    url: "https://laoyujianli.com",
    checkElements: [".laoyu-page-container", ".new-index-page", ".template-item"],
  },
  {
    name: "编程导航",
    url: "https://codefather.cn",
    checkElements: [".ant-layout", ".user-name"],
  },
  {
    name: "面试鸭",
    url: "https://mianshiya.cn", // 移除多余的空格
    checkElements: ["#indexPage", ".ant-list-item", "#ccc"],
    retryCount: 3, // 添加重试次数
    retryDelay: 5000, // 重试延迟时间（毫秒）
  },
];

// 浏览器实例管理
let browserInstance = null;
async function getBrowser() {
  if (!browserInstance) {
    browserInstance = await chromium.launch({
      timeout: 60000,
    });
  }
  return browserInstance;
}

// 检查网站可用性
async function checkWebsite(site) {
  const startTime = Date.now();
  const browser = await getBrowser();
  const context = await browser.newContext({
    userAgent:
      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
  });

  try {
    const page = await context.newPage();
    logger.info(`正在检查网站: ${site.name}`);

    let lastError;
    // 添加重试机制
    for (let i = 0; i < (site.retryCount || 1); i++) {
      try {
        // 设置页面加载超时时间
        await page.goto(site.url, {
          timeout: 30000,
          waitUntil: "networkidle", // 等待网络空闲
        });

        // 检查关键元素是否存在
        for (const selector of site.checkElements) {
          try {
            await page.waitForSelector(selector, { timeout: 5000 });
          } catch (elementError) {
            console.log(`元素 ${selector} 未找到，继续检查其他元素`);
          }
        }

        console.log(`${site.name} 检查通过`);
        return { success: true };
      } catch (error) {
        lastError = error;
        if (i < (site.retryCount || 1) - 1) {
          console.log(`${site.name} 检查失败，等待 ${site.retryDelay || 5000}ms 后重试...`);
          await new Promise((resolve) => setTimeout(resolve, site.retryDelay || 5000));
        }
      }
    }

    console.error(`${site.name} 检查失败:`, lastError.message);
    return {
      success: false,
      error: lastError.message,
    };
  } finally {
    await context.close(); // 只关闭 context，不关闭浏览器
  }
}

// 添加进程退出时的清理
process.on("SIGTERM", async () => {
  logger.info("服务正在关闭...");
  if (browserInstance) {
    await browserInstance.close();
    browserInstance = null;
  }
  process.exit(0);
});

process.on("SIGINT", async () => {
  logger.info("服务正在关闭...");
  if (browserInstance) {
    await browserInstance.close();
    browserInstance = null;
  }
  process.exit(0);
});

// 发送告警邮件
async function sendAlertEmail(site, error) {
  const mailOptions = {
    from: "3074994545@qq.com", // 使用完整的发件人邮箱
    to: "3074994545@qq.com", // 使用完整的收件人邮箱
    subject: `🚨 网站异常告警: ${site.name}`,
    html: `
      <h2>网站监控告警</h2>
      <p><strong>网站名称:</strong> ${site.name}</p>
      <p><strong>网站地址:</strong> ${site.url}</p>
      <p><strong>错误信息:</strong> ${error}</p>
      <p><strong>发生时间:</strong> ${new Date().toLocaleString()}</p>
    `,
  };

  try {
    await transporter.sendMail(mailOptions);
    console.log(`已发送告警邮件 - ${site.name}`);
  } catch (error) {
    console.error("发送邮件失败:", error);
    // 如果是认证错误，输出更详细的信息
    if (error.code === "EAUTH") {
      console.error("邮箱认证失败，请检查以下内容：");
      console.error("1. 确保QQ邮箱已开启SMTP服务");
      console.error("2. 确保使用的是正确的授权码而不是邮箱密码");
      console.error("3. 访问 https://service.mail.qq.com/cgi-bin/help?subtype=1&&id=28&&no=1001256 获取帮助");
    }
  }
}

// 执行监控任务
async function runMonitoring() {
  // 添加并发限制
  const concurrentLimit = 2;
  const chunks = [];
  for (let i = 0; i < websites.length; i += concurrentLimit) {
    chunks.push(websites.slice(i, i + concurrentLimit));
  }

  for (const chunk of chunks) {
    await Promise.all(
      chunk.map(async (site) => {
        try {
          const result = await checkWebsite(site);
          if (!result.success) {
            await sendAlertEmail(site, result.error);
          }
        } catch (error) {
          logger.error(`监控任务执行失败 (${site.name}):`, {
            error: error.message,
            stack: error.stack,
          });
        }
      })
    );
  }
}

// 添加优雅退出处理
process.on("SIGTERM", async () => {
  logger.info("服务正在关闭...");
  if (browserInstance) {
    await browserInstance.close();
  }
  process.exit(0);
});

// 设置定时任务，每5分钟执行一次监控
cron.schedule("*/5 * * * *", () => {
  console.log("开始执行网站监控...");
  runMonitoring();
});

// 立即执行一次监控
console.log("启动网站监控服务...");
runMonitoring();

你觉得写的怎么样呢？我觉得蛮好的：

  • 代码逻辑清晰，每个函数都符合单一原则，开发中它也提醒我要把 websites 配置信息单独创建文件存储
  • 能够基于代码进行重构优化，使用社区流行的 winston 日志库来记录信息
  • 有重试，try catch 兜底逻辑

总结

  1. TRAE 的 UI 和交互不输 cursor
  2. builder 模式下，提出一个需求，它能快速帮我拆解需求，生成项目，安装依赖，启动项目到最后的 web 预览。这对没有接触过编程的人更加友好
  3. 在有些时候，它也会乱说，明明有问题，但是硬说已经解决了！
  4. 连接不稳定，经常网络错误，这个非常影响开发体验
  5. 免费使用 claude 3.5 和 chatGpt 很香。
  6. 代码块右上角的一些能力非常好用，例如应用功能，能够智能的把相关的内容进行替换，然后通过 diff 清晰的让你知道你修改了什么
  7. 感觉模型深度链接了代码上下文，能给出和我目前项目相关的代码

需要深度使用才能发现它更多使用场景！

前端
AI
11
2
分享
操作
评论
相关内容
0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片

目录

🔥 热门文章
1
离谱，DeepSeek 崩了 5 小时，大家却喊：梁圣恩情还不完？？
430
2
DeepSeek 全新模型发布，性价比最高的一集！
390
3
B 站上 DeepSeek 闹鱼灾了，我发起《大肥鱼清除计划》！
380
4
自己学习ai，直接买cursor 的套餐，还是买gpt 或者claude 的套餐?
360
5
又一个国产版 Codex 神器，也来卷办公了！
330
6
day3-如何写出一个高质量的 Skill（组内分享） 高质量 Skill 不是“一个调得很顺的巨型 Prompt”，而是一个可验证、可回归、可维护的能力包。 先定义“什么算好”，再实现“怎么做好”。评估体系先于 Skill 本身成型。 下面用“故障诊断 Markdown 转 YAML”作为例子，但方法是通用的。 --- 一、先想清楚：Skill 到底是什么 一个 Skill 至少包含四部分： 部分 作用 接口 输入什么、输出什么、边界在哪 流程 分几步做，每步的产物是什么 规则 硬约束、经验规则、失败模式 降级策略 不确定时怎么办，而不是硬编一个看似合理的结果 高质量 Skill 的共同点：职责单一、接口清晰、规则可定位、输出可验证。 反例：把几十条经验全塞进一个主 Prompt，改一条规则要重调整个 Prompt，评估时也不知道是哪条规则退化。 --- 二、核心方法：先建评估，再写 Skill 不要先写转换器再补测试。正确顺序是： 1. 定义输出契约：什么算合法、什么算合格； 2. 建金标准集：一小批人工认可“可放行”的样本； 3. 先写评估 Skill：让它在金标准集上跑出基线； 4. 再迭代生成 Skill：每次修改跑同一套评估，无退化且目标维度提升才算正向。 这就是评估驱动开发：评估是 Skill 的单元测试，金标准集是回归锚点。 --- 三、评估 Skill：三层门禁，逐层递进 前一层不过，后一层不跑。每层留可追溯证据。 第 1 层：确定性硬门禁 用解析器、Schema、校验器完成，不消耗模型成本。 · 输出可解析； · 必填字段齐全，类型/枚举合法； · 引用目标存在，无悬空引用、无不可达节点； · 关键路径至少有一条能到达预期出口。 不通过直接打回。 第 2 层：语义断言 用脚本 + 结构遍历检查“逻辑对不对”，仍然保持确定性。 通用检查项： · 覆盖率：源材料里的关键步骤、分支、条件，输出里是否都有对应？ · 完整性：每个判断节点是否都有明确出口？有没有死胡同？ · 可达性：每条路径是否都能到达预期终点？有没有无出口循环？ · 顺序与依赖：有先后依赖的操作，是否保留了顺序？有没有被拍平成无序列表？ 例子：故障诊断转换中，检查“每个判断项是否有是/否/异常出口”“每条路径是否能到根因”。 第 3 层：LLM-as-Judge 只处理解析器表达不了的维度：忠实度、完整性、可执行性。 但 Judge 会漂移，不能单独放行，必须建立在第 1、2 层之上。Judge 的 Prompt、rubric、模型版本都要版本化，换模型必须用金标准集重新校准。 通用 Judge 维度： 维度 问什么 忠实度 输出是否忠实源材料意图？有没有自行发明内容？ 完整性 关键步骤、条件、证据是否保留？隐式知识有没有被压成空话？ 收敛性 输出是否仍指向原目标，而不是发散？ 可执行性 下游不依赖源材料能否直接使用？ --- 四、金标准集：回归测试的锚点 不需要一开始就标注几百份。用已认可的样本当种子，扩到 15～30 份，覆盖失败模式而非随机抽样： · 完整正例：典型流程； · 边界/异常分支：异常路径、循环、前置失败回退； · 已知易错模式：实际踩过的坑； · 留出集：不参与调优，只用于最终验收，防过拟合。 金标准不需要完美，只需要当前标准下认可可放行。 回归指标：关键路径用 pass^k（k 次全过），稳定性用 pass@k。 --- 五、工程约束：让批量产出可重放 · 幂等：同输入 + 同 Skill 版本 + 同规则 → 输出一致，否则无法判断变好是 Skill 改了还是随机波动； · 隔离不阻断：单份失败进隔离队列，记录失败层和原因，不阻塞其余； · 版本绑定：规则、rubric、金标准集进 Git；每份报告绑定“源版本 + 生成 Skill 版本 + 评估 Skill 版本 + Judge 模型版本”； · 抽样人工复核：Judge 临界样本 + 易错模式，人工抽检结果反过来校准 rubric。 --- 六、Skill 本身怎么写 · SKILL.md 控制篇幅，写清：输入约定、输出契约、分步流程、硬规则、降级策略； · 经验规则放 references/ 或 rules/，按失败模式分类，不要全塞进主 Prompt； · 不确定时标 needs_review: true，不要硬编看似合理的结果； · 迭代由评估报告驱动：报告告诉你哪层挂了、哪类失败模式，你改对应规则文件，而不是漫无目的调 Prompt。 --- 七、落地顺序（不要反过来） 1. 固化输出契约：Schema + 结构约束； 2. 建金标准集：从已认可的 + 最易出错的样本开始； 3. 先写评估 Skill：跑出基线报告； 4. 再迭代生成 Skill：每次修改对比逐项通过率，无退化且目标提升才算正向； 5. 批量运行 + 隔离回放：失败进队列，结束后人工抽检； 6. 评估 Skill 自身版本化：换 Judge 模型必须重新校准。 --- 八、给组员的三条硬要求 1. 不许凭感觉说“变好了”：每次修改必须附评估报告对比，逐项通过率说话。 2. 不许跳过确定性门禁直接看 Judge 分数：前两层挂了，Judge 分数没有意义。 3. 不许把规则堆进主 Prompt：规则按失败模式分文件，评估报告要能定位到具体文件。 --- 一句话收尾 生成 Skill 决定“能不能做”，评估 Skill 决定“敢不敢用”。 先让评估体系站稳，再让生成器迭代。这样交付的不是一堆“看起来还行”的产出，而是一套可证明、可回归、可交接的 Skill 质量体系。
310
7
AI 越强，被它拒绝的代价就越大 我有时候会想：AI 越来越厉害之后，有些事情，会不会反而越来越难做？ 这个想法看起来有点矛盾。AI 明明在降低门槛，让不会写代码的人做出软件，让不会画画的人生成图片，让一个人完成过去需要整支团队才能完成的工作。但今天用 Codex 的时候，AI 拒绝帮我编写 SQL 注入的请求体，而那还是我有源码、在本地跑测试的情况。那么，往后是否只会更难？ 我们假设某一天，AI 说：「这个请求违规，我不能帮助你。」到那个时候，你还有多少能力，能绕过它，把事情做完？ 这里的「违规」需要打个引号。平台的规则、模型的判断、法律的要求，以及一件事实际有没有造成伤害，彼此之间并不总是画得上等号。一个请求可能确实危险，也可能只是缺少上下文被误判，或者恰好落在某家公司的限制范围里。 无论是哪种情况，随着我们越来越依赖 AI，这句拒绝都可能变得越来越贵。 今天，一个程序员让 AI 帮忙写代码，AI 拒绝了，他大概率还有别的办法：查文档、找开源项目、问同行，或者自己写。麻烦一点，慢一点，但路还在。 可如果十年之后，大部分程序都由 AI 完成，情况就不一样了。 很多人从接触编程的第一天起，就习惯了描述需求、等待生成、运行结果、继续迭代。他们能做出相当复杂的产品，却未必经历过独立处理底层问题的训练。平时，这种能力结构完全够用，效率甚至更高。只有 AI 拒绝的时候，他们才会发现：平常被省掉的那段学习过程，恰好是此刻最需要的东西。 到那时，一次拒绝的成本，可能就从「今晚多花两个小时」，变成「先花半年学会这门技术」。 拿 SQL 注入举个稍显极端的例子：往后，连真正理解这类攻击如何发生、能够独立构造测试的人，会不会也越来越少？ 这里也包括那些有正当需求的人。一个开发者想检查自己的旧系统，一个经过授权的安全研究员想复现漏洞，假如 AI 识别到危险模式就拒绝，而使用者又只熟悉「让 AI 帮我检查」，这项原本可以独立完成的工作，就这样卡住了。 但是安全专家不会因此消失，但这类技能可能越来越集中在少数人手里。你仍然可以找专家，只是要付出更多的钱、更多的时间，以及更高的沟通成本。 类似的困境，未必只发生在网络安全领域。 你想从一个停止维护的软件里取回自己的数据，需要解析它的旧文件格式。AI 判断这涉及规避保护措施，拒绝继续。你拥有这些数据，却没有能力把它们读出来。 你买了一台设备，厂商停止提供服务。你想修改程序让它继续运转，过程中需要处理某种访问限制。AI 不愿协助，而你所掌握的维修方式，早已只剩下「把报错发给 AI」。 你想给常用的网站写一个辅助工具，减少重复操作。平台将此归入自动化限制，AI 也据此拒绝。过去会写脚本的人可以自己判断、自己处理；未来的使用者，可能连从哪里开始都不知道。 这些例子有一个共同点：当工具同时承担了「执行工作」和「传授知识」的角色，它的拒绝就不只是挡住了一次任务，也挡住了获得这种能力的机会。 更麻烦的是，这种依赖往往是我们主动选择的，而且每一步都很合理。 既然 AI 几秒钟就能做好，为什么还要花几个月学习？既然公司可以采购成熟的 AI 服务，为什么还要养一支负责基础工作的团队？既然市场上已经很少有人手写这些东西，学校为什么还要花大量时间教？ 对个人、公司和学校来说，这些选择都有现实依据。但叠加起来，整个社会保留的独立能力就可能越来越少。等到某项能力突然受到限制，我们才发现，备用方案早已在追求效率的过程中被一点点削掉了。 所以，「AI 越强，做事越便宜」可能只描述了未来的一半。 另一半是：被允许的事情越来越便宜，被拒绝的事情依然需要人工完成，却要面对更少的人才、更高的报价，以及越来越难获得的知识。两边的成本差距，会越拉越大。 有人会说，可以换一个模型，或者用本地模型。这确实是重要的选项。只要工具之间还有充分竞争，开放模型还足够可用，限制就未必能形成真正的门槛。 但备用方案也需要维护。它需要硬件、知识、软件生态，以及一群仍然理解这些系统的人。如果大多数人已经习惯了最方便的商业服务，那么「理论上还有别的办法」和「普通人实际用得起、用得明白」，之间仍然可能隔着很远。 我担心的，正是这段距离。 我不指望 AI 对任何请求都照单全收。对明显会伤害他人的行为设置限制，有充分的理由。但我们也需要关心：限制由谁定义，误判有没有申诉渠道，用户能不能换工具，以及脱离这个工具之后，还剩下多少独立行动的能力。 保留这些能力，平时看起来甚至有点低效，明明可以自动生成，还要理解原理；明明可以一键完成，还要知道手动怎么做。 但这些看似多余的知识，会在工具拒绝、失效、涨价或改变规则的那一刻，成为真正的选择权。 AI 越强，我们可能越需要留意它说「不」的那一刻。 因为那句话的分量，最终取决于：它拒绝之后，我们还能做什么。
310
8
什么是LLM
300
9
我的第一个出海产品！7 天 2 万
290
10
WorkBuddy 本地 API 桥 + dsh 插件：把你的 WorkBuddy 额度，变成手边随手可用的模型
290
🔥热门工具
朱雀AI检测朱雀AI检测
朱雀AI检测助手朱雀AI检测助手
LovartLovart
老鱼简历老鱼简历
WritePass官网WritePass官网
面多多面多多
CursorCursor
星月写作星月写作
零感AI零感AI
墨得问题墨得问题