ai-summary-request

AI 摘要请求

概述

此技能会创建一个带有 AI 平台图标的页脚组件，让访客可以请求网站的 AI 摘要。工作流首先检测并确认网站域名，然后询问是否要选择生成 llms.txt 文件，以提升网站在 AI 中的可发现性。

何时使用此技能

在以下情况下使用此技能：

• 用户想要在自己的网站添加 AI 平台集成按钮
• 用户希望访客可以轻松获取其业务的 AI 摘要
• 用户提到“AI 摘要”或 AI 平台按钮
• 用户想要为自己的网站创建 llms.txt 文件（可选）
• 用户询问如何让自己的网站更容易被 AI 发现

工作流

前置条件：检测并确认域名

在继续任何步骤之前，你必须确定网站域名：

第 1 步：尝试自动检测

按以下优先顺序搜索域名信息：

1. 环境文件（.env、.env.local、.env.production）——查找 SITE_URL、BASE_URL、NEXT_PUBLIC_URL、NUXT_PUBLIC_SITE_URL、VITE_SITE_URL 或类似变量
2. 部署配置（vercel.json、netlify.toml、firebase.json、fly.toml）——检查域名/别名设置
3. public/ 目录或根目录中的 CNAME 文件
4. 配置文件（package.json 的 homepage 字段、next.config.js、nuxt.config.js、vite.config.js）
5. HTML 文件——索引文件中的 meta 标签或 <base> 标签
6. README 或文档中提及的线上网站 URL

第 2 步：确认或询问域名

如果检测到了域名，请用户确认或提供其他域名：

“我检测到此网站似乎使用域名 [DETECTED_DOMAIN]。这是正确的吗？如果不是，请提供正确的域名。”

如果无法检测到域名，请直接询问用户：

“我无法自动检测此网站的域名。AI 摘要链接应使用哪个域名？（例如，https://example.com）”

第 3 步：规范化并保存域名

• 如果用户提供的域名不含协议，则在前面添加 https://
• 删除末尾的斜杠
• 将规范化后的域名保存为 ${WEBSITE_URL}，供后续步骤使用

规范化示例：

• example.com → https://example.com
• https://example.com/ → https://example.com
• http://example.com → 保持原样（用户可能有特定要求）

---

前置条件：决定是否生成 llms.txt

确认域名后，询问用户：

“你还希望我为此网站生成 llms.txt 文件吗？此文件有助于 AI 模型更好地理解网站内容和结构，从而提升 AI 生成摘要的质量。

• 是：我会创建一份精心整理的 llms.txt 文件，并让页脚组件引用它
• 否：我只会创建页脚组件，并在 AI 提示词中引导用户直接浏览网站”

将用户的选择保存为 ${INCLUDE_LLMS_TXT}（true/false）。

---

第 1 步：生成 llms.txt 文件（可选——仅当用户选择“是”时）

如果用户选择不生成 llms.txt 文件，则完全跳过此步骤。

为指定网站生成高质量的 llms.txt 文件，帮助大模型快速了解并引用网站最有价值的内容。

分析网站的内容层级

• 检查任何可用的 XML 或 HTML 站点地图（产品、页面、文章），并浏览导航菜单，以确定主要产品类别、服务、重要信息页面以及博客或新闻文章
• 重点关注顶级类别和有代表性的子类别或关键产品，而不是罗列每一个 URL
• 确定重要的支持或政策页面（例如“关于我们”“联系我们”“条款”“隐私”“配送与退货”）

选择并整理内容

• 为每个主要类别选择一个主落地页，以及几个有代表性的子类别或高价值产品页面
• 添加权威指南、操作文章、计算器、培训项目或其他资源的链接
• 选择少量展示不同主题的博客文章或案例研究（教程、行业洞察、成功案例）。避免列出几十篇文章
• 排除结账流程、登录页面或营销噱头等价值较低的页面

撰写清晰的描述

• 使用简洁、客观的描述（10-15 个词），说明每个页面涵盖的内容
• 避免夸大宣传或重复页面标题中已有的信息
• 概述子类别时，可将类别放在括号中以简洁呈现

使用 Markdown 编写 llms.txt

