Back to Details

ai-summary-request

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

AI Summary Request

AI摘要请求

Overview

概述

This skill creates a footer component with AI platform icons that allow visitors to request AI summaries of a website. The workflow begins by detecting and confirming the website domain, then asks whether to optionally generate an 
llms.txt
file for enhanced AI discoverability.
本Skill会创建一个带有AI平台图标的页脚组件，访客可以点击这些图标请求生成网站的AI摘要。工作流首先会检测并确认网站域名，随后询问用户是否需要生成
llms.txt
文件以提升AI可发现性。

When to Use This Skill

何时使用本Skill

Use this skill when:
  • User wants to add AI platform integration buttons to their site
  • User wants visitors to easily get AI summaries of their business
  • User mentions "AI summary" or AI platform buttons
  • User wants to create an 
    llms.txt
    file for their website (optional)
  • User asks about making their website AI-discoverable
适用于以下场景：
  • 用户想要为网站添加AI平台集成按钮
  • 用户希望访客可以轻松获取其业务的AI摘要
  • 用户提及“AI摘要”或AI平台按钮相关需求
  • 用户想要为网站创建
    llms.txt
    文件（可选）
  • 用户询问如何提升网站的AI可发现性

Workflow

工作流

PREREQUISITE: Domain Detection and Confirmation

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

Before proceeding with any steps, you MUST determine the website domain:
在执行任何步骤前，你必须先确定网站域名：

Step 1: Attempt automatic detection

步骤1：尝试自动检测

Search for domain information in this priority order:
  1. Environment files (
    .env
    , 
    .env.local
    , 
    .env.production
    ) - look for 
    SITE_URL
    , 
    BASE_URL
    , 
    NEXT_PUBLIC_URL
    , 
    NUXT_PUBLIC_SITE_URL
    , 
    VITE_SITE_URL
    , or similar
  2. Deployment configs (
    vercel.json
    , 
    netlify.toml
    , 
    firebase.json
    , 
    fly.toml
    ) - check for domain/alias settings
  3. CNAME files in 
    public/
    or root directory
  4. Configuration files (
    package.json
    homepage field, 
    next.config.js
    , 
    nuxt.config.js
    , 
    vite.config.js
    )
  5. HTML files - meta tags or 
    <base>
    tags in index files
  6. README or documentation mentioning the live site URL
按以下优先级顺序搜索域名信息：
  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

Step 2: Confirm or request domain

步骤2：确认或请求域名

If a domain is detected, ask the user to confirm or provide an alternative:
"I detected that this site appears to use the domain [DETECTED_DOMAIN]. Is this correct? If not, please provide the correct domain."
If no domain can be detected, ask the user directly:
"I couldn't automatically detect the domain for this website. What domain should be used for the AI summary links? (e.g., https://example.com)"
如果检测到域名，请询问用户确认或提供替代域名：
"我检测到本站点使用的域名似乎是 [DETECTED_DOMAIN]，是否正确？如果不正确，请提供正确的域名。"
如果未检测到域名，请直接询问用户：
"我无法自动检测到本网站的域名，AI摘要链接应该使用哪个域名？（例如：https://example.com）"

Step 3: Normalize and store the domain

步骤3：标准化并存储域名

  • If the user provides a domain without a protocol, prepend 
    https://
  • Remove any trailing slashes
  • Store the normalized domain as 
    ${WEBSITE_URL}
    for use in subsequent steps
Example normalizations:
  • example.com
    → 
    https://example.com
  • https://example.com/
    → 
    https://example.com
  • http://example.com
    → keep as-is (user may have specific requirements)
  • 如果用户提供的域名没有协议头，在前面添加
    https://
  • 移除末尾的斜杠
  • 将标准化后的域名存储为
    ${WEBSITE_URL}
    ，供后续步骤使用
标准化示例：
  • example.com
    → 
    https://example.com
  • https://example.com/
    → 
    https://example.com
  • http://example.com
    → 保留原样（用户可能有特殊需求）

PREREQUISITE: llms.txt Decision

前置条件：llms.txt生成决策

After confirming the domain, ask the user:
"Would you like me to also generate an 
llms.txt
file for this website? This file helps AI models better understand your site's content and structure, which can improve the quality of AI-generated summaries.
  • Yes: I'll create a curated llms.txt file and the footer component will reference it
  • No: I'll create just the footer component, and the AI prompt will direct users to explore the website directly"
