docs: explain AI-friendly access

docs/intro.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-import {DocHero, FeatureCards, ProjectPanel} from '@site/src/components/DocVisuals';
+import {AiAccess, DocHero, FeatureCards, ProjectPanel} from '@site/src/components/DocVisuals';
 
 # Prism-Committee 文档
 
@@ -52,3 +52,14 @@ import {DocHero, FeatureCards, ProjectPanel} from '@site/src/components/DocVisua
 ]} />
 
 </ProjectPanel>
+
+<AiAccess
+  title="让 AI 更准确地读取本站"
+  description="本站提供中文文档索引和每页 Markdown 原文。让 AI 先读取索引，再按需获取具体页面，可以减少导航干扰和无关内容。"
+  indexLabel="中文文档索引"
+  pageLabel="单页 Markdown"
+  copyLabel="复制 AI 提示词"
+  copiedLabel="已复制"
+  failedLabel="复制失败"
+  prompt="请读取 https://docs.akihito.dpdns.org/llms.txt 获取本站中文文档索引，并按需读取其中链接的 Markdown 内容。回答时请以这些文档为主要依据，注明相关页面 URL；若文档没有提供答案，请明确说明，不要猜测。"
+/>

i18n/en/docusaurus-plugin-content-docs/current/intro.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-import {DocHero, FeatureCards, ProjectPanel} from '@site/src/components/DocVisuals';
+import {AiAccess, DocHero, FeatureCards, ProjectPanel} from '@site/src/components/DocVisuals';
 
 # Prism-Committee Docs
 
@@ -53,6 +53,17 @@ import {DocHero, FeatureCards, ProjectPanel} from '@site/src/components/DocVisua
 
 </ProjectPanel>
 
+<AiAccess
+  title="Help AI read this site accurately"
+  description="This site publishes a Chinese documentation index and Markdown for every page. Ask AI to read the index first, then fetch only the relevant pages."
+  indexLabel="Chinese documentation index"
+  pageLabel="Per-page Markdown"
+  copyLabel="Copy AI prompt"
+  copiedLabel="Copied"
+  failedLabel="Copy failed"
+  prompt="Read https://docs.akihito.dpdns.org/llms.txt to discover this site's Chinese documentation, then fetch the linked Markdown pages as needed. Base your answer primarily on those documents and cite the relevant page URLs. If the documentation does not contain the answer, say so clearly instead of guessing."
+/>
+
 :::info[Feedback and issues]
 Report WebShopX or documentation issues at [Prism-Committee/WebShopX-Issues](https://github.com/Prism-Committee/WebShopX-Issues).
 :::

src/components/DocVisuals/index.tsx

@@ -1,4 +1,4 @@
-import React, {type ReactNode} from 'react';
+import React, {type ReactNode, useEffect, useRef, useState} from 'react';
 import Link from '@docusaurus/Link';
 import {useLocation} from '@docusaurus/router';
 import styles from './styles.module.css';
@@ -205,3 +205,78 @@ export function DocHero({
     </div>
   );
 }
+
+export function AiAccess({
+  title,
+  description,
+  indexLabel,
+  pageLabel,
+  copyLabel,
+  copiedLabel,
+  failedLabel,
+  prompt,
+}: {
+  title: string;
+  description: string;
+  indexLabel: string;
+  pageLabel: string;
+  copyLabel: string;
+  copiedLabel: string;
+  failedLabel: string;
+  prompt: string;
+}) {
+  const [status, setStatus] = useState<'idle' | 'copied' | 'failed'>('idle');
+  const resetTimer = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  );
+
+  useEffect(
+    () => () => {
+      if (resetTimer.current) {
+        clearTimeout(resetTimer.current);
+      }
+    },
+    [],
+  );
+
+  const copyPrompt = async () => {
+    try {
+      await navigator.clipboard.writeText(prompt);
+      setStatus('copied');
+    } catch {
+      setStatus('failed');
+    }
+
+    if (resetTimer.current) {
+      clearTimeout(resetTimer.current);
+    }
+    resetTimer.current = setTimeout(() => setStatus('idle'), 2000);
+  };
+
+  const buttonLabel =
+    status === 'copied'
+      ? copiedLabel
+      : status === 'failed'
+        ? failedLabel
+        : copyLabel;
+
+  return (
+    <section className={styles.aiAccess}>
+      <div>
+        <span className={styles.aiEyebrow}>AI-ready docs</span>
+        <h2 className={styles.aiTitle}>{title}</h2>
+        <p className={styles.aiDescription}>{description}</p>
+        <div className={styles.aiLinks}>
+          <Link to="https://docs.akihito.dpdns.org/llms.txt">
+            {indexLabel}: /llms.txt
+          </Link>
+          <span>{pageLabel}: /path/to/page.md</span>
+        </div>
+      </div>
+      <button className={styles.aiCopyButton} type="button" onClick={copyPrompt}>
+        <span aria-hidden="true">{status === 'copied' ? '✓' : '⧉'}</span>
+        <span aria-live="polite">{buttonLabel}</span>
+      </button>
+    </section>
+  );
+}

src/components/DocVisuals/styles.module.css

@@ -281,6 +281,76 @@
   margin-top: .32rem;
 }
 
+.aiAccess {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  margin: 1.75rem 0;
+  padding: 1.35rem 1.45rem;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 16px;
+  background: linear-gradient(135deg, var(--ifm-color-primary-contrast-background), var(--ifm-background-surface-color));
+}
+
+.aiEyebrow {
+  display: block;
+  margin-bottom: .3rem;
+  color: var(--ifm-color-primary);
+  font-size: .75rem;
+  font-weight: 700;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+
+.aiTitle {
+  margin: 0 0 .4rem;
+  font-size: 1.2rem;
+}
+
+.aiDescription {
+  max-width: 48rem;
+  margin: 0;
+  color: var(--ifm-color-emphasis-700);
+  line-height: 1.6;
+}
+
+.aiLinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .45rem 1rem;
+  margin-top: .7rem;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: .82rem;
+}
+
+.aiCopyButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  gap: .45rem;
+  min-height: 2.5rem;
+  padding: .5rem .85rem;
+  border: 1px solid var(--ifm-color-primary);
+  border-radius: .5rem;
+  background: var(--ifm-color-primary);
+  color: var(--ifm-color-white);
+  cursor: pointer;
+  font: inherit;
+  font-size: .875rem;
+  font-weight: 700;
+}
+
+.aiCopyButton:hover {
+  background: var(--ifm-color-primary-dark);
+}
+
+.aiCopyButton:focus-visible {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 2px;
+}
+
 @media (max-width: 760px) {
   .projectHeader {
     flex-direction: column;
@@ -289,6 +359,11 @@
   .projectLinks {
     justify-content: flex-start;
   }
+
+  .aiAccess {
+    align-items: stretch;
+    flex-direction: column;
+  }
 }
 
 @media (max-width: 600px) {