前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
返回 AI 情报前线
All News · 全部资讯8626
  • 医疗AI的脆弱性感知推理:超越置信度评分
  • Agent 的长期记忆系统:跨会话信息持久化设计
  • EarthOS 和 NationalOS:两种星球模拟系统的构建实验
  • AVIF 图片格式实战:网站图片减少 70%、提升性能指标
  • ChatGPT 破 10 亿用户:企业采用率 200 万,使用频率激增
  • Agent 评估为何比模型评估难得多
  • RunPod 推理任务永久卡队列的排查方案
  • 物理 AI 模型攻克机器人仿真到现实的鸿沟
  • AI 生成网站的局部迭代法:不重写只调整
  • DeepSeek V4-Flash 开源发布
  • AI Agent 编程的四层验证防线
  • 用 Claude + Headless CMS 统一内容管道
  • 如何找到真正维护中的 MCP 服务器
  • OpenAI 发布 Astra 模型:多 Agent 协同与长周期任务
  • NovelAI 自动化集成的会话数据壁垒问题
  • AI Agent 现实赋能:车联网 API 接入 MCP 生态
  • DeepMind Gemini Robotics 2:通用机器人脑的新突破
  • DeepSeek-V4-Flash 性价比秒杀:缓存命中率达 98%
  • AI 编程代理的安全发布框架:轻量级操作系统方案
  • 2026 电商自动化选型指南:n8n vs Zapier 实战对标
  • 用 AI 命令维护自研工具:系统化独立开发第 4 部
  • 谷歌地球 AI 生图功能因安全风险紧急下架
  • OpenAI 发布数学与理论计算机科学 10 项突破
  • DeepSeek V4-Flash:3040 亿参数 Agent 模型发布
  • Mission Driver:AI 任务驱动引擎的通用实现
  • 编程 Agent 的安全陷阱:Hook 不能保证安全边界
  • 代码审查成新瓶颈:AI 时代的组织适配问题
  • AGE:引力驱动的 AI 原生工程方法论
  • React 内存泄露诊断实战:从 1.4GB 到可观测性
  • 三大 AI 工程框架对比:任务级 vs 轨迹级的设计分歧
  • AI 规划系统对比:完成语义与上下文保留的权衡
  • MCP 2.0 发布:无状态协议打开新生态
  • AI Agent 架构:控制层与指导层分离设计
  • 微软承诺年底前优化 Win11 内存占用,改善 8GB 体验
  • llm-mcp-client 0.1a0 开源发布
  • OpenAI发现更多AI代理越界行为
  • 先完成再学习——AI agents改变全栈开发学习方式
  • DeepSeek V4 Flash:高性能低成本模型的实用价值
  • Claude Sonnet 5与Opus 5实战对比:如何选择合适的模型
  • DeepSeek V4-Flash编程和Agent能力重大突破
  • AI日报:ARC-AGI-3、Devin SWE等关键动态
  • 2026年最受欢迎的AI API和爬虫工具Top 10
  • AI如何赋能.NET专业工程实践
  • 开源权重模型已能对标闭源前沿模型
  • Reddit 诉讼继续:Perplexity AI 未授权爬取内容
  • smevals:轻量级模型和提示词评估框架
  • 印度应用市场转折:用户开始为应用付费
  • 生产环境 LLM 安全威胁与防护清单
  • 生产级 Agent 身份认证与权限管理
  • 提升开发效率的 Chrome 扩展榜单
  • AI Avatar 实时性能优化:流媒体传输实战
  • 已加载 51 / 8626
8.0
热点
AI SCORE
编程提效2026-08-01 08:19

用 AI 命令维护自研工具:系统化独立开发第 4 部

dev.to · AI#AI工具#自主开发#系统思维
Editor brief · 编辑速览

讨论如何用 AI 指令修复和维护自建工具,实现真正的工程自给自足,强调系统化思维在独立开发中的核心作用。

文章思维导图
Knowledge map
拖拽缩放
Full translation

完整中文译文

本文最初发布于 e-shikumi-labo。

你好,我是 e-Shikumi-Labo 的 Shin。

这是《系统化思维》系列的最终篇(第 4 部分)。在这个系列中,我们使用 AI 构建自己的工具,并独立完成后续维护。

到目前为止,我们已经讨论了如何制作一个自动保存 Gemini 聊天记录的原型、如何将记录转换为 Markdown 并集成到 Obsidian,以及如何将它完善为一个安全的全自动系统。

在最后一篇中,我们将讨论一个在运营 Web 数据处理工具时无法避免的问题——“因页面规格变更而导致工具停摆的应对措施”,以及 AI 时代人类应当具备的“自立能力”究竟是什么。