Store the user's choice as 
${INCLUDE_LLMS_TXT}
(true/false).
确认域名后，询问用户：
"你是否需要我同时为这个网站生成
llms.txt
文件？该文件可以帮助AI模型更好地理解站点的内容和结构，从而提升AI生成摘要的质量。
  • 是：我会创建一个精心整理的llms.txt文件，页脚组件也会引用该文件
  • 否：我只会创建页脚组件，AI提示词会引导用户直接访问网站进行探索"
将用户的选择存储为
${INCLUDE_LLMS_TXT}
（true/false）。

STEP 1: Generate llms.txt File (OPTIONAL - Only if user chose "Yes")

步骤1：生成llms.txt文件（可选 - 仅当用户选择“是”时执行）

Skip this step entirely if the user chose not to generate an llms.txt file.
Generate a high-quality 
llms.txt
file for a given website that helps language models quickly understand and reference the site's most valuable content.
如果用户选择不生成llms.txt文件，直接跳过本步骤。
为指定网站生成高质量的
llms.txt
文件，帮助大语言模型快速理解和引用站点最有价值的内容。

Analyze the Website's Content Hierarchy

分析网站的内容层级

  • Inspect any available XML or HTML sitemaps (product, page, post) and explore navigation menus to identify major product categories, services, key informational pages, and blog or news posts
  • Focus on top-level categories and representative subcategories or key products, rather than listing every single URL
  • Identify important support or policy pages (e.g., About, Contact, Terms, Privacy, Shipping & Returns)
  • 检查所有可用的XML或HTML站点地图（产品、页面、文章），浏览导航菜单，识别主要产品分类、服务、关键信息页面以及博客或新闻文章
  • 聚焦于顶级分类和代表性子分类或核心产品，无需列出每一个URL
  • 识别重要的支持或政策页面（例如关于我们、联系我们、条款、隐私政策、配送与退换货）

Select and Curate Content

筛选和整理内容

  • For each major category, select a primary landing page and a few representative subcategories or high-value product pages
  • Include links to authoritative guides, how-to articles, calculators, training programs or other resources
  • Choose a handful of blog posts or case studies that showcase different topics (tutorials, industry insights, success stories). Avoid listing dozens of posts
  • Exclude low-value pages such as checkout flows, login pages, or marketing fluff
  • 为每个主要分类选择一个主落地页和几个代表性的子分类或高价值产品页面
  • 包含权威指南、操作教程、计算器、培训项目或其他资源的链接
  • 选择少量展示不同主题的博客文章或案例研究（教程、行业洞察、成功案例），避免列出数十篇文章
  • 排除低价值页面，例如结账流程、登录页面或营销软文

Draft Clear Descriptions

撰写清晰的描述

  • Use concise, factual descriptions (10-15 words) that explain what each page covers
  • Avoid hype or redundant repetition of the page title
  • When summarizing subcategories, group them in parentheses for brevity
  • 使用简洁、 factual的描述（10-15字）说明每个页面的内容
  • 避免夸大宣传或重复页面标题
  • 总结子分类时，为了简洁可以将其放在括号中分组

Build the llms.txt in Markdown

