SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场agent-friendly-design

agent-friendly-design

前端与建站

查看项目

更新于 10-15 09:46

技能介绍

用途

本技能面向“智能体消费 UI”这一场景，而非“智能体构建 UI”。它要解决的问题是：网站与应用的受众不再只有人类，自动化流量在 2024 年已超过人类流量（占全部网络交互的 51%）。智能体会代替用户浏览、比较、购买、研究和交互。如果网站对智能体不可见，就会对不断增长的大多数网络流量不可见。

核心洞察是：最初为屏幕阅读器构建的无障碍树，正在成为 AI 智能体与网站之间的主要接口。OpenAI 的 Atlas 明确使用 ARIA 标签解释页面结构；微软的 Playwright MCP 提供无障碍快照而非截图；即使是视觉优先的智能体（Anthropic Computer Use、Google Mariner）也在纳入无障碍数据以提高可靠性。因此，为智能体构建与为无障碍构建是同一项工作，一方受益另一方也受益。

主要能力（10 项检查清单）

  1. 语义化 HTML（不可妥协）：智能体读结构而非布局。使用原生元素（button、nav、main、article、section、header、footer、aside）；正确的标题层级（h1 到 h6，不跳级）；label 与表单输入显式关联（使用 for 属性）；表格数据使用 table 配合 thead、th 和 scope 属性；链接用 a、按钮用 button，绝不用 div onclick；表单用 form，分组用 fieldset 和 legend；img alt 文本要有意义。测试方法：禁用 CSS 后页面是否仍可理解。

  2. ARIA：有用但非魔法。ARIA 补充语义化 HTML 而非替代。在原生元素无法表达交互时使用：无可见文本的按钮和链接加 aria-label；切换、下拉、手风琴加 aria-expanded；动态内容用 aria-live 区域；无原生元素时用 role（如 role="tablist"、role="dialog"）；复杂表单字段用 aria-describedby；装饰性元素用 aria-hidden="true"。不要给所有东西加 ARIA，过度标注会造成噪音。

  3. 机器可读状态：智能体无法解读视觉线索。非活动控件用 disabled 属性；切换状态用 aria-selected、aria-checked、aria-pressed；加载状态在更新内容的容器上用 aria-busy="true"；错误状态在字段上用 aria-invalid="true" 并用 aria-errormessage 链接错误文本；空状态渲染真实 DOM 内容而非仅 CSS ::after 伪元素；分页当前页用 aria-current="page"。规则：人类能通过看判断的状态，智能体应能通过读 DOM 判断。

  4. 结构化数据（JSON-LD + Schema.org）：帮助智能体理解内容是什么。按需使用 Organization、Product、Article、BreadcrumbList、FAQPage、HowTo 等 schema；JSON-LD 放在 script type="application/ld+json" 中（优于 microdata 或 RDFa）；结构化数据与可见内容保持同步，不要堆砌关键词；包含 dateModified 和 datePublished 以表明新鲜度；产品页包含 price、availability、reviews、SKU；文章包含 author、datePublished、headline、description。

  5. llms.txt：位于 /llms.txt 的 markdown 文件，为 LLM 提供网站简明概览，类似 robots.txt 但面向语言模型。示例结构包含项目名、简介、Docs 链接列表、Optional 链接列表。保持在 2000 token 以内以便快速加载上下文；链接到重要页面的详细 markdown 版本（如可能，在 URL 后加 .md）；内容变化时更新，过期的 llms.txt 比没有更糟。规范见 https://llmstxt.org。

  6. 可爬取与渲染：并非所有智能体都能执行 JavaScript，许多依赖原始 HTML。对关键内容做服务端渲染（SSR）或预渲染；不要把关键信息藏在仅客户端 JavaScript 后面；更新 robots.txt 允许已知 AI 用户代理（ChatGPT-User、OAI-SearchBot、Googlebot 等）；维护最新的 sitemap.xml；响应时间要快（智能体可能在 10-30 秒超时）；重要内容应位于 HTML 源码靠前位置（智能体可能不滚动）。

  7. 可预测交互：智能体通过寻找模式来自动化，不一致会破坏它们。命名一致（一页是“Add to Cart”，另一页不要变成“Buy Now”）；使用标准 HTML 表单控件而非看起来像输入框的自定义 JavaScript 组件；相似页面使用可预测的 ID 和类名；避免需要复杂关闭序列的模态框、弹窗和插页；尽量减少浏览时的登录墙（如可能允许访客结账）；非关键流程避免 CAPTCHA，它们会完全阻止智能体。

  8. API 优先模式：如果智能体无需抓取 HTML 就能获取数据，各方都受益。为核心数据（产品、内容、状态）提供 REST 或 GraphQL 端点；发布 OpenAPI 规范并从 llms.txt 链接；提供 MCP（Model Context Protocol）服务器以实现直接工具访问，智能体可通过 MCP 调用 API 而无需浏览器自动化；集成 NLWeb 以支持对数据的自然语言查询；A2UI 用于智能体驱动的原生界面（Google 开源项目，智能体发送继承宿主应用样式的组件蓝图）；为智能体需要响应的状态变化提供 webhooks。

  9. 面向智能体而非仅人类的内容：写清晰描述性的页面标题（智能体大量使用 title）；meta description 要真正描述页面内容；使用描述性链接文本（“View pricing details”）而非泛泛的（“Click here”）；用标题把长内容分成小节；为密集页面提供摘要或 TL;DR；不要仅靠图片传达信息，始终提供文本等价物。

  10. 用智能体测试：使用浏览器开发者工具检查无障碍树（Chrome：Elements 中的 Accessibility 面板）；用 AI 浏览器智能体（ChatGPT Atlas、Playwright MCP）测试关键流程；运行 Lighthouse 无障碍审计，它捕获的大多数问题也影响智能体；检查表单能否以编程方式完成；验证动态内容更新反映在 DOM 中而非仅视觉上。

使用方式

技能提出“双界面心智模型”：在同一页面上构建两个界面。人类界面包括视觉层级、颜色、排版、留白、动效、愉悦感；智能体界面包括语义结构、ARIA 角色、JSON-LD、可预测控件、API 端点。两者不冲突，结构良好的语义页面对人类和智能体都更容易，双界面是叠加而非取舍。

按项目类型分层采用（routing）：每个 Web 项目，第 1-3 项（语义化 HTML、ARIA、机器可读状态）不可妥协；面向公众的网站，增加第 4-6 项（结构化数据、llms.txt、可爬取性）；产品/电商/SaaS，增加第 7-9 项（可预测交互、API 优先、内容优化）；完整的智能体就绪，采用全部 10 项。

适用场景

适用于任何将被智能体使用的网站、应用或产品。技能还列出值得关注的新兴协议：llms.txt（面向 LLM 的 markdown 站点概览，已被许多方采用，实现简单）、MCP（智能体直接工具访问，无需浏览器，增长迅速，Anthropic 主导）、NLWeb（对数据的自然语言查询，微软开源，早期）、A2UI（智能体驱动的原生 UI 组件，Google，早期规范）、AGENTS.md（项目级智能体指令，社区采用增长中）。

限制

资料未提供本技能的具体安装命令、运行环境、收费或价格信息。技能中提到的协议状态（如“早期”“增长中”）为原文描述，可能随时间变化。技能建议在构建或审计网站后记录智能体遇到困难的模式、记录最有效的 ARIA 模式、在分析中跟踪智能体流量（用户代理字符串）、随协议成熟测试新协议并更新指南。