你的官网AI 能读懂吗当我第一次把 Higress 文档链接丢给 Claude让它帮我写个接入 Demo 时AI 的回复是抱歉我无法有效解析这个页面的内容结构…这一刻我意识到我们的文档正在被时代淘汰。00 TL;DR️技术栈大换血迁移到 Astro 5 StarlightLighthouse 性能跑分100 分。AI 友好接入 llms.txt 标准支持 Cursor、Claude Code 等主流 AI Coding 工具。AI 全能助手设计稿转代码、无效资源自动清理、页面体验和性能优化、SEO/CRO 专业分析、内容缺失智能补全。这些原本需要设计师、运维、SEO 专家、产品经理协同的工作现在 AI 都能搞定。⚡效率革命一个人 Qoder Skills完成过去需要一个小组的工作量。01 开源网关遇上 AI 浪潮Higress 作为 AI 时代的流量基础设施经历了多次升级目前分为以下三大能力形态API 网关https://higress.ai/api-gateway将流量网关、微服务网关和安全网关三合一提供统一的服务暴露、流量管控、API 全生命周期管理能力。AI 网关https://higress.ai/ai-gateway专为 AI 场景设计统一代理大模型 API 与 MCP Server支持模型、工具MCP及 Agent 的集中接入与管理。HiMarkethttps://higress.ai/himarket助力企业构建 Agent、Model、MCP 市场通过统一的 AI 能力管理平台解决 AI 资源分散、权限管控复杂、成本分摊困难等挑战。平台提供 HiChat AI 创新中心作为全员 AI 使用入口打破团队间的能力孤岛降低接入成本释放 AI 创新潜能。Higress 以 Envoy 为内核通过 WASM 插件进行能力边界拓展。然而现有的官网架构逐渐成为发展的阻碍产品孤岛所有的网关都需要独立的 Landing Page以及独立产品文档维护成本高。AI 阅读障碍随着 AI Coding 的深入使用开发者趋向让 AI 阅读产品文档然后编写 Demo 或者融入当前的业务逻辑。我们的产品官网不仅仅是给人阅读更多需要考虑给 AI 阅读。能力短板团队同学的过往工作经验一直在 B 端业务官网首页是一个偏 C 端的场景。对于性能、SEO、样式效果要求和 B 端完全不一样。过去的这部分的工作经验非常少。02 Higress 官网全新升级基于以上痛点我们对 Higress 官网进行了一次全面的架构升级和体验重塑。1、技术栈大换血新官网采用 Astro 5 作为核心框架配合 Starlight 文档系统实现了岛屿架构默认零 JS只在需要交互的组件加载 JavaScript首屏性能大幅提升Tailwind CSS 4全新的样式系统开发效率更高产物体积更小TypeScript 全量覆盖类型安全的开发体验2、产品矩阵统一门户告别产品孤岛三大产品线统一入口独立 Landing Page产品入口定位首页higress.ai品牌门户角色引导API 网关/api-gateway流量、微服务、安全三合一AI 网关/ai-gateway大模型 API MCP 统一代理HiMarket/himarketAgent/Model/MCP 市场每个产品都有独立的快速开始文档用户可以根据场景快速上手。3、用户引导分流首页增加三种方案选择器企业版、快速体验、产品介绍根据用户不同需求和时间投入意愿提供差异化的引导路径降低决策成本提升转化率。4、用户友好设计除了技术架构升级我们在用户体验上也做了大量优化场景化快速入门首页提供四大核心场景卡片多模型代理、应用安全防护、AI 语义缓存、Token 管理每个场景标注预计阅读时间hover 展示场景简介和立即体验按钮帮助用户快速找到所需内容。70 常见问题库整理社区高频问题构建 FAQ 知识库覆盖部署、配置、插件开发等常见场景减少用户排查成本。100 技术博客涵盖版本发布、最佳实践、用户案例、技术深度解读支持按分类和标签筛选。响应式设计全站适配 PC、平板、手机等多端设备移动端导航优化确保在任何设备上都有良好的阅读体验。5、让 AI 读懂你的文档三个关键设计在 AI Coding 时代官网的读者不再仅仅是人类还有 AI。我们从架构层面为 AI 阅读做了专项优化5.1 llms.txt 自动生成遵循 llms.txt 标准构建时自动生成 AI 专属入口文件访问地址https://higress.ai/llms.txt包含网站简介 文档分类 完整链接索引自动同步每次构建自动从_sidebar.json生成无需手动维护5.2 Markdown 原文导出所有文档页面提供 Markdown 原文访问 AI 工具可直接抓取纯净的 Markdown 内容无需解析 HTML5.3 主流 AI 工具对接提供与 Cursor、Windsurf、Claude Code、Gemini CLI、Trae、Qoder 等主流 AI Coding 工具的集成指南开发者可一键将 Higress 文档接入 AI 助手。详见如何在 AI 工具中使用 Higress 文档03 用 Skills 补齐程序员的营销短板网站的成功不仅依赖技术实现流量获取与增长策略同样至关重要。这些能力长期属于 SEO 专家和增长黑客的专业领域对程序员来说是明显的短板。Skills 是 Qoder 的扩展能力可以将专业领域知识封装成可复用的 AI 指令集。Skills 支持自动触发与手动调用两种模式使用方式与自定义 Command 一致开发者可以零门槛上手。本文使用的 marketingskills 整合了营销、CRO、文案写作、SEO 等核心能力让开发者也能快速掌握增长技能。1、让搜索引擎读懂你SEO 优化策略1.1 结构化数据 Skill(Schema Markup)配置https://github.com/higress-group/higress-group.github.io/tree/ai/.qoder/skills/schema-markup作用实现 schema.org 标记以帮助搜索引擎理解内容并启用搜索中的富媒体结果。生成的审核执行优化由于优化项较多Agent 容易遗忘根据 Manus 的经验使用 todolist (add_tasks) 工具进行任务管理。通过 prompt “使用 todolist 工具开始执行任务”AI 会创建任务列表并逐一完成 Article、SoftwareApplication、Organization、WebSite 等 Schema 的优化。1.2 pSEO Skill:规模化构建高质量内容配置https://github.com/higress-group/higress-group.github.io/tree/ai/.qoder/skills/programmatic-seo作用利用模板和数据大规模构建经过 SEO 优化的页面。⚠️ 注意谨慎使用此 Skill 会批量制造垃圾页面所有的页面都需要经过人工 Review。给出的建议如下基于 SEO 最佳实践AI 建议从以下三个维度扩展内容矩阵技术术语表构建 API 网关领域的专业词汇库提升长尾词覆盖竞品对比页与 Kong、APISIX 等网关产品的深度功能对比插件专题页为每个插件创建独立落地页精准匹配用户搜索意图确定了方向后我们借助 AI 整理现有的文档帮忙生成技术术语表 (Glossary)效果https://higress.ai/glossary插件落地页效果https://higress.ai/plugins竞品对比效果https://higress.ai/comparison2、让用户爱上你转化率优化策略利用onboarding-cro和page-croSkills 对关键页面进行诊断优化。2.1 用户引导优化 Skill(Onboarding CRO)配置https://github.com/higress-group/higress-group.github.io/tree/ai/.qoder/skills/onboarding-cro作用用户引导优化(Onboarding CRO)帮助识别首页的用户引导问题并提供优化建议。生成的审核报告如下优化效果AI 生成的审核报告会识别出首页在价值主张、CTA 层次、信任信号等方面的不足并提供具体的优化方案。2.2 页面转化率优化 Skill(Page CRO)配置https://github.com/higress-group/higress-group.github.io/tree/ai/.qoder/skills/page-croprompt: 对于 /ai-gateway 页面进行 CRO 优化AI 生成的详细分析报告包括优化效果总结快速部署引导竞对分析引导3、让 AI 读懂你AI 亲和优化策略在 AI 时代官网的受众正在发生变化。随着 AI Coding 的深入使用开发者倾向于让 AI 阅读产品文档然后编写 Demo 或融入业务逻辑。我们的产品官网不仅仅是给人阅读更需要考虑给 AI 阅读。3.1 llms.txt:为 AI 准备的文档入口实现https://higress.ai/docs/latest/overview/llms/llms.txt 是一个为大模型准备的专属文档入口类似于 robots.txt但专门为 AI 设计。它帮助 AI 快速索引和理解网站的核心内容结构方便 AI 代理快速找到所需信息。3.2 Markdown 结构化:AI 友好的内容格式支持 复制为Markdown文本以及支持 Makrdown链接。方便在AI Coding工具集成。04 效率革命AI Coding 让我一人顶起一个开发组有了 AI 这个全能队友过去棘手的工程问题迎刃而解。1、Design2Code从设计稿到代码的直达通过 MasterGo MCP我们可以直接将设计稿转化为代码大幅提升 UI 开发效率。配置方式{mcpServers:{mastergo-magic-mcp:{command:npx,args:[-y,mastergo/magic-mcp,--tokenMG_MCP_TOKEN,--urlhttps://mastergo.com]}}}网页还原2、代码断舍离AI 帮我删掉 147 张废图通过du -sh ./public/img发现图片目录高达 155M。使用 Claude Code 配合简单 Prompt查看 public/img/ 中的所有图片看下图片是否被使用如果没有被使用直接删除瞬间删除了 147 张无效图片实现了资源的高效瘦身。3、从 65 分到 100 分让 AI 自己优化性能安装 chrome-devtools-mcp 工具利用 AI 生成报告并自主执行优化。优化效果配置方式{mcpServers:{chrome-devtools:{command:npx -y chrome-devtools-mcplatest,env:{},args:[]}}}使用 Promptuse chrome-devtools mcp: 生成 Lighthouse report收集问题并针对问题进行优化AI 会自动生成 Lighthouse 报告识别性能问题如未使用的 CSS、图片优化、资源加载等并逐一执行优化最终实现性能评分的显著提升。4、翻车现场AI 也会犯错坦白说AI 不是万能的。这里分享几个踩坑经历希望能帮你避免同样的问题。踩坑 1pSEO 差点变成垃圾页面制造机在使用 pSEO Skill 时AI 一口气规划了 200 页面生成方案——其中大量是低质量、内容空洞的模板页面。如果直接上线很可能被搜索引擎判定为垃圾站点反而损害 SEO。教训AI 生成的内容必须经过人工 Review宁缺毋滥。比如 竞品分析是个非常严肃的话题绝对不能让AI主导必须是工程师一线的亲身体验。踩坑 2AI 删错了还在用的图片让 AI 清理无效图片时它误删了几张通过 JavaScript 动态引用的图片静态分析检测不到。上线后部分页面图片 404。教训对于删除操作建议先让 AI 生成待删除清单人工确认后再执行。踩坑 3Design2Code 的完美主义陷阱AI 生成的代码追求像素级还原导致大量硬编码的 px 值和绝对定位响应式适配一塌糊涂。教训Design2Code 适合快速出原型但生产代码需要人工重构建立语义化的设计系统。05 结语AI 时代的开发范式已经变了从 Higress 的升级实践可以看出未来的开发不再仅仅是 Coding而是对 AI 能力的深度编排。通过 AI 补齐性能、SEO、营销等短板开发者可以将精力集中在更具创造性的产品能力构建上。实践心得场景AI 角色人类角色Design2Code快速出原型重构为生产代码性能优化识别问题 自动修复验收 边界 case 处理pSEO规模化生成质量把控 内容审核CRO 优化诊断分析 建议方案最终决策 A/B 测试一句话总结AI 是你的10 倍效率加速器但方向盘始终在你手里。06 开始你的 AI 官网升级之旅想复刻这套实践这里是你需要的全部资源1. 体验 Higress⭐ Star 项目github.com/alibaba/higress 访问官网higress.ai AI 文档入口higress.ai/llms.txt2. 获取本文涉及的工具MasterGo Magic MCP - Design2Codechrome-devtools-mcp - Lighthouse 自动化marketingskills - SEO/CRO Skills3. 加入社区讨论有问题或想法欢迎在评论区交流或加入 Higress 社区 一起探讨 AI 时代的开发实践