用Markdown构建llms.txt

  • Start with an H1 title containing the website or company name and a short descriptor
  • Add a blockquote (prefaced by >) that succinctly describes what the business does and who it serves
  • Optionally include a sentence explaining that the list is curated for AI consumption
  • Organize content with H2 headings such as:

    • Product categories (or Services if it's a service business)

    • Representative pages or ## Popular products

    • Guides & resources

    • Articles & case studies

    • Policies & support

  • List each link as a bullet (
    - [Title](URL): description
    ) under the appropriate section
  • Keep the file in UTF-8 encoding and ensure it stays well under 100 KB by curating rather than exhaustively listing every URL
  • Add an optional "Usage guidelines" section stating how you'd like AI models to attribute or use the content, and include an HTML comment like 
    <!-- Last updated: YYYY-MM-DD -->
    for version tracking
  • 以H1标题开头，包含网站或公司名称和简短描述
  • 添加块引用（以>开头），简洁说明业务内容和服务对象
  • 可选择添加一句话说明该列表是为AI使用整理的
  • 使用H2标题组织内容，例如：

    • 产品分类（如果是服务类企业则为## 服务）

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

    • 指南与资源

    • 文章与案例研究

    • 政策与支持

  • 在对应分类下以列表项形式展示每个链接（
    - [标题](URL): 描述
    ）
  • 文件使用UTF-8编码，通过精选内容而非穷举所有URL，确保文件大小远低于100 KB
  • 可选择添加“使用指南”部分，说明你希望AI模型如何归因或使用内容，同时添加HTML注释
    <!-- Last updated: YYYY-MM-DD -->
    用于版本跟踪

Validate and Publish

验证和发布

  • Verify that all URLs return HTTP 200 and are publicly accessible
  • Check the Markdown structure (one H1, proper headings and bullets)
  • Place the final 
    llms.txt
    at the website's root and, if possible, add a line in 
    robots.txt
    (
    Llmstxt: /llms.txt
    ) to aid discovery
  • Plan regular updates (e.g., quarterly) to reflect changes in products, services or content
  • 确认所有URL返回HTTP 200状态码且可公开访问
  • 检查Markdown结构（一个H1标题、正确的标题层级和列表格式）
  • 将最终的
    llms.txt
    放在网站根目录，如果可能的话，在
    robots.txt
    中添加一行
    Llmstxt: /llms.txt
    以提升可发现性
  • 规划定期更新（例如每季度），以反映产品、服务或内容的变化

Deliverable

交付物

Provide the full 
llms.txt
file content, formatted as described above, in the served web root of the current website.
在当前网站的web根目录下提供符合上述格式要求的完整
llms.txt
文件内容。

STEP 2: Create AI Summary Request Footer Component

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

Create an "AI Summary Request" footer component with the following specifications.
按照以下规范创建“AI摘要请求”页脚组件。

Component Structure

组件结构

  • Centered section containing a header and icon row
  • Header text: "Request an AI summary of [COMPANY_NAME]"
  • Row of 5 clickable AI platform icons in this exact order: ChatGPT, Claude, Gemini, Grok, Perplexity
  • 居中区块，包含标题和图标行
  • 标题文本：“请求获取[COMPANY_NAME]的AI摘要”
  • 5个可点击的AI平台图标行，顺序严格为：ChatGPT、Claude、Gemini、Grok、Perplexity

Visual Styling

视觉样式

  • Container: flex column, centered alignment, 16px vertical gap
  • Header: centered text, base font size (16px), medium font-weight, semantic gray color (#111827 or equivalent)
  • Icon container: flex row, centered, 12px horizontal gap, wrap-enabled
  • Each icon link: 40x40px clickable area with 28x28px visible icon, rounded-full background
  • Icons: Apply CSS filter: 
    brightness(0)
    for monochrome black effect
  • Padding within circle: 6px (1.5rem equivalent)
  • Hover effect: transform scale(1.1) with cubic-bezier(0.4, 0, 0.2, 1) transition, 150ms duration
  • 容器：flex列布局，居中对齐，16px垂直间距
  • 标题：居中文本，基础字号（16px），中等字重，语义灰色（#111827或等效色值）
  • 图标容器：flex行布局，居中，12px水平间距，支持自动换行
  • 每个图标链接：40x40px点击区域，28x28px可见图标，全圆角背景
  • 图标：应用CSS滤镜
    brightness(0)
    实现纯黑单色效果
  • 圆形内边距：6px（等效1.5rem）
  • hover效果：transform scale(1.1)，使用cubic-bezier(0.4, 0, 0.2, 1)过渡，时长150ms

Icon Assets

图标资源

CRITICAL: This skill includes bundled SVG icon files in the 
resources/
directory. You MUST use these exact icons - do NOT use generic icon libraries, search for alternatives, or create substitutes.
重要提示：本Skill的
resources/
目录包含打包的SVG图标文件，你必须使用这些图标，请勿使用通用图标库、搜索替代图标或自行创建图标。

Bundled Icons (Required)

打包图标（必须使用）

Copy these SVG files from 
resources/
to the user's project assets directory:
PlatformFileDescription
ChatGPT
resources/chatgpt.svg
Hexagonal flower/aperture pattern with interlocking curved segments
Claude
resources/claude.svg
Abstract geometric pattern (NOT the Anthropic backslash logo)
Gemini
resources/gemini.svg
Four-pointed star/sparkle icon
Grok
resources/grok.svg
Angular crystalline/triangular pattern (NOT the X/Twitter logo)
Perplexity
resources/perplexity.svg
Hexagonal pattern with isometric cube perspective
将这些SVG文件从
resources/
复制到用户项目的资源目录：
平台文件描述
ChatGPT
resources/chatgpt.svg
六边形花朵/光圈图案，带有互锁的弧形片段
Claude
resources/claude.svg
抽象几何图案（不是Anthropic的反斜杠logo）
Gemini
resources/gemini.svg
四角星/闪烁图标
Grok
resources/grok.svg
棱角分明的晶体/三角形图案（不是X/Twitter的logo）
Perplexity
resources/perplexity.svg
带有等距立方体透视效果的六边形图案

Implementation Steps

实现步骤

  1. Copy icons to project: Copy all 5 SVG files from this skill's 
    resources/
    directory to the user's project (e.g., 
    /public/icons/ai/
    or 
    /assets/icons/
    )
  2. Reference in component: Use relative paths to the copied SVG files in the footer component
  3. Do NOT substitute: These are the only approved icons - do not use CDN links, icon libraries, or recreate from descriptions
  1. 复制图标到项目：将本Skill的
    resources/
    目录下的所有5个SVG文件复制到用户项目中（例如
    /public/icons/ai/
    或
    /assets/icons/
    ）
  2. 在组件中引用：在页脚组件中使用复制后的SVG文件的相对路径
  3. 请勿替换：这些是唯一获批的图标，不要使用CDN链接、图标库或根据描述重新创建

Icon Validation

图标验证

Before finalizing, visually confirm:
  • ChatGPT icon is NOT a speech bubble or generic chat icon
  • Claude icon is NOT a simple backslash or text character
  • Gemini icon is NOT a constellation or zodiac twins symbol
  • Grok icon is NOT the X/Twitter bird or logo
  • Perplexity icon is NOT a question mark or generic markdown symbol
最终确认前，目视确认：
  • ChatGPT图标不是聊天气泡或通用聊天图标
  • Claude图标不是简单的反斜杠或文字字符
  • Gemini图标不是星座或双子座符号
  • Grok图标不是X/Twitter的小鸟或logo
  • Perplexity图标不是问号或通用Markdown符号

AI Platform Links

AI平台链接

Generate URL-encoded links to each AI platform with pre-composed prompt:
  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]
