先说一个正在发生、但很多人还没反应过来的变化：AI 不再只待在编辑器里帮你补代码了。8 月 26 日 Claude in Chrome 正式可用；同月，Anthropic 又把 computer use、browser use、Skills API、Files API 一起推给了开发者。翻译成人话：AI 开始自己打开浏览器、读你的页面、点你的按钮、填你的表单。
这意味着你的页面多了一个读者。以前只有人看它，现在机器也看------而且机器看完还会动手。
发生了什么：浏览器从"展示层"变成"执行层"
过去浏览器的职责很单纯：把页面渲染给人看。现在 agent 把浏览器当成自己的手和眼睛------推理在云端算，浏览器负责读页面、执行操作。把最近几个事件摆一起看，方向很清楚：
- 8 月 20 日：computer use、browser use tool、Skills API、Files API 对开发者正式可用；
- 8 月 26 日：Claude in Chrome 正式可用，浏览器里直接住进一个 agent；
- 同期：Chrome 内置的端侧 AI 能力（纠错、摘要、翻译等）持续开放，浏览器自己也开始算。
一句话总结：浏览器正在从"展示层"变成"执行层"。你的页面，也从"给人看的作品"，变成"被机器消费的接口"。
翻译得更难听一点：你的页面从此不是作品集，是工位。
先看你会被怎么读：一次 agent 下单的完整链路
抽象的话不多说，走一遍真实链路。假设用户对 agent 说"帮我把购物车那单下了"：
- agent 打开你的页面，读可访问性树，定位"结算"按钮------靠语义和 aria-label，不是靠坐标；
- 它填地址表单：每个输入框要有可编程的标签，靠 placeholder 猜是下策；
- 它点提交，然后读状态：成功还是报错？只换颜色它读不到，得靠
aria-busy和aria-live文本； - 中间任何一步读不懂，它就卡住或者乱点；
- 这一单，就没了。
整条链路里没有一步看你的 CSS。这就是为什么"对机器友好"和"好看"是两件独立的事，也是为什么这次变化会落到每一个写业务页面的前端头上。
一张图：一个页面，两个读者
读图只要三秒：同一份 DOM，人靠眼睛看视觉------颜色、布局、图标、动效；机器 agent 靠语义读结构------语义标签、aria-label、状态文本。机器读懂之后还会操作回去：点击、填表、提交。
这张图里最扎眼的是中间那行小字：机器不看你的 CSS 和 class。一个裸 div 加 onClick，人点得动，机器眼里可能什么都不是。
你管那叫组件，agent 管那叫谜语。
机器到底读什么：可访问性树，不是 DOM 快照
agent 理解页面，靠的不是截图也不是 DOM 快照，而是可访问性树（accessibility tree）------浏览器把 DOM 翻译出来的一份语义结构：这是个按钮、那是个输入框、当前状态是"提交中"。这套东西本来是给视障用户的读屏软件建的，现在它成了 agent 的眼睛。
所以一件很有意思的事发生了：你当年为读屏软件写的 aria-label、语义标签、状态文本，今天同时服务了机器读者。你以为是合规负担的东西，正在变成给 AI 的接口。
反过来说，"状态只靠颜色表达"是现在最常见的坑。loading 只换个颜色、成功只亮个绿点，人看得懂，机器读不到。要把状态写进语义：
javascript
// 让"状态"对机器可读：别只换颜色，要把状态写进语义
function setSubmitState(btn, state) {
const loading = state === 'loading';
btn.disabled = loading;
btn.setAttribute('aria-busy', String(loading));
btn.textContent = loading ? '提交中...' : '提交';
}
// 结果反馈同理：写进 aria-live 区域，读屏和 agent 都能收到
function announce(region, message) {
region.textContent = message; // region 需带 aria-live="polite"
}人看到的是按钮变灰、文案变化；机器读到的是 aria-busy="true" 和"提交中..."。同一份代码，两个读者都满意。
怎么知道自己的页面现在读不读得懂？不用等 agent 上门。打开 DevTools 的 Accessibility（可访问性）面板，或者跑一遍 Lighthouse 的 accessibility 审计------你看到的那份语义结构，就是机器看到的那份。标题层级乱、按钮没名字、状态没文本，在面板里一目了然。当年做 SEO 靠"查看源代码"自查，今天靠可访问性面板自查，动作是同一个动作，只是阅卷人换了。
这和当年 SEO 是同一课，只是读者会点击
如果你觉得这事儿似曾相识，没错：二十年前搜索引擎爬虫逼着前端学语义化、标题层级、alt 文本，早鸟吃到了流量红利。今天会点击的 agent 逼着前端学"可被操作"：语义控件、稳定状态、可编程入口。
区别在于赌注。爬虫只读不点，它读不懂你少一个曝光；agent 读不懂还点不动，你少一单转化。读者从"只看不摸"变成"又看又摸"，页面写得不规范的代价变大了。
把当年早鸟做的事和今天要做的事摆一起，几乎是一一对应的：
- 当年给图片补 alt 文本 → 今天给图标按钮补
aria-label； - 当年理顺 h1-h6 层级 → 今天理顺 landmark 区域（header / main / nav / form）；
- 当年做语义化 URL → 今天做稳定、可编程的表单与提交语义；
- 当年用 robots.txt 管理爬虫 → 今天开始识别和监控 agent 流量。
这不是一门新学科，是老功课换了阅卷人。当年没及格的人，今天有机会补考。
别慌：这不是"AI 取代前端"，是你多了一个甲方
我知道评论区会有人说"又是取代论"。不是。取代论是偷懒的说法，真实的变化更具体、也更无趣：你的交付物多了一个验收方。以前验收你的是人和产品经理，现在还要过 agent 这一关------它读得懂、点得动，你的功能才算真的可达。
也会有人说"关我业务页面什么事"。有关系，只是先后问题：当用户开始让 agent 替他填表、下单、查物流，你的页面读不读得懂，直接决定这一单成不成。表单重的产品、电商、to B 后台，会最先感受到；其余的人只是晚一点，不是躲得过。
顺便说一句：2010 年说"移动端就是噱头"的那批人，后来也在老老实实改响应式。历史不重复，但押韵。
哪些页面最先被读：三个高风险区
不是所有页面都一样急。按"agent 会先来哪"排序，有三个高风险区：
- 表单重的产品：注册、申请、报销、预约。agent 替用户填表是第一波落地场景，输入框没标签=直接卡死；
- 电商与交易链路：加购、结算、支付确认。读不懂状态=丢单，赌注最大；
- to B 后台：查询、筛选、导出、审批。agent 替员工跑后台，是企业侧最先普及的用法。
如果你的产品落在这三区里，"对机器友好"就不是优化项，是排期项。落在三区外，也建议把下面 5 条进 code review checklist------成本极低，而 agent 流量的到来只问早晚。
端侧是同一枚硬币的另一面
顺便把容易混的一件事说清。浏览器不只"被读"，也开始"自己算"：Chrome 内置了一组端侧 AI 能力，模型跑在你自己的芯片上，断网也能用。它和 agent 是同一枚硬币的两面------一面是浏览器在本机算，一面是浏览器被云端 agent 操作。两面指向同一个结论：浏览器不再是单纯的展示层。
端侧这部分现状如何，一张小表够用：
| 端侧能力 | 现在能不能上生产 | 放哪一层 |
|---|---|---|
| 纠错 / 摘要 / 翻译 | 能 | 增强位，失败就静默降级到云端 |
| Prompt API（自由问答） | 不能 | 还在试运行，只配内部工具 |
| WebLLM（本机跑开源模型） | 仅 opt-in | 用户主动选离线/隐私时才开 |
判断口径就一条：失败了有没有体面退路。有退路的窄任务放增强位，没退路的自由任务别碰主干。端侧值得为它设计架构，但不值得把核心押上去。
落地清单：让页面"对机器友好"的 5 条
- 交互控件用语义标签（
button/input/a），别用裸div模拟按钮。 - 关键控件补
aria-label和明确状态文本，loading / 成功 / 失败都要机器读得到。 - 别把行为绑在脆弱的 class 名或 DOM 层级上------那玩意的寿命，取决于下次重构的心情。
- 关键操作留可编程入口：真实表单、标准提交语义，别全靠自定义手势。
- 开始监控非人类流量占比：agent 和自动化访问，就是你的新"爬虫日志"。
这五条没有一条是新技术，全是你本来就该做、但一直排不上优先级的事。agent 的到来只是给了它们一个不得不做的理由。
最后说句实在的：这五条不会让你的页面明天就多一个 agent 访问。它做的是另一件事------等 agent 流量真的打进来那天，你的页面是"能接住"的那一批，而不是监控里一堆"操作失败"的那一批。别指望当天见效。风口真来那天你还在场上，这五条就回本了。
你觉得"给 agent 优化页面"会是下一个 SEO，还是又一阵三个月的风口？评论区站个队，我挑有意思的写进下一篇。觉得这 5 条能直接抄进 code review，收藏一下，等 agent 流量真的打进你的监控那天，你会回来找它。