• 以 H1 标题开头，包含网站或公司名称和简短说明
• 添加一个以 > 开头的引用块，简洁说明该企业的业务及其服务对象
• 可选择添加一句话，说明此列表经过整理，供 AI 使用
• 使用 H2 标题组织内容，例如：

  • 产品类别（或服务型企业的“服务”）

  • 代表性页面或 ## 热门产品

  • 指南与资源

  • 文章与案例研究

  • 政策与支持

• 在相应章节下，将每个链接列为项目符号（- [标题](URL)：描述）
• 使用 UTF-8 编码保存文件，并通过精心筛选而非穷举列出所有 URL，确保文件远低于 100 KB
• 可选添加“使用指南”章节，说明希望 AI 模型如何注明出处或使用内容，并加入类似 `` 的 HTML 注释以跟踪版本

验证并发布

• 确认所有 URL 均返回 HTTP 200，且可公开访问
• 检查 Markdown 结构（一个 H1、正确的标题和项目符号）
• 将最终的 llms.txt 放在网站根目录；如果可以，也在 robots.txt 中添加一行（Llmstxt: /llms.txt），以便发现该文件
• 规划定期更新（例如每季度一次），以反映产品、服务或内容的变化

交付内容

按照上述格式，在当前网站的已提供服务的 web 根目录中提供完整的 llms.txt 文件内容。

---

第 2 步：创建 AI 摘要请求页脚组件

按照以下规格创建一个“AI 摘要请求”页脚组件。

组件结构

• 居中区域，包含标题和图标行
• 标题文本：“请求获取 [COMPANY_NAME] 的 AI 摘要”
• 一行 5 个可点击的 AI 平台图标，顺序必须严格如下：ChatGPT、Claude、Gemini、Grok、Perplexity

视觉样式

• 容器：弹性纵向布局，居中对齐，垂直间距 16px
• 标题：文本居中，基础字体大小（16px），中等字重，语义灰色（#111827 或等效颜色）
• 图标容器：弹性横向布局，居中对齐，水平间距 12px，允许换行
• 每个图标链接：可点击区域为 40x40px，可见图标为 28x28px，背景为圆形
• 图标：应用 CSS 滤镜：brightness(0)，实现单色黑色效果
• 圆形内边距：6px（相当于 1.5rem）
• 悬停效果：使用 cubic-bezier(0.4, 0, 0.2, 1) 过渡，在 150ms 内将尺寸缩放至 1.1 倍

图标资源

重要：此技能在 resources/ 目录中包含捆绑的 SVG 图标文件。必须使用这些指定图标——不得使用通用图标库、搜索替代品或自行制作图标。

捆绑图标（必需）

将这些 SVG 文件从 resources/ 复制到用户项目的资源目录：

平台	文件	描述
ChatGPT	resources/chatgpt.svg	六边形花朵／光圈图案，由相互交错的弧形片段组成
Claude	resources/claude.svg	抽象几何图案（不是 Anthropic 的反斜杠标志）
Gemini	resources/gemini.svg	四角星／闪光图标
Grok	resources/grok.svg	棱角分明的晶体／三角形图案（不是 X/Twitter 标志）
Perplexity	resources/perplexity.svg	带有等距立方体透视效果的六边形图案

实现步骤

1. 将图标复制到项目中：将这 5 个 SVG 文件从此技能的 resources/ 目录复制到用户的项目中（例如 /public/icons/ai/ 或 /assets/icons/）
2. 在组件中引用：在页脚组件中使用复制后的 SVG 文件的相对路径
3. 请勿替换：这些是唯一获准使用的图标；请勿使用 CDN 链接、图标库，也不要根据描述重新绘制

图标验证

完成前，请目视确认：

• ChatGPT 图标不是对话气泡或通用聊天图标
• Claude 图标不是简单的反斜杠或文本字符
• Gemini 图标不是星座或双子座符号
• Grok 图标不是 X/Twitter 小鸟或标志
• Perplexity 图标不是问号或通用 Markdown 符号

AI 平台链接

生成指向各 AI 平台并附带预先编写提示词的 URL 编码链接：