为每个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]

Prompt Templates (Select based on llms.txt decision)

提示词模板（根据llms.txt的生成决策选择）

Use the appropriate template based on the user's llms.txt decision from the prerequisite step.
Template variables:
  • ${WEBSITE_URL}
    - The confirmed/normalized domain from prerequisite step
  • ${COMPANY_NAME}
    - The company/site name (ask user if not obvious from codebase)
  • ${KEY_ASPECTS}
    - Customize based on the business type (e.g., "features, pricing, deliverables" for services; "products, shipping, returns" for e-commerce)
根据前置步骤中用户对llms.txt的选择，使用对应的模板。
模板变量：
  • ${WEBSITE_URL}
    - 前置步骤中确认/标准化的域名
  • ${COMPANY_NAME}
    - 公司/站点名称（如果代码库中不明确，询问用户）
  • ${KEY_ASPECTS}
    - 根据业务类型自定义（例如服务类业务填“功能、定价、交付物”；电商类业务填“产品、配送、退换货”）

WITH llms.txt (if user chose to generate llms.txt)

包含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.
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.

WITHOUT llms.txt (if user chose not to generate llms.txt)

不包含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.
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.

Implementation Checklist

实现检查清单

  • Detect or ask for website domain and get user confirmation
  • Ask user whether to generate llms.txt file
  • If llms.txt chosen: Generate and place llms.txt at website root
  • Copy all 5 SVG icons from 
    resources/
    to project assets directory
  • Select correct prompt template based on llms.txt decision
  • Place component in footer, above copyright notice
  • URL-encode prompt using 
    encodeURIComponent()
    or equivalent
  • Each link opens in new tab: 
    target="_blank" rel="noopener noreferrer"
  • Add aria-label: "Get AI summary from [Platform Name]"
  • Test all 5 platform links verify prompt pre-population works
  • Verify icons are using the bundled SVGs (NOT generic alternatives)
  • Apply 
    brightness(0)
    filter for consistent monochrome appearance
  • Ensure 44x44px minimum touch target for mobile accessibility
  • Responsive: icons wrap on screens < 640px width
  • 检测或询问网站域名并获得用户确认
  • 询问用户是否需要生成llms.txt文件
  • 如果选择生成llms.txt：生成llms.txt并放在网站根目录
  • 将
    resources/
    目录下的所有5个SVG图标复制到项目资源目录
  • 根据llms.txt的生成决策选择正确的提示词模板
  • 将组件放在页脚，版权声明上方
  • 使用
    encodeURIComponent()
    或等效方法对提示词进行URL编码
  • 所有链接在新标签页打开：
    target="_blank" rel="noopener noreferrer"
  • 添加aria-label：“从[平台名称]获取AI摘要”
  • 测试所有5个平台链接，确认提示词预填充正常
  • 确认图标使用的是打包的SVG（不是通用替代图标）
  • 应用
    brightness(0)
    滤镜实现统一的单色外观
  • 确保移动端可访问的最小点击区域为44x44px
  • 响应式：屏幕宽度<640px时图标自动换行