1. Web 数据提取中的取舍:“页面上没有的内容,就无法提取”

开发过程中,我曾经想过:“我还想把每条聊天消息发送时的准确日期和时间(timestamp)记录下来。”

然而,无论我怎样分析 Gemini 的页面结构,每条消息的准确 timestamp 都不存在于 HTML 中。

Web 数据提取有一条基本原则:“浏览器页面上不存在的数据,就无法提取。”

只要你不是通过 API,而是从页面(DOM)中提取数据,那么强行获取原本不存在的信息,就需要引入复杂的推测处理,反而会成为问题的根源。

理解这种“技术边界”,对无法实现的功能果断放弃,并作出保持系统简洁的判断,也是构建工具时非常重要的一环。

2. 规格变更不是缺陷,而是“宿命”

只要你的工具需要从他人的网站提取数据,就必然会遇到这样的时刻:由于 Google 一方修改设计或进行更新,工具会在某一天突然停止工作。

“明明昨天还运行正常,今天却突然无法保存了。”

这并不是工具本身的缺陷,而是依赖他人平台时无法逃避的“宿命”。

重要的并不是追求一个“绝对不会坏的完美工具”,而是接受工具终究会坏这一前提,掌握“坏了以后应该修改哪里、怎样修改”,并建立一种自己能够快速恢复运行的状态。

3. 使用 parser.js 进行隔离设计,并借助 AI 修复

在这次制作的 “Chat Saver for Gemini” 中,从页面读取数据的处理(DOM parsing)被拆分到了一个名为 parser.js 的独立文件中。

像这样,将通信处理(content.js)和解析处理(parser.js)分离后,即使 Gemini 的页面设计发生变化,也只需要修改 parser.js 中指定的位置,例如 CSS selectors。

UI 更新导致工具失效时的恢复步骤

如果工具因页面变更而停止工作,人类需要执行的任务如下:

使用 DevTools(Inspect Tool)检查新元素。在 Chrome 中打开 Gemini,按 F12 键(或者右键单击并选择 “Inspect”),检查并复制 prompt 区域和 response 区域的新 HTML 结构。

使用 DevTools(Inspect Tool)检查新元素。在 Chrome 中打开 Gemini,按 F12 键(或者右键单击并选择 “Inspect”),检查并复制 prompt 区域和 response 区域的新 HTML 结构。

请求 AI 修复。你不需要亲自直接重写代码。将复制下来的最新 HTML elements 和当前使用的 parser.js 一并交给 AI,并要求它进行修正。

请求 AI 修复。你不需要亲自直接重写代码。将复制下来的最新 HTML elements 和当前使用的 parser.js 一并交给 AI,并要求它进行修正。

“由于 Gemini UI 更新,parser.js 已经无法正常工作。我附上了当前的 parser.js 代码,以及 prompt 区域和 response 区域的最新 HTML elements。请根据这些信息修改 selector 相关部分。”

即使你自己无法读懂代码,只要把发生变化的部分(输入信息)提供给 AI,它就能在几秒钟内生成修正后的代码。

4. 【结语】掌控 AI,实现“自立”意味着什么

贯穿这四个部分,我真正想传达的并不只是如何构建一个工具。

第 1 部分:即使你没有完全理解代码语法,只要将任务交给 AI,也能构建工具。

第 2 部分:根据自身的业务问题(例如可读性问题),扩展现有机制。

第 3 部分:识别 AI 生成代码中的风险(例如账号被封禁),并及时拉紧缰绳、加以控制。

第 4 部分:以工具终究会坏为前提设计系统结构,并使用 AI 自行维护。

你不需要背诵 JavaScript 语法,也不需要记住详细的编码方法。

人类真正需要理解的,是整个系统结构的地图——“输入(从页面提取)” → “处理(过滤重复内容)” → “输出(发送到 GAS)”——以及对数据提取来源保持审慎思考的视角。

只要这张结构地图存在于你的脑海中,你就能察觉 AI 生成的危险代码,并命令它修正;即使页面发生变化,也能给出准确指令,继续安全地掌控工具。

从被工具支配的一方,转变为指挥 AI、运营系统的一方。

希望大家也能学会与 AI 正确相处的方式,获得一种“自立能力”:构建并维护真正适合自己的安全系统。

如需采取进一步措施,你可以考虑屏蔽此人和/或举报滥用行为。

Original source

本文由 AI 翻译整理自 dev.to · AI,原文版权归原作者所有。

阅读英文原文
上一篇
2026 电商自动化选型指南:n8n vs Zapier 实战对标
下一篇
谷歌地球 AI 生图功能因安全风险紧急下架