1. ChatGPT：https://chat.openai.com/?q=[ENCODED_PROMPT]
2. Claude：https://claude.ai/new?q=[ENCODED_PROMPT]
3. Gemini：https://gemini.google.com/?q=[ENCODED_PROMPT]
4. Grok：https://grok.com?q=[ENCODED_PROMPT]
5. Perplexity：https://www.perplexity.ai/?q=[ENCODED_PROMPT]

提示词模板（根据 llms.txt 的决定进行选择）

根据用户在前置步骤中对 llms.txt 的决定，使用相应的模板。

模板变量：

• ${WEBSITE_URL} - 在前置步骤中确认／规范化后的域名
• ${COMPANY_NAME} - 公司／网站名称（如果无法从代码库中明确判断，请询问用户）
• ${KEY_ASPECTS} - 根据业务类型进行自定义（例如，服务类填写“功能、定价、交付内容”；电商类填写“产品、配送、退货”）

使用 llms.txt（如果用户选择生成 llms.txt）

Please read the structured information at ${WEBSITE_URL}/llms.txt to understand ${COMPANY_NAME}.

As a potential client, I want to concretely understand what I will receive with ${COMPANY_NAME} (${WEBSITE_URL}).

Detail step by step what the service includes: ${KEY_ASPECTS}.

Explain it simply, as if you were describing the real experience of the service.

不使用 llms.txt（如果用户选择不生成 llms.txt）

Please visit and analyze ${WEBSITE_URL} to understand ${COMPANY_NAME}.

As a potential client, I want to concretely understand what I will receive with ${COMPANY_NAME} (${WEBSITE_URL}).

Detail step by step what the service includes: ${KEY_ASPECTS}.

Explain it simply, as if you were describing the real experience of the service.

实现检查清单

• 检测网站域名，或询问用户并获得确认
• 询问用户是否要生成 llms.txt 文件
• 如果选择生成 llms.txt：生成 llms.txt 并将其放在网站根目录
• 将全部 5 个 SVG 图标从 resources/ 复制到项目资源目录
• 根据 llms.txt 的决定选择正确的提示词模板
• 将组件放在页脚中的版权声明上方
• 使用 encodeURIComponent() 或等效方法对提示词进行 URL 编码
• 每个链接都在新标签页中打开：target="_blank" rel="noopener noreferrer"
• 添加 aria-label：“获取来自 [Platform Name] 的 AI 摘要”
• 测试全部 5 个平台链接，确认提示词能否正确预填
• 确认图标使用的是捆绑的 SVG（不是通用替代图标）
• 应用 brightness(0) 滤镜，以保持外观统一的单色效果
• 确保移动设备上的最小触控区域为 44x44px
• 响应式布局：屏幕宽度小于 640px 时，图标应换行

---

技术说明

• llms.txt 文件遵循新兴标准，用于提供 AI 可读取的网站文档
• 页脚组件应与框架无关，但可以适配 React、Vue、Svelte 或原生 HTML/CSS
• 所有 URL 都必须正确编码，以处理提示词中的特殊字符
• 组件应具备无障碍访问能力，并遵循 WCAG 2.1 指南

捆绑资源

resources/

包含各 AI 平台的官方 SVG 图标：

• chatgpt.svg - OpenAI ChatGPT 六边形光圈图标
• claude.svg - Anthropic Claude 几何图案图标
• gemini.svg - Google Gemini 四角星图标
• grok.svg - xAI Grok 晶体图案图标
• perplexity.svg - Perplexity 六边形立方体图标

必须将这些图标复制到用户的项目中并直接使用。不得使用其他图标替代。

成功标准

成功的实现应当：

1. 在继续操作前向用户确认网站域名
2. 询问用户是否要生成 llms.txt
3. 如果用户选择生成 llms.txt：生成经过筛选、结构清晰且小于 100KB 的 llms.txt 文件
4. 创建品牌标识正确、视觉风格统一的页脚组件
5. 根据用户对 llms.txt 的选择使用相应的提示词模板
6. 生成可正常使用的链接，点击后可在各 AI 平台中预填提示词
7. 在桌面设备和移动设备上均可访问
8. 使用 resources/ 中随附的 SVG 图标（不得使用其他图标替代）