Technical Notes

技术说明

  • The 
    llms.txt
    file follows the emerging standard for AI-readable site documentation
  • The footer component should be framework-agnostic but can be adapted for React, Vue, Svelte, or vanilla HTML/CSS
  • All URLs must be properly encoded to handle special characters in the prompt
  • The component should be accessible and follow WCAG 2.1 guidelines
  • The 
    llms.txt
    file follows the emerging standard for AI-readable site documentation
  • 页脚组件是框架无关的，可适配React、Vue、Svelte或原生HTML/CSS
  • 所有URL必须正确编码，以处理提示词中的特殊字符
  • 组件应当具备可访问性，遵循WCAG 2.1规范

Bundled Resources

打包资源

resources/

resources/

Contains the official SVG icons for each AI platform:
  • chatgpt.svg - OpenAI ChatGPT hexagonal aperture icon
  • claude.svg - Anthropic Claude geometric pattern icon
  • gemini.svg - Google Gemini four-pointed star icon
  • grok.svg - xAI Grok crystalline pattern icon
  • perplexity.svg - Perplexity hexagonal cube icon
These icons MUST be copied to the user's project and used directly. Do not substitute with alternatives.
包含每个AI平台的官方SVG图标：
  • chatgpt.svg - OpenAI ChatGPT六边形光圈图标
  • claude.svg - Anthropic Claude几何图案图标
  • gemini.svg - Google Gemini四角星图标
  • grok.svg - xAI Grok晶体图案图标
  • perplexity.svg - Perplexity六边形立方体图标
这些图标必须复制到用户项目中直接使用，请勿替换为其他图标。

Success Criteria

成功标准

A successful implementation should:
  1. Confirm the website domain with the user before proceeding
  2. Ask the user whether to include llms.txt generation
  3. If llms.txt chosen: Produce a curated, well-structured 
    llms.txt
    file under 100KB
  4. Create a visually consistent footer component with correct branding
  5. Use the appropriate prompt template based on the user's llms.txt decision
  6. Generate working links that pre-populate prompts in each AI platform
  7. Be accessible on both desktop and mobile devices
  8. Use the bundled SVG icons from 
    resources/
    (no substitutes)
成功的实现应当满足：
  1. 执行前与用户确认网站域名
  2. 询问用户是否需要生成llms.txt
  3. 如果选择生成llms.txt：生成大小低于100KB、结构规范的精选
    llms.txt
    文件
  4. 创建视觉风格统一、品牌标识正确的页脚组件
  5. 根据用户的llms.txt生成决策使用对应的提示词模板
  6. 生成可正常工作的链接，能在各个AI平台中预填充提示词
  7. 在桌面和移动设备上都具备可访问性
  8. 使用
    resources/
    目录下打包的SVG图标（无替代）